@mui/material 5.14.2 → 5.14.4

package/ListItem/listItemClasses.d.ts

@@ -1,30 +1,30 @@
-export interface ListItemClasses {
-    /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
-    root: string;
-    /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
-    container: string;
-    /** State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
-    focusVisible: string;
-    /** Styles applied to the component element if dense. */
-    dense: string;
-    /** Styles applied to the component element if `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-    /** State class applied to the inner `component` element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the inner `component` element if `divider={true}`. */
-    divider: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element unless `disablePadding={true}`. */
-    padding: string;
-    /** Styles applied to the inner `component` element if `button={true}`. */
-    button: string;
-    /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
-    secondaryAction: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-}
-export type ListItemClassKey = keyof ListItemClasses;
-export declare function getListItemUtilityClass(slot: string): string;
-declare const listItemClasses: ListItemClasses;
-export default listItemClasses;
+export interface ListItemClasses {
+    /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
+    root: string;
+    /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
+    container: string;
+    /** State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+    focusVisible: string;
+    /** Styles applied to the component element if dense. */
+    dense: string;
+    /** Styles applied to the component element if `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+    /** State class applied to the inner `component` element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the inner `component` element if `divider={true}`. */
+    divider: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element unless `disablePadding={true}`. */
+    padding: string;
+    /** Styles applied to the inner `component` element if `button={true}`. */
+    button: string;
+    /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
+    secondaryAction: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+}
+export type ListItemClassKey = keyof ListItemClasses;
+export declare function getListItemUtilityClass(slot: string): string;
+declare const listItemClasses: ListItemClasses;
+export default listItemClasses;

package/ListItemAvatar/ListItemAvatar.js

@@ -6,7 +6,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import ListContext from '../List/ListContext';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';

package/ListItemAvatar/listItemAvatarClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemAvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-}
-export type ListItemAvatarClassKey = keyof ListItemAvatarClasses;
-export declare function getListItemAvatarUtilityClass(slot: string): string;
-declare const listItemAvatarClasses: ListItemAvatarClasses;
-export default listItemAvatarClasses;
+export interface ListItemAvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+}
+export type ListItemAvatarClassKey = keyof ListItemAvatarClasses;
+export declare function getListItemAvatarUtilityClass(slot: string): string;
+declare const listItemAvatarClasses: ListItemAvatarClasses;
+export default listItemAvatarClasses;

package/ListItemButton/ListItemButton.d.ts

@@ -59,11 +59,11 @@ export interface ListItemButtonBaseProps {
 }
 
 export type ListItemButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'div',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: P & ListItemButtonBaseProps;
-  defaultComponent: D;
+  props: AdditionalProps & ListItemButtonBaseProps;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -80,8 +80,10 @@ export type ListItemButtonTypeMap<
 declare const ListItemButton: ExtendButtonBase<ListItemButtonTypeMap>;
 
 export type ListItemButtonProps<
-  D extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ListItemButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListItemButton;

package/ListItemButton/ListItemButton.js

@@ -6,7 +6,7 @@ const _excluded = ["alignItems", "autoFocus", "component", "children", "dense",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '@mui/system';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';

package/ListItemButton/listItemButtonClasses.d.ts

@@ -1,22 +1,22 @@
-export interface ListItemButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the `component`'s `focusVisibleClassName` prop. */
-    focusVisible: string;
-    /** Styles applied to the component element if dense. */
-    dense: string;
-    /** Styles applied to the component element if `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-    /** State class applied to the inner `component` element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the inner `component` element if `divider={true}`. */
-    divider: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-}
-export type ListItemButtonClassKey = keyof ListItemButtonClasses;
-export declare function getListItemButtonUtilityClass(slot: string): string;
-declare const listItemButtonClasses: ListItemButtonClasses;
-export default listItemButtonClasses;
+export interface ListItemButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the `component`'s `focusVisibleClassName` prop. */
+    focusVisible: string;
+    /** Styles applied to the component element if dense. */
+    dense: string;
+    /** Styles applied to the component element if `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+    /** State class applied to the inner `component` element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the inner `component` element if `divider={true}`. */
+    divider: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+}
+export type ListItemButtonClassKey = keyof ListItemButtonClasses;
+export declare function getListItemButtonUtilityClass(slot: string): string;
+declare const listItemButtonClasses: ListItemButtonClasses;
+export default listItemButtonClasses;

