@mui/x-tree-view 7.19.0 → 7.21.0

package/SimpleTreeView/SimpleTreeView.js

@@ -53,7 +53,7 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
   const ownerState = props;
   if (process.env.NODE_ENV !== 'production') {
     if (props.items != null) {
-      warnOnce(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.']);
+      warnOnce(['MUI X: The Simple Tree View component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.']);
     }
   }
   const {
@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
     })
   }),
   /**
-   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection: PropTypes.bool,
@@ -174,39 +174,39 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   multiSelect: PropTypes.bool,
   /**
-   * Callback fired when tree items are expanded/collapsed.
+   * Callback fired when Tree Items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
   /**
-   * Callback fired when the `content` slot of a given tree item is clicked.
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
    * @param {React.MouseEvent} event The DOM event that triggered the change.
    * @param {string} itemId The id of the focused item.
    */
   onItemClick: PropTypes.func,
   /**
-   * Callback fired when a tree item is expanded or collapsed.
+   * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: PropTypes.func,
   /**
-   * Callback fired when a given tree item is focused.
+   * Callback fired when a given Tree Item is focused.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    */
   onItemFocus: PropTypes.func,
   /**
-   * Callback fired when a tree item is selected or deselected.
+   * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
-   * Callback fired when tree items are selected/deselected.
+   * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.

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";
@@ -181,7 +182,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       indentationAtItemLevel
     },
     selection: {
-      multiSelect
+      disableSelection
     },
     expansion: {
       expansionTrigger
@@ -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,
@@ -308,17 +318,18 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     }),
     iconProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded4);
   const icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
+
+  // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
   let ariaSelected;
-  if (multiSelect) {
-    ariaSelected = selected;
-  } else if (selected) {
-    /* single-selection trees unset aria-selected on un-selected items.
-     *
-     * If the tree does not support multiple selection, aria-selected
-     * is set to true for the selected item and it is not present on any other item in the tree.
-     * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
-     */
+  if (selected) {
+    // - each selected node has aria-selected set to true.
     ariaSelected = true;
+  } else if (disableSelection || disabled) {
+    // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
+    ariaSelected = undefined;
+  } else {
+    // - all nodes that are selectable but not selected have aria-selected set to false.
+    ariaSelected = false;
   }
   function handleFocus(event) {
     const canBeFocused = !disabled || disabledItemsFocusable;
@@ -329,7 +340,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   function handleBlur(event) {
     onBlur?.(event);
     if (editing ||
-    // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
+    // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
     // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
     event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootRefObject.current) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootRefObject.current) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
@@ -442,11 +453,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 details, 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 details, see https://mui.com/x/react-tree-view/tree-item-customization/.
    */
   ContentProps: PropTypes.object,
   /**
@@ -459,7 +472,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   itemId: PropTypes.string.isRequired,
   /**
-   * The tree item label.
+   * The Tree Item label.
    */
   label: PropTypes.node,
   /**

package/TreeItem/TreeItem.types.d.ts

@@ -28,7 +28,7 @@ export interface TreeItemSlots {
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ElementType;
     /**
@@ -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 details, 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 details, see https://mui.com/x/react-tree-view/tree-item-customization/.
      */
     ContentProps?: React.HTMLAttributes<HTMLElement> & {
         ref?: React.Ref<HTMLElement>;
@@ -86,7 +88,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     onFocus?: null;
     /**
-     * The tree item label.
+     * The Tree Item label.
      */
     label?: React.ReactNode;
     /**
@@ -110,7 +112,7 @@ export interface TreeItemOwnerState extends TreeItemProps {
     indentationAtItemLevel: boolean;
 }
 /**
- * Plugins that need to be present in the Tree View in order for `TreeItem` to work correctly.
+ * Plugins that need to be present in the Tree View in order for Tree Item to work correctly.
  */
 export type TreeItemMinimalPlugins = readonly [
     UseTreeViewIconsSignature,
@@ -121,6 +123,6 @@ export type TreeItemMinimalPlugins = readonly [
     UseTreeViewKeyboardNavigationSignature
 ];
 /**
- * Plugins that `TreeItem` can use if they are present, but are not required.
+ * Plugins that Tree Item can use if they are present, but are not required.
  */
 export type TreeItemOptionalPlugins = readonly [];

package/TreeItem/TreeItemContent.d.ts

@@ -17,7 +17,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         focused: string;
         /** State class applied to the element when disabled. */
         disabled: string;
-        /** Styles applied to the tree item icon and collapse/expand icon. */
+        /** Styles applied to the Tree Item icon and collapse/expand icon. */
         iconContainer: string;
         /** Styles applied to the label element. */
         label: string;
@@ -31,7 +31,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         editable: string;
     };
     /**
-     * The tree item label.
+     * The Tree Item label.
      */
     label?: React.ReactNode;
     /**
@@ -39,15 +39,15 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
      */
     itemId: string;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ReactNode;
     /**
-     * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+     * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
      */
     expansionIcon?: React.ReactNode;
     /**
-     * The icon to display next to the tree item's label. Either a parent or end icon.
+     * The icon to display next to the Tree Item's label. Either a parent or end icon.
      */
     displayIcon?: React.ReactNode;
     dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps;

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 --------------------------------
@@ -114,7 +110,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   /**
-   * The icon to display next to the tree item's label. Either a parent or end icon.
+   * The icon to display next to the Tree Item's label. Either a parent or end icon.
    */
   displayIcon: PropTypes.node,
   dragAndDropOverlayProps: PropTypes.shape({
@@ -122,11 +118,11 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
     style: PropTypes.object
   }),
   /**
-   * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+   * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
    */
   expansionIcon: PropTypes.node,
   /**
-   * The icon to display next to the tree item's label.
+   * The icon to display next to the Tree Item's label.
    */
   icon: PropTypes.node,
   /**
@@ -134,7 +130,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
    */
   itemId: PropTypes.string.isRequired,
   /**
-   * The tree item label.
+   * The Tree Item label.
    */
   label: PropTypes.node,
   labelInputProps: PropTypes.shape({

package/TreeItem/treeItemClasses.d.ts

@@ -13,7 +13,7 @@ export interface TreeItemClasses {
     focused: string;
     /** State class applied to the element when disabled. */
     disabled: string;
-    /** Styles applied to the tree item icon. */
+    /** Styles applied to the Tree Item icon. */
     iconContainer: string;
     /** Styles applied to the label element. */
     label: string;

package/TreeItem2/TreeItem2.types.d.ts

@@ -43,7 +43,7 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
     labelInput?: React.ElementType;
     /**
      * The component that renders the overlay when an item reordering is ongoing.
-     * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+     * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
      * @default TreeItem2DragAndDropOverlay
      */
     dragAndDropOverlay?: React.ElementType;

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -26,7 +26,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
     }
   }, {
     props: {
@@ -34,9 +34,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }, {
     props: {
@@ -44,9 +44,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }, {
     props: {
@@ -54,9 +54,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6)
+      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }]
 }));

package/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -15,7 +15,7 @@ export interface TreeItem2IconSlots {
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ElementType;
 }

package/TreeView/TreeView.d.ts

@@ -4,7 +4,7 @@ type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(pro
     propTypes?: any;
 };
 /**
- * This component has been deprecated in favor of the new `SimpleTreeView` component.
+ * This component has been deprecated in favor of the new Simple Tree View component.
  * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:

package/TreeView/TreeView.js

@@ -32,7 +32,7 @@ const warn = () => {
 };
 
 /**
- * This component has been deprecated in favor of the new `SimpleTreeView` component.
+ * This component has been deprecated in favor of the new Simple Tree View component.
  * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
     })
   }),
   /**
-   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection: PropTypes.bool,
@@ -152,39 +152,39 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   multiSelect: PropTypes.bool,
   /**
-   * Callback fired when tree items are expanded/collapsed.
+   * Callback fired when Tree Items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
   /**
-   * Callback fired when the `content` slot of a given tree item is clicked.
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
    * @param {React.MouseEvent} event The DOM event that triggered the change.
    * @param {string} itemId The id of the focused item.
    */
   onItemClick: PropTypes.func,
   /**
-   * Callback fired when a tree item is expanded or collapsed.
+   * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: PropTypes.func,
   /**
-   * Callback fired when a given tree item is focused.
+   * Callback fired when a given Tree Item is focused.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    */
   onItemFocus: PropTypes.func,
   /**
-   * Callback fired when a tree item is selected or deselected.
+   * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
-   * Callback fired when tree items are selected/deselected.
+   * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.19.0
+ * @mui/x-tree-view v7.21.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/corePlugins/corePlugins.d.ts

@@ -2,7 +2,7 @@ import { UseTreeViewIdParameters } from './useTreeViewId';
 import { ConvertPluginsIntoSignatures } from '../models';
 /**
  * Internal plugins that create the tools used by the other plugins.
- * These plugins are used by the tree view components.
+ * These plugins are used by the Tree View components.
  */
 export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("..").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>, import("..").TreeViewPlugin<import("./useTreeViewOptionalPlugins").UseTreeViewOptionalPluginsSignature>, import("..").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>];
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>;

