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

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

@@ -0,0 +1,103 @@
+import { createSelector } from "../../utils/selectors.js";
+import { TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+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.
+ */
+export const selectorItemMetaLookup = 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.
+ */
+export const selectorItemOrderedChildrenIds = createSelector([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemOrderedChildrenIdsLookup[itemId ?? 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.
+ */
+export const selectorItemModel = 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.
+ */
+export const selectorItemMeta = createSelector([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => itemMetaLookup[itemId ?? 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.
+ */
+export const selectorIsItemDisabled = 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.
+ */
+export const selectorItemIndex = createSelector([selectorTreeViewItemsState, selectorItemMeta], (itemsState, itemMeta) => {
+  if (itemMeta == null) {
+    return -1;
+  }
+  const parentIndexes = itemsState.itemChildrenIndexesLookup[itemMeta.parentId ?? 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.
+ */
+export const selectorItemParentId = 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.
+ */
+export const selectorItemDepth = createSelector([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
+export const selectorCanItemBeFocused = createSelector([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
+  if (itemsState.disabledItemsFocusable) {
+    return true;
+  }
+  return !isItemDisabled;
+});

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
-import { TreeViewBaseItem, TreeViewItemId } from '../../../models';
-export interface TreeViewItemToRenderProps {
-    label: string;
-    itemId: string;
-    id: string | undefined;
-    children?: TreeViewItemToRenderProps[];
-}
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewItemMeta, TreeViewPluginSignature } from '../../models';
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from '../../../models';
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
      * Get the item with the given id.
@@ -31,45 +26,11 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
     /**
      * Get all the items in the same format as provided by `props.items`.
-     * @returns {TreeViewItemToRenderProps[]} The items in the tree.
+     * @returns {TreeViewBaseItem[]} The items in the tree.
      */
     getItemTree: () => TreeViewBaseItem[];
 }
-export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItemsPublicAPI<R> {
-    /**
-     * Get the meta-information of an item.
-     * Check the `TreeViewItemMeta` type for more information.
-     * @param {TreeViewItemId} itemId The id of the item to get the meta-information of.
-     * @returns {TreeViewItemMeta} The meta-information of the item.
-     */
-    getItemMeta: (itemId: TreeViewItemId) => TreeViewItemMeta;
-    /**
-     * Get the item that should be rendered.
-     * This method is only used on Rich Tree View components.
-     * Check the `TreeViewItemToRenderProps` type for more information.
-     * @returns {TreeViewItemToRenderProps[]} The items to render.
-     */
-    getItemsToRender: () => TreeViewItemToRenderProps[];
-    /**
-     * Check if a given item is disabled.
-     * An item is disabled if it was marked as disabled or if one of its ancestors is disabled.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is disabled, `false` otherwise.
-     */
-    isItemDisabled: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Check if a given item is navigable (i.e.: if it can be accessed through keyboard navigation).
-     * An item is navigable if it is not disabled or if the `disabledItemsFocusable` prop is `true`.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is navigable, `false` otherwise.
-     */
-    isItemNavigable: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Get the index of a given item in its parent's children list.
-     * @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 list.
-     */
-    getItemIndex: (itemId: TreeViewItemId) => number;
+export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
     /**
      * Freeze any future update to the state based on the `items` prop.
      * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
@@ -141,12 +102,13 @@ interface UseTreeViewItemsEventLookup {
 }
 export interface UseTreeViewItemsState<R extends {}> {
     items: {
-        itemMetaMap: TreeViewItemMetaMap;
-        itemMap: TreeViewItemMap<R>;
-        itemOrderedChildrenIds: {
+        disabledItemsFocusable: boolean;
+        itemModelLookup: TreeViewItemModelLookup<R>;
+        itemMetaLookup: TreeViewItemMetaLookup;
+        itemOrderedChildrenIdsLookup: {
             [parentItemId: string]: string[];
         };
-        itemChildrenIndexes: {
+        itemChildrenIndexesLookup: {
             [parentItemId: string]: {
                 [itemId: string]: number;
             };
@@ -154,8 +116,8 @@ export interface UseTreeViewItemsState<R extends {}> {
     };
 }
 interface UseTreeViewItemsContextValue {
-    items: Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable' | 'onItemClick'> & {
-        indentationAtItemLevel: boolean;
+    items: {
+        onItemClick: (event: React.MouseEvent, itemId: string) => void;
     };
 }
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
@@ -164,14 +126,13 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     instance: UseTreeViewItemsInstance<any>;
     publicAPI: UseTreeViewItemsPublicAPI<any>;
     events: UseTreeViewItemsEventLookup;
-    state: UseTreeViewItemsState<any>;
+    state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
     contextValue: UseTreeViewItemsContextValue;
-    experimentalFeatures: 'indentationAtItemLevel';
 }>;
-export type TreeViewItemMetaMap = {
+export type TreeViewItemMetaLookup = {
     [itemId: string]: TreeViewItemMeta;
 };
-export type TreeViewItemMap<R extends {}> = {
-    [itemId: string]: R;
+export type TreeViewItemModelLookup<R extends {}> = {
+    [itemId: string]: TreeViewBaseItem<R>;
 };
 export {};

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,42 +9,45 @@ import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../..
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { isItemExpandable } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
+import { useSelector } from "../../hooks/useSelector.js";
+import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
-  setState
+  store
 }) => {
   instance.preventItemUpdates();
   const insertJSXItem = useEventCallback(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 _extends({}, prevState, {
         items: _extends({}, prevState.items, {
-          itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
+          itemMetaLookup: _extends({}, 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: _extends({}, prevState.items.itemMap, {
+          itemModelLookup: _extends({}, prevState.items.itemModelLookup, {
             [item.id]: {
               id: item.id,
-              label: item.label
+              label: item.label ?? ''
             }
           })
         })
       });
     });
     return () => {
-      setState(prevState => {
-        const newItemMetaMap = _extends({}, prevState.items.itemMetaMap);
-        const newItemMap = _extends({}, prevState.items.itemMap);
-        delete newItemMetaMap[item.id];
-        delete newItemMap[item.id];
+      store.update(prevState => {
+        const newItemMetaLookup = _extends({}, prevState.items.itemMetaLookup);
+        const newItemModelLookup = _extends({}, prevState.items.itemModelLookup);
+        delete newItemMetaLookup[item.id];
+        delete newItemModelLookup[item.id];
         return _extends({}, prevState, {
           items: _extends({}, prevState.items, {
-            itemMetaMap: newItemMetaMap,
-            itemMap: newItemMap
+            itemMetaLookup: newItemMetaLookup,
+            itemModelLookup: newItemModelLookup
           })
         });
       });
@@ -55,12 +58,12 @@ export const useTreeViewJSXItems = ({
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    setState(prevState => _extends({}, prevState, {
+    store.update(prevState => _extends({}, prevState, {
       items: _extends({}, prevState.items, {
-        itemOrderedChildrenIds: _extends({}, prevState.items.itemOrderedChildrenIds, {
+        itemOrderedChildrenIdsLookup: _extends({}, prevState.items.itemOrderedChildrenIdsLookup, {
           [parentIdWithDefault]: orderedChildrenIds
         }),
-        itemChildrenIndexes: _extends({}, prevState.items.itemChildrenIndexes, {
+        itemChildrenIndexesLookup: _extends({}, prevState.items.itemChildrenIndexesLookup, {
           [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
         })
       })
@@ -87,12 +90,6 @@ export const useTreeViewJSXItems = ({
     }
   };
 };
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
@@ -100,7 +97,7 @@ const useTreeViewJSXItemsItemPlugin = ({
 }) => {
   const {
     instance,
-    treeId
+    store
   } = useTreeViewContext();
   const {
     children,
@@ -121,6 +118,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   const expandable = isItemExpandable(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
+  const treeId = useSelector(store, selectorTreeViewId);
 
   // Prevent any flashing
   useEnhancedEffect(() => {
@@ -132,9 +130,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]);
+  useEnhancedEffect(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,
@@ -157,12 +156,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);
   return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
     itemId: itemId,
+    idAttribute: idAttribute,
     children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
       value: depthContext + 1,
       children: children
@@ -172,6 +173,8 @@ useTreeViewJSXItems.wrapItem = ({
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+  itemId: null,
+  idAttribute: null,
   children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
     value: 0,
     children: children

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -4,19 +4,25 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
 import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
+import { useSelector } from "../../hooks/useSelector.js";
+import { selectorItemMetaLookup, selectorIsItemDisabled, selectorItemParentId } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../useTreeViewLabel/useTreeViewLabel.selectors.js";
+import { selectorIsItemSelected } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 export const useTreeViewKeyboardNavigation = ({
   instance,
-  params,
-  state
+  store,
+  params
 }) => {
   const isRtl = useRtl();
   const firstCharMap = React.useRef({});
   const updateFirstCharMap = useEventCallback(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
+  const itemMetaLookup = useSelector(store, selectorItemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
@@ -25,16 +31,16 @@ export 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 = getNextNavigableItem(instance, itemIdToCheck);
+      const nextItemId = getNextNavigableItem(store.value, itemIdToCheck);
       // We reached the end of the tree, check from the beginning
       if (nextItemId === null) {
-        return getFirstNavigableItem(instance);
+        return getFirstNavigableItem(store.value);
       }
       return nextItemId;
     };
@@ -52,9 +58,9 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !selectorIsItemDisabled(store.value, itemId);
   const canToggleItemExpansion = itemId => {
-    return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
+    return !selectorIsItemDisabled(store.value, itemId) && selectorIsItemExpandable(store.value, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -91,7 +97,10 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if (hasPlugin(instance, useTreeViewLabel) && instance.isItemEditable(itemId) && !instance.isItemBeingEdited(itemId)) {
+          if (hasPlugin(instance, useTreeViewLabel) && selectorIsItemEditable(store.value, {
+            itemId,
+            isItemEditable: params.isItemEditable
+          }) && !selectorIsItemBeingEdited(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.toggleItemExpansion(event, itemId);
@@ -104,7 +113,7 @@ export const useTreeViewKeyboardNavigation = ({
                 itemId,
                 keepExistingSelection: true
               });
-            } else if (!instance.isItemSelected(itemId)) {
+            } else if (!selectorIsItemSelected(store.value, itemId)) {
               instance.selectItem({
                 event,
                 itemId
@@ -118,7 +127,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = getNextNavigableItem(instance, itemId);
+          const nextItem = getNextNavigableItem(store.value, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -135,7 +144,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = getPreviousNavigableItem(instance, itemId);
+          const previousItem = getPreviousNavigableItem(store.value, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -156,8 +165,8 @@ export const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (instance.isItemExpanded(itemId)) {
-            const nextItemId = getNextNavigableItem(instance, itemId);
+          if (selectorIsItemExpanded(store.value, itemId)) {
+            const nextItemId = getNextNavigableItem(store.value, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -176,11 +185,11 @@ export const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
+          if (canToggleItemExpansion(itemId) && selectorIsItemExpanded(store.value, itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getItemMeta(itemId).parentId;
+            const parent = selectorItemParentId(store.value, itemId);
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -197,7 +206,7 @@ export const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
-            instance.focusItem(event, getFirstNavigableItem(instance));
+            instance.focusItem(event, getFirstNavigableItem(store.value));
           }
           event.preventDefault();
           break;
@@ -211,7 +220,7 @@ export const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
-            instance.focusItem(event, getLastNavigableItem(instance));
+            instance.focusItem(event, getLastNavigableItem(store.value));
           }
           event.preventDefault();
           break;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -1,2 +1,2 @@
 import { TreeViewItemPlugin } from '../../models';
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any>;
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js

@@ -1,29 +1,37 @@
 import * as React from 'react';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+import { useSelector } from "../../hooks/useSelector.js";
+import { selectorIsItemBeingEdited, selectorIsItemEditable } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabelItemPlugin = ({
   props
 }) => {
   const {
-    instance
+    store,
+    label: {
+      isItemEditable
+    }
   } = useTreeViewContext();
   const {
     label,
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemBeingEdited = instance.isItemBeingEdited(itemId);
+  const editable = useSelector(store, selectorIsItemEditable, {
+    itemId,
+    isItemEditable
+  });
+  const editing = useSelector(store, selectorIsItemBeingEdited, itemId);
   React.useEffect(() => {
-    if (!isItemBeingEdited) {
+    if (!editing) {
       setLabelInputValue(label);
     }
-  }, [isItemBeingEdited, label]);
+  }, [editing, label]);
   return {
     propsEnhancers: {
       labelInput: ({
         externalEventHandlers,
         interactions
       }) => {
-        const editable = instance.isItemEditable(itemId);
         if (!editable) {
           return {};
         }

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -3,41 +3,26 @@ import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
 export const useTreeViewLabel = ({
-  instance,
-  state,
-  setState,
+  store,
   params
 }) => {
-  const editedItemRef = React.useRef(state.editedItemId);
-  const isItemBeingEditedRef = itemId => editedItemRef.current === itemId;
   const setEditedItemId = editedItemId => {
-    setState(prevState => _extends({}, prevState, {
-      editedItemId
+    store.update(prevState => _extends({}, prevState, {
+      label: {
+        editedItemId
+      }
     }));
-    editedItemRef.current = editedItemId;
-  };
-  const isItemBeingEdited = itemId => itemId === state.editedItemId;
-  const isTreeViewEditable = Boolean(params.isItemEditable);
-  const isItemEditable = itemId => {
-    if (itemId == null || !isTreeViewEditable) {
-      return false;
-    }
-    const item = instance.getItem(itemId);
-    if (!item) {
-      return false;
-    }
-    return typeof params.isItemEditable === 'function' ? params.isItemEditable(item) : Boolean(params.isItemEditable);
   };
   const updateItemLabel = (itemId, label) => {
     if (!label) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
     }
-    setState(prevState => {
-      const item = prevState.items.itemMetaMap[itemId];
+    store.update(prevState => {
+      const item = prevState.items.itemMetaLookup[itemId];
       if (item.label !== label) {
         return _extends({}, prevState, {
           items: _extends({}, prevState.items, {
-            itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
+            itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, {
               [itemId]: _extends({}, item, {
                 label
               })
@@ -51,18 +36,20 @@ export const useTreeViewLabel = ({
       params.onItemLabelChange(itemId, label);
     }
   };
+  const pluginContextValue = React.useMemo(() => ({
+    label: {
+      isItemEditable: params.isItemEditable
+    }
+  }), [params.isItemEditable]);
   return {
     instance: {
       setEditedItemId,
-      isItemBeingEdited,
-      updateItemLabel,
-      isItemEditable,
-      isTreeViewEditable,
-      isItemBeingEditedRef
+      updateItemLabel
     },
     publicAPI: {
       updateItemLabel
-    }
+    },
+    contextValue: pluginContextValue
   };
 };
 useTreeViewLabel.itemPlugin = useTreeViewLabelItemPlugin;
@@ -81,7 +68,9 @@ useTreeViewLabel.getDefaultizedParams = ({
   });
 };
 useTreeViewLabel.getInitialState = () => ({
-  editedItemId: null
+  label: {
+    editedItemId: null
+  }
 });
 useTreeViewLabel.params = {
   onItemLabelChange: true,