@mui/material 5.13.1 → 5.13.2

package/MobileStepper/MobileStepper.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -37,27 +40,25 @@ const MobileStepperRoot = styled(Paper, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
   background: (theme.vars || theme).palette.background.default,
-  padding: 8,
-  ...(ownerState.position === 'bottom' && {
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: (theme.vars || theme).zIndex.mobileStepper
-  }),
-  ...(ownerState.position === 'top' && {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: (theme.vars || theme).zIndex.mobileStepper
-  })
+  padding: 8
+}, ownerState.position === 'bottom' && {
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: (theme.vars || theme).zIndex.mobileStepper
+}, ownerState.position === 'top' && {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: (theme.vars || theme).zIndex.mobileStepper
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
@@ -65,11 +66,9 @@ const MobileStepperDots = styled('div', {
   overridesResolver: (props, styles) => styles.dots
 })(({
   ownerState
-}) => ({
-  ...(ownerState.variant === 'dots' && {
-    display: 'flex',
-    flexDirection: 'row'
-  })
+}) => _extends({}, ownerState.variant === 'dots' && {
+  display: 'flex',
+  flexDirection: 'row'
 }));
 const MobileStepperDot = styled('div', {
   name: 'MuiMobileStepper',
@@ -85,31 +84,26 @@ const MobileStepperDot = styled('div', {
   theme,
   ownerState,
   dotActive
-}) => ({
-  ...(ownerState.variant === 'dots' && {
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shortest
-    }),
-    backgroundColor: (theme.vars || theme).palette.action.disabled,
-    borderRadius: '50%',
-    width: 8,
-    height: 8,
-    margin: '0 2px',
-    ...(dotActive && {
-      backgroundColor: (theme.vars || theme).palette.primary.main
-    })
-  })
-}));
+}) => _extends({}, ownerState.variant === 'dots' && _extends({
+  transition: theme.transitions.create('background-color', {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: (theme.vars || theme).palette.action.disabled,
+  borderRadius: '50%',
+  width: 8,
+  height: 8,
+  margin: '0 2px'
+}, dotActive && {
+  backgroundColor: (theme.vars || theme).palette.primary.main
+})));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
   slot: 'Progress',
   overridesResolver: (props, styles) => styles.progress
 })(({
   ownerState
-}) => ({
-  ...(ownerState.variant === 'progress' && {
-    width: '50%'
-  })
+}) => _extends({}, ownerState.variant === 'progress' && {
+  width: '50%'
 }));
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
   const props = useThemeProps({
@@ -117,30 +111,29 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     name: 'MuiMobileStepper'
   });
   const {
-    activeStep = 0,
-    backButton,
-    className,
-    LinearProgressProps,
-    nextButton,
-    position = 'bottom',
-    steps,
-    variant = 'dots',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      activeStep = 0,
+      backButton,
+      className,
+      LinearProgressProps,
+      nextButton,
+      position = 'bottom',
+      steps,
+      variant = 'dots'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     activeStep,
     position,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(MobileStepperRoot, {
+  return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
     square: true,
     elevation: 0,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState,
-    ...other,
+    ownerState: ownerState
+  }, other, {
     children: [backButton, variant === 'text' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [activeStep + 1, " / ", steps]
     }), variant === 'dots' && /*#__PURE__*/_jsx(MobileStepperDots, {
@@ -151,14 +144,13 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
         ownerState: ownerState,
         dotActive: index === activeStep
       }, index))
-    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, {
+    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, _extends({
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100),
-      ...LinearProgressProps
-    }), nextButton]
-  });
+      value: Math.ceil(activeStep / (steps - 1) * 100)
+    }, LinearProgressProps)), nextButton]
+  }));
 });
 process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

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

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,16 +24,15 @@ const ModalRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   position: 'fixed',
   zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
-  left: 0,
-  ...(!ownerState.open && ownerState.exited && {
-    visibility: 'hidden'
-  })
+  left: 0
+}, !ownerState.open && ownerState.exited && {
+  visibility: 'hidden'
 }));
 const ModalBackdrop = styled(Backdrop, {
   name: 'MuiModal',
@@ -62,33 +64,33 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     props: inProps
   });
   const {
-    BackdropComponent = ModalBackdrop,
-    BackdropProps,
-    classes,
-    className,
-    closeAfterTransition = false,
-    children,
-    container,
-    component,
-    components = {},
-    componentsProps = {},
-    disableAutoFocus = false,
-    disableEnforceFocus = false,
-    disableEscapeKeyDown = false,
-    disablePortal = false,
-    disableRestoreFocus = false,
-    disableScrollLock = false,
-    hideBackdrop = false,
-    keepMounted = false,
-    onBackdropClick,
-    onClose,
-    open,
-    slotProps,
-    slots,
-    // eslint-disable-next-line react/prop-types
-    theme,
-    ...other
-  } = props;
+      BackdropComponent = ModalBackdrop,
+      BackdropProps,
+      classes,
+      className,
+      closeAfterTransition = false,
+      children,
+      container,
+      component,
+      components = {},
+      componentsProps = {},
+      disableAutoFocus = false,
+      disableEnforceFocus = false,
+      disableEscapeKeyDown = false,
+      disablePortal = false,
+      disableRestoreFocus = false,
+      disableScrollLock = false,
+      hideBackdrop = false,
+      keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
+      slotProps,
+      slots,
+      // eslint-disable-next-line react/prop-types
+      theme
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     container,
@@ -105,42 +107,35 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onClose,
     open
   };
-  const ownerState = {
-    ...props,
-    ...commonProps,
+  const ownerState = _extends({}, props, commonProps, {
     exited
-  };
+  });
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /*#__PURE__*/_jsx(ModalUnstyled, {
+  return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
     slots: {
       root: RootSlot,
       backdrop: BackdropSlot
     },
     slotProps: {
-      root: () => ({
-        ...resolveComponentProps(rootSlotProps, ownerState),
-        ...(!isHostComponent(RootSlot) && {
-          as: component,
-          theme
-        }),
+      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
+        as: component,
+        theme
+      }, {
         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: () => ({
-        ...BackdropProps,
-        ...resolveComponentProps(backdropSlotProps, ownerState),
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
         className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
       })
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
-    ref: ref,
-    ...other,
-    ...commonProps,
+    ref: ref
+  }, other, commonProps, {
     children: children
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/NativeSelect/NativeSelect.js

@@ -1,3 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
+  _excluded2 = ["root"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -29,49 +33,41 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     props: inProps
   });
   const {
-    className,
-    children,
-    classes: classesProp = {},
-    IconComponent = ArrowDropDownIcon,
-    input = defaultInput,
-    inputProps,
-    variant,
-    ...other
-  } = props;
+      className,
+      children,
+      classes: classesProp = {},
+      IconComponent = ArrowDropDownIcon,
+      input = defaultInput,
+      inputProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     classes: classesProp
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  const {
-    root,
-    ...otherClasses
-  } = classesProp;
+  const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2);
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(input, {
+    children: /*#__PURE__*/React.cloneElement(input, _extends({
       // Most of the logic is implemented in `NativeSelectInput`.
       // The `Select` component is a simple API wrapper to expose something better to play with.
       inputComponent: NativeSelectInput,
-      inputProps: {
+      inputProps: _extends({
         children,
         classes: otherClasses,
         IconComponent,
         variant: fcs.variant,
-        type: undefined,
-        // We render a select. We can ignore the type provided by the `Input`.
-        ...inputProps,
-        ...(input ? input.props.inputProps : {})
-      },
-      ref,
-      ...other,
+        type: undefined
+      }, inputProps, input ? input.props.inputProps : {}),
+      ref
+    }, other, {
       className: clsx(classes.root, input.props.className, className)
-    })
+    }))
   });
 });
 process.env.NODE_ENV !== "production" ? NativeSelect.propTypes /* remove-proptypes */ = {

package/NativeSelect/NativeSelectInput.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -26,7 +29,7 @@ const useUtilityClasses = ownerState => {
 export const nativeSelectSelectStyles = ({
   ownerState,
   theme
-}) => ({
+}) => _extends({
   MozAppearance: 'none',
   // Reset
   WebkitAppearance: 'none',
@@ -37,15 +40,13 @@ export const nativeSelectSelectStyles = ({
   borderRadius: 0,
   // Reset
   cursor: 'pointer',
-  '&:focus': {
-    // Show that it's not an text input
-    ...(theme.vars ? {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
-    } : {
-      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
-    }),
+  '&:focus': _extends({}, theme.vars ? {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
+  } : {
+    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+  }, {
     borderRadius: 0 // Reset Chrome style
-  },
+  }),
 
   // Remove IE11 arrow
   '&::-ms-expand': {
@@ -64,23 +65,20 @@ export const nativeSelectSelectStyles = ({
   '&&&': {
     paddingRight: 24,
     minWidth: 16 // So it doesn't collapse.
+  }
+}, ownerState.variant === 'filled' && {
+  '&&&': {
+    paddingRight: 32
+  }
+}, ownerState.variant === 'outlined' && {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  '&:focus': {
+    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
   },
 
-  ...(ownerState.variant === 'filled' && {
-    '&&&': {
-      paddingRight: 32
-    }
-  }),
-  ...(ownerState.variant === 'outlined' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    '&:focus': {
-      borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
-    },
-
-    '&&&': {
-      paddingRight: 32
-    }
-  })
+  '&&&': {
+    paddingRight: 32
+  }
 });
 const NativeSelectSelect = styled('select', {
   name: 'MuiNativeSelect',
@@ -98,7 +96,7 @@ const NativeSelectSelect = styled('select', {
 export const nativeSelectIconStyles = ({
   ownerState,
   theme
-}) => ({
+}) => _extends({
   // We use a position absolute over a flexbox in order to forward the pointer events
   // to the input and to support wrapping tags..
   position: 'absolute',
@@ -110,16 +108,13 @@ export const nativeSelectIconStyles = ({
   color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  },
-  ...(ownerState.open && {
-    transform: 'rotate(180deg)'
-  }),
-  ...(ownerState.variant === 'filled' && {
-    right: 7
-  }),
-  ...(ownerState.variant === 'outlined' && {
-    right: 7
-  })
+  }
+}, ownerState.open && {
+  transform: 'rotate(180deg)'
+}, ownerState.variant === 'filled' && {
+  right: 7
+}, ownerState.variant === 'outlined' && {
+  right: 7
 });
 const NativeSelectIcon = styled('svg', {
   name: 'MuiNativeSelect',
@@ -137,29 +132,27 @@ const NativeSelectIcon = styled('svg', {
  */
 const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) {
   const {
-    className,
-    disabled,
-    error,
-    IconComponent,
-    inputRef,
-    variant = 'standard',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      className,
+      disabled,
+      error,
+      IconComponent,
+      inputRef,
+      variant = 'standard'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     disabled,
     variant,
     error
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(NativeSelectSelect, {
+    children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({
       ownerState: ownerState,
       className: clsx(classes.select, className),
       disabled: disabled,
-      ref: inputRef || ref,
-      ...other
-    }), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
+      ref: inputRef || ref
+    }, other)), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
       as: IconComponent,
       ownerState: ownerState,
       className: classes.icon

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;