diff --git a/package-lock.json b/package-lock.json
index 69e1d1d44de..2d1c20759ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44234,7 +44234,7 @@
}
},
"packages/terra-table": {
- "version": "5.2.1",
+ "version": "5.3.0",
"license": "Apache-2.0",
"dependencies": {
"classnames": "^2.2.5",
diff --git a/packages/terra-folder-tree/CHANGELOG.md b/packages/terra-folder-tree/CHANGELOG.md
index ce3e7b22f16..d9fb575c9f2 100644
--- a/packages/terra-folder-tree/CHANGELOG.md
+++ b/packages/terra-folder-tree/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Updated cursor style to pointer for clickable regions.
+
## 1.0.0-alpha.2 - (December 5, 2023)
* Added
diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
index 137a0632a3e..0343606266a 100644
--- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
+++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
@@ -98,20 +98,30 @@ const FolderTreeItem = ({
cx(
'folder-tree-item',
{ selected: isSelected },
- { folder: isFolder },
theme.className,
),
);
+ const handleToggle = (event) => {
+ if (event.target.nodeName === 'INPUT') {
+ return;
+ }
+
+ if (onToggle) {
+ onToggle();
+ }
+ };
+
return (
<>
+ {/* TODO: Re-enable this eslint rule once keyboard handling is implemented */}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
{/* eslint-disable-next-line react/forbid-dom-props */}
diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss
index 072a65373e7..61b8dd2f156 100644
--- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss
+++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss
@@ -15,12 +15,9 @@
&:hover {
background-color: var(--terra-folder-tree-item-hover-background-color, #f4fafe);
+ cursor: pointer;
}
}
-
- .folder:hover {
- cursor: pointer;
- }
.selected {
background-color: var(--terra-folder-tree-item-selected-background-color, darken(#ebf6fd, 2%));
@@ -31,4 +28,8 @@
margin: 0;
padding: 0;
}
+
+ .radio:hover {
+ cursor: pointer;
+ }
}
diff --git a/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx b/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx
index 085b10c3d15..82d17bdbf2a 100644
--- a/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx
+++ b/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx
@@ -82,4 +82,26 @@ describe('basic folder tree', () => {
expect(expandedFolder.find('.folder-tree-item').prop('aria-expanded')).toBe(true);
expect(expandedFolder.find('.subfolder').prop('hidden')).toBe(false);
});
+
+ it('does not trigger expand/collapse on folder selection', () => {
+ const onClick = jest.fn();
+ const onToggle = jest.fn();
+
+ const wrapper = shallowWithIntl(
+ ),
+ ]}
+ />,
+ ).dive();
+
+ const radioButton = wrapper.find('.radio');
+ radioButton.simulate('change');
+
+ expect(onClick).toHaveBeenCalled();
+ expect(onToggle).not.toHaveBeenCalled();
+ });
});
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
index 3706d427fdf..2ae617bde41 100644
--- a/packages/terra-framework-docs/CHANGELOG.md
+++ b/packages/terra-framework-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Updated examples and tests for `terra-folder-tree`.
+
## 1.50.0 - (December 5, 2023)
* Added
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx
index 06efa0758e1..7d9a4bc470a 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx
@@ -16,6 +16,10 @@ const ExpandCollapseFolderTree = () => {
'projects-4': false,
});
+ const handleSelect = (key) => {
+ setSelectedKey(key);
+ };
+
const handleExpandCollapseKeys = (key) => {
const newExpandedKeys = {
...expandedKeys,
@@ -35,7 +39,7 @@ const ExpandCollapseFolderTree = () => {
key="projects"
isSelected={selectedKey === 'projects'}
isExpanded={expandedKeys.projects}
- onClick={() => { setSelectedKey('projects'); }}
+ onClick={() => { handleSelect('projects'); }}
onToggle={() => { handleExpandCollapseKeys('projects'); }}
subfolderItems={[
{
key="projects-2"
isSelected={selectedKey === 'projects-2'}
isExpanded={expandedKeys['projects-2']}
- onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }}
+ onClick={() => { handleSelect('projects-2'); }}
onToggle={() => { handleExpandCollapseKeys('projects-2'); }}
subfolderItems={[
{
key="projects-3"
isSelected={selectedKey === 'projects-3'}
isExpanded={expandedKeys['projects-3']}
- onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }}
+ onClick={() => { handleSelect('projects-3'); }}
onToggle={() => { handleExpandCollapseKeys('projects-3'); }}
subfolderItems={[
{
key="projects-4"
isSelected={selectedKey === 'projects-4'}
isExpanded={expandedKeys['projects-4']}
- onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }}
+ onClick={() => { handleSelect('projects-4'); }}
onToggle={() => { handleExpandCollapseKeys('projects-4'); }}
subfolderItems={[
{
'projects-4': false,
});
+ const handleSelect = (key) => {
+ setSelectedKey(key);
+ };
+
const handleExpandCollapseKeys = (key) => {
const newExpandedKeys = {
...expandedKeys,
@@ -29,7 +33,7 @@ const ExpandCollapseFolderTree = () => {
key="projects"
isSelected={selectedKey === 'projects'}
isExpanded={expandedKeys.projects}
- onClick={() => { setSelectedKey('projects'); }}
+ onClick={() => { handleSelect('projects'); }}
onToggle={() => { handleExpandCollapseKeys('projects'); }}
subfolderItems={[
{
key="projects-2"
isSelected={selectedKey === 'projects-2'}
isExpanded={expandedKeys['projects-2']}
- onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }}
+ onClick={() => { handleSelect('projects-2'); }}
onToggle={() => { handleExpandCollapseKeys('projects-2'); }}
subfolderItems={[
{
key="projects-3"
isSelected={selectedKey === 'projects-3'}
isExpanded={expandedKeys['projects-3']}
- onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }}
+ onClick={() => { handleSelect('projects-3'); }}
onToggle={() => { handleExpandCollapseKeys('projects-3'); }}
subfolderItems={[
{
key="projects-4"
isSelected={selectedKey === 'projects-4'}
isExpanded={expandedKeys['projects-4']}
- onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }}
+ onClick={() => { handleSelect('projects-4'); }}
onToggle={() => { handleExpandCollapseKeys('projects-4'); }}
subfolderItems={[