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

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

@@ -2,6 +2,12 @@ import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
 import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
+export type AddItemsParameters<R> = {
+  items: readonly R[];
+  parentId?: TreeViewItemId;
+  depth: number;
+  getChildrenCount?: (item: R) => number;
+};
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
   /**
    * Get the item with the given id.
@@ -29,6 +35,21 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
    * @returns {TreeViewBaseItem[]} The items in the tree.
    */
   getItemTree: () => TreeViewBaseItem[];
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  setIsItemDisabled: (parameters: {
+    itemId: TreeViewItemId;
+    shouldBeDisabled?: boolean;
+  }) => void;
+  /** * Get the id of the parent item.
+   * @param {string} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
 }
 export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
   /**
@@ -42,6 +63,26 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
    * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
    */
   areItemUpdatesPrevented: () => boolean;
+  /**
+   * Add an array of items to the tree.
+   * @param {AddItemsParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  addItems: (args: AddItemsParameters<R>) => void;
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId} parentId The id of the item to remove the children of.
+   */
+  removeChildren: (parentId?: TreeViewItemId) => void;
+  /**
+   * Set the loading state of the tree.
+   * @param {boolean} loading True if the tree view is loading.
+   */
+  setTreeViewLoading: (loading: boolean) => void;
+  /**
+   * Set the error state of the tree.
+   * @param {Error | null} error The error on the tree view.
+   */
+  setTreeViewError: (error: Error | null) => void;
 }
 export interface UseTreeViewItemsParameters<R extends {
   children?: R[];
@@ -137,6 +178,14 @@ 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;
   };
 }
 interface UseTreeViewItemsContextValue {

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,7 +9,7 @@ import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../..
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { isItemExpandable } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
+import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
 import { useSelector } from "../../hooks/useSelector.js";
 import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -115,7 +115,7 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const expandable = isItemExpandable(children);
+  const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
   const treeId = useSelector(store, selectorTreeViewId);

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -64,7 +64,7 @@ export const useTreeViewKeyboardNavigation = ({
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
-  const handleItemKeyDown = (event, itemId) => {
+  const handleItemKeyDown = async (event, itemId) => {
     if (event.defaultMuiPrevented) {
       return;
     }
@@ -83,7 +83,7 @@ export const useTreeViewKeyboardNavigation = ({
           if (params.multiSelect && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
           } else {
-            instance.selectItem({
+            instance.setItemSelection({
               event,
               itemId,
               keepExistingSelection: params.multiSelect,
@@ -103,18 +103,21 @@ export const useTreeViewKeyboardNavigation = ({
           }) && !selectorIsItemBeingEdited(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId,
                 keepExistingSelection: true
               });
             } else if (!selectorIsItemSelected(store.value, itemId)) {
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId
               });
@@ -172,7 +175,10 @@ export const useTreeViewKeyboardNavigation = ({
               event.preventDefault();
             }
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           }
           break;
@@ -186,7 +192,10 @@ export const useTreeViewKeyboardNavigation = ({
             return;
           }
           if (canToggleItemExpansion(itemId) && selectorIsItemExpanded(store.value, itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else {
             const parent = selectorItemParentId(store.value, itemId);

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

@@ -6,6 +6,7 @@ import { UseTreeViewFocusSignature } from "../useTreeViewFocus/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
 import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
 import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
+import { UseTreeViewLazyLoadingSignature } from "../useTreeViewLazyLoading/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
    * Updates the `firstCharMap` to add/remove the first character of some item's labels.
@@ -25,7 +26,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   instance: UseTreeViewKeyboardNavigationInstance;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
-  optionalDependencies: [UseTreeViewLabelSignature];
+  optionalDependencies: [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
 }>;
 export type TreeViewFirstCharMap = {
   [itemId: string]: string;

package/modern/internals/plugins/useTreeViewLazyLoading/index.d.ts

@@ -0,0 +1 @@
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters } from './useTreeViewLazyLoading.types';

package/modern/internals/plugins/useTreeViewLazyLoading/index.js

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

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

@@ -0,0 +1,249 @@
+import { TreeViewAnyPluginSignature, TreeViewState } from "../../models/index.js";
+import { TreeViewRootSelector, TreeViewRootSelectorForOptionalPlugin } from "../../utils/selectors.js";
+import { UseTreeViewLazyLoadingSignature } from "./useTreeViewLazyLoading.types.js";
+export type Temp<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [], TOptionalSignatures extends [TSignature]>(state: TreeViewState<TSignatures, TOptionalSignatures>) => TSignature['state'][keyof TSignature['state']];
+export declare const selectorDataSourceState: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewLazyLoading.types").UseTreeViewLazyLoadingState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => {
+  loading: Record<import("../../..").TreeViewItemId, boolean>;
+  errors: Record<import("../../..").TreeViewItemId, Error | null>;
+}) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    enabled: boolean;
+    dataSource: {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+  }) => {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  };
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    enabled: boolean;
+    dataSource: {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+  }) => {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  };
+  dependencies: [TreeViewRootSelector<UseTreeViewLazyLoadingSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if lazy loading is enabled.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @returns {boolean} True if lazy loading is enabled, false if it isn't.
+ */
+export declare const selectorIsLazyLoadingEnabled: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & Partial<import("./useTreeViewLazyLoading.types").UseTreeViewLazyLoadingState> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    enabled: boolean;
+    dataSource: {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+  } | undefined) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    enabled: boolean;
+    dataSource: {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+  } | undefined) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelectorForOptionalPlugin<UseTreeViewLazyLoadingSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the loading state for a tree item.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the loading state of.
+ * @returns {boolean} The loading state for the Tree Item.
+ */
+export declare const selectorIsItemLoading: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }, resultFuncArgs_1: string) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }, resultFuncArgs_1: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewLazyLoading.types").UseTreeViewLazyLoadingState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+  }) => {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      enabled: boolean;
+      dataSource: {
+        loading: Record<import("../../..").TreeViewItemId, boolean>;
+        errors: Record<import("../../..").TreeViewItemId, Error | null>;
+      };
+    }) => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      enabled: boolean;
+      dataSource: {
+        loading: Record<import("../../..").TreeViewItemId, boolean>;
+        errors: Record<import("../../..").TreeViewItemId, Error | null>;
+      };
+    }) => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    }) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+    dependencies: [TreeViewRootSelector<UseTreeViewLazyLoadingSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }, (_: any, itemId: string) => string];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the error for a tree item.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the error for.
+ * @returns {boolean} The error for the Tree Item.
+ */
+export declare const selectorGetTreeItemError: ((state: any, itemId: string) => Error | null) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }, resultFuncArgs_1: string) => Error | null;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }, resultFuncArgs_1: string) => Error | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => Error | null;
+  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewLazyLoading.types").UseTreeViewLazyLoadingState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+  }) => {
+    loading: Record<import("../../..").TreeViewItemId, boolean>;
+    errors: Record<import("../../..").TreeViewItemId, Error | null>;
+  }) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      enabled: boolean;
+      dataSource: {
+        loading: Record<import("../../..").TreeViewItemId, boolean>;
+        errors: Record<import("../../..").TreeViewItemId, Error | null>;
+      };
+    }) => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      enabled: boolean;
+      dataSource: {
+        loading: Record<import("../../..").TreeViewItemId, boolean>;
+        errors: Record<import("../../..").TreeViewItemId, Error | null>;
+      };
+    }) => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    }) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => {
+      loading: Record<import("../../..").TreeViewItemId, boolean>;
+      errors: Record<import("../../..").TreeViewItemId, Error | null>;
+    };
+    dependencies: [TreeViewRootSelector<UseTreeViewLazyLoadingSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }, (_: any, itemId: string) => string];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};

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

