@mui/x-tree-view 8.10.2 → 8.11.1

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { selectorExpandedItems, selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
+import { expansionSelectors } from "./useTreeViewExpansion.selectors.js";
 import { getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
-import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 export const useTreeViewExpansion = ({
   instance,
@@ -18,27 +18,21 @@ export const useTreeViewExpansion = ({
     defaultValue: params.defaultExpandedItems
   });
   useEnhancedEffect(() => {
-    store.update(prevState => {
-      const newExpansionTrigger = getExpansionTrigger({
-        isItemEditable: params.isItemEditable,
-        expansionTrigger: params.expansionTrigger
-      });
-      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        expansion: _extends({}, prevState.expansion, {
-          expansionTrigger: newExpansionTrigger
-        })
-      });
+    const newExpansionTrigger = getExpansionTrigger({
+      isItemEditable: params.isItemEditable,
+      expansionTrigger: params.expansionTrigger
     });
+    if (store.state.expansion.expansionTrigger === newExpansionTrigger) {
+      return;
+    }
+    store.set('expansion', _extends({}, store.state.expansion, {
+      expansionTrigger: newExpansionTrigger
+    }));
   }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     if (params.expandedItems === undefined) {
-      store.update(prevState => _extends({}, prevState, {
-        expansion: _extends({}, prevState.expansion, {
-          expandedItems: value
-        })
+      store.set('expansion', _extends({}, store.state.expansion, {
+        expandedItems: value
       }));
     }
     params.onExpandedItemsChange?.(event, value);
@@ -51,7 +45,7 @@ export const useTreeViewExpansion = ({
     event,
     shouldBeExpanded
   }) => {
-    const oldExpanded = selectorExpandedItems(store.value);
+    const oldExpanded = expansionSelectors.expandedItemsRaw(store.state);
     let newExpanded;
     if (shouldBeExpanded) {
       newExpanded = [itemId].concat(oldExpanded);
@@ -68,7 +62,7 @@ export const useTreeViewExpansion = ({
     event = null,
     shouldBeExpanded
   }) => {
-    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
+    const isExpandedBefore = expansionSelectors.isItemExpanded(store.state, itemId);
     const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
     if (isExpandedBefore === cleanShouldBeExpanded) {
       return;
@@ -89,14 +83,17 @@ export const useTreeViewExpansion = ({
       shouldBeExpanded: cleanShouldBeExpanded
     });
   });
+  const isItemExpanded = useEventCallback(itemId => {
+    return expansionSelectors.isItemExpandable(store.state, itemId);
+  });
   const expandAllSiblings = (event, itemId) => {
-    const itemMeta = selectorItemMeta(store.value, itemId);
+    const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
     if (itemMeta == null) {
       return;
     }
-    const siblings = selectorItemOrderedChildrenIds(store.value, itemMeta.parentId);
-    const diff = siblings.filter(child => selectorIsItemExpandable(store.value, child) && !selectorIsItemExpanded(store.value, child));
-    const newExpanded = selectorExpandedItems(store.value).concat(diff);
+    const siblings = itemsSelectors.itemOrderedChildrenIds(store.state, itemMeta.parentId);
+    const diff = siblings.filter(child => expansionSelectors.isItemExpandable(store.state, child) && !expansionSelectors.isItemExpanded(store.state, child));
+    const newExpanded = expansionSelectors.expandedItemsRaw(store.state).concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedItemId => {
@@ -113,16 +110,15 @@ export const useTreeViewExpansion = ({
   useEnhancedEffect(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
-      store.update(prevState => _extends({}, prevState, {
-        expansion: _extends({}, prevState.expansion, {
-          expandedItems
-        })
+      store.set('expansion', _extends({}, store.state.expansion, {
+        expandedItems
       }));
     }
   }, [store, params.expandedItems]);
   return {
     publicAPI: {
-      setItemExpansion
+      setItemExpansion,
+      isItemExpanded
     },
     instance: {
       setItemExpansion,

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -1,318 +1,26 @@
-import { TreeViewRootSelector } from "../../utils/selectors.js";
+import { TreeViewState } from "../../models/index.js";
 import { UseTreeViewExpansionSignature } from "./useTreeViewExpansion.types.js";
-/**
- * Get the expanded items.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {TreeViewItemId[]} The expanded items.
- */
-export declare const selectorExpandedItems: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-}) => string[]) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: {
-    expandedItems: string[];
-    expansionTrigger: "content" | "iconContainer";
-  }) => string[];
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    expandedItems: string[];
-    expansionTrigger: "content" | "iconContainer";
-  }) => string[]) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => string[];
-  dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-/**
- * Get the expanded items as a Map.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {TreeViewExpansionValue} The expanded items as a Map.
- */
-export declare const selectorExpandedItemsMap: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-}) => Map<string, true>) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: string[]) => Map<string, true>;
-  memoizedResultFunc: ((resultFuncArgs_0: string[]) => Map<string, true>) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => Map<string, true>;
-  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-    cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-  }) => string[]) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  } & {
-    resultFunc: (resultFuncArgs_0: {
-      expandedItems: string[];
-      expansionTrigger: "content" | "iconContainer";
-    }) => string[];
-    memoizedResultFunc: ((resultFuncArgs_0: {
-      expandedItems: string[];
-      expansionTrigger: "content" | "iconContainer";
-    }) => string[]) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    };
-    lastResult: () => string[];
-    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
-    recomputations: () => number;
-    resetRecomputations: () => void;
-    dependencyRecomputations: () => number;
-    resetDependencyRecomputations: () => void;
-  } & {
-    memoize: typeof import("reselect").weakMapMemoize;
-    argsMemoize: typeof import("reselect").weakMapMemoize;
-  }];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-/**
- * Check if an item is expanded.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is expanded, `false` otherwise.
- */
-export declare const selectorIsItemExpanded: ((state: any, itemId: string) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: Map<string, true>, resultFuncArgs_1: string) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: Map<string, true>, resultFuncArgs_1: string) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-    cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-  }) => Map<string, true>) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  } & {
-    resultFunc: (resultFuncArgs_0: string[]) => Map<string, true>;
-    memoizedResultFunc: ((resultFuncArgs_0: string[]) => Map<string, true>) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    };
-    lastResult: () => Map<string, true>;
-    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-      cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-    }) => string[]) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    } & {
-      resultFunc: (resultFuncArgs_0: {
-        expandedItems: string[];
-        expansionTrigger: "content" | "iconContainer";
-      }) => string[];
-      memoizedResultFunc: ((resultFuncArgs_0: {
-        expandedItems: string[];
-        expansionTrigger: "content" | "iconContainer";
-      }) => string[]) & {
-        clearCache: () => void;
-        resultsCount: () => number;
-        resetResultsCount: () => void;
-      };
-      lastResult: () => string[];
-      dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
-      recomputations: () => number;
-      resetRecomputations: () => void;
-      dependencyRecomputations: () => number;
-      resetDependencyRecomputations: () => void;
-    } & {
-      memoize: typeof import("reselect").weakMapMemoize;
-      argsMemoize: typeof import("reselect").weakMapMemoize;
-    }];
-    recomputations: () => number;
-    resetRecomputations: () => void;
-    dependencyRecomputations: () => number;
-    resetDependencyRecomputations: () => void;
-  } & {
-    memoize: typeof import("reselect").weakMapMemoize;
-    argsMemoize: typeof import("reselect").weakMapMemoize;
-  }, (_: any, itemId: string) => string];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-/**
- * Check if an item is expandable.
- * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is expandable, `false` otherwise.
- */
-export declare const selectorIsItemExpandable: ((state: any, itemId: string | null) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: import("../../index.js").TreeViewItemMeta | null) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: import("../../index.js").TreeViewItemMeta | null) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [((state: any, itemId: string | null) => import("../../index.js").TreeViewItemMeta | null) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  } & {
-    resultFunc: (resultFuncArgs_0: {
-      [itemId: string]: import("../../index.js").TreeViewItemMeta;
-    }, resultFuncArgs_1: string | null) => import("../../index.js").TreeViewItemMeta | null;
-    memoizedResultFunc: ((resultFuncArgs_0: {
-      [itemId: string]: import("../../index.js").TreeViewItemMeta;
-    }, resultFuncArgs_1: string | null) => import("../../index.js").TreeViewItemMeta | null) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    };
-    lastResult: () => import("../../index.js").TreeViewItemMeta | null;
-    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("../useTreeViewItems/index.js").UseTreeViewItemsState<import("../../../index.js").TreeViewDefaultItemModelProperties> & Partial<{}> & {
-      cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-    }) => {
-      [itemId: string]: import("../../index.js").TreeViewItemMeta;
-    }) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    } & {
-      resultFunc: (resultFuncArgs_0: {
-        disabledItemsFocusable: boolean;
-        itemModelLookup: {
-          [itemId: string]: import("../../../index.js").TreeViewBaseItem<import("../../../index.js").TreeViewDefaultItemModelProperties>;
-        };
-        itemMetaLookup: {
-          [itemId: string]: import("../../index.js").TreeViewItemMeta;
-        };
-        itemOrderedChildrenIdsLookup: {
-          [parentItemId: string]: string[];
-        };
-        itemChildrenIndexesLookup: {
-          [parentItemId: string]: {
-            [itemId: string]: number;
-          };
-        };
-        loading: boolean;
-        error: Error | null;
-      }) => {
-        [itemId: string]: import("../../index.js").TreeViewItemMeta;
-      };
-      memoizedResultFunc: ((resultFuncArgs_0: {
-        disabledItemsFocusable: boolean;
-        itemModelLookup: {
-          [itemId: string]: import("../../../index.js").TreeViewBaseItem<import("../../../index.js").TreeViewDefaultItemModelProperties>;
-        };
-        itemMetaLookup: {
-          [itemId: string]: import("../../index.js").TreeViewItemMeta;
-        };
-        itemOrderedChildrenIdsLookup: {
-          [parentItemId: string]: string[];
-        };
-        itemChildrenIndexesLookup: {
-          [parentItemId: string]: {
-            [itemId: string]: number;
-          };
-        };
-        loading: boolean;
-        error: Error | null;
-      }) => {
-        [itemId: string]: import("../../index.js").TreeViewItemMeta;
-      }) & {
-        clearCache: () => void;
-        resultsCount: () => number;
-        resetResultsCount: () => void;
-      };
-      lastResult: () => {
-        [itemId: string]: import("../../index.js").TreeViewItemMeta;
-      };
-      dependencies: [TreeViewRootSelector<import("../useTreeViewItems/index.js").UseTreeViewItemsSignature>];
-      recomputations: () => number;
-      resetRecomputations: () => void;
-      dependencyRecomputations: () => number;
-      resetDependencyRecomputations: () => void;
-    } & {
-      memoize: typeof import("reselect").weakMapMemoize;
-      argsMemoize: typeof import("reselect").weakMapMemoize;
-    }, (_: any, itemId: string | null) => string | null];
-    recomputations: () => number;
-    resetRecomputations: () => void;
-    dependencyRecomputations: () => number;
-    resetDependencyRecomputations: () => void;
-  } & {
-    memoize: typeof import("reselect").weakMapMemoize;
-    argsMemoize: typeof import("reselect").weakMapMemoize;
-  }];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-/**
- * Get the slot that triggers the item's expansion when clicked.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
- */
-export declare const selectorItemExpansionTrigger: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-}) => "content" | "iconContainer") & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: {
-    expandedItems: string[];
-    expansionTrigger: "content" | "iconContainer";
-  }) => "content" | "iconContainer";
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    expandedItems: string[];
-    expansionTrigger: "content" | "iconContainer";
-  }) => "content" | "iconContainer") & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => "content" | "iconContainer";
-  dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
+export declare const expansionSelectors: {
+  /**
+   * Gets the expanded items as provided to the component.
+   */
+  expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => string[];
+  /**
+   * Get the expanded items as a Map.
+   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   */
+  expandedItemsMap: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>) => Map<string, true>;
+  /**
+   * Gets the slot that triggers the item's expansion when clicked.
+   */
+  triggerSlot: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => "content" | "iconContainer";
+  /**
+   * Checks whether an item is expanded.
+   */
+  isItemExpanded: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>, itemId: string) => boolean;
+  /**
+   * Checks whether an item is expandable.
+   */
+  isItemExpandable: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("../useTreeViewItems/index.js").UseTreeViewItemsState<import("../../../index.js").TreeViewDefaultItemModelProperties> & Partial<{}>, _itemId: string) => boolean;
 };

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

