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

package/ListItemSecondaryAction/ListItemSecondaryAction.d.mts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { Theme } from "../styles/index.mjs";
-import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { ListItemSecondaryActionClasses } from "./listItemSecondaryActionClasses.mjs";
-export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface ListItemSecondaryActionOwnProps {
   /**
    * The content of the component, normally an `IconButton` or selection control.
    */
@@ -17,7 +17,10 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
    */
   sx?: SxProps<Theme> | undefined;
 }
-
+export interface ListItemSecondaryActionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & ListItemSecondaryActionOwnProps;
+  defaultComponent: RootComponent;
+}
 /**
  * Must be used as the last child of ListItem to function properly.
  *
@@ -28,10 +31,11 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
  * API:
  *
  * - [ListItemSecondaryAction API](https://next.mui.com/material-ui/api/list-item-secondary-action/)
- *
- * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component 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.
  */
-declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => React.JSX.Element) & {
+declare const ListItemSecondaryAction: OverridableComponent<ListItemSecondaryActionTypeMap> & {
   muiName: string;
 };
+export type ListItemSecondaryActionProps<RootComponent extends React.ElementType = ListItemSecondaryActionTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListItemSecondaryActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType | undefined;
+};
 export default ListItemSecondaryAction;

package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { Theme } from "../styles/index.js";
-import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { ListItemSecondaryActionClasses } from "./listItemSecondaryActionClasses.js";
-export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface ListItemSecondaryActionOwnProps {
   /**
    * The content of the component, normally an `IconButton` or selection control.
    */
@@ -17,7 +17,10 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
    */
   sx?: SxProps<Theme> | undefined;
 }
-
+export interface ListItemSecondaryActionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & ListItemSecondaryActionOwnProps;
+  defaultComponent: RootComponent;
+}
 /**
  * Must be used as the last child of ListItem to function properly.
  *
@@ -28,10 +31,11 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
  * API:
  *
  * - [ListItemSecondaryAction API](https://next.mui.com/material-ui/api/list-item-secondary-action/)
- *
- * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component 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.
  */
-declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => React.JSX.Element) & {
+declare const ListItemSecondaryAction: OverridableComponent<ListItemSecondaryActionTypeMap> & {
   muiName: string;
 };
+export type ListItemSecondaryActionProps<RootComponent extends React.ElementType = ListItemSecondaryActionTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListItemSecondaryActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType | undefined;
+};
 export default ListItemSecondaryAction;

