@helpscout/hsds-react/components/Input/Input.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Input = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Badge = _interopRequireDefault(require("../Badge"));

var _Context = _interopRequireDefault(require("../FormLabel/Context"));

var _Input = _interopRequireDefault(require("./Input.AddOn"));

var _Input2 = _interopRequireDefault(require("./Input.BackdropV2"));

var _Input3 = _interopRequireDefault(require("./Input.Prefix"));

var _Input4 = _interopRequireDefault(require("./Input.Resizer"));

var _Input5 = _interopRequireDefault(require("./Input.Static"));

var _Input6 = _interopRequireDefault(require("./Input.Suffix"));

var _HelpText = _interopRequireDefault(require("../HelpText"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Label = _interopRequireDefault(require("../Label"));

var _ScrollLock = require("../ScrollLock/ScrollLock.utils");

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _constants = require("../../constants");

var _Keys = _interopRequireDefault(require("../../constants/Keys"));

var _id = require("../../utilities/id");

var _keys = require("../../utilities/keys");

var _Input7 = require("./Input.utils");

var _Input8 = require("./Input.css");

var _jsxRuntime = require("react/jsx-runtime");

/* eslint react/no-deprecated: off */
var uniqueID = (0, _id.createUniqueIDFactory)('Input');

function noop() {}

var Input = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Input, _React$PureComponent);

  function Input(_props) {
    var _this;

    _this = _React$PureComponent.call(this, _props) || this;
    _this.computedStyles = void 0;
    _this.inputNode = void 0;
    _this.autoFocusTimeoutId = setTimeout(function () {
      return '';
    }, 0);

    _this.setValue = function (value) {
      var _this$props = _this.props,
          inputType = _this$props.inputType,
          withCharValidator = _this$props.withCharValidator,
          charValidatorLimit = _this$props.charValidatorLimit;
      var nextValue = value;

      if (inputType === 'number') {
        nextValue = value.replace(/\D/g, '');
      }

      _this.setState({
        value: nextValue
      });

      if (withCharValidator) {
        _this.setState({
          validatorCount: charValidatorLimit - ("" + value).length
        });
      }

      return nextValue;
    };

    _this.handleOnChange = function (event) {
      if (_this.props.withTypingEvent) _this.typingEvent();
      var value = event.currentTarget.value;

      var nextValue = _this.setValue(value);

      _this.props.onChange(nextValue);
    };

    _this.handleOnInputBlur = function (event) {
      _this.setState({
        isFocused: false
      });

      _this.props.onBlur(event);
    };

    _this.handleOnInputFocus = function (event) {
      var _this$props2 = _this.props,
          onFocus = _this$props2.onFocus,
          removeStateStylesOnFocus = _this$props2.removeStateStylesOnFocus;
      var state = _this.state.state;

      if (removeStateStylesOnFocus && state) {
        _this.setState({
          state: null
        });
      }

      _this.setState({
        isFocused: true
      });

      _this.moveCursorToEnd();

      onFocus(event);
    };

    _this.handleOnWheel = function (event) {
      var _this$props3 = _this.props,
          multiline = _this$props3.multiline,
          onWheel = _this$props3.onWheel,
          scrollLock = _this$props3.scrollLock;
      event.stopPropagation();
      if (!multiline || !scrollLock) return;
      var stopPropagation = true;
      (0, _ScrollLock.scrollLockY)(event, stopPropagation);
      onWheel(event);
    };

    _this.handleOnKeyDown = function (event) {
      var hasInsertCarriageReturns = _this.props.hasInsertCarriageReturns;

      if (event.keyCode === _Keys.default.ENTER) {
        _this.props.onEnterDown(event);
      }

      if (hasInsertCarriageReturns && event.keyCode === _Keys.default.ENTER) {
        _this.insertCarriageReturnAtCursorIndex(event);
      }

      _this.props.onKeyDown(event);
    };

    _this.handleOnKeyUp = function (event) {
      if (event.keyCode === _Keys.default.ENTER) {
        _this.props.onEnterUp(event);
      }

      _this.props.onKeyUp(event);
    };

    _this.handleExpandingResize = function (height) {
      _this.props.onResize(height);

      _this.setState({
        height: height
      });

      _this.setComputedStylesFromHeight(height);
    };

    _this.moveCursorToEnd = function () {
      // Not reliably testable in JSDOM + Enzyme
      if (!_this.props.moveCursorToEnd || !_this.inputNode || !(0, _Input7.isTextArea)(_this.inputNode)) return;
      requestAnimationFrame(function () {
        (0, _Input7.moveCursorToEnd)(_this.inputNode);
      });
    };

    _this.setInputNodeRef = function (node) {
      _this.inputNode = node;

      _this.props.inputRef(node);

      _this.props.innerRef(node);
    };

    _this.setComputedStylesFromHeight = function (height) {
      if (!height) return;
      if (_this.computedStyles) return;
      if (!_this.inputNode) return;
      var computedStyles = window.getComputedStyle(_this.inputNode);
      var paddingBottom = computedStyles.paddingBottom;
      _this.computedStyles = {
        paddingBottom: parseInt(paddingBottom, 10)
      };
    };

    _this.getInputMarkup = function (props) {
      var _this$props4 = _this.props,
          autoFocus = _this$props4.autoFocus,
          charValidatorLimit = _this$props4.charValidatorLimit,
          className = _this$props4.className,
          disabled = _this$props4.disabled,
          errorIcon = _this$props4.errorIcon,
          errorMessage = _this$props4.errorMessage,
          forceAutoFocusTimeout = _this$props4.forceAutoFocusTimeout,
          helpText = _this$props4.helpText,
          hintText = _this$props4.hintText,
          inputRef = _this$props4.inputRef,
          isFirst = _this$props4.isFirst,
          isFocused = _this$props4.isFocused,
          isLast = _this$props4.isLast,
          isNotOnly = _this$props4.isNotOnly,
          isSubtleReadOnly = _this$props4.isSubtleReadOnly,
          label = _this$props4.label,
          maxHeight = _this$props4.maxHeight,
          maxLength = _this$props4.maxLength,
          moveCursorToEnd = _this$props4.moveCursorToEnd,
          multiline = _this$props4.multiline,
          name = _this$props4.name,
          offsetAmount = _this$props4.offsetAmount,
          onBlur = _this$props4.onBlur,
          onEnterDown = _this$props4.onEnterDown,
          onEnterUp = _this$props4.onEnterUp,
          onFocus = _this$props4.onFocus,
          onResize = _this$props4.onResize,
          onScroll = _this$props4.onScroll,
          onStartTyping = _this$props4.onStartTyping,
          onStopTyping = _this$props4.onStopTyping,
          onWheel = _this$props4.onWheel,
          placeholder = _this$props4.placeholder,
          prefix = _this$props4.prefix,
          readOnly = _this$props4.readOnly,
          refApplyCallStopTyping = _this$props4.refApplyCallStopTyping,
          removeStateStylesOnFocus = _this$props4.removeStateStylesOnFocus,
          resizable = _this$props4.resizable,
          scrollLock = _this$props4.scrollLock,
          seamless = _this$props4.seamless,
          size = _this$props4.size,
          stateProp = _this$props4.state,
          styleProp = _this$props4.style,
          suffix = _this$props4.suffix,
          tabIndex = _this$props4.tabIndex,
          type = _this$props4.type,
          typingThrottleInterval = _this$props4.typingThrottleInterval,
          typingTimeoutDelay = _this$props4.typingTimeoutDelay,
          withCharValidator = _this$props4.withCharValidator,
          withTypingEvent = _this$props4.withTypingEvent,
          rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["autoFocus", "charValidatorLimit", "className", "disabled", "errorIcon", "errorMessage", "forceAutoFocusTimeout", "helpText", "hintText", "inputRef", "isFirst", "isFocused", "isLast", "isNotOnly", "isSubtleReadOnly", "label", "maxHeight", "maxLength", "moveCursorToEnd", "multiline", "name", "offsetAmount", "onBlur", "onEnterDown", "onEnterUp", "onFocus", "onResize", "onScroll", "onStartTyping", "onStopTyping", "onWheel", "placeholder", "prefix", "readOnly", "refApplyCallStopTyping", "removeStateStylesOnFocus", "resizable", "scrollLock", "seamless", "size", "state", "style", "suffix", "tabIndex", "type", "typingThrottleInterval", "typingTimeoutDelay", "withCharValidator", "withTypingEvent"]);
      var _this$state = _this.state,
          height = _this$state.height,
          value = _this$state.value,
          state = _this$state.state;
      var isReadOnly = !isSubtleReadOnly && readOnly;
      var fieldClassName = (0, _classnames.default)('c-Input__inputField', 'c-InputField', maxHeight && 'has-maxHeight', multiline && 'is-multiline', isReadOnly && 'is-readonly', resizable && 'is-resizable', seamless && 'is-seamless', state && "is-" + state, size && "is-" + size); // Ignoring as height calculation isn't possible with JSDOM
      // (which is what Enzyme uses for tests)

      var style = multiline ? {
        height: height,
        maxHeight: maxHeight
      } : null;
      var id = props.id || _this.state.id;
      var BaseFieldComponent = multiline ? _Input8.FieldTextAreaUI : _Input8.FieldUI;
      var componentProps = (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        /* We manually set autoFocus after component mounts. */
        autoFocus: _this.state.isFocused,
        className: fieldClassName,
        disabled: disabled,
        id: id,
        ref: _this.setInputNodeRef,
        maxLength: withCharValidator ? charValidatorLimit : maxLength,
        name: name,
        onBlur: _this.handleOnInputBlur,
        onChange: _this.handleOnChange,
        onFocus: _this.handleOnInputFocus,
        onKeyDown: _this.handleOnKeyDown,
        onKeyUp: _this.handleOnKeyUp,
        onWheel: _this.handleOnWheel,
        placeholder: placeholder,
        readOnly: readOnly,
        style: style,
        tabIndex: tabIndex,
        type: type,
        value: value
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseFieldComponent, (0, _extends2.default)({}, componentProps));
    };

    _this.state = {
      id: _props.id || uniqueID(),
      isFocused: _props.isFocused,
      state: _props.state,
      typingThrottle: undefined,
      typingTimeout: undefined,
      value: _props.value,
      validatorCount: _props.charValidatorLimit - _props.value.length
    };
    return _this;
  }

  var _proto = Input.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.maybeForceAutoFocus();
    this.props.withTypingEvent && this.props.refApplyCallStopTyping(this.callStopTyping.bind(this));
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var isFocused = nextProps.isFocused,
        value = nextProps.value,
        state = nextProps.state;
    var prevValue = this.state.value;
    var prevState = this.state.state;

    if (value !== prevValue) {
      this.setValue(value);
    }

    if (state !== prevState) {
      this.setState({
        state: state
      });
    }

    if (isFocused) {
      this.forceAutoFocus();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.inputNode = null;
    this.props.withTypingEvent && this.clearTypingTimeout();
    this.autoFocusTimeoutId && clearTimeout(this.autoFocusTimeoutId);
  };

  _proto.maybeForceAutoFocus = function maybeForceAutoFocus() {
    var _this$props5 = this.props,
        autoFocus = _this$props5.autoFocus,
        isFocused = _this$props5.isFocused;

    if (autoFocus || isFocused) {
      this.forceAutoFocus();
      this.moveCursorToEnd();
    }
  };

  _proto.forceAutoFocus = function forceAutoFocus() {
    var _this2 = this;

    var forceAutoFocusTimeout = this.props.forceAutoFocusTimeout;
    this.autoFocusTimeoutId = setTimeout(function () {
      if (_this2.inputNode) {
        _this2.inputNode.focus();
      }

      _this2.setState({
        isFocused: true
      });
    }, forceAutoFocusTimeout);
  };

  _proto.callStartTyping = function callStartTyping() {
    if (this.props.onStartTyping) {
      this.props.onStartTyping();
      this.setThrottler();
    }
  };

  _proto.callStopTyping = function callStopTyping() {
    if (this.state.typingTimeout) {
      this.clearThrottler();
      this.props.onStopTyping();
      this.clearTypingTimeout();
    }
  };

  _proto.clearTypingTimeout = function clearTypingTimeout() {
    if (this.state.typingTimeout) {
      clearTimeout(this.state.typingTimeout);
      this.setState({
        typingTimeout: undefined
      });
    }
  };

  _proto.setTypingTimeout = function setTypingTimeout() {
    var _this3 = this;

    this.setState({
      typingTimeout: setTimeout(function () {
        _this3.clearThrottler();

        _this3.callStopTyping();
      }, this.props.typingTimeoutDelay)
    });
  };

  _proto.clearThrottler = function clearThrottler() {
    if (this.state.typingThrottle) {
      clearInterval(this.state.typingThrottle);
      this.setState({
        typingThrottle: undefined
      });
    }
  };

  _proto.setThrottler = function setThrottler() {
    this.setState({
      typingThrottle: setInterval(this.props.onStartTyping, this.props.typingThrottleInterval)
    });
  };

  _proto.typingEvent = function typingEvent() {
    // reset the stop debouncer every time a key is pressed
    this.clearTypingTimeout();
    this.setTypingTimeout();

    if (!this.state.typingThrottle) {
      // if there is no throttler add it
      this.callStartTyping();
    }
  };

  _proto.insertCarriageReturnAtCursorIndex = function insertCarriageReturnAtCursorIndex(event) {
    var _this4 = this;

    var cursorIndex = event.currentTarget.selectionStart;
    var nextValue = event.currentTarget.value;
    var prevValue = this.state.value; // this prevents a return being inserted if the field is completely empty
    // this works on every modifier key, and with standalone returns

    var isEmptyField = cursorIndex === 0 && nextValue.length === 0 && prevValue.length === 0;

    if (isEmptyField) {
      event.preventDefault(); // prevents shift and return from inserting a line break

      return;
    }

    if (!(0, _keys.isModifierKeyPressed)(event)) return; // this inserts a return into the value if a modifier key is also pressed

    event.preventDefault();
    event.stopPropagation();
    var newValue = nextValue.substr(0, cursorIndex) + "\n" + nextValue.substr(cursorIndex);
    this.setState({
      value: newValue
    }, function () {
      _this4.props.onChange(_this4.state.value);

      _this4.inputNode.setSelectionRange(cursorIndex + 1, cursorIndex + 1);
    });
  };

  _proto.getHelpTextMarkup = function getHelpTextMarkup() {
    var _this$props6 = this.props,
        helpText = _this$props6.helpText,
        label = _this$props6.label;
    var isCompact = !!label;
    return helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpText.default, {
      className: "c-Input__helpText",
      isCompact: isCompact,
      children: helpText
    });
  };

  _proto.getHintTextMarkup = function getHintTextMarkup() {
    var hintText = this.props.hintText;
    return hintText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpText.default, {
      className: "c-Input__hintText",
      children: hintText
    });
  };

  _proto.getLabelMarkup = function getLabelMarkup() {
    var label = this.props.label;
    var inputID = this.state.id;
    return label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
      className: "c-Input__label",
      for: inputID,
      children: label
    });
  };

  _proto.getInlinePrefixSuffixClassName = function getInlinePrefixSuffixClassName(_ref) {
    var type = _ref.type,
        icon = _ref.icon;
    var _this$props7 = this.props,
        multiline = _this$props7.multiline,
        seamless = _this$props7.seamless,
        state = _this$props7.state;
    return (0, _classnames.default)('c-Input__item', type && "is-" + type, icon && 'is-icon', multiline && 'is-multiline', seamless && 'is-seamless', state && "is-" + state);
  };

  _proto.getInlinePrefixMarkup = function getInlinePrefixMarkup() {
    var inlinePrefix = this.props.inlinePrefix;
    return inlinePrefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input8.InlinePrefixSuffixUI, {
      className: this.getInlinePrefixSuffixClassName({
        type: 'prefix'
      }),
      children: inlinePrefix
    });
  };

  _proto.getPrefixMarkup = function getPrefixMarkup() {
    var _this$props8 = this.props,
        prefix = _this$props8.prefix,
        seamless = _this$props8.seamless;
    return prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input3.default, {
      isSeamless: seamless,
      children: prefix
    });
  };

  _proto.getInlineSuffixMarkup = function getInlineSuffixMarkup() {
    var inlineSuffix = this.props.inlineSuffix;
    return inlineSuffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input8.InlinePrefixSuffixUI, {
      className: this.getInlinePrefixSuffixClassName({
        type: 'suffix'
      }),
      children: inlineSuffix
    });
  };

  _proto.getSuffixMarkup = function getSuffixMarkup() {
    var _this$props9 = this.props,
        suffix = _this$props9.suffix,
        seamless = _this$props9.seamless;
    return suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input6.default, {
      isSeamless: seamless,
      children: suffix
    });
  };

  _proto.getActionMarkup = function getActionMarkup() {
    var action = this.props.action;
    return action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input6.default, {
      isAction: true,
      children: action
    });
  };

  _proto.getErrorMarkup = function getErrorMarkup() {
    var _this$props10 = this.props,
        errorIcon = _this$props10.errorIcon,
        errorMessage = _this$props10.errorMessage,
        state = _this$props10.state,
        tooltipAppendTo = _this$props10.tooltipAppendTo;
    var shouldRenderError = state === _constants.STATES.error;
    if (!shouldRenderError) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input8.InlinePrefixSuffixUI, {
      className: this.getInlinePrefixSuffixClassName({
        type: 'suffix',
        icon: true
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
        animationDelay: 0,
        animationDuration: 0,
        appendTo: tooltipAppendTo,
        closeOnContentClick: true,
        display: "block",
        placement: "top-end",
        title: errorMessage,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          className: "c-Input__errorIcon",
          name: errorIcon,
          size: 24,
          state: _constants.STATES.error,
          tabIndex: -1
        })
      })
    });
  };

  _proto.getMultilineValue = function getMultilineValue() {
    var multiline = this.props.multiline;
    return typeof multiline === 'number' ? multiline : 1;
  };

  _proto.getCharValidatorMarkup = function getCharValidatorMarkup() {
    if (!this.props.withCharValidator) return null;
    var charValidatorLimit = this.props.charValidatorLimit;
    var _this$state2 = this.state,
        value = _this$state2.value,
        isFocused = _this$state2.isFocused,
        validatorCount = _this$state2.validatorCount; // shows validator green at 50% rounded down to the nearest 10th

    var charValidatorShowAt = Math.floor(charValidatorLimit / 2 / 10) * 10 || charValidatorLimit / 2; // shows validator yellow at 20% rounded down to the nearest 10th

    var isLessThanAFifth = validatorCount <= (Math.floor(charValidatorLimit / 5 / 10) * 10 || charValidatorLimit / 5); // shows validator red when reached the limit

    var isTooMuch = validatorCount <= 0;
    var isVisible = isFocused && validatorCount <= charValidatorShowAt && value.length >= validatorCount;

    function getValidatorBadgeColor() {
      if (isTooMuch) {
        return 'error';
      } else if (isLessThanAFifth) {
        return 'warning';
      } else {
        return 'success';
      }
    }

    return isVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input8.CharValidatorUI, {
      className: "c-Input__CharValidator",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
        count: true,
        status: getValidatorBadgeColor(),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input8.CharValidatorText, {
          chars: this.state.validatorCount.toString().length,
          children: this.state.validatorCount
        })
      })
    }) : null;
  };

  _proto.getResizerMarkup = function getResizerMarkup() {
    var _this$props11 = this.props,
        multiline = _this$props11.multiline,
        offsetAmount = _this$props11.offsetAmount,
        seamless = _this$props11.seamless;
    var _this$state3 = this.state,
        height = _this$state3.height,
        value = _this$state3.value;
    var resizer = !(0, _lodash.default)(multiline) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input4.default, {
      contents: value,
      currentHeight: height,
      minimumLines: this.getMultilineValue(),
      offsetAmount: offsetAmount,
      onResize: this.handleExpandingResize,
      seamless: seamless
    }) : null;
    return resizer;
  };

  _proto.render = function render() {
    var _this5 = this;

    var _this$props12 = this.props,
        className = _this$props12.className,
        disabled = _this$props12.disabled,
        isFirst = _this$props12.isFirst,
        isNotOnly = _this$props12.isNotOnly,
        isLast = _this$props12.isLast,
        isSubtleReadOnly = _this$props12.isSubtleReadOnly,
        maxHeight = _this$props12.maxHeight,
        multiline = _this$props12.multiline,
        readOnly = _this$props12.readOnly,
        resizable = _this$props12.resizable,
        seamless = _this$props12.seamless,
        styleProp = _this$props12.style,
        width = _this$props12.width;
    var _this$state4 = this.state,
        isFocused = _this$state4.isFocused,
        value = _this$state4.value,
        state = _this$state4.state;
    var isReadOnly = !isSubtleReadOnly && readOnly;
    var componentClassName = (0, _classnames.default)('c-Input', disabled && 'is-disabled', isFocused && 'is-focused', maxHeight && 'has-maxHeight', multiline && 'is-multiline', isReadOnly && 'is-readonly', resizable && 'is-resizable', seamless && 'is-seamless', state && "is-" + state, value && 'has-value', className);
    var componentStyle = (0, _extends2.default)({}, styleProp, {
      maxWidth: width
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Consumer, {
      children: function children(props) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Input8.InputWrapperUI, {
          className: "c-InputWrapper",
          style: componentStyle,
          children: [_this5.getLabelMarkup(), _this5.getHelpTextMarkup(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Input8.InputUI, {
            className: componentClassName,
            children: [_this5.getPrefixMarkup(), _this5.getInlinePrefixMarkup(), _this5.getInputMarkup(props), _this5.getInlineSuffixMarkup(), _this5.getErrorMarkup(), _this5.getSuffixMarkup(), _this5.getActionMarkup(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
              className: "c-Input__backdrop",
              disabled: disabled,
              isFirst: isFirst,
              isFocused: isFocused,
              isNotOnly: isNotOnly,
              isLast: isLast,
              readOnly: isReadOnly,
              isSeamless: seamless,
              state: state
            }), _this5.getResizerMarkup(), _this5.getCharValidatorMarkup()]
          }), _this5.getHintTextMarkup()]
        });
      }
    });
  };

  return Input;
}(_react.default.PureComponent);