package/ListItemIcon/ListItemIcon.js

@@ -6,7 +6,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getListItemIconUtilityClass } from './listItemIconClasses';

package/ListItemIcon/listItemIconClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemIconClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-}
-export type ListItemIconClassKey = keyof ListItemIconClasses;
-export declare function getListItemIconUtilityClass(slot: string): string;
-declare const listItemIconClasses: ListItemIconClasses;
-export default listItemIconClasses;
+export interface ListItemIconClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+}
+export type ListItemIconClassKey = keyof ListItemIconClasses;
+export declare function getListItemIconUtilityClass(slot: string): string;
+declare const listItemIconClasses: ListItemIconClasses;
+export default listItemIconClasses;

package/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -6,7 +6,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ListContext from '../List/ListContext';

package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemSecondaryActionClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
-    disableGutters: string;
-}
-export type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
-export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
-declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
-export default listItemSecondaryActionClasses;
+export interface ListItemSecondaryActionClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
+    disableGutters: string;
+}
+export type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
+export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
+declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
+export default listItemSecondaryActionClasses;

package/ListItemText/ListItemText.js

@@ -6,7 +6,7 @@ const _excluded = ["children", "className", "disableTypography", "inset", "prima
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
 import useThemeProps from '../styles/useThemeProps';

package/ListItemText/listItemTextClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ListItemTextClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Typography component if primary and secondary are set. */
-    multiline: string;
-    /** Styles applied to the Typography component if dense. */
-    dense: string;
-    /** Styles applied to the root element if `inset={true}`. */
-    inset: string;
-    /** Styles applied to the primary `Typography` component. */
-    primary: string;
-    /** Styles applied to the secondary `Typography` component. */
-    secondary: string;
-}
-export type ListItemTextClassKey = keyof ListItemTextClasses;
-export declare function getListItemTextUtilityClass(slot: string): string;
-declare const listItemTextClasses: ListItemTextClasses;
-export default listItemTextClasses;
+export interface ListItemTextClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Typography component if primary and secondary are set. */
+    multiline: string;
+    /** Styles applied to the Typography component if dense. */
+    dense: string;
+    /** Styles applied to the root element if `inset={true}`. */
+    inset: string;
+    /** Styles applied to the primary `Typography` component. */
+    primary: string;
+    /** Styles applied to the secondary `Typography` component. */
+    secondary: string;
+}
+export type ListItemTextClassKey = keyof ListItemTextClasses;
+export declare function getListItemTextUtilityClass(slot: string): string;
+declare const listItemTextClasses: ListItemTextClasses;
+export default listItemTextClasses;

package/ListSubheader/ListSubheader.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListSubheaderClasses } from './listSubheaderClasses';
 
-export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'> {
-  props: P & {
+export interface ListSubheaderTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'li',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -39,7 +42,7 @@ export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -55,8 +58,10 @@ export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'
 declare const ListSubheader: OverridableComponent<ListSubheaderTypeMap>;
 
 export type ListSubheaderProps<
-  D extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ListSubheaderTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ListSubheaderTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListSubheader;

package/ListSubheader/ListSubheader.js

@@ -6,7 +6,7 @@ const _excluded = ["className", "color", "component", "disableGutters", "disable
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';

package/ListSubheader/listSubheaderClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ListSubheaderClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element if `inset={true}`. */
-    inset: string;
-    /** Styles applied to the root element unless `disableSticky={true}`. */
-    sticky: string;
-}
-export type ListSubheaderClassKey = keyof ListSubheaderClasses;
-export declare function getListSubheaderUtilityClass(slot: string): string;
-declare const listSubheaderClasses: ListSubheaderClasses;
-export default listSubheaderClasses;
+export interface ListSubheaderClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element if `inset={true}`. */
+    inset: string;
+    /** Styles applied to the root element unless `disableSticky={true}`. */
+    sticky: string;
+}
+export type ListSubheaderClassKey = keyof ListSubheaderClasses;
+export declare function getListSubheaderUtilityClass(slot: string): string;
+declare const listSubheaderClasses: ListSubheaderClasses;
+export default listSubheaderClasses;

