@mui/x-tree-view 8.19.0 → 8.22.0

package/CHANGELOG.md

@@ -5,6 +5,316 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.22.0
+
+_Dec 11, 2025_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- Each Tree View component now exposes its own hook to initialize the `apiRef` object with accurate typing:
+
+  ```diff
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useSimpleTreeViewApiRef();
+
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useRichTreeViewApiRef();
+
+  -import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+  +import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';
+  -const apiRef = useTreeViewApiRef();
+  +const apiRef = useRichTreeViewProApiRef();
+  ```
+
+- 📚 [Tutorial](https://mui.com/x/react-data-grid/tutorials/server-side-data/) on building a Data Grid with server-side data
+- 🐞 Bugfixes
+
+Special thanks go out to this community member for their valuable contributions:
+@kzhgit
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.0`
+
+- [DataGrid] Sync component props with theme defaults (#20590) @michelengelen
+- [DataGrid] Add fallback for CSS `color-mix` if it is unsupported (#20597) @cherniavskii
+- [DataGrid] Use `baseTooltip` slot for column header sort icon (#20460) @kzhgit
+
+#### `@mui/x-data-grid-pro@8.22.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@8.22.0`.
+
+#### `@mui/x-data-grid-premium@8.22.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@8.22.0`, plus:
+
+- [DataGridPremium] Handle pivoting column name generation for empty strings (#20608) @arminmeh
+- [DataGridPremium] Pass a row with aggregated value to the custom aggregation function `valueFormatter` (#20607) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.0`
+
+- [pickers] Fix invalid date tests (#20606) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.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@8.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.0`
+
+- [charts] Add consistent animation duration and timing (#20564) @JCQuintas
+- [charts] Extract a tooltip plugin from the interaction one (#20591) @alexfauquette
+- [charts] General type improvements (#20565) @JCQuintas
+- [charts] Place ordinal ticks according to a continuous scale (#19808) @alexfauquette
+- [charts] Remove layout data from the tooltip internals (#20548) @alexfauquette
+- [charts] Remove usage of focus outline for item highlight (#19856) @alexfauquette
+- [charts] Simplify `MarkPlot` by moving calculation to `useMarkPlotData` (#20570) @JCQuintas
+- [charts] Use `store.state` over `store.getSnapshot()` (#20616) @bernardobelchior
+- [charts] Vendor flatqueue (#20610) @bernardobelchior
+- [charts] Extract pie layout computation (#20611) @alexfauquette
+- [charts][infra] Enable `@typescript-eslint/consistent-type-imports` eslint rules (#20560) @JCQuintas
+- [charts][infra] Enable `import/no-cycle` eslint rules (#20554) @JCQuintas
+
+#### `@mui/x-charts-pro@8.22.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@8.22.0`, plus:
+
+- [charts-pro] Display sankey labels on top of nodes (#20569) @alexfauquette
+
+#### `@mui/x-charts-premium@8.22.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@8.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.0`
+
+- [tree view] Expose one hook per component to initialize the `apiRef` (#20235) @flaviendelangle
+- [tree view] Update the typing of `updateItemChildren()` to accept `null` (#20483) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.22.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@8.22.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add tutorial on building a Data Grid with server-side data (DX-22) (#19782) @mapache-salvaje
+- [docs] Modify the default value for the stacking demo (#20596) @alexfauquette
+- [docs] Revise the Charts Custom Components doc (#19793) @mapache-salvaje
+- [docs] Remove copy-pasted `aria-label` (#20620) @alexfauquette
+
+### Core
+
+- [internal] Remove unsafe dependency version from range (#20574) @oliviertassinari
+
+### Miscellaneous
+
+- Bump `@mui/monorepo` digest to `800638d` (#20337) @renovate[bot]
+- Bump `@next/eslint-plugin-next` to `15.5.7` (#20575) @renovate[bot]
+- Bump GitHub Actions (#20577) @renovate[bot]
+- Bump Tanstack query to `^5.90.12` (#20582) @renovate[bot]
+- Bump Vite & Vitest (#20583) @renovate[bot]
+- Bump `eslint` to `^8.48.1` (#20576) @renovate[bot]
+- Bump `markdown-to-jsx` to `^9.3.2` (#20507) @renovate[bot]
+- Bump `motion` to `^12.23.25` (#20579) @renovate[bot]
+- Bump react monorepo to `19.2.1` (#20581) @renovate[bot]
+- Bump `react-hook-form` to `^7.68.0` (#20584) @renovate[bot]
+- Bump `react-router` to `^7.10.1` (#20341) @renovate[bot]
+- Bump `tsx` to `^4.21.0` (#20585) @renovate[bot]
+- Bump MUI infra packages (#20478) @renovate[bot]
+- [infra] Automatically add teams to release PRs (#20558) @JCQuintas
+- [infra] Fix codeowners typo (#20562) @JCQuintas
+
+## 8.21.0
+
+_Dec 3, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
+
+The following team members contributed to this release:
+@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.21.0`
+
+- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
+- [DataGrid] Virtualizer refactor (#19465) @romgrk
+
+#### `@mui/x-data-grid-pro@8.21.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@8.21.0`.
+
+#### `@mui/x-data-grid-premium@8.21.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@8.21.0`, plus:
+
+- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.21.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@8.21.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.21.0`
+
+- [charts] Fix string measuring types (#20454) @bernardobelchior
+- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
+- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
+- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
+- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
+- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
+- [charts] Remove unnecessary `any` types (#20527) @sai6855
+- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
+- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
+- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
+- [charts] Add tick spacing property (#20282) @bernardobelchior
+- [charts] Fix Vitest lint error (#20550) @bernardobelchior
+- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.21.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@8.21.0`, plus:
+
+- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
+
+#### `@mui/x-charts-premium@8.21.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@8.21.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.21.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@8.21.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.21.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
+
+### Core
+
+- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
+- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
+- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
+- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
+
+### Miscellaneous
+
+- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
+- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
+- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
+- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
+- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
+- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
+- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
+- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
+- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
+- Bump playwright monorepo (#20503) @renovate[bot]
+- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
+- Bump react monorepo (#20340) @renovate[bot]
+- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
+- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
+- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
+- Bump next to ^15.5.7 [SECURITY] (#20555) @renovate[bot]
+
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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@8.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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@8.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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@8.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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@8.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
 ## 8.19.0
 
 _Nov 20, 2025_

package/RichTreeView/RichTreeView.js

@@ -132,7 +132,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`.
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({

package/RichTreeView/RichTreeView.types.d.ts

@@ -41,7 +41,7 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
    */
   slotProps?: RichTreeViewSlotProps<R, Multiple>;
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewApiRef;
 }

package/SimpleTreeView/SimpleTreeView.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`.
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -40,7 +40,7 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
    */
   sx?: SxProps<Theme>;
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`.
    */
   apiRef?: SimpleTreeViewApiRef;
 }

package/esm/RichTreeView/RichTreeView.js

@@ -125,7 +125,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`.
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({

package/esm/RichTreeView/RichTreeView.types.d.ts

@@ -41,7 +41,7 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
    */
   slotProps?: RichTreeViewSlotProps<R, Multiple>;
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewApiRef;
 }

package/esm/SimpleTreeView/SimpleTreeView.js

@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`.
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({

package/esm/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -40,7 +40,7 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
    */
   sx?: SxProps<Theme>;
   /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`.
    */
   apiRef?: SimpleTreeViewApiRef;
 }

package/esm/hooks/index.d.ts

@@ -1,4 +1,6 @@
-export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
 export { useTreeItemModel } from "./useTreeItemModel.js";
-export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useRichTreeViewApiRef } from "./useRichTreeViewApiRef.js";
+export { useSimpleTreeViewApiRef } from "./useSimpleTreeViewApiRef.js";

package/esm/hooks/index.js

@@ -1,4 +1,6 @@
-export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
 export { useTreeItemModel } from "./useTreeItemModel.js";
-export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useRichTreeViewApiRef } from "./useRichTreeViewApiRef.js";
+export { useSimpleTreeViewApiRef } from "./useSimpleTreeViewApiRef.js";

package/esm/hooks/useRichTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+export declare function useRichTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;

package/esm/hooks/useRichTreeViewApiRef.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+export function useRichTreeViewApiRef() {
+  return React.useRef(undefined);
+}

package/esm/hooks/useSimpleTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { SimpleTreeViewPluginSignatures } from "../SimpleTreeView/SimpleTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+export declare function useSimpleTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;

package/esm/hooks/useSimpleTreeViewApiRef.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+export function useSimpleTreeViewApiRef() {
+  return React.useRef(undefined);
+}

package/esm/hooks/useTreeViewApiRef.d.ts

@@ -3,5 +3,6 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from "../internals/mode
 import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
+ * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
  */
 export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/esm/hooks/useTreeViewApiRef.js

@@ -3,5 +3,6 @@
 import * as React from 'react';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
+ * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
  */
 export const useTreeViewApiRef = () => React.useRef(undefined);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.19.0
+ * @mui/x-tree-view v8.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/RichTreeViewItems.js

@@ -16,6 +16,7 @@ const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const EMPTY_ARRAY = [];
 const selectorNoChildren = () => EMPTY_ARRAY;
+const selectorChildrenIdsNull = state => itemsSelectors.itemOrderedChildrenIds(state, null);
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
@@ -59,7 +60,7 @@ export function RichTreeViewItems(props) {
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
   const domStructure = useStore(store, itemsSelectors.domStructure);
-  const items = useStore(store, domStructure === 'flat' ? state => expansionSelectors.flatList(state) : state => itemsSelectors.itemOrderedChildrenIds(state, null));
+  const items = useStore(store, domStructure === 'flat' ? expansionSelectors.flatList : selectorChildrenIdsNull);
   const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
     return /*#__PURE__*/_jsx(WrappedTreeItem, {

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts

@@ -30,10 +30,10 @@ export interface UseTreeViewLazyLoadingPublicAPI {
    * Method used for updating an item's children.
    * Only relevant for lazy-loaded tree views.
    *
-   * @param {TreeViewItemId} itemId The The id of the item to update the children of.
+   * @param {TreeViewItemId | null} itemId The id of the item to update the children of. If null is passed, it will update the root's children.
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
-  updateItemChildren: (itemId: TreeViewItemId) => Promise<void>;
+  updateItemChildren: (itemId: TreeViewItemId | null) => Promise<void>;
 }
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {
   /**

package/esm/models/items.d.ts

@@ -4,9 +4,12 @@ export type TreeViewDefaultItemModelProperties = {
   label: string;
   children?: TreeViewDefaultItemModelProperties[];
 };
-export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
+export type TreeViewBaseItem<R extends object = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];
 };
+export type TreeViewValidItem<R extends object> = {
+  children?: R[];
+};
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
 export interface TreeViewSelectionPropagation {
   descendants?: boolean;

package/esm/useTreeItem/useTreeItem.js

@@ -15,6 +15,12 @@ import { itemsSelectors } from "../internals/plugins/useTreeViewItems/index.js";
 import { idSelectors } from "../internals/corePlugins/useTreeViewId/index.js";
 import { expansionSelectors } from "../internals/plugins/useTreeViewExpansion/index.js";
 import { selectionSelectors } from "../internals/plugins/useTreeViewSelection/index.js";
+const depthSelector = (state, itemId, depthContext) => {
+  if (typeof depthContext === 'function') {
+    return depthContext(state, itemId);
+  }
+  return depthContext;
+};
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -23,12 +29,7 @@ export const useTreeItem = parameters => {
     store
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
-  const depth = useStore(store, (...params) => {
-    if (typeof depthContext === 'function') {
-      return depthContext(...params);
-    }
-    return depthContext;
-  }, parameters.itemId);
+  const depth = useStore(store, depthSelector, parameters.itemId, depthContext);
   const {
     id,
     itemId,

package/hooks/index.d.ts

@@ -1,4 +1,6 @@
-export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
 export { useTreeItemModel } from "./useTreeItemModel.js";
-export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useRichTreeViewApiRef } from "./useRichTreeViewApiRef.js";
+export { useSimpleTreeViewApiRef } from "./useSimpleTreeViewApiRef.js";

package/hooks/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "useApplyPropagationToSelectedItemsOnMount", {
     return _useApplyPropagationToSelectedItemsOnMount.useApplyPropagationToSelectedItemsOnMount;
   }
 });
+Object.defineProperty(exports, "useRichTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useRichTreeViewApiRef.useRichTreeViewApiRef;
+  }
+});
+Object.defineProperty(exports, "useSimpleTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useSimpleTreeViewApiRef.useSimpleTreeViewApiRef;
+  }
+});
 Object.defineProperty(exports, "useTreeItemModel", {
   enumerable: true,
   get: function () {
@@ -27,7 +39,9 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
     return _useTreeViewApiRef.useTreeViewApiRef;
   }
 });
-var _useTreeViewApiRef = require("./useTreeViewApiRef");
 var _useTreeItemUtils = require("./useTreeItemUtils");
 var _useTreeItemModel = require("./useTreeItemModel");
-var _useApplyPropagationToSelectedItemsOnMount = require("./useApplyPropagationToSelectedItemsOnMount");
+var _useApplyPropagationToSelectedItemsOnMount = require("./useApplyPropagationToSelectedItemsOnMount");
+var _useTreeViewApiRef = require("./useTreeViewApiRef");
+var _useRichTreeViewApiRef = require("./useRichTreeViewApiRef");
+var _useSimpleTreeViewApiRef = require("./useSimpleTreeViewApiRef");

package/hooks/useRichTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+export declare function useRichTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;

package/hooks/useRichTreeViewApiRef.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRichTreeViewApiRef = useRichTreeViewApiRef;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
+ */
+function useRichTreeViewApiRef() {
+  return React.useRef(undefined);
+}

package/hooks/useSimpleTreeViewApiRef.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { SimpleTreeViewPluginSignatures } from "../SimpleTreeView/SimpleTreeView.plugins.js";
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+export declare function useSimpleTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;

package/hooks/useSimpleTreeViewApiRef.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSimpleTreeViewApiRef = useSimpleTreeViewApiRef;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
+ */
+function useSimpleTreeViewApiRef() {
+  return React.useRef(undefined);
+}

package/hooks/useTreeViewApiRef.d.ts

@@ -3,5 +3,6 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from "../internals/mode
 import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
+ * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
  */
 export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/hooks/useTreeViewApiRef.js

@@ -9,6 +9,7 @@ exports.useTreeViewApiRef = void 0;
 var React = _interopRequireWildcard(require("react"));
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
+ * @deprecated Use `useRichTreeViewApiRef`, `useRichTreeViewProApiRef` or `useSimpleTreeViewApiRef` instead.
  */
 const useTreeViewApiRef = () => React.useRef(undefined);
 exports.useTreeViewApiRef = useTreeViewApiRef;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.19.0
+ * @mui/x-tree-view v8.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/RichTreeViewItems.js

@@ -23,6 +23,7 @@ const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const EMPTY_ARRAY = [];
 const selectorNoChildren = () => EMPTY_ARRAY;
+const selectorChildrenIdsNull = state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null);
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
@@ -66,7 +67,7 @@ function RichTreeViewItems(props) {
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
   const domStructure = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.domStructure);
-  const items = (0, _store.useStore)(store, domStructure === 'flat' ? state => _useTreeViewExpansion.expansionSelectors.flatList(state) : state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null));
+  const items = (0, _store.useStore)(store, domStructure === 'flat' ? _useTreeViewExpansion.expansionSelectors.flatList : selectorChildrenIdsNull);
   const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts

@@ -30,10 +30,10 @@ export interface UseTreeViewLazyLoadingPublicAPI {
    * Method used for updating an item's children.
    * Only relevant for lazy-loaded tree views.
    *
-   * @param {TreeViewItemId} itemId The The id of the item to update the children of.
+   * @param {TreeViewItemId | null} itemId The id of the item to update the children of. If null is passed, it will update the root's children.
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
-  updateItemChildren: (itemId: TreeViewItemId) => Promise<void>;
+  updateItemChildren: (itemId: TreeViewItemId | null) => Promise<void>;
 }
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {
   /**

package/models/items.d.ts

@@ -4,9 +4,12 @@ export type TreeViewDefaultItemModelProperties = {
   label: string;
   children?: TreeViewDefaultItemModelProperties[];
 };
-export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
+export type TreeViewBaseItem<R extends object = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];
 };
+export type TreeViewValidItem<R extends object> = {
+  children?: R[];
+};
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
 export interface TreeViewSelectionPropagation {
   descendants?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.19.0",
+  "version": "8.22.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.19.0"
+    "@mui/x-internals": "8.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.js

@@ -22,6 +22,12 @@ var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
 var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
+const depthSelector = (state, itemId, depthContext) => {
+  if (typeof depthContext === 'function') {
+    return depthContext(state, itemId);
+  }
+  return depthContext;
+};
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -30,12 +36,7 @@ const useTreeItem = parameters => {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
-  const depth = (0, _store.useStore)(store, (...params) => {
-    if (typeof depthContext === 'function') {
-      return depthContext(...params);
-    }
-    return depthContext;
-  }, parameters.itemId);
+  const depth = (0, _store.useStore)(store, depthSelector, parameters.itemId, depthContext);
   const {
     id,
     itemId,