fix(treeview): fix initial expanded items should expand all parents (#…

…1458)

.changeset/fix-initial-expanded-items-should-expand-all-parents.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(TreeView): fix initial expanded items should expand all parents

packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx

@@ -408,7 +408,7 @@ export const Complex = args => {
 Complex.args = {
   selectable: TreeViewSelectable.multi,
   ariaLabel: 'Textbook tree',
-  initialExpandedItems: ['pt1', 'pt1ch1'],
+  initialExpandedItems: ['pt1', 'pt1ch1', 'pt2ch5.1'],
   preselectedItems: [
     { itemId: 'pt1ch1', checkedStatus: IndeterminateCheckboxStatus.checked },
     { itemId: 'pt1', checkedStatus: IndeterminateCheckboxStatus.indeterminate },

packages/react-magma-dom/src/components/TreeView/TreeView.test.js

@@ -213,10 +213,10 @@ describe('TreeView', () => {
       expect(getByTestId('item3')).toHaveAttribute('aria-expanded', 'false');
     });
 
-    it('when child item is part of the array, that item is expanded', () => {
+    it('when child item is part of the array, that item is expanded including parents', () => {
       const { getByTestId } = render(
         getTreeItemsMultiLevel({
-          initialExpandedItems: ['item2', 'item-child2.1'],
+          initialExpandedItems: ['item-child2.1'],
         })
       );
 

packages/react-magma-dom/src/components/TreeView/useTreeView.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDescendants } from '../../hooks/useDescendants';
 import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
-import { getInitialItems, selectMulti, selectSingle } from './utils';
+import { getInitialExpandedIds, getInitialItems, selectMulti, selectSingle } from './utils';
 import { TreeViewSelectable } from './types';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 
@@ -86,7 +86,7 @@ export function useTreeView(props: UseTreeViewProps) {
     selectable = TreeViewSelectable.single,
     onSelectedItemChange,
     onExpandedChange,
-    initialExpandedItems,
+    initialExpandedItems: rawInitialExpandedItems,
     preselectedItems,
     checkChildren = selectable !== TreeViewSelectable.single,
     checkParents = selectable !== TreeViewSelectable.single,
@@ -107,7 +107,11 @@ export function useTreeView(props: UseTreeViewProps) {
 
   const selectedItems = React.useMemo(() => {
     return items.filter((item) => item.checkedStatus === IndeterminateCheckboxStatus.checked)
-  }, [items]); 
+  }, [items]);
+
+  const initialExpandedItems = React.useMemo(() => {
+    return getInitialExpandedIds({ items, initialExpandedItems: rawInitialExpandedItems })
+  }, [items, rawInitialExpandedItems]); 
 
   const itemToFocus = React.useMemo(() => {
     const [firstItem] = items;

packages/react-magma-dom/src/components/TreeView/utils.ts

@@ -278,3 +278,25 @@ export const selectMulti = ({items, itemId, checkedStatus, checkChildren, checkP
   const itemsWithProcessedChildrenSelection = checkChildren ? processChildrenSelection({ items: itemsWithProcessedItemSelection, itemId, checkedStatus }) : itemsWithProcessedItemSelection
   return checkParents ? processParentsSelection({ items: itemsWithProcessedChildrenSelection, itemId, checkedStatus }) : itemsWithProcessedChildrenSelection;
 }
+
+const getParentIds = ({ items, itemId, prevParentIds = []}: { items: TreeViewItemInterface[]; itemId: TreeViewItemInterface['itemId']; prevParentIds?: TreeViewItemInterface['itemId'][] }) => {
+  const item = items.find(item => item.itemId === itemId);
+
+  if (!item) {
+    return prevParentIds;
+  }
+
+  const { parentId } = item;
+
+  return parentId ? getParentIds({ itemId: parentId, items, prevParentIds: [...prevParentIds, parentId]}) : prevParentIds;
+}
+
+export const getInitialExpandedIds = ({ items, initialExpandedItems }: { items: TreeViewItemInterface[]; } & Pick<UseTreeViewProps, 'initialExpandedItems'>) => {
+  if (!initialExpandedItems) {
+    return initialExpandedItems;
+  }
+
+  return initialExpandedItems.reduce((result, itemId) => {
+    return [...result, itemId, ...getParentIds({ itemId, items })];
+  }, []);
+}