@mui/x-tree-view 8.22.0 → 8.24.0

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

@@ -0,0 +1,60 @@
+import { TreeViewItemMeta } from "../../models/index.js";
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const itemsSelectors: {
+  /**
+   * Gets the DOM structure of the Tree View.
+   */
+  domStructure: (state: MinimalTreeViewState<any, any>) => "flat" | "nested";
+  /**
+   * Checks whether the disabled items are focusable.
+   */
+  disabledItemFocusable: (state: MinimalTreeViewState<any, any>) => boolean;
+  /**
+   * Gets the meta-information of all items.
+   */
+  itemMetaLookup: (state: MinimalTreeViewState<any, any>) => {
+    [itemId: string]: TreeViewItemMeta;
+  };
+  /**
+   * Gets the ordered children ids of all items.
+   */
+  itemOrderedChildrenIdsLookup: (state: MinimalTreeViewState<any, any>) => {
+    [parentItemId: string]: string[];
+  };
+  /**
+   * Gets the meta-information of an item.
+   */
+  itemMeta: (state: MinimalTreeViewState<any, any>, itemId: string | null) => TreeViewItemMeta | null;
+  /**
+   * Gets the ordered children ids of an item.
+   */
+  itemOrderedChildrenIds: (state: MinimalTreeViewState<any, any>, itemId: string | null) => string[];
+  /**
+   * Gets the model of an item.
+   */
+  itemModel: (state: MinimalTreeViewState<any, any>, itemId: string) => any;
+  /**
+   * Checks whether an item is disabled.
+   */
+  isItemDisabled: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * Gets the index of an item in its parent's children.
+   */
+  itemIndex: (state: MinimalTreeViewState<any, any>, itemId: string) => number;
+  /**
+   * Gets the id of an item's parent.
+   */
+  itemParentId: (state: MinimalTreeViewState<any, any>, itemId: string) => string | null;
+  /**
+   * Gets the depth of an item (items at the root level have a depth of 0).
+   */
+  itemDepth: (state: MinimalTreeViewState<any, any>, itemId: string) => number;
+  /**
+   * Checks whether an item can be focused.
+   */
+  canItemBeFocused: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * Gets the identation between an item and its children.
+   */
+  itemChildrenIndentation: (state: MinimalTreeViewState<any, any>) => string | number;
+};

package/internals/plugins/{useTreeViewItems/useTreeViewItems.selectors.js → items/selectors.js}

@@ -5,62 +5,66 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.itemsSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("./useTreeViewItems.utils");
+var _utils = require("./utils");
 const EMPTY_CHILDREN = [];
 const itemsSelectors = exports.itemsSelectors = {
   /**
    * Gets the DOM structure of the Tree View.
    */
-  domStructure: (0, _store.createSelector)(state => state.items.domStructure),
+  domStructure: (0, _store.createSelector)(state => state.domStructure),
   /**
    * Checks whether the disabled items are focusable.
    */
-  disabledItemFocusable: (0, _store.createSelector)(state => state.items.disabledItemsFocusable),
+  disabledItemFocusable: (0, _store.createSelector)(state => state.disabledItemsFocusable),
   /**
    * Gets the meta-information of all items.
    */
-  itemMetaLookup: (0, _store.createSelector)(state => state.items.itemMetaLookup),
+  itemMetaLookup: (0, _store.createSelector)(state => state.itemMetaLookup),
   /**
    * Gets the ordered children ids of all items.
    */
-  itemOrderedChildrenIdsLookup: (0, _store.createSelector)(state => state.items.itemOrderedChildrenIdsLookup),
+  itemOrderedChildrenIdsLookup: (0, _store.createSelector)(state => state.itemOrderedChildrenIdsLookup),
   /**
    * Gets the meta-information of an item.
    */
-  itemMeta: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? null),
+  itemMeta: (0, _store.createSelector)((state, itemId) => state.itemMetaLookup[itemId ?? _utils.TREE_VIEW_ROOT_PARENT_ID] ?? null),
   /**
    * Gets the ordered children ids of an item.
    */
