@mui/x-tree-view 7.19.0 → 7.20.0

package/CHANGELOG.md

@@ -3,6 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.20.0
+
+_Oct 11, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Updated ["What's new"](https://mui.com/x/whats-new/) page giving more detailed overview of the latest new features and other highlights
+- 📚 New [collapsible column groups demo](https://mui.com/x/react-data-grid/column-groups/#collapsible-column-groups) for the Data Grid component
+- 📚 New [Tree Item Customization](https://mui.com/x/react-tree-view/tree-item-customization/) documentation to learn how to use the new APIs to create custom Tree Items. The old APIs (`props.ContentComponent` and `props.ContentProps`) have been deprecated and will be removed in the new major version of the Tree View component.
+- 🌍 Improve Japanese (ja-JP) locale on the Data Grid component
+- 🐞 Bugfixes
+- 📚 Other documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @kalyan90, @uma-neko, @vfbiby.
+Following are all team members who have contributed to this release: @alelthomas, @arminmeh, @arthurbalduini,
+@cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte, @oliviertassinari, @samuelsycamore, @siriwatknp.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.20.0`
+
+- [DataGrid] Add `onColumnHeaderContextMenu` event (#14734) @vfbiby
+- [DataGrid] Avoid row spanning computation of outdated rows (#14902) @MBilalShafi
+- [DataGrid] Fix scrollbar position not being updated after `scrollToIndexes` (#14888) @arminmeh
+- [DataGrid] Pass `rowId` param to `processRowUpdate` (#14821) @k-rajat19
+- [l10n] Improve Japanese (ja-JP) locale (#14870) @uma-neko
+
+#### `@mui/x-data-grid-pro@7.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@7.20.0`, plus:
+
+- [DataGridPro] Fix wording on the `rowSelectionPropagation` JSDoc and doc section (#14907) @flaviendelangle
+
+#### `@mui/x-data-grid-premium@7.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@7.20.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.20.0`
+
+- [pickers] Add `PageUp` and `PageDown` support for time components (#14812) @arthurbalduini
+- [pickers] Fix regression on `PickerValidDate` (#14896) @flaviendelangle
+- [pickers] Move the `DateFieldInPickerProps` interface to the `DatePicker` folder and rename it `DatePickerFieldProps` (same for time and date time) (#14828) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.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-date-pickers@7.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.20.0`
+
+No changes since `@mui/x-charts@v7.19.0`.
+
+#### `@mui/x-charts-pro@7.0.0-beta.4` [![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@7.20.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.20.0`
+
+- [TreeItem] Deprecate the `ContentComponent` and `ContentProps` props (#14908) @flaviendelangle
+- [TreeView] Rework how items are being rendered in Rich Tree View components (#14749) @flaviendelangle
+
+### Docs
+
+- [docs] Update "What's new" page (#14858) @cherniavskii
+- [docs] Add collapsible column groups demo (#14818) @cherniavskii
+- [docs] Add custom columns panel demo (#14825) @cherniavskii
+- [docs] Capitalize all instances of "Data Grid" (#14884) @samuelsycamore
+- [docs] Divide charts `tooltip` and `highlighting` pages (#14824) @JCQuintas
+- [docs] Document the `TreeItem2` component and the `useTreeItem2` hook (#14551) @noraleonte
+- [docs] Fix column pinning for "Disable detail panel content scroll" section (#14854 and #14885) @kalyan90
+- [docs] Fix detail panel demo not working well with pinned columns (#14883) @cherniavskii
+- [docs] New recipe of a read-only field (#14606) @flaviendelangle
+- [docs] Change demo name example (#14822) @alelthomas
+
+### Core
+
+- [core] Support `@mui/utils` v6 (#14867) @siriwatknp
+- [code-infra] Remove deprecated `data-mui-test` in favour of `data-testid` (#14882) @JCQuintas
+- [code-infra] Update renovate config and add a `vitest` group (#14856) @JCQuintas
+- [test] Replace `waitFor()` with `act()` (#14851) @oliviertassinari
+- [test] Restore "pnpm tc" CLI (#14852) @oliviertassinari
+
 ## 7.19.0
 
 _Oct 4, 2024_
@@ -90,13 +180,13 @@ Same changes as in `@mui/x-charts@7.19.0`.
 
 - [TreeView] Apply experimental features in `getDefaultizedParams` instead of in the plugin render (#14661) @flaviendelangle
 - [TreeView] Export `publicAPI` form `useTreeItem2Utils` (#14729) @noraleonte
-- [TreeView] Fix cursor navigation interfering with browser shortcut keys  (#14798) @sai6855
+- [TreeView] Fix cursor navigation interfering with browser shortcut keys (#14798) @sai6855
 - [TreeView] Fix invalid test for items reordering (#14665) @flaviendelangle
 - [TreeView] Remove `instance.getTreeItemIdAttribute` (#14667) @flaviendelangle
 
 ### Docs
 
-- [docs] Added warning callout for Firefox reordering bug  (#14516) @michelengelen
+- [docs] Added warning callout for Firefox reordering bug (#14516) @michelengelen
 - [docs] Copyedit `pages.ts` navigation (#14782) @samuelsycamore
 - [docs] Fix typo in row spanning doc (#14770) @flaviendelangle
 - [docs] Fix typo in the Tree View migration guide to v7 (#14727) @Sanderand
@@ -121,7 +211,7 @@ We'd like to offer a big thanks to the 14 contributors who made this release pos
 
 - 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
 
-  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="Data Grid row spanning" />
 
 - ⏰ Support `date-fns` v4 (#14673) @LukasTy
 - 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
@@ -560,7 +650,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 #### `@mui/x-data-grid@7.13.0`
 
 - [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
-- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Fix error logged during skeleton loading with nested Data Grid (#14186) @KenanYusuf
 - [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
 - [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
 - [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
@@ -678,6 +768,8 @@ Same changes as in `@mui/x-charts@7.12.1`, plus:
 
 #### `@mui/x-tree-view@7.12.1`
 
+No changes since `@mui/x-tree-view@7.12.0`.
+
 ### Docs
 
 - [docs] Add a warning to promote the usage of `updateRows` (#14027) @MBilalShafi
@@ -1528,7 +1620,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [docs] Fix a small typo in property comment (#13245) @Janpot
 - [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
 - [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
-- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Small improvements on accessibility Data Grid doc (#13233) @arthurbalduini
 - [docs] Update Pickers demo configurations (#13303) @LukasTy
 
 ### Core
@@ -1542,7 +1634,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [test] Use test-utils from npm (#12880) @michaldudak
 - [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
 
-## v7.5.1
+## 7.5.1
 
 _May 23, 2024_
 
@@ -1602,7 +1694,7 @@ Same changes as in `@mui/x-date-pickers@7.5.1`.
 - [code-infra] Run corepack enable on all CI jobs (#13205) @Janpot
 - [code-infra] Use `nx` for lerna tasks (#13166) @LukasTy
 
-## v7.5.0
+## 7.5.0
 
 _May 17, 2024_
 
@@ -2127,7 +2219,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
 - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
 - [docs] Match IE 11 spacing with Material UI @oliviertassinari
-- [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
+- [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette
 - [docs] Remove ` around @default values (#12158) @alexfauquette
 - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
 - [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle
@@ -3568,7 +3660,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 - [docs] Fix generated tree view API docs (#11737) @LukasTy
 - [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
 - [docs] Improve codemod for v7 (#11650) @oliviertassinari
-- [docs] Improve data grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
+- [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
 - [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
 - [docs] Remove the description from the `className` prop (#11693) @oliviertassinari
 - [docs] Uplift `SimpleTreeView` customization examples (#11424) @noraleonte
@@ -3656,8 +3748,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 - [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
 - [docs] Improve `git diff` format @oliviertassinari
 - [docs] Push up the MUI X brand (#11533) @oliviertassinari
-- [docs] Remove old data grid translation files (#11646) @cherniavskii
-- [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
+- [docs] Remove old Data Grid translation files (#11646) @cherniavskii
+- [docs] Improve Server-side Data Grid docs (#11589) @oliviertassinari
 - [docs] Improve charts landing page (#11570) @oliviertassinari
 
 ### Core
@@ -4167,7 +4259,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`.
 
-- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
+- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the Data Grid exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
 
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 
@@ -4879,7 +4971,7 @@ A special shoutout to thank the 12 contributors who made this release possible.
 - 🚀 First v7 alpha release
 - ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
 - 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/)
-- 💫 New recipes added for the data grid
+- 💫 New recipes added for the Data Grid
 - 📈 `<ChartsReferenceLine />` component is now available
 - 🌍 Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
 - 🐞 Bugfixes

package/RichTreeView/RichTreeView.js

@@ -11,7 +11,7 @@ import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { useTreeView } from "../internals/useTreeView/index.js";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
 import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
-import { TreeItem } from "../TreeItem/index.js";
+import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -34,33 +34,6 @@ export const RichTreeViewRoot = styled('ul', {
   outline: 0,
   position: 'relative'
 });
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children
-}) {
-  const Item = slots?.item ?? TreeItem;
-  const itemProps = useSlotProps({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: {
-      itemId,
-      id,
-      label
-    },
-    ownerState: {
-      itemId,
-      label
-    }
-  });
-  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children
-  }));
-}
-
 /**
  *
  * Demos:
@@ -103,26 +76,14 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const itemsToRender = instance.getItemsToRender();
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children
-  }) => {
-    return /*#__PURE__*/_jsx(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: label,
-      id: id,
-      itemId: itemId,
-      children: children?.map(renderItem)
-    }, itemId);
-  };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: itemsToRender.map(renderItem)
+      children: /*#__PURE__*/_jsx(RichTreeViewItems, {
+        slots: slots,
+        slotProps: slotProps,
+        itemsToRender: instance.getItemsToRender()
+      })
     }))
   });
 });

package/TreeItem/TreeItem.js

@@ -19,6 +19,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
+import { warnOnce } from '@mui/x-internals/warning';
 import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { TreeItemContent } from "./TreeItemContent.js";
 import { treeItemClasses, getTreeItemUtilityClass } from "./treeItemClasses.js";
@@ -220,6 +221,15 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     handleCancelItemLabelEditing,
     handleSaveItemLabel
   } = useTreeItemState(itemId);
+  if (process.env.NODE_ENV !== 'production') {
+    // Checking directly the `props` to avoid having the default value applied
+    if (props.ContentComponent) {
+      warnOnce(['MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+    if (props.ContentProps) {
+      warnOnce(['MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+  }
   const {
     contentRef,
     rootRef,
@@ -442,11 +452,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: PropTypes.string,
   /**
    * The component used to render the content of the item.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
   /**
    * Props applied to ContentComponent.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    */
   ContentProps: PropTypes.object,
   /**

package/TreeItem/TreeItem.types.d.ts

@@ -66,11 +66,13 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
     slotProps?: TreeItemSlotProps;
     /**
      * The component used to render the content of the item.
+     * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
      * @default TreeItemContent
      */
     ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
     /**
      * Props applied to ContentComponent.
+     * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
      */
     ContentProps?: React.HTMLAttributes<HTMLElement> & {
         ref?: React.Ref<HTMLElement>;

package/TreeItem/TreeItemContent.js

@@ -73,35 +73,31 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     }
     toggleItemEditing();
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    _jsxs("div", _extends({}, other, {
-      className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/_jsx("div", _extends({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */_jsxs("div", _extends({}, other, {
+    className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/_jsx("div", _extends({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------

package/index.js

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

package/internals/components/RichTreeViewItems.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils';
+import { TreeItem, TreeItemProps } from '../../TreeItem';
+import { TreeItem2Props } from '../../TreeItem2';
+import { TreeViewItemId } from '../../models';
+import { TreeViewItemToRenderProps } from '../plugins/useTreeViewItems';
+interface RichTreeViewItemsOwnerState {
+    itemId: TreeViewItemId;
+    label: string;
+}
+export interface RichTreeViewItemsSlots {
+    /**
+     * Custom component for the item.
+     * @default TreeItem.
+     */
+    item?: React.JSXElementConstructor<TreeItemProps> | React.JSXElementConstructor<TreeItem2Props>;
+}
+export interface RichTreeViewItemsSlotProps {
+    item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;
+}
+export interface RichTreeViewItemsProps {
+    itemsToRender: TreeViewItemToRenderProps[];
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: RichTreeViewItemsSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: RichTreeViewItemsSlotProps;
+}
+export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;
+export {};

package/internals/components/RichTreeViewItems.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { TreeItem } from "../../TreeItem/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? TreeItem;
+  const _useSlotProps = useSlotProps({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/_jsx(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
+    children: children
+  }));
+}
+export function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/_jsx(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

package/internals/index.d.ts

@@ -1,5 +1,6 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
+export { RichTreeViewItems } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, MuiCancellableEvent, MuiCancellableEventHandler, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';

package/internals/index.js

@@ -1,5 +1,6 @@
 export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
 
 // Core plugins

package/internals/plugins/useTreeViewItems/index.d.ts

@@ -1,3 +1,3 @@
 export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, TreeViewItemToRenderProps, } from './useTreeViewItems.types';
 export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewBaseItem, TreeViewItemId } from '../../../models';
-interface TreeViewItemProps {
+export interface TreeViewItemToRenderProps {
     label: string;
     itemId: string;
     id: string | undefined;
-    children?: TreeViewItemProps[];
+    children?: TreeViewItemToRenderProps[];
 }
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
@@ -31,7 +31,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
     /**
      * Get all the items in the same format as provided by `props.items`.
-     * @returns {TreeViewItemProps[]} The items in the tree.
+     * @returns {TreeViewItemToRenderProps[]} The items in the tree.
      */
     getItemTree: () => TreeViewBaseItem[];
 }
@@ -46,10 +46,10 @@ export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItems
     /**
      * Get the item that should be rendered.
      * This method is only used on Rich Tree View components.
-     * Check the `TreeViewItemProps` type for more information.
-     * @returns {TreeViewItemProps[]} The items to render.
+     * Check the `TreeViewItemToRenderProps` type for more information.
+     * @returns {TreeViewItemToRenderProps[]} The items to render.
      */
-    getItemsToRender: () => TreeViewItemProps[];
+    getItemsToRender: () => TreeViewItemToRenderProps[];
     /**
      * Check if a given item is disabled.
      * An item is disabled if it was marked as disabled or if one of its ancestors is disabled.

package/modern/RichTreeView/RichTreeView.js

@@ -11,7 +11,7 @@ import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { useTreeView } from "../internals/useTreeView/index.js";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
 import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
-import { TreeItem } from "../TreeItem/index.js";
+import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -34,33 +34,6 @@ export const RichTreeViewRoot = styled('ul', {
   outline: 0,
   position: 'relative'
 });
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children
-}) {
-  const Item = slots?.item ?? TreeItem;
-  const itemProps = useSlotProps({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: {
-      itemId,
-      id,
-      label
-    },
-    ownerState: {
-      itemId,
-      label
-    }
-  });
-  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children
-  }));
-}
-
 /**
  *
  * Demos:
@@ -103,26 +76,14 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const itemsToRender = instance.getItemsToRender();
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children
-  }) => {
-    return /*#__PURE__*/_jsx(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: label,
-      id: id,
-      itemId: itemId,
-      children: children?.map(renderItem)
-    }, itemId);
-  };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: itemsToRender.map(renderItem)
+      children: /*#__PURE__*/_jsx(RichTreeViewItems, {
+        slots: slots,
+        slotProps: slotProps,
+        itemsToRender: instance.getItemsToRender()
+      })
     }))
   });
 });

package/modern/TreeItem/TreeItem.js

@@ -19,6 +19,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
+import { warnOnce } from '@mui/x-internals/warning';
 import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { TreeItemContent } from "./TreeItemContent.js";
 import { treeItemClasses, getTreeItemUtilityClass } from "./treeItemClasses.js";
@@ -220,6 +221,15 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     handleCancelItemLabelEditing,
     handleSaveItemLabel
   } = useTreeItemState(itemId);
+  if (process.env.NODE_ENV !== 'production') {
+    // Checking directly the `props` to avoid having the default value applied
+    if (props.ContentComponent) {
+      warnOnce(['MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+    if (props.ContentProps) {
+      warnOnce(['MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+  }
   const {
     contentRef,
     rootRef,
@@ -442,11 +452,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: PropTypes.string,
   /**
    * The component used to render the content of the item.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
   /**
    * Props applied to ContentComponent.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    */
   ContentProps: PropTypes.object,
   /**

package/modern/TreeItem/TreeItemContent.js

@@ -73,35 +73,31 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     }
     toggleItemEditing();
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    _jsxs("div", _extends({}, other, {
-      className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/_jsx("div", _extends({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */_jsxs("div", _extends({}, other, {
+    className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/_jsx("div", _extends({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/index.js

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

package/modern/internals/components/RichTreeViewItems.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { TreeItem } from "../../TreeItem/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? TreeItem;
+  const _useSlotProps = useSlotProps({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/_jsx(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
+    children: children
+  }));
+}
+export function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/_jsx(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

package/modern/internals/index.js

@@ -1,5 +1,6 @@
 export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
 
 // Core plugins

package/node/RichTreeView/RichTreeView.js

@@ -18,7 +18,7 @@ var _zeroStyled = require("../internals/zero-styled");
 var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _RichTreeView = require("./RichTreeView.plugins");
-var _TreeItem = require("../TreeItem");
+var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
 var _jsxRuntime = require("react/jsx-runtime");
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -41,33 +41,6 @@ const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _zeroStyled.styled)('ul'
   outline: 0,
   position: 'relative'
 });
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children
-}) {
-  const Item = slots?.item ?? _TreeItem.TreeItem;
-  const itemProps = (0, _useSlotProps.default)({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: {
-      itemId,
-      id,
-      label
-    },
-    ownerState: {
-      itemId,
-      label
-    }
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: children
-  }));
-}
-
 /**
  *
  * Demos:
@@ -110,26 +83,14 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const itemsToRender = instance.getItemsToRender();
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children
-  }) => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: label,
-      id: id,
-      itemId: itemId,
-      children: children?.map(renderItem)
-    }, itemId);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
-      children: itemsToRender.map(renderItem)
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
+        slots: slots,
+        slotProps: slotProps,
+        itemsToRender: instance.getItemsToRender()
+      })
     }))
   });
 });

package/node/TreeItem/TreeItem.js

@@ -22,6 +22,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _useSlotProps4 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _warning = require("@mui/x-internals/warning");
 var _zeroStyled = require("../internals/zero-styled");
 var _TreeItemContent = require("./TreeItemContent");
 var _treeItemClasses = require("./treeItemClasses");
@@ -227,6 +228,15 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     handleCancelItemLabelEditing,
     handleSaveItemLabel
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
+  if (process.env.NODE_ENV !== 'production') {
+    // Checking directly the `props` to avoid having the default value applied
+    if (props.ContentComponent) {
+      (0, _warning.warnOnce)(['MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+    if (props.ContentProps) {
+      (0, _warning.warnOnce)(['MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+  }
   const {
     contentRef,
     rootRef,
@@ -449,11 +459,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: _propTypes.default.string,
   /**
    * The component used to render the content of the item.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    * @default TreeItemContent
    */
   ContentComponent: _elementTypeAcceptingRef.default,
   /**
    * Props applied to ContentComponent.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    */
   ContentProps: _propTypes.default.object,
   /**

package/node/TreeItem/TreeItemContent.js

@@ -81,35 +81,31 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     }
     toggleItemEditing();
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-      className: (0, _clsx.default)(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/index.js

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

package/node/internals/components/RichTreeViewItems.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTreeViewItems = RichTreeViewItems;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _TreeItem = require("../../TreeItem");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? _TreeItem.TreeItem;
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
+    children: children
+  }));
+}
+function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

package/node/internals/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RichTreeViewItems", {
+  enumerable: true,
+  get: function () {
+    return _RichTreeViewItems.RichTreeViewItems;
+  }
+});
 Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
   enumerable: true,
   get: function () {
@@ -95,6 +101,7 @@ Object.defineProperty(exports, "useTreeViewSelection", {
 });
 var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
+var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
 var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.19.0",
+  "version": "7.20.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,13 +33,13 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
-    "@mui/utils": "^5.16.6",
+    "@babel/runtime": "^7.25.7",
+    "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.18.0"
+    "@mui/x-internals": "7.20.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem2/index.d.ts

@@ -1,3 +1,3 @@
 export declare const useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
 export declare const unstable_useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
-export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';
+export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2CheckboxSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -83,7 +83,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
     disabled: boolean;
     ref: React.RefObject<HTMLButtonElement>;
     tabIndex: -1;