text: import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  import _extends from "@babel/runtime/helpers/esm/extends";
  
  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { refType } from '@material-ui/utils';
  import formControlState from '../FormControl/formControlState';
  import FormControlContext, { useFormControl } from '../FormControl/FormControlContext';
  import withStyles from '../styles/withStyles';
  import capitalize from '../utils/capitalize';
  import useForkRef from '../utils/useForkRef';
  import TextareaAutosize from '../TextareaAutosize';
  import { isFilled } from './utils';
  export const styles = theme => {
    const light = theme.palette.type === 'light';
    const placeholder = {
      color: 'currentColor',
      opacity: light ? 0.42 : 0.5,
      transition: theme.transitions.create('opacity', {
        duration: theme.transitions.duration.shorter
      })
    };
    const placeholderHidden = {
      opacity: '0 !important'
    };
    const placeholderVisible = {
      opacity: light ? 0.42 : 0.5
    };
    return {
      '@global': {
        '@keyframes mui-auto-fill': {
          from: {}
        },
        '@keyframes mui-auto-fill-cancel': {
          from: {}
        }
      },
  
      /* Styles applied to the root element. */
      root: _extends(_extends({}, theme.typography.body1), {}, {
        color: theme.palette.text.primary,
        lineHeight: '1.1876em',
        // Reset (19px), match the native input line-height
        boxSizing: 'border-box',
        // Prevent padding issue with fullWidth.
        position: 'relative',
        cursor: 'text',
        display: 'inline-flex',
        alignItems: 'center',
        '&$disabled': {
          color: theme.palette.text.disabled,
          cursor: 'default'
        }
      }),
  
      /* Styles applied to the root element if the component is a descendant of `FormControl`. */
      formControl: {},
  
      /* Styles applied to the root element if the component is focused. */
      focused: {},
  
      /* Styles applied to the root element if `disabled={true}`. */
      disabled: {},
  
      /* Styles applied to the root element if `startAdornment` is provided. */
      adornedStart: {},
  
      /* Styles applied to the root element if `endAdornment` is provided. */
      adornedEnd: {},
  
      /* Pseudo-class applied to the root element if `error={true}`. */
      error: {},
  
      /* Styles applied to the `input` element if `margin="dense"`. */
      marginDense: {},
  
      /* Styles applied to the root element if `multiline={true}`. */
      multiline: {
        padding: `${8 - 2}px 0 ${8 - 1}px`,
        '&$marginDense': {
          paddingTop: 4 - 1
        }
      },
  
      /* Styles applied to the root element if the color is secondary. */
      colorSecondary: {},
  
      /* Styles applied to the root element if `fullWidth={true}`. */
      fullWidth: {
        width: '100%'
      },
  
      /* Styles applied to the `input` element. */
      input: {
        font: 'inherit',
        color: 'currentColor',
        padding: `${8 - 2}px 0 ${8 - 1}px`,
        border: 0,
        boxSizing: 'content-box',
        background: 'none',
        height: '1.1876em',
        // Reset (19px), match the native input line-height
        margin: 0,
        // Reset for Safari
        WebkitTapHighlightColor: 'transparent',
        display: 'block',
        // Make the flex item shrink with Firefox
        minWidth: 0,
        width: '100%',
        // Fix IE 11 width issue
        animationName: 'mui-auto-fill-cancel',
        '&::-webkit-input-placeholder': placeholder,
        '&::-moz-placeholder': placeholder,
        // Firefox 19+
        '&:-ms-input-placeholder': placeholder,
        // IE 11
        '&::-ms-input-placeholder': placeholder,
        // Edge
        '&:focus': {
          outline: 0
        },
        // Reset Firefox invalid required input style
        '&:invalid': {
          boxShadow: 'none'
        },
        '&::-webkit-search-decoration': {
          // Remove the padding when type=search.
          '-webkit-appearance': 'none'
        },
        // Show and hide the placeholder logic
        'label[data-shrink=false] + $formControl &': {
          '&::-webkit-input-placeholder': placeholderHidden,
          '&::-moz-placeholder': placeholderHidden,
          // Firefox 19+
          '&:-ms-input-placeholder': placeholderHidden,
          // IE 11
          '&::-ms-input-placeholder': placeholderHidden,
          // Edge
          '&:focus::-webkit-input-placeholder': placeholderVisible,
          '&:focus::-moz-placeholder': placeholderVisible,
          // Firefox 19+
          '&:focus:-ms-input-placeholder': placeholderVisible,
          // IE 11
          '&:focus::-ms-input-placeholder': placeholderVisible // Edge
  
        },
        '&$disabled': {
          opacity: 1 // Reset iOS opacity
  
        },
        '&:-webkit-autofill': {
          animationDuration: '5000s',
          animationName: 'mui-auto-fill'
        }
      },
  
      /* Styles applied to the `input` element if `margin="dense"`. */
      inputMarginDense: {
        paddingTop: 4 - 1
      },
  
      /* Styles applied to the `input` element if `multiline={true}`. */
      inputMultiline: {
        height: 'auto',
        resize: 'none',
        padding: 0
      },
  
      /* Styles applied to the `input` element if `type="search"`. */
      inputTypeSearch: {
        // Improve type search style.
        '-moz-appearance': 'textfield',
        '-webkit-appearance': 'textfield'
      },
  
      /* Styles applied to the `input` element if `startAdornment` is provided. */
      inputAdornedStart: {},
  
      /* Styles applied to the `input` element if `endAdornment` is provided. */
      inputAdornedEnd: {},
  
      /* Styles applied to the `input` element if `hiddenLabel={true}`. */
      inputHiddenLabel: {}
    };
  };
  const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
  /**
   * `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 = React.forwardRef(function InputBase(props, ref) {
    const {
      'aria-describedby': ariaDescribedby,
      autoComplete,
      autoFocus,
      classes,
      className,
      defaultValue,
      disabled,
      endAdornment,
      fullWidth = false,
      id,
      inputComponent = 'input',
      inputProps: inputPropsProp = {},
      inputRef: inputRefProp,
      multiline = false,
      name,
      onBlur,
      onChange,
      onClick,
      onFocus,
      onKeyDown,
      onKeyUp,
      placeholder,
      readOnly,
      renderSuffix,
      rows,
      rowsMax,
      rowsMin,
      startAdornment,
      type = 'text',
      value: valueProp
    } = props,
          other = _objectWithoutPropertiesLoose(props, ["aria-describedby", "autoComplete", "autoFocus", "classes", "className", "color", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "rowsMax", "rowsMin", "startAdornment", "type", "value"]);
  
    const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
    const {
      current: isControlled
    } = React.useRef(value != null);
    const inputRef = React.useRef();
    const handleInputRefWarning = React.useCallback(instance => {
      if (process.env.NODE_ENV !== 'production') {
        if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
          console.error(['Material-UI: You have provided a `inputComponent` to the input component', 'that does not correctly handle the `inputRef` prop.', 'Make sure the `inputRef` prop is called with a HTMLInputElement.'].join('\n'));
        }
      }
    }, []);
    const handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
    const handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
    const handleInputRef = useForkRef(inputRef, handleInputRefProp);
    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', 'margin', '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.
  
    React.useEffect(() => {
      if (!muiFormControl && disabled && focused) {
        setFocused(false);
  
        if (onBlur) {
          onBlur();
        }
      }
    }, [muiFormControl, disabled, focused, onBlur]);
    const onFilled = muiFormControl && muiFormControl.onFilled;
    const onEmpty = muiFormControl && muiFormControl.onEmpty;
    const checkDirty = React.useCallback(obj => {
      if (isFilled(obj)) {
        if (onFilled) {
          onFilled();
        }
      } else if (onEmpty) {
        onEmpty();
      }
    }, [onFilled, onEmpty]);
    useEnhancedEffect(() => {
      if (isControlled) {
        checkDirty({
          value
        });
      }
    }, [value, checkDirty, isControlled]);
  
    const handleFocus = event => {
      // Fix a bug with IE 11 where the focus/blur events are triggered
      // while the input is disabled.
      if (fcs.disabled) {
        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 TypeError('Material-UI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://material-ui.com/r/input-component-ref-interface for more info.');
        }
  
        checkDirty({
          value: element.value
        });
      }
  
      if (inputPropsProp.onChange) {
        inputPropsProp.onChange(event, ...args);
      } // 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).
  
  
    React.useEffect(() => {
      checkDirty(inputRef.current);
    }, []); // eslint-disable-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 = _extends(_extends({}, inputPropsProp), {}, {
      ref: handleInputRef
    });
  
    if (typeof InputComponent !== 'string') {
      inputProps = _extends(_extends({
        // Rename ref to inputRef as we don't know the
        // provided `inputComponent` structure.
        inputRef: handleInputRef,
        type
      }, inputProps), {}, {
        ref: null
      });
    } else if (multiline) {
      if (rows && !rowsMax && !rowsMin) {
        InputComponent = 'textarea';
      } else {
        inputProps = _extends({
          rows,
          rowsMax
        }, inputProps);
        InputComponent = TextareaAutosize;
      }
    } else {
      inputProps = _extends({
        type
      }, inputProps);
    }
  
    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]);
    return /*#__PURE__*/React.createElement("div", _extends({
      className: clsx(classes.root, classes[`color${capitalize(fcs.color || 'primary')}`], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fullWidth && classes.fullWidth, fcs.focused && classes.focused, muiFormControl && classes.formControl, multiline && classes.multiline, startAdornment && classes.adornedStart, endAdornment && classes.adornedEnd, fcs.margin === 'dense' && classes.marginDense),
      onClick: handleClick,
      ref: ref
    }, other), startAdornment, /*#__PURE__*/React.createElement(FormControlContext.Provider, {
      value: null
    }, /*#__PURE__*/React.createElement(InputComponent, _extends({
      "aria-invalid": fcs.error,
      "aria-describedby": ariaDescribedby,
      autoComplete: autoComplete,
      autoFocus: autoFocus,
      defaultValue: defaultValue,
      disabled: fcs.disabled,
      id: id,
      onAnimationStart: handleAutoFill,
      name: name,
      placeholder: placeholder,
      readOnly: readOnly,
      required: fcs.required,
      rows: rows,
      value: value,
      onKeyDown: onKeyDown,
      onKeyUp: onKeyUp
    }, inputProps, {
      className: clsx(classes.input, inputPropsProp.className, fcs.disabled && classes.disabled, multiline && classes.inputMultiline, fcs.hiddenLabel && classes.inputHiddenLabel, startAdornment && classes.inputAdornedStart, endAdornment && classes.inputAdornedEnd, type === 'search' && classes.inputTypeSearch, fcs.margin === 'dense' && classes.inputMarginDense),
      onBlur: handleBlur,
      onChange: handleChange,
      onFocus: handleFocus
    }))), endAdornment, renderSuffix ? renderSuffix(_extends(_extends({}, fcs), {}, {
      startAdornment
    })) : null);
  });
  process.env.NODE_ENV !== "production" ? InputBase.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 will be focused during the first mount.
     */
    autoFocus: PropTypes.bool,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: PropTypes.oneOf(['primary', 'secondary']),
  
    /**
     * The default `input` element value. Use when the component is not controlled.
     */
    defaultValue: PropTypes.any,
  
    /**
     * If `true`, the `input` element will be disabled.
     */
    disabled: PropTypes.bool,
  
    /**
     * End `InputAdornment` for this component.
     */
    endAdornment: PropTypes.node,
  
    /**
     * If `true`, the input will indicate an error. This is normally obtained via context from
     * FormControl.
     */
    error: PropTypes.bool,
  
    /**
     * If `true`, the input will take up the full width of its container.
     */
    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.
     */
    inputComponent: PropTypes.elementType,
  
    /**
     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
     */
    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.
     */
    margin: PropTypes.oneOf(['dense', 'none']),
  
    /**
     * If `true`, a textarea element will be rendered.
     */
    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.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new value by accessing `event.target.value` (string).
     */
    onChange: PropTypes.func,
  
    /**
     * @ignore
     */
    onClick: PropTypes.func,
  
    /**
     * @ignore
     */
    onFocus: 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 will be required.
     */
    required: PropTypes.bool,
  
    /**
     * Number of rows to display when multiline option is set to true.
     */
    rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  
    /**
     * Maximum number of rows to display when multiline option is set to true.
     */
    rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  
    /**
     * Minimum number of rows to display when multiline option is set to true.
     */
    rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  
    /**
     * Start `InputAdornment` for this component.
     */
    startAdornment: PropTypes.node,
  
    /**
     * 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).
     */
    type: PropTypes.string,
  
    /**
     * The value of the `input` element, required for a controlled component.
     */
    value: PropTypes.any
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiInputBase'
  })(InputBase);