@mui/x-tree-view 7.20.0 → 7.22.0

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.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/corePlugins/corePlugins.js

@@ -9,6 +9,6 @@ var _useTreeViewOptionalPlugins = require("./useTreeViewOptionalPlugins");
 var _useTreeViewId = require("./useTreeViewId");
 /**
  * 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.
  */
 const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents, _useTreeViewOptionalPlugins.useTreeViewOptionalPlugins, _useTreeViewId.useTreeViewId];

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -14,10 +14,9 @@ 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 (0, _extends2.default)({}, prevState, {
@@ -27,6 +26,7 @@ const useTreeViewId = ({
       });
     });
   }, [setState, params.id]);
+  const treeId = params.id ?? state.id.treeId;
   return {
     getRootProps: () => ({
       id: treeId
@@ -44,6 +44,6 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+    treeId: id ?? undefined
   }
 });

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

@@ -11,7 +11,7 @@ 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/node/internals/models/index.js

@@ -46,15 +46,4 @@ Object.keys(_treeView).forEach(function (key) {
       return _treeView[key];
     }
   });
-});
-var _MuiCancellableEvent = require("./MuiCancellableEvent");
-Object.keys(_MuiCancellableEvent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _MuiCancellableEvent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _MuiCancellableEvent[key];
-    }
-  });
 });

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -33,7 +33,7 @@ const useTreeViewJSXItems = ({
           itemMetaMap: (0, _extends2.default)({}, 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: (0, _extends2.default)({}, prevState.items.itemMap, {
             [item.id]: {
               id: item.id,

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -12,7 +12,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
 var _useTreeViewLabel = require("../useTreeViewLabel");
-function isPrintableCharacter(string) {
+function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 const useTreeViewKeyboardNavigation = ({
@@ -235,7 +235,7 @@ 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();
@@ -244,7 +244,7 @@ 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/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -82,7 +82,7 @@ useTreeViewLabel.getDefaultizedParams = ({
   const canUseFeature = experimentalFeatures?.labelEditing;
   if (process.env.NODE_ENV !== 'production') {
     if (params.isItemEditable && !canUseFeature) {
-      (0, _warning.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/']);
+      (0, _warning.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 (0, _extends2.default)({}, params, {

package/node/models/index.js

@@ -13,4 +13,15 @@ Object.keys(_items).forEach(function (key) {
       return _items[key];
     }
   });
+});
+var _events = require("./events");
+Object.keys(_events).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _events[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _events[key];
+    }
+  });
 });

package/node/useTreeItem2/useTreeItem2.js

@@ -24,7 +24,6 @@ const useTreeItem2 = parameters => {
       indentationAtItemLevel
     },
     selection: {
-      multiSelect,
       disableSelection,
       checkboxSelection
     },
@@ -92,7 +91,7 @@ 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 && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.isTargetInDescendants)(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
@@ -158,17 +157,18 @@ const useTreeItem2 = parameters => {
   };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(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 = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.20.0",
+  "version": "7.22.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -39,7 +39,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.20.0"
+    "@mui/x-internals": "7.21.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewItemId } from '../models';
-import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
@@ -39,9 +39,9 @@ export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
     'aria-expanded': React.AriaAttributes['aria-expanded'];
     'aria-selected': React.AriaAttributes['aria-selected'];
     'aria-disabled': React.AriaAttributes['aria-disabled'];
-    onFocus: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-    onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-    onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
+    onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onKeyDown: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
     ref: React.RefCallback<HTMLLIElement>;
     /**
      * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
@@ -52,8 +52,8 @@ export interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsF
 }
 export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
 export interface UseTreeItem2ContentSlotPropsFromUseTreeItem {
-    onClick: MuiCancellableEventHandler<React.MouseEvent>;
-    onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
+    onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+    onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
     ref: React.RefCallback<HTMLDivElement> | null;
     status: UseTreeItem2Status;
     /**
@@ -65,12 +65,12 @@ export interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlot
 }
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
-    onClick: MuiCancellableEventHandler<React.MouseEvent>;
+    onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
 }
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
 export interface UseTreeItem2LabelSlotOwnProps {
     children: React.ReactNode;
-    onDoubleClick: MuiCancellableEventHandler<React.MouseEvent>;
+    onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
     /**
      * Only defined when the `isItemEditable` experimental feature is enabled.
      */
@@ -83,7 +83,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
-    onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+    onChange: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
     disabled: boolean;
     ref: React.RefObject<HTMLButtonElement>;
     tabIndex: -1;
@@ -158,7 +158,7 @@ export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2Minimal
     getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2GroupTransitionSlotProps<ExternalProps>;
     /**
      * Resolver for the DragAndDropOverlay slot's props.
-     * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+     * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
      * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot.
      * @returns {UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
      */

package/internals/models/MuiCancellableEvent.d.ts

@@ -1,4 +0,0 @@
-export type MuiCancellableEvent = {
-    defaultMuiPrevented?: boolean;
-};
-export type MuiCancellableEventHandler<Event> = (event: Event & MuiCancellableEvent) => void;