@mui/x-tree-view 8.11.3 → 8.13.0

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -9,101 +9,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
 var _useTreeViewId = require("../../corePlugins/useTreeViewId");
 var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const checkId = (id, item, itemMetaLookup) => {
-  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 (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 processItemsLookups = ({
-  disabledItemsFocusable,
-  items,
-  isItemDisabled,
-  getItemLabel,
-  getItemChildren,
-  getItemId,
-  initialDepth = 0,
-  initialParentId = null,
-  getChildrenCount,
-  ignoreChildren = false
-}) => {
-  const itemMetaLookup = {};
-  const itemModelLookup = {};
-  const itemOrderedChildrenIdsLookup = {
-    [_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]: []
-  };
-  const processItem = (item, depth, parentId) => {
-    const id = getItemId ? getItemId(item) : item.id;
-    checkId(id, item, itemMetaLookup);
-    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'));
-    }
-    const children = getItemChildren ? getItemChildren(item) : item.children;
-    itemMetaLookup[id] = {
-      id,
-      label,
-      parentId,
-      idAttribute: undefined,
-      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!children?.length,
-      disabled: isItemDisabled ? isItemDisabled(item) : false,
-      depth
-    };
-    itemModelLookup[id] = item;
-    const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
-      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
-    }
-    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
-
-    // if lazy loading is enabled, we don't want to process children passed through the `items` prop
-    if (!ignoreChildren) {
-      children?.forEach(child => processItem(child, depth + 1, id));
-    }
-  };
-  items?.forEach(item => processItem(item, initialDepth, initialParentId));
-  const itemChildrenIndexesLookup = {};
-  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
-    itemChildrenIndexesLookup[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIdsLookup[parentId]);
-  });
-  return {
-    disabledItemsFocusable,
-    itemMetaLookup,
-    itemModelLookup,
-    itemOrderedChildrenIdsLookup,
-    itemChildrenIndexesLookup
-  };
-};
 const useTreeViewItems = ({
   instance,
   params,
   store
 }) => {
+  const itemsConfig = React.useMemo(() => ({
+    isItemDisabled: params.isItemDisabled,
+    getItemLabel: params.getItemLabel,
+    getItemChildren: params.getItemChildren,
+    getItemId: params.getItemId
+  }), [params.isItemDisabled, params.getItemLabel, params.getItemChildren, params.getItemId]);
   const getItem = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
     const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
-  const setTreeViewLoading = (0, _useEventCallback.default)(isLoading => {
-    store.set('items', (0, _extends2.default)({}, store.state.items, {
-      loading: isLoading
-    }));
-  });
-  const setTreeViewError = (0, _useEventCallback.default)(error => {
-    store.set('items', (0, _extends2.default)({}, store.state.items, {
-      error
-    }));
-  });
-  const setIsItemDisabled = (0, _useEventCallback.default)(({
+  const setIsItemDisabled = (0, _useEventCallback.useEventCallback)(({
     itemId,
     shouldBeDisabled
   }) => {
@@ -150,89 +79,84 @@ const useTreeViewItems = ({
     areItemUpdatesPreventedRef.current = true;
   }, []);
   const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
-  const addItems = ({
+  const setItemChildren = ({
     items,
     parentId,
-    depth,
     getChildrenCount
   }) => {
-    if (items) {
-      const newState = processItemsLookups({
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        items,
-        isItemDisabled: params.isItemDisabled,
-        getItemId: params.getItemId,
-        getItemLabel: params.getItemLabel,
-        getItemChildren: params.getItemChildren,
-        getChildrenCount,
-        initialDepth: depth,
-        initialParentId: parentId,
-        ignoreChildren: true
-      });
-      let newItems;
-      if (parentId) {
-        newItems = {
-          itemModelLookup: (0, _extends2.default)({}, store.state.items.itemModelLookup, newState.itemModelLookup),
-          itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, newState.itemMetaLookup),
-          itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, newState.itemOrderedChildrenIdsLookup, store.state.items.itemOrderedChildrenIdsLookup),
-          itemChildrenIndexesLookup: (0, _extends2.default)({}, newState.itemChildrenIndexesLookup, store.state.items.itemChildrenIndexesLookup)
-        };
-      } else {
-        newItems = {
-          itemModelLookup: newState.itemModelLookup,
-          itemMetaLookup: newState.itemMetaLookup,
-          itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
-          itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
-        };
-      }
-      store.set('items', (0, _extends2.default)({}, store.state.items, newItems));
-    }
+    const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+    const parentDepth = parentId == null ? -1 : _useTreeViewItems2.itemsSelectors.itemDepth(store.state, parentId);
+    const {
+      metaLookup,
+      modelLookup,
+      orderedChildrenIds,
+      childrenIndexes
+    } = (0, _useTreeViewItems.buildItemsLookups)({
+      config: itemsConfig,
+      items,
+      parentId,
+      depth: parentDepth + 1,
+      isItemExpandable: getChildrenCount ? item => getChildrenCount(item) > 0 : () => false,
+      otherItemsMetaLookup: _useTreeViewItems2.itemsSelectors.itemMetaLookup(store.state)
+    });
+    const lookups = {
+      itemModelLookup: (0, _extends2.default)({}, store.state.items.itemModelLookup, modelLookup),
+      itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, metaLookup),
+      itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: childrenIndexes
+      })
+    };
+    store.set('items', (0, _extends2.default)({}, store.state.items, lookups));
   };
-  const removeChildren = parentId => {
-    if (parentId == null) {
-      store.set('items', (0, _extends2.default)({}, store.state.items, {
-        itemMetaLookup: {},
-        itemOrderedChildrenIdsLookup: {},
-        itemChildrenIndexesLookup: {}
-      }));
-    } else {
-      const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
-        const item = store.state.items.itemMetaLookup[key];
-        if (item.parentId === parentId) {
-          return acc;
-        }
-        return (0, _extends2.default)({}, acc, {
-          [item.id]: item
-        });
-      }, {});
-      const newItemOrderedChildrenIdsLookup = (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup);
-      const newItemChildrenIndexesLookup = (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup);
-      delete newItemChildrenIndexesLookup[parentId];
-      delete newItemOrderedChildrenIdsLookup[parentId];
-      store.set('items', (0, _extends2.default)({}, store.state.items, {
-        itemMetaLookup: newMetaMap,
-        itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
-        itemChildrenIndexesLookup: newItemChildrenIndexesLookup
-      }));
+  const removeChildren = (0, _useEventCallback.useEventCallback)(parentId => {
+    const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
+      const item = store.state.items.itemMetaLookup[key];
+      if (item.parentId === parentId) {
+        return acc;
+      }
+      return (0, _extends2.default)({}, acc, {
+        [item.id]: item
+      });
+    }, {});
+    const newItemOrderedChildrenIdsLookup = (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup);
+    const newItemChildrenIndexesLookup = (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup);
+    const cleanId = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+    delete newItemChildrenIndexesLookup[cleanId];
+    delete newItemOrderedChildrenIdsLookup[cleanId];
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemMetaLookup: newMetaMap,
+      itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+      itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+    }));
+  });
+  const addExpandableItems = (0, _useEventCallback.useEventCallback)(items => {
+    const newItemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
+    for (const itemId of items) {
+      newItemMetaLookup[itemId] = (0, _extends2.default)({}, newItemMetaLookup[itemId], {
+        expandable: true
+      });
     }
-  };
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemMetaLookup: newItemMetaLookup
+    }));
+  });
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    const newState = processItemsLookups({
+    const newState = (0, _useTreeViewItems.buildItemsState)({
       disabledItemsFocusable: params.disabledItemsFocusable,
       items: params.items,
-      isItemDisabled: params.isItemDisabled,
-      getItemId: params.getItemId,
-      getItemLabel: params.getItemLabel,
-      getItemChildren: params.getItemChildren
+      config: itemsConfig
     });
     store.set('items', (0, _extends2.default)({}, store.state.items, newState));
-  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
+  }, [instance, store, params.items, params.disabledItemsFocusable, itemsConfig]);
 
   // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