package/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -52,8 +52,6 @@ const ListItemSecondaryActionRoot = (0, _zeroStyled.styled)('div', {
 
 /**
  * Must be used as the last child of ListItem to function properly.
- *
- * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component 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.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -62,6 +60,7 @@ const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemS
   });
   const {
     className,
+    component,
     ...other
   } = props;
   const context = React.useContext(_ListContext.default);
@@ -71,6 +70,7 @@ const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemS
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemSecondaryActionRoot, {
+    as: component,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
@@ -94,6 +94,11 @@ process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.propTypes /* rem
    * @ignore
    */
   className: _propTypes.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ListItemSecondaryAction/ListItemSecondaryAction.mjs

@@ -45,8 +45,6 @@ const ListItemSecondaryActionRoot = styled('div', {
 
 /**
  * Must be used as the last child of ListItem to function properly.
- *
- * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component 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.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
   const props = useDefaultProps({
@@ -55,6 +53,7 @@ const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemS
   });
   const {
     className,
+    component,
     ...other
   } = props;
   const context = React.useContext(ListContext);
@@ -64,6 +63,7 @@ const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemS
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(ListItemSecondaryActionRoot, {
+    as: component,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
@@ -87,6 +87,11 @@ process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.propTypes /* rem
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ListItemText/ListItemText.d.mts

@@ -22,7 +22,7 @@ export interface ListItemTextSlots {
    */
   secondary?: React.ElementType | undefined;
 }
-export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<ListItemTextSlots, {
+export type ListItemTextSlotsAndSlotProps<PrimaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'span'>>, SecondaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'p'>>> = CreateSlotsAndSlotProps<ListItemTextSlots, {
   /**
    * Props forwarded to the root slot.
    * By default, the available props are based on `div` element.
@@ -32,15 +32,23 @@ export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<ListItemText
    * Props forwarded to the primary slot (as long as disableTypography is not `true`)
    * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
    */
-  primary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  primary: TypographyProps<PrimaryTypographyComponent, {
+    component?: PrimaryTypographyComponent | undefined;
+  }> | ((ownerState: ListItemTextOwnerState) => TypographyProps<PrimaryTypographyComponent, {
+    component?: PrimaryTypographyComponent | undefined;
+  }>);
   /**
    * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
    * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
    */
-  secondary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  secondary: TypographyProps<SecondaryTypographyComponent, {
+    component?: SecondaryTypographyComponent | undefined;
+  }> | ((ownerState: ListItemTextOwnerState) => TypographyProps<SecondaryTypographyComponent, {
+    component?: SecondaryTypographyComponent | undefined;
+  }>);
 }>;
 export interface ListItemTextOwnerState extends ListItemTextProps {}
-export interface ListItemTextProps<PrimaryTypographyComponent extends React.ElementType = 'span', SecondaryTypographyComponent extends React.ElementType = 'p'> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, ListItemTextSlotsAndSlotProps {
+export interface ListItemTextProps<PrimaryTypographyComponent extends React.ElementType = 'span', SecondaryTypographyComponent extends React.ElementType = 'p'> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, ListItemTextSlotsAndSlotProps<PrimaryTypographyComponent, SecondaryTypographyComponent> {
   /**
    * Alias for the `primary` prop.
    */
@@ -67,26 +75,10 @@ export interface ListItemTextProps<PrimaryTypographyComponent extends React.Elem
    * The main content element.
    */
   primary?: React.ReactNode;
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.primary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  primaryTypographyProps?: TypographyProps<PrimaryTypographyComponent, {
-    component?: PrimaryTypographyComponent | undefined;
-  }> | undefined;
   /**
    * The secondary content element.
    */
   secondary?: React.ReactNode;
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  secondaryTypographyProps?: TypographyProps<SecondaryTypographyComponent, {
-    component?: SecondaryTypographyComponent | undefined;
-  }> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ListItemText/ListItemText.d.ts

@@ -22,7 +22,7 @@ export interface ListItemTextSlots {
    */
   secondary?: React.ElementType | undefined;
 }
-export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<ListItemTextSlots, {
+export type ListItemTextSlotsAndSlotProps<PrimaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'span'>>, SecondaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'p'>>> = CreateSlotsAndSlotProps<ListItemTextSlots, {
   /**
    * Props forwarded to the root slot.
    * By default, the available props are based on `div` element.
@@ -32,15 +32,23 @@ export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<ListItemText
    * Props forwarded to the primary slot (as long as disableTypography is not `true`)
    * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
    */
-  primary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  primary: TypographyProps<PrimaryTypographyComponent, {
+    component?: PrimaryTypographyComponent | undefined;
+  }> | ((ownerState: ListItemTextOwnerState) => TypographyProps<PrimaryTypographyComponent, {
+    component?: PrimaryTypographyComponent | undefined;
+  }>);
   /**
    * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
    * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
    */
-  secondary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  secondary: TypographyProps<SecondaryTypographyComponent, {
+    component?: SecondaryTypographyComponent | undefined;
+  }> | ((ownerState: ListItemTextOwnerState) => TypographyProps<SecondaryTypographyComponent, {
+    component?: SecondaryTypographyComponent | undefined;
+  }>);
 }>;
 export interface ListItemTextOwnerState extends ListItemTextProps {}
-export interface ListItemTextProps<PrimaryTypographyComponent extends React.ElementType = 'span', SecondaryTypographyComponent extends React.ElementType = 'p'> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, ListItemTextSlotsAndSlotProps {
+export interface ListItemTextProps<PrimaryTypographyComponent extends React.ElementType = 'span', SecondaryTypographyComponent extends React.ElementType = 'p'> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, ListItemTextSlotsAndSlotProps<PrimaryTypographyComponent, SecondaryTypographyComponent> {
   /**
    * Alias for the `primary` prop.
    */
@@ -67,26 +75,10 @@ export interface ListItemTextProps<PrimaryTypographyComponent extends React.Elem
    * The main content element.
    */
   primary?: React.ReactNode;
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.primary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  primaryTypographyProps?: TypographyProps<PrimaryTypographyComponent, {
-    component?: PrimaryTypographyComponent | undefined;
-  }> | undefined;
   /**
    * The secondary content element.
    */
   secondary?: React.ReactNode;
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  secondaryTypographyProps?: TypographyProps<SecondaryTypographyComponent, {
-    component?: SecondaryTypographyComponent | undefined;
-  }> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ListItemText/ListItemText.js

@@ -86,9 +86,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     disableTypography = false,
     inset = false,
     primary: primaryProp,
-    primaryTypographyProps,
     secondary: secondaryProp,
-    secondaryTypographyProps,
     slots = {},
     slotProps = {},
     ...other
@@ -109,11 +107,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      primary: primaryTypographyProps,
-      secondary: secondaryTypographyProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     className: (0, _clsx.default)(classes.root, className),
@@ -193,27 +187,15 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    * The main content element.
    */
   primary: _propTypes.default.node,
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.primary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  primaryTypographyProps: _propTypes.default.object,
   /**
    * The secondary content element.
    */
   secondary: _propTypes.default.node,
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  secondaryTypographyProps: _propTypes.default.object,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: _propTypes.default.shape({
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     primary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     secondary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])

package/ListItemText/ListItemText.mjs

@@ -79,9 +79,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     disableTypography = false,
     inset = false,
     primary: primaryProp,
-    primaryTypographyProps,
     secondary: secondaryProp,
-    secondaryTypographyProps,
     slots = {},
     slotProps = {},
     ...other
@@ -102,11 +100,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      primary: primaryTypographyProps,
-      secondary: secondaryTypographyProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
     className: clsx(classes.root, className),
@@ -186,27 +180,15 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    * The main content element.
    */
   primary: PropTypes.node,
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.primary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  primaryTypographyProps: PropTypes.object,
   /**
    * The secondary content element.
    */
   secondary: PropTypes.node,
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  secondaryTypographyProps: PropTypes.object,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])

package/ListSubheader/ListSubheader.js

@@ -121,9 +121,6 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ...other
   });
 });
-if (ListSubheader) {
-  ListSubheader.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/ListSubheader/ListSubheader.mjs

@@ -114,9 +114,6 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ...other
   });
 });
-if (ListSubheader) {
-  ListSubheader.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Menu/Menu.d.mts

@@ -64,7 +64,7 @@ export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<MenuSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.

package/Menu/Menu.d.ts

@@ -64,7 +64,7 @@ export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<MenuSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.

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