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

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 */ = {

package/MenuList/MenuList.mjs

@@ -1,26 +1,41 @@
 'use client';
 
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
-import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
+import { isItemFocusable } from '@mui/utils/useRovingTabIndex';
 import ownerDocument from "../utils/ownerDocument.mjs";
-import List from "../List/index.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import getScrollbarSize from "../utils/getScrollbarSize.mjs";
+import focusWithVisible from "../utils/focusWithVisible.mjs";
+import useEventCallback from "../utils/useEventCallback.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
-import { ownerWindow } from "../utils/index.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
+import ownerWindow from "../utils/ownerWindow.mjs";
+import List from "../List/index.mjs";
+import { useSelectFocusSource } from "../Select/utils/index.mjs";
+import { MenuListContext } from "./MenuListContext.mjs";
 import { jsx as _jsx } from "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;
@@ -30,20 +45,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 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) {
+  focusWithVisible(element, focusSource);
 }
 
 /**
@@ -57,8 +69,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,
@@ -68,17 +80,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 = useSelectFocusSource();
   const textCriteriaRef = React.useRef({
     keys: [],
     repeating: true,
     previousKeyMatched: true,
     lastTime: null
   });
-  useEnhancedEffect(() => {
-    if (autoFocus) {
+  const getDefaultActiveItemId = React.useCallback(items => {
+    if (variant === 'selectedMenu') {
+      return items.find(item => item.selected && isItemFocusable(item))?.id ?? items.find(item => isItemFocusable(item))?.id ?? null;
+    }
+    return items.find(item => isItemFocusable(item))?.id ?? null;
+  }, [variant]);
+  const rovingContainer = useRovingTabIndexRoot({
+    activeItemId: undefined,
+    getDefaultActiveItemId,
+    orientation: 'vertical',
+    wrap: !disableListWrap
+  });
+  const {
+    activeItemId,
+    focusNext,
+    getActiveItem,
+    getContainerProps,
+    getItemMap
+  } = rovingContainer;
+  const focusInitialTarget = useEventCallback((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;
+  });
+  useEnhancedEffect(() => {
+    if (!autoFocusList && !autoFocusActiveItem) {
+      hasFocusedInitialTargetRef.current = false;
+      setSuppressInitialFocusVisible(false);
+      return undefined;
+    }
+    focusInitialTarget();
+    return undefined;
+  }, [activeItemId, autoFocusActiveItem, autoFocusList, focusInitialTarget]);
   React.useImperativeHandle(actions, () => ({
     adjustStyleForScrollbar: (containerElement, {
       direction
@@ -92,86 +172,35 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         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 (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 = getActiveElement(ownerDocument(listRef.current));
+      if (currentFocus && listRef.current.contains(currentFocus)) {
+        return currentFocus;
       }
+      return focusInitialTarget(true);
     }
-  });
-  const {
-    focusNext,
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    focusableIndex: activeItemIndex,
-    orientation: 'vertical',
-    shouldWrap: !disableListWrap,
-    shouldFocus: element => shouldFocus(element, disabledItemsFocusable)
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
-  const handleRef = useForkRef(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 = useForkRef(listRef, rovingContainerProps.ref, ref);
+  const menuListContextValue = React.useMemo(() => ({
+    itemsFocusableWhenDisabled: disabledItemsFocusable,
+    suppressInitialFocusVisible,
+    variant
+  }), [disabledItemsFocusable, suppressInitialFocusVisible, variant]);
+  const handleKeyDown = useEventCallback(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();
@@ -190,7 +219,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       criteria.keys.push(lowerKey);
       const currentFocus = getActiveElement(ownerDocument(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;
@@ -199,16 +228,22 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     if (onKeyDown) {
       onKeyDown(event);
     }
-  };
+  });
   return /*#__PURE__*/_jsx(List, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    onFocus: rovingTabIndexContainerProps.onFocus,
+    onFocus: rovingContainerProps.onFocus,
     tabIndex: -1,
     ...other,
-    children: items
+    children: /*#__PURE__*/_jsx(MenuListContext.Provider, {
+      value: menuListContextValue,
+      children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+        value: rovingContainer,
+        children: children
+      })
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? MenuList.propTypes /* remove-proptypes */ = {

package/MenuList/MenuListContext.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export interface MenuListContextValue {
+  itemsFocusableWhenDisabled: boolean;
+  suppressInitialFocusVisible: boolean;
+  variant: 'menu' | 'selectedMenu';
+}
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare function useMenuListContext(): MenuListContextValue;

package/MenuList/MenuListContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export interface MenuListContextValue {
+  itemsFocusableWhenDisabled: boolean;
+  suppressInitialFocusVisible: boolean;
+  variant: 'menu' | 'selectedMenu';
+}
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare function useMenuListContext(): MenuListContextValue;