@mui/material 5.13.2 → 5.13.4

package/Menu/Menu.js

@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
-import Paper from '../Paper';
-import Popover from '../Popover';
+import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -41,7 +40,7 @@ const MenuRoot = styled(Popover, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = styled(Paper, {
+export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -148,13 +147,16 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       horizontal: isRtl ? 'right' : 'left'
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
-    PaperProps: _extends({
-      as: MenuPaper
-    }, PaperProps, {
-      classes: _extends({}, PaperProps.classes, {
-        root: classes.paper
+    slots: {
+      paper: MenuPaper
+    },
+    slotProps: {
+      paper: _extends({}, PaperProps, {
+        classes: _extends({}, PaperProps.classes, {
+          root: classes.paper
+        })
       })
-    }),
+    },
     className: classes.root,
     open: open,
     ref: ref,

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/menuItemClasses.d.ts

@@ -1,20 +1,20 @@
-export interface MenuItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-    /** Styles applied to the root element if dense. */
-    dense: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root 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 MenuItemClassKey = keyof MenuItemClasses;
-export declare function getMenuItemUtilityClass(slot: string): string;
-declare const menuItemClasses: MenuItemClasses;
-export default menuItemClasses;
+export interface MenuItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+    /** Styles applied to the root element if dense. */
+    dense: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root 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 MenuItemClassKey = keyof MenuItemClasses;
+export declare function getMenuItemUtilityClass(slot: string): string;
+declare const menuItemClasses: MenuItemClasses;
+export default menuItemClasses;

package/MenuList/MenuList.js

@@ -180,6 +180,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   // 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') {

package/MobileStepper/MobileStepper.js

@@ -126,6 +126,14 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position,
     variant
   });
+  let value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil(activeStep / (steps - 1) * 100);
+    }
+  }
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
     square: true,
@@ -148,7 +156,7 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100)
+      value: value
     }, LinearProgressProps)), nextButton]
   }));
 });

package/MobileStepper/mobileStepperClasses.d.ts

@@ -1,22 +1,22 @@
-export interface MobileStepperClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `position="bottom"`. */
-    positionBottom: string;
-    /** Styles applied to the root element if `position="top"`. */
-    positionTop: string;
-    /** Styles applied to the root element if `position="static"`. */
-    positionStatic: string;
-    /** Styles applied to the dots container if `variant="dots"`. */
-    dots: string;
-    /** Styles applied to each dot if `variant="dots"`. */
-    dot: string;
-    /** Styles applied to a dot if `variant="dots"` and this is the active step. */
-    dotActive: string;
-    /** Styles applied to the Linear Progress component if `variant="progress"`. */
-    progress: string;
-}
-export type MobileStepperClassKey = keyof MobileStepperClasses;
-export declare function getMobileStepperUtilityClass(slot: string): string;
-declare const mobileStepperClasses: MobileStepperClasses;
-export default mobileStepperClasses;
+export interface MobileStepperClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `position="bottom"`. */
+    positionBottom: string;
+    /** Styles applied to the root element if `position="top"`. */
+    positionTop: string;
+    /** Styles applied to the root element if `position="static"`. */
+    positionStatic: string;
+    /** Styles applied to the dots container if `variant="dots"`. */
+    dots: string;
+    /** Styles applied to each dot if `variant="dots"`. */
+    dot: string;
+    /** Styles applied to a dot if `variant="dots"` and this is the active step. */
+    dotActive: string;
+    /** Styles applied to the Linear Progress component if `variant="progress"`. */
+    progress: string;
+}
+export type MobileStepperClassKey = keyof MobileStepperClasses;
+export declare function getMobileStepperUtilityClass(slot: string): string;
+declare const mobileStepperClasses: MobileStepperClasses;
+export default mobileStepperClasses;

package/Modal/Modal.js

@@ -127,7 +127,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
       }),
       backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
       })
     },
     onTransitionEnter: () => setExited(false),

package/NativeSelect/nativeSelectClasses.d.ts

