@mui/material 5.13.1 → 5.13.3

package/modern/DialogContent/DialogContent.js

@@ -1,3 +1,6 @@
+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';
@@ -29,21 +32,20 @@ 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({
@@ -51,21 +53,19 @@ const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inPro
     name: 'MuiDialogContent'
   });
   const {
-    className,
-    dividers = false,
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      className,
+      dividers = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     dividers
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentRoot, {
+  return /*#__PURE__*/_jsx(DialogContentRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref,
-    ...other
-  });
+    ref: ref
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? DialogContent.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/DialogContentText/DialogContentText.js

@@ -1,3 +1,6 @@
+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';
@@ -15,11 +18,7 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
-  return {
-    ...classes,
-    // forward classes to the Typography
-    ...composedClasses
-  };
+  return _extends({}, classes, composedClasses);
 };
 const DialogContentTextRoot = styled(Typography, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -33,21 +32,20 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     name: 'MuiDialogContentText'
   });
   const {
-    children,
-    className,
-    ...ownerState
-  } = props;
+      className
+    } = props,
+    ownerState = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentTextRoot, {
+  return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
     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/modern/DialogTitle/DialogTitle.js

@@ -1,3 +1,6 @@
+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';
@@ -31,24 +34,23 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     name: 'MuiDialogTitle'
   });
   const {
-    className,
-    id: idProp,
-    ...other
-  } = props;
+      className,
+      id: idProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
     titleId = idProp
   } = React.useContext(DialogContext);
-  return /*#__PURE__*/_jsx(DialogTitleRoot, {
+  return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
     component: "h2",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp ?? titleId,
-    ...other
-  });
+    id: idProp ?? titleId
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Divider/Divider.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,96 +39,80 @@ const DividerRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   margin: 0,
   // Reset browser default style.
   flexShrink: 0,
   borderWidth: 0,
   borderStyle: 'solid',
   borderColor: (theme.vars || theme).palette.divider,
