@mui/x-tree-view 7.19.0 → 7.21.0

package/node/TreeItem/TreeItemContent.js

@@ -81,35 +81,31 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     }
     toggleItemEditing();
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-      className: (0, _clsx.default)(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -122,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({
@@ -130,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,
   /**
@@ -142,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.19.0
+ * @mui/x-tree-view v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/RichTreeViewItems.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTreeViewItems = RichTreeViewItems;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _TreeItem = require("../../TreeItem");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? _TreeItem.TreeItem;
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
+    children: children
+  }));
+}
+function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

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/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RichTreeViewItems", {
+  enumerable: true,
+  get: function () {
+    return _RichTreeViewItems.RichTreeViewItems;
+  }
+});
 Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
   enumerable: true,
   get: function () {
@@ -95,6 +101,7 @@ Object.defineProperty(exports, "useTreeViewSelection", {
 });
 var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
+var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
 var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");

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/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.19.0",
+  "version": "7.21.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,13 +33,13 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
-    "@mui/utils": "^5.16.6",
+    "@babel/runtime": "^7.25.7",
+    "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.18.0"
+    "@mui/x-internals": "7.21.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem2/index.d.ts

@@ -1,3 +1,3 @@
 export declare const useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
 export declare const unstable_useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
-export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';
+export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2CheckboxSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';

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

@@ -83,7 +83,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onChange: MuiCancellableEventHandler<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.
      */