@@ -0,0 +1,27 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorLazyLoading = state => state.lazyLoading;
+const selectorLazyLoadingOptional = state => state.lazyLoading;
+export const selectorDataSourceState = createSelector([selectorLazyLoading], lazyLoading => lazyLoading.dataSource);
+
+/**
+ * Check if lazy loading is enabled.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @returns {boolean} True if lazy loading is enabled, false if it isn't.
+ */
+export const selectorIsLazyLoadingEnabled = createSelector([selectorLazyLoadingOptional], lazyLoading => !!lazyLoading?.enabled);
+
+/**
+ * Get the loading state for a tree item.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the loading state of.
+ * @returns {boolean} The loading state for the Tree Item.
+ */
+export const selectorIsItemLoading = createSelector([selectorDataSourceState, (_, itemId) => itemId], (dataSourceState, itemId) => dataSourceState.loading[itemId] || false);
+
+/**
+ * Get the error for a tree item.
+ * @param {TreeViewState<[UseTreeViewLazyLoadingSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the error for.
+ * @returns {boolean} The error for the Tree Item.
+ */
+export const selectorGetTreeItemError = createSelector([selectorDataSourceState, (_, itemId) => itemId], (dataSourceState, itemId) => dataSourceState.errors[itemId] || null);

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

@@ -0,0 +1,83 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { DataSourceCache } from "../../../utils/index.js";
+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 {}> = {
+  /**
+   * Used to determine the number of children the item has.
+   * Only relevant for lazy-loaded trees.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {number} The number of children.
+   * @default (item) => number
+   */
+  getChildrenCount?: (item: R) => number;
+  /**
+   * Method used for fetching the items.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @template R
+   * @param {TreeViewItemId} parentId The id of the item the children belong to.
+   * @returns { Promise<R[]>} The children of the item.
+   */
+  getTreeItems?: (parentId?: TreeViewItemId) => Promise<R[]>;
+};
+export interface UseTreeViewLazyLoadingPublicAPI {}
+export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {
+  /**
+   * Method used for fetching multiple items concurrently.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @param {TreeViewItemId[]} parentIds The ids of the items to fetch the children of.
+   * @returns { Promise<void>} The children of the items.
+   */
+  fetchItems: (parentIds?: TreeViewItemId[]) => Promise<void>;
+  /**
+   * Method used for fetching and item's children.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @param {TreeViewItemId} itemId The The id of the item to fetch the children of.
+   * @returns { Promise<void>} The children of the item.
+   */
+  fetchItemChildren: (itemId: TreeViewItemId) => Promise<void>;
+  /**
+   * Set the loading state of an item.
+   * @param {TreeViewItemId} itemId The id of the item to set the loading state of.
+   * @param {boolean} isLoading True if the item is loading.
+   */
+  setDataSourceLoading: (itemId: TreeViewItemId, 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 {Error | null} error The error caught on the item.
+   */
+  setDataSourceError: (itemId: TreeViewItemId, error: Error | null) => void;
+}
+export interface UseTreeViewLazyLoadingParameters<R extends {}> {
+  dataSource?: DataSource<R>;
+  dataSourceCache?: DataSourceCache;
+}
+export type UseTreeViewLazyLoadingDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLazyLoadingParameters<R>, 'dataSource'>;
+export interface UseTreeViewLazyLoadingState {
+  lazyLoading: {
+    enabled: boolean;
+    dataSource: {
+      loading: Record<TreeViewItemId, boolean>;
+      errors: Record<TreeViewItemId, Error | null>;
+    };
+  };
+}
+export type UseTreeViewLazyLoadingSignature = TreeViewPluginSignature<{
+  params: UseTreeViewLazyLoadingParameters<any>;
+  defaultizedParams: UseTreeViewLazyLoadingDefaultizedParameters<any>;
+  publicAPI: UseTreeViewLazyLoadingPublicAPI;
+  instance: UseTreeViewLazyLoadingInstance;
+  state: UseTreeViewLazyLoadingState;
+  experimentalFeatures: 'lazyLoading';
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewSelectionSignature];
+}>;
+export {};