exports.Input = Input;
Input.AddOn = _Input.default;
Input.Backdrop = _Input2.default;
Input.Prefix = _Input3.default;
Input.Resizer = _Input4.default;
Input.Static = _Input5.default;
Input.Suffix = _Input6.default;
Input.defaultProps = {
  autoFocus: false,
  charValidatorLimit: 500,
  'data-cy': 'Input',
  disabled: false,
  errorIcon: 'alert',
  forceAutoFocusTimeout: 0,
  hasInsertCarriageReturns: false,
  innerRef: noop,
  inputRef: noop,
  isFirst: false,
  isFocused: false,
  isLast: false,
  isNotOnly: false,
  isSubtleReadOnly: false,
  maxHeight: 320,
  maxLength: 524288,
  moveCursorToEnd: false,
  multiline: null,
  offsetAmount: 0,
  onBlur: noop,
  onChange: noop,
  onEnterDown: noop,
  onEnterUp: noop,
  onFocus: noop,
  onKeyDown: noop,
  onKeyUp: noop,
  onResize: noop,
  onStartTyping: noop,
  onStopTyping: noop,
  onWheel: noop,
  readOnly: false,
  refApplyCallStopTyping: noop,
  removeStateStylesOnFocus: false,
  resizable: false,
  scrollLock: false,
  seamless: false,
  style: {},
  tooltipAppendTo: document.body,
  type: 'text',
  typingThrottleInterval: 500,
  typingTimeoutDelay: 5000,
  value: '',
  withCharValidator: false,
  withTypingEvent: false
};
Input.propTypes = {
  /** Embedded actions for the Input. */
  action: _propTypes.default.any,

  /** Automatically focuses the input. */
  autoFocus: _propTypes.default.bool,
  autoFocusTimeoutId: _propTypes.default.any,

  /** How many chars are allowed to be input. */
  charValidatorLimit: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Disable the input. */
  disabled: _propTypes.default.bool,

  /** Icon that renders when the state is `error`. */
  errorIcon: _propTypes.default.string,

  /** Error message that renders into a Tooltip. */
  errorMessage: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),

  /** Determines the amount of time (`ms`) for the component to focus on mount. */
  forceAutoFocusTimeout: _propTypes.default.number,

  /** If `true` and `enter + special` key is pressed, a return will be inserted */
  hasInsertCarriageReturns: _propTypes.default.bool,

  /** Displays text underneath input. */
  helpText: _propTypes.default.any,

  /** Displays text above input. */
  hintText: _propTypes.default.any,

  /** ID for the input. */
  id: _propTypes.default.string,

  /** Text or component (usually an Icon) to render before the input. */
  inlinePrefix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /** Text or component (usually an Icon) to render after the input. */
  inlineSuffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /** Retrieves the `input` DOM node. */
  inputRef: _propTypes.default.func,

  /** Helps render component without right borders. */
  isFirst: _propTypes.default.bool,

  /** Determines if the component is focused. */
  isFocused: _propTypes.default.bool,

  /** Helps render component without left borders. */
  isLast: _propTypes.default.bool,

  /** Helps render component without left/right borders. */
  isNotOnly: _propTypes.default.bool,

  /** Label for the input. */
  label: _propTypes.default.any,

  /** Sets the `max-height` for the input. Used with `multiline`. */
  maxHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Moves the selection cursor to the end, on focus. Default `false`. */
  moveCursorToEnd: _propTypes.default.bool,

  /** Transforms input into an auto-expanding textarea. */
  multiline: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),

  /** Name for the input. */
  name: _propTypes.default.string,

  /** Number of characters to offset (bottom-right) for multiline resizing. */
  offsetAmount: _propTypes.default.number,

  /** Callback when input is blurred. */
  onBlur: _propTypes.default.func,

  /** Callback when input value is changed. */
  onChange: _propTypes.default.func,

  /** Callback when `Enter` is pressed down. */
  onEnterDown: _propTypes.default.func,

  /** Callback when `Enter` is pressed up. */
  onEnterUp: _propTypes.default.func,

  /** Callback when input is focused. */
  onFocus: _propTypes.default.func,

  /** Callback when input is resized. */
  onResize: _propTypes.default.func,

  /** Callback when user starts typing, rate limited by `typingThrottleInterval` */
  onStartTyping: _propTypes.default.func,

  /** Callback when user stops typing after delay of `typingTimeoutDelay`. */
  onStopTyping: _propTypes.default.func,

  /** Placeholder text for the input. */
  placeholder: _propTypes.default.string,

  /** Component to render before the input. */
  prefix: _propTypes.default.any,

  /** Disable editing of the input. */
  readOnly: _propTypes.default.bool,

  /** Exposes `CallStopTyping`, so that it can be called outside itself. */
  refApplyCallStopTyping: _propTypes.default.func,

  /** Removes the `state` styles on input focus. Default `false`. */
  removeStateStylesOnFocus: _propTypes.default.bool,

  /** Enables resizing for the textarea (only enabled for `multiline`). */
  resizable: _propTypes.default.bool,

  /** Enables scrollLock for component. Default `false`. */
  scrollLock: _propTypes.default.bool,

  /** Removes the border around the input. */
  seamless: _propTypes.default.bool,

  /** Determines the size of the input. */
  size: _propTypes.default.oneOf(['xs', 'xssm', 'sm', 'md', 'lg']),

  /** Change input to state color. */
  state: _propTypes.default.oneOf(['error', 'success', 'warning', '']),

  /** Component to render after the input. */
  suffix: _propTypes.default.any,

  /** Determines the input type. */
  inputType: _propTypes.default.string,

  /** The parent node where to mount the error message Tooltip component. */
  tooltipAppendTo: _propTypes.default.object,

  /** Determines the rate limiting interval for firing `onStartTyping`. */
  typingThrottleInterval: _propTypes.default.number,

  /** Determines the delay of when `onStopTyping` fires after typing stops. */
  typingTimeoutDelay: _propTypes.default.number,

  /** Initial value of the input. */
  value: _propTypes.default.any,

  /** Adds a char validator UI to the input. */
  withCharValidator: _propTypes.default.bool,

  /** Enables typing `onStartTyping` and `onStopTyping` event callbacks. */
  withTypingEvent: _propTypes.default.bool,
  innerRef: _propTypes.default.func,
  isSubtleReadOnly: _propTypes.default.bool,
  maxLength: _propTypes.default.number,
  modalhelpText: _propTypes.default.string,
  onKeyDown: _propTypes.default.func,
  onKeyUp: _propTypes.default.func,
  onScroll: _propTypes.default.func,
  onWheel: _propTypes.default.func,
  tabIndex: _propTypes.default.number,
  type: _propTypes.default.string,
  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Input;
exports.default = _default;