@mui/x-tree-view 8.11.0 → 8.11.1

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);
     }