@mui/x-tree-view 9.12.0 → 9.13.0

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v9.12.0
+ * @mui/x-tree-view v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -16,6 +16,7 @@ export * from "./TreeItemIcon/index.mjs";
 export * from "./TreeItemProvider/index.mjs";
 export * from "./TreeItemDragAndDropOverlay/index.mjs";
 export * from "./TreeItemLabelInput/index.mjs";
+export * from "./TreeItemLoader/index.mjs";
 export * from "./models/index.mjs";
 export * from "./icons/index.mjs";
 export * from "./hooks/index.mjs";

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.js

@@ -77,8 +77,8 @@ class MinimalTreeViewStore extends _store.Store {
     const newMinimalState = (0, _MinimalTreeViewStore.deriveStateFromParameters)(parameters);
     updateModel(newMinimalState, 'expandedItems', 'defaultExpandedItems');
     updateModel(newMinimalState, 'selectedItems', 'defaultSelectedItems');
-    if (this.state.providedTreeId !== parameters.id || this.state.treeId === undefined) {
-      newMinimalState.treeId = (0, _MinimalTreeViewStore.createTreeViewDefaultId)();
+    if (this.state.treeId !== parameters.defaultId) {
+      newMinimalState.treeId = parameters.defaultId;
     }
     if (!this.mapper.shouldIgnoreItemsStateUpdate(parameters) && _TreeViewItemsPlugin.TreeViewItemsPlugin.shouldRebuildItemsState(parameters, this.parameters)) {
       Object.assign(newMinimalState, _TreeViewItemsPlugin.TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters));

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.mjs

@@ -3,7 +3,7 @@ import { Store } from '@mui/x-internals/store';
 import { warnOnce } from '@mui/x-internals/warning';
 import { EventManager } from '@mui/x-internals/EventManager';
 import { DisposableStack, disposeSymbol, unwrapSuppressedErrors } from '@mui/x-internals/disposable';
-import { createMinimalInitialState, createTreeViewDefaultId, deriveStateFromParameters } from "./MinimalTreeViewStore.utils.mjs";
+import { createMinimalInitialState, deriveStateFromParameters } from "./MinimalTreeViewStore.utils.mjs";
 import { TimeoutManager } from "./TimeoutManager.mjs";
 import { TreeViewKeyboardNavigationPlugin } from "../plugins/keyboardNavigation/index.mjs";
 import { TreeViewFocusPlugin } from "../plugins/focus/TreeViewFocusPlugin.mjs";
@@ -70,8 +70,8 @@ export class MinimalTreeViewStore extends Store {
     const newMinimalState = deriveStateFromParameters(parameters);
     updateModel(newMinimalState, 'expandedItems', 'defaultExpandedItems');
     updateModel(newMinimalState, 'selectedItems', 'defaultSelectedItems');
-    if (this.state.providedTreeId !== parameters.id || this.state.treeId === undefined) {
-      newMinimalState.treeId = createTreeViewDefaultId();
+    if (this.state.treeId !== parameters.defaultId) {
+      newMinimalState.treeId = parameters.defaultId;
     }
     if (!this.mapper.shouldIgnoreItemsStateUpdate(parameters) && TreeViewItemsPlugin.shouldRebuildItemsState(parameters, this.parameters)) {
       Object.assign(newMinimalState, TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters));

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.types.d.mts

@@ -88,6 +88,10 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
   itemHeight: number | null;
 }
 export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
+  /**
+   * The id used to build the id attributes of the items when the `id` parameter is not provided.
+   */
+  defaultId: string | undefined;
   /**
    * Whether the layout is right-to-left.
    */

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.types.d.ts

@@ -88,6 +88,10 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
   itemHeight: number | null;
 }
 export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
+  /**
+   * The id used to build the id attributes of the items when the `id` parameter is not provided.
+   */
+  defaultId: string | undefined;
   /**
    * Whether the layout is right-to-left.
    */

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.d.mts

@@ -17,5 +17,4 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   selectionPropagation: Readonly<{}>;
   itemHeight: number | null;
 };
-export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;
-export declare const createTreeViewDefaultId: () => string;
+export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.d.ts

@@ -17,5 +17,4 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   selectionPropagation: Readonly<{}>;
   itemHeight: number | null;
 };
-export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;
-export declare const createTreeViewDefaultId: () => string;
+export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createMinimalInitialState = createMinimalInitialState;
-exports.createTreeViewDefaultId = void 0;
 exports.deriveStateFromParameters = deriveStateFromParameters;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _empty = require("@base-ui/utils/empty");
