diff --git a/.changeset/treeview-5.md b/.changeset/treeview-5.md
new file mode 100644
index 000000000..2d5e6c2d0
--- /dev/null
+++ b/.changeset/treeview-5.md
@@ -0,0 +1,5 @@
+---
+"react-magma-dom": minor
+---
+
+feat(TreeView): TreeView & TreeItem updates
\ No newline at end of file
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
index 77f694c32..75a76f8a4 100644
--- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
+++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
@@ -167,7 +167,7 @@ export const Complex = args => {
label={<>Chapter 1: I love tiramisu jelly beans soufflé>}
itemId="pt1ch1"
testId="pt1ch1"
- isDisabled
+ // isDisabled
>
}
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
index a8b6ef7a9..04cf301f0 100644
--- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
+++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
@@ -1086,7 +1086,11 @@ describe('TreeView', () => {
describe('initialExpandedItems and initialSelectedItems', () => {
it('when initialExpandedItems and initialSelectedItems are empty, no TreeItem is expanded or selected', () => {
const { getByTestId } = render(
- getTreeItemsOneLevel({ selectable: TreeViewSelectable.multi, initialExpandedItems: [], initialSelectedItems: []})
+ getTreeItemsOneLevel({
+ selectable: TreeViewSelectable.multi,
+ initialExpandedItems: [],
+ initialSelectedItems: [],
+ })
);
expect(getByTestId('item1')).toHaveAttribute('aria-expanded', 'false');
@@ -1128,11 +1132,17 @@ describe('TreeView', () => {
expect(getByTestId('item0')).toHaveAttribute('aria-checked', 'false');
expect(getByTestId('item1')).toHaveAttribute('aria-checked', 'false');
expect(getByTestId('item2')).toHaveAttribute('aria-checked', 'false');
- expect(getByTestId('item-child2.1')).toHaveAttribute('aria-checked', 'true');
+ expect(getByTestId('item-child2.1')).toHaveAttribute(
+ 'aria-checked',
+ 'true'
+ );
expect(getByTestId('item3')).toHaveAttribute('aria-checked', 'true');
userEvent.click(getByTestId('item3-expand'));
- expect(getByTestId('item-child3')).toHaveAttribute('aria-checked', 'true');
+ expect(getByTestId('item-child3')).toHaveAttribute(
+ 'aria-checked',
+ 'true'
+ );
});
});
diff --git a/packages/react-magma-dom/src/components/TreeView/useTreeItem.ts b/packages/react-magma-dom/src/components/TreeView/useTreeItem.ts
index 9d2bbff88..782ff4233 100644
--- a/packages/react-magma-dom/src/components/TreeView/useTreeItem.ts
+++ b/packages/react-magma-dom/src/components/TreeView/useTreeItem.ts
@@ -30,6 +30,7 @@ import {
getChildrenItemIdsInTree,
getAllParentIds,
getChildrenItemIdsFlat,
+ getCheckedStatus,
} from './utils';
export interface UseTreeItemProps extends React.HTMLAttributes {
@@ -522,7 +523,6 @@ export function useTreeItem(props: UseTreeItemProps, forwardedRef) {
) {
setStatusUpdatedBy(StatusUpdatedByOptions.children);
setCheckedStatus(statusFromChildren);
-
if (
statusFromChildren === IndeterminateCheckboxStatus.checked ||
statusFromChildren === IndeterminateCheckboxStatus.indeterminate
@@ -580,6 +580,9 @@ export function useTreeItem(props: UseTreeItemProps, forwardedRef) {
}
} else {
setSelectedItems(updateItemStatus);
+ if (!expanded) {
+ updateSelectedItemsChanged();
+ }
}
}
}, [childrenCheckedStatus]);
@@ -601,7 +604,7 @@ export function useTreeItem(props: UseTreeItemProps, forwardedRef) {
Array(numberOfTreeItemChildren).fill(status)
);
} else {
- const childrenIds = getChildrenItemIds(treeItemChildren, 'something');
+ const childrenIds = getChildrenItemIds(treeItemChildren);
const newChildrenCheckedStatus = getChildrenCheckedStatus(
childrenIds,
@@ -660,7 +663,6 @@ export function useTreeItem(props: UseTreeItemProps, forwardedRef) {
childrenIds,
{ itemId, checkedStatus }
);
-
setSelectedItems(newSelectedItems);
updateSelectedItemsChanged();
}
diff --git a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
index b05de5802..97fbd4742 100644
--- a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
+++ b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
@@ -157,7 +157,7 @@ export function useTreeView(props: UseTreeViewProps) {
setInitialSelectedItemsNeedUpdate(true);
}
if (initialExpandedItems) {
- setInitialExpandedItemsNeedUpdate(true)
+ setInitialExpandedItemsNeedUpdate(true);
}
}, []);