@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Menu/Menu.d.mts

@@ -101,12 +101,6 @@ export interface MenuProps extends StandardProps<Omit<PopoverProps, 'slots' | 's
    * @default false
    */
   disableAutoFocusItem?: boolean | undefined;
-  /**
-   * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
-   * @deprecated use the `slotProps.list` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  MenuListProps?: Partial<MenuListProps> | undefined;
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -131,13 +125,6 @@ export interface MenuProps extends StandardProps<Omit<PopoverProps, 'slots' | 's
    * @default 'auto'
    */
   transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TransitionProps?: TransitionProps | undefined;
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
    * @default 'selectedMenu'

package/Menu/Menu.d.ts

@@ -101,12 +101,6 @@ export interface MenuProps extends StandardProps<Omit<PopoverProps, 'slots' | 's
    * @default false
    */
   disableAutoFocusItem?: boolean | undefined;
-  /**
-   * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
-   * @deprecated use the `slotProps.list` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  MenuListProps?: Partial<MenuListProps> | undefined;
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -131,13 +125,6 @@ export interface MenuProps extends StandardProps<Omit<PopoverProps, 'slots' | 's
    * @default 'auto'
    */
   transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TransitionProps?: TransitionProps | undefined;
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
    * @default 'selectedMenu'

package/Menu/Menu.js

@@ -10,7 +10,6 @@ exports.default = exports.MenuPaper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _RtlProvider = require("@mui/system/RtlProvider");
@@ -75,16 +74,10 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     children,
     className,
     disableAutoFocusItem = false,
-    MenuListProps = {},
     onClose,
     open,
-    PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
-    TransitionProps: {
-      onEntering,
-      ...TransitionProps
-    } = {},
     variant = 'selectedMenu',
     slots = {},
     slotProps = {},
@@ -95,25 +88,18 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ...props,
     autoFocus,
     disableAutoFocusItem,
-    MenuListProps,
-    onEntering,
-    PaperProps,
     transitionDuration,
-    TransitionProps,
     variant
   };
   const classes = useUtilityClasses(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
-  const handleEntering = (element, isAppearing) => {
+  const handleEntering = (element, _isAppearing) => {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, {
         direction: isRtl ? 'rtl' : 'ltr'
       });
     }
-    if (onEntering) {
-      onEntering(element, isAppearing);
-    }
   };
   const handleListKeyDown = event => {
     if (event.key === 'Tab') {
@@ -152,12 +138,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   });
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      list: MenuListProps,
-      transition: TransitionProps,
-      paper: PaperProps,
-      ...slotProps
-    }
+    slotProps
   };
   const rootSlotProps = (0, _useSlotProps.default)({
     elementType: slots.root,
@@ -173,7 +154,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ownerState
   });
   const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
-    className: (0, _clsx.default)(classes.list, MenuListProps.className),
+    className: classes.list,
     elementType: MenuMenuList,
     shouldForwardComponentProp: true,
     externalForwardedProps,
@@ -186,7 +167,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     }),
     ownerState
   });
-  const resolvedTransitionProps = typeof externalForwardedProps.slotProps.transition === 'function' ? externalForwardedProps.slotProps.transition(ownerState) : externalForwardedProps.slotProps.transition;
+  const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -198,10 +179,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       root: slots.root,
       paper: PaperSlot,
       backdrop: slots.backdrop,
-      ...(slots.transition && {
-        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
-        transition: slots.transition
-      })
+      transition: slots.transition
     },
     slotProps: {
       root: rootSlotProps,
@@ -269,12 +247,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * @default false
    */
   disableAutoFocusItem: _propTypes.default.bool,
-  /**
-   * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
-   * @deprecated use the `slotProps.list` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  MenuListProps: _propTypes.default.object,
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -286,10 +258,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool.isRequired,
-  /**
-   * @ignore
-   */
-  PaperProps: _propTypes.default.object,
   /**
    * `classes` prop applied to the [`Popover`](https://mui.com/material-ui/api/popover/) element.
    */
@@ -329,13 +297,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
     enter: _propTypes.default.number,
     exit: _propTypes.default.number
   })]),
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TransitionProps: _propTypes.default.object,
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
    * @default 'selectedMenu'

