diff --git a/package-lock.json b/package-lock.json index cd977e8df1d..6da10054600 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35612,15 +35612,15 @@ } }, "node_modules/terra-action-header": { - "version": "2.92.0", - "resolved": "https://registry.npmjs.org/terra-action-header/-/terra-action-header-2.92.0.tgz", - "integrity": "sha512-4okkJMk2tBljXxy6q8a7ZEeRclSOc0Pg5A4TVimrKu3LJ5hs/hydXdUjIYkdmK/Y0DLViHw2ZPG0M+H0B1dMvg==", + "version": "2.93.0", + "resolved": "https://registry.npmjs.org/terra-action-header/-/terra-action-header-2.93.0.tgz", + "integrity": "sha512-4Zn32GL70J87lHgWAMoTE3xAO7Mp+eVdrQzWoYqPK5/3s7ezk9qIir6+2MQ3GKsy4ouL4mlOhFjMYdWlRCiTiQ==", "dependencies": { "@cerner/terra-docs": "^1.11.0", "classnames": "^2.2.5", "lodash.uniqueid": "^4.0.1", "prop-types": "^15.5.8", - "terra-button": "^3.76.0", + "terra-button": "^3.77.0", "terra-mixins": "^1.41.0", "terra-theme-context": "^1.0.0", "terra-visually-hidden-text": "^2.38.0" @@ -35780,9 +35780,9 @@ } }, "node_modules/terra-button": { - "version": "3.76.0", - "resolved": "https://registry.npmjs.org/terra-button/-/terra-button-3.76.0.tgz", - "integrity": "sha512-lOmu0WWQEe3OPrT5N51OlRswCj3IbtKSg/KrJY5yrrFWtdx/hBdYml/p+wjmL8W1FSWqE0XhrvC9B4vmi/hTsg==", + "version": "3.77.0", + "resolved": "https://registry.npmjs.org/terra-button/-/terra-button-3.77.0.tgz", + "integrity": "sha512-dH3MzUSRGesqeqqQcTuWQRGKBY0wF80Fced5WhfQn0aR9cy4eYHktUjMUK+2MZabyPFb5eAkffB3NcDIWUqPOg==", "dependencies": { "classnames": "^2.2.5", "keycode-js": "^3.1.0", @@ -35795,14 +35795,14 @@ } }, "node_modules/terra-button-group": { - "version": "3.78.0", - "resolved": "https://registry.npmjs.org/terra-button-group/-/terra-button-group-3.78.0.tgz", - "integrity": "sha512-yUC+ZkWH6GsqCpcvw4JrgqCvt9mGVZO/GBN+Zk5khnmd/oLcBKVdAGtSifMeZSdAFVx77rcCKoCJyOyCYRuqhg==", + "version": "3.79.0", + "resolved": "https://registry.npmjs.org/terra-button-group/-/terra-button-group-3.79.0.tgz", + "integrity": "sha512-pVk/5YBgXTA9cK+E0ME0c10hPOgVhRrkLsqsSXz+LrmsWw7UpVSsW242k0jLa4H0UbvtxOlgl3KMWxGLLpsWFQ==", "dependencies": { "classnames": "^2.2.5", "keycode-js": "^3.1.0", "prop-types": "^15.5.8", - "terra-button": "^3.76.0", + "terra-button": "^3.77.0", "terra-theme-context": "^1.0.0" }, "peerDependencies": { @@ -35967,14 +35967,14 @@ } }, "node_modules/terra-form-radio": { - "version": "4.53.0", - "resolved": "https://registry.npmjs.org/terra-form-radio/-/terra-form-radio-4.53.0.tgz", - "integrity": "sha512-ECBwcU0u29ecevaaWpTdywAdVvUu9xhFd/+L7viC9EelA9f6rPYo1tsXjLjCWwxS+JOaqnVO9IqSaDRKBDMHQg==", + "version": "4.54.0", + "resolved": "https://registry.npmjs.org/terra-form-radio/-/terra-form-radio-4.54.0.tgz", + "integrity": "sha512-76ywjPkUc6jcQgKJrAymMAlE/4FhjYDgZH+Zgyr0FZWJCoN6EvkkcfkABBaiFNZyFIwekI8CMFp01svihY0ZiQ==", "dependencies": { "classnames": "^2.2.5", "lodash.uniqueid": "^4.0.1", "prop-types": "^15.5.8", - "terra-button": "^3.76.0", + "terra-button": "^3.77.0", "terra-mixins": "^1.41.0", "terra-theme-context": "^1.0.0", "terra-visually-hidden-text": "^2.38.0" @@ -35986,9 +35986,9 @@ } }, "node_modules/terra-form-select": { - "version": "6.60.0", - "resolved": "https://registry.npmjs.org/terra-form-select/-/terra-form-select-6.60.0.tgz", - "integrity": "sha512-u0Zy/J0x4h5+ctuCCOExNCwv3ACIs3L1MOsh0hRCze57543ZpdVQjMGqdxhDNNrZfJI5SlUmQhQFSCtDdIiDjg==", + "version": "6.61.0", + "resolved": "https://registry.npmjs.org/terra-form-select/-/terra-form-select-6.61.0.tgz", + "integrity": "sha512-nuuSXpm7NirrsJP9NTbrnTI7/BhA/XvcHhKa0m3E6vfoh+sUndLhi41esIJPMOGFyZN4c6gfUomaS9SRcSppCQ==", "dependencies": { "classnames": "^2.2.5", "keycode-js": "^3.1.0", @@ -36064,9 +36064,9 @@ } }, "node_modules/terra-hyperlink": { - "version": "2.68.0", - "resolved": "https://registry.npmjs.org/terra-hyperlink/-/terra-hyperlink-2.68.0.tgz", - "integrity": "sha512-DOH3CHVIK09tmktEw7c9tkkRHKkUkks/nQqNXnse3/+/LfgsQhULfGMvIjtXLDPa5CBNN6U/QSL54s/jaW5vxA==", + "version": "2.69.0", + "resolved": "https://registry.npmjs.org/terra-hyperlink/-/terra-hyperlink-2.69.0.tgz", + "integrity": "sha512-Q9aVIreJBjHtZr4jMkA9ZycxRvhHipl58Je/eamPfKndpWYL5Hdm/DXuOAedIBshnjBD/QYTX7jScIVA5NJM8A==", "dependencies": { "classnames": "^2.2.5", "keycode-js": "^3.1.0", @@ -36244,15 +36244,15 @@ } }, "node_modules/terra-search-field": { - "version": "3.101.0", - "resolved": "https://registry.npmjs.org/terra-search-field/-/terra-search-field-3.101.0.tgz", - "integrity": "sha512-/uUNh2pog8mwbTHKYVfeKX/VWjQpa7E7Q+MRu/3u2uQiucQBIgyVSV3V8GNmNhMLy3wbUyIxEbWdYmCQXJ8n1g==", + "version": "3.102.0", + "resolved": "https://registry.npmjs.org/terra-search-field/-/terra-search-field-3.102.0.tgz", + "integrity": "sha512-iHYbTxlnuv1eGC/whav73G8Ikixa8Rh6gZRDJtEsN4gMxSF5s3zEsDAxzfKPLAAVta0n5oTokLolY1mkYzrOwg==", "dev": true, "dependencies": { "classnames": "^2.2.5", "keycode-js": "^3.1.0", "prop-types": "^15.5.8", - "terra-button": "^3.76.0", + "terra-button": "^3.77.0", "terra-icon": "^3.60.0", "terra-mixins": "^1.41.0", "terra-theme-context": "^1.0.0" @@ -36312,15 +36312,15 @@ } }, "node_modules/terra-status-view": { - "version": "4.75.0", - "resolved": "https://registry.npmjs.org/terra-status-view/-/terra-status-view-4.75.0.tgz", - "integrity": "sha512-9krM6ilYRZS8NsD/BuVkTaqUV8XsQDdJvAqGvLX+A0hqmQTwjCtsfGsyS/snFH1PHK9g6HnujbXHGCxQUWXOEQ==", + "version": "4.76.0", + "resolved": "https://registry.npmjs.org/terra-status-view/-/terra-status-view-4.76.0.tgz", + "integrity": "sha512-ixfA4Z0tWplvzgUkxmDwWol1CcQvOVj1to+ztUsc9VIJdc1HkiNjUg2GZNEjd4T31hFU/CkwD3yKY8nbsP/l7g==", "dev": true, "dependencies": { "classnames": "^2.2.5", "lodash.uniqueid": "^4.0.1", "prop-types": "^15.5.8", - "terra-button": "^3.76.0", + "terra-button": "^3.77.0", "terra-divider": "^3.41.0", "terra-icon": "^3.60.0", "terra-mixins": "^1.41.0", @@ -36372,9 +36372,9 @@ "link": true }, "node_modules/terra-toolbar": { - "version": "1.46.0", - "resolved": "https://registry.npmjs.org/terra-toolbar/-/terra-toolbar-1.46.0.tgz", - "integrity": "sha512-VbFnTt44YRxQy2f66BMtr7CEkWk8iJFEXMjq9BjoJPSwE0AO0k2z1bzszyX1jnW9JoEXvDfXl7FKNhSkHgynxQ==", + "version": "1.47.0", + "resolved": "https://registry.npmjs.org/terra-toolbar/-/terra-toolbar-1.47.0.tgz", + "integrity": "sha512-6qXV49UaHjhdp8RiSx6J8gWWH4/YOYm71bfDy0MlsGpvQQkHCbbCgqwQqPx0ySeVoKEnhsBKjn6t9ToJXhZ6+A==", "dependencies": { "classnames": "^2.2.5", "prop-types": "^15.5.8", diff --git a/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png b/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png index ce88fb84582..a8fc32d3c8c 100644 Binary files a/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png and b/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png differ diff --git a/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png b/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png index e653ff97979..dcb535c6d97 100644 Binary files a/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png and b/packages/terra-compact-interactive-list/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/compact-interactive-list-spec/focused-hyperlink.png differ diff --git a/packages/terra-folder-tree/CHANGELOG.md b/packages/terra-folder-tree/CHANGELOG.md index 15cb4301819..ca966d6d4c6 100644 --- a/packages/terra-folder-tree/CHANGELOG.md +++ b/packages/terra-folder-tree/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixed an issue where folder tree items could not receive focus after data was updated. + ## 1.0.0 - (March 29, 2024) * Fixed diff --git a/packages/terra-folder-tree/src/FolderTree.jsx b/packages/terra-folder-tree/src/FolderTree.jsx index 39c5f837aa4..bda9e39bf7d 100644 --- a/packages/terra-folder-tree/src/FolderTree.jsx +++ b/packages/terra-folder-tree/src/FolderTree.jsx @@ -164,7 +164,7 @@ const FolderTree = ({ useEffect(() => { const listItems = listNode.current.querySelectorAll('[data-item-show-focus=true]'); listItems[0].tabIndex = 0; - }, []); + }, [children]); useEffect(() => { const listItems = listNode.current.querySelectorAll('[data-item-show-focus=true]'); diff --git a/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/reload-focus.png b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/reload-focus.png new file mode 100644 index 00000000000..7a4a80f6c93 Binary files /dev/null and b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/reload-focus.png differ diff --git a/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/folder-tree-spec/reload-focus.png b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/folder-tree-spec/reload-focus.png new file mode 100644 index 00000000000..bee4490088b Binary files /dev/null and b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/folder-tree-spec/reload-focus.png differ diff --git a/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/folder-tree-spec/reload-focus.png b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/folder-tree-spec/reload-focus.png new file mode 100644 index 00000000000..38513819004 Binary files /dev/null and b/packages/terra-folder-tree/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/folder-tree-spec/reload-focus.png differ diff --git a/packages/terra-folder-tree/tests/wdio/folder-tree-spec.js b/packages/terra-folder-tree/tests/wdio/folder-tree-spec.js index c0656c7d76f..fdf860517bc 100644 --- a/packages/terra-folder-tree/tests/wdio/folder-tree-spec.js +++ b/packages/terra-folder-tree/tests/wdio/folder-tree-spec.js @@ -160,5 +160,16 @@ Terra.describeViewports('FolderTree', ['medium'], () => { Terra.validates.screenshot('wrapped label folder tree', { selector: '#wrapped-label-folder-tree' }); }); + + it('gains focus after updating the children', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/folder-tree/folder-tree-reload'); + + $('#reload-data-button').click(); + browser.keys('Tab'); + browser.keys('Tab'); + browser.keys('Tab'); + + Terra.validates.screenshot('reload-focus', { selector: '#folder-tree-reload' }); + }); }); }); diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index 2346ccde330..62b12adbe07 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -10,6 +10,7 @@ * Added * Added examples and tests for `terra-table` to demonstrate auto layout. + * Added test for `terra-folder-tree` to cover focus management after updating its children. ## 1.78.0 - (March 29, 2024) diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/folder-tree/FolderTreeReload.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/folder-tree/FolderTreeReload.test.jsx new file mode 100644 index 00000000000..548517ab10d --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/test/folder-tree/FolderTreeReload.test.jsx @@ -0,0 +1,166 @@ +import React, { useState } from 'react'; + +import { IconDocuments } from 'terra-icon'; +import FolderTree from 'terra-folder-tree'; + +const data = { + title: 'Documents', + items: [ + { id: 'item-1-level-1', label: 'Information', icon: }, + { + id: 'item-2-level-1', label: 'Projects - 2023', icon: , isSelectable: false, + }, + { + id: 'item-3-level-1', + label: 'Projects - 2023', + isSelectable: false, + items: [ + { id: 'item-1-level-2-1', label: 'Project Data - October', icon: }, + { id: 'item-2-level-2-1', label: 'Project Data - November', icon: }, + { id: 'item-3-level-2-1', label: 'Project Data - December', icon: }, + { + id: 'item-4-level-2-1', + label: 'Tests', + isSelectable: false, + items: [ + { id: 'item-1-level-3-1', label: 'Very Very Very Very Very Very Very Long Name Test', icon: }, + { id: 'item-2-level-3-1', label: 'Even Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger Name Test', icon: }, + ], + }, + ], + }, + { id: 'item-4-level-1', label: 'Projects - 2024', icon: }, + { + id: 'item-5-level-1', + label: 'Projects - 2024', + isSelectable: false, + items: [ + { id: 'item-1-level-2-2', label: 'Project Data - January', icon: }, + ], + }, + ], + reloadItems: [ + { id: 'reload-item-1-level-1', label: 'Information', icon: }, + { + id: 'reload-item-2-level-1', label: 'Projects - 2024', icon: , isSelectable: false, + }, + { + id: 'reload-item-3-level-1', + label: 'Projects - 2024', + isSelectable: false, + items: [ + { id: 'reload-item-1-level-2-1', label: 'Project Data - January', icon: }, + { id: 'reload-item-2-level-2-1', label: 'Project Data - February', icon: }, + { id: 'reload-item-3-level-2-1', label: 'Project Data - March', icon: }, + { + id: 'reload-item-4-level-2-1', + label: 'Tests', + isSelectable: false, + items: [ + { id: 'reload-item-1-level-3-1', label: 'Very Very Very Very Very Very Very Long Name Test', icon: }, + { id: 'reload-item-2-level-3-1', label: 'Even Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger Name Test', icon: }, + ], + }, + ], + }, + { id: 'reload-item-4-level-1', label: 'Projects - 2025', icon: }, + { + id: 'reload-item-5-level-1', + label: 'Projects - 2025', + isSelectable: false, + items: [ + { id: 'reload-item-1-level-2-2', label: 'Project Data - January', icon: }, + ], + }, + ], +}; + +const folderExpandedState = { + 'item-3-level-1': false, + 'item-4-level-2-1': false, + 'item-5-level-1': false, +}; + +const FolderTreeReload = () => { + const [selectedKey, setSelectedKey] = useState(''); + const [expandedItems, setExpandedItems] = useState(folderExpandedState); + const [isReloaded, setReloaded] = useState(false); + + const handleExpandCollapseKeys = (key) => { + const newExpandedItems = { + ...expandedItems, + [key]: !expandedItems[key], + }; + setExpandedItems(newExpandedItems); + }; + + const handleExpandAll = () => { + const newExpandedItems = { + ...expandedItems, + }; + Object.keys(newExpandedItems).forEach(v => { newExpandedItems[v] = true; }); + + setExpandedItems(newExpandedItems); + }; + + const handleCollapseAll = () => { + const newExpandedItems = { + ...expandedItems, + }; + Object.keys(newExpandedItems).forEach(v => { newExpandedItems[v] = false; }); + + setExpandedItems(newExpandedItems); + }; + + const buildFolderTreeItems = (items) => { + if (items) { + const elements = []; + items.forEach(item => { + elements.push( + { setSelectedKey(item.id); }} + onToggle={() => { handleExpandCollapseKeys(item.id); }} + />, + ); + }); + return elements; + } + + return null; + }; + + const reloadItems = () => { + setReloaded(true); + + setExpandedItems({ + 'reload-item-3-level-1': false, + 'reload-item-4-level-2-1': false, + 'reload-item-5-level-1': false, + }); + }; + + return ( + <> + +
+
+ + {buildFolderTreeItems(isReloaded ? data.reloadItems : data.items)} + +
+ + ); +}; + +export default FolderTreeReload;