@@ -43,16 +42,10 @@ function applyModelInitialValue(controlledValue, defaultValue, fallback) {
 }
 function createMinimalInitialState(parameters) {
   return (0, _extends2.default)({
-    treeId: undefined,
+    treeId: parameters.defaultId,
     focusedItemId: null
   }, deriveStateFromParameters(parameters), _items.TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters), {
     expandedItems: applyModelInitialValue(parameters.expandedItems, parameters.defaultExpandedItems, []),
     selectedItems: applyModelInitialValue(parameters.selectedItems, parameters.defaultSelectedItems, parameters.multiSelect ? _empty.EMPTY_ARRAY : null)
   });
-}
-let globalTreeViewDefaultId = 0;
-const createTreeViewDefaultId = () => {
-  globalTreeViewDefaultId += 1;
-  return `mui-tree-view-${globalTreeViewDefaultId}`;
-};
-exports.createTreeViewDefaultId = createTreeViewDefaultId;
+}

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.mjs

@@ -35,15 +35,10 @@ function applyModelInitialValue(controlledValue, defaultValue, fallback) {
 }
 export function createMinimalInitialState(parameters) {
   return _extends({
-    treeId: undefined,
+    treeId: parameters.defaultId,
     focusedItemId: null
   }, deriveStateFromParameters(parameters), TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters), {
     expandedItems: applyModelInitialValue(parameters.expandedItems, parameters.defaultExpandedItems, []),
     selectedItems: applyModelInitialValue(parameters.selectedItems, parameters.defaultSelectedItems, parameters.multiSelect ? EMPTY_ARRAY : null)
   });
