@mui/x-tree-view 7.0.0-beta.7 → 7.0.0

package/node/useTreeItem2/useTreeItem2.js

@@ -22,7 +22,7 @@ const useTreeItem2 = parameters => {
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const {
     id,
-    nodeId,
+    itemId,
     label,
     children,
     rootRef
@@ -35,25 +35,34 @@ const useTreeItem2 = parameters => {
     interactions,
     status
   } = (0, _useTreeItem2Utils.useTreeItem2Utils)({
-    nodeId,
+    itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(nodeId, id);
+  const idAttribute = instance.getTreeItemId(itemId, id);
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !status.disabled || disabledItemsFocusable;
     if (!status.focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
+    }
+  };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    instance.removeFocusedItem();
+  };
+  const createRootHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
     }
+    instance.handleItemKeyDown(event, itemId);
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
@@ -83,7 +92,7 @@ const useTreeItem2 = parameters => {
       /* 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 node and it is not present on any other node in the tree.
+       * 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/
        */
       ariaSelected = true;
@@ -91,13 +100,15 @@ const useTreeItem2 = parameters => {
     return (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: -1,
+      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
-      onFocus: createRootHandleFocus(externalEventHandlers)
+      onFocus: createRootHandleFocus(externalEventHandlers),
+      onBlur: createRootHandleBlur(externalEventHandlers),
+      onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
   };
   const getContentProps = (externalProps = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.0.0-beta.7",
+  "version": "7.0.0",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,9 +33,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@mui/base": "^5.0.0-beta.36",
-    "@mui/system": "^5.15.9",
-    "@mui/utils": "^5.15.9",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
@@ -44,7 +44,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.0",
+    "@mui/material": "^5.15.14",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/useTreeItem2/useTreeItem2.js

@@ -15,7 +15,7 @@ export const useTreeItem2 = parameters => {
   } = useTreeViewContext();
   const {
     id,
-    nodeId,
+    itemId,
     label,
     children,
     rootRef
@@ -28,30 +28,37 @@ export const useTreeItem2 = parameters => {
     interactions,
     status
   } = useTreeItem2Utils({
-    nodeId,
+    itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(nodeId, id);
+  const idAttribute = instance.getTreeItemId(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
-    var _otherHandlers$onFocu;
-    (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
+    otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !status.disabled || disabledItemsFocusable;
     if (!status.focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
+    }
+  };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    instance.removeFocusedItem();
+  };
+  const createRootHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
     }
+    instance.handleItemKeyDown(event, itemId);
   };
   const createContentHandleClick = otherHandlers => event => {
-    var _otherHandlers$onClic;
-    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
+    otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
@@ -59,8 +66,7 @@ export const useTreeItem2 = parameters => {
     interactions.handleSelection(event);
   };
   const createContentHandleMouseDown = otherHandlers => event => {
-    var _otherHandlers$onMous;
-    (_otherHandlers$onMous = otherHandlers.onMouseDown) == null || _otherHandlers$onMous.call(otherHandlers, event);
+    otherHandlers.onMouseDown?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
@@ -79,7 +85,7 @@ export const useTreeItem2 = parameters => {
       /* 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 node and it is not present on any other node in the tree.
+       * 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/
        */
       ariaSelected = true;
@@ -87,13 +93,15 @@ export const useTreeItem2 = parameters => {
     return _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: -1,
+      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
-      onFocus: createRootHandleFocus(externalEventHandlers)
+      onFocus: createRootHandleFocus(externalEventHandlers),
+      onBlur: createRootHandleBlur(externalEventHandlers),
+      onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
   };
   const getContentProps = (externalProps = {}) => {

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -4,21 +4,21 @@ import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEv
 import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
 export interface UseTreeItem2Parameters {
     /**
-     * The id attribute of the node. If not provided, it will be generated.
+     * The id attribute of the item. If not provided, it will be generated.
      */
     id?: string;
     /**
-     * If `true`, the node is disabled.
+     * If `true`, the item is disabled.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of the node.
+     * The id of the item.
      * Must be unique.
      */
-    nodeId: TreeViewItemId;
+    itemId: TreeViewItemId;
     /**
-     * The label of the node.
+     * The label of the item.
      */
     label?: React.ReactNode;
     rootRef?: React.Ref<HTMLLIElement>;
@@ -29,12 +29,14 @@ export interface UseTreeItem2Parameters {
 }
 export interface UseTreeItem2RootSlotOwnProps {
     role: 'treeitem';
-    tabIndex: -1;
+    tabIndex: 0 | -1;
     id: string;
     'aria-expanded': React.AriaAttributes['aria-expanded'];
     'aria-selected': React.AriaAttributes['aria-selected'];
     'aria-disabled': React.AriaAttributes['aria-disabled'];
-    onFocus: MuiCancellableEventHandler<React.FocusEvent>;
+    onFocus: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
     ref: React.RefCallback<HTMLLIElement>;
 }
 export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;