@mui/x-tree-view 9.12.0 → 9.13.0

package/CHANGELOG.md

@@ -1,5 +1,157 @@
 # Changelog
 
+## 9.13.0
+
+<!-- generated comparing v9.12.0..master -->
+
+_Sep 4, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦮 Improve keyboard navigation features of the Charts.
+- 🎨 Improved customization of the edit event dialog in the `EventCalendar`
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @jvskriubakken, @mustafajw07, @roychan1
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.13.0`
+
+- [DataGrid] Call `onValueChange` after `setEditCellValue` in edit cells (#23417) @michelengelen
+- [DataGrid] Add support for replacing rows instead of merging updates (#23323) @jvskriubakken
+- [DataGrid] Always render `rowHeader` in virtualized setups (#23386) @silviuaavram
+- [DataGrid] Export `ToolbarRoot` (#23322) @JCQuintas
+- [DataGrid] Fix `rowsPerPage` selector appearing when `autoPageSize` is enabled and `pageSize` is one of `pageSizeOptions` (#23401) @roychan1
+- [DataGrid] Fix row tree reset when a data source grid becomes visible (#23288) @JCQuintas
+
+#### `@mui/x-data-grid-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.13.0`, plus:
+
+- [DataGridPro] Remove rows deleted server-side on nested lazy loading revalidation (#23320) @JCQuintas
+- [DataGridPro] Stop `disableDebounce` from reaching the DOM in multi select filter (#23445) @JCQuintas
+
+#### `@mui/x-data-grid-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.13.0`, plus:
+
+- [DataGridPremium] Refine cell selection and speed up clipboard copy (#23473) @michelengelen
+- [DataGridPremium] Select all cells with Ctrl+A (#23415) @michelengelen
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.13.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.13.0`
+
+- [charts] Activate the focused axis with Enter/Space (#23219) @JCQuintas
+- [charts] Add keyboard zoom and pan (#23369) @JCQuintas
+- [charts] Fix line mark position under browser zoom in Safari (#23387) @noraleonte
+- [charts] Fix y axis tick labels shortened near the top of the chart (#23435) @JCQuintas
+- [charts] Focus the clicked item on radar charts (#23287) @JCQuintas
+- [charts] Stop text measurements leaking into each other (#23430) @JCQuintas
+
+#### `@mui/x-charts-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.13.0`.
+
+#### `@mui/x-charts-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.13.0`
+
+- [tree view] Add `loading` prop and customizable loading UI (#22251) @michelengelen
+- [tree view] Reduce selector bundle size (#23412) @flaviendelangle
+- [tree view] Remove dead UI from community component (#23487) @noraleonte
+- [tree view] Remove unused dependencies (#23488) @noraleonte
+- [tree view] Use `useId` for the default tree id (#23341) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.13.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.11`
+
+- [scheduler] Absorb un-acted `ResizeObserver` deliveries after rendering the timeline (#23444) @rita-codes
+- [scheduler] Add `EventContextMenu` with Edit and Delete actions (#23379) @mustafajw07
+- [scheduler] Add aria-hidden to collapsed side panel and refactor landmark structure (#23425) @mustafajw07
+- [scheduler] Add the `eventDialogGeneralTab` slot (#23338) @rita-codes
+- [scheduler] Fix the un-awaited act warning in the event dialog slot test (#23446) @JCQuintas
+- [scheduler] Improve timeline event layout performance (#23364) @flaviendelangle
+- [scheduler] Keep `aria-expanded` present when ViewSwitcher and PreferencesMenu menus are closed (#23427) @mustafajw07
+- [scheduler] Make the event dialog General-tab building blocks public (#23398) @rita-codes
+- [scheduler] Migrate to the pragmatic-drag-and-drop v3 entry points (#23442) @rita-codes
+- [scheduler] Reduce selector bundle size (#23413) @flaviendelangle
+- [scheduler] Reuse processed events between updates (#23363) @flaviendelangle
+- [scheduler] Add `aria-expanded` and `aria-controls` to side panel toggle button (#23402) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.11`, plus:
+
+- [scheduler-premium] Dependencies - Keep event drags working over the arrow hit-areas (#23441) @rita-codes
+- [scheduler-premium] Dependencies - Reject dependencies that would create a cycle (#23389) @rita-codes
+- [scheduler-premium] Key recurring `exDates` on their data-timezone day (#23467) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.13.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add synchronized tooltip and crosshair demo to charts (#23368) @JCQuintas
+- [docs] Add sticky headers recipe to `RichTreeView` customization (#22908) @michelengelen
+- [docs] Pin the visible date of the scheduler preferences demos (#23432) @rita-codes
+- [docs] Star-prefix bare :where() dark-mode selectors (#23419) @Janpot
+- [docs] Consolidate demo data into shared dataset files (#23496) @michelengelen
+
+### Core
+
+- [code-infra] Consume shared commands from code-infra orb (#23485) @brijeshb42
+- [code-infra] Move the shared spy helpers off Sinon (#23466) @JCQuintas
+- [code-infra] Point the support validator link at frontend-public (#23422) @Janpot
+- [code-infra] Reduce per-page memory in the browser test suite (#23424) @Janpot
+- [code-infra] Remove Sinon (#23476) @JCQuintas
+- [code-infra] Remove the explicit `styled-components` dependency (#23479) @LukasTy
+- [code-infra] Replace the mechanical sinon `spy()` usages with `vi.fn()` (#23443) @JCQuintas
+- [code-infra] Replace the sinon `spy(fn)` usages with `vi.fn(fn)` (#23460) @JCQuintas
+- [code-infra] Replace the sinon spy types with the Vitest ones (#23464) @JCQuintas
+- [code-infra] Replace the sinon spy-on-object calls with `vi.spyOn` (#23474) @JCQuintas
+- [code-infra] Replace the sinon stubs with Vitest mocks (#23472) @JCQuintas
+- [code-infra] Run TypeScript 7 alongside the TS6 JS API (#23471) @brijeshb42
+- [code-infra] Trim the shared browser test setup graph (#23426) @LukasTy
+- [code-infra] Update CircleCI orb (#23418) @JCQuintas
+- [code-infra] Use explicit vitest imports in test files (#23375) @michelengelen
+
+### Miscellaneous
+
+- [chat] Enforce top-level type imports (#23037) @Janpot
+- [chat] Fix global preload error from the `remend` import (#23263) @hasdfa
+- [ci] Add Claude PR review via mui-public reusable workflow (#23423) @Janpot
+- [telemetry] Fix get-context test leaking mock from sender test (#23447) @JCQuintas
+- [test] Fail the regression run when a webfont does not load (#23376) @LukasTy
+
 ## 9.12.0
 
 _Aug 21, 2026_

package/RichTreeView/RichTreeView.js

@@ -11,16 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
-var _store = require("@mui/x-internals/store");
-var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _warning = require("@mui/x-internals/warning");
 var _richTreeViewClasses = require("./richTreeViewClasses");
 var _zeroStyled = require("../internals/zero-styled");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
-var _lazyLoading = require("../internals/plugins/lazyLoading");
+var _RichTreeViewLoading = require("../internals/components/RichTreeViewLoading");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _useExtractRichTreeViewParameters = require("./useExtractRichTreeViewParameters");
 var _items = require("../internals/plugins/items");
@@ -41,9 +38,10 @@ const useUtilityClasses = ownerState => {
       itemIconContainer: ['itemIconContainer'],
       itemLabel: ['itemLabel'],
       itemLabelInput: ['itemLabelInput'],
-      itemCheckbox: ['itemCheckbox']
+      itemCheckbox: ['itemCheckbox'],
       // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
       // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+      itemLoader: ['itemLoader']
     };
     return (0, _composeClasses.default)(slots, _richTreeViewClasses.getRichTreeViewUtilityClass, classes);
   }, [classes]);
@@ -83,7 +81,8 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     slotProps,
     apiRef,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   } = (0, _useExtractRichTreeViewParameters.useExtractRichTreeViewParameters)(props);
 
   // Context hooks
@@ -93,26 +92,33 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   const ref = React.useRef(null);
   const handleRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, ref);
 
-  // Selector hooks
-  const isLoading = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.isItemLoading, null);
-  const error = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.itemError, null);
-
   // Feature hooks
   const classes = useUtilityClasses(props);
   const slots = React.useMemo(() => (0, _extends2.default)({
     root: RichTreeViewRoot
   }, inSlots), [inSlots]);
-  if (isLoading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      children: "Loading\u2026"
+  let content;
+  if (loading) {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewLoading.RichTreeViewLoading, {
+      store: store,
+      slots: slots,
+      slotProps: slotProps,
+      ownerState: props,
+      forwardedProps: forwardedProps,
+      rootRef: handleRef,
+      classes: classes
     });
-  }
-  if (error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-      severity: "error",
-      children: error.message
+  } else {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
+      slots: slots,
+      slotProps: slotProps,
+      forwardedProps: forwardedProps,
+      ownerState: props,
+      rootRef: handleRef
     });
   }
+
+  // The provider must mount in the loading state too, so `apiRef` is initialized on mount.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     store: store,
     classes: classes,
@@ -122,13 +128,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     rootRef: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
       value: _items.itemsSelectors.itemDepth,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
-        slots: slots,
-        slotProps: slotProps,
-        forwardedProps: forwardedProps,
-        ownerState: props,
-        rootRef: handleRef
-      })
+      children: content
     })
   });
 });
@@ -275,6 +275,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes /* remove-proptyp
    */
   itemHeight: _propTypes.default.number,
   items: _propTypes.default.array.isRequired,
+  /**
+   * If `true`, a loading UI is displayed instead of the tree items.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
   /**
    * Whether multiple items can be selected.
    * @default false

package/RichTreeView/RichTreeView.mjs

@@ -4,16 +4,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { useStore } from '@mui/x-internals/store';
-import Alert from '@mui/material/Alert';
-import Typography from '@mui/material/Typography';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getRichTreeViewUtilityClass } from "./richTreeViewClasses.mjs";
 import { styled, createUseThemeProps } from "../internals/zero-styled/index.mjs";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.mjs";
 import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.mjs";
-import { lazyLoadingSelectors } from "../internals/plugins/lazyLoading/index.mjs";
+import { RichTreeViewLoading } from "../internals/components/RichTreeViewLoading.mjs";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.mjs";
 import { useExtractRichTreeViewParameters } from "./useExtractRichTreeViewParameters.mjs";
 import { itemsSelectors } from "../internals/plugins/items/index.mjs";
@@ -34,9 +31,10 @@ const useUtilityClasses = ownerState => {
       itemIconContainer: ['itemIconContainer'],
       itemLabel: ['itemLabel'],
       itemLabelInput: ['itemLabelInput'],
-      itemCheckbox: ['itemCheckbox']
+      itemCheckbox: ['itemCheckbox'],
       // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
       // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+      itemLoader: ['itemLoader']
     };
     return composeClasses(slots, getRichTreeViewUtilityClass, classes);
   }, [classes]);
@@ -76,7 +74,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     slotProps,
     apiRef,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   } = useExtractRichTreeViewParameters(props);
 
   // Context hooks
@@ -86,26 +85,33 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   const ref = React.useRef(null);
   const handleRef = useMergedRefs(forwardedRef, ref);
 
-  // Selector hooks
-  const isLoading = useStore(store, lazyLoadingSelectors.isItemLoading, null);
-  const error = useStore(store, lazyLoadingSelectors.itemError, null);
-
   // Feature hooks
   const classes = useUtilityClasses(props);
   const slots = React.useMemo(() => _extends({
     root: RichTreeViewRoot
   }, inSlots), [inSlots]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(Typography, {
-      children: "Loading\u2026"
+  let content;
+  if (loading) {
+    content = /*#__PURE__*/_jsx(RichTreeViewLoading, {
+      store: store,
+      slots: slots,
+      slotProps: slotProps,
+      ownerState: props,
+      forwardedProps: forwardedProps,
+      rootRef: handleRef,
+      classes: classes
     });
-  }
-  if (error) {
-    return /*#__PURE__*/_jsx(Alert, {
-      severity: "error",
-      children: error.message
+  } else {
+    content = /*#__PURE__*/_jsx(RichTreeViewItems, {
+      slots: slots,
+      slotProps: slotProps,
+      forwardedProps: forwardedProps,
+      ownerState: props,
+      rootRef: handleRef
     });
   }
+
+  // The provider must mount in the loading state too, so `apiRef` is initialized on mount.
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     store: store,
     classes: classes,
@@ -115,13 +121,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     rootRef: ref,
     children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
       value: itemsSelectors.itemDepth,
-      children: /*#__PURE__*/_jsx(RichTreeViewItems, {
-        slots: slots,
-        slotProps: slotProps,
-        forwardedProps: forwardedProps,
-        ownerState: props,
-        rootRef: handleRef
-      })
+      children: content
     })
   });
 });
@@ -268,6 +268,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes /* remove-proptyp
    */
   itemHeight: PropTypes.number,
   items: PropTypes.array.isRequired,
+  /**
+   * If `true`, a loading UI is displayed instead of the tree items.
+   * @default false
+   */
+  loading: PropTypes.bool,
   /**
    * Whether multiple items can be selected.
    * @default false

package/RichTreeView/RichTreeView.types.d.mts

@@ -1,8 +1,11 @@
 import type * as React from 'react';
 import type { Theme } from '@mui/material/styles';
 import type { SxProps } from '@mui/system/styleFunctionSx';
+import type { SlotComponentProps } from '@mui/utils/types';
 import type { RichTreeViewClasses } from "./richTreeViewClasses.mjs";
 import type { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.mjs";
+import type { RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "../internals/components/RichTreeViewLoading.mjs";
+import type { TreeItemLoaderOwnerState } from "../TreeItemLoader/index.mjs";
 import type { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.mjs";
 import type { RichTreeViewStore } from "../internals/RichTreeViewStore/index.mjs";
 import type { TreeViewValidItem } from "../models/items.mjs";
@@ -14,8 +17,26 @@ export interface RichTreeViewSlots extends TreeViewSlots, Omit<RichTreeViewItems
    * @default RichTreeViewRoot
    */
   root?: React.ElementType;
+  /**
+   * Component rendered instead of the default loading rows.
+   * It renders inside the tree root while the tree is loading, which keeps the
+   * `role="tree"` and `aria-busy` attributes, and inside a lazily loading item
+   * while its children load.
+   * Compose it with `TreeItemLoader` to keep the rows semantically correct.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row.
+   * It also renders for the children of an item while they load lazily.
+   * Wrap custom content in `TreeItemLoader` to keep the row semantically correct.
+   * @default TreeItemLoader
+   */
+  itemLoader?: React.ElementType;
+}
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps<RichTreeViewProps<R, Multiple>> {
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps<RichTreeViewProps<R, Multiple>> {}
 export type RichTreeViewApiRef<R extends TreeViewValidItem<R> = any, Multiple extends boolean | undefined = any> = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewStore<R, Multiple>>> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
@@ -27,6 +48,11 @@ export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListEle
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  /**
+   * If `true`, a loading UI is displayed instead of the tree items.
+   * @default false
+   */
+  loading?: boolean;
 }
 export interface RichTreeViewProps<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewStoreParameters<RichTreeViewStore<R, Multiple>>, RichTreeViewPropsBase {
   /**

package/RichTreeView/RichTreeView.types.d.ts

@@ -1,8 +1,11 @@
 import type * as React from 'react';
 import type { Theme } from '@mui/material/styles';
 import type { SxProps } from '@mui/system/styleFunctionSx';
+import type { SlotComponentProps } from '@mui/utils/types';
 import type { RichTreeViewClasses } from "./richTreeViewClasses.js";
 import type { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.js";
+import type { RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "../internals/components/RichTreeViewLoading.js";
+import type { TreeItemLoaderOwnerState } from "../TreeItemLoader/index.js";
 import type { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
 import type { RichTreeViewStore } from "../internals/RichTreeViewStore/index.js";
 import type { TreeViewValidItem } from "../models/items.js";
@@ -14,8 +17,26 @@ export interface RichTreeViewSlots extends TreeViewSlots, Omit<RichTreeViewItems
    * @default RichTreeViewRoot
    */
   root?: React.ElementType;
+  /**
+   * Component rendered instead of the default loading rows.
+   * It renders inside the tree root while the tree is loading, which keeps the
+   * `role="tree"` and `aria-busy` attributes, and inside a lazily loading item
+   * while its children load.
+   * Compose it with `TreeItemLoader` to keep the rows semantically correct.
+   */
+  loading?: React.ElementType;
+  /**
+   * Component rendered for each loading row.
+   * It also renders for the children of an item while they load lazily.
+   * Wrap custom content in `TreeItemLoader` to keep the row semantically correct.
+   * @default TreeItemLoader
+   */
+  itemLoader?: React.ElementType;
+}
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps<RichTreeViewProps<R, Multiple>> {
+  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
+  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps<RichTreeViewProps<R, Multiple>> {}
 export type RichTreeViewApiRef<R extends TreeViewValidItem<R> = any, Multiple extends boolean | undefined = any> = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewStore<R, Multiple>>> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
@@ -27,6 +48,11 @@ export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListEle
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  /**
+   * If `true`, a loading UI is displayed instead of the tree items.
+   * @default false
+   */
+  loading?: boolean;
 }
 export interface RichTreeViewProps<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewStoreParameters<RichTreeViewStore<R, Multiple>>, RichTreeViewPropsBase {
   /**

package/RichTreeView/richTreeViewClasses.d.mts

@@ -1,5 +1,8 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.mjs";
-export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {
+  /** Styles applied to each item loader element. */
+  itemLoader: string;
+}
 export type RichTreeViewClassKey = keyof RichTreeViewClasses;
 export declare function getRichTreeViewUtilityClass(slot: string): string;
 export declare const richTreeViewClasses: RichTreeViewClasses;

package/RichTreeView/richTreeViewClasses.d.ts

@@ -1,5 +1,8 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
-export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {
+  /** Styles applied to each item loader element. */
+  itemLoader: string;
+}
 export type RichTreeViewClassKey = keyof RichTreeViewClasses;
 export declare function getRichTreeViewUtilityClass(slot: string): string;
 export declare const richTreeViewClasses: RichTreeViewClasses;

package/RichTreeView/richTreeViewClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRichTreeViewUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRichTreeView', slot);
 }
-const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);
+const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemLoader']);

package/RichTreeView/richTreeViewClasses.mjs

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRichTreeViewUtilityClass(slot) {
   return generateUtilityClass('MuiRichTreeView', slot);
 }
-export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);
+export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemLoader']);

package/RichTreeView/useExtractRichTreeViewParameters.d.mts

@@ -291,4 +291,5 @@ export declare function useExtractRichTreeViewParameters<R extends TreeViewValid
     classes?: Partial<import("./richTreeViewClasses.mjs").RichTreeViewClasses>;
     sx?: import("@mui/system").SxProps<import("@mui/material/styles").Theme>;
   };
+  loading: boolean | undefined;
 };

package/RichTreeView/useExtractRichTreeViewParameters.d.ts

@@ -291,4 +291,5 @@ export declare function useExtractRichTreeViewParameters<R extends TreeViewValid
     classes?: Partial<import("./richTreeViewClasses.js").RichTreeViewClasses>;
     sx?: import("@mui/system").SxProps<import("@mui/material/styles").Theme>;
   };
+  loading: boolean | undefined;
 };

package/RichTreeView/useExtractRichTreeViewParameters.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useExtractRichTreeViewParameters = useExtractRichTreeViewParameters;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure", "loading"];
 function useExtractRichTreeViewParameters(props) {
   const {
       // Props for Provider
@@ -44,7 +44,9 @@ function useExtractRichTreeViewParameters(props) {
       // RichTreeViewStore parameters
       onItemLabelChange,
       isItemEditable,
-      domStructure
+      domStructure,
+      // Render-only props
+      loading
 
       // Forwarded props
     } = props,
@@ -90,6 +92,7 @@ function useExtractRichTreeViewParameters(props) {
     slots,
     slotProps,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   };
 }

package/RichTreeView/useExtractRichTreeViewParameters.mjs

@@ -1,5 +1,5 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure", "loading"];
 import * as React from 'react';
 export function useExtractRichTreeViewParameters(props) {
   const {
@@ -36,7 +36,9 @@ export function useExtractRichTreeViewParameters(props) {
       // RichTreeViewStore parameters
       onItemLabelChange,
       isItemEditable,
-      domStructure
+      domStructure,
+      // Render-only props
+      loading
 
       // Forwarded props
     } = props,
@@ -82,6 +84,7 @@ export function useExtractRichTreeViewParameters(props) {
     slots,
     slotProps,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   };
 }

package/SimpleTreeView/simpleTreeViewClasses.d.mts

@@ -1,5 +1,5 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.mjs";
-export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon' | 'itemLoader'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/SimpleTreeView/simpleTreeViewClasses.d.ts

@@ -1,5 +1,5 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
-export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon' | 'itemLoader'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/TreeItem/TreeItem.js

@@ -27,6 +27,7 @@ var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
 var _TreeItemProvider = require("../TreeItemProvider");
 var _TreeItemLabelInput = require("../TreeItemLabelInput");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _constants = require("../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
   _excluded2 = ["id", "itemId", "label", "disabled", "disableSelection", "children", "slots", "slotProps", "classes"];
@@ -117,7 +118,7 @@ const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.st
   name: 'MuiTreeItem',
   slot: 'IconContainer'
 })({
-  width: 16,
+  width: _constants.TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',

package/TreeItem/TreeItem.mjs

@@ -22,6 +22,7 @@ import { TreeItemDragAndDropOverlay } from "../TreeItemDragAndDropOverlay/index.
 import { TreeItemProvider } from "../TreeItemProvider/index.mjs";
 import { TreeItemLabelInput } from "../TreeItemLabelInput/index.mjs";
 import { useTreeViewStyleContext } from "../internals/TreeViewProvider/index.mjs";
+import { TREE_ITEM_ICON_CONTAINER_WIDTH_PX } from "../internals/constants.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 export const TreeItemRoot = styled('li', {
@@ -110,7 +111,7 @@ export const TreeItemIconContainer = styled('div', {
   name: 'MuiTreeItem',
   slot: 'IconContainer'
 })({
-  width: 16,
+  width: TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',