-  itemOrderedChildrenIds: (0, _store.createSelector)((state, itemId) => state.items.itemOrderedChildrenIdsLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN),
+  itemOrderedChildrenIds: (0, _store.createSelector)((state, itemId) => state.itemOrderedChildrenIdsLookup[itemId ?? _utils.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN),
   /**
    * Gets the model of an item.
    */
-  itemModel: (0, _store.createSelector)((state, itemId) => state.items.itemModelLookup[itemId]),
+  itemModel: (0, _store.createSelector)((state, itemId) => state.itemModelLookup[itemId]),
   /**
    * Checks whether an item is disabled.
    */
-  isItemDisabled: (0, _store.createSelector)((state, itemId) => (0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId)),
+  isItemDisabled: (0, _store.createSelector)((state, itemId) => (0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
   /**
    * Gets the index of an item in its parent's children.
    */
   itemIndex: (0, _store.createSelector)((state, itemId) => {
-    const itemMeta = state.items.itemMetaLookup[itemId];
+    const itemMeta = state.itemMetaLookup[itemId];
     if (itemMeta == null) {
       return -1;
     }
-    const parentIndexes = state.items.itemChildrenIndexesLookup[itemMeta.parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID];
+    const parentIndexes = state.itemChildrenIndexesLookup[itemMeta.parentId ?? _utils.TREE_VIEW_ROOT_PARENT_ID];
     return parentIndexes[itemMeta.id];
   }),
   /**
    * Gets the id of an item's parent.
    */
-  itemParentId: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId]?.parentId ?? null),
+  itemParentId: (0, _store.createSelector)((state, itemId) => state.itemMetaLookup[itemId]?.parentId ?? null),
   /**
    * Gets the depth of an item (items at the root level have a depth of 0).
    */
-  itemDepth: (0, _store.createSelector)((state, itemId) => state.items.itemMetaLookup[itemId]?.depth ?? 0),
+  itemDepth: (0, _store.createSelector)((state, itemId) => state.itemMetaLookup[itemId]?.depth ?? 0),
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.items.disabledItemsFocusable || !(0, _useTreeViewItems.isItemDisabled)(state.items.itemMetaLookup, itemId))
+  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.disabledItemsFocusable || !(0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
+  /**
+   * Gets the identation between an item and its children.
+   */
+  itemChildrenIndentation: (0, _store.createSelector)(state => state.itemChildrenIndentation)
 };

package/internals/plugins/items/utils.d.ts

@@ -0,0 +1,43 @@
+import { TreeViewValidItem, TreeViewItemId } from "../../../models/index.js";
+import { TreeViewItemMeta } from "../../models/index.js";
+import type { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/index.js";
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+  [itemId: string]: number;
+};
+/**
+ * Check if an item is disabled.
+ * This method should only be used in selectors that are checking if several items are disabled.
+ * Otherwise, use the `itemsSelector.isItemDisabled` selector.
+ * @returns
+ */
+export declare const isItemDisabled: (itemMetaLookup: {
+  [itemId: string]: TreeViewItemMeta;
+}, itemId: TreeViewItemId) => boolean;
+export declare function buildItemsLookups<R extends TreeViewValidItem<R>>(parameters: BuildItemsLookupsParameters<R>): {
+  metaLookup: {
+    [itemId: string]: TreeViewItemMeta;
+  };
+  modelLookup: {
+    [itemId: string]: R;
+  };
+  orderedChildrenIds: string[];
+  childrenIndexes: {
+    [itemId: string]: number;
+  };
+  itemsChildren: {
+    id: string | null;
+    children: R[];
+  }[];
+};
+interface BuildItemsLookupsParameters<R extends TreeViewValidItem<R>> {
+  items: readonly R[];
+  storeParameters: Pick<MinimalTreeViewParameters<R, any>, 'getItemId' | 'getItemLabel' | 'getItemChildren' | 'isItemDisabled' | 'isItemSelectionDisabled'>;
+  parentId: string | null;
+  depth: number;
+  isItemExpandable: (item: R, children: R[] | undefined) => boolean;
+  otherItemsMetaLookup: {
+    [itemId: string]: TreeViewItemMeta;
+  };
+}
+export {};

