@mui/x-tree-view-pro 8.0.0-alpha.9 → 8.0.0-beta.1

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

@@ -0,0 +1,50 @@
+import { createSelector, selectorItemMetaLookup } from '@mui/x-tree-view/internals';
+/**
+ * Get the items reordering state.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemsReorderingState} The items reordering state.
+ */
+const selectorItemsReordering = state => state.itemsReordering;
+
+/**
+ * Get the properties of the current reordering.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemsReorderingState['currentReorder']} The properties of the current reordering.
+ */
+export const selectorCurrentItemReordering = createSelector([selectorItemsReordering], itemsReordering => itemsReordering.currentReorder);
+
+/**
+ * Get the properties of the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
+ */
+export const selectorDraggedItemProperties = createSelector([selectorCurrentItemReordering, selectorItemMetaLookup, (_, itemId) => itemId], (currentReorder, itemMetaLookup, itemId) => {
+  if (!currentReorder || currentReorder.targetItemId !== itemId || currentReorder.action == null) {
+    return null;
+  }
+  const targetDepth = currentReorder.newPosition?.parentId == null ? 0 :
+  // The depth is always defined because drag&drop is only usable with Rich Tree View components.
+  itemMetaLookup[itemId].depth + 1;
+  return {
+    newPosition: currentReorder.newPosition,
+    action: currentReorder.action,
+    targetDepth
+  };
+});
+
+/**
+ * Check if the current item is a valid target for the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
+ */
+export const selectorIsItemValidReorderingTarget = createSelector([selectorCurrentItemReordering, (_, itemId) => itemId], (currentReorder, itemId) => currentReorder && currentReorder.draggedItemId !== itemId);
+
+/**
+ * Check if the items can be reordered.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {boolean} `true` if the items can be reordered, `false` otherwise.
+ */
+export const selectorCanItemBeReordered = createSelector([selectorItemsReordering, (_, itemId) => itemId], (itemsReordering, itemId) => itemsReordering.isItemReorderable(itemId));

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
+import { TreeViewItemId, TreeViewItemsReorderingAction, TreeViewCancellableEventHandler } from '@mui/x-tree-view/models';
+import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+export interface UseTreeViewItemsReorderingInstance {
+  /**
+   * Check if a given item can be dragged.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item can be dragged, `false` otherwise.
+   */
+  canItemBeDragged: (itemId: TreeViewItemId) => boolean;
+  /**
+   * Get the valid reordering action if a given item is the target of the ongoing reordering.
+   * @param {TreeViewItemId} itemId The id of the item to get the action of.
+   * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
+   */
+  getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
+  /**
+   * Start a reordering for the given item.
+   * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
+   */
+  startDraggingItem: (itemId: TreeViewItemId) => void;
+  /**
+   * Stop the reordering of a given item.
+   * @param {TreeViewItemId} itemId The id of the item to stop the reordering for.
+   */
+  stopDraggingItem: (itemId: TreeViewItemId) => void;
+  /**
+   * Set the new target item for the ongoing reordering.
+   * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
+   * @param {object} params The params describing the new target item.
+   * @param {TreeViewItemId} params.itemId The id of the new target item.
+   * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
+   * @param {number} params.targetHeight The height of the target item.
+   * @param {number} params.cursorY The Y coordinate of the mouse cursor.
+   * @param {number} params.cursorX The X coordinate of the mouse cursor.
+   * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
+   */
+  setDragTargetItem: (params: {
+    itemId: TreeViewItemId;
+    validActions: TreeViewItemItemReorderingValidActions;
+    targetHeight: number;
+    cursorY: number;
+    cursorX: number;
+    contentElement: HTMLDivElement;
+  }) => void;
+}
+export interface TreeViewItemReorderPosition {
+  parentId: string | null;
+  index: number;
+}
+export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
+export interface UseTreeViewItemsReorderingParameters {
+  /**
+   * If `true`, the reordering of items is enabled.
+   * @default false
+   */
+  itemsReordering?: boolean;
+  /**
+   * Determine if a given item can be reordered.
+   * @param {string} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item can be reordered.
+   * @default () => true
+   */
+  isItemReorderable?: (itemId: string) => boolean;
+  /**
+   * Used to determine if a given item can move to some new position.
+   * @param {object} params The params describing the item re-ordering.
+   * @param {string} params.itemId The id of the item that is being moved to a new position.
+   * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
+   * @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
+   * @returns {boolean} `true` if the item can move to the new position.
+   */
+  canMoveItemToNewPosition?: (params: {
+    itemId: string;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => boolean;
+  /**
+   * Callback fired when a Tree Item is moved in the tree.
+   * @param {object} params The params describing the item re-ordering.
+   * @param {string} params.itemId The id of the item moved.
+   * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
+   * @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
+   */
+  onItemPositionChange?: (params: {
+    itemId: string;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => void;
+}
+export type UseTreeViewItemsReorderingDefaultizedParameters = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
+export interface UseTreeViewItemsReorderingState {
+  itemsReordering: {
+    isItemReorderable: (itemId: string) => boolean;
+    currentReorder: {
+      draggedItemId: string;
+      targetItemId: string;
+      newPosition: TreeViewItemReorderPosition | null;
+      action: TreeViewItemsReorderingAction | null;
+    } | null;
+  };
+}
+export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemsReorderingParameters;
+  defaultizedParams: UseTreeViewItemsReorderingDefaultizedParameters;
+  instance: UseTreeViewItemsReorderingInstance;
+  state: UseTreeViewItemsReorderingState;
+  dependencies: [UseTreeViewItemsSignature];
+}>;
+export interface UseTreeItemRootSlotPropsFromItemsReordering {
+  draggable?: true;
+  onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
+}
+export interface UseTreeItemContentSlotPropsFromItemsReordering {
+  onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
+}
+export interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
+  interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
+  interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
+}

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js

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

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts

@@ -0,0 +1,37 @@
+import { TreeViewUsedStore, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
+import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
+import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
+/**
+ * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
+ */
+export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
+interface GetNewPositionParams {
+  itemChildrenIndentation: string | number;
+  validActions: TreeViewItemItemReorderingValidActions;
+  targetHeight: number;
+  targetDepth: number;
+  cursorY: number;
+  cursorX: number;
+  contentElement: HTMLDivElement;
+}
+export declare const chooseActionToApply: ({
+  itemChildrenIndentation,
+  validActions,
+  targetHeight,
+  targetDepth,
+  cursorX,
+  cursorY,
+  contentElement
+}: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
+export declare const moveItemInTree: <R extends {}>({
+  itemToMoveId,
+  oldPosition,
+  newPosition,
+  prevState
+}: {
+  itemToMoveId: TreeViewItemId;
+  oldPosition: TreeViewItemReorderPosition;
+  newPosition: TreeViewItemReorderPosition;
+  prevState: UseTreeViewItemsState<R>["items"];
+}) => UseTreeViewItemsState<R>["items"];
+export {};

package/{node → esm}/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.moveItemInTree = exports.isAncestor = exports.chooseActionToApply = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _internals = require("@mui/x-tree-view/internals");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, selectorItemMeta } from '@mui/x-tree-view/internals';
 /**
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
-const isAncestor = (store, itemIdA, itemIdB) => {
-  const itemMetaA = (0, _internals.selectorItemMeta)(store.value, itemIdA);
+export const isAncestor = (store, itemIdA, itemIdB) => {
+  const itemMetaA = selectorItemMeta(store.value, itemIdA);
   if (itemMetaA.parentId === itemIdB) {
     return true;
   }
@@ -26,7 +19,6 @@ const isAncestor = (store, itemIdA, itemIdB) => {
  * @param {string | null} itemChildrenIndentation The indentation as passed to the `itemChildrenIndentation` prop.
  * @param {HTMLElement} contentElement The DOM element to which the indentation will be applied.
  */
-exports.isAncestor = isAncestor;
 const parseItemChildrenIndentation = (itemChildrenIndentation, contentElement) => {
   if (typeof itemChildrenIndentation === 'number') {
     return itemChildrenIndentation;
@@ -45,7 +37,7 @@ const parseItemChildrenIndentation = (itemChildrenIndentation, contentElement) =
   contentElement.removeChild(tempElement);
   return value;
 };
-const chooseActionToApply = ({
+export const chooseActionToApply = ({
   itemChildrenIndentation,
   validActions,
   targetHeight,
@@ -90,24 +82,23 @@ const chooseActionToApply = ({
   }
   return action;
 };
-exports.chooseActionToApply = chooseActionToApply;
-const moveItemInTree = ({
+export const moveItemInTree = ({
   itemToMoveId,
   oldPosition,
   newPosition,
   prevState
 }) => {
   const itemToMoveMeta = prevState.itemMetaLookup[itemToMoveId];
-  const oldParentId = oldPosition.parentId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
-  const newParentId = newPosition.parentId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
+  const oldParentId = oldPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+  const newParentId = newPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
 
   // 1. Update the `itemOrderedChildrenIds`.
-  const itemOrderedChildrenIds = (0, _extends2.default)({}, prevState.itemOrderedChildrenIdsLookup);
+  const itemOrderedChildrenIds = _extends({}, prevState.itemOrderedChildrenIdsLookup);
   if (oldParentId === newParentId) {
     const updatedChildren = [...itemOrderedChildrenIds[oldParentId]];
     updatedChildren.splice(oldPosition.index, 1);
     updatedChildren.splice(newPosition.index, 0, itemToMoveId);
-    itemOrderedChildrenIds[itemToMoveMeta.parentId ?? _internals.TREE_VIEW_ROOT_PARENT_ID] = updatedChildren;
+    itemOrderedChildrenIds[itemToMoveMeta.parentId ?? TREE_VIEW_ROOT_PARENT_ID] = updatedChildren;
   } else {
     const updatedOldParentChildren = [...itemOrderedChildrenIds[oldParentId]];
     updatedOldParentChildren.splice(oldPosition.index, 1);
@@ -118,51 +109,50 @@ const moveItemInTree = ({
   }
 
   // 2. Update the `itemChildrenIndexes`
-  const itemChildrenIndexes = (0, _extends2.default)({}, prevState.itemChildrenIndexesLookup);
-  itemChildrenIndexes[oldParentId] = (0, _internals.buildSiblingIndexes)(itemOrderedChildrenIds[oldParentId]);
+  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexesLookup);
+  itemChildrenIndexes[oldParentId] = buildSiblingIndexes(itemOrderedChildrenIds[oldParentId]);
   if (newParentId !== oldParentId) {
-    itemChildrenIndexes[newParentId] = (0, _internals.buildSiblingIndexes)(itemOrderedChildrenIds[newParentId]);
+    itemChildrenIndexes[newParentId] = buildSiblingIndexes(itemOrderedChildrenIds[newParentId]);
   }
 
   // 3. Update the `itemMetaLookup`
-  const itemMetaLookup = (0, _extends2.default)({}, prevState.itemMetaLookup);
+  const itemMetaLookup = _extends({}, prevState.itemMetaLookup);
 
   // 3.1 Update the `expandable` property of the old and the new parent
   function updateExpandable(itemId) {
     const isExpandable = itemOrderedChildrenIds[itemId].length > 0;
     if (itemMetaLookup[itemId].expandable !== isExpandable) {
-      itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
+      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
         expandable: isExpandable
       });
     }
   }
-  if (oldParentId !== _internals.TREE_VIEW_ROOT_PARENT_ID && oldParentId !== newParentId) {
+  if (oldParentId !== TREE_VIEW_ROOT_PARENT_ID && oldParentId !== newParentId) {
     updateExpandable(oldParentId);
   }
-  if (newParentId !== _internals.TREE_VIEW_ROOT_PARENT_ID && newParentId !== oldParentId) {
+  if (newParentId !== TREE_VIEW_ROOT_PARENT_ID && newParentId !== oldParentId) {
     updateExpandable(newParentId);
   }
 
   // 3.2 Update the `parentId` and `depth` properties of the item to move
   // The depth is always defined because drag&drop is only usable with Rich Tree View components.
   const itemToMoveDepth = newPosition.parentId == null ? 0 : itemMetaLookup[newParentId].depth + 1;
-  itemMetaLookup[itemToMoveId] = (0, _extends2.default)({}, itemToMoveMeta, {
+  itemMetaLookup[itemToMoveId] = _extends({}, itemToMoveMeta, {
     parentId: newPosition.parentId,
     depth: itemToMoveDepth
   });
 
   // 3.3 Update the depth of all the children of the item to move
   const updateItemDepth = (itemId, depth) => {
-    itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
+    itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
       depth
     });
     itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
   };
   itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
-  return (0, _extends2.default)({}, prevState, {
+  return _extends({}, prevState, {
     itemOrderedChildrenIdsLookup: itemOrderedChildrenIds,
     itemChildrenIndexesLookup: itemChildrenIndexes,
     itemMetaLookup
   });
-};
-exports.moveItemInTree = moveItemInTree;
+};

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

@@ -0,0 +1 @@
+export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";

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

@@ -0,0 +1 @@
+export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";

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

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '@mui/x-tree-view/internals';
+import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;

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

@@ -0,0 +1,288 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { warnOnce } from '@mui/x-internals/warning';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { selectorItemMeta, selectorIsItemSelected, useInstanceEventHandler, selectorDataSourceState, selectorGetTreeItemError } from '@mui/x-tree-view/internals';
+import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
+import { NestedDataManager } from "./utils.js";
+const INITIAL_STATE = {
+  loading: {},
+  errors: {}
+};
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new DataSourceCacheDefault({});
+}
+export const useTreeViewLazyLoading = ({
+  instance,
+  params,
+  store
+}) => {
+  const isLazyLoadingEnabled = params.dataSource?.getChildrenCount !== undefined;
+  const firstRenderRef = React.useRef(true);
+  const nestedDataManager = useLazyRef(() => new NestedDataManager(instance)).current;
+  const cacheRef = useLazyRef(() => getCache(params.dataSourceCache));
+  const setDataSourceLoading = useEventCallback((itemId, isLoading) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      if (!prevState.lazyLoading.dataSource.loading[itemId] && !isLoading) {
+        return prevState;
+      }
+      const loading = _extends({}, prevState.lazyLoading.dataSource.loading);
+      if (isLoading === false) {
+        delete loading[itemId];
+      } else {
+        loading[itemId] = isLoading;
+      }
+      return _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
+            loading
+          })
+        })
+      });
+    });
+  });
+  const setDataSourceError = (itemId, error) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      const errors = _extends({}, prevState.lazyLoading.dataSource.errors);
+      if (error === null && errors[itemId] !== undefined) {
+        delete errors[itemId];
+      } else {
+        errors[itemId] = error;
+      }
+      errors[itemId] = error;
+      return _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
+            errors
+          })
+        })
+      });
+    });
+  };
+  const resetDataSourceState = useEventCallback(() => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => _extends({}, prevState, {
+      lazyLoading: _extends({}, prevState.lazyLoading, {
+        dataSource: INITIAL_STATE
+      })
+    }));
+  });
+  const fetchItems = useEventCallback(async parentIds => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+    const getTreeItems = params.dataSource?.getTreeItems;
+    if (!getTreeItems) {
+      return;
+    }
+    if (parentIds) {
+      await nestedDataManager.queue(parentIds);
+      return;
+    }
+    nestedDataManager.clear();
+
+    // reset the state if we are refetching the first visible items
+    if (selectorDataSourceState(store.value) !== INITIAL_STATE) {
+      resetDataSourceState();
+    }
+    // handle caching here
+    const cachedData = cacheRef.current.get('root');
+    if (cachedData !== undefined) {
+      return;
+    }
+
+    // handle loading here
+    instance.setTreeViewLoading(true);
+    try {
+      const getTreeItemsResponse = await getTreeItems();
+
+      // set caching
+      cacheRef.current.set('root', getTreeItemsResponse);
+
+      // update the items in the state
+      instance.addItems({
+        items: getTreeItemsResponse,
+        depth: 0,
+        getChildrenCount
+      });
+    } catch (error) {
+      // set the items to empty
+      instance.addItems({
+        items: [],
+        depth: 0,
+        getChildrenCount
+      });
+      // set error state
+      instance.setTreeViewError(error);
+    } finally {
+      // set loading state
+      instance.setTreeViewLoading(false);
+    }
+  });
+  const fetchItemChildren = useEventCallback(async id => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+    const getTreeItems = params.dataSource?.getTreeItems;
+    if (!getTreeItems) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const parent = selectorItemMeta(store.value, id);
+    if (!parent) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const depth = parent.depth ? parent.depth + 1 : 1;
+
+    // handle loading here
+    instance.setDataSourceLoading(id, true);
+
+    // handle caching here
+    const cachedData = cacheRef.current.get(id);
+    if (cachedData !== undefined && cachedData !== -1) {
+      nestedDataManager.setRequestSettled(id);
+      instance.addItems({
+        items: cachedData,
+        depth,
+        parentId: id,
+        getChildrenCount
+      });
+      instance.setDataSourceLoading(id, false);
+      return;
+    }
+    if (cachedData === -1) {
+      instance.removeChildren(id);
+    }
+    const existingError = selectorGetTreeItemError(store.value, id) ?? null;
+    if (existingError) {
+      instance.setDataSourceError(id, null);
+    }
+    try {
+      const getTreeItemsResponse = await getTreeItems(id);
+      nestedDataManager.setRequestSettled(id);
+
+      // set caching
+      cacheRef.current.set(id, getTreeItemsResponse);
+      // update the items in the state
+      instance.addItems({
+        items: getTreeItemsResponse,
+        depth,
+        parentId: id,
+        getChildrenCount
+      });
+    } catch (error) {
+      const childrenFetchError = error;
+      // handle errors here
+      instance.setDataSourceError(id, childrenFetchError);
+      instance.removeChildren(id);
+    } finally {
+      // unset loading
+      instance.setDataSourceLoading(id, false);
+      nestedDataManager.setRequestSettled(id);
+    }
+  });
+  useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
+    if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
+      return;
+    }
+    eventParameters.isExpansionPrevented = true;
+    await instance.fetchItems([eventParameters.itemId]);
+    const fetchErrors = Boolean(selectorGetTreeItemError(store.value, eventParameters.itemId));
+    if (!fetchErrors) {
+      instance.applyItemExpansion({
+        itemId: eventParameters.itemId,
+        shouldBeExpanded: true,
+        event: eventParameters.event
+      });
+      if (selectorIsItemSelected(store.value, eventParameters.itemId)) {
+        // make sure selection propagation works correctly
+        instance.setItemSelection({
+          event: eventParameters.event,
+          itemId: eventParameters.itemId,
+          keepExistingSelection: true,
+          shouldBeSelected: true
+        });
+      }
+    }
+  });
+  React.useEffect(() => {
+    if (isLazyLoadingEnabled && firstRenderRef.current) {
+      store.update(prevState => _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          enabled: true
+        })
+      }));
+      if (params.items.length) {
+        const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+        instance.addItems({
+          items: params.items,
+          depth: 0,
+          getChildrenCount
+        });
+      } else {
+        instance.fetchItems();
+      }
+      firstRenderRef.current = false;
+    }
+  }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
+  if (isLazyLoadingEnabled) {
+    instance.preventItemUpdates();
+  }
+  return {
+    instance: {
+      fetchItemChildren,
+      fetchItems,
+      setDataSourceLoading,
+      setDataSourceError
+    },
+    publicAPI: {}
+  };
+};
+useTreeViewLazyLoading.getDefaultizedParams = ({
+  params,
+  experimentalFeatures
+}) => {
+  const canUseFeature = experimentalFeatures?.lazyLoading;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.dataSource && !canUseFeature) {
+      warnOnce(['MUI X: The label editing feature requires the `lazyLoading` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ lazyLoading: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/lazy-loading/']);
+    }
+  }
+  const defaultDataSource = params?.dataSource ?? {
+    getChildrenCount: () => 0,
+    getTreeItems: () => Promise.resolve([])
+  };
+  return _extends({}, params, {
+    dataSource: canUseFeature ? defaultDataSource : {}
+  });
+};
+useTreeViewLazyLoading.getInitialState = () => ({
+  lazyLoading: {
+    enabled: false,
+    dataSource: INITIAL_STATE
+  }
+});
+useTreeViewLazyLoading.params = {
+  dataSource: true,
+  dataSourceCache: true
+};

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

@@ -0,0 +1,32 @@
+import { TreeViewInstance, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+export declare enum RequestStatus {
+  QUEUED = 0,
+  PENDING = 1,
+  SETTLED = 2,
+  UNKNOWN = 3,
+}
+/**
+ * Plugins that the `NestedDataManager` class can use if they are present, but are not required.
+ */
+export type NestedDataManagerOptionalPlugins = readonly [];
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `ParentId` to uniquely identify a request
+ */
+export declare class NestedDataManager {
+  private pendingRequests;
+  private queuedRequests;
+  private settledRequests;
+  private instance;
+  private maxConcurrentRequests;
+  constructor(instance: TreeViewInstance<[UseTreeViewLazyLoadingSignature]>, maxConcurrentRequests?: number);
+  private processQueue;
+  queue: (ids: TreeViewItemId[]) => Promise<void>;
+  setRequestSettled: (id: TreeViewItemId) => Promise<void>;
+  clear: () => void;
+  clearPendingRequest: (id: TreeViewItemId) => Promise<void>;
+  getRequestStatus: (id: TreeViewItemId) => RequestStatus;
+  getActiveRequestsCount: () => number;
+}