iguazio.dashboard-react-controls 0.0.11 → 0.0.14

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -9,47 +9,65 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _checkboxUnchecked = require("../../images/checkbox-unchecked.svg");
+var _reactFinalForm = require("react-final-form");
 
-var _checkboxChecked = require("../../images/checkbox-checked.svg");
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./formCheckBox.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["children", "className", "name", "label"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 _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 FormCheckBox = function FormCheckBox(_ref) {
-  var children = _ref.children,
+  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]
+      name = _ref.name,
+      label = _ref.label,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    name: name,
+    value: inputProps.value,
+    type: "checkbox",
+    children: function children(_ref2) {
+      var _inputProps$value, _inputProps$value2;
+
+      var input = _ref2.input;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: formFieldClassNames,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+          id: (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : name
+        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+          htmlFor: (_inputProps$value2 = inputProps.value) !== null && _inputProps$value2 !== void 0 ? _inputProps$value2 : name,
+          children: [label ? label : '', _children]
+        })]
+      });
+    }
   });
 };
 
 FormCheckBox.defaultProps = {
   className: '',
-  selectedId: ''
+  label: ''
 };
 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
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string
 };
 
 var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -1,32 +1,50 @@
 @import '../../scss/colors';
+@import '../../scss/mixins';
 
-.checkbox {
-  display: flex;
+.form-field-checkbox {
+  display: inline-flex;
   align-items: center;
+  justify-content: flex-start;
   color: $primary;
-  cursor: pointer;
 
-  &__label {
-    flex: 1;
-    font-size: 14px;
+  input[type='checkbox'] {
+    @include radioCheckField;
 
-    &-tip {
-      margin-left: 5px;
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    transition: background 0.2s ease-in-out;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 5px;
+      width: 6px;
+      height: 11px;
+      border-style: solid;
+      border-color: $white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
     }
-  }
 
-  svg {
-    margin-right: 5px;
+    &:checked {
+      background: currentColor;
+
+      &:hover {
+        background: currentColor;
 
-    &.checked {
-      path {
-        fill: $malibu;
+        &:disabled {
+          background: currentColor;
+        }
       }
     }
 
-    &.unchecked {
-      path {
-        fill: $spunPearl;
+    &:disabled {
+      &:hover {
+        background: $white;
       }
     }
   }

package/dist/components/FormCombobox/FormCombobox.js

@@ -0,0 +1,517 @@
+"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 _reactFinalForm = require("react-final-form");
+
+var _lodash = require("lodash");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _elements = require("../../elements");
+
+var _validation = require("../../utils/validation.util");
+
+var _hooks = require("../../hooks");
+
+var _types = require("../../types");
+
+var _arrow = require("../../images/arrow.svg");
+
+var _search = require("../../images/search.svg");
+
+var _warning = require("../../images/warning.svg");
+
+require("./formCombobox.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+var FormCombobox = function FormCombobox(_ref) {
+  var comboboxClassName = _ref.comboboxClassName,
+      density = _ref.density,
+      disabled = _ref.disabled,
+      hideSearchInput = _ref.hideSearchInput,
+      inputDefaultValue = _ref.inputDefaultValue,
+      inputPlaceholder = _ref.inputPlaceholder,
+      invalidText = _ref.invalidText,
+      maxSuggestedMatches = _ref.maxSuggestedMatches,
+      name = _ref.name,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      required = _ref.required,
+      rules = _ref.rules,
+      selectDefaultValue = _ref.selectDefaultValue,
+      selectOptions = _ref.selectOptions,
+      selectPlaceholder = _ref.selectPlaceholder,
+      suggestionList = _ref.suggestionList,
+      validator = _ref.validator,
+      withoutBorder = _ref.withoutBorder;
+
+  var _useField = (0, _reactFinalForm.useField)(name),
+      input = _useField.input,
+      meta = _useField.meta;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    label: '',
+    id: '',
+    className: ''
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectValue = _useState4[0],
+      setSelectValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    left: '0',
+    paddingTop: '10px'
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dropdownStyle = _useState6[0],
+      setDropdownStyle = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      showSelectDropdown = _useState8[0],
+      setShowSelectDropdown = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      showSuggestionList = _useState10[0],
+      setShowSuggestionList = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(suggestionList),
+      _useState12 = _slicedToArray(_useState11, 2),
+      dropdownList = _useState12[0],
+      setDropdownList = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      searchIsFocused = _useState14[0],
+      setSearchIsFocused = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isInvalid = _useState16[0],
+      setIsInvalid = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(rules),
+      _useState18 = _slicedToArray(_useState17, 2),
+      validationRules = _useState18[0],
+      setValidationRules = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      showValidationRules = _useState20[0],
+      setShowValidationRules = _useState20[1];
+
+  var comboboxRef = (0, _react.useRef)();
+  var selectRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)();
+  (0, _hooks.useDetectOutsideClick)(comboboxRef, function () {
+    return setShowValidationRules(false);
+  });
+  (0, _react.useEffect)(function () {
+    if ((selectDefaultValue === null || selectDefaultValue === void 0 ? void 0 : selectDefaultValue.label.length) > 0 && selectValue.label.length === 0) {
+      setSelectValue(selectDefaultValue);
+      input.onChange(selectDefaultValue.id);
+      onChange && onChange(selectDefaultValue);
+    }
+  }, [input, onChange, selectDefaultValue, selectValue.label.length]);
+  (0, _react.useEffect)(function () {
+    if (inputDefaultValue.length > 0 && selectValue.id.length > 0 && inputValue.length === 0) {
+      setInputValue(inputDefaultValue);
+      onChange && onChange(selectValue.id, inputDefaultValue);
+      input.onChange("".concat(selectValue.id).concat(inputDefaultValue));
+    }
+  }, [input, inputDefaultValue, inputValue.length, onChange, selectValue]);
+  (0, _react.useEffect)(function () {
+    setValidationRules(function (prevState) {
+      return prevState.map(function (rule) {
+        return _objectSpread(_objectSpread({}, rule), {}, {
+          isValid: !meta.error || !Array.isArray(meta.error) ? true : !meta.error.some(function (err) {
+            return err.name === rule.name;
+          })
+        });
+      });
+    });
+  }, [meta.error]);
+  (0, _react.useEffect)(function () {
+    if (!searchIsFocused) {
+      if (JSON.stringify(dropdownList) !== JSON.stringify(suggestionList)) {
+        setDropdownList(suggestionList);
+      }
+    }
+  }, [dropdownList, suggestionList, searchIsFocused]);
+  (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]);
+  var handleOutsideClick = (0, _react.useCallback)(function (event) {
+    if (comboboxRef.current && !comboboxRef.current.contains(event.target)) {
+      setSearchIsFocused(false);
+      setShowSelectDropdown(false);
+      setShowSuggestionList(false);
+      input.onBlur(new Event('blur'));
+      onBlur && onBlur(input.value);
+    }
+  }, [input, onBlur]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', handleOutsideClick);
+    return function () {
+      window.removeEventListener('click', handleOutsideClick);
+    };
+  }, [handleOutsideClick]);
+
+  var getValidationRules = function getValidationRules() {
+    return validationRules.map(function (_ref2) {
+      var _ref2$isValid = _ref2.isValid,
+          isValid = _ref2$isValid === void 0 ? false : _ref2$isValid,
+          label = _ref2.label,
+          name = _ref2.name;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_elements.ValidationTemplate, {
+        valid: isValid,
+        validationMessage: label
+      }, name);
+    });
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    var target = event.target;
+    setDropdownStyle({
+      left: "".concat(target.selectionStart < 30 ? target.selectionStart : 30, "ch"),
+      paddingTop: '10px'
+    });
+
+    if (searchIsFocused) {
+      setSearchIsFocused(false);
+    }
+
+    setInputValue(target.value);
+    input.onChange("".concat(selectValue.id).concat(target.value));
+    onChange && onChange(selectValue.id, target.value);
+
+    if (dropdownList.length > 0) {
+      setShowSuggestionList(true);
+    }
+  };
+
+  var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option) {
+    if (selectedOption.id !== selectValue.id) {
+      setSelectValue(selectedOption);
+      input.onChange(selectedOption.id);
+      setInputValue('');
+      onChange && onChange(selectedOption.id);
+      setShowSelectDropdown(false);
+      inputRef.current.disabled = false;
+      inputRef.current.focus();
+    }
+  };
+
+  var handleSuggestionListOptionClick = function handleSuggestionListOptionClick(option) {
+    var inputValueItems = inputValue.split('/');
+    var valueIndex = inputValueItems.length - 1;
+    var formattedValue = option.customDelimiter ? inputValueItems[valueIndex].replace(new RegExp("".concat(option.customDelimiter, ".*")), '') + option.id : option.id;
+    if (inputValueItems.length <= maxSuggestedMatches - 1) formattedValue += '/';
+    inputValueItems[valueIndex] = formattedValue;
+
+    if (searchIsFocused) {
+      setSearchIsFocused(false);
+    }
+
+    if (inputValueItems.join('/') !== inputValue) {
+      setInputValue(inputValueItems.join('/'));
+      input.onChange("".concat(selectValue.id).concat(inputValueItems.join('/')));
+      onChange && onChange(selectValue.id, inputValueItems.join('/'));
+    }
+
+    setShowSuggestionList(false);
+    inputRef.current.focus();
+    setDropdownStyle({
+      left: "".concat(inputRef.current.selectionStart < 30 ? inputRef.current.selectionStart : 30, "ch"),
+      paddingTop: '10px'
+    });
+  };
+
+  var inputOnFocus = function inputOnFocus() {
+    onFocus && onFocus();
+    input.onFocus(new Event('focus'));
+
+    if (showSelectDropdown) {
+      setShowSelectDropdown(false);
+    }
+
+    setShowSuggestionList(true);
+  };
+
+  var suggestionListSearchChange = function suggestionListSearchChange(event) {
+    event.persist();
+    setDropdownList(function () {
+      return suggestionList.filter(function (option) {
+        return option.id.startsWith(event.target.value);
+      });
+    });
+  };
+
+  var toggleSelect = (0, _react.useCallback)(function () {
+    if (showSelectDropdown) {
+      setShowSelectDropdown(false);
+      input.onBlur(new Event('blur'));
+      onBlur && onBlur(input.value);
+    } else {
+      setShowSuggestionList(false);
+      setShowValidationRules(false);
+      setDropdownStyle({
+        left: '0',
+        paddingTop: '10px'
+      });
+      setShowSelectDropdown(true);
+      input.onFocus(new Event('focus'));
+      onFocus && onFocus(input.value);
+    }
+  }, [input, onBlur, onFocus, showSelectDropdown]);
+
+  var validateField = function validateField(value) {
+    var valueToValidate = value !== null && value !== void 0 ? value : '';
+    var validationError = null;
+
+    if (!(0, _lodash.isEmpty)(validationRules)) {
+      var _checkPatternsValidit = (0, _validation.checkPatternsValidity)(rules, valueToValidate),
+          _checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
+          newRules = _checkPatternsValidit2[0],
+          isValidField = _checkPatternsValidit2[1];
+
+      var invalidRules = newRules.filter(function (rule) {
+        return !rule.isValid;
+      });
+
+      if (!isValidField) {
+        validationError = invalidRules.map(function (rule) {
+          return {
+            name: rule.name,
+            label: rule.label
+          };
+        });
+      }
+    }
+
+    if ((0, _lodash.isEmpty)(validationError)) {
+      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;
+  };
+
+  var warningIconClick = function warningIconClick() {
+    setShowValidationRules(function (state) {
+      return !state;
+    });
+    setShowSelectDropdown(false);
+  };
+
+  var comboboxClassNames = (0, _classnames.default)(comboboxClassName, 'form-field-combobox', 'form-field', isInvalid && 'form-field-combobox_invalid');
+  var iconClassNames = (0, _classnames.default)(showSelectDropdown && 'form-field-combobox__icon_open', 'form-field-combobox__icon');
+  var selectClassNames = (0, _classnames.default)('form-field-combobox__select', 'form-field__control', showSelectDropdown && 'form-field-combobox__select_open', selectValue.id.length <= 5 && selectValue.id.length !== 0 && 'form-field-combobox__select_short');
+  var selectValueClassNames = (0, _classnames.default)(selectValue.className);
+  var dropdownClassNames = (0, _classnames.default)('form-field-combobox__dropdown', 'form-field-combobox__input-dropdown', showSuggestionList && dropdownList.length > 0 && 'form-field-combobox__input-dropdown_visible');
+  var wrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    name: name,
+    validate: validateField,
+    children: function children(_ref3) {
+      var input = _ref3.input,
+          meta = _ref3.meta;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: comboboxClassNames,
+        ref: comboboxRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: wrapperClassNames,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__icons",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_arrow.ReactComponent, {
+              className: iconClassNames,
+              onClick: toggleSelect
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: selectClassNames,
+            ref: selectRef,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "form-field-combobox__select-header",
+              onClick: toggleSelect,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: selectValueClassNames,
+                children: selectValue.id
+              }), selectValue.id.length === 0 && selectPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "form-field__label",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [selectPlaceholder, (meta.error || required) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "form-field__label-mandatory",
+                    children: " *"
+                  })]
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-field-combobox__select-body form-field-combobox__dropdown",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+                className: "form-field-combobox__list",
+                children: selectOptions.map(function (option) {
+                  var selectOptionClassNames = (0, _classnames.default)('form-field-combobox__list-option', option.className);
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                    className: selectOptionClassNames,
+                    onClick: function onClick() {
+                      return handleSelectOptionClick(option);
+                    },
+                    children: option.label
+                  }, option.id);
+                })
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            className: "form-field-combobox__input form-field__control",
+            disabled: selectValue.id.length === 0,
+            onChange: handleInputChange,
+            onFocus: inputOnFocus,
+            placeholder: inputPlaceholder,
+            ref: inputRef,
+            type: "text",
+            value: inputValue
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: dropdownClassNames,
+            style: _objectSpread({}, dropdownStyle),
+            children: [!hideSearchInput && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "form-field-combobox__search-wrapper",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                className: "form-field-combobox__search form-field__control",
+                onChange: suggestionListSearchChange,
+                onFocus: function onFocus() {
+                  return setSearchIsFocused(true);
+                },
+                placeholder: "Type to search",
+                type: "text"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_search.ReactComponent, {})]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+              className: "form-field-combobox__list",
+              children: searchIsFocused && dropdownList.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                className: "form-field-combobox__list-option",
+                children: "No data"
+              }, "no data") : dropdownList.map(function (value) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  className: "form-field-combobox__list-option",
+                  onClick: function onClick() {
+                    return handleSuggestionListOptionClick(value);
+                  },
+                  children: value.label
+                }, value.id);
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__icons",
+            children: isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: "form-field__warning",
+              onClick: warningIconClick,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {})
+            })
+          }), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_elements.OptionsMenu, {
+            show: showValidationRules,
+            ref: comboboxRef,
+            children: getValidationRules()
+          })]
+        })
+      });
+    }
+  });
+};
+
+FormCombobox.defaultProps = {
+  comboboxClassName: '',
+  density: 'normal',
+  disabled: false,
+  hideSearchInput: false,
+  inputDefaultValue: '',
+  inputPlaceholder: '',
+  maxSuggestedMatches: 1,
+  onBlur: null,
+  onFocus: null,
+  onChange: null,
+  required: false,
+  rules: [],
+  selectDefaultValue: null,
+  selectPlaceholder: '',
+  suggestionList: [],
+  validator: null,
+  withoutBorder: false
+};
+FormCombobox.propTypes = {
+  comboboxClassName: _propTypes.default.string,
+  density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
+  disabled: _propTypes.default.bool,
+  hideSearchInput: _propTypes.default.bool,
+  inputDefaultValue: _propTypes.default.string,
+  inputPlaceholder: _propTypes.default.string,
+  invalidText: _propTypes.default.string,
+  maxSuggestedMatches: _propTypes.default.number,
+  name: _propTypes.default.string.isRequired,
+  onBlur: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  required: _propTypes.default.bool,
+  rules: _propTypes.default.array,
+  selectDefaultValue: _propTypes.default.string,
+  selectOptions: _types.COMBOBOX_SELECT_OPTIONS.isRequired,
+  selectPlaceholder: _propTypes.default.string,
+  suggestionList: _types.COMBOBOX_SUGGESTION_LIST,
+  validator: _propTypes.default.func,
+  withoutBorder: _propTypes.default.bool
+};
+var _default = FormCombobox;
+exports.default = _default;