-  const handleItemClick = (0, _useEventCallback.default)((event, itemId) => {
+  const handleItemClick = (0, _useEventCallback.useEventCallback)((event, itemId) => {
     if (params.onItemClick) {
       params.onItemClick(event, itemId);
     }
@@ -255,27 +179,24 @@ const useTreeViewItems = ({
       getItemDOMElement,
       preventItemUpdates,
       areItemUpdatesPrevented,
-      addItems,
-      setTreeViewLoading,
-      setTreeViewError,
+      setItemChildren,
       removeChildren,
+      addExpandableItems,
       handleItemClick
     }
   };
 };
 exports.useTreeViewItems = useTreeViewItems;
 useTreeViewItems.getInitialState = params => ({
-  items: (0, _extends2.default)({}, processItemsLookups({
-    disabledItemsFocusable: params.disabledItemsFocusable,
+  items: (0, _useTreeViewItems.buildItemsState)({
     items: params.items,
-    isItemDisabled: params.isItemDisabled,
-    getItemId: params.getItemId,
-    getItemLabel: params.getItemLabel,
-    getItemChildren: params.getItemChildren
-  }), {
-    loading: false,
-    error: null,
-    domStructure: 'nested'
+    disabledItemsFocusable: params.disabledItemsFocusable,
+    config: {
+      isItemDisabled: params.isItemDisabled,
+      getItemId: params.getItemId,
+      getItemLabel: params.getItemLabel,
+      getItemChildren: params.getItemChildren
+    }
   })
 });
 useTreeViewItems.applyDefaultValuesToParams = ({

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

@@ -1,14 +1,6 @@
 import { TreeViewItemMeta, TreeViewState } from "../../models/index.js";
 import { UseTreeViewItemsSignature } from "./useTreeViewItems.types.js";
 export declare const itemsSelectors: {
-  /**
-   * Gets the loading state for the Tree View.
-   */
-  isLoading: (state: TreeViewState<[UseTreeViewItemsSignature]>) => boolean;
-  /**
-   * Gets the error state for the Tree View.
-   */
-  error: (state: TreeViewState<[UseTreeViewItemsSignature]>) => Error | null;
   /**
    * Gets the DOM structure of the Tree View.
    */

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -8,14 +8,6 @@ var _store = require("@mui/x-internals/store");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 const EMPTY_CHILDREN = [];
 const itemsSelectors = exports.itemsSelectors = {
-  /**
-   * Gets the loading state for the Tree View.
-   */
-  isLoading: (0, _store.createSelector)(state => state.items.loading),
-  /**
-   * Gets the error state for the Tree View.
-   */
-  error: (0, _store.createSelector)(state => state.items.error),
   /**
    * Gets the DOM structure of the Tree View.
    */

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

@@ -2,11 +2,10 @@ 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> = {
+export type SetItemChildrenParameters<R> = {
   items: readonly R[];
-  parentId?: TreeViewItemId;
-  depth: number;
-  getChildrenCount?: (item: R) => number;
+  parentId: TreeViewItemId | null;
+  getChildrenCount: (item: R) => number;
 };
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
   /**
@@ -65,30 +64,25 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
   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.
+   * @param {SetItemChildrenParameters<R>} args The items to add to the tree and information about their ancestors.
    */
-  addItems: (args: AddItemsParameters<R>) => void;
+  setItemChildren: (args: SetItemChildrenParameters<R>) => void;
   /**
    * Remove the children of an item.
-   * @param {TreeViewItemId} parentId The id of the item to remove the children of.
+   * @param {TreeViewItemId | null} 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;
+  removeChildren: (parentId: TreeViewItemId | null) => void;
   /**
    * Event handler to fire when the `content` slot of a given Tree Item is clicked.
    * @param {React.MouseEvent} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item being clicked.
    */
   handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
+  /**
+   * Mark a list of items as expandable.
+   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
+   */
+  addExpandableItems: (items: TreeViewItemId[]) => void;
 }
 export interface UseTreeViewItemsParameters<R extends {
   children?: R[];
@@ -186,14 +180,6 @@ export interface UseTreeViewItemsState<R extends {}> {
         [itemId: string]: number;
       };
     };
-    /**
-     * The loading state of the tree.
-     */
-    loading: boolean;
-    /**
-     * The error state of the tree.
-     */
-    error: Error | null;
     /**
      * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
      * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).

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

@@ -1,5 +1,6 @@
-import { TreeViewItemId } from "../../../models/index.js";
+import { TreeViewBaseItem, TreeViewItemId } from "../../../models/index.js";
 import { TreeViewItemMeta } from "../../models/index.js";
+import { UseTreeViewItemsParametersWithDefaults, UseTreeViewItemsState } from "./useTreeViewItems.types.js";
 export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
 export declare const buildSiblingIndexes: (siblings: string[]) => {
   [itemId: string]: number;
@@ -12,4 +13,37 @@ export declare const buildSiblingIndexes: (siblings: string[]) => {
  */
 export declare const isItemDisabled: (itemMetaLookup: {
   [itemId: string]: TreeViewItemMeta;
-}, itemId: TreeViewItemId) => boolean;
+}, itemId: TreeViewItemId) => boolean;
+type State = UseTreeViewItemsState<any>['items'];
+export declare function buildItemsState(parameters: BuildItemsStateParameters): State;
+interface BuildItemsStateParameters extends Pick<BuildItemsLookupsParameters, 'items' | 'config'> {
+  disabledItemsFocusable: boolean;
+}
+export declare function buildItemsLookups(parameters: BuildItemsLookupsParameters): {
+  metaLookup: {
+    [itemId: string]: TreeViewItemMeta;
+  };
+  modelLookup: {
+    [itemId: string]: any;
+  };
+  orderedChildrenIds: string[];
+  childrenIndexes: {
+    [itemId: string]: number;
+  };
+  itemsChildren: {
+    id: string | null;
+    children: TreeViewBaseItem[];
+  }[];
+};
+interface BuildItemsLookupsParameters {
+  items: readonly TreeViewBaseItem[];
+  config: BuildItemsLookupConfig;
+  parentId: string | null;
+  depth: number;
+  isItemExpandable: (item: TreeViewBaseItem, children: TreeViewBaseItem[] | undefined) => boolean;
+  otherItemsMetaLookup: {
+    [itemId: string]: TreeViewItemMeta;
+  };
+}
+export interface BuildItemsLookupConfig extends Pick<UseTreeViewItemsParametersWithDefaults<TreeViewBaseItem>, 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
+export {};

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

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isItemDisabled = exports.buildSiblingIndexes = exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
+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 => {
   const siblingsIndexLookup = {};
@@ -44,4 +47,118 @@ const isItemDisabled = (itemMetaLookup, itemId) => {
   }
   return false;
 };
-exports.isItemDisabled = isItemDisabled;
+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,
+    items,
+    parentId,
+    depth,
+    isItemExpandable,
+    otherItemsMetaLookup
+  } = parameters;
+  const metaLookup = {};
+  const modelLookup = {};
+  const orderedChildrenIds = [];
+  const itemsChildren = [];
+  const processItem = item => {
+    const id = config.getItemId ? config.getItemId(item) : item.id;
+    checkId({
+      id,
+      parentId,
+      item,
+      itemMetaLookup: otherItemsMetaLookup,
+      siblingsMetaLookup: metaLookup
+    });
+    const label = config.getItemLabel ? config.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) || [];
+    itemsChildren.push({
+      id,
+      children
+    });
+    modelLookup[id] = item;
+    metaLookup[id] = {
+      id,
+      label,
+      parentId,
+      idAttribute: undefined,
+      expandable: isItemExpandable(item, children),
+      disabled: config.isItemDisabled ? config.isItemDisabled(item) : false,
+      depth
+    };
+    orderedChildrenIds.push(id);
+  };
+  for (const item of items) {
+    processItem(item);
+  }
+  return {
+    metaLookup,
+    modelLookup,
+    orderedChildrenIds,
+    childrenIndexes: buildSiblingIndexes(orderedChildrenIds),
+    itemsChildren
+  };
+}
+function checkId({
+  id,
+  parentId,
+  item,
+  itemMetaLookup,
+  siblingsMetaLookup
+}) {
+  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 (siblingsMetaLookup[id] != null ||
+  // Ignore items with the same parent id, because it's the same item from the previous generation.
+  itemMetaLookup[id] != null && itemMetaLookup[id].parentId !== parentId) {
+    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'));
+  }
+}

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -10,9 +10,9 @@ exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
@@ -26,7 +26,7 @@ const useTreeViewJSXItems = ({
   store
 }) => {
   instance.preventItemUpdates();
-  const insertJSXItem = (0, _useEventCallback.default)(item => {
+  const insertJSXItem = (0, _useEventCallback.useEventCallback)(item => {
     if (store.state.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'));
     }
@@ -64,7 +64,7 @@ const useTreeViewJSXItems = ({
       })
     }));
   };
-  const mapFirstCharFromJSX = (0, _useEventCallback.default)((itemId, firstChar) => {
+  const mapFirstCharFromJSX = (0, _useEventCallback.useEventCallback)((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
       firstCharMap[itemId] = firstChar;
       return firstCharMap;
@@ -113,11 +113,11 @@ const useTreeViewJSXItemsItemPlugin = ({
   } = parentContext;
   const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
   const pluginContentRef = React.useRef(null);
-  const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
+  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
   const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
 
   // Prevent any flashing
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
       itemId,
       treeId,
@@ -129,7 +129,7 @@ const useTreeViewJSXItemsItemPlugin = ({
       unregisterChild(idAttribute);
     };
   }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,7 +9,7 @@ exports.useTreeViewKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
 var _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
 var _useTreeViewLabel = require("../useTreeViewLabel");
@@ -28,7 +27,7 @@ const useTreeViewKeyboardNavigation = ({
 }) => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const firstCharMap = React.useRef({});
-  const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
+  const updateFirstCharMap = (0, _useEventCallback.useEventCallback)(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
   const itemMetaLookup = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup);