@mui/x-tree-view 8.11.0 → 8.11.2

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

@@ -3,104 +3,64 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsTreeViewLoading = exports.selectorIsItemDisabled = exports.selectorGetTreeViewError = exports.selectorDisabledItemFocusable = exports.selectorCanItemBeFocused = void 0;
-var _selectors = require("../../utils/selectors");
+exports.itemsSelectors = void 0;
+var _store = require("@mui/x-internals/store");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
-const selectorTreeViewItemsState = state => state.items;
-
-/**
- * Get the loading state for the Tree View.
- * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @returns {boolean} The loading state for the Tree View.
- */
-const selectorIsTreeViewLoading = exports.selectorIsTreeViewLoading = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.loading);
-/**
- * Get the error state for the Tree View.
- * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @returns {boolean} The error state for the Tree View.
- */
-const selectorGetTreeViewError = exports.selectorGetTreeViewError = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.error);
-
-/**
- * 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) => itemsState.itemModelLookup[itemId]);
-
-/**
- * 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], _useTreeViewItems.isItemDisabled);
-
-/**
- * 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);
-
-/**
- * Check if the disabled items are focusable.
- * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @returns {boolean} Whether the disabled items are focusable.
- */
-const selectorDisabledItemFocusable = exports.selectorDisabledItemFocusable = (0, _selectors.createSelector)([selectorTreeViewItemsState], itemsState => itemsState.disabledItemsFocusable);
-const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorDisabledItemFocusable, selectorIsItemDisabled], (disabledItemsFocusable, isDisabled) => {
-  if (disabledItemsFocusable) {
-    return true;
-  }
-  return !isDisabled;
-});
+const itemsSelectors = exports.itemsSelectors = {
+  /**
+   * Gets the loading state for the Tree View.
+   */
+  isLoading: (0, _store.createSelector)(state => state.items.loading),
+  /**
+   * Gets the error state for the Tree View.
+   */
+  error: (0, _store.createSelector)(state => state.items.error),
+  /**
+   * Checks whether the disabled items are focusable.
+   */
+  disabledItemFocusable: (0, _store.createSelector)(state => state.items.disabledItemsFocusable),
+  /**
+   * Gets the meta-information of all items.
+   */
+  itemMetaLookup: (0, _store.createSelector)(state => state.items.itemMetaLookup),
+  /**
+   * Gets the meta-information of an item.
+   */
+  itemMeta: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? null),
+  /**
+   * Gets the ordered children ids of an item.
+   */
+  itemOrderedChildrenIds: (0, _store.createSelector)((state, itemId) => state.items.itemOrderedChildrenIdsLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN),
+  /**
+   * Gets the model of an item.
+   */
+  itemModel: (0, _store.createSelector)((state, itemId) => state.items.itemModelLookup[itemId]),
+  /**
+   * Checks whether an item is disabled.
+   */
+  isItemDisabled: (0, _store.createSelector)((state, itemId) => (0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId)),
+  /**
+   * Gets the index of an item in its parent's children.
+   */
+  itemIndex: (0, _store.createSelector)((state, itemId) => {
+    const itemMeta = state.items.itemMetaLookup[itemId];
+    if (itemMeta == null) {
+      return -1;
+    }
+    const parentIndexes = state.items.itemChildrenIndexesLookup[itemMeta.parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID];
+    return parentIndexes[itemMeta.id];
+  }),
+  /**
+   * Gets the id of an item's parent.
+   */
+  itemParentId: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId]?.parentId ?? null),
+  /**
+   * Gets the depth of an item (items at the root level have a depth of 0).
+   */
+  itemDepth: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId]?.depth ?? 0),
+  /**
+   * Checks whether an item can be focused.
+   */
+  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.items.disabledItemsFocusable || !(0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId))
+};

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

