@mui/x-tree-view 7.19.0 → 7.21.0

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

@@ -1,7 +1,7 @@
 import { TreeViewItemId } from '../../../models';
 export declare const createTreeViewDefaultId: () => string;
 /**
- * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
  * If the user explicitly defined an id attribute, it will be returned.
  * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
  * @param {object} params The parameters to determine the id attribute of the item.

package/internals/corePlugins/useTreeViewId/useTreeViewId.utils.js

@@ -5,7 +5,7 @@ export const createTreeViewDefaultId = () => {
 };
 
 /**
- * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
  * If the user explicitly defined an id attribute, it will be returned.
  * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
  * @param {object} params The parameters to determine the id attribute of the item.

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/models/treeView.d.ts

@@ -8,11 +8,11 @@ export interface TreeViewItemMeta {
     expandable: boolean;
     disabled: boolean;
     /**
-     * Only defined for `RichTreeView` and `RichTreeViewPro`.
+     * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
      */
     depth?: number;
     /**
-     * Only defined for `RichTreeView` and `RichTreeViewPro`.
+     * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
      */
     label?: string;
 }

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

@@ -54,13 +54,13 @@ export interface UseTreeViewExpansionParameters {
      */
     defaultExpandedItems?: string[];
     /**
-     * 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?: (event: React.SyntheticEvent, itemIds: string[]) => void;
     /**
-     * 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.

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

@@ -37,7 +37,7 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
 }
 export interface UseTreeViewFocusParameters {
     /**
-     * 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.
      */

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

@@ -17,7 +17,7 @@ interface UseTreeViewIconsSlots {
     expandIcon?: React.ElementType;
     /**
      * The default icon displayed next to an end item.
-     * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
+     * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
      */
     endIcon?: React.ElementType;
 }

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,16 +1,16 @@
 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 {}> {
     /**
      * Get the item with the given id.
-     * When used in the `SimpleTreeView`, it returns an object with the `id` and `label` properties.
+     * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
      * @param {string} itemId The id of the item to retrieve.
      * @returns {R} The item with the given id.
      */
@@ -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.
@@ -117,7 +117,7 @@ export interface UseTreeViewItemsParameters<R extends {
      */
     getItemId?: (item: R) => TreeViewItemId;
     /**
-     * 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.
      */

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -25,7 +25,7 @@ export const useTreeViewJSXItems = ({
           itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
             [item.id]: item
           }),
-          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
           itemMap: _extends({}, prevState.items.itemMap, {
             [item.id]: {
               id: item.id,

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -4,7 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
 import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
-function isPrintableCharacter(string) {
+function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 export const useTreeViewKeyboardNavigation = ({
@@ -227,7 +227,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();
@@ -236,7 +236,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Type-ahead
       // TODO: Support typing multiple characters
-      case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
+      case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
         {
           const matchingItem = getFirstMatchingItem(itemId, key);
           if (matchingItem != null) {

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -73,7 +73,7 @@ useTreeViewLabel.getDefaultizedParams = ({
   const canUseFeature = experimentalFeatures?.labelEditing;
   if (process.env.NODE_ENV !== 'production') {
     if (params.isItemEditable && !canUseFeature) {
-      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
+      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
     }
   }
   return _extends({}, params, {

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

@@ -37,7 +37,7 @@ export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
      */
     isItemEditable: (itemId: TreeViewItemId) => boolean;
     /**
-     * Set to `true` if the tree view is editable.
+     * Set to `true` if the Tree View is editable.
      */
     isTreeViewEditable: boolean;
 }

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

@@ -80,19 +80,19 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
      */
     multiSelect?: Multiple;
     /**
-     * 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?: boolean;
     /**
-     * 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.
      */
     onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewSelectionValue<Multiple>) => void;
     /**
-     * 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.

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:
@@ -78,7 +51,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   });
   if (process.env.NODE_ENV !== 'production') {
     if (props.children != null) {
-      warnOnce(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.']);
+      warnOnce(['MUI X: The Rich Tree View component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.']);
     }
   }
   const {
@@ -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()
+      })
     }))
   });
 });
@@ -147,7 +108,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.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,
@@ -250,26 +211,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.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.
    */
@@ -281,14 +242,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   onItemLabelChange: 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/modern/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/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";
@@ -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/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 --------------------------------
@@ -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({