@mui/x-tree-view 7.20.0 → 7.21.0

package/TreeItem/TreeItemContent.js

@@ -110,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({
@@ -118,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,
   /**
@@ -130,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.20.0
+ * @mui/x-tree-view v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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 {

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/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/useTreeViewItems.types.d.ts

@@ -10,7 +10,7 @@ export interface 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.
      */
@@ -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

@@ -51,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 {
@@ -108,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,
@@ -211,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.
    */
@@ -242,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

@@ -182,7 +182,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       indentationAtItemLevel
     },
     selection: {
-      multiSelect
+      disableSelection
     },
     expansion: {
       expansionTrigger
@@ -318,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;
@@ -339,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;
@@ -452,13 +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 detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+   * @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 detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+   * @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,
   /**
@@ -471,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,
   /**