@@ -7,7 +7,7 @@ export declare const buildSiblingIndexes: (siblings: string[]) => {
 /**
  * Check if an item is disabled.
  * This method should only be used in selectors that are checking if several items are disabled.
- * Otherwise, use the `selectorIsItemDisabled` selector.
+ * Otherwise, use the `itemsSelector.isItemDisabled` selector.
  * @returns
  */
 export declare const isItemDisabled: (itemMetaLookup: {

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -16,7 +16,7 @@ const buildSiblingIndexes = siblings => {
 /**
  * Check if an item is disabled.
  * This method should only be used in selectors that are checking if several items are disabled.
- * Otherwise, use the `selectorIsItemDisabled` selector.
+ * Otherwise, use the `itemsSelector.isItemDisabled` selector.
  * @returns
  */
 exports.buildSiblingIndexes = buildSiblingIndexes;

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
@@ -19,8 +20,7 @@ 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 _useTreeViewId2 = require("../../corePlugins/useTreeViewId");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
@@ -28,38 +28,30 @@ const useTreeViewJSXItems = ({
 }) => {
   instance.preventItemUpdates();
   const insertJSXItem = (0, _useEventCallback.default)(item => {
-    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, {
-          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.
-          itemModelLookup: (0, _extends2.default)({}, prevState.items.itemModelLookup, {
-            [item.id]: {
-              id: item.id,
-              label: item.label ?? ''
-            }
-          })
-        })
-      });
-    });
+    if (store.state.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'));
+    }
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, {
+        [item.id]: item
+      }),
+      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+      itemModelLookup: (0, _extends2.default)({}, store.state.items.itemModelLookup, {
+        [item.id]: {
+          id: item.id,
+          label: item.label ?? ''
+        }
+      })
+    }));
     return () => {
-      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, {
-            itemMetaLookup: newItemMetaLookup,
-            itemModelLookup: newItemModelLookup
-          })
-        });
-      });
+      const newItemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
+      const newItemModelLookup = (0, _extends2.default)({}, store.state.items.itemModelLookup);
+      delete newItemMetaLookup[item.id];
+      delete newItemModelLookup[item.id];
+      store.set('items', (0, _extends2.default)({}, store.state.items, {
+        itemMetaLookup: newItemMetaLookup,
+        itemModelLookup: newItemModelLookup
+      }));
       (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
         id: item.id
       });
@@ -67,14 +59,12 @@ const useTreeViewJSXItems = ({
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      items: (0, _extends2.default)({}, prevState.items, {
-        itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIdsLookup, {
-          [parentIdWithDefault]: orderedChildrenIds
-        }),
-        itemChildrenIndexesLookup: (0, _extends2.default)({}, prevState.items.itemChildrenIndexesLookup, {
-          [parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
-        })
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
       })
     }));
   };
