@mui/x-tree-view 9.11.0 → 9.13.0

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";

package/internals/components/RichTreeViewLoading.d.mts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { SlotComponentProps } from '@mui/utils/types';
+import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.mjs";
+import type { TreeViewAnyStore } from "../models/index.mjs";
+import type { TreeViewItemId } from "../../models/index.mjs";
+import type { TreeViewStoreInContext } from "../TreeViewProvider/index.mjs";
+export declare const DEFAULT_LOADING_ITEMS_COUNT = 5;
+export declare const MAX_LOADING_ITEMS_COUNT = 100;
+export declare function getLoadingItemsCount(itemsCount: number | undefined): number;
+export interface RichTreeViewLoadingSlots {
+  /**
+   * Element rendered at the root.
+   */
+  root: React.ElementType;
+  /**
+   * Component rendered instead of the default loading rows.
+   * It renders inside the tree root while the tree is loading and inside a
+   * lazily loading item while its children load.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row.
+   * @default TreeItemLoader
+   */
+  itemLoader?: React.ElementType;
+}
+export interface RichTreeViewLoadingSlotOwnProps {
+  /**
+   * The number of loading rows to render.
+   * The children of a lazily loading item use `getChildrenCount()` as the default instead.
+   * @default 5
+   */
+  itemsCount?: number;
+  /**
+   * A message describing the loading state.
+   * The default loading rows do not render it.
+   * It is forwarded to a custom `loading` slot component.
+   */
+  message?: React.ReactNode;
+}
+/**
+ * The owner state of the `loading` slot.
+ */
+export interface RichTreeViewLoadingSlotOwnerState {
+  /**
+   * The id of the item whose children are loading.
+   * `null` while the whole tree is loading.
+   */
+  itemId: TreeViewItemId | null;
+}
+export interface RichTreeViewLoadingSlotProps<TOwnerState extends object> {
+  root?: SlotComponentProps<'ul', {}, TOwnerState>;
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
+}
+export interface RichTreeViewLoadingClasses {
+  root?: string;
+  itemLoader?: string;
+}
+export interface RichTreeViewLoadingProps<TStore extends TreeViewAnyStore, TOwnerState extends object> {
+  store: TreeViewStoreInContext<TStore>;
+  slots: RichTreeViewLoadingSlots;
+  slotProps?: RichTreeViewLoadingSlotProps<TOwnerState>;
+  ownerState: TOwnerState;
+  forwardedProps: React.HTMLAttributes<HTMLUListElement>;
+  rootRef: React.Ref<HTMLUListElement>;
+  classes: RichTreeViewLoadingClasses;
+}
+export interface RichTreeViewItemLoadersProps {
+  classes: Pick<RichTreeViewLoadingClasses, 'itemLoader'>;
+  slots: Pick<RichTreeViewLoadingSlots, 'itemLoader'>;
+  slotProps?: Pick<RichTreeViewLoadingSlotProps<object>, 'itemLoader'>;
+  itemsCount: number;
+}
+/**
+ * Renders the default loading rows without any wrapper.
+ * Used by `RichTreeViewLoading` for the whole-tree loading state and by
+ * `RichTreeViewItem` for the children of an item that lazily loads them.
+ * It must render inside a `TreeItemLoaderContext` provider.
+ */
+export declare function RichTreeViewItemLoaders(props: RichTreeViewItemLoadersProps): React.JSX.Element;
+/**
+ * Provides the layout information the loading rows need to `TreeItemLoader`.
+ * Wraps both the default rows and a custom `loading` slot, so custom loading
+ * UIs composed with `TreeItemLoader` keep the correct depth and height.
+ */
+export declare function RichTreeViewLoadingContext<TStore extends TreeViewAnyStore>(props: {
+  store: TreeViewStoreInContext<TStore>;
+  itemDepth?: number;
+  children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
+ * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
+ * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
+ */
+export declare function RichTreeViewLoading<TStore extends TreeViewAnyStore, TOwnerState extends object>(props: RichTreeViewLoadingProps<TStore, TOwnerState>): React.JSX.Element;

package/internals/components/RichTreeViewLoading.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { SlotComponentProps } from '@mui/utils/types';
+import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.js";
+import type { TreeViewAnyStore } from "../models/index.js";
+import type { TreeViewItemId } from "../../models/index.js";
+import type { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
+export declare const DEFAULT_LOADING_ITEMS_COUNT = 5;
+export declare const MAX_LOADING_ITEMS_COUNT = 100;
+export declare function getLoadingItemsCount(itemsCount: number | undefined): number;
+export interface RichTreeViewLoadingSlots {
+  /**
+   * Element rendered at the root.
+   */
+  root: React.ElementType;
+  /**
+   * Component rendered instead of the default loading rows.
+   * It renders inside the tree root while the tree is loading and inside a
+   * lazily loading item while its children load.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row.
+   * @default TreeItemLoader
+   */
+  itemLoader?: React.ElementType;
+}
+export interface RichTreeViewLoadingSlotOwnProps {
+  /**
+   * The number of loading rows to render.
+   * The children of a lazily loading item use `getChildrenCount()` as the default instead.
+   * @default 5
+   */
+  itemsCount?: number;
+  /**
+   * A message describing the loading state.
+   * The default loading rows do not render it.
+   * It is forwarded to a custom `loading` slot component.
+   */
+  message?: React.ReactNode;
+}
+/**
+ * The owner state of the `loading` slot.
+ */
+export interface RichTreeViewLoadingSlotOwnerState {
+  /**
+   * The id of the item whose children are loading.
+   * `null` while the whole tree is loading.
+   */
+  itemId: TreeViewItemId | null;
+}
+export interface RichTreeViewLoadingSlotProps<TOwnerState extends object> {
+  root?: SlotComponentProps<'ul', {}, TOwnerState>;
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
+}
+export interface RichTreeViewLoadingClasses {
+  root?: string;
+  itemLoader?: string;
+}
+export interface RichTreeViewLoadingProps<TStore extends TreeViewAnyStore, TOwnerState extends object> {
+  store: TreeViewStoreInContext<TStore>;
+  slots: RichTreeViewLoadingSlots;
+  slotProps?: RichTreeViewLoadingSlotProps<TOwnerState>;
+  ownerState: TOwnerState;
+  forwardedProps: React.HTMLAttributes<HTMLUListElement>;
+  rootRef: React.Ref<HTMLUListElement>;
+  classes: RichTreeViewLoadingClasses;
+}
+export interface RichTreeViewItemLoadersProps {
+  classes: Pick<RichTreeViewLoadingClasses, 'itemLoader'>;
+  slots: Pick<RichTreeViewLoadingSlots, 'itemLoader'>;
+  slotProps?: Pick<RichTreeViewLoadingSlotProps<object>, 'itemLoader'>;
+  itemsCount: number;
+}
+/**
+ * Renders the default loading rows without any wrapper.
+ * Used by `RichTreeViewLoading` for the whole-tree loading state and by
+ * `RichTreeViewItem` for the children of an item that lazily loads them.
+ * It must render inside a `TreeItemLoaderContext` provider.
+ */
+export declare function RichTreeViewItemLoaders(props: RichTreeViewItemLoadersProps): React.JSX.Element;
+/**
+ * Provides the layout information the loading rows need to `TreeItemLoader`.
+ * Wraps both the default rows and a custom `loading` slot, so custom loading
+ * UIs composed with `TreeItemLoader` keep the correct depth and height.
+ */
+export declare function RichTreeViewLoadingContext<TStore extends TreeViewAnyStore>(props: {
+  store: TreeViewStoreInContext<TStore>;
+  itemDepth?: number;
+  children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
+ * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
+ * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
+ */
+export declare function RichTreeViewLoading<TStore extends TreeViewAnyStore, TOwnerState extends object>(props: RichTreeViewLoadingProps<TStore, TOwnerState>): React.JSX.Element;

package/internals/components/RichTreeViewLoading.js

@@ -0,0 +1,171 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MAX_LOADING_ITEMS_COUNT = exports.DEFAULT_LOADING_ITEMS_COUNT = void 0;
+exports.RichTreeViewItemLoaders = RichTreeViewItemLoaders;
+exports.RichTreeViewLoading = RichTreeViewLoading;
+exports.RichTreeViewLoadingContext = RichTreeViewLoadingContext;
+exports.getLoadingItemsCount = getLoadingItemsCount;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _store = require("@mui/x-internals/store");
+var _warning = require("@mui/x-internals/warning");
+var _TreeItemLoader = require("../../TreeItemLoader");
+var _TreeItemLoaderContext = require("../../TreeItemLoader/TreeItemLoaderContext");
+var _useTreeViewRootProps = require("../hooks/useTreeViewRootProps");
+var _items = require("../plugins/items");
+var _selection = require("../plugins/selection");
+var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_LOADING_ITEMS_COUNT = exports.DEFAULT_LOADING_ITEMS_COUNT = 5;
+const MAX_LOADING_ITEMS_COUNT = exports.MAX_LOADING_ITEMS_COUNT = 100;
+function getLoadingItemsCount(itemsCount) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (itemsCount != null && (!Number.isFinite(itemsCount) || itemsCount < 0)) {
+      (0, _warning.warnOnce)([`MUI X: The \`itemsCount\` value in \`slotProps.loading\` received an invalid value (${itemsCount}).`, 'It must be a non-negative finite number.']);
+    }
+  }
+  const rawCount = itemsCount ?? DEFAULT_LOADING_ITEMS_COUNT;
+  return Number.isFinite(rawCount) ? Math.max(1, Math.min(MAX_LOADING_ITEMS_COUNT, Math.floor(rawCount))) : DEFAULT_LOADING_ITEMS_COUNT;
+}
+
+/**
+ * The owner state of the `loading` slot.
+ */
+
+function RichTreeViewItemLoaderRow(props) {
+  const {
+    classes,
+    slots,
+    slotProps,
+    ownerState
+  } = props;
+  const ItemLoader = slots.itemLoader ?? _TreeItemLoader.TreeItemLoader;
+  const itemLoaderProps = (0, _useSlotProps.default)({
+    elementType: ItemLoader,
+    externalSlotProps: slotProps?.itemLoader,
+    className: classes.itemLoader,
+    additionalProps: {
+      role: 'treeitem',
+      'aria-disabled': true
+    },
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLoader, (0, _extends2.default)({}, itemLoaderProps));
+}
+
+/**
+ * Renders the default loading rows without any wrapper.
+ * Used by `RichTreeViewLoading` for the whole-tree loading state and by
+ * `RichTreeViewItem` for the children of an item that lazily loads them.
+ * It must render inside a `TreeItemLoaderContext` provider.
+ */
+function RichTreeViewItemLoaders(props) {
+  const {
+    classes,
+    slots,
+    slotProps,
+    itemsCount
+  } = props;
+  const {
+    itemDepth,
+    isCheckboxSelectionEnabled
+  } = React.useContext(_TreeItemLoaderContext.TreeItemLoaderContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: Array.from({
+      length: itemsCount
+    }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoaderRow, {
+      classes: classes,
+      slots: slots,
+      slotProps: slotProps,
+      ownerState: {
+        index,
+        itemsCount,
+        itemDepth,
+        isCheckboxSelectionEnabled
+      }
+    }, index))
+  });
+}
+
+/**
+ * Provides the layout information the loading rows need to `TreeItemLoader`.
+ * Wraps both the default rows and a custom `loading` slot, so custom loading
+ * UIs composed with `TreeItemLoader` keep the correct depth and height.
+ */
+function RichTreeViewLoadingContext(props) {
+  const {
+    store,
+    itemDepth = 0,
+    children
+  } = props;
+  const itemHeight = (0, _store.useStore)(store, _items.itemsSelectors.itemHeight);
+  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selection.selectionSelectors.isCheckboxSelectionEnabled);
+  const contextValue = React.useMemo(() => ({
+    itemDepth,
+    itemHeight,
+    isCheckboxSelectionEnabled
+  }), [itemDepth, itemHeight, isCheckboxSelectionEnabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemLoaderContext.TreeItemLoaderContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+/**
+ * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
+ * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
+ * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
+ */
+function RichTreeViewLoading(props) {
+  const {
+    store,
+    slots,
+    slotProps,
+    ownerState,
+    forwardedProps,
+    rootRef,
+    classes
+  } = props;
+  const getRootProps = (0, _useTreeViewRootProps.useTreeViewRootProps)(store, forwardedProps, rootRef);
+  const Root = slots.root;
+  const Loading = slots.loading;
+  const loadingProps = (0, _useSlotProps.default)({
+    elementType: Loading ?? 'div',
+    externalSlotProps: slotProps?.loading,
+    ownerState: {
+      itemId: null
+    }
+  });
+  const itemsCount = getLoadingItemsCount(loadingProps.itemsCount);
+  const rootProps = (0, _useSlotProps.default)({
+    elementType: Root,
+    externalSlotProps: slotProps?.root,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    additionalProps: (0, _extends2.default)({
+      'aria-busy': true
+    }, forwardedProps['aria-label'] == null && forwardedProps['aria-labelledby'] == null ? {
+      'aria-label': 'Loading'
+    } : {}),
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewLoadingContext, {
+      store: store,
+      children: Loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, (0, _extends2.default)({}, loadingProps, {
+        itemsCount: itemsCount
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoaders, {
+        classes: classes,
+        slots: slots,
+        slotProps: slotProps,
+        itemsCount: itemsCount
+      })
+    })
+  }));
+}

package/internals/components/RichTreeViewLoading.mjs

@@ -0,0 +1,160 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useStore } from '@mui/x-internals/store';
+import { warnOnce } from '@mui/x-internals/warning';
+import { TreeItemLoader } from "../../TreeItemLoader/index.mjs";
+import { TreeItemLoaderContext } from "../../TreeItemLoader/TreeItemLoaderContext.mjs";
+import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.mjs";
+import { itemsSelectors } from "../plugins/items/index.mjs";
+import { selectionSelectors } from "../plugins/selection/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_LOADING_ITEMS_COUNT = 5;
+export const MAX_LOADING_ITEMS_COUNT = 100;
+export function getLoadingItemsCount(itemsCount) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (itemsCount != null && (!Number.isFinite(itemsCount) || itemsCount < 0)) {
+      warnOnce([`MUI X: The \`itemsCount\` value in \`slotProps.loading\` received an invalid value (${itemsCount}).`, 'It must be a non-negative finite number.']);
+    }
+  }
+  const rawCount = itemsCount ?? DEFAULT_LOADING_ITEMS_COUNT;
+  return Number.isFinite(rawCount) ? Math.max(1, Math.min(MAX_LOADING_ITEMS_COUNT, Math.floor(rawCount))) : DEFAULT_LOADING_ITEMS_COUNT;
+}
+
+/**
+ * The owner state of the `loading` slot.
+ */
+
+function RichTreeViewItemLoaderRow(props) {
+  const {
+    classes,
+    slots,
+    slotProps,
+    ownerState
+  } = props;
+  const ItemLoader = slots.itemLoader ?? TreeItemLoader;
+  const itemLoaderProps = useSlotProps({
+    elementType: ItemLoader,
+    externalSlotProps: slotProps?.itemLoader,
+    className: classes.itemLoader,
+    additionalProps: {
+      role: 'treeitem',
+      'aria-disabled': true
+    },
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(ItemLoader, _extends({}, itemLoaderProps));
+}
+
+/**
+ * Renders the default loading rows without any wrapper.
+ * Used by `RichTreeViewLoading` for the whole-tree loading state and by
+ * `RichTreeViewItem` for the children of an item that lazily loads them.
+ * It must render inside a `TreeItemLoaderContext` provider.
+ */
+export function RichTreeViewItemLoaders(props) {
+  const {
+    classes,
+    slots,
+    slotProps,
+    itemsCount
+  } = props;
+  const {
+    itemDepth,
+    isCheckboxSelectionEnabled
+  } = React.useContext(TreeItemLoaderContext);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: Array.from({
+      length: itemsCount
+    }, (_, index) => /*#__PURE__*/_jsx(RichTreeViewItemLoaderRow, {
+      classes: classes,
+      slots: slots,
+      slotProps: slotProps,
+      ownerState: {
+        index,
+        itemsCount,
+        itemDepth,
+        isCheckboxSelectionEnabled
+      }
+    }, index))
+  });
+}
+
+/**
+ * Provides the layout information the loading rows need to `TreeItemLoader`.
+ * Wraps both the default rows and a custom `loading` slot, so custom loading
+ * UIs composed with `TreeItemLoader` keep the correct depth and height.
+ */
+export function RichTreeViewLoadingContext(props) {
+  const {
+    store,
+    itemDepth = 0,
+    children
+  } = props;
+  const itemHeight = useStore(store, itemsSelectors.itemHeight);
+  const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
+  const contextValue = React.useMemo(() => ({
+    itemDepth,
+    itemHeight,
+    isCheckboxSelectionEnabled
+  }), [itemDepth, itemHeight, isCheckboxSelectionEnabled]);
+  return /*#__PURE__*/_jsx(TreeItemLoaderContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+/**
+ * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
+ * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
+ * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
+ */
+export function RichTreeViewLoading(props) {
+  const {
+    store,
+    slots,
+    slotProps,
+    ownerState,
+    forwardedProps,
+    rootRef,
+    classes
+  } = props;
+  const getRootProps = useTreeViewRootProps(store, forwardedProps, rootRef);
+  const Root = slots.root;
+  const Loading = slots.loading;
+  const loadingProps = useSlotProps({
+    elementType: Loading ?? 'div',
+    externalSlotProps: slotProps?.loading,
+    ownerState: {
+      itemId: null
+    }
+  });
+  const itemsCount = getLoadingItemsCount(loadingProps.itemsCount);
+  const rootProps = useSlotProps({
+    elementType: Root,
+    externalSlotProps: slotProps?.root,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    additionalProps: _extends({
+      'aria-busy': true
+    }, forwardedProps['aria-label'] == null && forwardedProps['aria-labelledby'] == null ? {
+      'aria-label': 'Loading'
+    } : {}),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
+    children: /*#__PURE__*/_jsx(RichTreeViewLoadingContext, {
+      store: store,
+      children: Loading ? /*#__PURE__*/_jsx(Loading, _extends({}, loadingProps, {
+        itemsCount: itemsCount
+      })) : /*#__PURE__*/_jsx(RichTreeViewItemLoaders, {
+        classes: classes,
+        slots: slots,
+        slotProps: slotProps,
+        itemsCount: itemsCount
+      })
+    })
+  }));
+}

package/internals/constants.d.mts

@@ -0,0 +1,6 @@
+/**
+ * Width of the icon container rendered at the start of each tree item content, in px.
+ * The item loader rows render a gutter with the same width to keep the label placeholders
+ * aligned with the tree item labels.
+ */
+export declare const TREE_ITEM_ICON_CONTAINER_WIDTH_PX = 16;

package/internals/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Width of the icon container rendered at the start of each tree item content, in px.
+ * The item loader rows render a gutter with the same width to keep the label placeholders
+ * aligned with the tree item labels.
+ */
+export declare const TREE_ITEM_ICON_CONTAINER_WIDTH_PX = 16;

package/internals/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TREE_ITEM_ICON_CONTAINER_WIDTH_PX = void 0;
+/**
+ * Width of the icon container rendered at the start of each tree item content, in px.
+ * The item loader rows render a gutter with the same width to keep the label placeholders
+ * aligned with the tree item labels.
+ */
+const TREE_ITEM_ICON_CONTAINER_WIDTH_PX = exports.TREE_ITEM_ICON_CONTAINER_WIDTH_PX = 16;

package/internals/constants.mjs

@@ -0,0 +1,6 @@
+/**
+ * Width of the icon container rendered at the start of each tree item content, in px.
+ * The item loader rows render a gutter with the same width to keep the label placeholders
+ * aligned with the tree item labels.
+ */
+export const TREE_ITEM_ICON_CONTAINER_WIDTH_PX = 16;

package/internals/hooks/useTreeViewStore.d.mts

@@ -2,7 +2,7 @@ import type { TreeViewAnyStore } from "../models/index.mjs";
 interface ValidTreeViewStoreConstructor<TStore extends TreeViewAnyStore> {
   new (parameters: TStore['parameters']): TStore;
 }
-export type UseTreeViewStoreParameters<TStore extends TreeViewAnyStore> = Omit<Parameters<TStore['updateStateFromParameters']>[0], 'isRtl'>;
+export type UseTreeViewStoreParameters<TStore extends TreeViewAnyStore> = Omit<Parameters<TStore['updateStateFromParameters']>[0], 'isRtl' | 'defaultId'>;
 /**
  * Creates a Tree View store and keep it in sync with the provided parameters.
  */

package/internals/hooks/useTreeViewStore.d.ts

@@ -2,7 +2,7 @@ import type { TreeViewAnyStore } from "../models/index.js";
 interface ValidTreeViewStoreConstructor<TStore extends TreeViewAnyStore> {
   new (parameters: TStore['parameters']): TStore;
 }
-export type UseTreeViewStoreParameters<TStore extends TreeViewAnyStore> = Omit<Parameters<TStore['updateStateFromParameters']>[0], 'isRtl'>;
+export type UseTreeViewStoreParameters<TStore extends TreeViewAnyStore> = Omit<Parameters<TStore['updateStateFromParameters']>[0], 'isRtl' | 'defaultId'>;
 /**
  * Creates a Tree View store and keep it in sync with the provided parameters.
  */