package/Menu/Menu.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { MenuOwnerState, SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
-import { PaperProps } from '../Paper';
+import Paper, { PaperProps } from '../Paper';
 import { PopoverProps } from '../Popover';
 import { MenuListProps } from '../MenuList';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { MenuClasses } from './menuClasses';
 
-export interface MenuProps extends StandardProps<PopoverProps> {
+export interface MenuProps
+  extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>, 'children'> {
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -58,6 +60,25 @@ export interface MenuProps extends StandardProps<PopoverProps> {
    * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses?: PopoverProps['classes'];
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+    paper?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<typeof Menu, {}, MenuOwnerState>;
+    paper?: SlotComponentProps<typeof Paper, {}, {}>;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Menu/Menu.js

@@ -3,12 +3,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+  _excluded2 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
@@ -63,6 +64,7 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
+  var _slots$paper, _slotProps$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
@@ -70,6 +72,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   const {
       autoFocus = true,
       children,
+      className,
       disableAutoFocusItem = false,
       MenuListProps = {},
       onClose,
@@ -80,7 +83,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       TransitionProps: {
         onEntering
       } = {},
-      variant = 'selectedMenu'
+      variant = 'selectedMenu',
+      slots = {},
+      slotProps = {}
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -142,6 +147,20 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
+  const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
+  const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+  const rootSlotProps = useSlotProps({
+    elementType: slots.root,
+    externalSlotProps: slotProps.root,
+    ownerState,
+    className: [classes.root, className]
+  });
+  const paperSlotProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: paperExternalSlotProps,
+    ownerState,
+    className: classes.paper
+  });
   return /*#__PURE__*/_jsx(MenuRoot, _extends({
     onClose: onClose,
     anchorOrigin: {
@@ -150,16 +169,13 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     slots: {
-      paper: MenuPaper
+      paper: PaperSlot,
+      root: slots.root
     },
     slotProps: {
-      paper: _extends({}, PaperProps, {
-        classes: _extends({}, PaperProps.classes, {
-          root: classes.paper
-        })
-      })
+      root: rootSlotProps,
+      paper: paperSlotProps
     },
-    className: classes.root,
     open: open,
     ref: ref,
     transitionDuration: transitionDuration,
@@ -207,6 +223,10 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * When opening the menu will not focus the active item but the `[role="menu"]`
    * unless `autoFocus` is also set to `false`. Not using the default means not
@@ -239,6 +259,25 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses: PropTypes.object,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Menu/menuClasses.d.ts

@@ -1,12 +1,12 @@
-export interface MenuClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the List component via `MenuList`. */
-    list: string;
-}
-export type MenuClassKey = keyof MenuClasses;
-export declare function getMenuUtilityClass(slot: string): string;
-declare const menuClasses: MenuClasses;
-export default menuClasses;
+export interface MenuClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the List component via `MenuList`. */
+    list: string;
+}
+export type MenuClassKey = keyof MenuClasses;
+export declare function getMenuUtilityClass(slot: string): string;
+declare const menuClasses: MenuClasses;
+export default menuClasses;

package/MenuItem/MenuItem.d.ts

@@ -4,8 +4,11 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { MenuItemClasses } from './menuItemClasses';
 
-export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = ExtendButtonBaseTypeMap<{
-  props: P & {
+export type MenuItemTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'li',
+> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & {
     /**
      * If `true`, the list item is focused during the first mount.
      * Focus will also be triggered if the value changes from false to true.
@@ -47,7 +50,7 @@ export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Extend
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -64,8 +67,10 @@ export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Extend
 declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;
 
 export type MenuItemProps<
-  D extends React.ElementType = MenuItemTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MenuItemTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default MenuItem;

package/MenuItem/MenuItem.js

@@ -6,7 +6,7 @@ const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '@mui/system';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';