@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/Menu/Menu.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MenuPaper = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
@@ -92,13 +91,17 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
-  const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
+  const shouldManageInitialFocus = autoFocus && open; // `&& open` prevents a Menu with `keepMounted={true}` from accidentally stealing focus
+  const shouldAutoFocusActiveItem = shouldManageInitialFocus && !disableAutoFocusItem;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, _isAppearing) => {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, {
         direction: isRtl ? 'rtl' : 'ltr'
       });
+      if (shouldManageInitialFocus) {
+        menuListActionsRef.current.focusInitialTarget?.();
+      }
     }
   };
   const handleListKeyDown = event => {
@@ -109,33 +112,6 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   };
-
-  /**
-   * the index of the item should receive focus
-   * in a `variant="selectedMenu"` it's the first `selected` item
-   * otherwise it's the very first item.
-   */
-  let activeItemIndex = -1;
-  // since we inject focus related props into children we have to do a lookahead
-  // to check if there is a `selected` item. We're looking for the last `selected`
-  // item and use the first valid item as a fallback
-  React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if ((0, _reactIs.isFragment)(child)) {
-        console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-      }
-    }
-    if (!child.props.disabled) {
-      if (variant === 'selectedMenu' && child.props.selected) {
-        activeItemIndex = index;
-      } else if (activeItemIndex === -1) {
-        activeItemIndex = index;
-      }
-    }
-  });
   const externalForwardedProps = {
     slots,
     slotProps
@@ -168,7 +144,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ownerState
   });
   const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuRoot
+  // `disableAutoFocus={autoFocus}` is NOT a mistake
+  //   - `autoFocus` means `Menu` will control focus and move it into `MenuList` or an active `MenuItem`
+  //   - `disableAutoFocus` means disable `MenuRoot`s underlying `Popover`'s autoFocus handling
+  // This prevents `MenuList` and `Popover` from fighting each other to control focus.
+  // (This has nothing to do with DOM `autoFocus`)
+  , {
+    disableAutoFocus: autoFocus,
     onClose: onClose,
     anchorOrigin: {
       vertical: 'bottom',
@@ -201,8 +184,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     classes: PopoverClasses,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSlot, {
       actions: menuListActionsRef,
-      autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
-      autoFocusItem: autoFocusItem,
+      autoFocus: shouldManageInitialFocus,
+      autoFocusItem: shouldAutoFocusActiveItem,
       variant: variant,
       ...listSlotProps,
       children: children

package/Menu/Menu.mjs

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import HTMLElementType from '@mui/utils/HTMLElementType';
@@ -85,13 +84,17 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
-  const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
+  const shouldManageInitialFocus = autoFocus && open; // `&& open` prevents a Menu with `keepMounted={true}` from accidentally stealing focus
+  const shouldAutoFocusActiveItem = shouldManageInitialFocus && !disableAutoFocusItem;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, _isAppearing) => {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, {
         direction: isRtl ? 'rtl' : 'ltr'
       });
+      if (shouldManageInitialFocus) {
+        menuListActionsRef.current.focusInitialTarget?.();
+      }
     }
   };
   const handleListKeyDown = event => {
@@ -102,33 +105,6 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   };
-
-  /**
-   * the index of the item should receive focus
-   * in a `variant="selectedMenu"` it's the first `selected` item
-   * otherwise it's the very first item.
-   */
-  let activeItemIndex = -1;
-  // since we inject focus related props into children we have to do a lookahead
-  // to check if there is a `selected` item. We're looking for the last `selected`
-  // item and use the first valid item as a fallback
-  React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (isFragment(child)) {
-        console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-      }
-    }
-    if (!child.props.disabled) {
-      if (variant === 'selectedMenu' && child.props.selected) {
-        activeItemIndex = index;
-      } else if (activeItemIndex === -1) {
-        activeItemIndex = index;
-      }
-    }
-  });
   const externalForwardedProps = {
     slots,
     slotProps
@@ -161,7 +137,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ownerState
   });
   const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
