@mui/x-tree-view 7.20.0 → 7.21.0

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/useTreeItem2/useTreeItem2.js

@@ -16,7 +16,6 @@ export const useTreeItem2 = parameters => {
       indentationAtItemLevel
     },
     selection: {
-      multiSelect,
       disableSelection,
       checkboxSelection
     },
@@ -84,7 +83,7 @@ export const useTreeItem2 = parameters => {
     // the input that triggers the root blur can be either the relatedTarget (when entering editing state) or the target (when exiting editing state)
     // when we enter the editing state, we focus the input -> we don't want to remove the focused item from the state
     if (status.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, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
@@ -150,17 +149,18 @@ export const useTreeItem2 = parameters => {
   };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+
+    // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
     let ariaSelected;
-    if (multiSelect) {
-      ariaSelected = status.selected;
-    } else if (status.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 (status.selected) {
+      // - each selected node has aria-selected set to true.
       ariaSelected = true;
+    } else if (disableSelection || status.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;
     }
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,

package/node/RichTreeView/RichTreeView.js

@@ -58,7 +58,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   });
   if (process.env.NODE_ENV !== 'production') {
     if (props.children != null) {
-      (0, _warning.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/.']);
+      (0, _warning.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 {
@@ -115,7 +115,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.default.bool,
@@ -218,26 +218,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   multiSelect: _propTypes.default.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.default.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.default.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.default.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.
    */
@@ -249,14 +249,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   onItemLabelChange: _propTypes.default.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.default.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/node/SimpleTreeView/SimpleTreeView.js

@@ -60,7 +60,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
   const ownerState = props;
   if (process.env.NODE_ENV !== 'production') {
     if (props.items != null) {
-      (0, _warning.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/.']);
+      (0, _warning.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 {
@@ -111,7 +111,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.default.bool,
@@ -181,39 +181,39 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    */
   multiSelect: _propTypes.default.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.default.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.default.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.default.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.default.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.default.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/node/TreeItem/TreeItem.js

@@ -189,7 +189,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       indentationAtItemLevel
     },
     selection: {
-      multiSelect
+      disableSelection
     },
     expansion: {
       expansionTrigger
@@ -325,17 +325,18 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     }),
     iconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps3, _excluded4);
   const icon = Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, 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;
@@ -346,7 +347,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   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 && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootRefObject.current) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.isTargetInDescendants)(event.target, rootRefObject.current) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
@@ -459,13 +460,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: _propTypes.default.string,
   /**
    * The component used to render the content of the item.
-   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+   * @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.default,
   /**
    * Props applied to ContentComponent.
-   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+   * @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.default.object,
   /**
@@ -478,7 +479,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   itemId: _propTypes.default.string.isRequired,
   /**
-   * The tree item label.
+   * The Tree Item label.
    */
   label: _propTypes.default.node,
   /**

package/node/TreeItem/TreeItemContent.js

@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.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.default.node,
   dragAndDropOverlayProps: _propTypes.default.shape({
@@ -126,11 +126,11 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
     style: _propTypes.default.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.default.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.default.node,
   /**
@@ -138,7 +138,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
    */
   itemId: _propTypes.default.string.isRequired,
   /**
-   * The tree item label.
+   * The Tree Item label.
    */
   label: _propTypes.default.node,
   labelInputProps: _propTypes.default.shape({

package/node/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

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

package/node/TreeView/TreeView.js

@@ -39,7 +39,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:
@@ -89,7 +89,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.default.bool,
@@ -159,39 +159,39 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   multiSelect: _propTypes.default.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.default.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.default.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.default.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.default.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.default.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/node/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