@mui/x-tree-view 8.0.0-alpha.13 → 8.0.0-alpha.14

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -7,26 +7,38 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 export interface UseTreeViewExpansionPublicAPI {
   /**
    * Change the expansion status of a given item.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand of collapse.
-   * @param {boolean} isExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
    */
-  setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  setItemExpansion: (parameters: {
+    itemId: string;
+    event?: React.SyntheticEvent;
+    shouldBeExpanded?: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
-  /**
-   * Toggle the current expansion of an item.
-   * If it is expanded, it will be collapsed, and vice versa.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {TreeViewItemId} itemId The id of the item to toggle.
-   */
-  toggleItemExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
    */
   expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
+  /**
+   * APply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion: (parameters: {
+    itemId: string;
+    event: React.SyntheticEvent | null;
+    shouldBeExpanded: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionParameters {
   /**
@@ -42,17 +54,17 @@ export interface UseTreeViewExpansionParameters {
   defaultExpandedItems?: string[];
   /**
    * Callback fired when Tree Items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
   /**
    * Callback fired when a Tree Item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
   /**
    * The slot that triggers the item's expansion when clicked.
    * @default 'content'
@@ -66,6 +78,16 @@ export interface UseTreeViewExpansionState {
     expansionTrigger: 'content' | 'iconContainer';
   };
 }
+interface UseTreeViewExpansionEventLookup {
+  beforeItemToggleExpansion: {
+    params: {
+      isExpansionPrevented: boolean;
+      shouldBeExpanded: boolean;
+      event: React.SyntheticEvent | null;
+      itemId: TreeViewItemId;
+    };
+  };
+}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   params: UseTreeViewExpansionParameters;
   defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
@@ -75,4 +97,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   state: UseTreeViewExpansionState;
   dependencies: [UseTreeViewItemsSignature];
   optionalDependencies: [UseTreeViewLabelSignature];
-}>;
+  events: UseTreeViewExpansionEventLookup;
+}>;
+export {};

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -8,12 +8,24 @@ import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, se
 import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const updateItemsState = ({
+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,
-  getItemId
+  getItemId,
+  initialDepth = 0,
+  initialParentId = null,
+  getChildrenCount,
+  ignoreChildren = false
 }) => {
   const itemMetaLookup = {};
   const itemModelLookup = {};
@@ -22,12 +34,7 @@ const updateItemsState = ({
   };
   const processItem = (item, depth, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
-    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'));
-    }
+    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'));
@@ -37,7 +44,7 @@ const updateItemsState = ({
       label,
       parentId,
       idAttribute: undefined,
-      expandable: !!item.children?.length,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
@@ -47,9 +54,13 @@ const updateItemsState = ({
       itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
     itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
-    item.children?.forEach(child => processItem(child, depth + 1, id));
+
+    // if lazy loading is enabled, we don't want to process children passed through the `items` prop
+    if (!ignoreChildren) {
+      item.children?.forEach(child => processItem(child, depth + 1, id));
+    }
   };
-  items.forEach(item => processItem(item, 0, null));
+  items?.forEach(item => processItem(item, initialDepth, initialParentId));
   const itemChildrenIndexesLookup = {};
   Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
     itemChildrenIndexesLookup[parentId] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
@@ -68,6 +79,43 @@ export const useTreeViewItems = ({
   store
 }) => {
   const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [store]);
+  const getParentId = React.useCallback(itemId => {
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    return itemMeta?.parentId || null;
+  }, [store]);
+  const setTreeViewLoading = useEventCallback(isLoading => {
+    store.update(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        loading: isLoading
+      })
+    }));
+  });
+  const setTreeViewError = useEventCallback(error => {
+    store.update(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        error
+      })
+    }));
+  });
+  const setIsItemDisabled = useEventCallback(({
+    itemId,
+    shouldBeDisabled
+  }) => {
+    store.update(prevState => {
+      if (!prevState.items.itemMetaLookup[itemId]) {
+        return prevState;
+      }
+      const itemMetaLookup = _extends({}, prevState.items.itemMetaLookup);
+      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
+        disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
+      });
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, {
+          itemMetaLookup
+        })
+      });
+    });
+  });
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
       const item = selectorItemModel(store.value, itemId);
@@ -99,12 +147,96 @@ export const useTreeViewItems = ({
     areItemUpdatesPreventedRef.current = true;
   }, []);
   const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
+  const addItems = ({
+    items,
+    parentId,
+    depth,
+    getChildrenCount
+  }) => {
+    if (items) {
+      const newState = processItemsLookups({
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        items,
+        isItemDisabled: params.isItemDisabled,
+        getItemId: params.getItemId,
+        getItemLabel: params.getItemLabel,
+        getChildrenCount,
+        initialDepth: depth,
+        initialParentId: parentId,
+        ignoreChildren: true
+      });
+      store.update(prevState => {
+        let newItems;
+        if (parentId) {
+          newItems = {
+            itemModelLookup: _extends({}, prevState.items.itemModelLookup, newState.itemModelLookup),
+            itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, newState.itemMetaLookup),
+            itemOrderedChildrenIdsLookup: _extends({}, newState.itemOrderedChildrenIdsLookup, prevState.items.itemOrderedChildrenIdsLookup),
+            itemChildrenIndexesLookup: _extends({}, newState.itemChildrenIndexesLookup, prevState.items.itemChildrenIndexesLookup)
+          };
+        } else {
+          newItems = {
+            itemModelLookup: newState.itemModelLookup,
+            itemMetaLookup: newState.itemMetaLookup,
+            itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
+            itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
+          };
+        }
+        Object.values(prevState.items.itemMetaLookup).forEach(item => {
+          if (!newState.itemMetaLookup[item.id]) {
+            publishTreeViewEvent(instance, 'removeItem', {
+              id: item.id
+            });
+          }
+        });
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, newItems)
+        });
+      });
+    }
+  };
+  const removeChildren = parentId => {
+    store.update(prevState => {
+      if (!parentId) {
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, {
+            itemMetaLookup: {},
+            itemOrderedChildrenIdsLookup: {},
+            itemChildrenIndexesLookup: {}
+          })
+        });
+      }
+      const newMetaMap = Object.keys(prevState.items.itemMetaLookup).reduce((acc, key) => {
+        const item = prevState.items.itemMetaLookup[key];
+        if (item.parentId === parentId) {
+          publishTreeViewEvent(instance, 'removeItem', {
+            id: item.id
+          });
+          return acc;
+        }
+        return _extends({}, acc, {
+          [item.id]: item
+        });
+      }, {});
+      const newItemOrderedChildrenIdsLookup = prevState.items.itemOrderedChildrenIdsLookup;
+      const newItemChildrenIndexesLookup = prevState.items.itemChildrenIndexesLookup;
+      delete newItemChildrenIndexesLookup[parentId];
+      delete newItemOrderedChildrenIdsLookup[parentId];
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, {
+          itemMetaLookup: newMetaMap,
+          itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+          itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+        })
+      });
+    });
+  };
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
     store.update(prevState => {
-      const newState = updateItemsState({
+      const newState = processItemsLookups({
         disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
@@ -119,7 +251,7 @@ export const useTreeViewItems = ({
         }
       });
       return _extends({}, prevState, {
-        items: newState
+        items: _extends({}, prevState.items, newState)
       });
     });
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
@@ -145,23 +277,32 @@ export const useTreeViewItems = ({
       getItem,
       getItemDOMElement,
       getItemTree,
-      getItemOrderedChildrenIds
+      getItemOrderedChildrenIds,
+      setIsItemDisabled,
+      getParentId
     },
     instance: {
       getItemDOMElement,
       preventItemUpdates,
-      areItemUpdatesPrevented
+      areItemUpdatesPrevented,
+      addItems,
+      setTreeViewLoading,
+      setTreeViewError,
+      removeChildren
     },
     contextValue: pluginContextValue
   };
 };
 useTreeViewItems.getInitialState = params => ({
-  items: updateItemsState({
+  items: _extends({}, processItemsLookups({
     disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
     getItemLabel: params.getItemLabel
+  }), {
+    loading: false,
+    error: null
   })
 });
 useTreeViewItems.getDefaultizedParams = ({

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

@@ -1,6 +1,134 @@
 import { TreeViewItemMeta } from "../../models/index.js";
 import { TreeViewRootSelector } from "../../utils/selectors.js";
 import { UseTreeViewItemsSignature } from "./useTreeViewItems.types.js";
+/**
+ * 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 declare const selectorIsTreeViewLoading: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItems.types").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewItemsSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * 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 declare const selectorGetTreeViewError: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItems.types").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => Error | null) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => Error | null;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => Error | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => Error | null;
+  dependencies: [TreeViewRootSelector<UseTreeViewItemsSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
 /**
  * Get the meta-information of all items.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
@@ -31,6 +159,8 @@ export declare const selectorItemMetaLookup: ((state: import("../../corePlugins/
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }) => {
     [itemId: string]: TreeViewItemMeta;
   };
@@ -50,6 +180,8 @@ export declare const selectorItemMetaLookup: ((state: import("../../corePlugins/
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }) => {
     [itemId: string]: TreeViewItemMeta;
   }) & {
@@ -96,6 +228,8 @@ export declare const selectorItemOrderedChildrenIds: ((state: any, itemId: strin
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string | null) => string[];
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -113,6 +247,8 @@ export declare const selectorItemOrderedChildrenIds: ((state: any, itemId: strin
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string | null) => string[]) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -155,6 +291,8 @@ export declare const selectorItemModel: ((state: any, itemId: string) => import(
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -172,6 +310,8 @@ export declare const selectorItemModel: ((state: any, itemId: string) => import(
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -235,6 +375,8 @@ export declare const selectorItemMeta: ((state: any, itemId: string | null) => T
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     };
@@ -254,6 +396,8 @@ export declare const selectorItemMeta: ((state: any, itemId: string | null) => T
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     }) & {
@@ -328,6 +472,8 @@ export declare const selectorIsItemDisabled: ((state: any, itemId: string) => bo
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     };
@@ -347,6 +493,8 @@ export declare const selectorIsItemDisabled: ((state: any, itemId: string) => bo
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     }) & {
@@ -401,6 +549,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: TreeViewItemMeta | null) => number;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -418,6 +568,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: TreeViewItemMeta | null) => number) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -465,6 +617,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -484,6 +638,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -578,6 +734,8 @@ export declare const selectorItemParentId: ((state: any, itemId: string | null)
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -597,6 +755,8 @@ export declare const selectorItemParentId: ((state: any, itemId: string | null)
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -691,6 +851,8 @@ export declare const selectorItemDepth: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -710,6 +872,8 @@ export declare const selectorItemDepth: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -766,6 +930,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: boolean) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -783,6 +949,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: boolean) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -830,6 +998,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -849,6 +1019,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {

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

@@ -2,6 +2,19 @@ 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.