-  borderBottomWidth: 'thin',
-  ...(ownerState.absolute && {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    width: '100%'
-  }),
-  ...(ownerState.light && {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
-  }),
-  ...(ownerState.variant === 'inset' && {
-    marginLeft: 72
-  }),
-  ...(ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  }),
-  ...(ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    height: '100%',
-    borderBottomWidth: 0,
-    borderRightWidth: 'thin'
-  }),
-  ...(ownerState.flexItem && {
-    alignSelf: 'stretch',
-    height: 'auto'
-  })
+  borderBottomWidth: 'thin'
+}, ownerState.absolute && {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+}, ownerState.light && {
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+}, ownerState.variant === 'inset' && {
+  marginLeft: 72
+}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2)
+}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}, ownerState.orientation === 'vertical' && {
+  height: '100%',
+  borderBottomWidth: 0,
+  borderRightWidth: 'thin'
+}, ownerState.flexItem && {
+  alignSelf: 'stretch',
+  height: 'auto'
 }), ({
   ownerState
-}) => ({
-  ...(ownerState.children && {
-    display: 'flex',
-    whiteSpace: 'nowrap',
-    textAlign: 'center',
-    border: 0,
-    '&::before, &::after': {
-      content: '""',
-      alignSelf: 'center'
-    }
-  })
+}) => _extends({}, ownerState.children && {
+  display: 'flex',
+  whiteSpace: 'nowrap',
+  textAlign: 'center',
+  border: 0,
+  '&::before, &::after': {
+    content: '""',
+    alignSelf: 'center'
+  }
 }), ({
   theme,
   ownerState
-}) => ({
-  ...(ownerState.children && ownerState.orientation !== 'vertical' && {
-    '&::before, &::after': {
-      width: '100%',
-      borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
-    }
-  })
+}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+  '&::before, &::after': {
+    width: '100%',
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+  }
 }), ({
   theme,
   ownerState
-}) => ({
-  ...(ownerState.children && ownerState.orientation === 'vertical' && {
-    flexDirection: 'column',
-    '&::before, &::after': {
-      height: '100%',
-      borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
-    }
-  })
+}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
+  flexDirection: 'column',
+  '&::before, &::after': {
+    height: '100%',
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+  }
 }), ({
   ownerState
-}) => ({
-  ...(ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
-    '&::before': {
-      width: '90%'
-    },
-    '&::after': {
-      width: '10%'
-    }
-  }),
-  ...(ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
-    '&::before': {
-      width: '10%'
-    },
-    '&::after': {
-      width: '90%'
-    }
-  })
+}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '90%'
+  },
+  '&::after': {
+    width: '10%'
+  }
+}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '10%'
+  },
+  '&::after': {
+    width: '90%'
+  }
 }));
 const DividerWrapper = styled('span', {
   name: 'MuiDivider',
@@ -139,14 +126,13 @@ const DividerWrapper = styled('span', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
-  paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
-  ...(ownerState.orientation === 'vertical' && {
-    paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
-    paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
-  })
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
+}, ownerState.orientation === 'vertical' && {
+  paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
 }));
 const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
   const props = useThemeProps({
@@ -154,20 +140,19 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     name: 'MuiDivider'
   });
   const {
-    absolute = false,
-    children,
-    className,
-    component = children ? 'div' : 'hr',
-    flexItem = false,
-    light = false,
-    orientation = 'horizontal',
-    role = component !== 'hr' ? 'separator' : undefined,
-    textAlign = 'center',
-    variant = 'fullWidth',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      absolute = false,
+      children,
+      className,
+      component = children ? 'div' : 'hr',
+      flexItem = false,
+      light = false,
+      orientation = 'horizontal',
+      role = component !== 'hr' ? 'separator' : undefined,
+      textAlign = 'center',
+      variant = 'fullWidth'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     absolute,
     component,
     flexItem,
@@ -176,21 +161,21 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role,
     textAlign,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DividerRoot, {
+  return /*#__PURE__*/_jsx(DividerRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
     role: role,
     ref: ref,
-    ownerState: ownerState,
-    ...other,
+    ownerState: ownerState
+  }, other, {
     children: children ? /*#__PURE__*/_jsx(DividerWrapper, {
       className: classes.wrapper,
       ownerState: ownerState,
       children: children
     }) : null
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Drawer/Drawer.js

@@ -1,3 +1,7 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["BackdropProps"],
+  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -62,7 +66,7 @@ const DrawerPaper = styled(Paper, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   overflowY: 'auto',
   display: 'flex',
   flexDirection: 'column',
@@ -77,40 +81,32 @@ const DrawerPaper = styled(Paper, {
   // We disable the focus ring for mouse, touch and keyboard users.
   // At some point, it would be better to keep it for keyboard users.
   // :focus-ring CSS pseudo-class will help.
-  outline: 0,
-  ...(ownerState.anchor === 'left' && {
-    left: 0
-  }),
-  ...(ownerState.anchor === 'top' && {
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 'auto',
-    maxHeight: '100%'
-  }),
-  ...(ownerState.anchor === 'right' && {
-    right: 0
-  }),
-  ...(ownerState.anchor === 'bottom' && {
-    top: 'auto',
-    left: 0,
-    bottom: 0,
-    right: 0,
-    height: 'auto',
-    maxHeight: '100%'
-  }),
-  ...(ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-    borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
-  }),
-  ...(ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-  }),
-  ...(ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-  }),
-  ...(ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
-  })
+  outline: 0
+}, ownerState.anchor === 'left' && {
+  left: 0
+}, ownerState.anchor === 'top' && {
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 'auto',
+  maxHeight: '100%'
+}, ownerState.anchor === 'right' && {
+  right: 0
+}, ownerState.anchor === 'bottom' && {
+  top: 'auto',
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 'auto',
+  maxHeight: '100%'
+}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
+  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
+  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const oppositeDirection = {
   left: 'right',
@@ -140,26 +136,26 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-    anchor: anchorProp = 'left',
-    BackdropProps,
-    children,
-    className,
-    elevation = 16,
-    hideBackdrop = false,
-    ModalProps: {
-      BackdropProps: BackdropPropsProp,
-      ...ModalProps
-    } = {},
-    onClose,
-    open = false,
-    PaperProps = {},
-    SlideProps,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Slide,
-    transitionDuration = defaultTransitionDuration,
-    variant = 'temporary',
-    ...other
-  } = props;
+      anchor: anchorProp = 'left',
+      BackdropProps,
+      children,
+      className,
+      elevation = 16,
+      hideBackdrop = false,
+      ModalProps: {
+        BackdropProps: BackdropPropsProp
+      } = {},
+      onClose,
+      open = false,
+      PaperProps = {},
+      SlideProps,
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Slide,
+      transitionDuration = defaultTransitionDuration,
+      variant = 'temporary'
+    } = props,
+    ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
 
   // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
@@ -170,67 +166,62 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   }, []);
   const anchorInvariant = getAnchor(theme, anchorProp);
   const anchor = anchorProp;
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     anchor,
     elevation,
     open,
-    variant,
-    ...other
-  };
+    variant
+  }, other);
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
+  const drawer = /*#__PURE__*/_jsx(DrawerPaper, _extends({
     elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
+    square: true
+  }, PaperProps, {
     className: clsx(classes.paper, PaperProps.className),
     ownerState: ownerState,
     children: children
-  });
+  }));
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref,
-      ...other,
+      ref: ref
+    }, other, {
       children: drawer
-    });
+    }));
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
+  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     direction: oppositeDirection[anchorInvariant],
     timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+    appear: mounted.current
+  }, SlideProps, {
     children: drawer
-  });
+  }));
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref,
-      ...other,
+      ref: ref
+    }, other, {
       children: slidingDrawer
-    });
+    }));
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
+  return /*#__PURE__*/_jsx(DrawerRoot, _extends({
+    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
       transitionDuration
-    },
+    }),
     className: clsx(classes.root, classes.modal, className),
     open: open,
     ownerState: ownerState,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+    ref: ref
+  }, other, ModalProps, {
     children: slidingDrawer
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------