package/internals/plugins/{useTreeViewItems/useTreeViewItems.utils.js → items/utils.js}

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
 exports.buildItemsLookups = buildItemsLookups;
-exports.buildItemsState = buildItemsState;
 exports.isItemDisabled = exports.buildSiblingIndexes = void 0;
 const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
 const buildSiblingIndexes = siblings => {
@@ -48,53 +47,9 @@ const isItemDisabled = (itemMetaLookup, itemId) => {
   return false;
 };
 exports.isItemDisabled = isItemDisabled;
-function buildItemsState(parameters) {
-  const {
-    config,
-    items: itemsParam,
-    disabledItemsFocusable
-  } = parameters;
-  const itemMetaLookup = {};
-  const itemModelLookup = {};
-  const itemOrderedChildrenIdsLookup = {};
-  const itemChildrenIndexesLookup = {};
-  function processSiblings(items, parentId, depth) {
-    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    const {
-      metaLookup,
-      modelLookup,
-      orderedChildrenIds,
-      childrenIndexes,
-      itemsChildren
-    } = buildItemsLookups({
-      config,
-      items,
-      parentId,
-      depth,
-      isItemExpandable: (item, children) => !!children && children.length > 0,
-      otherItemsMetaLookup: itemMetaLookup
-    });
-    Object.assign(itemMetaLookup, metaLookup);
-    Object.assign(itemModelLookup, modelLookup);
-    itemOrderedChildrenIdsLookup[parentIdWithDefault] = orderedChildrenIds;
-    itemChildrenIndexesLookup[parentIdWithDefault] = childrenIndexes;
-    for (const item of itemsChildren) {
-      processSiblings(item.children || [], item.id, depth + 1);
-    }
-  }
-  processSiblings(itemsParam, null, 0);
-  return {
-    disabledItemsFocusable,
-    itemMetaLookup,
-    itemModelLookup,
-    itemOrderedChildrenIdsLookup,
-    itemChildrenIndexesLookup,
-    domStructure: 'nested'
-  };
-}
 function buildItemsLookups(parameters) {
   const {
-    config,
+    storeParameters,
     items,
     parentId,
     depth,
@@ -106,7 +61,7 @@ function buildItemsLookups(parameters) {
   const orderedChildrenIds = [];
   const itemsChildren = [];
   const processItem = item => {
-    const id = config.getItemId ? config.getItemId(item) : item.id;
+    const id = storeParameters.getItemId ? storeParameters.getItemId(item) : item.id;
     checkId({
       id,
       parentId,
@@ -114,11 +69,11 @@ function buildItemsLookups(parameters) {
       itemMetaLookup: otherItemsMetaLookup,
       siblingsMetaLookup: metaLookup
     });
-    const label = config.getItemLabel ? config.getItemLabel(item) : item.label;
+    const label = storeParameters.getItemLabel ? storeParameters.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'));
     }
-    const children = (config.getItemChildren ? config.getItemChildren(item) : item.children) || [];
+    const children = (storeParameters.getItemChildren ? storeParameters.getItemChildren(item) : item.children) || [];
     itemsChildren.push({
       id,
       children
@@ -130,7 +85,8 @@ function buildItemsLookups(parameters) {
       parentId,
       idAttribute: undefined,
       expandable: isItemExpandable(item, children),
-      disabled: config.isItemDisabled ? config.isItemDisabled(item) : false,
+      disabled: storeParameters.isItemDisabled ? storeParameters.isItemDisabled(item) : false,
+      selectable: storeParameters.isItemSelectionDisabled ? !storeParameters.isItemSelectionDisabled(item) : true,
       depth
     };
     orderedChildrenIds.push(id);

package/internals/plugins/{useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts → jsxItems/TreeViewJSXItemsPlugin.d.ts}

@@ -1,8 +1,9 @@
-import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
-import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
-import { UseTreeViewKeyboardNavigationSignature } from "../useTreeViewKeyboardNavigation/index.js";
 import { TreeViewItemId } from "../../../models/index.js";
-export interface UseTreeViewItemsInstance {
+import { TreeViewItemMeta } from "../../models/index.js";
+import type { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
+export declare class TreeViewJSXItemsPlugin {
+  private store;
+  constructor(store: SimpleTreeViewStore<any>);
   /**
    * Insert a new item in the state from a Tree Item component.
    * @param {TreeViewItemMeta} item The meta-information of the item to insert.
@@ -24,12 +25,4 @@ export interface UseTreeViewItemsInstance {
    * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
    */
   setJSXItemsOrderedChildrenIds: (parentId: TreeViewItemId | null, orderedChildrenIds: TreeViewItemId[]) => void;
-}
-export interface UseTreeViewJSXItemsParameters {}
-export interface UseTreeViewItemsParametersWithDefaults {}
-export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
-  params: UseTreeViewJSXItemsParameters;
-  paramsWithDefaults: UseTreeViewItemsParametersWithDefaults;
-  instance: UseTreeViewItemsInstance;
-  dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
-}>;
+}

package/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewJSXItemsPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _items = require("../items");
+var _itemPlugin = require("./itemPlugin");
+class TreeViewJSXItemsPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.useJSXItemsItemPlugin, _itemPlugin.jsxItemsitemWrapper);
+  }
+
+  /**
+   * Insert a new item in the state from a Tree Item component.
+   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
+   * @returns {() => void} A function to remove the item from the state.
+   */
+  insertJSXItem = item => {
+    if (this.store.state.itemMetaLookup[item.id] != null) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
+    }
+    this.store.update({
+      itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+        [item.id]: item
+      }),
+      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+      itemModelLookup: (0, _extends2.default)({}, this.store.state.itemModelLookup, {
+        [item.id]: {
+          id: item.id,
+          label: item.label ?? ''
+        }
+      })
+    });
+    return () => {
+      const newItemMetaLookup = (0, _extends2.default)({}, this.store.state.itemMetaLookup);
+      const newItemModelLookup = (0, _extends2.default)({}, this.store.state.itemModelLookup);
+      delete newItemMetaLookup[item.id];
+      delete newItemModelLookup[item.id];
+      this.store.update({
+        itemMetaLookup: newItemMetaLookup,
+        itemModelLookup: newItemModelLookup
+      });
+    };
+  };
+
+  /**
+   * Updates the `labelMap` to register the first character of the given item's label.
+   * This map is used to navigate the tree using type-ahead search.
+   * @param {TreeViewItemId} itemId The id of the item to map the label of.
+   * @param {string} label The item's label.
+   * @returns {() => void} A function to remove the item from the `labelMap`.
+   */
+  mapLabelFromJSX = (itemId, label) => {
+    this.store.keyboardNavigation.updateLabelMap(labelMap => {
+      labelMap[itemId] = label;
+      return labelMap;
+    });
+    return () => {
+      this.store.keyboardNavigation.updateLabelMap(labelMap => {
+        const newMap = (0, _extends2.default)({}, labelMap);
+        delete newMap[itemId];
+        return newMap;
+      });
+    };
+  };
+
+  /**
+   * Store the ids of a given item's children in the state.
+   * Those ids must be passed in the order they should be rendered.
+   * @param {TreeViewItemId | null} parentId The id of the item to store the children of.
+   * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
+   */
+  setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? _items.TREE_VIEW_ROOT_PARENT_ID;
+    this.store.update({
+      itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, this.store.state.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: (0, _extends2.default)({}, this.store.state.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: (0, _items.buildSiblingIndexes)(orderedChildrenIds)
+      })
+    });
+  };
+}
+exports.TreeViewJSXItemsPlugin = TreeViewJSXItemsPlugin;

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

