@mui/x-tree-view 9.12.0 → 9.13.0

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.
  */

package/internals/hooks/useTreeViewStore.js

@@ -11,17 +11,21 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnMount = require("@base-ui/utils/useOnMount");
 var _useDisposable = require("@mui/x-internals/useDisposable");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 /**
  * Creates a Tree View store and keep it in sync with the provided parameters.
  */
 function useTreeViewStore(StoreClass, parameters) {
   const isRtl = (0, _RtlProvider.useRtl)();
+  const defaultId = (0, _useId.default)();
   const store = (0, _useDisposable.useDisposable)(() => new StoreClass((0, _extends2.default)({}, parameters, {
-    isRtl
+    isRtl,
+    defaultId
   })));
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => store.updateStateFromParameters((0, _extends2.default)({}, parameters, {
-    isRtl
-  })), [store, isRtl, parameters]);
+    isRtl,
+    defaultId
+  })), [store, isRtl, defaultId, parameters]);
 
   // Mount-time side effects (e.g. kicking off lazy-loading fetches). The store is
   // created during render by `useDisposable`, so these can't run in the factory.

package/internals/hooks/useTreeViewStore.mjs

@@ -5,17 +5,21 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnMount } from '@base-ui/utils/useOnMount';
 import { useDisposable } from '@mui/x-internals/useDisposable';
 import { useRtl } from '@mui/system/RtlProvider';
+import useId from '@mui/utils/useId';
 /**
  * Creates a Tree View store and keep it in sync with the provided parameters.
  */
 export function useTreeViewStore(StoreClass, parameters) {
   const isRtl = useRtl();
+  const defaultId = useId();
   const store = useDisposable(() => new StoreClass(_extends({}, parameters, {
-    isRtl
+    isRtl,
+    defaultId
   })));
   useIsoLayoutEffect(() => store.updateStateFromParameters(_extends({}, parameters, {
-    isRtl
-  })), [store, isRtl, parameters]);
+    isRtl,
+    defaultId
+  })), [store, isRtl, defaultId, parameters]);
 
   // Mount-time side effects (e.g. kicking off lazy-loading fetches). The store is
   // created during render by `useDisposable`, so these can't run in the factory.

package/internals/index.d.mts

@@ -1,6 +1,8 @@
 export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.mjs";
 export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.mjs";
 export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.mjs";
+export { RichTreeViewLoading, getLoadingItemsCount } from "./components/RichTreeViewLoading.mjs";
+export type { RichTreeViewLoadingProps, RichTreeViewLoadingSlots, RichTreeViewLoadingSlotProps, RichTreeViewLoadingClasses, RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "./components/RichTreeViewLoading.mjs";
 export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.mjs";
 export { useTreeViewStore } from "./hooks/useTreeViewStore.mjs";
 export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.mjs";

package/internals/index.d.ts

@@ -1,6 +1,8 @@
 export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
+export { RichTreeViewLoading, getLoadingItemsCount } from "./components/RichTreeViewLoading.js";
+export type { RichTreeViewLoadingProps, RichTreeViewLoadingSlots, RichTreeViewLoadingSlotProps, RichTreeViewLoadingClasses, RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "./components/RichTreeViewLoading.js";
 export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
 export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
 export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.js";