@mui/material 5.13.1 → 5.13.2

package/node/InputBase/InputBase.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseComponent = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _utils = require("@mui/utils");
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -22,6 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
 var _utils2 = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const rootOverridesResolver = (props, styles) => {
@@ -68,8 +71,7 @@ const InputBaseRoot = (0, _styled.default)('div', {
 })(({
   theme,
   ownerState
-}) => ({
-  ...theme.typography.body1,
+}) => (0, _extends2.default)({}, theme.typography.body1, {
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
   // 23px
@@ -82,16 +84,13 @@ const InputBaseRoot = (0, _styled.default)('div', {
   [`&.${_inputBaseClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
-  },
-  ...(ownerState.multiline && {
-    padding: '4px 0 5px',
-    ...(ownerState.size === 'small' && {
-      paddingTop: 1
-    })
-  }),
-  ...(ownerState.fullWidth && {
-    width: '100%'
-  })
+  }
+}, ownerState.multiline && (0, _extends2.default)({
+  padding: '4px 0 5px'
+}, ownerState.size === 'small' && {
+  paddingTop: 1
+}), ownerState.fullWidth && {
+  width: '100%'
 }));
 exports.InputBaseRoot = InputBaseRoot;
 const InputBaseComponent = (0, _styled.default)('input', {
@@ -103,17 +102,17 @@ const InputBaseComponent = (0, _styled.default)('input', {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-  const placeholder = {
-    color: 'currentColor',
-    ...(theme.vars ? {
-      opacity: theme.vars.opacity.inputPlaceholder
-    } : {
-      opacity: light ? 0.42 : 0.5
-    }),
+  const placeholder = (0, _extends2.default)({
+    color: 'currentColor'
+  }, theme.vars ? {
+    opacity: theme.vars.opacity.inputPlaceholder
+  } : {
+    opacity: light ? 0.42 : 0.5
+  }, {
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter
     })
-  };
+  });
   const placeholderHidden = {
     opacity: '0 !important'
   };
@@ -122,7 +121,7 @@ const InputBaseComponent = (0, _styled.default)('input', {
   } : {
     opacity: light ? 0.42 : 0.5
   };
-  return {
+  return (0, _extends2.default)({
     font: 'inherit',
     letterSpacing: 'inherit',
     color: 'currentColor',
@@ -186,21 +185,18 @@ const InputBaseComponent = (0, _styled.default)('input', {
     '&:-webkit-autofill': {
       animationDuration: '5000s',
       animationName: 'mui-auto-fill'
-    },
-    ...(ownerState.size === 'small' && {
-      paddingTop: 1
-    }),
-    ...(ownerState.multiline && {
-      height: 'auto',
-      resize: 'none',
-      padding: 0,
-      paddingTop: 0
-    }),
-    ...(ownerState.type === 'search' && {
-      // Improve type search style.
-      MozAppearance: 'textfield'
-    })
-  };
+    }
+  }, ownerState.size === 'small' && {
+    paddingTop: 1
+  }, ownerState.multiline && {
+    height: 'auto',
+    resize: 'none',
+    padding: 0,
+    paddingTop: 0
+  }, ownerState.type === 'search' && {
+    // Improve type search style.
+    MozAppearance: 'textfield'
+  });
 });
 exports.InputBaseComponent = InputBaseComponent;
 const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
@@ -230,46 +226,42 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     name: 'MuiInputBase'
   });
   const {
-    'aria-describedby': ariaDescribedby,
-    autoComplete,
-    autoFocus,
-    className,
-    color,
-    components = {},
-    componentsProps = {},
-    defaultValue,
-    disabled,
-    disableInjectingGlobalStyles,
-    endAdornment,
-    error,
-    fullWidth = false,
-    id,
-    inputComponent = 'input',
-    inputProps: inputPropsProp = {},
-    inputRef: inputRefProp,
-    margin,
-    maxRows,
-    minRows,
-    multiline = false,
-    name,
-    onBlur,
-    onChange,
-    onClick,
-    onFocus,
-    onKeyDown,
-    onKeyUp,
-    placeholder,
-    readOnly,
-    renderSuffix,
-    rows,
-    size,
-    slotProps = {},
-    slots = {},
-    startAdornment,
-    type = 'text',
-    value: valueProp,
-    ...other
-  } = props;
+      'aria-describedby': ariaDescribedby,
+      autoComplete,
+      autoFocus,
+      className,
+      components = {},
+      componentsProps = {},
+      defaultValue,
+      disabled,
+      disableInjectingGlobalStyles,
+      endAdornment,
+      fullWidth = false,
+      id,
+      inputComponent = 'input',
+      inputProps: inputPropsProp = {},
+      inputRef: inputRefProp,
+      maxRows,
+      minRows,
+      multiline = false,
+      name,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      placeholder,
+      readOnly,
+      renderSuffix,
+      rows,
+      slotProps = {},
+      slots = {},
+      startAdornment,
+      type = 'text',
+      value: valueProp
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -404,19 +396,17 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
         }
       }
-      inputProps = {
+      inputProps = (0, _extends2.default)({
         type: undefined,
         minRows: rows,
-        maxRows: rows,
-        ...inputProps
-      };
+        maxRows: rows
+      }, inputProps);
     } else {
-      inputProps = {
+      inputProps = (0, _extends2.default)({
         type: undefined,
         maxRows,
-        minRows,
-        ...inputProps
-      };
+        minRows
+      }, inputProps);
     }
     InputComponent = _base.TextareaAutosize;
   }
@@ -431,8 +421,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       muiFormControl.setAdornedStart(Boolean(startAdornment));
     }
   }, [muiFormControl, startAdornment]);
-  const ownerState = {
-    ...props,
+  const ownerState = (0, _extends2.default)({}, props, {
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     endAdornment,
@@ -445,31 +434,23 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     size: fcs.size,
     startAdornment,
     type
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
-  inputProps = {
-    ...inputProps,
-    ...((_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input)
-  };
+  inputProps = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
-      ...rootProps,
-      ...(!(0, _base.isHostComponent)(Root) && {
-        ownerState: {
-          ...ownerState,
-          ...rootProps.ownerState
-        }
-      }),
+    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _base.isHostComponent)(Root) && {
+      ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
+    }, {
       ref: ref,
-      onClick: handleClick,
-      ...other,
+      onClick: handleClick
+    }, other, {
       className: (0, _clsx.default)(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
       children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
         value: null,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
           ownerState: ownerState,
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
@@ -487,26 +468,21 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           value: value,
           onKeyDown: onKeyDown,
           onKeyUp: onKeyUp,
-          type: type,
-          ...inputProps,
-          ...(!(0, _base.isHostComponent)(Input) && {
-            as: InputComponent,
-            ownerState: {
-              ...ownerState,
-              ...inputProps.ownerState
-            }
-          }),
+          type: type
+        }, inputProps, !(0, _base.isHostComponent)(Input) && {
+          as: InputComponent,
+          ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
+        }, {
           ref: handleInputRef,
           className: (0, _clsx.default)(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus
-        })
-      }), endAdornment, renderSuffix ? renderSuffix({
-        ...fcs,
+        }))
+      }), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, fcs, {
         startAdornment
-      }) : null]
-    })]
+      })) : null]
+    }))]
   });
 });
 process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes */ = {

package/node/InputLabel/InputLabel.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _base = require("@mui/base");
@@ -16,6 +18,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _inputLabelClasses = require("./inputLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -33,11 +36,7 @@ const useUtilityClasses = ownerState => {
     asterisk: [required && 'asterisk']
   };
   const composedClasses = (0, _base.unstable_composeClasses)(slots, _inputLabelClasses.getInputLabelUtilityClasses, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the FormLabel
-    ...composedClasses
-  };
+  return (0, _extends2.default)({}, classes, composedClasses);
 };
 const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
@@ -54,89 +53,76 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  ...(ownerState.formControl && {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    // slight alteration to spec spacing to match visual spec result
-    transform: 'translate(0, 20px) scale(1)'
-  }),
-  ...(ownerState.size === 'small' && {
-    // Compensation for the `Input.inputSizeSmall` style.
-    transform: 'translate(0, 17px) scale(1)'
-  }),
-  ...(ownerState.shrink && {
-    transform: 'translate(0, -1.5px) scale(0.75)',
-    transformOrigin: 'top left',
-    maxWidth: '133%'
-  }),
-  ...(!ownerState.disableAnimation && {
-    transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-      duration: theme.transitions.duration.shorter,
-      easing: theme.transitions.easing.easeOut
-    })
-  }),
-  ...(ownerState.variant === 'filled' && {
-    // Chrome's autofill feature gives the input field a yellow background.
-    // Since the input field is behind the label in the HTML tree,
-    // the input field is drawn last and hides the label with an opaque background color.
-    // zIndex: 1 will raise the label above opaque background-colors of input.
-    zIndex: 1,
-    pointerEvents: 'none',
-    transform: 'translate(12px, 16px) scale(1)',
-    maxWidth: 'calc(100% - 24px)',
-    ...(ownerState.size === 'small' && {
-      transform: 'translate(12px, 13px) scale(1)'
-    }),
-    ...(ownerState.shrink && {
-      userSelect: 'none',
-      pointerEvents: 'auto',
-      transform: 'translate(12px, 7px) scale(0.75)',
-      maxWidth: 'calc(133% - 24px)',
-      ...(ownerState.size === 'small' && {
-        transform: 'translate(12px, 4px) scale(0.75)'
-      })
-    })
-  }),
-  ...(ownerState.variant === 'outlined' && {
-    // see comment above on filled.zIndex
-    zIndex: 1,
-    pointerEvents: 'none',
-    transform: 'translate(14px, 16px) scale(1)',
-    maxWidth: 'calc(100% - 24px)',
-    ...(ownerState.size === 'small' && {
-      transform: 'translate(14px, 9px) scale(1)'
-    }),
-    ...(ownerState.shrink && {
-      userSelect: 'none',
-      pointerEvents: 'auto',
-      // Theoretically, we should have (8+5)*2/0.75 = 34px
-      // but it feels a better when it bleeds a bit on the left, so 32px.
-      maxWidth: 'calc(133% - 32px)',
-      transform: 'translate(14px, -9px) scale(0.75)'
-    })
+  maxWidth: '100%'
+}, ownerState.formControl && {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: 'translate(0, 20px) scale(1)'
+}, ownerState.size === 'small' && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: 'translate(0, 17px) scale(1)'
+}, ownerState.shrink && {
+  transform: 'translate(0, -1.5px) scale(0.75)',
+  transformOrigin: 'top left',
+  maxWidth: '133%'
+}, !ownerState.disableAnimation && {
+  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeOut
   })
-}));
+}, ownerState.variant === 'filled' && (0, _extends2.default)({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(12px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 13px) scale(1)'
+}, ownerState.shrink && (0, _extends2.default)({
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  transform: 'translate(12px, 7px) scale(0.75)',
+  maxWidth: 'calc(133% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 4px) scale(0.75)'
+})), ownerState.variant === 'outlined' && (0, _extends2.default)({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(14px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(14px, 9px) scale(1)'
+}, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
+  transform: 'translate(14px, -9px) scale(0.75)'
+})));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     name: 'MuiInputLabel',
     props: inProps
   });
   const {
-    disableAnimation = false,
-    margin,
-    shrink: shrinkProp,
-    variant,
-    className,
-    ...other
-  } = props;
+      disableAnimation = false,
+      shrink: shrinkProp,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _useFormControl.default)();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -147,24 +133,23 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     muiFormControl,
     states: ['size', 'variant', 'required']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = (0, _extends2.default)({}, props, {
     disableAnimation,
     formControl: muiFormControl,
     shrink,
     size: fcs.size,
     variant: fcs.variant,
     required: fcs.required
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelRoot, (0, _extends2.default)({
     "data-shrink": shrink,
     ownerState: ownerState,
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className),
-    ...other,
+    className: (0, _clsx.default)(classes.root, className)
+  }, other, {
     classes: classes
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------