@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

package/build/TextField/TextField.js

@@ -1,330 +1,466 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTextMask = _interopRequireDefault(require("react-text-mask"));
 
-var _classnames10 = _interopRequireDefault(require("classnames"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/**
-* TextField component that includes all the markup, functions and behaviors to implement any type of input field.
-*/
-var TextField = (0, _react.forwardRef)(function (_ref, ref) {
-  var className = _ref.className,
-      valueProp = _ref.valueProp,
-      disabled = _ref.disabled,
-      onFocus = _ref.onFocus,
-      selectOnFocus = _ref.selectOnFocus,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onKeyUp = _ref.onKeyUp,
-      onClear = _ref.onClear,
-      regex = _ref.regex,
-      iconName = _ref.iconName,
-      clear = _ref.clear,
-      type = _ref.type,
-      inputClassName = _ref.inputClassName,
-      alignRight = _ref.alignRight,
-      hjWhitelist = _ref.hjWhitelist,
-      label = _ref.label,
-      placeholder = _ref.placeholder,
-      counter = _ref.counter,
-      maxLength = _ref.maxLength,
-      name = _ref.name,
-      options = _ref.options,
-      id = _ref.id,
-      style = _ref.style,
-      autoFocus = _ref.autoFocus,
-      error = _ref.error,
-      assistiveText = _ref.assistiveText,
-      allowError = _ref.allowError,
-      lockHeight = _ref.lockHeight,
-      required = _ref.required,
-      mask = _ref.mask,
-      guide = _ref.guide,
-      disableAutoComplete = _ref.disableAutoComplete;
-  var classes = (0, _styles["default"])();
-
-  var _useState = (0, _react.useState)('default'),
-      _useState2 = _slicedToArray(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(valueProp || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      touched = _useState6[0],
-      setTouched = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      showPass = _useState8[0],
-      setShowPass = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      passIconBeingClicked = _useState10[0],
-      setPassIconBeingClicked = _useState10[1];
-
-  var prevDisabled = (0, _usePrevious["default"])(disabled);
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (valueProp !== value) setValue(valueProp);
-    if (disabled && !prevDisabled) setStatus('default');
-  }, [valueProp, disabled, prevDisabled]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      focus: function focus() {
-        return inputRef.current.focus();
-      },
-      blur: function blur() {
-        return inputRef.current.blur();
-      }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/** TextField component that includes all the markup, functions and behaviors to implement any type of input field. */
+var TextField = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextField, _React$Component);
+
+  var _super = _createSuper(TextField);
+
+  function TextField(props) {
+    var _this;
+
+    _classCallCheck(this, TextField);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      status: 'default',
+      value: props.valueProp ? props.valueProp : '',
+      touched: false,
+      showPass: false,
+      passIconBeingClicked: false
     };
-  });
-
-  var _onFocus = (0, _react.useCallback)(function (_ref2) {
-    var target = _ref2.target;
-    if (selectOnFocus) target.select();
-    setStatus('focus');
-    setTouched(true);
-    if (onFocus) onFocus();
-  }, [onFocus, selectOnFocus]);
-
-  var _onBlur = (0, _react.useCallback)(function (_ref3) {
-    var value = _ref3.target.value;
-    setValue(value);
-    setStatus('default');
-    if (onBlur) onBlur(value);
-  }, [onBlur]);
-
-  var _onChange = (0, _react.useCallback)(function (_ref4) {
-    var value = _ref4.target.value;
-    var valid = true;
-    if (regex) valid = new RegExp(regex).test(value);
-
-    if (valid) {
-      setValue(value);
-      if (onChange) onChange(value);
+    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
+    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_this));
+    _this.onClear = _this.onClear.bind(_assertThisInitialized(_this));
+    _this.togglePass = _this.togglePass.bind(_assertThisInitialized(_this));
+    _this.focusInput = _this.focusInput.bind(_assertThisInitialized(_this));
+    _this.outOfPassIcon = _this.outOfPassIcon.bind(_assertThisInitialized(_this));
+    _this.setClassName = _this.setClassName.bind(_assertThisInitialized(_this));
+    _this.setInputClassName = _this.setInputClassName.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(TextField, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this$props = this.props,
+          input = _this$props.input,
+          onRef = _this$props.onRef;
+      if (input && input.value) this.setState({
+        value: input.value
+      });
+      if (onRef) onRef(this);
     }
-  }, [onChange, regex]);
-
-  var _onKeyUp = (0, _react.useCallback)(function (_ref5) {
-    var which = _ref5.which,
-        keyCode = _ref5.keyCode;
-    if (onKeyUp) onKeyUp(which || keyCode);
-  }, [onKeyUp]);
-
-  var _onClear = (0, _react.useCallback)(function () {
-    setValue('');
-    setStatus('default');
-    if (onClear) onClear();
-  }, [onClear]);
-
-  var togglePass = (0, _react.useCallback)(function () {
-    setShowPass(!showPass);
-    setPassIconBeingClicked(true);
-  }, [showPass]);
-  var focusInput = (0, _react.useCallback)(function () {
-    setPassIconBeingClicked(false);
-    inputRef.current.focus();
-  }, []);
-  var outOfPassIcon = (0, _react.useCallback)(function () {
-    return setPassIconBeingClicked(false);
-  }, []);
-  var errorStatus = (0, _react.useMemo)(function () {
-    return error && (touched || allowError) && !passIconBeingClicked;
-  }, [allowError, error, passIconBeingClicked, touched]);
-  var realStatus = (0, _react.useMemo)(function () {
-    return disabled ? 'disabled' : status !== 'focus' && errorStatus ? 'error' : status;
-  }, [status, disabled, errorStatus]);
-  var InputType = (0, _react.useMemo)(function () {
-    return type == 'select' ? 'select' : type == 'textarea' ? 'textarea' : 'input';
-  }, [type]);
-
-  var _className = (0, _react.useMemo)(function () {
-    return (0, _classnames10["default"])(classes.container, classes[realStatus], className);
-  }, [className, classes, realStatus]);
-
-  var _inputClassName = (0, _react.useMemo)(function () {
-    return (0, _classnames10["default"])(classes.input, _defineProperty({}, classes.hasIcon, iconName), _defineProperty({}, classes.hasClear, clear), _defineProperty({}, classes.alignRight, alignRight), _defineProperty({}, classes.select, type === 'select'), _defineProperty({}, classes.textarea, type === 'textarea'), _defineProperty({}, classes.hasPass, type === 'password'), {
-      'data-hj-whitelist': hjWhitelist
-    }, inputClassName);
-  }, [alignRight, classes.alignRight, classes.hasClear, classes.hasIcon, classes.hasPass, classes.input, classes.select, classes.textarea, clear, hjWhitelist, iconName, inputClassName, type]);
-
-  var commonProps = (0, _react.useMemo)(function () {
-    return {
-      name: name,
-      id: id,
-      className: _inputClassName,
-      value: value,
-      autoFocus: autoFocus,
-      maxLength: maxLength,
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onChange: _onChange,
-      onKeyUp: _onKeyUp,
-      ref: inputRef,
-      required: required
-    };
-  }, [name, id, _inputClassName, value, autoFocus, maxLength, _onFocus, _onBlur, _onChange, _onKeyUp, required]);
-  var element = (0, _react.useMemo)(function () {
-    if (disabled) {
-      if (type === 'select') {
-        var selectedOption = options.filter(function (option) {
-          return option.value == value;
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      var input = props.input,
+          valueProp = props.valueProp,
+          disabled = props.disabled;
+      if (input && input.value) this.setState({
+        value: input.value
+      });else if (valueProp != this.state.value) this.setState({
+        value: valueProp
+      });
+
+      if (disabled && !this.props.disabled) {
+        this.setState({
+          status: 'default'
         });
-        var optionLabel;
-        if (selectedOption.length) optionLabel = selectedOption[0].label;
-        return _react["default"].createElement("label", {
-          className: (0, _classnames10["default"])(classes.input, _defineProperty({}, classes.hasIcon, iconName))
-        }, optionLabel ? optionLabel : value ? value : placeholder);
-      } else return _react["default"].createElement("label", {
-        className: (0, _classnames10["default"])(classes.input, _defineProperty({}, classes.textarea, type === 'textarea'), _defineProperty({}, classes.hasIcon, iconName))
-      }, value ? value : placeholder);
-    } else if (type === 'select') return _react["default"].createElement(InputType, commonProps, _react["default"].createElement("option", {
-      value: "",
-      disabled: true,
-      hidden: true
-    }, placeholder), options.map(function (item) {
-      return item.grouped ? _react["default"].createElement("optgroup", {
-        key: item.key,
-        label: item.label,
-        disabled: item.disabled
-      }, item.options.map(function (option) {
-        return _react["default"].createElement("option", {
-          key: option.value,
-          value: option.value,
-          disabled: option.disabled
-        }, option.label);
-      })) : _react["default"].createElement("option", {
-        key: item.value,
-        value: item.value,
-        disabled: item.disabled
-      }, item.label);
-    }));else if (mask) return _react["default"].createElement(_reactTextMask["default"], _extends({}, commonProps, {
-      placeholder: placeholder,
-      type: "text",
-      mask: mask,
-      guide: guide
-    }));else return _react["default"].createElement(InputType, _extends({}, commonProps, {
-      placeholder: placeholder,
-      type: type == 'password' && showPass ? 'text' : type
-    }, disableAutoComplete && {
-      autoComplete: 'off'
-    }));
-  }, [classes.hasIcon, classes.input, classes.textarea, commonProps, disableAutoComplete, disabled, guide, iconName, mask, options, placeholder, showPass, type, value]);
-  var passIcon = (0, _react.useMemo)(function () {
-    return disabled ? type !== 'select' ? _react["default"].createElement("div", {
-      className: classes.passIcon
-    }, _react["default"].createElement(_Icon["default"], {
-      iconName: "eye",
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
-      colors: [_colors["default"].grey100]
-    })) : null : type !== 'select' ? _react["default"].createElement("div", {
-      onMouseDown: togglePass,
-      onMouseUp: focusInput,
-      onMouseOut: outOfPassIcon,
-      className: classes.passIcon
-    }, _react["default"].createElement(_Icon["default"], {
-      iconName: "eye",
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
-      colors: showPass ? [_colors["default"].grey500] : [_colors["default"].grey200]
-    })) : null;
-  }, [classes.passIcon, disabled, focusInput, outOfPassIcon, showPass, togglePass, type]);
-  return _react["default"].createElement("div", {
-    className: _className,
-    style: style
-  }, (label || lockHeight) && _react["default"].createElement("div", {
-    className: classes.top
-  }, label && _react["default"].createElement(_Text["default"], {
-    small: true,
-    tag: "label",
-    disabled: disabled,
-    className: (0, _classnames10["default"])(classes.label, classes.left)
-  }, label)), _react["default"].createElement("div", {
-    className: classes.inputWrap
-  }, iconName && _react["default"].createElement(_Icon["default"], {
-    iconName: iconName,
-    width: _iconSizes["default"].base,
-    height: _iconSizes["default"].base,
-    className: classes.icon,
-    colors: [_colors["default"].grey500]
-  }), type == 'select' && _react["default"].createElement("div", {
-    className: classes.selectIcon
-  }, _react["default"].createElement(_Icon["default"], {
-    iconName: "arrowDown",
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small,
-    colors: disabled ? [_colors["default"].grey200] : [_colors["default"].grey900]
-  })), type == 'password' && passIcon, value && clear && _react["default"].createElement("div", {
-    onClick: _onClear,
-    className: classes.clear
-  }, _react["default"].createElement(_Icon["default"], {
-    iconName: "close"
-  })), element), (assistiveText || counter && maxLength || lockHeight) && _react["default"].createElement("div", {
-    className: classes.bottom
-  }, assistiveText && _react["default"].createElement(_Text["default"], {
-    small: true,
-    tag: "label",
-    disabled: disabled && realStatus !== 'error',
-    low: !disabled && realStatus !== 'error',
-    error: !disabled && realStatus === 'error',
-    className: (0, _classnames10["default"])(classes.label, classes.left)
-  }, realStatus == 'error' ? _react["default"].createElement(_Icon["default"], {
-    iconName: "warning",
-    width: _iconSizes["default"].tiny,
-    height: _iconSizes["default"].tiny,
-    className: classes.errorIcon
-  }) : null, " ", assistiveText), counter && maxLength && _react["default"].createElement(_Text["default"], {
-    small: true,
-    tag: "label",
-    disabled: disabled,
-    low: !disabled,
-    className: (0, _classnames10["default"])(classes.label, classes.right)
-  }, value.length, " / ", maxLength)));
-});
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var onRef = this.props.onRef;
+      if (onRef) onRef(undefined);
+    }
+  }, {
+    key: "onFocus",
+    value: function onFocus(_ref) {
+      var target = _ref.target;
+      var _this$props2 = this.props,
+          onFocus = _this$props2.onFocus,
+          selectOnFocus = _this$props2.selectOnFocus;
+      if (selectOnFocus) target.select();
+      this.setState({
+        status: 'focus',
+        touched: true
+      });
+      if (onFocus) onFocus();
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur(_ref2) {
+      var value = _ref2.target.value;
+      var _this$props3 = this.props,
+          input = _this$props3.input,
+          onBlur = _this$props3.onBlur;
+      this.setState({
+        value: value,
+        status: 'default'
+      });
+      if (onBlur) onBlur(value);
+      if (input) input.onBlur(value);
+    }
+  }, {
+    key: "onChange",
+    value: function onChange(_ref3) {
+      var value = _ref3.target.value;
+      var _this$props4 = this.props,
+          input = _this$props4.input,
+          onChange = _this$props4.onChange,
+          regex = _this$props4.regex;
+      var valid = true;
+      if (regex) valid = new RegExp(regex).test(value);
+
+      if (valid) {
+        this.setState({
+          value: value
+        });
+        if (input) input.onBlur(value);
+        if (onChange) onChange(value);
+      }
+    }
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(_ref4) {
+      var which = _ref4.which,
+          keyCode = _ref4.keyCode;
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) onKeyUp(which || keyCode);
+    }
+  }, {
+    key: "onClear",
+    value: function onClear() {
+      var _this$props5 = this.props,
+          input = _this$props5.input,
+          onClear = _this$props5.onClear;
+      this.setState({
+        value: '',
+        status: 'default'
+      });
+      if (onClear) onClear();
+      if (input) input.onBlur(value);
+    }
+  }, {
+    key: "togglePass",
+    value: function togglePass() {
+      var showPass = this.state.showPass;
+      this.setState({
+        showPass: !showPass,
+        passIconBeingClicked: true
+      });
+    }
+  }, {
+    key: "focusInput",
+    value: function focusInput() {
+      this.setState({
+        passIconBeingClicked: false
+      });
+      this.input.focus();
+    }
+  }, {
+    key: "outOfPassIcon",
+    value: function outOfPassIcon() {
+      this.setState({
+        passIconBeingClicked: false
+      });
+    }
+  }, {
+    key: "setClassName",
+    value: function setClassName(status) {
+      var _this$props6 = this.props,
+          classes = _this$props6.classes,
+          className = _this$props6.className;
+      var containerClassName = classes.container + ' ' + classes[status];
+      if (className) containerClassName += ' ' + className;
+      return containerClassName;
+    }
+  }, {
+    key: "setInputClassName",
+    value: function setInputClassName() {
+      var _this$props7 = this.props,
+          classes = _this$props7.classes,
+          iconName = _this$props7.iconName,
+          clear = _this$props7.clear,
+          type = _this$props7.type,
+          inputClassName = _this$props7.inputClassName,
+          alignRight = _this$props7.alignRight,
+          hjWhitelist = _this$props7.hjWhitelist,
+          searchField = _this$props7.searchField;
+      var className = classes.input;
+      if (searchField) className += " ".concat(classes.searchField);
+      if (iconName) className += " ".concat(classes.hasIcon);
+      if (searchField && iconName) className += " ".concat(classes.searchFieldHasIcon);
+      if (clear) className += " ".concat(classes.hasClear);
+      if (alignRight) className += " ".concat(classes.alignRight);
+      if (type == 'select') className += " ".concat(classes.select);
+      if (type == 'textarea') className += " ".concat(classes.textarea);
+      if (type == 'password') className += " ".concat(classes.hasPass);
+      if (hjWhitelist) className += ' data-hj-whitelist';
+      if (inputClassName) className += " ".concat(inputClassName);
+      return className;
+    }
+  }, {
+    key: "setIconColor",
+    value: function setIconColor() {
+      var _this$state = this.state,
+          status = _this$state.status,
+          value = _this$state.value,
+          touched = _this$state.touched;
+      var _this$props8 = this.props,
+          disabled = _this$props8.disabled,
+          searchField = _this$props8.searchField,
+          error = _this$props8.error,
+          allowError = _this$props8.allowError;
+      if (disabled) return _colors["default"].grey500;
+      if (status === 'focus' && searchField) return _colors["default"].prim;
+      if (error && (allowError || touched)) return _colors["default"].error;
+      if (status !== 'focus' && searchField && value) return _colors["default"].grey900;
+      return _colors["default"].grey500;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state2 = this.state,
+          status = _this$state2.status,
+          value = _this$state2.value,
+          touched = _this$state2.touched,
+          showPass = _this$state2.showPass,
+          passIconBeingClicked = _this$state2.passIconBeingClicked;
+      var _this$props9 = this.props,
+          classes = _this$props9.classes,
+          input = _this$props9.input,
+          meta = _this$props9.meta,
+          label = _this$props9.label,
+          placeholder = _this$props9.placeholder,
+          counter = _this$props9.counter,
+          maxLength = _this$props9.maxLength,
+          type = _this$props9.type,
+          name = _this$props9.name,
+          options = _this$props9.options,
+          id = _this$props9.id,
+          style = _this$props9.style,
+          disabled = _this$props9.disabled,
+          autoFocus = _this$props9.autoFocus,
+          error = _this$props9.error,
+          assistiveText = _this$props9.assistiveText,
+          clear = _this$props9.clear,
+          iconName = _this$props9.iconName,
+          allowError = _this$props9.allowError,
+          lockHeight = _this$props9.lockHeight,
+          required = _this$props9.required,
+          mask = _this$props9.mask,
+          guide = _this$props9.guide,
+          inputMode = _this$props9.inputMode,
+          disableAutoComplete = _this$props9.disableAutoComplete,
+          pattern = _this$props9.pattern,
+          searchField = _this$props9.searchField,
+          testId = _this$props9.testId;
+      var realStatus = status;
+      var InputType = type == 'select' ? 'select' : type == 'textarea' ? 'textarea' : 'input';
+      var errorStatus = meta && meta.error && (meta.touched || allowError) || error && (touched || allowError) && !passIconBeingClicked;
+      if (disabled) realStatus = 'disabled';else if (status != 'focus' && errorStatus) realStatus = 'error';else if (status !== 'focus' && searchField && value) realStatus = 'filled';
+      var element, passIcon;
+      var commonProps = {
+        name: name,
+        id: id,
+        className: this.setInputClassName(),
+        value: input && input.value ? input.value : value,
+        autoFocus: autoFocus,
+        maxLength: maxLength,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onChange: this.onChange,
+        onKeyUp: this.onKeyUp,
+        ref: function ref(_ref5) {
+          _this2.input = _ref5;
+        },
+        required: required,
+        pattern: pattern,
+        inputMode: inputMode,
+        'data-testid': testId
+      };
+
+      if (disabled) {
+        if (type == 'select') {
+          var selectedOption = options.filter(function (option) {
+            return option.value == value;
+          });
+          var optionLabel;
+
+          if (selectedOption.length) {
+            optionLabel = selectedOption[0].label;
+          }
+
+          element = /*#__PURE__*/_react["default"].createElement("label", {
+            className: "".concat(classes.input).concat(iconName ? " ".concat(classes.hasIcon) : '')
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "".concat(classes.inputDisabled, " ").concat(classes.hasRightIcon)
+          }, input && input.value ? input.value : optionLabel ? optionLabel : value ? value : placeholder));
+        } else {
+          element = /*#__PURE__*/_react["default"].createElement("label", {
+            className: "".concat(classes.input).concat(type == 'textarea' ? " ".concat(classes.textarea) : '').concat(iconName ? " ".concat(classes.hasIcon) : '')
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.inputDisabled
+          }, input && input.value ? input.value : value ? value : placeholder));
+        }
+
+        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.passIcon
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          iconName: "eyeClosed",
+          width: _iconSizes["default"].small,
+          height: _iconSizes["default"].small,
+          colors: [_colors["default"].grey200]
+        }));
+      } else if (type == 'select') {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
+          value: "",
+          disabled: true,
+          hidden: true
+        }, placeholder), options.map(function (item) {
+          if (item.grouped) {
+            return /*#__PURE__*/_react["default"].createElement("optgroup", {
+              key: item.key,
+              label: item.label,
+              disabled: item.disabled
+            }, item.options.map(function (option) {
+              return /*#__PURE__*/_react["default"].createElement("option", _extends({
+                key: option.value,
+                value: option.value,
+                disabled: option.disabled
+              }, testId && {
+                'data-testid': "".concat(testId, "__item-").concat(item.value)
+              }), option.label);
+            }));
+          } else {
+            return /*#__PURE__*/_react["default"].createElement("option", _extends({
+              key: item.value,
+              value: item.value,
+              disabled: item.disabled
+            }, testId && {
+              'data-testid': "".concat(testId, "__item-").concat(item.value)
+            }), item.label);
+          }
+        }));
+      } else if (mask) {
+        element = /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], _extends({}, commonProps, {
+          placeholder: placeholder,
+          type: type == 'password' && showPass ? 'text' : type
+        }, disableAutoComplete && {
+          autoComplete: 'off'
+        }, {
+          mask: mask,
+          guide: guide
+        }));
+      } else {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, _extends({}, commonProps, {
+          placeholder: placeholder,
+          type: type == 'password' && showPass ? 'text' : type
+        }, disableAutoComplete && {
+          autoComplete: 'off'
+        }));
+        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
+          onMouseDown: this.togglePass,
+          onMouseUp: this.focusInput,
+          onMouseOut: this.outOfPassIcon,
+          className: classes.passIcon
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          iconName: showPass ? 'eye' : 'eyeClosed',
+          width: _iconSizes["default"].small,
+          height: _iconSizes["default"].small,
+          colors: showPass ? [_colors["default"].grey900] : [_colors["default"].grey400]
+        }));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.setClassName(realStatus),
+        style: style
+      }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.top
+      }, label && /*#__PURE__*/_react["default"].createElement("label", {
+        className: "".concat(classes.label, " ").concat(classes.left)
+      }, label)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.inputWrap
+      }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: iconName,
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small,
+        className: classes.icon,
+        colors: [this.setIconColor()]
+      }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.selectIcon
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "arrowDown",
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small,
+        colors: disabled ? [_colors["default"].grey200] : [_colors["default"].grey900]
+      })), type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement("div", _extends({
+        onClick: this.onClear,
+        className: classes.clear
+      }, testId && {
+        'data-testid': "".concat(testId, "__container-close-icon")
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "close",
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small
+      })), element), (assistiveText || counter && maxLength || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.bottom
+      }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
+        className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
+      }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "warningSolid",
+        width: _iconSizes["default"].tiny,
+        height: _iconSizes["default"].tiny,
+        className: classes.errorIcon
+      }) : null, ' ', assistiveText), counter && maxLength && /*#__PURE__*/_react["default"].createElement("label", {
+        className: "".concat(classes.label, " ").concat(classes.right, " ").concat(classes.counter)
+      }, value.length, " / ", maxLength)));
+    }
+  }]);
+
+  return TextField;
+}(_react["default"].Component);
+
 TextField.defaultProps = {
   type: 'text',
   counter: false,
@@ -337,6 +473,8 @@ TextField.defaultProps = {
   hjWhitelist: true
 };
 TextField.propTypes = {
+  classes: _propTypes["default"].object,
+
   /** Type of the input. Use any of the following types: text, email, password, textarea, select, date, number, search, file. */
   type: _propTypes["default"].string,
 
@@ -388,6 +526,9 @@ TextField.propTypes = {
   /** Boolean to show or hide the full mask while writing. */
   guide: _propTypes["default"].bool,
 
+  /** The type of input the field will receive, to show the right keyboard in mobile. */
+  inputMode: _propTypes["default"].oneOf(['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url']),
+
   /**  Disables native autoComplete on browsers. */
   disableAutoComplete: _propTypes["default"].bool,
 
@@ -412,6 +553,9 @@ TextField.propTypes = {
   /** Function to call after clicking the 'x' icon shown by the 'clear' property. */
   onClear: _propTypes["default"].func,
 
+  /** Function to call when you need to call the input by a reference. */
+  onRef: _propTypes["default"].func,
+
   /** Array of objects with options in case you set the 'type' property as 'select'. Each option must have a value and a label. You can group the options. */
   options: _propTypes["default"].array,
 
@@ -434,7 +578,16 @@ TextField.propTypes = {
   alignRight: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** Regular expression to validate the input content. */
+  pattern: _propTypes["default"].string,
+
+  /** Size of the TextField. */
+  searchField: _propTypes["default"].bool,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = TextField;
 exports["default"] = _default;