@mui/material 5.10.12 → 5.10.14

package/modern/InputBase/InputBase.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-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", "startAdornment", "type", "value"];
+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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,7 +32,6 @@ export const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -56,7 +55,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getInputBaseUtilityClass, classes);
 };
-
 export const InputBaseRoot = styled('div', {
   name: 'MuiInputBase',
   slot: 'Root',
@@ -94,7 +92,6 @@ export const InputBaseComponent = styled('input', {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-
   const placeholder = _extends({
     color: 'currentColor'
   }, theme.vars ? {
@@ -106,7 +103,6 @@ export const InputBaseComponent = styled('input', {
       duration: theme.transitions.duration.shorter
     })
   });
-
   const placeholderHidden = {
     opacity: '0 !important'
   };
@@ -168,14 +164,14 @@ export const InputBaseComponent = styled('input', {
       '&:focus:-ms-input-placeholder': placeholderVisible,
       // IE11
       '&:focus::-ms-input-placeholder': placeholderVisible // Edge
-
     },
+
     [`&.${inputBaseClasses.disabled}`]: {
       opacity: 1,
       // Reset iOS opacity
       WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
-
     },
+
     '&:-webkit-autofill': {
       animationDuration: '5000s',
       animationName: 'mui-auto-fill'
@@ -192,7 +188,6 @@ export const InputBaseComponent = styled('input', {
     MozAppearance: 'textfield'
   });
 });
-
 const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
   styles: {
     '@keyframes mui-auto-fill': {
@@ -207,55 +202,54 @@ const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
     }
   }
 });
+
 /**
  * `InputBase` contains as few styles as possible.
  * It aims to be a simple building block for creating an input.
  * It contains a load of style reset and some state logic.
  */
-
-
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   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,
-    startAdornment,
-    type = 'text',
-    value: valueProp
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      '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 = _objectWithoutPropertiesLoose(props, _excluded);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -271,30 +265,27 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (muiFormControl) {
         return muiFormControl.registerEffect();
       }
-
       return undefined;
     }, [muiFormControl]);
   }
-
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
   });
-  fcs.focused = muiFormControl ? muiFormControl.focused : focused; // The blur won't fire when the disabled state is set on a focused input.
-  // We need to book keep the focused state manually.
+  fcs.focused = muiFormControl ? muiFormControl.focused : focused;
 
+  // The blur won't fire when the disabled state is set on a focused input.
+  // We need to book keep the focused state manually.
   React.useEffect(() => {
     if (!muiFormControl && disabled && focused) {
       setFocused(false);
-
       if (onBlur) {
         onBlur();
       }
@@ -318,7 +309,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.
@@ -326,80 +316,67 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       event.stopPropagation();
       return;
     }
-
     if (onFocus) {
       onFocus(event);
     }
-
     if (inputPropsProp.onFocus) {
       inputPropsProp.onFocus(event);
     }
-
     if (muiFormControl && muiFormControl.onFocus) {
       muiFormControl.onFocus(event);
     } else {
       setFocused(true);
     }
   };
-
   const handleBlur = event => {
     if (onBlur) {
       onBlur(event);
     }
-
     if (inputPropsProp.onBlur) {
       inputPropsProp.onBlur(event);
     }
-
     if (muiFormControl && muiFormControl.onBlur) {
       muiFormControl.onBlur(event);
     } else {
       setFocused(false);
     }
   };
-
   const handleChange = (event, ...args) => {
     if (!isControlled) {
       const element = event.target || inputRef.current;
-
       if (element == null) {
         throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(1));
       }
-
       checkDirty({
         value: element.value
       });
     }
-
     if (inputPropsProp.onChange) {
       inputPropsProp.onChange(event, ...args);
-    } // Perform in the willUpdate
-
+    }
 
+    // Perform in the willUpdate
     if (onChange) {
       onChange(event, ...args);
     }
-  }; // Check the input state on mount, in case it was filled by the user
-  // or auto filled by the browser before the hydration (for SSR).
-
+  };
 
+  // Check the input state on mount, in case it was filled by the user
+  // or auto filled by the browser before the hydration (for SSR).
   React.useEffect(() => {
-    checkDirty(inputRef.current); // eslint-disable-next-line react-hooks/exhaustive-deps
+    checkDirty(inputRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   const handleClick = event => {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
     }
-
     if (onClick) {
       onClick(event);
     }
   };
-
   let InputComponent = inputComponent;
   let inputProps = inputPropsProp;
-
   if (multiline && InputComponent === 'input') {
     if (rows) {
       if (process.env.NODE_ENV !== 'production') {
@@ -407,7 +384,6 @@ 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 = _extends({
         type: undefined,
         minRows: rows,
@@ -420,23 +396,19 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
         minRows
       }, inputProps);
     }
-
     InputComponent = TextareaAutosize;
   }
-
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
     checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
       value: 'x'
     });
   };
