iguazio.dashboard-react-controls 0.0.6 → 0.0.7

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _checkboxUnchecked = require("../../images/checkbox-unchecked.svg");
+
+var _checkboxChecked = require("../../images/checkbox-checked.svg");
+
+require("./formCheckBox.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FormCheckBox = function FormCheckBox(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      item = _ref.item,
+      onChange = _ref.onChange,
+      selectedId = _ref.selectedId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "checkbox ".concat(className),
+    onClick: function onClick() {
+      onChange(item.id);
+    },
+    children: [item.id === selectedId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxChecked.ReactComponent, {
+      className: "checked"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxUnchecked.ReactComponent, {
+      className: "unchecked"
+    }), children || item.label]
+  });
+};
+
+FormCheckBox.defaultProps = {
+  className: '',
+  selectedId: ''
+};
+FormCheckBox.propTypes = {
+  className: _propTypes.default.string,
+  item: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
+  }).isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  selectedId: _propTypes.default.string
+};
+
+var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);
+
+exports.default = _default;

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -0,0 +1,33 @@
+@import '../../scss/colors';
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  color: $primary;
+  cursor: pointer;
+
+  &__label {
+    flex: 1;
+    font-size: 14px;
+
+    &-tip {
+      margin-left: 5px;
+    }
+  }
+
+  svg {
+    margin-right: 5px;
+
+    &.checked {
+      path {
+        fill: $malibu;
+      }
+    }
+
+    &.unchecked {
+      path {
+        fill: $spunPearl;
+      }
+    }
+  }
+}

package/dist/components/FormInput/FormInput.js

