@mui/x-tree-view 8.11.3 → 8.13.0

package/esm/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -28,16 +28,16 @@ export interface TreeViewSlots {
   /**
    * The default icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The default icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The default icon displayed next to an end item.
    * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
 }
 export interface TreeViewSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

package/esm/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/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { expansionSelectors } from "./useTreeViewExpansion.selectors.js";
 import { getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
@@ -17,7 +17,7 @@ export const useTreeViewExpansion = ({
     controlled: params.expandedItems,
     defaultValue: params.defaultExpandedItems
   });
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const newExpansionTrigger = getExpansionTrigger({
       isItemEditable: params.isItemEditable,
       expansionTrigger: params.expansionTrigger
@@ -84,7 +84,7 @@ export const useTreeViewExpansion = ({
     });
   });
   const isItemExpanded = useEventCallback(itemId => {
-    return expansionSelectors.isItemExpandable(store.state, itemId);
+    return expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
@@ -107,7 +107,7 @@ export const useTreeViewExpansion = ({
   /**
    * Update the controlled model when the `expandedItems` prop changes.
    */
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
       store.set('expansion', _extends({}, store.state.expansion, {

package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { focusSelectors } from "./useTreeViewFocus.selectors.js";
 import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";

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

@@ -9,10 +9,10 @@ export interface UseTreeViewFocusPublicAPI {
    *
    * If the item is the child of a collapsed item, then this method will do nothing.
    * Make sure to expand the ancestors of the item before calling this method if needed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item to focus.
    */
-  focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+  focusItem: (event: React.SyntheticEvent | null, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
   /**

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

@@ -2,100 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { buildItemsLookups, buildItemsState, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { itemsSelectors } from "./useTreeViewItems.selectors.js";
 import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "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 = {
-    [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 ?? 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] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
-  });
-  return {
-    disabledItemsFocusable,
-    itemMetaLookup,
-    itemModelLookup,
-    itemOrderedChildrenIdsLookup,
-    itemChildrenIndexesLookup
-  };
-};
 export 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 => itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
     const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
-  const setTreeViewLoading = useEventCallback(isLoading => {
-    store.set('items', _extends({}, store.state.items, {
-      loading: isLoading
-    }));
-  });
-  const setTreeViewError = useEventCallback(error => {
-    store.set('items', _extends({}, store.state.items, {
-      error
-    }));
-  });
   const setIsItemDisabled = useEventCallback(({
     itemId,
     shouldBeDisabled
@@ -143,86 +72,81 @@ export 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: _extends({}, store.state.items.itemModelLookup, newState.itemModelLookup),
-          itemMetaLookup: _extends({}, store.state.items.itemMetaLookup, newState.itemMetaLookup),
-          itemOrderedChildrenIdsLookup: _extends({}, newState.itemOrderedChildrenIdsLookup, store.state.items.itemOrderedChildrenIdsLookup),
-          itemChildrenIndexesLookup: _extends({}, newState.itemChildrenIndexesLookup, store.state.items.itemChildrenIndexesLookup)
-        };
-      } else {
-        newItems = {
-          itemModelLookup: newState.itemModelLookup,
-          itemMetaLookup: newState.itemMetaLookup,
-          itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
-          itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
-        };
-      }
-      store.set('items', _extends({}, store.state.items, newItems));
-    }
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    const parentDepth = parentId == null ? -1 : itemsSelectors.itemDepth(store.state, parentId);
+    const {
+      metaLookup,
+      modelLookup,
+      orderedChildrenIds,
+      childrenIndexes
+    } = buildItemsLookups({
+      config: itemsConfig,
+      items,
+      parentId,
+      depth: parentDepth + 1,
+      isItemExpandable: getChildrenCount ? item => getChildrenCount(item) > 0 : () => false,
+      otherItemsMetaLookup: itemsSelectors.itemMetaLookup(store.state)
+    });
+    const lookups = {
+      itemModelLookup: _extends({}, store.state.items.itemModelLookup, modelLookup),
+      itemMetaLookup: _extends({}, store.state.items.itemMetaLookup, metaLookup),
+      itemOrderedChildrenIdsLookup: _extends({}, store.state.items.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: _extends({}, store.state.items.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: childrenIndexes
+      })
+    };
+    store.set('items', _extends({}, store.state.items, lookups));
   };
-  const removeChildren = parentId => {
-    if (parentId == null) {
-      store.set('items', _extends({}, 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 _extends({}, acc, {
-          [item.id]: item
-        });
-      }, {});
-      const newItemOrderedChildrenIdsLookup = _extends({}, store.state.items.itemOrderedChildrenIdsLookup);
-      const newItemChildrenIndexesLookup = _extends({}, store.state.items.itemChildrenIndexesLookup);
-      delete newItemChildrenIndexesLookup[parentId];
-      delete newItemOrderedChildrenIdsLookup[parentId];
-      store.set('items', _extends({}, store.state.items, {
-        itemMetaLookup: newMetaMap,
-        itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
-        itemChildrenIndexesLookup: newItemChildrenIndexesLookup
-      }));
+  const removeChildren = 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 _extends({}, acc, {
+        [item.id]: item
+      });
+    }, {});
+    const newItemOrderedChildrenIdsLookup = _extends({}, store.state.items.itemOrderedChildrenIdsLookup);
+    const newItemChildrenIndexesLookup = _extends({}, store.state.items.itemChildrenIndexesLookup);
+    const cleanId = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    delete newItemChildrenIndexesLookup[cleanId];
+    delete newItemOrderedChildrenIdsLookup[cleanId];
+    store.set('items', _extends({}, store.state.items, {
+      itemMetaLookup: newMetaMap,
+      itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+      itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+    }));
+  });
+  const addExpandableItems = useEventCallback(items => {
+    const newItemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
+    for (const itemId of items) {
+      newItemMetaLookup[itemId] = _extends({}, newItemMetaLookup[itemId], {
+        expandable: true
+      });
     }
-  };
+    store.set('items', _extends({}, store.state.items, {
+      itemMetaLookup: newItemMetaLookup
+    }));
+  });
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    const newState = processItemsLookups({
+    const newState = buildItemsState({
       disabledItemsFocusable: params.disabledItemsFocusable,
       items: params.items,
-      isItemDisabled: params.isItemDisabled,
-      getItemId: params.getItemId,
-      getItemLabel: params.getItemLabel,
-      getItemChildren: params.getItemChildren
+      config: itemsConfig
     });
     store.set('items', _extends({}, 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 = useEventCallback((event, itemId) => {
@@ -248,26 +172,23 @@ export const useTreeViewItems = ({
       getItemDOMElement,
       preventItemUpdates,
       areItemUpdatesPrevented,
-      addItems,
-      setTreeViewLoading,
-      setTreeViewError,
+      setItemChildren,
       removeChildren,
+      addExpandableItems,
       handleItemClick
     }
   };
 };
 useTreeViewItems.getInitialState = params => ({
-  items: _extends({}, processItemsLookups({
-    disabledItemsFocusable: params.disabledItemsFocusable,
+  items: 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/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -2,14 +2,6 @@ import { createSelector } from '@mui/x-internals/store';
 import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 const EMPTY_CHILDREN = [];
 export const itemsSelectors = {
-  /**
-   * Gets the loading state for the Tree View.
-   */
-  isLoading: createSelector(state => state.items.loading),
-  /**
-   * Gets the error state for the Tree View.
-   */
-  error: createSelector(state => state.items.error),
   /**
    * Gets the DOM structure of the Tree View.
    */

package/esm/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/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -36,4 +36,118 @@ export const isItemDisabled = (itemMetaLookup, itemId) => {
     }
   }
   return false;
-};
+};
+export 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'
+  };
+}
+export 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'));
+  }
+}