@@ -1,44 +1,33 @@
-import { createSelector } from "../../utils/selectors.js";
-import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
-const selectorExpansion = state => state.expansion;
-
-/**
- * Get the expanded items.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {TreeViewItemId[]} The expanded items.
- */
-export const selectorExpandedItems = createSelector([selectorExpansion], expansionState => expansionState.expandedItems);
-
-/**
- * Get the expanded items as a Map.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {TreeViewExpansionValue} The expanded items as a Map.
- */
-export const selectorExpandedItemsMap = createSelector([selectorExpandedItems], expandedItems => {
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+const expandedItemMapSelector = createSelectorMemoized(state => state.expansion.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
     expandedItemsMap.set(id, true);
   });
   return expandedItemsMap;
 });
-
-/**
- * Check if an item is expanded.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is expanded, `false` otherwise.
- */
-export const selectorIsItemExpanded = createSelector([selectorExpandedItemsMap, (_, itemId) => itemId], (expandedItemsMap, itemId) => expandedItemsMap.has(itemId));
-
-/**
- * Check if an item is expandable.
- * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is expandable, `false` otherwise.
- */
-export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
-
-/**
- * Get the slot that triggers the item's expansion when clicked.
- * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
- */
-export const selectorItemExpansionTrigger = createSelector([selectorExpansion], expansionState => expansionState.expansionTrigger);
+export const expansionSelectors = {
+  /**
+   * Gets the expanded items as provided to the component.
+   */
+  expandedItemsRaw: createSelector(state => state.expansion.expandedItems),
+  /**
+   * Get the expanded items as a Map.
+   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   */
+  expandedItemsMap: expandedItemMapSelector,
+  /**
+   * Gets the slot that triggers the item's expansion when clicked.
+   */
+  triggerSlot: createSelector(state => state.expansion.expansionTrigger),
+  /**
+   * Checks whether an item is expanded.
+   */
+  isItemExpanded: createSelector(expandedItemMapSelector, (expandedItemsMap, itemId) => expandedItemsMap.has(itemId)),
+  /**
+   * Checks whether an item is expandable.
+   */
+  isItemExpandable: createSelector(itemsSelectors.itemMeta, (itemMeta, _itemId) => itemMeta?.expandable ?? false)
+};

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -17,8 +17,14 @@ export interface UseTreeViewExpansionPublicAPI {
     event?: React.SyntheticEvent;
     shouldBeExpanded?: boolean;
   }) => void;
