[TreeView] Remove treeId from the item context

mui · Nov 21, 2024 · 84b9b65 · 84b9b65
1 parent aff210a
commit 84b9b65
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 17 deletions.
diff --git a/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx b/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx
@@ -2,13 +2,16 @@ import PropTypes from 'prop-types';
 import { TreeItemProviderProps } from './TreeItemProvider.types';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeViewId/useTreeViewId.utils';
+import { useSelector } from '../internals/hooks/useSelector';
+import { selectorTreeViewId } from '../internals/corePlugins/useTreeViewId/useTreeViewId.selectors';
 
 /**
  * @ignore - internal component.
  */
 function TreeItemProvider(props: TreeItemProviderProps) {
   const { children, itemId, id } = props;
-  const { wrapItem, instance, treeId } = useTreeViewContext<[]>();
+  const { wrapItem, instance, store } = useTreeViewContext<[]>();
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id });
 
   return wrapItem({ children, itemId, instance, idAttribute });

diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts
@@ -21,13 +21,10 @@ export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({ params,
 
   const treeId = useSelector(store, selectorTreeViewId);
 
-  const pluginContextValue = React.useMemo(() => ({ treeId }), [treeId]);
-
   return {
     getRootProps: () => ({
       id: treeId,
     }),
-    contextValue: pluginContextValue,
   };
 };
 

diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts
@@ -17,13 +17,8 @@ export interface UseTreeViewIdState {
   };
 }
 
-interface UseTreeViewIdContextValue {
-  treeId: string | undefined;
-}
-
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
   params: UseTreeViewIdParameters;
   defaultizedParams: UseTreeViewIdDefaultizedParameters;
   state: UseTreeViewIdState;
-  contextValue: UseTreeViewIdContextValue;
 }>;
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts
@@ -59,13 +59,17 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
   }, [store, models.selectedItems.value]);
 
   const setFocusedItemId = useEventCallback((itemId: string | null) => {
-    const focusedItemId = selectorFocusedItemId(store.value);
-    if (focusedItemId !== itemId) {
-      store.update((prevState) => ({
+    store.update((prevState) => {
+      const focusedItemId = selectorFocusedItemId(prevState);
+      if (focusedItemId === itemId) {
+        return prevState;
+      }
+
+      return {
         ...prevState,
         focus: { ...prevState.focus, focusedItemId: itemId },
-      }));
-    }
+      };
+    });
   });
 
   const isItemVisible = (itemId: string) => {

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
@@ -17,6 +17,8 @@ import {
 import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
 import { generateTreeItemIdAttribute } from '../../corePlugins/useTreeViewId/useTreeViewId.utils';
 import { isItemExpandable } from '../../../hooks/useTreeItemUtils/useTreeItemUtils';
+import { useSelector } from '../../hooks/useSelector';
+import { selectorTreeViewId } from '../../corePlugins/useTreeViewId/useTreeViewId.selectors';
 
 export const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature> = ({
   instance,
@@ -113,7 +115,7 @@ export const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature> =
 };
 
 const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, contentRef }) => {
-  const { instance, store, treeId } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>();
+  const { instance, store } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>();
   const { children, disabled = false, label, itemId, id } = props;
 
   const parentContext = React.useContext(TreeViewChildrenItemContext);
@@ -131,6 +133,7 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, con
   const expandable = isItemExpandable(children);
   const pluginContentRef = React.useRef<HTMLDivElement>(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
+  const treeId = useSelector(store, selectorTreeViewId);
 
   // Prevent any flashing
   useEnhancedEffect(() => {

diff --git a/packages/x-tree-view/src/useTreeItem/useTreeItem.ts b/packages/x-tree-view/src/useTreeItem/useTreeItem.ts
@@ -29,6 +29,7 @@ import { useSelector } from '../internals/hooks/useSelector';
 import { selectorIsItemTheDefaultFocusableItem } from '../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors';
 import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeViewId/useTreeViewId.utils';
 import { selectorCanItemBeFocused } from '../internals/plugins/useTreeViewItems/useTreeViewItems.selectors';
+import { selectorTreeViewId } from '../internals/corePlugins/useTreeViewId/useTreeViewId.selectors';
 
 export const useTreeItem = <
   TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins,
@@ -42,7 +43,6 @@ export const useTreeItem = <
     selection: { disableSelection, checkboxSelection },
     expansion: { expansionTrigger },
     label: labelContext,
-    treeId,
     instance,
     publicAPI,
     store,
@@ -71,6 +71,7 @@ export const useTreeItem = <
   const handleContentRef = useForkRef(contentRef, contentRefObject)!;
   const checkboxRef = React.useRef<HTMLButtonElement>(null);
 
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id });
   const shouldBeAccessibleWithTab = useSelector(
     store,

diff --git a/test/utils/tree-view/fakeContextValue.ts b/test/utils/tree-view/fakeContextValue.ts
@@ -27,7 +27,6 @@ export const getFakeContextValue = (
     disableSelection: false,
     selectionPropagation: {},
   },
-  treeId: 'mui-tree-view-1',
   rootRef: {
     current: null,
   },