@mui/material 5.14.4 → 5.14.6

package/Link/linkClasses.d.ts

@@ -1,18 +1,18 @@
-export interface LinkClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `underline="none"`. */
-    underlineNone: string;
-    /** Styles applied to the root element if `underline="hover"`. */
-    underlineHover: string;
-    /** Styles applied to the root element if `underline="always"`. */
-    underlineAlways: string;
-    /** Styles applied to the root element if `component="button"`. */
-    button: string;
-    /** State class applied to the root element if the link is keyboard focused. */
-    focusVisible: string;
-}
-export type LinkClassKey = keyof LinkClasses;
-export declare function getLinkUtilityClass(slot: string): string;
-declare const linkClasses: LinkClasses;
-export default linkClasses;
+export interface LinkClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `underline="none"`. */
+    underlineNone: string;
+    /** Styles applied to the root element if `underline="hover"`. */
+    underlineHover: string;
+    /** Styles applied to the root element if `underline="always"`. */
+    underlineAlways: string;
+    /** Styles applied to the root element if `component="button"`. */
+    button: string;
+    /** State class applied to the root element if the link is keyboard focused. */
+    focusVisible: string;
+}
+export type LinkClassKey = keyof LinkClasses;
+export declare function getLinkUtilityClass(slot: string): string;
+declare const linkClasses: LinkClasses;
+export default linkClasses;

package/List/listClasses.d.ts

@@ -1,14 +1,14 @@
-export interface ListClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disablePadding={true}`. */
-    padding: string;
-    /** Styles applied to the root element if dense. */
-    dense: string;
-    /** Styles applied to the root element if a `subheader` is provided. */
-    subheader: string;
-}
-export type ListClassKey = keyof ListClasses;
-export declare function getListUtilityClass(slot: string): string;
-declare const listClasses: ListClasses;
-export default listClasses;
+export interface ListClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disablePadding={true}`. */
+    padding: string;
+    /** Styles applied to the root element if dense. */
+    dense: string;
+    /** Styles applied to the root element if a `subheader` is provided. */
+    subheader: string;
+}
+export type ListClassKey = keyof ListClasses;
+export declare function getListUtilityClass(slot: string): string;
+declare const listClasses: ListClasses;
+export default listClasses;

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

@@ -2,13 +2,11 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '@mui/base';
-import {
-  ModalTypeMap as BaseModalTypeMap,
-  ModalClasses as BaseModalClasses,
-} from '@mui/base/Modal';
+import { PortalProps } from '../Portal';
 import { Theme } from '../styles';
 import Backdrop, { BackdropProps } from '../Backdrop';
 import { OverridableComponent } from '../OverridableComponent';
+import { ModalClasses } from './modalClasses';
 
 export interface ModalComponentsPropsOverrides {}
 
@@ -16,6 +14,18 @@ export interface ModalOwnerState extends ModalProps {
   exited: boolean;
 }
 
+export interface ModalSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the backdrop.
+   */
+  backdrop?: React.ElementType;
+}
+
 export interface ModalTypeMap<
   DefaultComponent extends React.ElementType = 'div',
   AdditionalProps = {},
@@ -41,14 +51,23 @@ export interface ModalTypeMap<
      * @deprecated Use `slotProps.backdrop` instead.
      */
     BackdropProps?: Partial<BackdropProps>;
+    /**
+     * A single child content element.
+     */
+    children: React.ReactElement;
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<BaseModalClasses>;
+    classes?: Partial<ModalClasses>;
     /**
      * @ignore
      */
     className?: string;
+    /**
+     * When set to true the Modal waits until a nested Transition is completed before closing.
+     * @default false
+     */
+    closeAfterTransition?: boolean;
     /**
      * The components used for each slot inside.
      *
@@ -78,6 +97,98 @@ export interface ModalTypeMap<
         ModalOwnerState
       >;
     };
+    /**
+     * An HTML element or function that returns one.
+     * The `container` will have the portal children appended to it.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container?: PortalProps['container'];
+    /**
+     * If `true`, the modal will not automatically shift focus to itself when it opens, and
+     * replace it to the last focused element when it closes.
+     * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+     *
+     * Generally this should never be set to `true` as it makes the modal less
+     * accessible to assistive technologies, like screen readers.
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * If `true`, the modal will not prevent focus from leaving the modal while open.
+     *
+     * Generally this should never be set to `true` as it makes the modal less
+     * accessible to assistive technologies, like screen readers.
+     * @default false
+     */
+    disableEnforceFocus?: boolean;
+    /**
+     * If `true`, hitting escape will not fire the `onClose` callback.
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * The `children` will be under the DOM hierarchy of the parent component.
+     * @default false
+     */
+    disablePortal?: PortalProps['disablePortal'];
+    /**
+     * If `true`, the modal will not restore focus to previously focused element once
+     * modal is hidden or unmounted.
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Disable the scroll lock behavior.
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * If `true`, the backdrop is not rendered.
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Always keep the children in the DOM.
+     * This prop can be useful in SEO situation or
+     * when you want to maximize the responsiveness of the Modal.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
+     */
+    onBackdropClick?: React.ReactEventHandler<{}>;
+    /**
+     * Callback fired when the component requests to be closed.
+     * The `reason` parameter can optionally be used to control the response to `onClose`.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+     */
+    onClose?: {
+      bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+    }['bivarianceHack'];
+    /**
+     * A function called when a transition enters.
+     */
+    onTransitionEnter?: () => void;
+    /**
+     * A function called when a transition has exited.
+     */
+    onTransitionExited?: () => void;
+    /**
+     * If `true`, the component is shown.
+     */
+    open: boolean;
+    /**
+     * The components used for each slot inside the Modal.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots?: ModalSlots;
     /**
      * The props used for each slot inside the Modal.
      * @default {}
@@ -94,7 +205,7 @@ export interface ModalTypeMap<
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-  } & Omit<BaseModalTypeMap['props'], 'slotProps'>;
+  };
   defaultComponent: DefaultComponent;
 }
 
@@ -102,8 +213,6 @@ type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
 
 export declare const ModalRoot: React.FC<ModalRootProps>;
 
-export type ModalClassKey = keyof NonNullable<ModalProps['classes']>;
-
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
@@ -127,10 +236,6 @@ export type ModalClassKey = keyof NonNullable<ModalProps['classes']>;
  */
 declare const Modal: OverridableComponent<ModalTypeMap>;
 
-export type ModalClasses = Record<ModalClassKey, string>;
-
-export declare const modalClasses: ModalClasses;
-
 export type ModalProps<
   RootComponent extends React.ElementType = ModalTypeMap['defaultComponent'],
   AdditionalProps = {},