@mui/x-tree-view 8.12.0 → 8.13.1

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js

@@ -1,4 +1,5 @@
 import { createSelector } from '@mui/x-internals/store';
+import { TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/index.js";
 export const lazyLoadingSelectors = {
   /**
    * Gets the data source used to lazy load items.
@@ -7,9 +8,13 @@ export const lazyLoadingSelectors = {
   /**
    * Checks whether an item is loading.
    */
-  isItemLoading: createSelector((state, itemId) => state.lazyLoading?.dataSource.loading[itemId] ?? false),
+  isItemLoading: createSelector((state, itemId) => state.lazyLoading?.dataSource.loading[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? false),
   /**
    * Checks whether an item has errors.
    */
-  itemHasError: createSelector((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId])
+  itemHasError: createSelector((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID]),
+  /**
+   * Get an item error.
+   */
+  itemError: createSelector((state, itemId) => state.lazyLoading?.dataSource.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID])
 };

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

@@ -5,7 +5,7 @@ import { TreeViewItemId } from "../../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
-type DataSource<R extends {}> = {
+export type DataSource<R extends {}> = {
   /**
    * Used to determine the number of children the item has.
    * Only relevant for lazy-loaded trees.
@@ -43,7 +43,7 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
    * @param {TreeViewItemId[]} parentIds The ids of the items to fetch the children of.
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
-  fetchItems: (parentIds?: TreeViewItemId[]) => Promise<void>;
+  fetchItems: (parentIds: TreeViewItemId[]) => Promise<void>;
   /**
    * Method used for fetching an item's children.
    * Only relevant for lazy-loaded tree views.
@@ -54,21 +54,21 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
   fetchItemChildren: (parameters: {
-    itemId: TreeViewItemId;
+    itemId: TreeViewItemId | null;
     forceRefresh?: boolean;
   }) => Promise<void>;
   /**
    * Set the loading state of an item.
-   * @param {TreeViewItemId} itemId The id of the item to set the loading state of.
+   * @param {TreeViewItemId} itemId The id of the item to set the loading state of. If `null` is passed, it will set the loading state of the root.
    * @param {boolean} isLoading True if the item is loading.
    */
-  setDataSourceLoading: (itemId: TreeViewItemId, isLoading: boolean) => void;
+  setDataSourceLoading: (itemId: TreeViewItemId | null, isLoading: boolean) => void;
   /**
    * Set the error state of an item.
-   * @param {TreeViewItemId} itemId The id of the item to set the error state of.
+   * @param {TreeViewItemId} itemId The id of the item to set the error state of. If `null` is passed, it will set the error state of the root.
    * @param {Error | null} error The error caught on the item.
    */
-  setDataSourceError: (itemId: TreeViewItemId, error: Error | null) => void;
+  setDataSourceError: (itemId: TreeViewItemId | null, error: Error | null) => void;
 }
 export interface UseTreeViewLazyLoadingParameters<R extends {}> {
   /**
@@ -97,5 +97,4 @@ export type UseTreeViewLazyLoadingSignature = TreeViewPluginSignature<{
   instance: UseTreeViewLazyLoadingInstance;
   state: UseTreeViewLazyLoadingState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewSelectionSignature];
-}>;
-export {};
+}>;

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -19,11 +19,20 @@ const selectorCheckboxSelectionStatus = createSelector((state, itemId) => {
     itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
-  if (hasSelectedDescendant && hasUnSelectedDescendant) {
+  const shouldSelectBasedOnDescendants = selectionSelectors.propagationRules(state).parents;
+  if (shouldSelectBasedOnDescendants) {
+    if (hasSelectedDescendant && hasUnSelectedDescendant) {
+      return 'indeterminate';
+    }
+    if (hasSelectedDescendant && !hasUnSelectedDescendant) {
+      return 'checked';
+    }
+    return 'empty';
+  }
+  if (hasSelectedDescendant) {
     return 'indeterminate';
   }
-  const shouldSelectBasedOnDescendants = selectionSelectors.propagationRules(state).parents;
-  return shouldSelectBasedOnDescendants && hasSelectedDescendant && !hasUnSelectedDescendant ? 'checked' : 'empty';
+  return 'empty';
 });
 export const useTreeViewSelectionItemPlugin = ({
   props

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
 import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
 import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
@@ -168,7 +168,7 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, newSelectedItems);
   };
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('selection', {
       selectedItems: params.selectedItems === undefined ? store.state.selection.selectedItems : params.selectedItems,
       isEnabled: !params.disableSelection,

package/esm/internals/useTreeView/useTreeView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
 import { Store } from '@mui/x-internals/store';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
 import { useExtractPluginParamsFromProps } from "./useExtractPluginParamsFromProps.js";
 import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
@@ -46,7 +46,7 @@ export const useTreeView = ({
   const instance = useRefWithInit(() => ({})).current;
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
-  const handleRootRef = useForkRef(innerRootRef, rootRef);
+  const handleRootRef = useMergedRefs(innerRootRef, rootRef);
   const store = useRefWithInit(() => {
     const initialState = {};
     for (const plugin of plugins) {

package/esm/useTreeItem/useTreeItem.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
@@ -50,8 +50,8 @@ export const useTreeItem = parameters => {
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
-  const handleContentRef = useForkRef(contentRef, contentRefObject);
+  const handleRootRef = useMergedRefs(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = useMergedRefs(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useStore(store, idSelectors.treeId);
   const isSelectionEnabledForItem = useStore(store, selectionSelectors.canItemBeSelected, itemId);

package/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useApplyPropagationToSelectedItemsOnMount = useApplyPropagationToSelectedItemsOnMount;
-var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils");
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;
@@ -59,7 +58,7 @@ function useApplyPropagationToSelectedItemsOnMount(parameters) {
     selectedItems,
     selectionPropagation
   } = parameters;
-  return (0, _useLazyRef.default)(() => {
+  return (0, _useRefWithInit.useRefWithInit)(() => {
     const lookup = (0, _useTreeViewSelection.getLookupFromArray)(selectedItems);
     function walk(items, isParentSelected) {
       for (const item of items) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.12.0
+ * @mui/x-tree-view v8.13.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -3,7 +3,7 @@ export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.j
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from "./models/index.js";
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore, TreeViewUsedInstance, TreeViewUsedParamsWithDefaults } from "./models/index.js";
 export type { TreeViewCorePluginParameters } from "./corePlugins/index.js";
 export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters } from "./plugins/useTreeViewExpansion/index.js";
@@ -17,7 +17,7 @@ export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_P
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from "./plugins/useTreeViewItems/index.js";
 export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./plugins/useTreeViewLabel/index.js";
-export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./plugins/useTreeViewLazyLoading/index.js";
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./plugins/useTreeViewLazyLoading/index.js";
 export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from "./plugins/useTreeViewJSXItems/index.js";

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
 var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
 var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
@@ -24,7 +24,7 @@ const useTreeViewExpansion = ({
     controlled: params.expandedItems,
     defaultValue: params.defaultExpandedItems
   });
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
       isItemEditable: params.isItemEditable,
       expansionTrigger: params.expansionTrigger
@@ -44,10 +44,10 @@ const useTreeViewExpansion = ({
     }
     params.onExpandedItemsChange?.(event, value);
   };
-  const resetItemExpansion = (0, _useEventCallback.default)(() => {
+  const resetItemExpansion = (0, _useEventCallback.useEventCallback)(() => {
     setExpandedItems(null, []);
   });
-  const applyItemExpansion = (0, _useEventCallback.default)(({
+  const applyItemExpansion = (0, _useEventCallback.useEventCallback)(({
     itemId,
     event,
     shouldBeExpanded
@@ -64,7 +64,7 @@ const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const setItemExpansion = (0, _useEventCallback.default)(({
+  const setItemExpansion = (0, _useEventCallback.useEventCallback)(({
     itemId,
     event = null,
     shouldBeExpanded
@@ -90,7 +90,7 @@ const useTreeViewExpansion = ({
       shouldBeExpanded: cleanShouldBeExpanded
     });
   });
-  const isItemExpanded = (0, _useEventCallback.default)(itemId => {
+  const isItemExpanded = (0, _useEventCallback.useEventCallback)(itemId => {
     return _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {
@@ -114,7 +114,7 @@ const useTreeViewExpansion = ({
   /**
    * Update the controlled model when the `expandedItems` prop changes.
    */
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
       store.set('expansion', (0, _extends2.default)({}, store.state.expansion, {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
 var _store = require("@mui/x-internals/store");
 var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
 var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
@@ -16,7 +16,7 @@ const useTreeViewFocus = ({
   params,
   store
 }) => {
-  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
+  const setFocusedItemId = (0, _useEventCallback.useEventCallback)(itemId => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId === itemId) {
       return;
@@ -39,13 +39,13 @@ const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = (0, _useEventCallback.default)((event, itemId) => {
+  const focusItem = (0, _useEventCallback.useEventCallback)((event, itemId) => {
     // If we receive an itemId, and it is visible, the focus will be set to it
     if (isItemVisible(itemId)) {
       innerFocusItem(event, itemId);
     }
   });
-  const removeFocusedItem = (0, _useEventCallback.default)(() => {
+  const removeFocusedItem = (0, _useEventCallback.useEventCallback)(() => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId == null) {
       return;

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.
    */