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

package/{node → esm}/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -1,19 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsItemDisabled = exports.selectorCanItemBeFocused = void 0;
-var _selectors = require("../../utils/selectors");
-var _useTreeViewItems = require("./useTreeViewItems.utils");
+import { createSelector } from "../../utils/selectors.js";
+import { TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 const selectorTreeViewItemsState = state => state.items;
 
+/**
+ * Get the loading state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The loading state for the Tree View.
+ */
+export const selectorIsTreeViewLoading = createSelector(selectorTreeViewItemsState, items => items.loading);
+/**
+ * Get the error state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The error state for the Tree View.
+ */
+export const selectorGetTreeViewError = createSelector(selectorTreeViewItemsState, items => items.error);
+
 /**
  * Get the meta-information of all items.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
  * @returns {TreeViewItemMetaLookup} The meta-information of all items.
  */
-const selectorItemMetaLookup = exports.selectorItemMetaLookup = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.itemMetaLookup);
+export const selectorItemMetaLookup = createSelector(selectorTreeViewItemsState, items => items.itemMetaLookup);
 const EMPTY_CHILDREN = [];
 
 /**
@@ -22,7 +29,7 @@ const EMPTY_CHILDREN = [];
  * @param {TreeViewItemId} itemId The id of the item to get the children of.
  * @returns {TreeViewItemId[]} The ordered children ids of the item.
  */