-  return /*#__PURE__*/_jsx(MenuRoot, {
+  return /*#__PURE__*/_jsx(MenuRoot
+  // `disableAutoFocus={autoFocus}` is NOT a mistake
+  //   - `autoFocus` means `Menu` will control focus and move it into `MenuList` or an active `MenuItem`
+  //   - `disableAutoFocus` means disable `MenuRoot`s underlying `Popover`'s autoFocus handling
+  // This prevents `MenuList` and `Popover` from fighting each other to control focus.
+  // (This has nothing to do with DOM `autoFocus`)
+  , {
+    disableAutoFocus: autoFocus,
     onClose: onClose,
     anchorOrigin: {
       vertical: 'bottom',
@@ -194,8 +177,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     classes: PopoverClasses,
     children: /*#__PURE__*/_jsx(ListSlot, {
       actions: menuListActionsRef,
-      autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
-      autoFocusItem: autoFocusItem,
+      autoFocus: shouldManageInitialFocus,
+      autoFocusItem: shouldAutoFocusActiveItem,
       variant: variant,
       ...listSlotProps,
       children: children

package/MenuItem/MenuItem.js

@@ -18,30 +18,17 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _focusWithVisible = _interopRequireDefault(require("../utils/focusWithVisible"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _useId = _interopRequireDefault(require("../utils/useId"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _Divider = require("../Divider");
 var _ListItemIcon = require("../ListItemIcon");
 var _ListItemText = require("../ListItemText");
+var _MenuListContext = require("../MenuList/MenuListContext");
+var _utils = require("../Select/utils");
 var _menuItemClasses = _interopRequireWildcard(require("./menuItemClasses"));
-var _Select = require("../Select");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * If autoFocus is an object, it will attempt to call `element.focus()` with the options argument.
- * If the browser doesn't support the options argument, it will fall back to a simple `element.focus()` call.
- */function focusWithVisible(element, focusSource) {
-  if (focusSource == null) {
-    element.focus();
-    return;
-  }
-  try {
-    element.focus({
-      focusVisible: focusSource === 'keyboard'
-    });
-  } catch (error) {
-    // If the browser doesn't support the focus options argument, fall back to a simple focus call.
-    element.focus();
-  }
-}
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -177,7 +164,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     name: 'MuiMenuItem'
   });
   const {
-    autoFocus = false,
+    autoFocus: shouldAutoFocusOnMount = false,
     component = 'li',
     dense = false,
     divider = false,
@@ -188,23 +175,30 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     className,
     ...other
   } = props;
-  const focusSource = (0, _Select.useSelectFocusSource)();
+  const focusSource = (0, _utils.useSelectFocusSource)();
   const context = React.useContext(_ListContext.default);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
   }), [context.dense, dense, disableGutters]);
+  const menuListContext = (0, _MenuListContext.useMenuListContext)();
+  const rovingItemId = (0, _useId.default)();
+  // Escape hatch via ButtonBase for when an anchored <Menu> is opened with a pointer
+  // interaction on a trigger, the item should receive DOM focus but without focus visible
+  // styling. Current API does not allow a reliable `openInteractionType` for anchored menus.
+  const suppressFocusVisible = menuListContext.suppressInitialFocusVisible;
+  const itemsFocusableWhenDisabled = menuListContext.itemsFocusableWhenDisabled;
   const menuItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
-    if (autoFocus) {
+    if (shouldAutoFocusOnMount) {
       if (menuItemRef.current) {
-        focusWithVisible(menuItemRef.current, focusSource);
+        (0, _focusWithVisible.default)(menuItemRef.current, focusSource);
       } else if (process.env.NODE_ENV !== 'production') {
         console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocus]);
+  }, [shouldAutoFocusOnMount]);
   const ownerState = {
     ...props,
     dense: childContext.dense,
@@ -212,10 +206,23 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters
   };
   const classes = useUtilityClasses(props);
-  const handleRef = (0, _useForkRef.default)(menuItemRef, ref);
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: rovingItemId,
+    ref,
+    disabled: props.disabled,
+    focusableWhenDisabled: itemsFocusableWhenDisabled,
+    selected: props.selected
+  });
+  const handleRef = (0, _useForkRef.default)(menuItemRef, rovingItemProps.ref);
   let tabIndex;
-  if (!props.disabled) {
-    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+  if (tabIndexProp !== undefined) {
+    tabIndex = tabIndexProp;
+  } else if (menuListContext.variant === 'selectedMenu') {
+    tabIndex = rovingItemProps.tabIndex;
+  } else if (!props.disabled || itemsFocusableWhenDisabled) {
+    // In `menu` variant, registration still drives arrow-key navigation even
+    // though each item keeps `tabIndex={-1}`.
+    tabIndex = -1;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
     value: childContext,
@@ -224,6 +231,9 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
+      internalNativeButton: false,
+      focusableWhenDisabled: itemsFocusableWhenDisabled,
+      suppressFocusVisible: suppressFocusVisible,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
       className: (0, _clsx.default)(classes.root, className),
       ...other,

package/MenuItem/MenuItem.mjs

@@ -11,32 +11,17 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ListContext from "../List/ListContext.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
+import focusWithVisible from "../utils/focusWithVisible.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
+import useId from "../utils/useId.mjs";
+import { useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
 import { dividerClasses } from "../Divider/index.mjs";
 import { listItemIconClasses } from "../ListItemIcon/index.mjs";
 import { listItemTextClasses } from "../ListItemText/index.mjs";
+import { useMenuListContext } from "../MenuList/MenuListContext.mjs";
+import { useSelectFocusSource } from "../Select/utils/index.mjs";
 import menuItemClasses, { getMenuItemUtilityClass } from "./menuItemClasses.mjs";
-import { useSelectFocusSource } from "../Select/index.mjs";
-
-/**
- * If autoFocus is an object, it will attempt to call `element.focus()` with the options argument.
- * If the browser doesn't support the options argument, it will fall back to a simple `element.focus()` call.
- */
 import { jsx as _jsx } from "react/jsx-runtime";
-function focusWithVisible(element, focusSource) {
-  if (focusSource == null) {
-    element.focus();
-    return;
-  }
-  try {
-    element.focus({
-      focusVisible: focusSource === 'keyboard'
-    });
-  } catch (error) {
-    // If the browser doesn't support the focus options argument, fall back to a simple focus call.
-    element.focus();
-  }
-}
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -171,7 +156,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     name: 'MuiMenuItem'
   });
   const {
-    autoFocus = false,
+    autoFocus: shouldAutoFocusOnMount = false,
     component = 'li',
     dense = false,
     divider = false,
@@ -188,9 +173,16 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     dense: dense || context.dense || false,
     disableGutters
   }), [context.dense, dense, disableGutters]);
+  const menuListContext = useMenuListContext();
+  const rovingItemId = useId();
+  // Escape hatch via ButtonBase for when an anchored <Menu> is opened with a pointer
+  // interaction on a trigger, the item should receive DOM focus but without focus visible
+  // styling. Current API does not allow a reliable `openInteractionType` for anchored menus.
+  const suppressFocusVisible = menuListContext.suppressInitialFocusVisible;
+  const itemsFocusableWhenDisabled = menuListContext.itemsFocusableWhenDisabled;
   const menuItemRef = React.useRef(null);
   useEnhancedEffect(() => {
-    if (autoFocus) {
+    if (shouldAutoFocusOnMount) {
       if (menuItemRef.current) {
         focusWithVisible(menuItemRef.current, focusSource);
       } else if (process.env.NODE_ENV !== 'production') {
@@ -198,7 +190,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocus]);
+  }, [shouldAutoFocusOnMount]);
   const ownerState = {
     ...props,
     dense: childContext.dense,
@@ -206,10 +198,23 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters
   };
   const classes = useUtilityClasses(props);
-  const handleRef = useForkRef(menuItemRef, ref);
+  const rovingItemProps = useRovingTabIndexItem({
+    id: rovingItemId,
+    ref,
+    disabled: props.disabled,
+    focusableWhenDisabled: itemsFocusableWhenDisabled,
+    selected: props.selected
+  });
+  const handleRef = useForkRef(menuItemRef, rovingItemProps.ref);
   let tabIndex;
-  if (!props.disabled) {
-    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+  if (tabIndexProp !== undefined) {
+    tabIndex = tabIndexProp;
+  } else if (menuListContext.variant === 'selectedMenu') {
+    tabIndex = rovingItemProps.tabIndex;
+  } else if (!props.disabled || itemsFocusableWhenDisabled) {
+    // In `menu` variant, registration still drives arrow-key navigation even
+    // though each item keeps `tabIndex={-1}`.
+    tabIndex = -1;
   }
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
@@ -218,6 +223,9 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
+      internalNativeButton: false,
+      focusableWhenDisabled: itemsFocusableWhenDisabled,
+      suppressFocusVisible: suppressFocusVisible,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       className: clsx(classes.root, className),
       ...other,