package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.js

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

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -61,9 +61,9 @@ export const useTreeViewSelection = ({
     }
     models.selectedItems.setControlledValue(cleanModel);
   };
-  const selectItem = ({
-    event,
+  const setItemSelection = ({
     itemId,
+    event = null,
     keepExistingSelection = false,
     shouldBeSelected
   }) => {
@@ -177,10 +177,10 @@ export const useTreeViewSelection = ({
       'aria-multiselectable': params.multiSelect
     }),
     publicAPI: {
-      selectItem
+      setItemSelection
     },
     instance: {
-      selectItem,
+      setItemSelection,
       selectAllNavigableItems,
       expandSelectionRange,
       selectRangeFromStartToItem,

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

@@ -7,17 +7,17 @@ import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from ".
 export interface UseTreeViewSelectionPublicAPI {
   /**
    * Select or deselect an item.
-   * @param {object} params The params of the method.
-   * @param {React.SyntheticEvent} params.event The DOM event that triggered the change.
-   * @param {string} params.itemId The id of the item to select or deselect.
-   * @param {boolean} params.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
-   * @param {boolean | undefined} params.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's new selection status will be the opposite of its current one.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to select or deselect.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+   * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
    */
-  selectItem: (params: {
-    event: React.SyntheticEvent;
+  setItemSelection: (parameters: {
     itemId: string;
-    keepExistingSelection?: boolean;
+    event?: React.SyntheticEvent;
     shouldBeSelected?: boolean;
+    keepExistingSelection?: boolean;
   }) => void;
 }
 export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublicAPI {
@@ -99,18 +99,18 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
   selectionPropagation?: TreeViewSelectionPropagation;
   /**
    * Callback fired when Tree Items are selected/deselected.
-   * @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.setItemSelection()` method.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
-  onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewSelectionValue<Multiple>) => void;
+  onSelectedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewSelectionValue<Multiple>) => void;
   /**
    * Callback fired when a Tree Item is selected or deselected.
-   * @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.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onItemSelectionToggle?: (event: React.SyntheticEvent, itemId: string, isSelected: boolean) => void;
+  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
 }
 export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 export interface UseTreeViewSelectionState {

package/modern/internals/utils/selectors.d.ts

@@ -1,6 +1,13 @@
 import { CreateSelectorFunction } from 'reselect';
 import { TreeViewAnyPluginSignature, TreeViewState } from "../models/index.js";
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
+ */
 export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
+ */
+export type TreeViewRootSelectorForOptionalPlugin<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [], TOptionalSignatures extends [TSignature]>(state: TreeViewState<TSignatures, TOptionalSignatures>) => TSignature['state'][keyof TSignature['state']] | undefined;
 export type TreeViewSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
 /**
  * Method wrapping reselect's createSelector to provide caching for tree view instances.

package/modern/internals/utils/selectors.js

@@ -7,6 +7,15 @@ const reselectCreateSelector = createSelectorCreator({
   }
 });
 const cache = new WeakMap();
+
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
+ */
+
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
+ */
+
 /**
  * Method wrapping reselect's createSelector to provide caching for tree view instances.
  *

package/modern/useTreeItem/useTreeItem.d.ts

@@ -1,2 +1,2 @@
 import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from "./useTreeItem.types.js";
-export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = readonly []>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;
+export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = UseTreeItemOptionalPlugins>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;