@mui/x-tree-view 8.11.0 → 8.11.1

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

@@ -1,100 +1,60 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
-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.
- */
-export const selectorIsTreeViewLoading = 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.
- */
-export const selectorGetTreeViewError = 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.
- */
-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) => 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.
- */
-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], 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.
- */
-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);
-
-/**
- * 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.
- */
-export const selectorDisabledItemFocusable = createSelector([selectorTreeViewItemsState], itemsState => itemsState.disabledItemsFocusable);
-export const selectorCanItemBeFocused = createSelector([selectorDisabledItemFocusable, selectorIsItemDisabled], (disabledItemsFocusable, isDisabled) => {
-  if (disabledItemsFocusable) {
-    return true;
-  }
-  return !isDisabled;
-});
+export const itemsSelectors = {
+  /**
+   * Gets the loading state for the Tree View.
+   */
+  isLoading: createSelector(state => state.items.loading),
+  /**
+   * Gets the error state for the Tree View.
+   */
+  error: createSelector(state => state.items.error),
+  /**
+   * Checks whether the disabled items are focusable.
+   */
+  disabledItemFocusable: createSelector(state => state.items.disabledItemsFocusable),
+  /**
+   * Gets the meta-information of all items.
+   */
+  itemMetaLookup: createSelector(state => state.items.itemMetaLookup),
+  /**
+   * Gets the meta-information of an item.
+   */
+  itemMeta: createSelector((state, itemId) => state.items.itemMetaLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? null),
+  /**
+   * Gets the ordered children ids of an item.
+   */
+  itemOrderedChildrenIds: createSelector((state, itemId) => state.items.itemOrderedChildrenIdsLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN),
+  /**
+   * Gets the model of an item.
+   */
+  itemModel: createSelector((state, itemId) => state.items.itemModelLookup[itemId]),
+  /**
+   * Checks whether an item is disabled.
+   */
+  isItemDisabled: createSelector((state, itemId) => isItemDisabled(state.items.itemMetaLookup, itemId)),
+  /**
+   * Gets the index of an item in its parent's children.
+   */
+  itemIndex: createSelector((state, itemId) => {
+    const itemMeta = state.items.itemMetaLookup[itemId];
+    if (itemMeta == null) {
+      return -1;
+    }
+    const parentIndexes = state.items.itemChildrenIndexesLookup[itemMeta.parentId ?? TREE_VIEW_ROOT_PARENT_ID];
+    return parentIndexes[itemMeta.id];
+  }),
+  /**
+   * Gets the id of an item's parent.
+   */
+  itemParentId: 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: createSelector((state, itemId) => state.items.itemMetaLookup[itemId]?.depth ?? 0),
+  /**
+   * Checks whether an item can be focused.
+   */
+  canItemBeFocused: createSelector((state, itemId) => state.items.disabledItemsFocusable || !isItemDisabled(state.items.itemMetaLookup, itemId))
+};