package/Menu/Menu.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useRtl } from '@mui/system/RtlProvider';
@@ -68,16 +67,10 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     children,
     className,
     disableAutoFocusItem = false,
-    MenuListProps = {},
     onClose,
     open,
-    PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
-    TransitionProps: {
-      onEntering,
-      ...TransitionProps
-    } = {},
     variant = 'selectedMenu',
     slots = {},
     slotProps = {},
@@ -88,25 +81,18 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ...props,
     autoFocus,
     disableAutoFocusItem,
-    MenuListProps,
-    onEntering,
-    PaperProps,
     transitionDuration,
-    TransitionProps,
     variant
   };
   const classes = useUtilityClasses(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
-  const handleEntering = (element, isAppearing) => {
+  const handleEntering = (element, _isAppearing) => {
     if (menuListActionsRef.current) {
       menuListActionsRef.current.adjustStyleForScrollbar(element, {
         direction: isRtl ? 'rtl' : 'ltr'
       });
     }
-    if (onEntering) {
-      onEntering(element, isAppearing);
-    }
   };
   const handleListKeyDown = event => {
     if (event.key === 'Tab') {
@@ -145,12 +131,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   });
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      list: MenuListProps,
-      transition: TransitionProps,
-      paper: PaperProps,
-      ...slotProps
-    }
+    slotProps
   };
   const rootSlotProps = useSlotProps({
     elementType: slots.root,
@@ -166,7 +147,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ownerState
   });
   const [ListSlot, listSlotProps] = useSlot('list', {
-    className: clsx(classes.list, MenuListProps.className),
+    className: classes.list,
     elementType: MenuMenuList,
     shouldForwardComponentProp: true,
     externalForwardedProps,
@@ -179,7 +160,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     }),
     ownerState
   });
