@mui/x-tree-view 7.20.0 → 7.21.0

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/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.20.0",
+  "version": "7.21.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

@@ -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.
      */