package/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -10,7 +10,7 @@ export 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
  */
 export const isItemDisabled = (itemMetaLookup, itemId) => {

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useStore } from '@mui/x-internals/store';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -12,8 +13,7 @@ import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewIte
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
-import { useSelector } from "../../hooks/useSelector.js";
-import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -21,38 +21,30 @@ export const useTreeViewJSXItems = ({
 }) => {
   instance.preventItemUpdates();
   const insertJSXItem = useEventCallback(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 _extends({}, prevState, {
-        items: _extends({}, prevState.items, {
-          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.
-          itemModelLookup: _extends({}, 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', _extends({}, store.state.items, {
+      itemMetaLookup: _extends({}, 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: _extends({}, store.state.items.itemModelLookup, {
+        [item.id]: {
+          id: item.id,
+          label: item.label ?? ''
+        }
+      })
+    }));
     return () => {
-      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, {
-            itemMetaLookup: newItemMetaLookup,
-            itemModelLookup: newItemModelLookup
-          })
-        });
-      });
+      const newItemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
+      const newItemModelLookup = _extends({}, store.state.items.itemModelLookup);
+      delete newItemMetaLookup[item.id];
+      delete newItemModelLookup[item.id];
+      store.set('items', _extends({}, store.state.items, {
+        itemMetaLookup: newItemMetaLookup,
+        itemModelLookup: newItemModelLookup
+      }));
       publishTreeViewEvent(instance, 'removeItem', {
         id: item.id
       });
@@ -60,14 +52,12 @@ export const useTreeViewJSXItems = ({
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    store.update(prevState => _extends({}, prevState, {
-      items: _extends({}, prevState.items, {
-        itemOrderedChildrenIdsLookup: _extends({}, prevState.items.itemOrderedChildrenIdsLookup, {
-          [parentIdWithDefault]: orderedChildrenIds
-        }),
-        itemChildrenIndexesLookup: _extends({}, prevState.items.itemChildrenIndexesLookup, {
-          [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
-        })
+    store.set('items', _extends({}, store.state.items, {
+      itemOrderedChildrenIdsLookup: _extends({}, store.state.items.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: _extends({}, store.state.items.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
       })
     }));
   };
@@ -120,7 +110,7 @@ const useTreeViewJSXItemsItemPlugin = ({
   const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
-  const treeId = useSelector(store, selectorTreeViewId);
+  const treeId = useStore(store, idSelectors.treeId);
 
   // Prevent any flashing
   useEnhancedEffect(() => {

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,16 +1,16 @@
 'use client';
 
 import * as React from 'react';
+import { useStore } from '@mui/x-internals/store';
 import { useRtl } from '@mui/system/RtlProvider';
 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, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
-import { selectorIsItemExpandable, selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { labelSelectors } from "../useTreeViewLabel/useTreeViewLabel.selectors.js";
+import { selectionSelectors } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -24,7 +24,7 @@ export const useTreeViewKeyboardNavigation = ({
   const updateFirstCharMap = useEventCallback(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
-  const itemMetaLookup = useSelector(store, selectorItemMetaLookup);
+  const itemMetaLookup = useStore(store, itemsSelectors.itemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
@@ -39,10 +39,10 @@ export const useTreeViewKeyboardNavigation = ({
   const getFirstMatchingItem = (itemId, query) => {
     const cleanQuery = query.toLowerCase();
     const getNextItem = itemIdToCheck => {
-      const nextItemId = getNextNavigableItem(store.value, itemIdToCheck);
+      const nextItemId = getNextNavigableItem(store.state, itemIdToCheck);
       // We reached the end of the tree, check from the beginning
       if (nextItemId === null) {
-        return getFirstNavigableItem(store.value);
+        return getFirstNavigableItem(store.state);
       }
       return nextItemId;
     };
@@ -60,9 +60,9 @@ export const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => selectorIsSelectionEnabled(store.value) && !selectorIsItemDisabled(store.value, itemId);
+  const canToggleItemSelection = itemId => selectionSelectors.enabled(store.state) && !itemsSelectors.isItemDisabled(store.state, itemId);
   const canToggleItemExpansion = itemId => {
-    return !selectorIsItemDisabled(store.value, itemId) && selectorIsItemExpandable(store.value, itemId);
+    return !itemsSelectors.isItemDisabled(store.state, itemId) && expansionSelectors.isItemExpandable(store.state, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -75,7 +75,7 @@ export const useTreeViewKeyboardNavigation = ({
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;
     const key = event.key;
-    const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
+    const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
 
     // eslint-disable-next-line default-case
     switch (true) {
@@ -100,7 +100,7 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if (hasPlugin(instance, useTreeViewLabel) && selectorIsItemEditable(store.value, itemId) && !selectorIsItemBeingEdited(store.value, itemId)) {
+          if (hasPlugin(instance, useTreeViewLabel) && labelSelectors.isItemEditable(store.state, itemId) && !labelSelectors.isItemBeingEdited(store.state, itemId)) {
             instance.setEditedItem(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
@@ -116,7 +116,7 @@ export const useTreeViewKeyboardNavigation = ({
                 itemId,
                 keepExistingSelection: true
               });
-            } else if (!selectorIsItemSelected(store.value, itemId)) {
+            } else if (!selectionSelectors.isItemSelected(store.state, itemId)) {
               instance.setItemSelection({
                 event,
                 itemId
@@ -130,7 +130,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = getNextNavigableItem(store.value, itemId);
+          const nextItem = getNextNavigableItem(store.state, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -147,7 +147,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = getPreviousNavigableItem(store.value, itemId);
+          const previousItem = getPreviousNavigableItem(store.state, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -168,8 +168,8 @@ export const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (selectorIsItemExpanded(store.value, itemId)) {
-            const nextItemId = getNextNavigableItem(store.value, itemId);
+          if (expansionSelectors.isItemExpanded(store.state, itemId)) {
+            const nextItemId = getNextNavigableItem(store.state, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -191,14 +191,14 @@ export const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (canToggleItemExpansion(itemId) && selectorIsItemExpanded(store.value, itemId)) {
+          if (canToggleItemExpansion(itemId) && expansionSelectors.isItemExpanded(store.state, itemId)) {
             instance.setItemExpansion({
               event,
               itemId
             });
             event.preventDefault();
           } else {
-            const parent = selectorItemParentId(store.value, itemId);
+            const parent = itemsSelectors.itemParentId(store.state, itemId);
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -215,7 +215,7 @@ export const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
-            instance.focusItem(event, getFirstNavigableItem(store.value));
+            instance.focusItem(event, getFirstNavigableItem(store.state));
           }
           event.preventDefault();
           break;
@@ -229,7 +229,7 @@ export const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
-            instance.focusItem(event, getLastNavigableItem(store.value));
+            instance.focusItem(event, getLastNavigableItem(store.state));
           }
           event.preventDefault();
           break;
@@ -245,7 +245,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && selectorIsSelectionEnabled(store.value):
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && selectionSelectors.enabled(store.state):
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();

package/esm/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/esm/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/esm/internals/plugins/useTreeViewLabel/index.js

@@ -1 +1,2 @@
-export { useTreeViewLabel } from "./useTreeViewLabel.js";
+export { useTreeViewLabel } from "./useTreeViewLabel.js";
+export { labelSelectors } from "./useTreeViewLabel.selectors.js";

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

@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
-import { useSelector } from "../../hooks/useSelector.js";
-import { selectorIsItemBeingEdited, selectorIsItemEditable } from "./useTreeViewLabel.selectors.js";
+import { labelSelectors } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabelItemPlugin = ({
   props
 }) => {
@@ -15,8 +15,8 @@ export const useTreeViewLabelItemPlugin = ({
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemEditable = useSelector(store, selectorIsItemEditable, itemId);
-  const isItemBeingEdited = useSelector(store, selectorIsItemBeingEdited, itemId);
+  const isItemEditable = useStore(store, labelSelectors.isItemEditable, itemId);
+  const isItemBeingEdited = useStore(store, labelSelectors.isItemBeingEdited, itemId);
   React.useEffect(() => {
     if (!isItemBeingEdited) {
       setLabelInputValue(label);

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,52 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
-import { selectorIsItemEditable } from "./useTreeViewLabel.selectors.js";
+import { labelSelectors } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabel = ({
   store,
   params
 }) => {
   const setEditedItem = editedItemId => {
     if (editedItemId !== null) {
-      const isEditable = selectorIsItemEditable(store.value, editedItemId);
+      const isEditable = labelSelectors.isItemEditable(store.state, editedItemId);
       if (!isEditable) {
         return;
       }
     }
-    store.update(prevState => _extends({}, prevState, {
-      label: _extends({}, prevState.label, {
-        editedItemId
-      })
+    store.set('label', _extends({}, 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 _extends({}, prevState, {
-          items: _extends({}, prevState.items, {
-            itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, {
-              [itemId]: _extends({}, item, {
-                label
-              })
-            })
-          })
-        });
-      }
-      return prevState;
-    });
+    const item = store.state.items.itemMetaLookup[itemId];
+    if (item.label === label) {
+      return;
+    }
+    store.set('items', _extends({}, store.state.items, {
+      itemMetaLookup: _extends({}, store.state.items.itemMetaLookup, {
+        [itemId]: _extends({}, item, {
+          label
+        })
+      })
+    }));
     if (params.onItemLabelChange) {
       params.onItemLabelChange(itemId, label);
     }
   };
   useEnhancedEffect(() => {
-    store.update(prevState => _extends({}, prevState, {
-      label: _extends({}, prevState.label, {
-        isItemEditable: params.isItemEditable
-      })
+    store.set('label', _extends({}, store.state.items, {
+      isItemEditable: params.isItemEditable
     }));
   }, [store, params.isItemEditable]);
   return {