feat(TreeView): Fixing onSelectedItemChange (#1226)

cengage · Sep 18, 2024 · 8dda990 · 8dda990
1 parent dcfdaa7
commit 8dda990
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/.changeset/treeview-5.md b/.changeset/treeview-5.md
@@ -0,0 +1,5 @@
+---
+"react-magma-dom": minor
+---
+
+feat(TreeView): TreeView & TreeItem updates
diff --git 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
             >
               <TreeItem
                 icon={<ArticleIcon aria-hidden={true} />}

diff --git 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
@@ -30,6 +30,7 @@ import {
   getChildrenItemIdsInTree,
   getAllParentIds,
   getChildrenItemIdsFlat,
+  getCheckedStatus,
 } from './utils';
 
 export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
@@ -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
@@ -157,7 +157,7 @@ export function useTreeView(props: UseTreeViewProps) {
       setInitialSelectedItemsNeedUpdate(true);
     }
     if (initialExpandedItems) {
-      setInitialExpandedItemsNeedUpdate(true)
+      setInitialExpandedItemsNeedUpdate(true);
     }
   }, []);