package/internals/corePlugins/corePlugins.js

@@ -3,6 +3,6 @@ import { useTreeViewOptionalPlugins } from "./useTreeViewOptionalPlugins/index.j
 import { useTreeViewId } from "./useTreeViewId/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
- * These plugins are used by the tree view components.
+ * These plugins are used by the Tree View components.
  */
 export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewOptionalPlugins, useTreeViewId];

package/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -6,10 +6,9 @@ export const useTreeViewId = ({
   state,
   setState
 }) => {
-  const treeId = state.id.treeId;
   React.useEffect(() => {
     setState(prevState => {
-      if (prevState.id.treeId === params.id) {
+      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
         return prevState;
       }
       return _extends({}, prevState, {
@@ -19,6 +18,7 @@ export const useTreeViewId = ({
       });
     });
   }, [setState, params.id]);
+  const treeId = params.id ?? state.id.treeId;
   return {
     getRootProps: () => ({
       id: treeId
@@ -35,6 +35,6 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? createTreeViewDefaultId()
+    treeId: id ?? undefined
   }
 });

package/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts

@@ -9,7 +9,7 @@ export interface UseTreeViewIdParameters {
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
     id: {
-        treeId: string;
+        treeId: string | undefined;
     };
 }
 interface UseTreeViewIdContextValue {