@@ -0,0 +1,418 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var _reactFinalForm = require("react-final-form");
+
+var _OptionsMenu = _interopRequireDefault(require("../../elements/OptionsMenu/OptionsMenu"));
+
+var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
+
+var _Tip = _interopRequireDefault(require("../Tip/Tip"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+
+var _ValidationTemplate = _interopRequireDefault(require("../../elements/ValidationTemplate/ValidationTemplate"));
+
+var _validationService = require("../../utils/validationService");
+
+var _useDetectOutsideClick = require("../../hooks/useDetectOutsideClick");
+
+var _types = require("../../types");
+
+var _invalid = require("../../images/invalid.svg");
+
+var _popout = require("../../images/popout.svg");
+
+var _warning = require("../../images/warning.svg");
+
+require("./formInput.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["className", "density", "disabled", "focused", "iconClass", "inputIcon", "invalidText", "label", "link", "name", "onBlur", "onChange", "pattern", "required", "suggestionList", "tip", "validationRules", "validator", "withoutBorder"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var className = _ref.className,
+      density = _ref.density,
+      disabled = _ref.disabled,
+      focused = _ref.focused,
+      iconClass = _ref.iconClass,
+      inputIcon = _ref.inputIcon,
+      invalidText = _ref.invalidText,
+      label = _ref.label,
+      link = _ref.link,
+      name = _ref.name,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      pattern = _ref.pattern,
+      required = _ref.required,
+      suggestionList = _ref.suggestionList,
+      tip = _ref.tip,
+      validationRules = _ref.validationRules,
+      validator = _ref.validator,
+      withoutBorder = _ref.withoutBorder,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useField = (0, _reactFinalForm.useField)(name),
+      input = _useField.input,
+      meta = _useField.meta;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInvalid = _useState2[0],
+      setIsInvalid = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      typedValue = _useState6[0],
+      setTypedValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(RegExp(pattern)),
+      _useState8 = _slicedToArray(_useState7, 1),
+      validationPattern = _useState8[0];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      showValidationRules = _useState10[0],
+      setShowValidationRules = _useState10[1];
+
+  var wrapperRef = (0, _react.useRef)();
+  (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
+  var inputRef = (0, _react.useRef)();
+  (0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
+    return setShowValidationRules(false);
+  });
+  var inputClassNames = (0, _classnames.default)('form-field__input', className, "form-field__input-".concat(density), isInvalid && 'form-field__input-invalid', // isInvalid && 'input_rules-invalid',
+  withoutBorder && 'without-border');
+  var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
+  (0, _react.useEffect)(function () {
+    setTypedValue(String(input.value)); // convert from number to string
+  }, [input.value]);
+  (0, _react.useEffect)(function () {
+    setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
+  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
+  (0, _react.useEffect)(function () {
+    if (showValidationRules) {
+      window.addEventListener('scroll', handleScroll, true);
+    }
+
+    return function () {
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [showValidationRules]);
+  (0, _react.useEffect)(function () {
+    if (focused) {
+      inputRef.current.focus();
+    }
+  }, [focused]);
+
+  var getValidationRules = function getValidationRules(rules) {
+    return rules.map(function (_ref3) {
+      var _ref3$isValid = _ref3.isValid,
+          isValid = _ref3$isValid === void 0 ? false : _ref3$isValid,
+          label = _ref3.label,
+          name = _ref3.name;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationTemplate.default, {
+        valid: isValid,
+        validationMessage: label
+      }, name);
+    });
+  };
+
+  var handleInputBlur = function handleInputBlur(event) {
+    var _event$relatedTarget;
+
+    input.onBlur(event);
+
+    if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.suggestion-list'))) {
+      setIsFocused(false);
+      onBlur && onBlur(event);
+    }
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    input.onChange(event);
+    onChange && onChange(event.target.value);
+  };
+
+  var handleInputFocus = function handleInputFocus(event) {
+    input.onFocus(event);
+    setIsFocused(true);
+  };
+
+  var handleScroll = function handleScroll(event) {
+    if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field')) {
+      setShowValidationRules(false);
+    }
+  };
+
+  var handleSuggestionClick = function handleSuggestionClick(item) {
+    input.onChange && input.onChange(item);
+    setIsFocused(false);
+    onBlur();
+  };
+
+  var toggleValidationRulesMenu = function toggleValidationRulesMenu() {
+    inputRef.current.focus();
+    setShowValidationRules(!showValidationRules);
+  };
+
+  var validateField = function validateField(value) {
+    var valueToValidate = value !== null && value !== void 0 ? value : '';
+    var validationError = null;
+
+    if (!(0, _lodash.isEmpty)(validationRules)) {
+      var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(validationRules, valueToValidate),
+          _checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
+          newRules = _checkPatternsValidit2[0],
+          isValidField = _checkPatternsValidit2[1];
+
+      if (!isValidField) {
+        validationError = newRules;
+      }
+
+      if (isValidField && showValidationRules || required && valueToValidate === '') {
+        setShowValidationRules(false);
+      }
+    }
+
+    if (!validationError) {
+      if (pattern && !validationPattern.test(valueToValidate)) {
+        validationError = {
+          name: 'pattern',
+          label: invalidText
+        };
+      } else if (valueToValidate.startsWith(' ')) {
+        validationError = {
+          name: 'empty',
+          label: invalidText
+        };
+      } else if (required && valueToValidate.trim().length === 0) {
+        validationError = {
+          name: 'required',
+          label: 'This field is required'
+        };
+      }
+    }
+
+    if (!validationError && validator) {
+      validationError = validator(value);
+    }
+
+    return validationError;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    validate: validateField,
+    name: name,
+    children: function children(_ref4) {
+      var _inputProps$autocompl, _meta$error$label, _meta$error;
+
+      var input = _ref4.input,
+          meta = _ref4.meta;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: ref,
+        className: "form-field",
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: labelClassNames,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            "data-testid": "label",
+            htmlFor: input.name,
+            children: [label, (required || validationRules.find(function (rule) {
+              return rule.name === 'required';
+            })) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "form-field__label-mandatory",
+              children: " *"
+            })]
+          }), link && link.show && typedValue.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__label-icon",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+                text: link.url || typedValue
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: link.url || typedValue,
+                onClick: function onClick(event) {
+                  return event.stopPropagation();
+                },
+                target: "_blank",
+                rel: "noreferrer",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popout.ReactComponent, {})
+              })
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "form-field__wrapper",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+            "data-testid": "input",
+            id: input.name,
+            className: inputClassNames,
+            ref: inputRef,
+            required: isInvalid
+          }, _objectSpread(_objectSpread({
+            disabled: disabled,
+            pattern: pattern
+          }, inputProps), input)), {}, {
+            autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
+            onChange: handleInputChange,
+            onBlur: handleInputBlur,
+            onFocus: handleInputFocus
+          })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "form-field__icons",
+            children: [isInvalid && !Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              className: "form-field__warning",
+              template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+                text: (_meta$error$label = (_meta$error = meta.error) === null || _meta$error === void 0 ? void 0 : _meta$error.label) !== null && _meta$error$label !== void 0 ? _meta$error$label : invalidText,
+                warning: true
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
+            }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "form-field__warning",
+              onClick: toggleValidationRulesMenu,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {})
+            }), tip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
+              text: tip,
+              className: "form-field__tip"
+            }), inputIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              "data-testid": "input-icon",
+              className: iconClass,
+              children: inputIcon
+            })]
+          })]
+        }), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+          className: "suggestion-list",
+          children: suggestionList.map(function (item, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              className: "suggestion-item",
+              onClick: function onClick() {
+                handleSuggestionClick(item);
+              },
+              tabIndex: index,
+              dangerouslySetInnerHTML: {
+                __html: item.replace(new RegExp(typedValue, 'gi'), function (match) {
+                  return match ? "<b>".concat(match, "</b>") : match;
+                })
+              }
+            }, "".concat(item).concat(index));
+          })
+        }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
+          show: showValidationRules,
+          parentElement: ref,
+          children: getValidationRules(meta.error)
+        })]
+      });
+    }
+  });
+});
+
+FormInput.defaultProps = {
+  className: '',
+  density: 'normal',
+  disabled: false,
+  focused: false,
+  iconClass: '',
+  inputIcon: null,
+  invalidText: 'This field is invalid',
+  label: '',
+  link: {
+    show: '',
+    value: ''
+  },
+  maxLength: null,
+  min: null,
+  onBlur: function onBlur() {},
+  onChange: function onChange() {},
+  onKeyDown: function onKeyDown() {},
+  pattern: null,
+  placeholder: '',
+  required: false,
+  step: '',
+  suggestionList: [],
+  tip: '',
+  type: 'text',
+  validationRules: [],
+  validator: function validator() {},
+  value: '',
+  withoutBorder: false
+};
+FormInput.propTypes = {
+  className: _propTypes.default.string,
+  density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
+  disabled: _propTypes.default.bool,
+  focused: _propTypes.default.bool,
+  iconClass: _propTypes.default.string,
+  inputIcon: _propTypes.default.element,
+  invalidText: _propTypes.default.string,
+  label: _propTypes.default.string,
+  link: _types.INPUT_LINK,
+  maxLength: _propTypes.default.number,
+  min: _propTypes.default.number,
+  name: _propTypes.default.string.isRequired,
+  onBlur: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  pattern: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  step: _propTypes.default.string,
+  suggestionList: _propTypes.default.arrayOf(_propTypes.default.string),
+  tip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  type: _propTypes.default.string,
+  validationRules: _types.INPUT_VALIDATION_RULES,
+  validator: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  withoutBorder: _propTypes.default.bool
+};
+
+var _default = /*#__PURE__*/_react.default.memo(FormInput);
+
+exports.default = _default;

package/dist/components/FormInput/formInput.scss

@@ -0,0 +1,169 @@
+@import '../../scss/colors';
+@import '../../scss/borders';
+@import '../../scss/shadows';
+@import '../../scss/mixins';
+
+.form-field {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &__label {
+    margin-bottom: 5px;
+    color: $topaz;
+    font-size: 12px;
+    text-transform: capitalize;
+    background-color: transparent;
+
+    &-mandatory {
+      color: $amaranth;
+    }
+
+    &-disabled {
+      color: $spunPearl;
+
+      .form-field__label-mandatory {
+        color: $spunPearl;
+      }
+    }
+
+    &-icon {
+      display: inline-flex;
+      margin-left: 3px;
+
+      & > *,
+      a {
+        display: inline-flex;
+      }
+
+      a {
+        transform: translateY(-1px);
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+
+        path {
+          fill: $cornflowerBlue;
+        }
+      }
+    }
+  }
+
+  &__input {
+    padding-left: 16px;
+    padding-right: 30px;
+
+    @include fieldWrapper;
+
+    &::placeholder {
+      color: $spunPearl;
+    }
+
+    &::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      color: $spunPearl;
+    }
+
+    &::-moz-placeholder {
+      /* Firefox 19+ */
+      color: $spunPearl;
+    }
+
+    &:-ms-input-placeholder {
+      /* IE 10+ */
+      color: $spunPearl;
+    }
+
+    &:-moz-placeholder {
+      /* Firefox 18- */
+      color: $spunPearl;
+    }
+
+    &-invalid {
+      border: $errorBorder;
+      padding-right: 50px;
+    }
+
+    &.without-border {
+      border-color: transparent;
+    }
+
+    &:read-only:not(:disabled) {
+      border-color: transparent;
+      padding: 0;
+    }
+
+    &:disabled {
+      color: $spunPearl;
+      cursor: not-allowed;
+    }
+
+    &-dense {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    &-normal {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+
+    &-medium {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+
+    &-chunky {
+      padding-top: 18px;
+      padding-bottom: 18px;
+    }
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+
+    & > * {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      &:not(:first-child) {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .suggestion-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    margin: 0;
+    padding: 7px 0;
+    background-color: $white;
+    border-radius: 4px;
+    box-shadow: $previewBoxShadow;
+
+    .suggestion-item {
+      padding: 7px 15px;
+      color: $mulledWine;
+      list-style-type: none;
+
+      &:hover {
+        background-color: $alabaster;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__wrapper {
+    position: relative;
+  }
+}