@mui/x-tree-view 8.0.0-alpha.0 → 8.0.0-alpha.1

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.d.ts

@@ -0,0 +1,182 @@
+import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
+import { TreeViewRootSelector } from '../../utils/selectors';
+/**
+ * Get the item that should be sequentially focusable (usually with the Tab key).
+ * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+ * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
+ */
+export declare const selectorDefaultFocusableItemId: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | null;
+    dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is the default focusable item.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
+ */
+export declare const selectorIsItemTheDefaultFocusableItem: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+        cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => string | null;
+        dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the id of the item that is currently focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that is currently focused.
+ */
+export declare const selectorFocusedItemId: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | null;
+    dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is focused, `false` otherwise.
+ */
+export declare const selectorIsItemFocused: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+        cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => string | null;
+        dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js

@@ -0,0 +1,34 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorTreeViewFocusState = state => state.focus;
+
+/**
+ * Get the item that should be sequentially focusable (usually with the Tab key).
+ * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+ * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
+ */
+export const selectorDefaultFocusableItemId = createSelector(selectorTreeViewFocusState, focus => focus.defaultFocusableItemId);
+
+/**
+ * Check if an item is the default focusable item.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
+ */
+export const selectorIsItemTheDefaultFocusableItem = createSelector([selectorDefaultFocusableItemId, (_, itemId) => itemId], (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId);
+
+/**
+ * Get the id of the item that is currently focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that is currently focused.
+ */
+export const selectorFocusedItemId = createSelector(selectorTreeViewFocusState, focus => focus.focusedItemId);
+
+/**
+ * Check if an item is focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is focused, `false` otherwise.
+ */
+export const selectorIsItemFocused = createSelector([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);

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

@@ -3,7 +3,6 @@ import { TreeViewPluginSignature } from '../../models';
 import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-import { TreeViewItemId } from '../../../models';
 export interface UseTreeViewFocusPublicAPI {
     /**
      * Focus the item with the given id.
@@ -16,20 +15,6 @@ export interface UseTreeViewFocusPublicAPI {
     focusItem: (event: React.SyntheticEvent, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
-    /**
-     * Check if an item is the currently focused item.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is focused, `false` otherwise.
-     */
-    isItemFocused: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Check if an item should be sequentially focusable (usually with the Tab key).
-     * At any point in time, there is a single item that can be sequentially focused in the Tree View.
-     * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item can be sequentially focusable, `false` otherwise.
-     */
-    canItemBeTabbed: (itemId: TreeViewItemId) => boolean;
     /**
      * Remove the focus from the currently focused item (both from the internal state and the DOM).
      */
@@ -45,7 +30,10 @@ export interface UseTreeViewFocusParameters {
 }
 export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
-    focusedItemId: string | null;
+    focus: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    };
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -1,22 +1,24 @@
+import * as React from 'react';
 export const useTreeViewIcons = ({
   slots,
   slotProps
 }) => {
-  return {
-    contextValue: {
-      icons: {
-        slots: {
-          collapseIcon: slots.collapseIcon,
-          expandIcon: slots.expandIcon,
-          endIcon: slots.endIcon
-        },
-        slotProps: {
-          collapseIcon: slotProps.collapseIcon,
-          expandIcon: slotProps.expandIcon,
-          endIcon: slotProps.endIcon
-        }
+  const pluginContextValue = React.useMemo(() => ({
+    icons: {
+      slots: {
+        collapseIcon: slots.collapseIcon,
+        expandIcon: slots.expandIcon,
+        endIcon: slots.endIcon
+      },
+      slotProps: {
+        collapseIcon: slotProps.collapseIcon,
+        expandIcon: slotProps.expandIcon,
+        endIcon: slotProps.endIcon
       }
     }
+  }), [slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  return {
+    contextValue: pluginContextValue
   };
 };
 useTreeViewIcons.params = {};

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

@@ -1,3 +1,3 @@
 export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, TreeViewItemToRenderProps, } from './useTreeViewItems.types';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
 export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,21 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children"];
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, selectorItemDepth } from "./useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateItemsState = ({
+  disabledItemsFocusable,
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
-  const itemMetaMap = {};
-  const itemMap = {};
-  const itemOrderedChildrenIds = {
+  const itemMetaLookup = {};
+  const itemModelLookup = {};
+  const itemOrderedChildrenIdsLookup = {
     [TREE_VIEW_ROOT_PARENT_ID]: []
   };
   const processItem = (item, depth, parentId) => {
@@ -23,14 +25,14 @@ const updateItemsState = ({
     if (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.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    if (itemMetaMap[id] != null) {
+    if (itemMetaLookup[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: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    itemMetaMap[id] = {
+    itemMetaLookup[id] = {
       id,
       label,
       parentId,
@@ -39,88 +41,58 @@ const updateItemsState = ({
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
-    itemMap[id] = item;
+    itemModelLookup[id] = item;
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    if (!itemOrderedChildrenIds[parentIdWithDefault]) {
-      itemOrderedChildrenIds[parentIdWithDefault] = [];
+    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
-    itemOrderedChildrenIds[parentIdWithDefault].push(id);
+    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
     item.children?.forEach(child => processItem(child, depth + 1, id));
   };
   items.forEach(item => processItem(item, 0, null));
-  const itemChildrenIndexes = {};
-  Object.keys(itemOrderedChildrenIds).forEach(parentId => {
-    itemChildrenIndexes[parentId] = buildSiblingIndexes(itemOrderedChildrenIds[parentId]);
+  const itemChildrenIndexesLookup = {};
+  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
+    itemChildrenIndexesLookup[parentId] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
   });
   return {
-    itemMetaMap,
-    itemMap,
-    itemOrderedChildrenIds,
-    itemChildrenIndexes
+    disabledItemsFocusable,
+    itemMetaLookup,
+    itemModelLookup,
+    itemOrderedChildrenIdsLookup,
+    itemChildrenIndexesLookup
   };
 };
 export const useTreeViewItems = ({
   instance,
   params,
-  state,
-  setState
+  store
 }) => {
-  const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
-  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [store]);
   const getItemTree = React.useCallback(() => {
-    const getItemFromItemId = id => {
-      const _state$items$itemMap$ = state.items.itemMap[id],
-        item = _objectWithoutPropertiesLoose(_state$items$itemMap$, _excluded);
-      const newChildren = state.items.itemOrderedChildrenIds[id];
-      if (newChildren) {
+    const getItemFromItemId = itemId => {
+      const item = selectorItemModel(store.value, itemId);
+      const newChildren = selectorItemOrderedChildrenIds(store.value, itemId);
+      if (newChildren.length > 0) {
         item.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete item.children;
       }
       return item;
     };
-    return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getItemFromItemId);
-  }, [state.items.itemMap, state.items.itemOrderedChildrenIds]);
-  const isItemDisabled = React.useCallback(itemId => {
-    if (itemId == null) {
-      return false;
-    }
-    let itemMeta = instance.getItemMeta(itemId);
-
-    // This can be called before the item has been added to the item map.
-    if (!itemMeta) {
-      return false;
-    }
-    if (itemMeta.disabled) {
-      return true;
-    }
-    while (itemMeta.parentId != null) {
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
-      if (itemMeta.disabled) {
-        return true;
-      }
-    }
-    return false;
-  }, [instance]);
-  const getItemIndex = React.useCallback(itemId => {
-    const parentId = instance.getItemMeta(itemId).parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    return state.items.itemChildrenIndexes[parentId][itemId];
-  }, [instance, state.items.itemChildrenIndexes]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+    return selectorItemOrderedChildrenIds(store.value, null).map(getItemFromItemId);
+  }, [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => selectorItemOrderedChildrenIds(store.value, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
+    const itemMeta = selectorItemMeta(store.value, itemId);
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById(generateTreeItemIdAttribute({
-      treeId: state.id.treeId,
+    const idAttribute = generateTreeItemIdAttribute({
+      treeId: selectorTreeViewId(store.value),
       itemId,
       id: itemMeta.idAttribute
-    }));
-  };
-  const isItemNavigable = itemId => {
-    if (params.disabledItemsFocusable) {
-      return true;
-    }
-    return !instance.isItemDisabled(itemId);
+    });
+    return document.getElementById(idAttribute);
   };
   const areItemUpdatesPreventedRef = React.useRef(false);
   const preventItemUpdates = React.useCallback(() => {
@@ -131,15 +103,16 @@ export const useTreeViewItems = ({
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    setState(prevState => {
+    store.update(prevState => {
       const newState = updateItemsState({
+        disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.items.itemMetaMap).forEach(item => {
-        if (!newState.itemMetaMap[item.id]) {
+      Object.values(prevState.items.itemMetaLookup).forEach(item => {
+        if (!newState.itemMetaLookup[item.id]) {
           publishTreeViewEvent(instance, 'removeItem', {
             id: item.id
           });
@@ -149,19 +122,19 @@ export const useTreeViewItems = ({
         items: newState
       });
     });
-  }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getItemsToRender = () => {
-    const getPropsFromItemId = id => {
-      const item = state.items.itemMetaMap[id];
-      return {
-        label: item.label,
-        itemId: item.id,
-        id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId)
-      };
-    };
-    return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
-  };
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+
+  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
+  const handleItemClick = useEventCallback((event, itemId) => {
+    if (params.onItemClick) {
+      params.onItemClick(event, itemId);
+    }
+  });
+  const pluginContextValue = React.useMemo(() => ({
+    items: {
+      onItemClick: handleItemClick
+    }
+  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -175,28 +148,16 @@ export const useTreeViewItems = ({
       getItemOrderedChildrenIds
     },
     instance: {
-      getItemMeta,
-      getItem,
-      getItemTree,
-      getItemsToRender,
-      getItemIndex,
       getItemDOMElement,
-      getItemOrderedChildrenIds,
-      isItemDisabled,
-      isItemNavigable,
       preventItemUpdates,
       areItemUpdatesPrevented
     },
-    contextValue: {
-      items: {
-        onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 useTreeViewItems.getInitialState = params => ({
   items: updateItemsState({
+    disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
@@ -210,11 +171,10 @@ useTreeViewItems.getDefaultizedParams = ({
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
 useTreeViewItems.wrapRoot = ({
-  children,
-  instance
+  children
 }) => {
   return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    value: selectorItemDepth,
     children: children
   });
 };