-const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemOrderedChildrenIdsLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN);
+export const selectorItemOrderedChildrenIds = createSelector([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemOrderedChildrenIdsLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN);
 
 /**
  * Get the model of an item.
@@ -30,7 +37,7 @@ const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds =
  * @param {TreeViewItemId} itemId The id of the item to get the model of.
  * @returns {R} The model of the item.
  */
-const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
+export const selectorItemModel = createSelector([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
   const a = itemsState.itemModelLookup[itemId];
   return a;
 });
@@ -42,7 +49,7 @@ const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelec
  * @param {TreeViewItemId} itemId The id of the item to get the meta-information of.
  * @returns {TreeViewItemMeta | null} The meta-information of the item.
  */
-const selectorItemMeta = exports.selectorItemMeta = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => itemMetaLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? null);
+export const selectorItemMeta = createSelector([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => itemMetaLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? null);
 
 /**
  * Check if an item is disabled.
@@ -50,7 +57,7 @@ const selectorItemMeta = exports.selectorItemMeta = (0, _selectors.createSelecto
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is disabled, `false` otherwise.
  */
-const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => {
+export const selectorIsItemDisabled = createSelector([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => {
   if (itemId == null) {
     return false;
   }
@@ -78,11 +85,11 @@ const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.c
  * @param {TreeViewItemId} itemId The id of the item to get the index of.
  * @returns {number} The index of the item in its parent's children.
  */
-const selectorItemIndex = exports.selectorItemIndex = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorItemMeta], (itemsState, itemMeta) => {
+export const selectorItemIndex = createSelector([selectorTreeViewItemsState, selectorItemMeta], (itemsState, itemMeta) => {
   if (itemMeta == null) {
     return -1;
   }
-  const parentIndexes = itemsState.itemChildrenIndexesLookup[itemMeta.parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID];
+  const parentIndexes = itemsState.itemChildrenIndexesLookup[itemMeta.parentId ?? TREE_VIEW_ROOT_PARENT_ID];
   return parentIndexes[itemMeta.id];
 });
 
@@ -92,7 +99,7 @@ const selectorItemIndex = exports.selectorItemIndex = (0, _selectors.createSelec
  * @param {TreeViewItemId} itemId The id of the item to get the parent id of.
  * @returns {TreeViewItemId | null} The id of the parent of the item.
  */
-const selectorItemParentId = exports.selectorItemParentId = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.parentId ?? null);
+export const selectorItemParentId = createSelector([selectorItemMeta], itemMeta => itemMeta?.parentId ?? null);
 
 /**
  * Get the depth of an item (items at the root level have a depth of 0).
@@ -100,8 +107,8 @@ const selectorItemParentId = exports.selectorItemParentId = (0, _selectors.creat
  * @param {TreeViewItemId} itemId The id of the item to get the depth of.
  * @returns {number} The depth of the item.
  */
-const selectorItemDepth = exports.selectorItemDepth = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
-const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
+export const selectorItemDepth = createSelector([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
+export const selectorCanItemBeFocused = createSelector([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
   if (itemsState.disabledItemsFocusable) {
     return true;
   }

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

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
+export type AddItemsParameters<R> = {
+  items: readonly R[];
+  parentId?: TreeViewItemId;
+  depth: number;
+  getChildrenCount?: (item: R) => number;
+};
+export interface UseTreeViewItemsPublicAPI<R extends {}> {
+  /**
+   * Get the item with the given id.
+   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
+   * @param {string} itemId The id of the item to retrieve.
+   * @returns {R} The item with the given id.
+   */
+  getItem: (itemId: TreeViewItemId) => R;
+  /**
+   * Get the DOM element of the item with the given id.
+   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+   * @returns {HTMLElement | null} The DOM element of the item with the given id.
+   */
+  getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
+  /**
+   * Get the ids of a given item's children.
+   * Those ids are returned in the order they should be rendered.
+   * To get the root items, pass `null` as the `itemId`.
+   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
+   * @returns {TreeViewItemId[]} The ids of the item's children.
+   */
+  getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
+  /**
+   * Get all the items in the same format as provided by `props.items`.
+   * @returns {TreeViewBaseItem[]} The items in the tree.
+   */
+  getItemTree: () => TreeViewBaseItem[];
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  setIsItemDisabled: (parameters: {
+    itemId: TreeViewItemId;
+    shouldBeDisabled?: boolean;
+  }) => void;
+  /** * Get the id of the parent item.
+   * @param {string} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
+}
+export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
+  /**
+   * Freeze any future update to the state based on the `items` prop.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   */
+  preventItemUpdates: () => void;
+  /**
+   * Check if the updates to the state based on the `items` prop are prevented.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
+   */
+  areItemUpdatesPrevented: () => boolean;
+  /**
+   * Add an array of items to the tree.
+   * @param {AddItemsParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  addItems: (args: AddItemsParameters<R>) => void;
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId} parentId The id of the item to remove the children of.
+   */
+  removeChildren: (parentId?: TreeViewItemId) => void;
+  /**
+   * Set the loading state of the tree.
+   * @param {boolean} loading True if the tree view is loading.
+   */
+  setTreeViewLoading: (loading: boolean) => void;
+  /**
+   * Set the error state of the tree.
+   * @param {Error | null} error The error on the tree view.
+   */
+  setTreeViewError: (error: Error | null) => void;
+}
+export interface UseTreeViewItemsParameters<R extends {
+  children?: R[];
+}> {
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  items: readonly R[];
+  /**
+   * Used to determine if a given item should be disabled.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should be disabled.
+   */
+  isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine the string label for a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The label of the item.
+   * @default (item) => item.label
+   */
+  getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the id of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The id of the item.
+   * @default (item) => item.id
+   */
+  getItemId?: (item: R) => TreeViewItemId;
+  /**
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+}
+export type UseTreeViewItemsDefaultizedParameters<R extends {
+  children?: R[];
+}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
+interface UseTreeViewItemsEventLookup {
+  removeItem: {
+    params: {
+      id: string;
+    };
+  };
+}
+export interface UseTreeViewItemsState<R extends {}> {
+  items: {
+    /**
+     * If `true`, will allow focus on disabled items.
+     * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
+     */
+    disabledItemsFocusable: boolean;
+    /**
+     * Model of each item as provided by `props.items` or by imperative items updates.
+     * It is not updated when properties derived from the model are updated:
+     * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
+     * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
+     * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
+     */
+    itemModelLookup: {
+      [itemId: string]: TreeViewBaseItem<R>;
+    };
+    /**
+     * Meta data of each item.
+     */
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    /**
+     * Ordered children ids of each item.
+     */
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    /**
+     * Index of each child in the ordered children ids of its parent.
+     */
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    /**
+     * The loading state of the tree.
+     */
+    loading: boolean;
+    /**
+     * The error state of the tree.
+     */
+    error: Error | null;
+  };
+}
+interface UseTreeViewItemsContextValue {
+  items: {
+    onItemClick: (event: React.MouseEvent, itemId: string) => void;
+  };
+}
+export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemsParameters<any>;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
+  instance: UseTreeViewItemsInstance<any>;
+  publicAPI: UseTreeViewItemsPublicAPI<any>;
+  events: UseTreeViewItemsEventLookup;
+  state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
+  contextValue: UseTreeViewItemsContextValue;
+}>;
+export {};

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+  [itemId: string]: number;
+};

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -0,0 +1,8 @@
+export const TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
+export const buildSiblingIndexes = siblings => {
+  const siblingsIndexLookup = {};
+  siblings.forEach((childId, index) => {
+    siblingsIndexLookup[childId] = index;
+  });
+  return siblingsIndexLookup;
+};

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

@@ -0,0 +1,2 @@
+export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";
+export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsDefaultizedParameters } from './useTreeViewJSXItems.types';

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

@@ -0,0 +1 @@
+export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewJSXItemsSignature } from "./useTreeViewJSXItems.types.js";
+export declare const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature>;

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -0,0 +1,183 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
+import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
+import { useSelector } from "../../hooks/useSelector.js";
+import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useTreeViewJSXItems = ({
+  instance,
+  store
+}) => {
+  instance.preventItemUpdates();
+  const insertJSXItem = useEventCallback(item => {
+    store.update(prevState => {
+      if (prevState.items.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'));
+      }
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, {
+          itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, {
+            [item.id]: item
+          }),
+          // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+          itemModelLookup: _extends({}, prevState.items.itemModelLookup, {
+            [item.id]: {
+              id: item.id,
+              label: item.label ?? ''
+            }
+          })
+        })
+      });
+    });
+    return () => {
+      store.update(prevState => {
+        const newItemMetaLookup = _extends({}, prevState.items.itemMetaLookup);
+        const newItemModelLookup = _extends({}, prevState.items.itemModelLookup);
+        delete newItemMetaLookup[item.id];
+        delete newItemModelLookup[item.id];
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, {
+            itemMetaLookup: newItemMetaLookup,
+            itemModelLookup: newItemModelLookup
+          })
+        });
+      });
+      publishTreeViewEvent(instance, 'removeItem', {
+        id: item.id
+      });
+    };
+  });
+  const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    store.update(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        itemOrderedChildrenIdsLookup: _extends({}, prevState.items.itemOrderedChildrenIdsLookup, {
+          [parentIdWithDefault]: orderedChildrenIds
+        }),
+        itemChildrenIndexesLookup: _extends({}, prevState.items.itemChildrenIndexesLookup, {
+          [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
+        })
+      })
+    }));
+  };
+  const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
+    instance.updateFirstCharMap(firstCharMap => {
+      firstCharMap[itemId] = firstChar;
+      return firstCharMap;
+    });
+    return () => {
+      instance.updateFirstCharMap(firstCharMap => {
+        const newMap = _extends({}, firstCharMap);
+        delete newMap[itemId];
+        return newMap;
+      });
+    };
+  });
+  return {
+    instance: {
+      insertJSXItem,
+      setJSXItemsOrderedChildrenIds,
+      mapFirstCharFromJSX
+    }
+  };
+};
+const useTreeViewJSXItemsItemPlugin = ({
+  props,
+  rootRef,
+  contentRef
+}) => {
+  const {
+    instance,
+    store
+  } = useTreeViewContext();
+  const {
+    children,
+    disabled = false,
+    label,
+    itemId,
+    id
+  } = props;
+  const parentContext = React.useContext(TreeViewChildrenItemContext);
+  if (parentContext == null) {
+    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
+  const {
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
+  const expandable = itemHasChildren(children);
+  const pluginContentRef = React.useRef(null);
+  const handleContentRef = useForkRef(pluginContentRef, contentRef);
+  const treeId = useSelector(store, selectorTreeViewId);
+
+  // Prevent any flashing
+  useEnhancedEffect(() => {
+    const idAttribute = generateTreeItemIdAttribute({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
+    return () => {
+      unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
+    };
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  useEnhancedEffect(() => {
+    return instance.insertJSXItem({
+      id: itemId,
+      idAttribute: id,
+      parentId,
+      expandable,
+      disabled
+    });
+  }, [instance, parentId, itemId, expandable, disabled, id]);
+  React.useEffect(() => {
+    if (label) {
+      return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
+    }
+    return undefined;
+  }, [instance, itemId, label]);
+  return {
+    contentRef: handleContentRef,
+    rootRef
+  };
+};
+useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.wrapItem = ({
+  children,
+  itemId,
+  idAttribute
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const depthContext = React.useContext(TreeViewItemDepthContext);
+  return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+    itemId: itemId,
+    idAttribute: idAttribute,
+    children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+      value: depthContext + 1,
+      children: children
+    })
+  });
+};
+useTreeViewJSXItems.wrapRoot = ({
+  children
+}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+  itemId: null,
+  idAttribute: null,
+  children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+    value: 0,
+    children: children
+  })
+});
+useTreeViewJSXItems.params = {};

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

@@ -0,0 +1,35 @@
+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 {
+  /**
+   * 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: TreeViewItemMeta) => () => void;
+  /**
+   * Updates the `firstCharMap` 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 first character of.
+   * @param {string} firstChar The first character of the item's label.
+   * @returns {() => void} A function to remove the item from the `firstCharMap`.
+   */
+  mapFirstCharFromJSX: (itemId: TreeViewItemId, firstChar: string) => () => void;
+  /**
+   * 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: TreeViewItemId | null, orderedChildrenIds: TreeViewItemId[]) => void;
+}
+export interface UseTreeViewJSXItemsParameters {}
+export interface UseTreeViewItemsDefaultizedParameters {}
+export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewJSXItemsParameters;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+  instance: UseTreeViewItemsInstance;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+}>;

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";
+export type { UseTreeViewKeyboardNavigationSignature } from './useTreeViewKeyboardNavigation.types';

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

@@ -0,0 +1 @@
+export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "./useTreeViewKeyboardNavigation.types.js";
+export declare const useTreeViewKeyboardNavigation: TreeViewPlugin<UseTreeViewKeyboardNavigationSignature>;