@mui/x-tree-view 8.10.2 → 8.11.1

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js

@@ -3,85 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorSelectionPropagationRules = exports.selectorSelectionModelArray = exports.selectorSelectionModel = exports.selectorIsSelectionEnabled = exports.selectorIsMultiSelectEnabled = exports.selectorIsItemSelectionEnabled = exports.selectorIsItemSelected = exports.selectorIsCheckboxSelectionEnabled = void 0;
-var _selectors = require("../../utils/selectors");
+exports.selectionSelectors = void 0;
+var _store = require("@mui/x-internals/store");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-const selectorTreeViewSelectionState = state => state.selection;
-
-/**
- * Get the selected items.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {TreeViewSelectionValue<boolean>} The selected items.
- */
-const selectorSelectionModel = exports.selectorSelectionModel = (0, _selectors.createSelector)([selectorTreeViewSelectionState], selectionState => selectionState.selectedItems);
-
-/**
- * Get the selected items as an array.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {TreeViewItemId[]} The selected items as an array.
- */
-const selectorSelectionModelArray = exports.selectorSelectionModelArray = (0, _selectors.createSelector)([selectorSelectionModel], selectedItems => {
-  if (Array.isArray(selectedItems)) {
-    return selectedItems;
+const selectedItemsSelector = (0, _store.createSelectorMemoized)(state => state.selection.selectedItems, selectedItemsRaw => {
+  if (Array.isArray(selectedItemsRaw)) {
+    return selectedItemsRaw;
   }
-  if (selectedItems != null) {
-    return [selectedItems];
+  if (selectedItemsRaw != null) {
+    return [selectedItemsRaw];
   }
   return [];
 });
-
-/**
- * Get the selected items as a map.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {Map<TreeViewItemId, true>} The selected items as a Map.
- */
-const selectorSelectionModelMap = (0, _selectors.createSelector)([selectorSelectionModelArray], selectedItems => {
+const selectedItemsMapSelector = (0, _store.createSelectorMemoized)(selectedItemsSelector, selectedItems => {
   const selectedItemsMap = new Map();
   selectedItems.forEach(id => {
     selectedItemsMap.set(id, true);
   });
   return selectedItemsMap;
 });
-
-/**
- * Check if an item is selected.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is selected, `false` otherwise.
- */
-const selectorIsItemSelected = exports.selectorIsItemSelected = (0, _selectors.createSelector)([selectorSelectionModelMap, (_, itemId) => itemId], (selectedItemsMap, itemId) => selectedItemsMap.has(itemId));
-
-/**
- * Check if multi selection is enabled.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if multi selection is enabled, `false` otherwise.
- */
-const selectorIsMultiSelectEnabled = exports.selectorIsMultiSelectEnabled = (0, _selectors.createSelector)([selectorTreeViewSelectionState], selectionState => selectionState.isEnabled && selectionState.isMultiSelectEnabled);
-
-/**
- * Check if selection is enabled.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if selection is enabled, `false` otherwise.
- */
-const selectorIsSelectionEnabled = exports.selectorIsSelectionEnabled = (0, _selectors.createSelector)([selectorTreeViewSelectionState], selectionState => selectionState.isEnabled);
-
-/**
- * Check if checkbox selection is enabled.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if checkbox selection is enabled, `false` otherwise.
- */
-const selectorIsCheckboxSelectionEnabled = exports.selectorIsCheckboxSelectionEnabled = (0, _selectors.createSelector)([selectorTreeViewSelectionState], selectionState => selectionState.isCheckboxSelectionEnabled);
-
-/**
- * Check if selection is enabled for an item (if selection is enabled and if the item is not disabled).
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @param {string} itemId The id of the item to check.
- * @returns {boolean} `true` if selection is enabled for the item, `false` otherwise.
- */
-const selectorIsItemSelectionEnabled = exports.selectorIsItemSelectionEnabled = (0, _selectors.createSelector)([_useTreeViewItems.selectorIsItemDisabled, selectorIsSelectionEnabled], (isItemDisabled, isSelectionEnabled) => isSelectionEnabled && !isItemDisabled);
-
-/**
- * Get the selection propagation rules.
- * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
- * @returns {TreeViewSelectionPropagation} The selection propagation rules.
- */
-const selectorSelectionPropagationRules = exports.selectorSelectionPropagationRules = (0, _selectors.createSelector)([selectorTreeViewSelectionState], selectionState => selectionState.selectionPropagation);
+const selectionSelectors = exports.selectionSelectors = {
+  /**
+   * Gets the selected items as provided to the component.
+   */
+  selectedItemsRaw: (0, _store.createSelector)(state => state.selection.selectedItems),
+  /**
+   * Gets the selected items as an array.
+   */
+  selectedItems: selectedItemsSelector,
+  /**
+   * Gets the selected items as a Map.
+   */
+  selectedItemsMap: selectedItemsMapSelector,
+  /**
+   * Checks whether selection is enabled.
+   */
+  enabled: (0, _store.createSelector)(state => state.selection.isEnabled),
+  /**
+   * Checks whether multi selection is enabled.
+   */
+  isMultiSelectEnabled: (0, _store.createSelector)(state => state.selection.isMultiSelectEnabled),
+  /**
+   * Checks whether checkbox selection is enabled.
+   */
+  isCheckboxSelectionEnabled: (0, _store.createSelector)(state => state.selection.isCheckboxSelectionEnabled),
+  /**
+   * Gets the selection propagation rules.
+   */
+  propagationRules: (0, _store.createSelector)(state => state.selection.selectionPropagation),
+  /**
+   * Checks whether an item is selected.
+   */
+  isItemSelected: (0, _store.createSelector)(selectedItemsMapSelector, (selectedItemsMap, itemId) => selectedItemsMap.has(itemId)),
+  /**
+   * Checks whether an item can be selected (if selection is enabled and if the item is not disabled).
+   */
+  canItemBeSelected: (0, _store.createSelector)(_useTreeViewItems.itemsSelectors.isItemDisabled, state => state.selection.isEnabled, (isItemDisabled, isSelectionEnabled, _itemId) => isSelectionEnabled && !isItemDisabled)
+};

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

@@ -133,6 +133,7 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
 export interface UseTreeItemCheckboxSlotPropsFromSelection {
   visible?: boolean;
   checked?: boolean;
+  indeterminate?: boolean;
   disabled?: boolean;
   tabIndex?: -1;
   onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -24,7 +24,7 @@ const getAddedAndRemovedItems = ({
     newModelMap.set(id, true);
   });
   return {
-    added: newModel.filter(itemId => !(0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemId)),
+    added: newModel.filter(itemId => !_useTreeViewSelection.selectionSelectors.isItemSelected(store.state, itemId)),
     removed: oldModel.filter(itemId => !newModelMap.has(itemId))
   };
 };
@@ -62,7 +62,7 @@ const propagateSelection = ({
           shouldRegenerateModel = true;
           newModelLookup[itemId] = true;
         }
-        (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId).forEach(selectDescendants);
+        _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(store.state, itemId).forEach(selectDescendants);
       };
       selectDescendants(addedItemId);
     }
@@ -71,15 +71,15 @@ const propagateSelection = ({
         if (!newModelLookup[itemId]) {
           return false;
         }
-        const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId);
+        const children = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
         return children.every(checkAllDescendantsSelected);
       };
       const selectParents = itemId => {
-        const parentId = (0, _useTreeViewItems.selectorItemParentId)(store.value, itemId);
+        const parentId = _useTreeViewItems.itemsSelectors.itemParentId(store.state, itemId);
         if (parentId == null) {
           return;
         }
-        const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, parentId);
+        const siblings = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(store.state, parentId);
         if (siblings.every(checkAllDescendantsSelected)) {
           shouldRegenerateModel = true;
           newModelLookup[parentId] = true;
@@ -91,13 +91,13 @@ const propagateSelection = ({
   });
   changes.removed.forEach(removedItemId => {
     if (selectionPropagation.parents) {
-      let parentId = (0, _useTreeViewItems.selectorItemParentId)(store.value, removedItemId);
+      let parentId = _useTreeViewItems.itemsSelectors.itemParentId(store.state, removedItemId);
       while (parentId != null) {
         if (newModelLookup[parentId]) {
           shouldRegenerateModel = true;
           delete newModelLookup[parentId];
         }
-        parentId = (0, _useTreeViewItems.selectorItemParentId)(store.value, parentId);
+        parentId = _useTreeViewItems.itemsSelectors.itemParentId(store.state, parentId);
       }
     }
     if (selectionPropagation.descendants) {
@@ -106,7 +106,7 @@ const propagateSelection = ({
           shouldRegenerateModel = true;
           delete newModelLookup[itemId];
         }
-        (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId).forEach(deSelectDescendants);
+        _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(store.state, itemId).forEach(deSelectDescendants);
       };
       deSelectDescendants(removedItemId);
     }

package/internals/useTreeView/useTreeView.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TreeViewAnyPluginSignature } from "../models/index.js";
 import { UseTreeViewBaseProps, UseTreeViewParameters, UseTreeViewReturnValue } from "./useTreeView.types.js";
-export declare function useTreeViewApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): React.RefObject<T>;
+export declare function useTreeViewApiInitialization<T>(inputApiRef: React.RefObject<Partial<T> | undefined> | undefined): React.RefObject<T>;
 /**
  * This is the main hook that sets the plugin system up for the tree-view.
  *

package/internals/useTreeView/useTreeView.js

@@ -9,11 +9,12 @@ exports.useTreeView = void 0;
 exports.useTreeViewApiInitialization = useTreeViewApiInitialization;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
+var _store = require("@mui/x-internals/store");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _corePlugins = require("../corePlugins");
 var _useExtractPluginParamsFromProps = require("./useExtractPluginParamsFromProps");
 var _useTreeViewBuildContext = require("./useTreeViewBuildContext");
-var _TreeViewStore = require("../utils/TreeViewStore");
 function initializeInputApiRef(inputApiRef) {
   if (inputApiRef.current == null) {
     inputApiRef.current = {};
@@ -27,7 +28,6 @@ function useTreeViewApiInitialization(inputApiRef) {
   }
   return fallbackPublicApiRef;
 }
-let globalId = 0;
 
 /**
  * This is the main hook that sets the plugin system up for the tree-view.
@@ -52,31 +52,24 @@ const useTreeView = ({
     plugins,
     props
   });
-  const instanceRef = React.useRef({});
-  const instance = instanceRef.current;
+  const instance = (0, _useRefWithInit.useRefWithInit)(() => ({})).current;
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(innerRootRef, rootRef);
-  const storeRef = React.useRef(null);
-  if (storeRef.current == null) {
-    globalId += 1;
-    const initialState = {
-      cacheKey: {
-        id: globalId
-      }
-    };
-    plugins.forEach(plugin => {
+  const store = (0, _useRefWithInit.useRefWithInit)(() => {
+    const initialState = {};
+    for (const plugin of plugins) {
       if (plugin.getInitialState) {
         Object.assign(initialState, plugin.getInitialState(pluginParams));
       }
-    });
-    storeRef.current = new _TreeViewStore.TreeViewStore(initialState);
-  }
+    }
+    return new _store.Store(initialState);
+  }).current;
   const contextValue = (0, _useTreeViewBuildContext.useTreeViewBuildContext)({
     plugins,
     instance,
     publicAPI: publicAPI.current,
-    store: storeRef.current,
+    store,
     rootRef: innerRootRef
   });
   const rootPropsGetters = [];
@@ -86,7 +79,7 @@ const useTreeView = ({
       params: pluginParams,
       rootRef: innerRootRef,
       plugins,
-      store: storeRef.current
+      store
     });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);

package/internals/useTreeView/useTreeView.types.d.ts

@@ -8,7 +8,7 @@ export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyP
   props: TProps;
 }
 export interface UseTreeViewBaseProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
-  apiRef: React.RefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
+  apiRef: React.RefObject<Partial<TreeViewPublicAPI<TSignatures>> | undefined> | undefined;
 }
 export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
   ref: React.Ref<HTMLUListElement>;

package/internals/useTreeView/useTreeViewBuildContext.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { TreeViewContextValue } from "../TreeViewProvider/index.js";
-import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI } from "../models/index.js";
+import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI, TreeViewStore } from "../models/index.js";
 import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
-import { TreeViewStore } from "../utils/TreeViewStore.js";
 export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(parameters: UseTreeViewBuildContextParameters<TSignatures>) => TreeViewContextValue<TSignatures>;
 interface UseTreeViewBuildContextParameters<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
   plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
   instance: TreeViewInstance<TSignatures>;
   publicAPI: TreeViewPublicAPI<TSignatures>;
-  store: TreeViewStore<TSignatures>;
+  store: TreeViewStore<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
   rootRef: React.RefObject<HTMLUListElement | null>;
 }
 export {};

package/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js

@@ -16,8 +16,6 @@ class FinalizationRegistryBasedCleanupTracking {
   unregister(unregisterToken) {
     this.registry.unregister(unregisterToken);
   }
-
-  // eslint-disable-next-line class-methods-use-this
   reset() {}
 }
 exports.FinalizationRegistryBasedCleanupTracking = FinalizationRegistryBasedCleanupTracking;

package/internals/utils/tree.js

@@ -9,7 +9,7 @@ var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.se
 const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !(0, _useTreeViewItems.selectorCanItemBeFocused)(state, items[itemIndex])) {
+  while (itemIndex >= 0 && !_useTreeViewItems.itemsSelectors.canItemBeFocused(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -18,12 +18,12 @@ const getLastNavigableItemInArray = (state, items) => {
   return items[itemIndex];
 };
 const getPreviousNavigableItem = (state, itemId) => {
-  const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
+  const itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(state, itemId);
   if (!itemMeta) {
     return null;
   }
-  const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
-  const itemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemId);
+  const siblings = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemMeta.parentId);
+  const itemIndex = _useTreeViewItems.itemsSelectors.itemIndex(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -32,7 +32,7 @@ const getPreviousNavigableItem = (state, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!_useTreeViewItems.itemsSelectors.canItemBeFocused(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -47,47 +47,47 @@ const getPreviousNavigableItem = (state, itemId) => {
 
   // Finds the last navigable ancestor of the previous navigable sibling.
   let currentItemId = siblings[previousNavigableSiblingIndex];
-  let lastNavigableChild = getLastNavigableItemInArray(state, (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId));
-  while ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, currentItemId) && lastNavigableChild != null) {
+  let lastNavigableChild = getLastNavigableItemInArray(state, _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, currentItemId));
+  while (_useTreeViewExpansion.expansionSelectors.isItemExpanded(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = getLastNavigableItemInArray(state, (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId));
+    lastNavigableChild = getLastNavigableItemInArray(state, _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, currentItemId));
   }
   return currentItemId;
 };
 exports.getPreviousNavigableItem = getPreviousNavigableItem;
 const getNextNavigableItem = (state, itemId) => {
   // If the item is expanded and has some navigable children, return the first of them.
-  if ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
-    const firstNavigableChild = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId).find(childId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, childId));
+  if (_useTreeViewExpansion.expansionSelectors.isItemExpanded(state, itemId)) {
+    const firstNavigableChild = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemId).find(childId => _useTreeViewItems.itemsSelectors.canItemBeFocused(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
+  let itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(state, itemId);
   while (itemMeta != null) {
     // Try to find the first navigable sibling after the current item.
-    const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
-    const currentItemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemMeta.id);
+    const siblings = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemMeta.parentId);
+    const currentItemIndex = _useTreeViewItems.itemsSelectors.itemIndex(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!_useTreeViewItems.itemsSelectors.canItemBeFocused(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if ((0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[nextItemIndex])) {
+      if (_useTreeViewItems.itemsSelectors.canItemBeFocused(state, siblings[nextItemIndex])) {
         return siblings[nextItemIndex];
       }
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemMeta.parentId);
+    itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(state, itemMeta.parentId);
   }
   return null;
 };
 exports.getNextNavigableItem = getNextNavigableItem;
 const getLastNavigableItem = state => {
   let itemId = null;
-  while (itemId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
-    const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
+  while (itemId == null || _useTreeViewExpansion.expansionSelectors.isItemExpanded(state, itemId)) {
+    const children = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemId);
     const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
@@ -99,7 +99,7 @@ const getLastNavigableItem = state => {
   return itemId;
 };
 exports.getLastNavigableItem = getLastNavigableItem;
-const getFirstNavigableItem = state => (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, null).find(itemId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, itemId));
+const getFirstNavigableItem = state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null).find(itemId => _useTreeViewItems.itemsSelectors.canItemBeFocused(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -120,8 +120,8 @@ const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = (0, _useTreeViewItems.selectorItemMeta)(state, itemAId);
-  const itemMetaB = (0, _useTreeViewItems.selectorItemMeta)(state, itemBId);
+  const itemMetaA = _useTreeViewItems.itemsSelectors.itemMeta(state, itemAId);
+  const itemMetaB = _useTreeViewItems.itemsSelectors.itemMeta(state, itemBId);
   if (!itemMetaA || !itemMetaB) {
     return [itemAId, itemBId];
   }
@@ -142,7 +142,7 @@ const findOrderInTremauxTree = (state, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, aAncestor);
+        aAncestor = _useTreeViewItems.itemsSelectors.itemParentId(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -150,12 +150,12 @@ const findOrderInTremauxTree = (state, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, bAncestor);
+        bAncestor = _useTreeViewItems.itemsSelectors.itemParentId(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, commonAncestor);
+  const ancestorFamily = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, commonAncestor);
   const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
@@ -164,20 +164,20 @@ exports.findOrderInTremauxTree = findOrderInTremauxTree;
 const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   const getNextItem = itemId => {
     // If the item is expanded and has some children, return the first of them.
-    if ((0, _useTreeViewExpansion.selectorIsItemExpandable)(state, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
-      return (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId)[0];
+    if (_useTreeViewExpansion.expansionSelectors.isItemExpandable(state, itemId) && _useTreeViewExpansion.expansionSelectors.isItemExpanded(state, itemId)) {
+      return _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemId)[0];
     }
-    let itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
+    let itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(state, itemId);
     while (itemMeta != null) {
       // Try to find the first navigable sibling after the current item.
-      const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
-      const currentItemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemMeta.id);
+      const siblings = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemMeta.parentId);
+      const currentItemIndex = _useTreeViewItems.itemsSelectors.itemIndex(state, itemMeta.id);
       if (currentItemIndex < siblings.length - 1) {
         return siblings[currentItemIndex + 1];
       }
 
       // If the item is the last of its siblings, go up a level to the parent and try again.
-      itemMeta = itemMeta.parentId ? (0, _useTreeViewItems.selectorItemMeta)(state, itemMeta.parentId) : null;
+      itemMeta = itemMeta.parentId ? _useTreeViewItems.itemsSelectors.itemMeta(state, itemMeta.parentId) : null;
     }
     throw new Error('Invalid range');
   };
@@ -186,7 +186,7 @@ const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   let current = first;
   while (current !== last) {
     current = getNextItem(current);
-    if (!(0, _useTreeViewItems.selectorIsItemDisabled)(state, current)) {
+    if (!_useTreeViewItems.itemsSelectors.isItemDisabled(state, current)) {
       items.push(current);
     }
   }

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.10.2",
+  "version": "8.11.1",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
-  "main": "./index.js",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
@@ -33,14 +32,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
+    "@base-ui-components/utils": "0.1.0",
     "@mui/utils": "^7.3.1",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "reselect": "^5.1.1",
-    "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.10.2"
+    "@mui/x-internals": "8.11.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -62,27 +60,28 @@
     "node": ">=14.0.0"
   },
   "type": "commonjs",
+  "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "require": {
         "types": "./index.d.ts",
         "default": "./index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
       }
     },
     "./*": {
-      "import": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
-      },
       "require": {
         "types": "./*/index.d.ts",
         "default": "./*/index.js"
+      },
+      "default": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
       }
     },
     "./esm": null

package/useTreeItem/useTreeItem.js

@@ -9,19 +9,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
-var _useSelector = require("../internals/hooks/useSelector");
-var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
-var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
-var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
-var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId");
+var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
+var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -30,7 +30,7 @@ const useTreeItem = parameters => {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
-  const depth = (0, _useSelector.useSelector)(store, (...params) => {
+  const depth = (0, _store.useStore)(store, (...params) => {
     if (typeof depthContext === 'function') {
       return depthContext(...params);
     }
@@ -60,15 +60,15 @@ const useTreeItem = parameters => {
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
-  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
-  const isSelectionEnabledForItem = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelectionEnabled, itemId);
-  const isCheckboxSelectionEnabled = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsCheckboxSelectionEnabled);
+  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
+  const isSelectionEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
+  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
     id
   });
-  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
+  const shouldBeAccessibleWithTab = (0, _store.useStore)(store, _useTreeViewFocus.focusSelectors.isItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -79,7 +79,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
+    if (!status.focused && _useTreeViewItems.itemsSelectors.canItemBeFocused(store.state, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -121,7 +121,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
+    if (_useTreeViewExpansion.expansionSelectors.triggerSlot(store.state) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!isCheckboxSelectionEnabled) {
@@ -144,7 +144,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'iconContainer') {
+    if (_useTreeViewExpansion.expansionSelectors.triggerSlot(store.state) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };