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); } }, []);