@mui/x-tree-view 7.0.0-beta.7 → 7.1.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.1.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.d.ts

@@ -1,2 +1,2 @@
 import { UseTreeItem2Parameters, UseTreeItem2ReturnValue } from './useTreeItem2.types';
-export declare const useTreeItem2: <TPlugins extends [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TPlugins>;
+export declare const useTreeItem2: <TPlugins extends [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TPlugins>;

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;

package/internals/plugins/useTreeViewJSXNodes/index.d.ts

@@ -1,2 +0,0 @@
-export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';
-export type { UseTreeViewJSXNodesSignature, UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, } from './useTreeViewJSXNodes.types';

package/internals/plugins/useTreeViewJSXNodes/index.js

@@ -1 +0,0 @@
-export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewPlugin } from '../../models';
-import { UseTreeViewJSXNodesSignature } from './useTreeViewJSXNodes.types';
-export declare const useTreeViewJSXNodes: TreeViewPlugin<UseTreeViewJSXNodesSignature>;

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts

@@ -1,18 +0,0 @@
-import { TreeViewNode, TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
-import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
-export interface UseTreeViewNodesInstance {
-    insertJSXNode: (node: TreeViewNode) => void;
-    removeJSXNode: (nodeId: string) => void;
-    mapFirstCharFromJSX: (nodeId: string, firstChar: string) => () => void;
-}
-export interface UseTreeViewNodesParameters {
-}
-export interface UseTreeViewNodesDefaultizedParameters {
-}
-export type UseTreeViewJSXNodesSignature = TreeViewPluginSignature<{
-    params: UseTreeViewNodesParameters;
-    defaultizedParams: UseTreeViewNodesDefaultizedParameters;
-    instance: UseTreeViewNodesInstance;
-    dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewKeyboardNavigationSignature];
-}>;

package/internals/plugins/useTreeViewNodes/index.d.ts

@@ -1,2 +0,0 @@
-export { useTreeViewNodes } from './useTreeViewNodes';
-export type { UseTreeViewNodesSignature, UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, } from './useTreeViewNodes.types';

package/internals/plugins/useTreeViewNodes/index.js

@@ -1 +0,0 @@
-export { useTreeViewNodes } from './useTreeViewNodes';

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewPlugin } from '../../models';
-import { UseTreeViewNodesSignature } from './useTreeViewNodes.types';
-export declare const useTreeViewNodes: TreeViewPlugin<UseTreeViewNodesSignature>;

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts

@@ -1,88 +0,0 @@
-import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
-import { TreeViewItemId } from '../../../models';
-interface TreeViewNodeProps {
-    label: string;
-    nodeId: string;
-    id: string | undefined;
-    children?: TreeViewNodeProps[];
-}
-export interface UseTreeViewNodesInstance<R extends {}> {
-    getNode: (nodeId: string) => TreeViewNode;
-    getItem: (nodeId: string) => R;
-    getNodesToRender: () => TreeViewNodeProps[];
-    getChildrenIds: (nodeId: string | null) => string[];
-    getNavigableChildrenIds: (nodeId: string | null) => string[];
-    isNodeDisabled: (nodeId: string | null) => nodeId is string;
-}
-export interface UseTreeViewNodesPublicAPI<R extends {}> extends Pick<UseTreeViewNodesInstance<R>, 'getItem'> {
-}
-export interface UseTreeViewNodesParameters<R extends {}> {
-    /**
-     * If `true`, will allow focus on disabled items.
-     * @default false
-     */
-    disabledItemsFocusable?: boolean;
-    items: readonly R[];
-    /**
-     * Used to determine if a given item should be disabled.
-     * @template R
-     * @param {R} item The item to check.
-     * @returns {boolean} `true` if the item should be disabled.
-     */
-    isItemDisabled?: (item: R) => boolean;
-    /**
-     * Used to determine the string label for a given item.
-     *
-     * @template R
-     * @param {R} item The item to check.
-     * @returns {string} The label of the item.
-     * @default `(item) => item.label`
-     */
-    getItemLabel?: (item: R) => string;
-    /**
-     * Used to determine the string label for a given item.
-     *
-     * @template R
-     * @param {R} item The item to check.
-     * @returns {string} The id of the item.
-     * @default `(item) => item.id`
-     */
-    getItemId?: (item: R) => TreeViewItemId;
-}
-export type UseTreeViewNodesDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewNodesParameters<R>, 'disabledItemsFocusable'>;
-interface UseTreeViewNodesEventLookup {
-    removeNode: {
-        params: {
-            id: string;
-        };
-    };
-}
-export interface TreeViewNodeIdAndChildren {
-    id: TreeViewItemId;
-    children?: TreeViewNodeIdAndChildren[];
-}
-export interface UseTreeViewNodesState<R extends {}> {
-    nodes: {
-        nodeTree: TreeViewNodeIdAndChildren[];
-        nodeMap: TreeViewNodeMap;
-        itemMap: TreeViewItemMap<R>;
-    };
-}
-interface UseTreeViewNodesContextValue extends Pick<UseTreeViewNodesDefaultizedParameters<any>, 'disabledItemsFocusable'> {
-}
-export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
-    params: UseTreeViewNodesParameters<any>;
-    defaultizedParams: UseTreeViewNodesDefaultizedParameters<any>;
-    instance: UseTreeViewNodesInstance<any>;
-    publicAPI: UseTreeViewNodesPublicAPI<any>;
-    events: UseTreeViewNodesEventLookup;
-    state: UseTreeViewNodesState<any>;
-    contextValue: UseTreeViewNodesContextValue;
-}>;
-export type TreeViewNodeMap = {
-    [nodeId: string]: TreeViewNode;
-};
-export type TreeViewItemMap<R extends {}> = {
-    [nodeId: string]: R;
-};
-export {};

package/modern/internals/plugins/useTreeViewJSXNodes/index.js

@@ -1 +0,0 @@
-export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';

package/modern/internals/plugins/useTreeViewNodes/index.js

@@ -1 +0,0 @@
-export { useTreeViewNodes } from './useTreeViewNodes';

package/node/internals/plugins/useTreeViewJSXNodes/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useTreeViewJSXNodes", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewJSXNodes.useTreeViewJSXNodes;
-  }
-});
-var _useTreeViewJSXNodes = require("./useTreeViewJSXNodes");

package/node/internals/plugins/useTreeViewNodes/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useTreeViewNodes", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewNodes.useTreeViewNodes;
-  }
-});
-var _useTreeViewNodes = require("./useTreeViewNodes");