@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.10

package/node/InputBase/InputBase.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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"));
+exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseInput = void 0;
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -20,8 +18,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -29,9 +26,9 @@ 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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiInputBase');
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -69,14 +66,14 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _inputBaseClasses.getInputBaseUtilityClass, classes);
 };
-const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
+const InputBaseRoot = exports.InputBaseRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiInputBase',
   slot: 'Root',
   overridesResolver: rootOverridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, theme.typography.body1, {
+  theme
+}) => ({
+  ...theme.typography.body1,
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
   // 23px
@@ -89,34 +86,50 @@ const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
   [`&.${_inputBaseClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
-  }
-}, ownerState.multiline && (0, _extends2.default)({
-  padding: '4px 0 5px'
-}, ownerState.size === 'small' && {
-  paddingTop: 1
-}), ownerState.fullWidth && {
-  width: '100%'
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: '4px 0 5px'
+    }
+  }, {
+    props: ({
+      ownerState,
+      size
+    }) => ownerState.multiline && size === 'small',
+    style: {
+      paddingTop: 1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      width: '100%'
+    }
+  }]
 }));
-const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('input', {
+const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input', {
   name: 'MuiInputBase',
   slot: 'Input',
   overridesResolver: inputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
-  const placeholder = (0, _extends2.default)({
-    color: 'currentColor'
-  }, theme.vars ? {
-    opacity: theme.vars.opacity.inputPlaceholder
-  } : {
-    opacity: light ? 0.42 : 0.5
-  }, {
+  const placeholder = {
+    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'
   };
@@ -125,7 +138,7 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
   } : {
     opacity: light ? 0.42 : 0.5
   };
-  return (0, _extends2.default)({
+  return {
     font: 'inherit',
     letterSpacing: 'inherit',
     color: 'currentColor',
@@ -141,15 +154,12 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
     display: 'block',
     // Make the flex item shrink with Firefox
     minWidth: 0,
-    width: '100%',
-    // Fix IE11 width issue
+    flexGrow: 1,
     animationName: 'mui-auto-fill-cancel',
     animationDuration: '10ms',
     '&::-webkit-input-placeholder': placeholder,
     '&::-moz-placeholder': placeholder,
     // Firefox 19+
-    '&:-ms-input-placeholder': placeholder,
-    // IE11
     '&::-ms-input-placeholder': placeholder,
     // Edge
     '&:focus': {
@@ -168,15 +178,11 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
       '&::-webkit-input-placeholder': placeholderHidden,
       '&::-moz-placeholder': placeholderHidden,
       // Firefox 19+
-      '&:-ms-input-placeholder': placeholderHidden,
-      // IE11
       '&::-ms-input-placeholder': placeholderHidden,
       // Edge
       '&:focus::-webkit-input-placeholder': placeholderVisible,
       '&:focus::-moz-placeholder': placeholderVisible,
       // Firefox 19+
-      '&:focus:-ms-input-placeholder': placeholderVisible,
-      // IE11
       '&:focus::-ms-input-placeholder': placeholderVisible // Edge
     },
     [`&.${_inputBaseClasses.default.disabled}`]: {
@@ -187,18 +193,33 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
     '&:-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'
-  });
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        paddingTop: 1
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        height: 'auto',
+        resize: 'none',
+        padding: 0,
+        paddingTop: 0
+      }
+    }, {
+      props: {
+        type: 'search'
+      },
+      style: {
+        MozAppearance: 'textfield' // Improve type search style.
+      }
+    }]
+  };
 });
 const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
   styles: {
@@ -222,47 +243,51 @@ const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.defaul
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   var _slotProps$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
   });
   const {
-      '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);
+    '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;
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -323,12 +348,6 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     }
   }, [value, checkDirty, isControlled]);
   const handleFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (fcs.disabled) {
-      event.stopPropagation();
-      return;
-    }
     if (onFocus) {
       onFocus(event);
     }
@@ -397,17 +416,19 @@ 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 = (0, _extends2.default)({
+      inputProps = {
         type: undefined,
         minRows: rows,
-        maxRows: rows
-      }, inputProps);
+        maxRows: rows,
+        ...inputProps
+      };
     } else {
-      inputProps = (0, _extends2.default)({
+      inputProps = {
         type: undefined,
         maxRows,
-        minRows
-      }, inputProps);
+        minRows,
+        ...inputProps
+      };
     }
     InputComponent = _base.TextareaAutosize;
   }
@@ -422,7 +443,8 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       muiFormControl.setAdornedStart(Boolean(startAdornment));
     }
   }, [muiFormControl, startAdornment]);
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     endAdornment,
@@ -435,24 +457,31 @@ 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 = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
+  const Input = slots.input || components.Input || InputBaseInput;
+  inputProps = {
+    ...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, (0, _extends2.default)({}, rootProps, !(0, _utils.isHostComponent)(Root) && {
-      ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
-    }, {
+    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+      ...rootProps,
       ref: ref,
-      onClick: handleClick
-    }, other, {
+      onClick: handleClick,
+      ...other,
+      ...(!(0, _utils.isHostComponent)(Root) && {
+        ownerState: {
+          ...ownerState,
+          ...rootProps.ownerState
+        }
+      }),
       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, (0, _extends2.default)({
-          ownerState: ownerState,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
           autoComplete: autoComplete,
@@ -469,21 +498,26 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           value: value,
           onKeyDown: onKeyDown,
           onKeyUp: onKeyUp,
-          type: type
-        }, inputProps, !(0, _utils.isHostComponent)(Input) && {
-          as: InputComponent,
-          ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
-        }, {
+          type: type,
+          ...inputProps,
+          ...(!(0, _utils.isHostComponent)(Input) && {
+            as: InputComponent,
+            ownerState: {
+              ...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((0, _extends2.default)({}, fcs, {
+        })
+      }), endAdornment, renderSuffix ? renderSuffix({
+        ...fcs,
         startAdornment
-      })) : null]
-    }))]
+      }) : null]
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes */ = {
@@ -523,8 +557,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
   /**
    * 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.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -536,8 +569,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    * 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.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */