@mui/material 5.14.6 → 5.14.8

package/Modal/Modal.d.ts

@@ -26,187 +26,181 @@ export interface ModalSlots {
   backdrop?: React.ElementType;
 }
 
+export interface ModalOwnProps {
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent?: React.ElementType<BackdropProps>;
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @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<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.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+    Backdrop?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, 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 {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+    backdrop?: SlotComponentProps<typeof Backdrop, ModalComponentsPropsOverrides, ModalOwnerState>;
+  };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ModalTypeMap<
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
   AdditionalProps = {},
 > {
-  props: AdditionalProps & {
-    /**
-     * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-     * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-     * @default styled(Backdrop, {
-     *   name: 'MuiModal',
-     *   slot: 'Backdrop',
-     *   overridesResolver: (props, styles) => {
-     *     return styles.backdrop;
-     *   },
-     * })({
-     *   zIndex: -1,
-     * })
-     */
-    BackdropComponent?: React.ElementType<BackdropProps>;
-    /**
-     * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-     * @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<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.
-     *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
-     *
-     * @default {}
-     */
-    components?: {
-      Root?: React.ElementType;
-      Backdrop?: React.ElementType;
-    };
-    /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     *
-     * This prop is an alias for the `slotProps` prop.
-     * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-     *
-     * @default {}
-     */
-    componentsProps?: {
-      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
-      backdrop?: SlotComponentProps<
-        typeof Backdrop,
-        ModalComponentsPropsOverrides,
-        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 {}
-     */
-    slotProps?: {
-      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
-      backdrop?: SlotComponentProps<
-        typeof Backdrop,
-        ModalComponentsPropsOverrides,
-        ModalOwnerState
-      >;
-    };
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ModalOwnProps;
+  defaultComponent: RootComponent;
 }
 
 type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];

package/PaginationItem/PaginationItem.d.ts

@@ -12,92 +12,94 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
+export interface PaginationItemOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaginationItemClasses>;
+  /**
+   * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<
+    'standard' | 'primary' | 'secondary',
+    PaginationItemPropsColorOverrides
+  >;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The current page number.
+   */
+  page?: React.ReactNode;
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape?: 'circular' | 'rounded';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of pagination item.
+   * @default 'page'
+   */
+  type?: UsePaginationItem['type'];
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
+}
+
 export interface PaginationItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PaginationItemClasses>;
-    /**
-     * The active color.
-     * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-     * @default 'standard'
-     */
-    color?: OverridableStringUnion<
-      'standard' | 'primary' | 'secondary',
-      PaginationItemPropsColorOverrides
-    >;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
-     *
-     * @default {}
-     */
-    components?: {
-      first?: React.ElementType;
-      last?: React.ElementType;
-      next?: React.ElementType;
-      previous?: React.ElementType;
-    };
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The current page number.
-     */
-    page?: React.ReactNode;
-    /**
-     * If `true` the pagination item is selected.
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * The shape of the pagination item.
-     * @default 'circular'
-     */
-    shape?: 'circular' | 'rounded';
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
-    /**
-     * The components used for each slot inside.
-     *
-     * This prop is an alias for the `components` prop, which will be deprecated in the future.
-     *
-     * @default {}
-     */
-    slots?: {
-      first?: React.ElementType;
-      last?: React.ElementType;
-      next?: React.ElementType;
-      previous?: React.ElementType;
-    };
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The type of pagination item.
-     * @default 'page'
-     */
-    type?: UsePaginationItem['type'];
-    /**
-     * The variant to use.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & PaginationItemOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/Paper/Paper.d.ts

@@ -40,10 +40,10 @@ export interface PaperOwnProps {
 
 export interface PaperTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
   props: AdditionalProps & PaperOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponent;
 }
 
 /**

package/Popover/Popover.d.ts

@@ -91,9 +91,10 @@ export interface PopoverProps
   elevation?: number;
   /**
    * Specifies how close to the edge of the window the popover can appear.
+   * If null, the popover will not be constrained by the window.
    * @default 16
    */
-  marginThreshold?: number;
+  marginThreshold?: number | null;
   onClose?: ModalProps['onClose'];
   /**
    * If `true`, the component is shown.

package/Popover/Popover.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
   _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -113,7 +113,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transitionDuration: transitionDurationProp = 'auto',
       TransitionProps: {
         onEntering
-      } = {}
+      } = {},
+      disableScrollLock = false
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -201,11 +202,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (top < marginThreshold) {
+    if (marginThreshold !== null && top < marginThreshold) {
       const diff = top - marginThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
-    } else if (bottom > heightThreshold) {
+    } else if (marginThreshold !== null && bottom > heightThreshold) {
       const diff = bottom - heightThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
@@ -217,7 +218,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     // Check if the horizontal axis needs shifting
-    if (left < marginThreshold) {
+    if (marginThreshold !== null && left < marginThreshold) {
       const diff = left - marginThreshold;
       left -= diff;
       elemTransformOrigin.horizontal += diff;
@@ -248,6 +249,12 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     element.style.transformOrigin = positioning.transformOrigin;
     setIsPositioned(true);
   }, [getPositioningStyle]);
+  React.useEffect(() => {
+    if (disableScrollLock) {
+      window.addEventListener('scroll', setPositioningStyles);
+    }
+    return () => window.removeEventListener('scroll', setPositioningStyles);
+  }, [anchorEl, disableScrollLock, setPositioningStyles]);
   const handleEntering = (element, isAppearing) => {
     if (onEntering) {
       onEntering(element, isAppearing);
@@ -328,7 +335,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = _useSlotProps,
     rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
   return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
-    slotProps: rootSlotPropsProp
+    slotProps: rootSlotPropsProp,
+    disableScrollLock
   }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
@@ -423,6 +431,11 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock: PropTypes.bool,
   /**
    * The elevation of the popover.
    * @default 8
@@ -430,6 +443,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   elevation: integerPropType,
   /**
    * Specifies how close to the edge of the window the popover can appear.
+   * If null, the popover will not be constrained by the window.
    * @default 16
    */
   marginThreshold: PropTypes.number,

package/Radio/Radio.js

@@ -21,10 +21,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    color
+    color,
+    size
   } = ownerState;
   const slots = {
-    root: ['root', `color${capitalize(color)}`]
+    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
   };
   return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 };

package/Radio/radioClasses.d.ts

@@ -9,6 +9,8 @@ export interface RadioClasses {
     colorPrimary: string;
     /** Styles applied to the root element if `color="secondary"`. */
     colorSecondary: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
 }
 export type RadioClassKey = keyof RadioClasses;
 export declare function getRadioUtilityClass(slot: string): string;

package/Radio/radioClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getRadioUtilityClass(slot) {
   return generateUtilityClass('MuiRadio', slot);
 }
-const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
+const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 export default radioClasses;