@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

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,

package/MenuList/MenuList.js

@@ -8,26 +8,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
+var _useRovingTabIndex = require("@mui/utils/useRovingTabIndex");
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
-var _List = _interopRequireDefault(require("../List"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _getScrollbarSize = _interopRequireDefault(require("../utils/getScrollbarSize"));
+var _focusWithVisible = _interopRequireDefault(require("../utils/focusWithVisible"));
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
-var _utils = require("../utils");
+var _useRovingTabIndex2 = require("../utils/useRovingTabIndex");
+var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
+var _List = _interopRequireDefault(require("../List"));
+var _utils = require("../Select/utils");
+var _MenuListContext = require("./MenuListContext");
 var _jsxRuntime = require("react/jsx-runtime");
-function textCriteriaMatches(nextFocus, textCriteria) {
-  if (textCriteria === undefined) {
-    return true;
+function getItemText(itemOrElement) {
+  const element = itemOrElement?.element ?? itemOrElement;
+  if (!element) {
+    return '';
   }
-  let text = nextFocus.innerText;
+  if (itemOrElement?.textValue !== undefined) {
+    return itemOrElement.textValue;
+  }
+  let text = element.innerText;
   if (text === undefined) {
     // jsdom doesn't support innerText
-    text = nextFocus.textContent;
+    text = element.textContent;
   }
+  return text ?? '';
+}
+function textCriteriaMatches(itemOrElement, textCriteria) {
+  if (textCriteria === undefined) {
+    return true;
+  }
+  let text = getItemText(itemOrElement);
   text = text.trim().toLowerCase();
   if (text.length === 0) {
     return false;
@@ -37,20 +52,17 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   }
   return text.startsWith(textCriteria.keys.join(''));
 }
-function shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable) {
-  if (!textCriteriaMatches(element, criteria)) {
+function isItemFocusableWithTextCriteria(item, criteria) {
+  if (!textCriteriaMatches(item, criteria)) {
     return false;
   }
-  return shouldFocus(element, disabledItemsFocusable);
+  return (0, _useRovingTabIndex.isItemFocusable)(item);
 }
-function shouldFocus(element, disabledItemsFocusable) {
-  if (!element || !element.hasAttribute('tabindex')) {
-    return false;
-  }
-  if (disabledItemsFocusable) {
-    return true;
-  }
-  return !element.disabled && element.getAttribute('aria-disabled') !== 'true';
+
+// Menu auto-focus is not always keyboard-driven. On open we often move focus to the
+// active item programmatically so arrow-key navigation starts from the right place.
+function focusInitialItem(element, focusSource) {
+  (0, _focusWithVisible.default)(element, focusSource);
 }
 
 /**
@@ -64,8 +76,8 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     // private
     // eslint-disable-next-line react/prop-types
     actions,
-    autoFocus = false,
-    autoFocusItem = false,
+    autoFocus: autoFocusList = false,
+    autoFocusItem: autoFocusActiveItem = false,
     children,
     className,
     disabledItemsFocusable = false,
@@ -75,17 +87,85 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     ...other
   } = props;
   const listRef = React.useRef(null);
+  const hasFocusedInitialTargetRef = React.useRef(false);
+  // Escape hatch for <Menu variant="menu"> (items have no selection state). When opened with
+  // mouse/pointer, the initial focused item should still receive DOM focus, but ButtonBase
+  // should suppress its focus-visible state for that one initial handoff.
+  const [suppressInitialFocusVisible, setSuppressInitialFocusVisible] = React.useState(false);
+  // Current anchored <Menu>s cannot receive a `openInteractionType` signal from a trigger
+  // the API only receives `open` and `anchorEl`. When <MenuList> is used in <Select>, the
+  // internal <SelectInput> is able to achieve this via `useSelectFocusSource`.
+  const focusSource = (0, _utils.useSelectFocusSource)();
   const textCriteriaRef = React.useRef({
     keys: [],
     repeating: true,
     previousKeyMatched: true,
     lastTime: null
   });
-  (0, _useEnhancedEffect.default)(() => {
-    if (autoFocus) {
+  const getDefaultActiveItemId = React.useCallback(items => {
+    if (variant === 'selectedMenu') {
+      return items.find(item => item.selected && (0, _useRovingTabIndex.isItemFocusable)(item))?.id ?? items.find(item => (0, _useRovingTabIndex.isItemFocusable)(item))?.id ?? null;
+    }
+    return items.find(item => (0, _useRovingTabIndex.isItemFocusable)(item))?.id ?? null;
+  }, [variant]);
+  const rovingContainer = (0, _useRovingTabIndex2.useRovingTabIndexRoot)({
+    activeItemId: undefined,
+    getDefaultActiveItemId,
+    orientation: 'vertical',
+    wrap: !disableListWrap
+  });
+  const {
+    activeItemId,
+    focusNext,
+    getActiveItem,
+    getContainerProps,
+    getItemMap
+  } = rovingContainer;
+  const focusInitialTarget = (0, _useEventCallback.default)((force = false) => {
+    // `force` is used by the imperative action when `Menu` asks `MenuList` to restore its
+    // initial focus target after the popover finishes entering, even if this list already
+    // completed its normal one-time initial-focus path on an earlier render.
+    if (!listRef.current || !force && hasFocusedInitialTargetRef.current) {
+      return null;
+    }
+    if (autoFocusActiveItem) {
+      const activeItem = getActiveItem();
+      if (activeItem?.element) {
+        const hasSelectedItem = Array.from(getItemMap().values()).some(item => item.selected);
+        const shouldSuppressInitialFocusVisible = variant === 'menu' && hasSelectedItem && !activeItem.selected && focusSource == null;
+        setSuppressInitialFocusVisible(shouldSuppressInitialFocusVisible);
+        focusInitialItem(activeItem.element, focusSource);
+        hasFocusedInitialTargetRef.current = true;
+        return activeItem.element;
+      }
+      if (!autoFocusList) {
+        return null;
+      }
+
+      // Keep the list container focusable while waiting for items to register,
+      // or when there is no focusable item to move to.
+      setSuppressInitialFocusVisible(false);
       listRef.current.focus();
+      return listRef.current;
     }
-  }, [autoFocus]);
+    if (!autoFocusList) {
+      setSuppressInitialFocusVisible(false);
+      return null;
+    }
+    setSuppressInitialFocusVisible(false);
+    listRef.current.focus();
+    hasFocusedInitialTargetRef.current = true;
+    return listRef.current;
+  });
+  (0, _useEnhancedEffect.default)(() => {
+    if (!autoFocusList && !autoFocusActiveItem) {
+      hasFocusedInitialTargetRef.current = false;
+      setSuppressInitialFocusVisible(false);
+      return undefined;
+    }
+    focusInitialTarget();
+    return undefined;
+  }, [activeItemId, autoFocusActiveItem, autoFocusList, focusInitialTarget]);
   React.useImperativeHandle(actions, () => ({
     adjustStyleForScrollbar: (containerElement, {
       direction
@@ -94,91 +174,40 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
-        const scrollbarSize = `${(0, _getScrollbarSize.default)((0, _utils.ownerWindow)(containerElement))}px`;
+        const scrollbarSize = `${(0, _getScrollbarSize.default)((0, _ownerWindow.default)(containerElement))}px`;
         listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
       return listRef.current;
-    }
-  }), []);
-
-  /**
-   * 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.forEach(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      if (activeItemIndex === index) {
-        activeItemIndex += 1;
-        if (activeItemIndex >= children.length) {
-          // there are no focusable items within the list.
-          activeItemIndex = -1;
-        }
-      }
-      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;
+    },
+    focusInitialTarget: () => {
+      if (!listRef.current) {
+        return null;
       }
-    }
-    if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
-      activeItemIndex += 1;
-      if (activeItemIndex >= children.length) {
-        // there are no focusable items within the list.
-        activeItemIndex = -1;
+      const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(listRef.current));
+      if (currentFocus && listRef.current.contains(currentFocus)) {
+        return currentFocus;
       }
+      return focusInitialTarget(true);
     }
-  });
-  const {
-    focusNext,
-    getContainerProps,
-    getItemProps
-  } = (0, _useRovingTabIndex.default)({
-    focusableIndex: activeItemIndex,
-    orientation: 'vertical',
-    shouldWrap: !disableListWrap,
-    shouldFocus: element => shouldFocus(element, disabledItemsFocusable)
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
-  const handleRef = (0, _useForkRef.default)(listRef, rovingTabIndexContainerProps.ref, ref);
-  let focusableIndex = 0;
-  const items = React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child) || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight) {
-      return child;
-    }
-    const rovingTabIndexItemProps = getItemProps(focusableIndex, child.ref);
-    const newChildProps = {
-      ref: rovingTabIndexItemProps.ref
-    };
-    if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
-      newChildProps.tabIndex = rovingTabIndexItemProps.tabIndex;
+  }), [focusInitialTarget]);
+  const rovingContainerProps = getContainerProps();
+  const handleRef = (0, _useForkRef.default)(listRef, rovingContainerProps.ref, ref);
+  const menuListContextValue = React.useMemo(() => ({
+    itemsFocusableWhenDisabled: disabledItemsFocusable,
+    suppressInitialFocusVisible,
+    variant
+  }), [disabledItemsFocusable, suppressInitialFocusVisible, variant]);
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
+    if (suppressInitialFocusVisible) {
+      setSuppressInitialFocusVisible(false);
     }
-    if (index === activeItemIndex && autoFocusItem) {
-      newChildProps.autoFocus = true;
-    }
-    focusableIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, newChildProps);
-  });
-  const handleKeyDown = event => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
     if (isModifierKeyPressed && onKeyDown) {
       onKeyDown(event);
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
     if (event.key.length === 1) {
       const criteria = textCriteriaRef.current;
       const lowerKey = event.key.toLowerCase();
@@ -197,7 +226,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       criteria.keys.push(lowerKey);
       const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(listRef.current));
       const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
-      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(element => shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable)) !== -1)) {
+      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(item => isItemFocusableWithTextCriteria(item, criteria)) != null)) {
         event.preventDefault();
       } else {
         criteria.previousKeyMatched = false;
@@ -206,16 +235,22 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     if (onKeyDown) {
       onKeyDown(event);
     }
-  };
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    onFocus: rovingTabIndexContainerProps.onFocus,
+    onFocus: rovingContainerProps.onFocus,
     tabIndex: -1,
     ...other,
-    children: items
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuListContext.MenuListContext.Provider, {
+      value: menuListContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex2.RovingTabIndexContext.Provider, {
+        value: rovingContainer,
+        children: children
+      })
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? MenuList.propTypes /* remove-proptypes */ = {