@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,29 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"];
 const updateItemsState = ({
+  disabledItemsFocusable,
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
-  const itemMetaMap = {};
-  const itemMap = {};
-  const itemOrderedChildrenIds = {
+  const itemMetaLookup = {};
+  const itemModelLookup = {};
+  const itemOrderedChildrenIdsLookup = {
     [_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]: []
   };
   const processItem = (item, depth, parentId) => {
@@ -31,14 +33,14 @@ const updateItemsState = ({
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    if (itemMetaMap[id] != null) {
+    if (itemMetaLookup[id] != null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    itemMetaMap[id] = {
+    itemMetaLookup[id] = {
       id,
       label,
       parentId,
@@ -47,89 +49,58 @@ const updateItemsState = ({
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
-    itemMap[id] = item;
+    itemModelLookup[id] = item;
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    if (!itemOrderedChildrenIds[parentIdWithDefault]) {
-      itemOrderedChildrenIds[parentIdWithDefault] = [];
+    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
-    itemOrderedChildrenIds[parentIdWithDefault].push(id);
+    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
     item.children?.forEach(child => processItem(child, depth + 1, id));
   };
   items.forEach(item => processItem(item, 0, null));
-  const itemChildrenIndexes = {};
-  Object.keys(itemOrderedChildrenIds).forEach(parentId => {
-    itemChildrenIndexes[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIds[parentId]);
+  const itemChildrenIndexesLookup = {};
+  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
+    itemChildrenIndexesLookup[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIdsLookup[parentId]);
   });
   return {
-    itemMetaMap,
-    itemMap,
-    itemOrderedChildrenIds,
-    itemChildrenIndexes
+    disabledItemsFocusable,
+    itemMetaLookup,
+    itemModelLookup,
+    itemOrderedChildrenIdsLookup,
+    itemChildrenIndexesLookup
   };
 };
 const useTreeViewItems = ({
   instance,
   params,
-  state,
-  setState,
-  experimentalFeatures
+  store
 }) => {
-  const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
-  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const getItem = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId), [store]);
   const getItemTree = React.useCallback(() => {
-    const getItemFromItemId = id => {
-      const _state$items$itemMap$ = state.items.itemMap[id],
-        item = (0, _objectWithoutPropertiesLoose2.default)(_state$items$itemMap$, _excluded);
-      const newChildren = state.items.itemOrderedChildrenIds[id];
-      if (newChildren) {
+    const getItemFromItemId = itemId => {
+      const item = (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId);
+      const newChildren = (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId);
+      if (newChildren.length > 0) {
         item.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete item.children;
       }
       return item;
     };
-    return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getItemFromItemId);
-  }, [state.items.itemMap, state.items.itemOrderedChildrenIds]);
-  const isItemDisabled = React.useCallback(itemId => {
-    if (itemId == null) {
-      return false;
-    }
-    let itemMeta = instance.getItemMeta(itemId);
-
-    // This can be called before the item has been added to the item map.
-    if (!itemMeta) {
-      return false;
-    }
-    if (itemMeta.disabled) {
-      return true;
-    }
-    while (itemMeta.parentId != null) {
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
-      if (itemMeta.disabled) {
-        return true;
-      }
-    }
-    return false;
-  }, [instance]);
-  const getItemIndex = React.useCallback(itemId => {
-    const parentId = instance.getItemMeta(itemId).parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    return state.items.itemChildrenIndexes[parentId][itemId];
-  }, [instance, state.items.itemChildrenIndexes]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+    return (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, null).map(getItemFromItemId);
+  }, [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
+    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById((0, _useTreeViewId.generateTreeItemIdAttribute)({
-      treeId: state.id.treeId,
+    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
+      treeId: (0, _useTreeViewId.selectorTreeViewId)(store.value),
       itemId,
       id: itemMeta.idAttribute
-    }));
-  };
-  const isItemNavigable = itemId => {
-    if (params.disabledItemsFocusable) {
-      return true;
-    }
-    return !instance.isItemDisabled(itemId);
+    });
+    return document.getElementById(idAttribute);
   };
   const areItemUpdatesPreventedRef = React.useRef(false);
   const preventItemUpdates = React.useCallback(() => {
@@ -140,15 +111,16 @@ const useTreeViewItems = ({
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    setState(prevState => {
+    store.update(prevState => {
       const newState = updateItemsState({
+        disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.items.itemMetaMap).forEach(item => {
-        if (!newState.itemMetaMap[item.id]) {
+      Object.values(prevState.items.itemMetaLookup).forEach(item => {
+        if (!newState.itemMetaLookup[item.id]) {
           (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
             id: item.id
           });
@@ -158,19 +130,19 @@ const useTreeViewItems = ({
         items: newState
       });
     });
-  }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getItemsToRender = () => {
-    const getPropsFromItemId = id => {
-      const item = state.items.itemMetaMap[id];
-      return {
-        label: item.label,
-        itemId: item.id,
-        id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId)
-      };
-    };
-    return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
-  };
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+
+  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
+  const handleItemClick = (0, _useEventCallback.default)((event, itemId) => {
+    if (params.onItemClick) {
+      params.onItemClick(event, itemId);
+    }
+  });
+  const pluginContextValue = React.useMemo(() => ({
+    items: {
+      onItemClick: handleItemClick
+    }
+  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -184,30 +156,17 @@ const useTreeViewItems = ({
       getItemOrderedChildrenIds
     },
     instance: {
-      getItemMeta,
-      getItem,
-      getItemTree,
-      getItemsToRender,
-      getItemIndex,
       getItemDOMElement,
-      getItemOrderedChildrenIds,
-      isItemDisabled,
-      isItemNavigable,
       preventItemUpdates,
       areItemUpdatesPrevented
     },
-    contextValue: {
-      items: {
-        onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewItems = useTreeViewItems;
 useTreeViewItems.getInitialState = params => ({
   items: updateItemsState({
+    disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
@@ -221,11 +180,10 @@ useTreeViewItems.getDefaultizedParams = ({
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
 useTreeViewItems.wrapRoot = ({
-  children,
-  instance
+  children
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
-    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    value: _useTreeViewItems2.selectorItemDepth,
     children: children
   });
 };

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsItemDisabled = exports.selectorCanItemBeFocused = void 0;
+var _selectors = require("../../utils/selectors");
+var _useTreeViewItems = require("./useTreeViewItems.utils");
+const selectorTreeViewItemsState = state => state.items;
+
+/**
+ * Get the meta-information of all items.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemMetaLookup} The meta-information of all items.
+ */
+const selectorItemMetaLookup = exports.selectorItemMetaLookup = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.itemMetaLookup);
+const EMPTY_CHILDREN = [];
+
+/**
+ * Get the ordered children ids of a given item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the children of.
+ * @returns {TreeViewItemId[]} The ordered children ids of the item.
+ */
+const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemOrderedChildrenIdsLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN);
+
+/**
+ * Get the model of an item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the model of.
+ * @returns {R} The model of the item.
+ */
+const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
+  const a = itemsState.itemModelLookup[itemId];
+  return a;
+});
+
+/**
+ * Get the meta-information of an item.
+ * Check the `TreeViewItemMeta` type for more information.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>}
+ * @param {TreeViewItemId} itemId The id of the item to get the meta-information of.
+ * @returns {TreeViewItemMeta | null} The meta-information of the item.
+ */
+const selectorItemMeta = exports.selectorItemMeta = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => itemMetaLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? null);
+
+/**
+ * Check if an item is disabled.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is disabled, `false` otherwise.
+ */
+const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => {
+  if (itemId == null) {
+    return false;
+  }
+  let itemMeta = itemMetaLookup[itemId];
+
+  // This can be called before the item has been added to the item map.
+  if (!itemMeta) {
+    return false;
+  }
+  if (itemMeta.disabled) {
+    return true;
+  }
+  while (itemMeta.parentId != null) {
+    itemMeta = itemMetaLookup[itemMeta.parentId];
+    if (itemMeta.disabled) {
+      return true;
+    }
+  }
+  return false;
+});
+
+/**
+ * Get the index of an item in its parent's children.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the index of.
+ * @returns {number} The index of the item in its parent's children.
+ */
+const selectorItemIndex = exports.selectorItemIndex = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorItemMeta], (itemsState, itemMeta) => {
+  if (itemMeta == null) {
+    return -1;
+  }
+  const parentIndexes = itemsState.itemChildrenIndexesLookup[itemMeta.parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID];
+  return parentIndexes[itemMeta.id];
+});
+
+/**
+ * Get the id of the parent of an item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the parent id of.
+ * @returns {TreeViewItemId | null} The id of the parent of the item.
+ */
+const selectorItemParentId = exports.selectorItemParentId = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.parentId ?? null);
+
+/**
+ * Get the depth of an item (items at the root level have a depth of 0).
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the depth of.
+ * @returns {number} The depth of the item.
+ */
+const selectorItemDepth = exports.selectorItemDepth = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
+const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
+  if (itemsState.disabledItemsFocusable) {
+    return true;
+  }
+  return !isItemDisabled;
+});

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -17,42 +17,45 @@ var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChil
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
-  setState
+  store
 }) => {
   instance.preventItemUpdates();
   const insertJSXItem = (0, _useEventCallback.default)(item => {
-    setState(prevState => {
-      if (prevState.items.itemMetaMap[item.id] != null) {
+    store.update(prevState => {
+      if (prevState.items.itemMetaLookup[item.id] != null) {
         throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
         items: (0, _extends2.default)({}, prevState.items, {
-          itemMetaMap: (0, _extends2.default)({}, prevState.items.itemMetaMap, {
+          itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, {
             [item.id]: item
           }),
           // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
-          itemMap: (0, _extends2.default)({}, prevState.items.itemMap, {
+          itemModelLookup: (0, _extends2.default)({}, prevState.items.itemModelLookup, {
             [item.id]: {
               id: item.id,
-              label: item.label
+              label: item.label ?? ''
             }
           })
         })
       });
     });
     return () => {
-      setState(prevState => {
-        const newItemMetaMap = (0, _extends2.default)({}, prevState.items.itemMetaMap);
-        const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
-        delete newItemMetaMap[item.id];
-        delete newItemMap[item.id];
+      store.update(prevState => {
+        const newItemMetaLookup = (0, _extends2.default)({}, prevState.items.itemMetaLookup);
+        const newItemModelLookup = (0, _extends2.default)({}, prevState.items.itemModelLookup);
+        delete newItemMetaLookup[item.id];
+        delete newItemModelLookup[item.id];
         return (0, _extends2.default)({}, prevState, {
           items: (0, _extends2.default)({}, prevState.items, {
-            itemMetaMap: newItemMetaMap,
-            itemMap: newItemMap
+            itemMetaLookup: newItemMetaLookup,
+            itemModelLookup: newItemModelLookup
           })
         });
       });
@@ -63,12 +66,12 @@ const useTreeViewJSXItems = ({
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    setState(prevState => (0, _extends2.default)({}, prevState, {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
       items: (0, _extends2.default)({}, prevState.items, {
-        itemOrderedChildrenIds: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIds, {
+        itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIdsLookup, {
           [parentIdWithDefault]: orderedChildrenIds
         }),
-        itemChildrenIndexes: (0, _extends2.default)({}, prevState.items.itemChildrenIndexes, {
+        itemChildrenIndexesLookup: (0, _extends2.default)({}, prevState.items.itemChildrenIndexesLookup, {
           [parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
         })
       })
@@ -96,12 +99,6 @@ const useTreeViewJSXItems = ({
   };
 };
 exports.useTreeViewJSXItems = useTreeViewJSXItems;
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
@@ -109,7 +106,7 @@ const useTreeViewJSXItemsItemPlugin = ({
 }) => {
   const {
     instance,
-    treeId
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
@@ -127,9 +124,10 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const expandable = isItemExpandable(children);
+  const expandable = (0, _useTreeItemUtils.isItemExpandable)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
 
   // Prevent any flashing
   (0, _useEnhancedEffect.default)(() => {
@@ -141,9 +139,10 @@ const useTreeViewJSXItemsItemPlugin = ({
     registerChild(idAttribute, itemId);
     return () => {
       unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
     };
-  }, [registerChild, unregisterChild, itemId, id, treeId]);
-  React.useEffect(() => {
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  (0, _useEnhancedEffect.default)(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,
@@ -166,12 +165,14 @@ const useTreeViewJSXItemsItemPlugin = ({
 useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
-  itemId
+  itemId,
+  idAttribute
 }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
     itemId: itemId,
+    idAttribute: idAttribute,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
       value: depthContext + 1,
       children: children
@@ -181,6 +182,8 @@ useTreeViewJSXItems.wrapItem = ({
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
+  itemId: null,
+  idAttribute: null,
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
     value: 0,
     children: children

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -12,19 +12,25 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
 var _useTreeViewLabel = require("../useTreeViewLabel");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewLabel2 = require("../useTreeViewLabel/useTreeViewLabel.selectors");
+var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 const useTreeViewKeyboardNavigation = ({
   instance,
-  params,
-  state
+  store,
+  params
 }) => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const firstCharMap = React.useRef({});
   const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
+  const itemMetaLookup = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
@@ -33,16 +39,16 @@ const useTreeViewKeyboardNavigation = ({
     const processItem = item => {
       newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
     };
-    Object.values(state.items.itemMetaMap).forEach(processItem);
+    Object.values(itemMetaLookup).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [state.items.itemMetaMap, params.getItemId, instance]);
+  }, [itemMetaLookup, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, query) => {
     const cleanQuery = query.toLowerCase();
     const getNextItem = itemIdToCheck => {
-      const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemIdToCheck);
+      const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemIdToCheck);
       // We reached the end of the tree, check from the beginning
       if (nextItemId === null) {
-        return (0, _tree.getFirstNavigableItem)(instance);
+        return (0, _tree.getFirstNavigableItem)(store.value);
       }
       return nextItemId;
     };
@@ -60,9 +66,9 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
   const canToggleItemExpansion = itemId => {
-    return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
+    return !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -99,7 +105,10 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && instance.isItemEditable(itemId) && !instance.isItemBeingEdited(itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, {
+            itemId,
+            isItemEditable: params.isItemEditable
+          }) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.toggleItemExpansion(event, itemId);
@@ -112,7 +121,7 @@ const useTreeViewKeyboardNavigation = ({
                 itemId,
                 keepExistingSelection: true
               });
-            } else if (!instance.isItemSelected(itemId)) {
+            } else if (!(0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemId)) {
               instance.selectItem({
                 event,
                 itemId
@@ -126,7 +135,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = (0, _tree.getNextNavigableItem)(instance, itemId);
+          const nextItem = (0, _tree.getNextNavigableItem)(store.value, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -143,7 +152,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = (0, _tree.getPreviousNavigableItem)(instance, itemId);
+          const previousItem = (0, _tree.getPreviousNavigableItem)(store.value, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -164,8 +173,8 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (instance.isItemExpanded(itemId)) {
-            const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemId);
+          if ((0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
+            const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -184,11 +193,11 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
+          if (canToggleItemExpansion(itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getItemMeta(itemId).parentId;
+            const parent = (0, _useTreeViewItems.selectorItemParentId)(store.value, itemId);
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -205,7 +214,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(instance));
+            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(store.value));
           }
           event.preventDefault();
           break;
@@ -219,7 +228,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getLastNavigableItem)(instance));
+            instance.focusItem(event, (0, _tree.getLastNavigableItem)(store.value));
           }
           event.preventDefault();
           break;