-}
-let globalTreeViewDefaultId = 0;
-export const createTreeViewDefaultId = () => {
-  globalTreeViewDefaultId += 1;
-  return `mui-tree-view-${globalTreeViewDefaultId}`;
-};
+}

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -36,14 +36,18 @@ function TreeViewProvider(props) {
     slots: {
       collapseIcon: slots.collapseIcon,
       expandIcon: slots.expandIcon,
-      endIcon: slots.endIcon
+      endIcon: slots.endIcon,
+      loading: slots.loading,
+      itemLoader: slots.itemLoader
     },
     slotProps: {
       collapseIcon: slotProps.collapseIcon,
       expandIcon: slotProps.expandIcon,
-      endIcon: slotProps.endIcon
+      endIcon: slotProps.endIcon,
+      loading: slotProps.loading,
+      itemLoader: slotProps.itemLoader
     }
-  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slots.loading, slots.itemLoader, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon, slotProps.loading, slotProps.itemLoader]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewStyleContext.TreeViewStyleContext.Provider, {

package/internals/TreeViewProvider/TreeViewProvider.mjs

@@ -29,14 +29,18 @@ export function TreeViewProvider(props) {
     slots: {
       collapseIcon: slots.collapseIcon,
       expandIcon: slots.expandIcon,
-      endIcon: slots.endIcon
+      endIcon: slots.endIcon,
+      loading: slots.loading,
+      itemLoader: slots.itemLoader
     },
     slotProps: {
       collapseIcon: slotProps.collapseIcon,
       expandIcon: slotProps.expandIcon,
-      endIcon: slotProps.endIcon
+      endIcon: slotProps.endIcon,
+      loading: slotProps.loading,
+      itemLoader: slotProps.itemLoader
     }
-  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slots.loading, slots.itemLoader, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon, slotProps.loading, slotProps.itemLoader]);
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(TreeViewStyleContext.Provider, {

package/internals/TreeViewProvider/TreeViewProvider.types.d.mts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { disposeSymbol } from '@mui/x-internals/disposable';
 import type { TreeItemWrapper, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewAnyStore } from "../models/index.mjs";
 import type { TreeItemProps } from "../../TreeItem/TreeItem.types.mjs";
-import type { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.mjs";
+import type { TreeViewClasses, TreeViewStyleContextSlotProps, TreeViewStyleContextSlots } from "./TreeViewStyleContext.mjs";
 import type { UseTreeViewBuildContextParameters } from "./useTreeViewBuildContext.mjs";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewStoreInContext<TStore extends TreeViewAnyStore> = Omit<TStore, 'setState' | 'update' | 'set' | 'updateStateFromParameters' | 'disposables' | typeof disposeSymbol | 'mountEffect' | 'registerStoreEffect' | 'itemPluginManager' | 'parameters'>;
@@ -16,6 +16,6 @@ export interface TreeViewContextValue<TStore extends TreeViewAnyStore> {
 export interface TreeViewProviderProps<TStore extends TreeViewAnyStore> extends UseTreeViewBuildContextParameters<TStore> {
   children: React.ReactNode;
   classes: Partial<TreeViewClasses> | undefined;
-  slots: TreeViewSlots | undefined;
-  slotProps: TreeViewSlotProps | undefined;
+  slots: TreeViewStyleContextSlots | undefined;
+  slotProps: TreeViewStyleContextSlotProps | undefined;
 }

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { disposeSymbol } from '@mui/x-internals/disposable';
 import type { TreeItemWrapper, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewAnyStore } from "../models/index.js";
 import type { TreeItemProps } from "../../TreeItem/TreeItem.types.js";
-import type { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.js";
+import type { TreeViewClasses, TreeViewStyleContextSlotProps, TreeViewStyleContextSlots } from "./TreeViewStyleContext.js";
 import type { UseTreeViewBuildContextParameters } from "./useTreeViewBuildContext.js";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewStoreInContext<TStore extends TreeViewAnyStore> = Omit<TStore, 'setState' | 'update' | 'set' | 'updateStateFromParameters' | 'disposables' | typeof disposeSymbol | 'mountEffect' | 'registerStoreEffect' | 'itemPluginManager' | 'parameters'>;
@@ -16,6 +16,6 @@ export interface TreeViewContextValue<TStore extends TreeViewAnyStore> {
 export interface TreeViewProviderProps<TStore extends TreeViewAnyStore> extends UseTreeViewBuildContextParameters<TStore> {
   children: React.ReactNode;
   classes: Partial<TreeViewClasses> | undefined;
-  slots: TreeViewSlots | undefined;
-  slotProps: TreeViewSlotProps | undefined;
+  slots: TreeViewStyleContextSlots | undefined;
+  slotProps: TreeViewStyleContextSlotProps | undefined;
 }

package/internals/TreeViewProvider/TreeViewStyleContext.d.mts

@@ -1,5 +1,7 @@
 import type { SlotComponentProps } from '@mui/utils/types';
 import * as React from 'react';
+import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.mjs";
+import type { RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "../components/RichTreeViewLoading.mjs";
 export interface TreeViewClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -23,6 +25,8 @@ export interface TreeViewClasses {
   itemErrorIcon: string;
   /** Styles applied to the item's loading icon element */
   itemLoadingIcon: string;
+  /** Styles applied to the item loader element. */
+  itemLoader: string;
 }
 export interface TreeViewSlots {
   /**
@@ -44,10 +48,34 @@ export interface TreeViewSlotProps {
   expandIcon?: SlotComponentProps<'svg', {}, {}>;
   endIcon?: SlotComponentProps<'svg', {}, {}>;
 }
+/**
+ * Slots stored in the style context.
+ * The loading slots only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlots` interface.
+ */
+export interface TreeViewStyleContextSlots extends TreeViewSlots {
+  /**
+   * Component rendered instead of the default loading rows.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row. The default renders a skeleton row.
+   */
+  itemLoader?: React.ElementType;
+}
+/**
+ * Slot props stored in the style context.
+ * The loading slot props only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlotProps` interface.
+ */
+export interface TreeViewStyleContextSlotProps extends TreeViewSlotProps {
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
+}
 export interface TreeViewStyleContextValue {
   classes: Partial<TreeViewClasses>;
-  slots: TreeViewSlots;
-  slotProps: TreeViewSlotProps;
+  slots: TreeViewStyleContextSlots;
+  slotProps: TreeViewStyleContextSlotProps;
 }
 /**
  * @ignore - internal component.

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -1,5 +1,7 @@
 import type { SlotComponentProps } from '@mui/utils/types';
 import * as React from 'react';
+import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.js";
+import type { RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "../components/RichTreeViewLoading.js";
 export interface TreeViewClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -23,6 +25,8 @@ export interface TreeViewClasses {
   itemErrorIcon: string;
   /** Styles applied to the item's loading icon element */
   itemLoadingIcon: string;
+  /** Styles applied to the item loader element. */
+  itemLoader: string;
 }
 export interface TreeViewSlots {
   /**
@@ -44,10 +48,34 @@ export interface TreeViewSlotProps {
   expandIcon?: SlotComponentProps<'svg', {}, {}>;
   endIcon?: SlotComponentProps<'svg', {}, {}>;
 }
+/**
+ * Slots stored in the style context.
+ * The loading slots only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlots` interface.
+ */
+export interface TreeViewStyleContextSlots extends TreeViewSlots {
+  /**
+   * Component rendered instead of the default loading rows.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row. The default renders a skeleton row.
+   */
+  itemLoader?: React.ElementType;
+}
+/**
+ * Slot props stored in the style context.
+ * The loading slot props only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlotProps` interface.
+ */
+export interface TreeViewStyleContextSlotProps extends TreeViewSlotProps {
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
+}
 export interface TreeViewStyleContextValue {
   classes: Partial<TreeViewClasses>;
-  slots: TreeViewSlots;
-  slotProps: TreeViewSlotProps;
+  slots: TreeViewStyleContextSlots;
+  slotProps: TreeViewStyleContextSlotProps;
 }
 /**
  * @ignore - internal component.

package/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -7,6 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewStyleContext = exports.TreeViewStyleContext = void 0;
 var React = _interopRequireWildcard(require("react"));
+/**
+ * Slots stored in the style context.
+ * The loading slots only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlots` interface.
+ */
+
+/**
+ * Slot props stored in the style context.
+ * The loading slot props only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlotProps` interface.
+ */
+
 /**
  * @ignore - internal component.
  */

package/internals/TreeViewProvider/TreeViewStyleContext.mjs

@@ -1,6 +1,19 @@
 'use client';
 
 import * as React from 'react';
+
+/**
+ * Slots stored in the style context.
+ * The loading slots only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlots` interface.
+ */
+
+/**
+ * Slot props stored in the style context.
+ * The loading slot props only exist on the components with a loading state,
+ * so they are not part of the public `TreeViewSlotProps` interface.
+ */
+
 /**
  * @ignore - internal component.
  */

package/internals/components/RichTreeViewItems.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RichTreeViewItem = void 0;
 exports.RichTreeViewItems = RichTreeViewItems;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _empty = require("@base-ui/utils/empty");
 var _store = require("@mui/x-internals/store");
@@ -19,6 +19,8 @@ var _TreeItem = require("../../TreeItem");
 var _items = require("../plugins/items");
 var _TreeViewProvider = require("../TreeViewProvider");
 var _expansion = require("../plugins/expansion");
+var _lazyLoading = require("../plugins/lazyLoading");
+var _RichTreeViewLoading = require("./RichTreeViewLoading");
 var _useTreeViewRootProps = require("../hooks/useTreeViewRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
@@ -26,6 +28,54 @@ const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const selectorNoChildren = () => _empty.EMPTY_ARRAY;
 const selectorChildrenIdsNull = state => _items.itemsSelectors.itemOrderedChildrenIds(state, null);
+
+/**
+ * Renders the loading rows for the children of an item that lazily loads them.
+ * It only mounts while the item is loading, so the `loading` slot props are not
+ * resolved for the other items.
+ */
+function RichTreeViewItemLoadingChildren({
+  itemId
+}) {
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const {
+    classes,
+    slots: styleSlots,
+    slotProps: styleSlotProps
+  } = (0, _TreeViewProvider.useTreeViewStyleContext)();
+  const itemDepth = (0, _store.useStore)(store, _items.itemsSelectors.itemDepth, itemId);
+  const loadingChildrenCount = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.itemLoadingChildrenCount, itemId);
+  const Loading = styleSlots.loading;
+  const loadingProps = (0, _useSlotProps2.default)({
+    elementType: Loading ?? 'div',
+    externalSlotProps: styleSlotProps.loading,
+    ownerState: {
+      itemId
+    }
+  });
+
+  // The count reported by `getChildrenCount()` wins over `slotProps.loading.itemsCount`,
+  // which only acts as a fallback when the count is unknown.
+  const itemsCount = loadingChildrenCount > 0 ? Math.min(loadingChildrenCount, _RichTreeViewLoading.MAX_LOADING_ITEMS_COUNT) : (0, _RichTreeViewLoading.getLoadingItemsCount)(loadingProps.itemsCount);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewLoading.RichTreeViewLoadingContext, {
+    store: store,
+    itemDepth: itemDepth + 1,
+    children: Loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, (0, _extends2.default)({}, loadingProps, {
+      itemsCount: itemsCount
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewLoading.RichTreeViewItemLoaders, {
+      classes: classes,
+      slots: {
+        itemLoader: styleSlots.itemLoader
+      },
+      slotProps: {
+        itemLoader: styleSlotProps.itemLoader
+      },
+      itemsCount: itemsCount
+    })
+  });
+}
 const RichTreeViewItem = exports.RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
   itemSlot,
   itemSlotProps,
@@ -38,6 +88,7 @@ const RichTreeViewItem = exports.RichTreeViewItem = /*#__PURE__*/React.memo(func
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const itemMeta = (0, _store.useStore)(store, _items.itemsSelectors.itemMeta, itemId);
   const children = (0, _store.useStore)(store, skipChildren ? selectorNoChildren : _items.itemsSelectors.itemOrderedChildrenIds, itemId);
+  const isLoadingChildren = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.isItemLoading, itemId);
   const Item = itemSlot ?? _TreeItem.TreeItem;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Item,
@@ -53,8 +104,14 @@ const RichTreeViewItem = exports.RichTreeViewItem = /*#__PURE__*/React.memo(func
       }
     }),
     itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  let renderedChildren = renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null;
+  if (isLoadingChildren && !skipChildren && (children == null || children.length === 0)) {
+    renderedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoadingChildren, {
+      itemId: itemId
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null
+    children: renderedChildren
   }));
 }, _fastObjectShallowCompare.fastObjectShallowCompare);
 if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";

package/internals/components/RichTreeViewItems.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["ownerState"];
 import * as React from 'react';
 import { EMPTY_ARRAY } from '@base-ui/utils/empty';
@@ -12,12 +12,62 @@ import { TreeItem } from "../../TreeItem/index.mjs";
 import { itemsSelectors } from "../plugins/items/index.mjs";
 import { useTreeViewContext, useTreeViewStyleContext } from "../TreeViewProvider/index.mjs";
 import { expansionSelectors } from "../plugins/expansion/index.mjs";
+import { lazyLoadingSelectors } from "../plugins/lazyLoading/index.mjs";
+import { RichTreeViewItemLoaders, RichTreeViewLoadingContext, getLoadingItemsCount, MAX_LOADING_ITEMS_COUNT } from "./RichTreeViewLoading.mjs";
 import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const selectorNoChildren = () => EMPTY_ARRAY;
 const selectorChildrenIdsNull = state => itemsSelectors.itemOrderedChildrenIds(state, null);
+
+/**
+ * Renders the loading rows for the children of an item that lazily loads them.
+ * It only mounts while the item is loading, so the `loading` slot props are not
+ * resolved for the other items.
+ */
+function RichTreeViewItemLoadingChildren({
+  itemId
+}) {
+  const {
+    store
+  } = useTreeViewContext();
+  const {
+    classes,
+    slots: styleSlots,
+    slotProps: styleSlotProps
+  } = useTreeViewStyleContext();
+  const itemDepth = useStore(store, itemsSelectors.itemDepth, itemId);
+  const loadingChildrenCount = useStore(store, lazyLoadingSelectors.itemLoadingChildrenCount, itemId);
+  const Loading = styleSlots.loading;
+  const loadingProps = useSlotProps({
+    elementType: Loading ?? 'div',
+    externalSlotProps: styleSlotProps.loading,
+    ownerState: {
+      itemId
+    }
+  });
+
+  // The count reported by `getChildrenCount()` wins over `slotProps.loading.itemsCount`,
+  // which only acts as a fallback when the count is unknown.
+  const itemsCount = loadingChildrenCount > 0 ? Math.min(loadingChildrenCount, MAX_LOADING_ITEMS_COUNT) : getLoadingItemsCount(loadingProps.itemsCount);
+  return /*#__PURE__*/_jsx(RichTreeViewLoadingContext, {
+    store: store,
+    itemDepth: itemDepth + 1,
+    children: Loading ? /*#__PURE__*/_jsx(Loading, _extends({}, loadingProps, {
+      itemsCount: itemsCount
+    })) : /*#__PURE__*/_jsx(RichTreeViewItemLoaders, {
+      classes: classes,
+      slots: {
+        itemLoader: styleSlots.itemLoader
+      },
+      slotProps: {
+        itemLoader: styleSlotProps.itemLoader
+      },
+      itemsCount: itemsCount
+    })
+  });
+}
 export const RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
   itemSlot,
   itemSlotProps,
@@ -30,6 +80,7 @@ export const RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewIte
   } = useTreeViewContext();
   const itemMeta = useStore(store, itemsSelectors.itemMeta, itemId);
   const children = useStore(store, skipChildren ? selectorNoChildren : itemsSelectors.itemOrderedChildrenIds, itemId);
+  const isLoadingChildren = useStore(store, lazyLoadingSelectors.isItemLoading, itemId);
   const Item = itemSlot ?? TreeItem;
   const _useSlotProps = useSlotProps({
       elementType: Item,
@@ -45,8 +96,14 @@ export const RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewIte
       }
     }),
     itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  let renderedChildren = renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null;
+  if (isLoadingChildren && !skipChildren && (children == null || children.length === 0)) {
+    renderedChildren = /*#__PURE__*/_jsx(RichTreeViewItemLoadingChildren, {
+      itemId: itemId
+    });
+  }
   return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null
+    children: renderedChildren
   }));
 }, fastObjectShallowCompare);
 if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";