@@ -1,34 +1,34 @@
-export interface NativeSelectClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the select component `select` class. */
-    select: string;
-    /** Styles applied to the select component if `multiple={true}`. */
-    multiple: string;
-    /** Styles applied to the select component if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the select component if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the select component if `variant="standard"`. */
-    standard: string;
-    /** State class applied to the select component `disabled` class. */
-    disabled: string;
-    /** Styles applied to the icon component. */
-    icon: string;
-    /** Styles applied to the icon component if the popup is open. */
-    iconOpen: string;
-    /** Styles applied to the icon component if `variant="filled"`. */
-    iconFilled: string;
-    /** Styles applied to the icon component if `variant="outlined"`. */
-    iconOutlined: string;
-    /** Styles applied to the icon component if `variant="standard"`. */
-    iconStandard: string;
-    /** Styles applied to the underlying native input component. */
-    nativeInput: string;
-    /** State class applied to the select component `error` class. */
-    error: string;
-}
-export type NativeSelectClassKey = keyof NativeSelectClasses;
-export declare function getNativeSelectUtilityClasses(slot: string): string;
-declare const nativeSelectClasses: NativeSelectClasses;
-export default nativeSelectClasses;
+export interface NativeSelectClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the select component `select` class. */
+    select: string;
+    /** Styles applied to the select component if `multiple={true}`. */
+    multiple: string;
+    /** Styles applied to the select component if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the select component if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the select component if `variant="standard"`. */
+    standard: string;
+    /** State class applied to the select component `disabled` class. */
+    disabled: string;
+    /** Styles applied to the icon component. */
+    icon: string;
+    /** Styles applied to the icon component if the popup is open. */
+    iconOpen: string;
+    /** Styles applied to the icon component if `variant="filled"`. */
+    iconFilled: string;
+    /** Styles applied to the icon component if `variant="outlined"`. */
+    iconOutlined: string;
+    /** Styles applied to the icon component if `variant="standard"`. */
+    iconStandard: string;
+    /** Styles applied to the underlying native input component. */
+    nativeInput: string;
+    /** State class applied to the select component `error` class. */
+    error: string;
+}
+export type NativeSelectClassKey = keyof NativeSelectClasses;
+export declare function getNativeSelectUtilityClasses(slot: string): string;
+declare const nativeSelectClasses: NativeSelectClasses;
+export default nativeSelectClasses;

package/OutlinedInput/outlinedInputClasses.d.ts

@@ -1,38 +1,38 @@
-export interface OutlinedInputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the color is secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element if the component is focused. */
-    focused: string;
-    /** Styles applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: string;
-    /** Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the NotchedOutline element. */
-    notchedOutline: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: string;
-    /** Styles applied to the input element if `type="search"`. */
-    inputTypeSearch: string;
-}
-export type OutlinedInputClassKey = keyof OutlinedInputClasses;
-export declare function getOutlinedInputUtilityClass(slot: string): string;
-declare const outlinedInputClasses: OutlinedInputClasses;
-export default outlinedInputClasses;
+export interface OutlinedInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the color is secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element if the component is focused. */
+    focused: string;
+    /** Styles applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `startAdornment` is provided. */
+    adornedStart: string;
+    /** Styles applied to the root element if `endAdornment` is provided. */
+    adornedEnd: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the NotchedOutline element. */
+    notchedOutline: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `startAdornment` is provided. */
+    inputAdornedStart: string;
+    /** Styles applied to the input element if `endAdornment` is provided. */
+    inputAdornedEnd: string;
+    /** Styles applied to the input element if `type="search"`. */
+    inputTypeSearch: string;
+}
+export type OutlinedInputClassKey = keyof OutlinedInputClasses;
+export declare function getOutlinedInputUtilityClass(slot: string): string;
+declare const outlinedInputClasses: OutlinedInputClasses;
+export default outlinedInputClasses;

package/Pagination/paginationClasses.d.ts

@@ -1,14 +1,14 @@
-export interface PaginationClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the ul element. */
-    ul: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-}
-export type PaginationClassKey = keyof PaginationClasses;
-export declare function getPaginationUtilityClass(slot: string): string;
-declare const paginationClasses: PaginationClasses;
-export default paginationClasses;
+export interface PaginationClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the ul element. */
+    ul: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+}
+export type PaginationClassKey = keyof PaginationClasses;
+export declare function getPaginationUtilityClass(slot: string): string;
+declare const paginationClasses: PaginationClasses;
+export default paginationClasses;

package/PaginationItem/paginationItemClasses.d.ts

