@mui/x-tree-view 9.11.0 → 9.13.0

package/TreeItemLoader/index.d.mts

@@ -0,0 +1,3 @@
+export { TreeItemLoader, TreeItemLoaderRoot } from "./TreeItemLoader.mjs";
+export type { TreeItemLoaderProps, TreeItemLoaderOwnerState } from "./TreeItemLoader.types.mjs";
+export * from "./treeItemLoaderClasses.mjs";

package/TreeItemLoader/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeItemLoader, TreeItemLoaderRoot } from "./TreeItemLoader.js";
+export type { TreeItemLoaderProps, TreeItemLoaderOwnerState } from "./TreeItemLoader.types.js";
+export * from "./treeItemLoaderClasses.js";

package/TreeItemLoader/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  TreeItemLoader: true,
+  TreeItemLoaderRoot: true
+};
+Object.defineProperty(exports, "TreeItemLoader", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemLoader.TreeItemLoader;
+  }
+});
+Object.defineProperty(exports, "TreeItemLoaderRoot", {
+  enumerable: true,
+  get: function () {
+    return _TreeItemLoader.TreeItemLoaderRoot;
+  }
+});
+var _TreeItemLoader = require("./TreeItemLoader");
+var _treeItemLoaderClasses = require("./treeItemLoaderClasses");
+Object.keys(_treeItemLoaderClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _treeItemLoaderClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _treeItemLoaderClasses[key];
+    }
+  });
+});

package/TreeItemLoader/index.mjs

@@ -0,0 +1,2 @@
+export { TreeItemLoader, TreeItemLoaderRoot } from "./TreeItemLoader.mjs";
+export * from "./treeItemLoaderClasses.mjs";

package/TreeItemLoader/treeItemLoaderClasses.d.mts

@@ -0,0 +1,13 @@
+export interface TreeItemLoaderClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the icon gutter element of the default content. */
+  iconContainer: string;
+  /** Styles applied to the checkbox placeholder element of the default content. */
+  checkbox: string;
+  /** Styles applied to the label placeholder element of the default content. */
+  label: string;
+}
+export type TreeItemLoaderClassKey = keyof TreeItemLoaderClasses;
+export declare function getTreeItemLoaderUtilityClass(slot: string): string;
+export declare const treeItemLoaderClasses: TreeItemLoaderClasses;

package/TreeItemLoader/treeItemLoaderClasses.d.ts

@@ -0,0 +1,13 @@
+export interface TreeItemLoaderClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the icon gutter element of the default content. */
+  iconContainer: string;
+  /** Styles applied to the checkbox placeholder element of the default content. */
+  checkbox: string;
+  /** Styles applied to the label placeholder element of the default content. */
+  label: string;
+}
+export type TreeItemLoaderClassKey = keyof TreeItemLoaderClasses;
+export declare function getTreeItemLoaderUtilityClass(slot: string): string;
+export declare const treeItemLoaderClasses: TreeItemLoaderClasses;

package/TreeItemLoader/treeItemLoaderClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTreeItemLoaderUtilityClass = getTreeItemLoaderUtilityClass;
+exports.treeItemLoaderClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getTreeItemLoaderUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiTreeItemLoader', slot);
+}
+const treeItemLoaderClasses = exports.treeItemLoaderClasses = (0, _generateUtilityClasses.default)('MuiTreeItemLoader', ['root', 'iconContainer', 'checkbox', 'label']);

package/TreeItemLoader/treeItemLoaderClasses.mjs

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getTreeItemLoaderUtilityClass(slot) {
+  return generateUtilityClass('MuiTreeItemLoader', slot);
+}
+export const treeItemLoaderClasses = generateUtilityClasses('MuiTreeItemLoader', ['root', 'iconContainer', 'checkbox', 'label']);

package/index.d.mts

@@ -6,6 +6,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/index.d.ts

@@ -6,6 +6,7 @@ export * from "./TreeItemIcon/index.js";
 export * from "./TreeItemProvider/index.js";
 export * from "./TreeItemDragAndDropOverlay/index.js";
 export * from "./TreeItemLabelInput/index.js";
+export * from "./TreeItemLoader/index.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";
 export * from "./hooks/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v9.11.0
+ * @mui/x-tree-view v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -98,6 +98,17 @@ Object.keys(_TreeItemLabelInput).forEach(function (key) {
     }
   });
 });
+var _TreeItemLoader = require("./TreeItemLoader");
+Object.keys(_TreeItemLoader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeItemLoader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItemLoader[key];
+    }
+  });
+});
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v9.11.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";