@@ -0,0 +1 @@
+export * from "./TreeViewJSXItemsPlugin.js";

package/internals/plugins/jsxItems/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewJSXItemsPlugin = require("./TreeViewJSXItemsPlugin");
+Object.keys(_TreeViewJSXItemsPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewJSXItemsPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewJSXItemsPlugin[key];
+    }
+  });
+});

package/internals/plugins/jsxItems/itemPlugin.d.ts

@@ -0,0 +1,4 @@
+import { TreeItemWrapper, TreeViewItemPlugin } from "../../models/index.js";
+import { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
+export declare const useJSXItemsItemPlugin: TreeViewItemPlugin;
+export declare const jsxItemsitemWrapper: TreeItemWrapper<SimpleTreeViewStore<any>>;

package/internals/plugins/{useTreeViewJSXItems → jsxItems}/itemPlugin.js

@@ -5,28 +5,29 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewJSXItemsItemPlugin = void 0;
+exports.useJSXItemsItemPlugin = exports.jsxItemsitemWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
-var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
+var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId");
-var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
-const useTreeViewJSXItemsItemPlugin = ({
+var _id = require("../id");
+var _jsxRuntime = require("react/jsx-runtime");
+const useJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
   const {
-    instance,
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
     disabled = false,
+    disableSelection = false,
     label,
     itemId,
     id
@@ -43,39 +44,53 @@ const useTreeViewJSXItemsItemPlugin = ({
   const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
-  const treeId = (0, _store.useStore)(store, _useTreeViewId.idSelectors.treeId);
+  const idAttribute = (0, _store.useStore)(store, _id.idSelectors.treeItemIdAttribute, itemId, id);
 
   // Prevent any flashing
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
-      itemId,
-      treeId,
-      id
-    });
     registerChild(idAttribute, itemId);
     return () => {
       unregisterChild(idAttribute);
       unregisterChild(idAttribute);
     };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  }, [store, registerChild, unregisterChild, idAttribute, itemId]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return instance.insertJSXItem({
+    return store.jsxItems.insertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
       expandable,
-      disabled
+      disabled,
+      selectable: !disableSelection
     });
-  }, [instance, parentId, itemId, expandable, disabled, id]);
+  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
+      return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
     }
     return undefined;
-  }, [instance, itemId, label]);
+  }, [store, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef
   };
 };
-exports.useTreeViewJSXItemsItemPlugin = useTreeViewJSXItemsItemPlugin;
+exports.useJSXItemsItemPlugin = useJSXItemsItemPlugin;
+const jsxItemsitemWrapper = ({
+  children,
+  itemId,
+  idAttribute
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
+    itemId: itemId,
+    idAttribute: idAttribute,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
+      value: depthContext + 1,
+      children: children
+    })
+  });
+};
+exports.jsxItemsitemWrapper = jsxItemsitemWrapper;
+if (process.env.NODE_ENV !== "production") jsxItemsitemWrapper.displayName = "jsxItemsitemWrapper";

package/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.d.ts

@@ -0,0 +1,28 @@
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+type TreeViewLabelMap = {
+  [itemId: string]: string;
+};
+export declare class TreeViewKeyboardNavigationPlugin {
+  private store;
+  private labelMap;
+  private typeaheadQuery;
+  constructor(store: any);
+  private canToggleItemSelection;
+  private canToggleItemExpansion;
+  private getFirstItemMatchingTypeaheadQuery;
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap: (callback: (labelMap: TreeViewLabelMap) => TreeViewLabelMap) => void;
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => Promise<void>;
+}
+export {};