@@ -128,7 +118,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
-  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
+  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
 
   // Prevent any flashing
   (0, _useEnhancedEffect.default)(() => {

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 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");
@@ -31,7 +31,7 @@ const useTreeViewKeyboardNavigation = ({
   const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
-  const itemMetaLookup = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemMetaLookup);
+  const itemMetaLookup = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
@@ -46,10 +46,10 @@ const useTreeViewKeyboardNavigation = ({
   const getFirstMatchingItem = (itemId, query) => {
     const cleanQuery = query.toLowerCase();
     const getNextItem = itemIdToCheck => {
-      const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemIdToCheck);
+      const nextItemId = (0, _tree.getNextNavigableItem)(store.state, itemIdToCheck);
       // We reached the end of the tree, check from the beginning
       if (nextItemId === null) {
-        return (0, _tree.getFirstNavigableItem)(store.value);
+        return (0, _tree.getFirstNavigableItem)(store.state);
       }
       return nextItemId;
     };
@@ -67,9 +67,9 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value) && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
+  const canToggleItemSelection = itemId => _useTreeViewSelection.selectionSelectors.enabled(store.state) && !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId);
   const canToggleItemExpansion = itemId => {
-    return !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, itemId);
+    return !_useTreeViewItems.itemsSelectors.isItemDisabled(store.state, itemId) && _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -82,7 +82,7 @@ const useTreeViewKeyboardNavigation = ({
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
     const key = event.key;
-    const isMultiSelectEnabled = (0, _useTreeViewSelection.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -107,7 +107,7 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, itemId) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && _useTreeViewLabel2.labelSelectors.isItemEditable(store.state, itemId) && !_useTreeViewLabel2.labelSelectors.isItemBeingEdited(store.state, itemId)) {
             instance.setEditedItem(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
@@ -123,7 +123,7 @@ const useTreeViewKeyboardNavigation = ({
                 itemId,
                 keepExistingSelection: true
               });
-            } else if (!(0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemId)) {
+            } else if (!_useTreeViewSelection.selectionSelectors.isItemSelected(store.state, itemId)) {
               instance.setItemSelection({
                 event,
                 itemId
@@ -137,7 +137,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = (0, _tree.getNextNavigableItem)(store.value, itemId);
+          const nextItem = (0, _tree.getNextNavigableItem)(store.state, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -154,7 +154,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = (0, _tree.getPreviousNavigableItem)(store.value, itemId);
+          const previousItem = (0, _tree.getPreviousNavigableItem)(store.state, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -175,8 +175,8 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if ((0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
-            const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemId);
+          if (_useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId)) {
+            const nextItemId = (0, _tree.getNextNavigableItem)(store.state, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -198,14 +198,14 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (canToggleItemExpansion(itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
+          if (canToggleItemExpansion(itemId) && _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId)) {
             instance.setItemExpansion({
               event,
               itemId
             });
             event.preventDefault();
           } else {
-            const parent = (0, _useTreeViewItems.selectorItemParentId)(store.value, itemId);
+            const parent = _useTreeViewItems.itemsSelectors.itemParentId(store.state, itemId);
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -222,7 +222,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(store.value));
+            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(store.state));
           }
           event.preventDefault();
           break;
@@ -236,7 +236,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getLastNavigableItem)(store.value));
+            instance.focusItem(event, (0, _tree.getLastNavigableItem)(store.state));
           }
           event.preventDefault();
           break;
@@ -252,7 +252,7 @@ const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && (0, _useTreeViewSelection.selectorIsSelectionEnabled)(store.value):
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && _useTreeViewSelection.selectionSelectors.enabled(store.state):
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();

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

@@ -4,6 +4,7 @@ import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
 import { UseTreeViewFocusSignature } from "../useTreeViewFocus/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
@@ -24,6 +25,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   instance: UseTreeViewKeyboardNavigationInstance;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
+  optionalDependencies: [UseTreeViewLabelSignature];
 }>;
 export type TreeViewFirstCharMap = {
   [itemId: string]: string;

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

@@ -1,2 +1,3 @@
 export { useTreeViewLabel } from "./useTreeViewLabel.js";
-export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./useTreeViewLabel.types.js";
+export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./useTreeViewLabel.types.js";
+export { labelSelectors } from "./useTreeViewLabel.selectors.js";

package/internals/plugins/useTreeViewLabel/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "labelSelectors", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLabel2.labelSelectors;
+  }
+});
 Object.defineProperty(exports, "useTreeViewLabel", {
   enumerable: true,
   get: function () {
     return _useTreeViewLabel.useTreeViewLabel;
   }
 });
-var _useTreeViewLabel = require("./useTreeViewLabel");
+var _useTreeViewLabel = require("./useTreeViewLabel");
+var _useTreeViewLabel2 = require("./useTreeViewLabel.selectors");

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewLabelItemPlugin = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
-var _useSelector = require("../../hooks/useSelector");
 var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
 const useTreeViewLabelItemPlugin = ({
   props
@@ -21,8 +21,8 @@ const useTreeViewLabelItemPlugin = ({
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemEditable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, itemId);
-  const isItemBeingEdited = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemBeingEdited, itemId);
+  const isItemEditable = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemEditable, itemId);
+  const isItemBeingEdited = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemBeingEdited, itemId);
   React.useEffect(() => {
     if (!isItemBeingEdited) {
       setLabelInputValue(label);

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -15,45 +15,37 @@ const useTreeViewLabel = ({
 }) => {
   const setEditedItem = editedItemId => {
     if (editedItemId !== null) {
-      const isEditable = (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, editedItemId);
+      const isEditable = _useTreeViewLabel2.labelSelectors.isItemEditable(store.state, editedItemId);
       if (!isEditable) {
         return;
       }
     }
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      label: (0, _extends2.default)({}, prevState.label, {
-        editedItemId
-      })
+    store.set('label', (0, _extends2.default)({}, store.state.label, {
+      editedItemId
     }));
   };
   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'));
     }
-    store.update(prevState => {
-      const item = prevState.items.itemMetaLookup[itemId];
-      if (item.label !== label) {
-        return (0, _extends2.default)({}, prevState, {
-          items: (0, _extends2.default)({}, prevState.items, {
-            itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, {
-              [itemId]: (0, _extends2.default)({}, item, {
-                label
-              })
-            })
-          })
-        });
-      }
-      return prevState;
-    });
+    const item = store.state.items.itemMetaLookup[itemId];
+    if (item.label === label) {
+      return;
+    }
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, {
+        [itemId]: (0, _extends2.default)({}, item, {
+          label
+        })
+      })
+    }));
     if (params.onItemLabelChange) {
       params.onItemLabelChange(itemId, label);
     }
   };
   (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      label: (0, _extends2.default)({}, prevState.label, {
-        isItemEditable: params.isItemEditable
-      })
+    store.set('label', (0, _extends2.default)({}, store.state.items, {
+      isItemEditable: params.isItemEditable
     }));
   }, [store, params.isItemEditable]);
   return {