+  /**
+   * Check if an item is expanded.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+   */
+  isItemExpanded: (itemId: TreeViewItemId) => boolean;
 }
-export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
+export interface UseTreeViewExpansionInstance extends Omit<UseTreeViewExpansionPublicAPI, 'isItemExpanded'> {
   /**
    * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.

package/esm/internals/plugins/useTreeViewFocus/index.d.ts

@@ -1,2 +1,3 @@
 export { useTreeViewFocus } from "./useTreeViewFocus.js";
-export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters, UseTreeViewFocusParametersWithDefaults } from "./useTreeViewFocus.types.js";
+export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters, UseTreeViewFocusParametersWithDefaults } from "./useTreeViewFocus.types.js";
+export { focusSelectors } from "./useTreeViewFocus.selectors.js";

package/esm/internals/plugins/useTreeViewFocus/index.js

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

package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,30 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
-import { selectorDefaultFocusableItemId, selectorFocusedItemId } from "./useTreeViewFocus.selectors.js";
-import { selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { focusSelectors } from "./useTreeViewFocus.selectors.js";
+import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewFocus = ({
   instance,
   params,
   store
 }) => {
   const setFocusedItemId = useEventCallback(itemId => {
-    store.update(prevState => {
-      const focusedItemId = selectorFocusedItemId(prevState);
-      if (focusedItemId === itemId) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        focus: _extends({}, prevState.focus, {
-          focusedItemId: itemId
-        })
-      });
-    });
+    const focusedItemId = focusSelectors.focusedItemId(store.state);
+    if (focusedItemId === itemId) {
+      return;
+    }
+    store.set('focus', _extends({}, store.state.focus, {
+      focusedItemId: itemId
+    }));
   });
   const isItemVisible = itemId => {
-    const itemMeta = selectorItemMeta(store.value, itemId);
-    return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
+    const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
+    return itemMeta && (itemMeta.parentId == null || expansionSelectors.isItemExpanded(store.state, itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const itemElement = instance.getItemDOMElement(itemId);
@@ -43,11 +39,11 @@ export const useTreeViewFocus = ({
     }
   });
   const removeFocusedItem = useEventCallback(() => {
-    const focusedItemId = selectorFocusedItemId(store.value);
+    const focusedItemId = focusSelectors.focusedItemId(store.state);
     if (focusedItemId == null) {
       return;
     }
-    const itemMeta = selectorItemMeta(store.value, focusedItemId);
+    const itemMeta = itemsSelectors.itemMeta(store.state, focusedItemId);
     if (itemMeta) {
       const itemElement = instance.getItemDOMElement(focusedItemId);
       if (itemElement) {
@@ -59,8 +55,8 @@ export const useTreeViewFocus = ({
   useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    const focusedItemId = selectorFocusedItemId(store.value);
-    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    const focusedItemId = focusSelectors.focusedItemId(store.state);
+    const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
     if (focusedItemId === id && defaultFocusableItemId != null) {
       innerFocusItem(null, defaultFocusableItemId);
     }
@@ -72,7 +68,7 @@ export const useTreeViewFocus = ({
     }
 
     // if the event bubbled (which is React specific) we don't want to steal focus
-    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
     if (event.target === event.currentTarget && defaultFocusableItemId != null) {
       innerFocusItem(event, defaultFocusableItemId);
     }