@@ -1,42 +1,42 @@
-export interface PaginationItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `type="page"`. */
-    page: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
-    textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
-    textSecondary: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
-    outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-    outlinedSecondary: string;
-    /** Styles applied to the root element if `rounded="true"`. */
-    rounded: string;
-    /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
-    ellipsis: string;
-    /** Styles applied to the root element if `type="first"` or type="last". */
-    firstLast: string;
-    /** Styles applied to the root element if `type="previous"` or type="next". */
-    previousNext: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-    /** Styles applied to the icon to display. */
-    icon: string;
-}
-export type PaginationItemClassKey = keyof PaginationItemClasses;
-export declare function getPaginationItemUtilityClass(slot: string): string;
-declare const paginationItemClasses: PaginationItemClasses;
-export default paginationItemClasses;
+export interface PaginationItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `type="page"`. */
+    page: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    textPrimary: string;
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    textSecondary: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    outlinedPrimary: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    outlinedSecondary: string;
+    /** Styles applied to the root element if `rounded="true"`. */
+    rounded: string;
+    /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
+    ellipsis: string;
+    /** Styles applied to the root element if `type="first"` or type="last". */
+    firstLast: string;
+    /** Styles applied to the root element if `type="previous"` or type="next". */
+    previousNext: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+    /** Styles applied to the icon to display. */
+    icon: string;
+}
+export type PaginationItemClassKey = keyof PaginationItemClasses;
+export declare function getPaginationItemUtilityClass(slot: string): string;
+declare const paginationItemClasses: PaginationItemClasses;
+export default paginationItemClasses;

package/Paper/paperClasses.d.ts

@@ -1,39 +1,39 @@
-export interface PaperClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `square={true}`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="elevation"`. */
-    elevation: string;
-    elevation0: string;
-    elevation1: string;
-    elevation2: string;
-    elevation3: string;
-    elevation4: string;
-    elevation5: string;
-    elevation6: string;
-    elevation7: string;
-    elevation8: string;
-    elevation9: string;
-    elevation10: string;
-    elevation11: string;
-    elevation12: string;
-    elevation13: string;
-    elevation14: string;
-    elevation15: string;
-    elevation16: string;
-    elevation17: string;
-    elevation18: string;
-    elevation19: string;
-    elevation20: string;
-    elevation21: string;
-    elevation22: string;
-    elevation23: string;
-    elevation24: string;
-}
-export type PaperClassKey = keyof PaperClasses;
-export declare function getPaperUtilityClass(slot: string): string;
-declare const paperClasses: PaperClasses;
-export default paperClasses;
+export interface PaperClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `square={true}`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="elevation"`. */
+    elevation: string;
+    elevation0: string;
+    elevation1: string;
+    elevation2: string;
+    elevation3: string;
+    elevation4: string;
+    elevation5: string;
+    elevation6: string;
+    elevation7: string;
+    elevation8: string;
+    elevation9: string;
+    elevation10: string;
+    elevation11: string;
+    elevation12: string;
+    elevation13: string;
+    elevation14: string;
+    elevation15: string;
+    elevation16: string;
+    elevation17: string;
+    elevation18: string;
+    elevation19: string;
+    elevation20: string;
+    elevation21: string;
+    elevation22: string;
+    elevation23: string;
+    elevation24: string;
+}
+export type PaperClassKey = keyof PaperClasses;
+export declare function getPaperUtilityClass(slot: string): string;
+declare const paperClasses: PaperClasses;
+export default paperClasses;

package/Popover/Popover.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
-import { PaperProps } from '../Paper';
-import { ModalProps } from '../Modal';
+import Paper, { PaperProps } from '../Paper';
+import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { PopoverClasses } from './popoverClasses';
@@ -19,7 +20,8 @@ export interface PopoverPosition {
 
 export type PopoverReference = 'anchorEl' | 'anchorPosition' | 'none';
 
-export interface PopoverProps extends StandardProps<ModalProps, 'children'> {
+export interface PopoverProps
+  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'> {
   /**
    * A ref for imperative actions.
    * It currently only supports updatePosition() action.
@@ -88,9 +90,32 @@ export interface PopoverProps extends StandardProps<ModalProps, 'children'> {
   open: boolean;
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   *
+   * This prop is an alias for `slotProps.paper` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.paper` instead.
+   *
    * @default {}
    */
   PaperProps?: Partial<PaperProps>;
+  /**
+   * 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 Modal, {}, ModalOwnerState>;
+    paper?: SlotComponentProps<typeof Paper, {}, {}>;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -140,6 +165,12 @@ export function getOffsetLeft(
   horizontal: number | 'center' | 'right' | 'left',
 ): number;
 
+type PopoverRootProps = NonNullable<PopoverProps['slotProps']>['root'];
+type PopoverPaperProps = NonNullable<PopoverProps['slotProps']>['paper'];
+
+export declare const PopoverRoot: React.FC<PopoverRootProps>;
+export declare const PopoverPaper: React.FC<PopoverPaperProps>;
+
 /**
  *
  * Demos: