iguazio.dashboard-react-controls 0.0.12 → 0.0.15

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;

package/dist/components/FormCombobox/formCombobox.scss

@@ -0,0 +1,102 @@
+@import '../../scss/colors';
+@import '../../scss/borders';
+@import '../../scss/shadows';
+@import '../../scss/mixins';
+
+.form-field.form-field-combobox {
+  width: 100%;
+
+  .form-field {
+    @include inputSelectField;
+
+    &__icons {
+      .form-field-combobox__icon {
+        cursor: pointer;
+        padding: 0;
+
+        &_open {
+          transform: rotate(90deg);
+          transform-origin: center center;
+          transition: transform 200ms linear;
+        }
+      }
+    }
+
+    &__label {
+      margin-bottom: 0;
+      font-size: 15px;
+    }
+
+    &-combobox {
+      &__select {
+        flex: unset;
+        padding: 0;
+        max-width: 110px;
+        overflow: visible;
+
+        &-header {
+          display: flex;
+          align-items: center;
+        }
+
+        &-body {
+          top: 35px;
+          max-width: 220px;
+        }
+
+        &_open {
+          .form-field-combobox__select-body {
+            display: block;
+          }
+        }
+      }
+
+      &__dropdown {
+        position: absolute;
+        z-index: 5;
+        display: none;
+        padding: 0;
+        background-color: $white;
+        box-shadow: $previewBoxShadow;
+      }
+
+      &__list {
+        margin: 0;
+        padding: 0;
+        min-width: 140px;
+        list-style-type: none;
+
+        &-option {
+          padding: 8px 15px;
+          word-break: break-all;
+          cursor: pointer;
+
+          &:hover {
+            background-color: $alabaster;
+          }
+        }
+      }
+
+      &__input {
+        padding: 0;
+
+        &-dropdown {
+          top: 40px;
+          max-width: 350px;
+
+          &_visible {
+            display: block;
+          }
+        }
+      }
+      &__search {
+        padding-left: 8px;
+
+        &-wrapper {
+          display: flex;
+          padding: 5px;
+        }
+      }
+    }
+  }
+}

package/dist/components/FormInput/FormInput.js

@@ -212,7 +212,9 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var toggleValidationRulesMenu = function toggleValidationRulesMenu() {
     inputRef.current.focus();
-    setShowValidationRules(!showValidationRules);
+    setShowValidationRules(function (state) {
+      return !state;
+    });
   };
 
   (0, _react.useEffect)(function () {
@@ -229,7 +231,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var validateField = function validateField(value) {
     var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
-    if (!valueToValidate && !required) return;
+    if (!valueToValidate && !required || disabled) return;
     var validationError = null;
 
     if (!(0, _lodash.isEmpty)(validationRules)) {

package/dist/components/Modal/Modal.js

@@ -57,16 +57,16 @@ var Modal = function Modal(_ref) {
       show = _ref.show,
       title = _ref.title;
 
-  var _useState = (0, _react.useState)(location),
+  var _useState = (0, _react.useState)(location.pathname),
       _useState2 = _slicedToArray(_useState, 2),
       currentLocation = _useState2[0],
       setCurrentLocation = _useState2[1];
 
   var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
   (0, _react.useEffect)(function () {
-    setCurrentLocation(location);
+    setCurrentLocation(location.pathname);
     return function () {
-      if (location !== currentLocation) {
+      if (location.pathname !== currentLocation) {
         onClose();
       }
     };
@@ -128,7 +128,7 @@ Modal.defaultProps = {
 Modal.propTypes = {
   actions: _propTypes.default.array,
   children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
-  location: _propTypes.default.string.isRequired,
+  location: _propTypes.default.object.isRequired,
   onClose: _propTypes.default.func.isRequired,
   show: _propTypes.default.bool.isRequired,
   size: _types.MODAL_SIZES,

package/dist/components/Modal/Modal.scss

@@ -98,13 +98,13 @@
     &-enter {
       opacity: 0;
       transform: translate(-50%, calc(100vh));
-      transition: all 0.3s ease-in-out;
     }
 
     &-enter-active,
     &-enter-done {
       opacity: 1;
       transform: translate(-50%, -50%);
+      transition: all 0.3s ease-in-out;
     }
 
     &-exit {

package/dist/components/Wizard/Wizard.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
-var _ConfirmDialog = _interopRequireDefault(require("../ConfirmDialog/ConfirmDialog"));
-
 var _Modal = _interopRequireDefault(require("../Modal/Modal"));
 
 var _WizardSteps = _interopRequireDefault(require("./WizardSteps/WizardSteps"));
@@ -25,8 +23,6 @@ var _constants = require("../../constants");
 
 var _types = require("../../types");
 
-var _common = require("../../utils/common.util");
-
 require("./Wizard.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -108,26 +104,6 @@ var Wizard = function Wizard(_ref) {
     return setActiveStepNumber(idx);
   };
 
-  var handleOnClose = function handleOnClose() {
-    if (formState && formState.dirty) {
-      (0, _common.openPopUp)(_ConfirmDialog.default, {
-        cancelButton: {
-          label: 'Cancel',
-          variant: _constants.TERTIARY_BUTTON
-        },
-        confirmButton: {
-          handler: onWizardResolve,
-          label: 'OK',
-          variant: _constants.SECONDARY_BUTTON
-        },
-        header: 'Are you sure?',
-        message: 'All changes will be lost'
-      });
-    } else {
-      onWizardResolve();
-    }
-  };
-
   var handleSubmit = function handleSubmit() {
     formState.handleSubmit();
 
@@ -163,7 +139,7 @@ var Wizard = function Wizard(_ref) {
         formState: formState,
         goToNextStep: goToNextStep,
         goToPreviousStep: goToPreviousStep,
-        handleOnClose: handleOnClose,
+        onWizardResolve: onWizardResolve,
         handleSubmit: handleSubmit
       }).map(function (action) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action));
@@ -176,7 +152,7 @@ var Wizard = function Wizard(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
     actions: renderModalActions(),
     className: wizardClasses,
-    onClose: handleOnClose,
+    onClose: onWizardResolve,
     location: location,
     show: isWizardOpen,
     size: size,

package/dist/components/Wizard/Wizard.scss

@@ -11,5 +11,6 @@
     height: 100%;
     width: 100%;
     padding-right: 2rem;
+    padding-left: 1rem;
   }
 }

package/dist/components/Wizard/WizardSteps/WizardSteps.scss

@@ -5,7 +5,7 @@
 .wizard-steps {
   background-color: $white;
   min-width: 260px;
-  margin-right: 2rem;
+  margin-right: 1rem;
 
   &__indicator {
     display: inline-flex;

package/dist/components/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "FormCheckBox", {
     return _FormCheckBox.default;
   }
 });
+Object.defineProperty(exports, "FormCombobox", {
+  enumerable: true,
+  get: function get() {
+    return _FormCombobox.default;
+  }
+});
 Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function get() {
@@ -124,4 +130,6 @@ var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 
 var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));
 
+var _FormCombobox = _interopRequireDefault(require("./FormCombobox/FormCombobox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/scss/mixins.scss

@@ -1041,27 +1041,19 @@
     }
 
     &-dense {
-      .form-field__control > *:first-child {
-        height: $fieldDense;
-      }
+      height: $fieldDense;
     }
 
     &-normal {
-      .form-field__control > *:first-child {
-        height: $fieldNormal;
-      }
+      height: $fieldNormal;
     }
 
     &-medium {
-      .form-field__control > *:first-child {
-        height: $fieldMedium;
-      }
+      height: $fieldMedium;
     }
 
     &-chunky {
-      .form-field__control > *:first-child {
-        height: $fieldChunky;
-      }
+      height: $fieldChunky;
     }
   }
 
@@ -1131,8 +1123,16 @@
 
   &:focus:not(:disabled),
   &:active:not(:disabled) {
-    outline: 1px solid #b1bcf3;
-    outline-offset: 2px;
+    animation: pulse-animation 0.5s ease-out;
+  }
+
+  @keyframes pulse-animation {
+    20% {
+      box-shadow: 0 0 0 0 rgba($cornflowerBlue, 0.5);
+    }
+    100% {
+      box-shadow: 0 0 0 6px rgba($cornflowerBlue, 0);
+    }
   }
 
   &:hover {

package/dist/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIZARD_STEPS_CONFIG = exports.SELECT_OPTIONS = exports.SELECT_OPTION = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.INPUT_VALIDATION_RULES = exports.INPUT_LINK = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.BUTTON_VARIANTS = void 0;
+exports.WIZARD_STEPS_CONFIG = exports.SELECT_OPTIONS = exports.SELECT_OPTION = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.INPUT_VALIDATION_RULES = exports.INPUT_LINK = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.COMBOBOX_VALIDATION_RULES = exports.COMBOBOX_SUGGESTION_LIST = exports.COMBOBOX_SELECT_OPTIONS = exports.BUTTON_VARIANTS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -80,4 +80,28 @@ var INPUT_VALIDATION_RULES = _propTypes.default.arrayOf(_propTypes.default.shape
   isValid: _propTypes.default.bool
 }));
 
-exports.INPUT_VALIDATION_RULES = INPUT_VALIDATION_RULES;
+exports.INPUT_VALIDATION_RULES = INPUT_VALIDATION_RULES;
+
+var COMBOBOX_SUGGESTION_LIST = _propTypes.default.arrayOf(_propTypes.default.shape({
+  customDelimiter: _propTypes.default.string,
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired
+}));
+
+exports.COMBOBOX_SUGGESTION_LIST = COMBOBOX_SUGGESTION_LIST;
+
+var COMBOBOX_VALIDATION_RULES = _propTypes.default.arrayOf(_propTypes.default.shape({
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  isValid: _propTypes.default.bool
+}));
+
+exports.COMBOBOX_VALIDATION_RULES = COMBOBOX_VALIDATION_RULES;
+
+var COMBOBOX_SELECT_OPTIONS = _propTypes.default.arrayOf(_propTypes.default.shape({
+  className: _propTypes.default.string,
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired
+}));
+
+exports.COMBOBOX_SELECT_OPTIONS = COMBOBOX_SELECT_OPTIONS;

package/dist/utils/validation.util.js

@@ -246,7 +246,8 @@ var validationRules = {
     }), generateRule.required()],
     tag: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
       max: 56
-    })]
+    })],
+    combobox: [generateRule.required()]
   },
   project: {
     name: [generateRule.validCharacters('a-z 0-9 -'), generateRule.beginWith('a-z'), generateRule.endWith('a-z 0-9'), generateRule.length({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "0.0.12",
+    "version": "0.0.15",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",