-
   React.useEffect(() => {
     if (muiFormControl) {
       muiFormControl.setAdornedStart(Boolean(startAdornment));
     }
   }, [muiFormControl, startAdornment]);
-
   const ownerState = _extends({}, props, {
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
@@ -451,12 +423,11 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   });
-
   const classes = useUtilityClasses(ownerState);
-  const Root = components.Root || InputBaseRoot;
-  const rootProps = componentsProps.root || {};
-  const Input = components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, componentsProps.input);
+  const Root = slots.root || components.Root || InputBaseRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
+  const Input = slots.input || components.Input || InputBaseComponent;
+  inputProps = _extends({}, inputProps, slotProps.input ?? componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
@@ -502,163 +473,142 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     }))]
   });
 });
-process.env.NODE_ENV !== "production" ? InputBase.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   'aria-describedby': PropTypes.string,
-
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoComplete: PropTypes.string,
-
   /**
    * If `true`, the `input` element is focused during the first mount.
    */
   autoFocus: PropTypes.bool,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * 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.
+   *
    * @default {}
    */
   components: PropTypes.shape({
     Input: PropTypes.elementType,
     Root: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside the Input.
+   * 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.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
     input: PropTypes.object,
     root: PropTypes.object
   }),
-
   /**
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.any,
-
   /**
    * If `true`, the component is disabled.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
    * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
    * @default false
    */
   disableInjectingGlobalStyles: PropTypes.bool,
-
   /**
    * End `InputAdornment` for this component.
    */
   endAdornment: PropTypes.node,
-
   /**
    * If `true`, the `input` will indicate an error.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   error: PropTypes.bool,
-
   /**
    * If `true`, the `input` will take up the full width of its container.
    * @default false
    */
   fullWidth: PropTypes.bool,
-
   /**
    * The id of the `input` element.
    */
   id: PropTypes.string,
-
   /**
    * The component used for the `input` element.
    * Either a string to use a HTML element or a component.
    * @default 'input'
    */
   inputComponent: elementTypeAcceptingRef,
-
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
    * @default {}
    */
   inputProps: PropTypes.object,
-
   /**
    * Pass a ref to the `input` element.
    */
   inputRef: refType,
-
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.
    * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
    */
   margin: PropTypes.oneOf(['dense', 'none']),
-
   /**
    * Maximum number of rows to display when multiline option is set to true.
    */
   maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * Minimum number of rows to display when multiline option is set to true.
    */
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,
-
   /**
    * Name attribute of the `input` element.
    */
   name: PropTypes.string,
-
   /**
    * Callback fired when the `input` is blurred.
    *
    * Notice that the first argument (event) might be undefined.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when the value is changed.
    *
@@ -666,82 +616,88 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * Callback fired when the `input` doesn't satisfy its constraints.
    */
   onInvalid: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyDown: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyUp: PropTypes.func,
-
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder: PropTypes.string,
-
   /**
    * It prevents the user from changing the value of the field
    * (not from interacting with the field).
    */
   readOnly: PropTypes.bool,
-
   /**
    * @ignore
    */
   renderSuffix: PropTypes.func,
-
   /**
    * If `true`, the `input` element is required.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   required: PropTypes.bool,
-
   /**
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * The size of the component.
    */
-  size: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
-
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * Start `InputAdornment` for this component.
    */
   startAdornment: PropTypes.node,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    * @default 'text'
    */
   type: PropTypes.string,
-
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/modern/InputBase/utils.js

@@ -6,23 +6,25 @@
 // @returns {boolean} true if string (including '') or number (including zero)
 export function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
-} // Determine if field is empty or filled.
+}
+
+// Determine if field is empty or filled.
 // Response determines if label is presented above field or as placeholder.
 //
 // @param obj
 // @param SSR
 // @returns {boolean} False when not present or empty string.
 //                    True when any number or string with length.
-
 export function isFilled(obj, SSR = false) {
   return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
-} // Determine if an Input is adorned on start.
+}
+
+// Determine if an Input is adorned on start.
 // It's corresponding to the left with LTR.
 //
 // @param obj
 // @returns {boolean} False when no adornments.
 //                    True when adorned at the start.
-
 export function isAdornedStart(obj) {
   return obj.startAdornment;
 }