-  const resolvedTransitionProps = typeof externalForwardedProps.slotProps.transition === 'function' ? externalForwardedProps.slotProps.transition(ownerState) : externalForwardedProps.slotProps.transition;
+  const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
   return /*#__PURE__*/_jsx(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
@@ -191,10 +172,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       root: slots.root,
       paper: PaperSlot,
       backdrop: slots.backdrop,
-      ...(slots.transition && {
-        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
-        transition: slots.transition
-      })
+      transition: slots.transition
     },
     slotProps: {
       root: rootSlotProps,
@@ -262,12 +240,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * @default false
    */
   disableAutoFocusItem: PropTypes.bool,
-  /**
-   * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
-   * @deprecated use the `slotProps.list` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  MenuListProps: PropTypes.object,
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -279,10 +251,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-  /**
-   * @ignore
-   */
-  PaperProps: PropTypes.object,
   /**
    * `classes` prop applied to the [`Popover`](https://mui.com/material-ui/api/popover/) element.
    */
@@ -322,13 +290,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
     enter: PropTypes.number,
     exit: PropTypes.number
   })]),
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TransitionProps: PropTypes.object,
   /**
    * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
    * @default 'selectedMenu'

package/MenuItem/MenuItem.js

@@ -23,7 +23,25 @@ var _Divider = require("../Divider");
 var _ListItemIcon = require("../ListItemIcon");
 var _ListItemText = require("../ListItemText");
 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
@@ -170,6 +188,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     className,
     ...other
   } = props;
+  const focusSource = (0, _Select.useSelectFocusSource)();
   const context = React.useContext(_ListContext.default);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -179,11 +198,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {
       if (menuItemRef.current) {
-        menuItemRef.current.focus();
+        focusWithVisible(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]);
   const ownerState = {
     ...props,

package/MenuItem/MenuItem.mjs

@@ -16,7 +16,27 @@ import { dividerClasses } from "../Divider/index.mjs";
 import { listItemIconClasses } from "../ListItemIcon/index.mjs";
 import { listItemTextClasses } from "../ListItemText/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
@@ -162,6 +182,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     className,
     ...other
   } = props;
+  const focusSource = useSelectFocusSource();
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -171,11 +192,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   useEnhancedEffect(() => {
     if (autoFocus) {
       if (menuItemRef.current) {
-        menuItemRef.current.focus();
+        focusWithVisible(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]);
   const ownerState = {
     ...props,

package/MenuList/MenuList.js

@@ -10,6 +10,7 @@ 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 _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _List = _interopRequireDefault(require("../List"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
@@ -18,24 +19,6 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function nextItem(list, item, disableListWrap) {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return disableListWrap ? null : list.firstChild;
-}
-function previousItem(list, item, disableListWrap) {
-  if (list === item) {
-    return disableListWrap ? list.firstChild : list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return disableListWrap ? null : list.lastChild;
-}
 function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria === undefined) {
     return true;
@@ -54,29 +37,20 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   }
   return text.startsWith(textCriteria.keys.join(''));
 }
-function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);
-  while (nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return false;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus, disableListWrap);
-    } else {
-      nextFocus.focus();
-      return true;
-    }
+function shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable) {
+  if (!textCriteriaMatches(element, criteria)) {
+    return false;
+  }
+  return shouldFocus(element, disabledItemsFocusable);
+}
+function shouldFocus(element, disabledItemsFocusable) {
+  if (!element || !element.hasAttribute('tabindex')) {
+    return false;
+  }
+  if (disabledItemsFocusable) {
+    return true;
   }
-  return false;
+  return !element.disabled && element.getAttribute('aria-disabled') !== 'true';
 }
 
 /**
@@ -127,65 +101,6 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       return listRef.current;
     }
   }), []);
-  const handleKeyDown = event => {
-    const list = listRef.current;
-    const key = event.key;
-    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
-    if (isModifierKeyPressed) {
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-      return;
-    }
-
-    /**
-     * @type {Element} - will always be defined since we are in a keydown handler
-     * attached to an element. A keydown event is either dispatched to the activeElement
-     * or document.body or document.documentElement. Only the first case will
-     * trigger this specific handler.
-     */
-    const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(list));
-    if (key === 'ArrowDown') {
-      // Prevent scroll of the page
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'ArrowUp') {
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key === 'Home') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'End') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key.length === 1) {
-      const criteria = textCriteriaRef.current;
-      const lowerKey = key.toLowerCase();
-      const currTime = performance.now();
-      if (criteria.keys.length > 0) {
-        // Reset
-        if (currTime - criteria.lastTime > 500) {
-          criteria.keys = [];
-          criteria.repeating = true;
-          criteria.previousKeyMatched = true;
-        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
-          criteria.repeating = false;
-        }
-      }
-      criteria.lastTime = currTime;
-      criteria.keys.push(lowerKey);
-      const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
-      if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {
-        event.preventDefault();
-      } else {
-        criteria.previousKeyMatched = false;
-      }
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const handleRef = (0, _useForkRef.default)(listRef, ref);
 
   /**
    * the index of the item should receive focus
@@ -227,25 +142,78 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       }
     }
   });
+  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 (index === activeItemIndex) {
-      const newChildProps = {};
-      if (autoFocusItem) {
-        newChildProps.autoFocus = true;
+    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;
+    }
+    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);
+    if (event.key.length === 1) {
+      const criteria = textCriteriaRef.current;
+      const lowerKey = event.key.toLowerCase();
+      const currTime = performance.now();
+      if (criteria.keys.length > 0) {
+        // Reset
+        if (currTime - criteria.lastTime > 500) {
+          criteria.keys = [];
+          criteria.repeating = true;
+          criteria.previousKeyMatched = true;
+        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
+          criteria.repeating = false;
+        }
       }
-      if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
-        newChildProps.tabIndex = 0;
+      criteria.lastTime = currTime;
+      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)) {
+        event.preventDefault();
+      } else {
+        criteria.previousKeyMatched = false;
       }
-      return /*#__PURE__*/React.cloneElement(child, newChildProps);
     }
-    return child;
-  });
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    tabIndex: autoFocus ? 0 : -1,
+    onFocus: rovingTabIndexContainerProps.onFocus,
+    tabIndex: -1,
     ...other,
     children: items
   });