@mui/material 5.12.3 → 5.13.1

package/Dialog/Dialog.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -61,28 +58,30 @@ const DialogContainer = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   height: '100%',
   '@media print': {
     height: 'auto'
   },
   // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0
-}, ownerState.scroll === 'paper' && {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-}, ownerState.scroll === 'body' && {
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  textAlign: 'center',
-  '&:after': {
-    content: '""',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    height: '100%',
-    width: '0'
-  }
+  outline: 0,
+  ...(ownerState.scroll === 'paper' && {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }),
+  ...(ownerState.scroll === 'body' && {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    textAlign: 'center',
+    '&:after': {
+      content: '""',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      height: '100%',
+      width: '0'
+    }
+  })
 }));
 const DialogPaper = styled(Paper, {
   name: 'MuiDialog',
@@ -96,7 +95,7 @@ const DialogPaper = styled(Paper, {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   margin: 32,
   position: 'relative',
   overflowY: 'auto',
@@ -104,44 +103,52 @@ const DialogPaper = styled(Paper, {
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'
-  }
-}, ownerState.scroll === 'paper' && {
-  display: 'flex',
-  flexDirection: 'column',
-  maxHeight: 'calc(100% - 64px)'
-}, ownerState.scroll === 'body' && {
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  textAlign: 'left' // 'initial' doesn't work on IE11
-}, !ownerState.maxWidth && {
-  maxWidth: 'calc(100% - 64px)'
-}, ownerState.maxWidth === 'xs' && {
-  maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `${theme.breakpoints.values.xs}${theme.breakpoints.unit}`,
-  [`&.${dialogClasses.paperScrollBody}`]: {
-    [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
-      maxWidth: 'calc(100% - 64px)'
+  },
+  ...(ownerState.scroll === 'paper' && {
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: 'calc(100% - 64px)'
+  }),
+  ...(ownerState.scroll === 'body' && {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    textAlign: 'left' // 'initial' doesn't work on IE11
+  }),
+
+  ...(!ownerState.maxWidth && {
+    maxWidth: 'calc(100% - 64px)'
+  }),
+  ...(ownerState.maxWidth === 'xs' && {
+    maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `max(${theme.breakpoints.values.xs}${theme.breakpoints.unit}, 444px)`,
+    [`&.${dialogClasses.paperScrollBody}`]: {
+      [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
+        maxWidth: 'calc(100% - 64px)'
+      }
     }
-  }
-}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-  maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
-  [`&.${dialogClasses.paperScrollBody}`]: {
-    [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
-      maxWidth: 'calc(100% - 64px)'
+  }),
+  ...(ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
+    maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
+    [`&.${dialogClasses.paperScrollBody}`]: {
+      [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
+        maxWidth: 'calc(100% - 64px)'
+      }
     }
-  }
-}, ownerState.fullWidth && {
-  width: 'calc(100% - 64px)'
-}, ownerState.fullScreen && {
-  margin: 0,
-  width: '100%',
-  maxWidth: '100%',
-  height: '100%',
-  maxHeight: 'none',
-  borderRadius: 0,
-  [`&.${dialogClasses.paperScrollBody}`]: {
+  }),
+  ...(ownerState.fullWidth && {
+    width: 'calc(100% - 64px)'
+  }),
+  ...(ownerState.fullScreen && {
     margin: 0,
-    maxWidth: '100%'
-  }
+    width: '100%',
+    maxWidth: '100%',
+    height: '100%',
+    maxHeight: 'none',
+    borderRadius: 0,
+    [`&.${dialogClasses.paperScrollBody}`]: {
+      margin: 0,
+      maxWidth: '100%'
+    }
+  })
 }));
 
 /**
@@ -158,34 +165,35 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      'aria-describedby': ariaDescribedby,
-      'aria-labelledby': ariaLabelledbyProp,
-      BackdropComponent,
-      BackdropProps,
-      children,
-      className,
-      disableEscapeKeyDown = false,
-      fullScreen = false,
-      fullWidth = false,
-      maxWidth = 'sm',
-      onBackdropClick,
-      onClose,
-      open,
-      PaperComponent = Paper,
-      PaperProps = {},
-      scroll = 'paper',
-      TransitionComponent = Fade,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledbyProp,
+    BackdropComponent,
+    BackdropProps,
+    children,
+    className,
+    disableEscapeKeyDown = false,
+    fullScreen = false,
+    fullWidth = false,
+    maxWidth = 'sm',
+    onBackdropClick,
+    onClose,
+    open,
+    PaperComponent = Paper,
+    PaperProps = {},
+    scroll = 'paper',
+    TransitionComponent = Fade,
+    transitionDuration = defaultTransitionDuration,
+    TransitionProps,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableEscapeKeyDown,
     fullScreen,
     fullWidth,
     maxWidth,
     scroll
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const backdropClick = React.useRef();
   const handleMouseDown = event => {
@@ -212,52 +220,53 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       titleId: ariaLabelledby
     };
   }, [ariaLabelledby]);
-  return /*#__PURE__*/_jsx(DialogRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogRoot, {
     className: clsx(classes.root, className),
     closeAfterTransition: true,
     components: {
       Backdrop: DialogBackdrop
     },
     componentsProps: {
-      backdrop: _extends({
+      backdrop: {
         transitionDuration,
-        as: BackdropComponent
-      }, BackdropProps)
+        as: BackdropComponent,
+        ...BackdropProps
+      }
     },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
     ref: ref,
     onClick: handleBackdropClick,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(TransitionComponent, {
       appear: true,
       in: open,
       timeout: transitionDuration,
-      role: "presentation"
-    }, TransitionProps, {
+      role: "presentation",
+      ...TransitionProps,
       children: /*#__PURE__*/_jsx(DialogContainer, {
         className: clsx(classes.container),
         onMouseDown: handleMouseDown,
         ownerState: ownerState,
-        children: /*#__PURE__*/_jsx(DialogPaper, _extends({
+        children: /*#__PURE__*/_jsx(DialogPaper, {
           as: PaperComponent,
           elevation: 24,
           role: "dialog",
           "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby
-        }, PaperProps, {
+          "aria-labelledby": ariaLabelledby,
+          ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,
             children: children
           })
-        }))
+        })
       })
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Dialog/DialogContext.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-interface DialogContextValue {
-    titleId?: string;
-}
-declare const DialogContext: React.Context<DialogContextValue>;
-export default DialogContext;
+import * as React from 'react';
+interface DialogContextValue {
+    titleId?: string;
+}
+declare const DialogContext: React.Context<DialogContextValue>;
+export default DialogContext;

package/Dialog/dialogClasses.d.ts

@@ -1,36 +1,36 @@
-export interface DialogClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the container element if `scroll="paper"`. */
-    scrollPaper: string;
-    /** Styles applied to the container element if `scroll="body"`. */
-    scrollBody: string;
-    /** Styles applied to the container element. */
-    container: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the Paper component if `scroll="paper"`. */
-    paperScrollPaper: string;
-    /** Styles applied to the Paper component if `scroll="body"`. */
-    paperScrollBody: string;
-    /** Styles applied to the Paper component if `maxWidth=false`. */
-    paperWidthFalse: string;
-    /** Styles applied to the Paper component if `maxWidth="xs"`. */
-    paperWidthXs: string;
-    /** Styles applied to the Paper component if `maxWidth="sm"`. */
-    paperWidthSm: string;
-    /** Styles applied to the Paper component if `maxWidth="md"`. */
-    paperWidthMd: string;
-    /** Styles applied to the Paper component if `maxWidth="lg"`. */
-    paperWidthLg: string;
-    /** Styles applied to the Paper component if `maxWidth="xl"`. */
-    paperWidthXl: string;
-    /** Styles applied to the Paper component if `fullWidth={true}`. */
-    paperFullWidth: string;
-    /** Styles applied to the Paper component if `fullScreen={true}`. */
-    paperFullScreen: string;
-}
-export type DialogClassKey = keyof DialogClasses;
-export declare function getDialogUtilityClass(slot: string): string;
-declare const dialogClasses: DialogClasses;
-export default dialogClasses;
+export interface DialogClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the container element if `scroll="paper"`. */
+    scrollPaper: string;
+    /** Styles applied to the container element if `scroll="body"`. */
+    scrollBody: string;
+    /** Styles applied to the container element. */
+    container: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the Paper component if `scroll="paper"`. */
+    paperScrollPaper: string;
+    /** Styles applied to the Paper component if `scroll="body"`. */
+    paperScrollBody: string;
+    /** Styles applied to the Paper component if `maxWidth=false`. */
+    paperWidthFalse: string;
+    /** Styles applied to the Paper component if `maxWidth="xs"`. */
+    paperWidthXs: string;
+    /** Styles applied to the Paper component if `maxWidth="sm"`. */
+    paperWidthSm: string;
+    /** Styles applied to the Paper component if `maxWidth="md"`. */
+    paperWidthMd: string;
+    /** Styles applied to the Paper component if `maxWidth="lg"`. */
+    paperWidthLg: string;
+    /** Styles applied to the Paper component if `maxWidth="xl"`. */
+    paperWidthXl: string;
+    /** Styles applied to the Paper component if `fullWidth={true}`. */
+    paperFullWidth: string;
+    /** Styles applied to the Paper component if `fullScreen={true}`. */
+    paperFullScreen: string;
+}
+export type DialogClassKey = keyof DialogClasses;
+export declare function getDialogUtilityClass(slot: string): string;
+declare const dialogClasses: DialogClasses;
+export default dialogClasses;

package/DialogActions/DialogActions.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disableSpacing"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,16 +27,17 @@ const DialogActionsRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'flex',
   alignItems: 'center',
   padding: 8,
   justifyContent: 'flex-end',
-  flex: '0 0 auto'
-}, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
-    marginLeft: 8
-  }
+  flex: '0 0 auto',
+  ...(!ownerState.disableSpacing && {
+    '& > :not(:first-of-type)': {
+      marginLeft: 8
+    }
+  })
 }));
 const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inProps, ref) {
   const props = useThemeProps({
@@ -47,19 +45,21 @@ const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inPro
     name: 'MuiDialogActions'
   });
   const {
-      className,
-      disableSpacing = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    disableSpacing = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableSpacing
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogActionsRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogActionsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogActions.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/DialogActions/dialogActionsClasses.d.ts

@@ -1,10 +1,10 @@
-export interface DialogActionsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disableSpacing={true}`. */
-    spacing: string;
-}
-export type DialogActionsClassKey = keyof DialogActionsClasses;
-export declare function getDialogActionsUtilityClass(slot: string): string;
-declare const dialogActionsClasses: DialogActionsClasses;
-export default dialogActionsClasses;
+export interface DialogActionsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disableSpacing={true}`. */
+    spacing: string;
+}
+export type DialogActionsClassKey = keyof DialogActionsClasses;
+export declare function getDialogActionsUtilityClass(slot: string): string;
+declare const dialogActionsClasses: DialogActionsClasses;
+export default dialogActionsClasses;

package/DialogContent/DialogContent.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "dividers"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,20 +29,21 @@ const DialogContentRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   flex: '1 1 auto',
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
   overflowY: 'auto',
-  padding: '20px 24px'
-}, ownerState.dividers ? {
-  padding: '16px 24px',
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-} : {
-  [`.${dialogTitleClasses.root} + &`]: {
-    paddingTop: 0
-  }
+  padding: '20px 24px',
+  ...(ownerState.dividers ? {
+    padding: '16px 24px',
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  } : {
+    [`.${dialogTitleClasses.root} + &`]: {
+      paddingTop: 0
+    }
+  })
 }));
 const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
   const props = useThemeProps({
@@ -53,19 +51,21 @@ const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inPro
     name: 'MuiDialogContent'
   });
   const {
-      className,
-      dividers = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    dividers = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     dividers
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContent.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/DialogContent/dialogContentClasses.d.ts

@@ -1,10 +1,10 @@
-export interface DialogContentClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `dividers={true}`. */
-    dividers: string;
-}
-export type DialogContentClassKey = keyof DialogContentClasses;
-export declare function getDialogContentUtilityClass(slot: string): string;
-declare const dialogContentClasses: DialogContentClasses;
-export default dialogContentClasses;
+export interface DialogContentClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `dividers={true}`. */
+    dividers: string;
+}
+export type DialogContentClassKey = keyof DialogContentClasses;
+export declare function getDialogContentUtilityClass(slot: string): string;
+declare const dialogContentClasses: DialogContentClasses;
+export default dialogContentClasses;

package/DialogContentText/DialogContentText.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -18,7 +15,11 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the Typography
+    ...composedClasses
+  };
 };
 const DialogContentTextRoot = styled(Typography, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -32,20 +33,21 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     name: 'MuiDialogContentText'
   });
   const {
-      className
-    } = props,
-    ownerState = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    ...ownerState
+  } = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
     color: "text.secondary",
     ref: ref,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, props, {
+    className: clsx(classes.root, className),
+    ...props,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContentText.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/DialogContentText/dialogContentTextClasses.d.ts

@@ -1,8 +1,8 @@
-export interface DialogContentTextClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export type DialogContentTextClassKey = keyof DialogContentTextClasses;
-export declare function getDialogContentTextUtilityClass(slot: string): string;
-declare const dialogContentTextClasses: DialogContentTextClasses;
-export default dialogContentTextClasses;
+export interface DialogContentTextClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type DialogContentTextClassKey = keyof DialogContentTextClasses;
+export declare function getDialogContentTextUtilityClass(slot: string): string;
+declare const dialogContentTextClasses: DialogContentTextClasses;
+export default dialogContentTextClasses;

package/DialogTitle/DialogTitle.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "id"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,23 +31,24 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     name: 'MuiDialogTitle'
   });
   const {
-      className,
-      id: idProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    id: idProp,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
     titleId = idProp
   } = React.useContext(DialogContext);
-  return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogTitleRoot, {
     component: "h2",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp != null ? idProp : titleId
-  }, other));
+    id: idProp != null ? idProp : titleId,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------