iguazio.dashboard-react-controls 0.0.7 → 0.0.8

package/dist/components/FormInput/FormInput.js

@@ -92,7 +92,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       required = _ref.required,
       suggestionList = _ref.suggestionList,
       tip = _ref.tip,
-      validationRules = _ref.validationRules,
+      rules = _ref.validationRules,
       validator = _ref.validator,
       withoutBorder = _ref.withoutBorder,
       inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -120,10 +120,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _useState8 = _slicedToArray(_useState7, 1),
       validationPattern = _useState8[0];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(rules),
       _useState10 = _slicedToArray(_useState9, 2),
-      showValidationRules = _useState10[0],
-      setShowValidationRules = _useState10[1];
+      validationRules = _useState10[0],
+      setValidationRules = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      showValidationRules = _useState12[0],
+      setShowValidationRules = _useState12[1];
 
   var wrapperRef = (0, _react.useRef)();
   (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
@@ -131,8 +136,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (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 formFieldClassNames = (0, _classnames.default)('form-field', className);
+  var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-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
@@ -155,8 +160,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [focused]);
 
-  var getValidationRules = function getValidationRules(rules) {
-    return rules.map(function (_ref3) {
+  var getValidationRules = function getValidationRules() {
+    return validationRules.map(function (_ref3) {
       var _ref3$isValid = _ref3.isValid,
           isValid = _ref3$isValid === void 0 ? false : _ref3$isValid,
           label = _ref3.label,
@@ -173,7 +178,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
     input.onBlur(event);
 
-    if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.suggestion-list'))) {
+    if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.form-field__suggestion-list'))) {
       setIsFocused(false);
       onBlur && onBlur(event);
     }
@@ -206,18 +211,39 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setShowValidationRules(!showValidationRules);
   };
 
+  (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]);
+
   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),
+    if (!(0, _lodash.isEmpty)(validationRules) && valueToValidate !== typedValue) {
+      var _checkPatternsValidit = (0, _validationService.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 = newRules;
+        validationError = invalidRules.map(function (rule) {
+          return {
+            name: rule.name,
+            label: rule.label
+          };
+        });
       }
 
       if (isValidField && showValidationRules || required && valueToValidate === '') {
@@ -261,7 +287,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           meta = _ref4.meta;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: ref,
-        className: "form-field",
+        className: formFieldClassNames,
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: labelClassNames,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -291,22 +317,24 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             })
           })]
         }), /*#__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: inputWrapperClassNames,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__control",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+              "data-testid": "input",
+              id: input.name,
+              ref: inputRef,
+              required: isInvalid || required
+            }, _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",
@@ -315,7 +343,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
                 warning: true
               }),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
-            }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            }), isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               className: "form-field__warning",
               onClick: toggleValidationRulesMenu,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {})
@@ -329,7 +357,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             })]
           })]
         }), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-          className: "suggestion-list",
+          className: "form-field__suggestion-list",
           children: suggestionList.map(function (item, index) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
               className: "suggestion-item",
@@ -344,10 +372,10 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               }
             }, "".concat(item).concat(index));
           })
-        }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
+        }), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
           show: showValidationRules,
-          parentElement: ref,
-          children: getValidationRules(meta.error)
+          ref: ref,
+          children: getValidationRules()
         })]
       });
     }

package/dist/components/FormInput/formInput.scss

@@ -3,30 +3,10 @@
 @import '../../scss/shadows';
 @import '../../scss/mixins';
 
-.form-field {
-  position: relative;
-  display: block;
-  width: 100%;
+@include formField;
 
+.form-field {
   &__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;
@@ -51,11 +31,11 @@
     }
   }
 
-  &__input {
-    padding-left: 16px;
-    padding-right: 30px;
-
-    @include fieldWrapper;
+  input {
+    border: 0;
+    color: inherit;
+    padding: 0;
+    width: 100%;
 
     &::placeholder {
       color: $spunPearl;
@@ -81,66 +61,13 @@
       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;
+      background: transparent;
       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 {
+  &__suggestion-list {
     position: absolute;
     top: 100%;
     left: 0;
@@ -162,8 +89,4 @@
       }
     }
   }
-
-  &__wrapper {
-    position: relative;
-  }
 }

package/dist/components/FormSelect/FormSelect.js

@@ -41,6 +41,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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."); }
@@ -71,33 +77,64 @@ var FormSelect = function FormSelect(_ref) {
       withSelectedIcon = _ref.withSelectedIcon;
 
   var _useField = (0, _reactFinalForm.useField)(name),
-      input = _useField.input;
-
-  var selectRef = (0, _react.useRef)();
+      input = _useField.input,
+      meta = _useField.meta;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      isConfirmDialogOpen = _useState2[0],
-      setConfirmDialogOpen = _useState2[1];
+      isInvalid = _useState2[0],
+      setIsInvalid = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setOpen = _useState4[1];
+      isConfirmDialogOpen = _useState4[0],
+      setConfirmDialogOpen = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      searchValue = _useState6[0],
-      setSearchValue = _useState6[1];
+      isOpen = _useState6[0],
+      setOpen = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      searchValue = _useState8[0],
+      setSearchValue = _useState8[1];
+
+  var selectRef = (0, _react.useRef)();
 
   var _ref2 = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect()) || {},
       dropdownWidth = _ref2.width;
 
-  var selectClassName = (0, _classnames.default)('form-field__select', "form-field__select-".concat(density), isOpen && 'form-field__select-active', withoutBorder && 'without-border', disabled && 'form-field__select-disabled');
+  var selectWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isOpen && 'form-field__wrapper-active', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var selectLabelClassName = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
   var selectedOption = options.find(function (option) {
     return option.id === 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]);
+  var openMenu = (0, _react.useCallback)(function () {
+    if (!isOpen) {
+      setOpen(true);
+      input.onFocus(new Event('focus'));
+    }
+  }, [input, isOpen]);
+  var closeMenu = (0, _react.useCallback)(function () {
+    if (isOpen) {
+      setOpen(false);
+      input.onBlur(new Event('blur'));
+    }
+  }, [input, isOpen]);
+  var clickHandler = (0, _react.useCallback)(function (event) {
+    if (selectRef.current !== event.target.closest('.form-field')) {
+      closeMenu();
+    }
+  }, [closeMenu]);
+  var handleScroll = (0, _react.useCallback)(function (event) {
+    if (!event.target.closest('.options-list__body')) {
+      closeMenu();
+    }
+  }, [closeMenu]);
   (0, _react.useEffect)(function () {
     if (isOpen) {
       window.addEventListener('scroll', handleScroll, true);
@@ -108,32 +145,24 @@ var FormSelect = function FormSelect(_ref) {
       window.removeEventListener('click', clickHandler);
       window.removeEventListener('scroll', handleScroll, true);
     };
-  }, [isOpen]);
-
-  var clickHandler = function clickHandler(event) {
-    if (selectRef.current !== event.target.closest('.form-field')) {
-      setOpen(false);
-    }
-  };
-
-  var handleScroll = function handleScroll(event) {
-    if (!event.target.closest('.select__body')) {
-      setOpen(false);
-    }
-  };
+  }, [clickHandler, handleScroll, isOpen]);
 
   var toggleOpen = function toggleOpen() {
-    !disabled && setOpen(!isOpen);
+    if (isOpen) {
+      closeMenu();
+    } else {
+      !disabled && openMenu();
+    }
   };
 
   var handleCloseSelectBody = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
 
-    if (!event.target.classList.contains('disabled') && !event.target.closest('.select__search')) {
-      setOpen(false);
+    if (!event.target.classList.contains('disabled') && !event.target.closest('.options-list__search')) {
+      closeMenu();
       setSearchValue('');
     }
-  }, []);
+  }, [closeMenu]);
 
   var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option) {
     if (selectedOption !== input.value) {
@@ -149,7 +178,6 @@ var FormSelect = function FormSelect(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
-    component: "select",
     validate: required,
     children: function children(_ref3) {
       var input = _ref3.input,
@@ -170,18 +198,21 @@ var FormSelect = function FormSelect(_ref) {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           "data-testid": "select-header",
-          className: "form-field__wrapper",
-          children: [!hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            "data-testid": "selected-option",
-            className: selectClassName,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "form-field__select-value",
-              children: input.value && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)
-            }), (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.subLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "data-testid": "select-subLabel",
-              className: "sub-label",
-              children: selectedOption.subLabel
-            })]
+          className: selectWrapperClassNames,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field__control",
+            children: !hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              "data-testid": "selected-option",
+              className: "form-field__select",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "form-field__select-value",
+                children: input.value && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)
+              }), (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.subLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "data-testid": "select-subLabel",
+                className: "form-field__select-sub_label",
+                children: selectedOption.subLabel
+              })]
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "form-field__icons",
             children: [input.value && selectedItemAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -204,8 +235,10 @@ var FormSelect = function FormSelect(_ref) {
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: selectedItemAction.icon
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, {
-              className: "form-field__caret"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, {
+                className: "form-field__caret"
+              })
             })]
           })]
         }), isConfirmDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfirmDialog.default, {
@@ -230,7 +263,7 @@ var FormSelect = function FormSelect(_ref) {
           header: selectedItemAction.confirm.title,
           message: selectedItemAction.confirm.message
         }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
-          className: "select__options-list",
+          className: "form-field__select__options-list",
           customPosition: {
             element: selectRef,
             position: 'bottom-right'
@@ -240,10 +273,10 @@ var FormSelect = function FormSelect(_ref) {
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             "data-testid": "select-body",
-            className: "select__body",
+            className: "options-list__body",
             onClick: handleCloseSelectBody,
             children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "select__search",
+              className: "options-list__search",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                 type: "text",
                 placeholder: "Search...",
@@ -266,7 +299,9 @@ var FormSelect = function FormSelect(_ref) {
               }, option.id);
             })]
           })
-        })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, input), {}, {
+          type: "hidden"
+        }))]
       });
     }
   });
@@ -283,7 +318,7 @@ FormSelect.defaultProps = {
   search: false,
   selectType: '',
   withoutBorder: false,
-  withSelectedIcon: false
+  withSelectedIcon: true
 };
 FormSelect.propTypes = {
   className: _propTypes.default.string,

package/dist/components/FormSelect/formSelect.scss

@@ -1,303 +1,93 @@
 @import '../../scss/mixins';
 @import '../../scss/colors';
-@import '../../scss/borders';
 @import '../../scss/shadows';
 
-.form-field {
-  position: relative;
-  display: block;
-  width: 100%;
-
-  &__label {
-    margin-bottom: 5px;
-    color: $topaz;
-    font-size: 12px;
-    text-transform: capitalize;
-    background-color: transparent;
-
-    &-disabled {
-      color: $spunPearl;
-    }
-  }
-
-  &__select {
-    padding-left: 16px;
-    padding-right: 30px;
-    cursor: pointer;
+@include formField;
 
-    @include fieldWrapper;
-
-    &-active:not(.without-border) {
+.form-field {
+  &__wrapper {
+    &-active {
       background: $alabaster;
     }
 
-    &-disabled {
-      color: $spunPearl;
-      cursor: not-allowed;
+    .form-field__caret {
+      cursor: pointer;
     }
 
-    &.without {
-      &-border {
-        border-color: transparent;
-
-        .form-field__caret {
-          display: none;
-        }
+    &-disabled {
+      .form-field__caret {
+        cursor: not-allowed;
 
-        &:hover {
-          .form-field__caret {
-            display: block;
-          }
+        path {
+          fill: $spunPearl;
         }
       }
-
-      &-label {
-        padding-left: 16px;
-      }
     }
 
-    &-dense {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
-
-    &-normal {
-      padding-top: 14px;
-      padding-bottom: 14px;
-    }
+    &.without-border {
+      .form-field__caret {
+        display: none;
+      }
 
-    &-medium {
-      padding-top: 16px;
-      padding-bottom: 16px;
+      &:hover {
+        .form-field__caret {
+          display: block;
+        }
+      }
     }
+  }
 
-    &-chunky {
-      padding-top: 18px;
-      padding-bottom: 18px;
-    }
+  &__select {
+    width: 100%;
 
     &-value {
       display: block;
-      min-height: 18px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
-  }
-}
-
-// .select {
-//   position: relative;
-//   display: flex;
-//   flex-flow: column;
-//   flex: 1 0;
-//   cursor: pointer;
-
-//   @include fieldWrapper;
-
-//   &__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;
-//       }
-//     }
-//   }
-
-//   &_active:not(.without-border) {
-//     background: $alabaster;
-//   }
 
-//   &__caret {
-//     position: absolute;
-//     top: 50%;
-//     right: 10px;
-//     transform: translate(0%, -50%);
-//   }
-
-//   &.without {
-//     &-border {
-//       border: none;
-
-//       .select__caret {
-//         display: none;
-//       }
-
-//       &:hover {
-//         .select__caret {
-//           display: block;
-//         }
-//       }
-//     }
-
-//     &-label {
-//       padding-left: 16px;
-//     }
-//   }
-
-//   &__header {
-//     position: relative;
-//     display: flex;
-//     align-items: center;
-//     width: 100%;
-//     height: 100%;
-//   }
-
-//   &__value {
-//     min-width: 96px;
-//     min-height: 1em;
-//     padding-right: 50px;
-//     overflow: hidden;
-//     color: $mulledWine;
-//     white-space: nowrap;
-//     text-overflow: ellipsis;
-
-//     &_floating {
-//       position: relative;
-//       top: 6px;
-//       left: 16px;
-//     }
-//   }
-
-//   &__label {
-//     top: 15px;
-//     left: 0;
-//     padding: 0 5px 0 16px;
-//     color: $topaz;
-//     font-size: 15px;
-//     text-transform: capitalize;
-//     transition: 200ms ease;
-
-//     &_floating {
-//       position: absolute;
-//       top: 0;
-//       left: 0;
-//       padding-top: 9px;
-//       font-weight: 700;
-//       font-size: 10px;
-//       line-height: 12px;
-//       letter-spacing: 0.5px;
-//       transition: 200ms ease;
-//     }
-
-//     &_top {
-//       position: absolute;
-//       top: -20px;
-//       left: 0;
-//       padding: 0;
-//       font-weight: bold;
-//       font-size: 12px;
-//       line-height: 15px;
-
-//       & + .select__value {
-//         padding-left: 15px;
-//       }
-//     }
-//   }
-
-//   &__options-list {
-//     .pop-up-dialog {
-//       width: 100%;
-//       padding: 0;
-
-//       &__header {
-//         display: none;
-//       }
-//     }
-//   }
-
-//   &.disabled {
-//     cursor: not-allowed;
-
-//     .select__label,
-//     .select__value {
-//       color: $spunPearl;
-//     }
-//   }
-
-//   .sub-label {
-//     margin-left: 5px;
-//     overflow: hidden;
-//     color: $topaz;
-//     white-space: nowrap;
-//     text-overflow: ellipsis;
-//   }
-
-//   &__body {
-//     width: 100%;
-//     max-height: 250px;
-//     overflow-y: auto;
-//     color: $mulledWineTwo;
-//     background-color: $white;
-//     border: $primaryBorder;
-//     border-radius: 2px;
-//     box-shadow: $filterShadow;
-//   }
-
-//   &__search {
-//     width: 100%;
-
-//     input {
-//       width: 100%;
-//       padding: 10px;
-//       border: none;
-//       border-bottom: $primaryBorder;
-//     }
-//   }
-
-//   .actions {
-//     position: absolute;
-//     right: 25px;
-//   }
-
-//   .disabled {
-//     color: $spunPearl;
-//     cursor: default;
-//     user-select: none;
-
-//     &:hover {
-//       background-color: $white;
-//     }
-//   }
-
-//   .pop-up-dialog__overlay {
-//     top: 100%;
-//     right: calc(100% + 10px);
-//   }
-
-//   &-dense {
-//     height: 40px;
-
-//     .select__label_floating {
-//       padding-top: 6px;
-//     }
-//   }
-
-//   &-normal {
-//     height: 48px;
-//   }
+    &-sub_label {
+      display: block;
+      margin-left: 5px;
+      overflow: hidden;
+      color: $topaz;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
-//   &-medium {
-//     height: 52px;
+    &__options-list {
+      .pop-up-dialog {
+        width: 100%;
+        padding: 0;
 
-//     .select__label_floating {
-//       padding-top: 11px;
-//     }
-//   }
+        &__header {
+          display: none;
+        }
+      }
+      .options-list {
+        &__body {
+          width: 100%;
+          max-height: 250px;
+          overflow-y: auto;
+          color: $mulledWineTwo;
+          background-color: $white;
+          border: $primaryBorder;
+          border-radius: 2px;
+          box-shadow: $filterShadow;
+        }
 
-//   &-chunky {
-//     height: 56px;
+        &__search {
+          width: 100%;
 
-//     .select__label_floating {
-//       padding-top: 13px;
-//     }
-//   }
-// }
+          input {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-bottom: $primaryBorder;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/Wizard/Wizard.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactFinalForm = require("react-final-form");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
@@ -61,7 +59,7 @@ var Wizard = function Wizard(_ref) {
   var children = _ref.children,
       className = _ref.className,
       confirmClose = _ref.confirmClose,
-      initialValues = _ref.initialValues,
+      FormState = _ref.FormState,
       isWizardOpen = _ref.isWizardOpen,
       onWizardResolve = _ref.onWizardResolve,
       onWizardSubmit = _ref.onWizardSubmit,
@@ -115,7 +113,7 @@ var Wizard = function Wizard(_ref) {
     return setActiveStepNumber(idx);
   };
 
-  var _handleOnClose = function handleOnClose(FormState) {
+  var handleOnClose = function handleOnClose() {
     if (confirmClose && FormState && FormState.dirty) {
       (0, _common.openPopUp)(_ConfirmDialog.default, {
         cancelButton: {
@@ -135,15 +133,19 @@ var Wizard = function Wizard(_ref) {
     }
   };
 
-  var handleSubmit = function handleSubmit(values) {
-    if (isLastStep) {
-      onWizardSubmit(values);
-    } else {
-      goToNextStep();
+  var handleSubmit = function handleSubmit() {
+    FormState.handleSubmit();
+
+    if (FormState.valid) {
+      if (isLastStep) {
+        onWizardSubmit(FormState.values);
+      } else {
+        goToNextStep();
+      }
     }
   };
 
-  var getDefaultActions = function getDefaultActions(FormState) {
+  var getDefaultActions = function getDefaultActions() {
     if (hasSteps) {
       return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         onClick: goToPreviousStep,
@@ -151,22 +153,20 @@ var Wizard = function Wizard(_ref) {
         label: "Back",
         type: "button"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: FormState.handleSubmit,
-        disabled: FormState.submitting,
+        onClick: handleSubmit,
+        disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
         label: isLastStep ? submitButtonLabel : 'Next',
         type: "button",
         variant: _constants.SECONDARY_BUTTON
       })];
     } else {
       return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: function onClick() {
-          return _handleOnClose(FormState);
-        },
+        onClick: handleOnClose,
         label: "Cancel",
         type: "button"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: FormState.handleSubmit,
-        disabled: FormState.submitting,
+        onClick: handleSubmit,
+        disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
         label: submitButtonLabel,
         type: "button",
         variant: _constants.SECONDARY_BUTTON
@@ -174,7 +174,7 @@ var Wizard = function Wizard(_ref) {
     }
   };
 
-  var renderModalActions = function renderModalActions(FormState) {
+  var renderModalActions = function renderModalActions() {
     var _stepsConfig$activeSt;
 
     if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) {
@@ -182,51 +182,37 @@ var Wizard = function Wizard(_ref) {
         FormState: FormState,
         goToNextStep: goToNextStep,
         goToPreviousStep: goToPreviousStep,
-        handleOnClose: function handleOnClose() {
-          return _handleOnClose(FormState);
-        }
+        handleOnClose: handleOnClose,
+        handleSubmit: handleSubmit
       }).map(function (action) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action));
       });
     } else {
-      return getDefaultActions(FormState);
+      return getDefaultActions();
     }
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
-      initialValues: initialValues,
-      onSubmit: handleSubmit,
-      children: function children(FormState) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-          actions: renderModalActions(FormState),
-          className: wizardClasses,
-          onClose: function onClose() {
-            return _handleOnClose(FormState);
-          },
-          show: isWizardOpen,
-          size: size,
-          title: title,
-          children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
-            activeStepNumber: activeStepNumber,
-            jumpToStep: jumpToStep,
-            steps: stepsMenu
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "wizard-form__content",
-            children: [activeStepTemplate, /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
-              children: JSON.stringify(FormState, null, 2)
-            })]
-          })]
-        });
-      }
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+    actions: renderModalActions(),
+    className: wizardClasses,
+    onClose: handleOnClose,
+    show: isWizardOpen,
+    size: size,
+    title: title,
+    children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
+      activeStepNumber: activeStepNumber,
+      jumpToStep: jumpToStep,
+      steps: stepsMenu
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "wizard-form__content",
+      children: activeStepTemplate
+    })]
   });
 };
 
 Wizard.defaultProps = {
   className: '',
   confirmClose: false,
-  initialValues: {},
   size: _constants.MODAL_MD,
   stepsConfig: [],
   submitButtonLabel: 'Submit'
@@ -234,7 +220,7 @@ Wizard.defaultProps = {
 Wizard.propsTypes = {
   className: _propTypes.default.string,
   confirmClose: _propTypes.default.bool,
-  initialValues: _propTypes.default.object,
+  FormState: _propTypes.default.object.isRequired,
   isOpen: _propTypes.default.bool.isRequired,
   onResolve: _propTypes.default.func.isRequired,
   onSubmit: _propTypes.default.func.isRequired,

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -19,13 +19,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var OptionsMenu = function OptionsMenu(_ref) {
+var OptionsMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      parentElement = _ref.parentElement,
       show = _ref.show,
       timeout = _ref.timeout;
 
-  var _ref2 = parentElement.current ? parentElement.current.getBoundingClientRect() : {},
+  var _ref2 = ref.current ? ref.current.getBoundingClientRect() : {},
       dropdownWidth = _ref2.width;
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
@@ -36,7 +35,7 @@ var OptionsMenu = function OptionsMenu(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, {
       className: "options-menu",
       customPosition: {
-        element: parentElement,
+        element: ref,
         position: 'bottom-right'
       },
       style: {
@@ -48,7 +47,7 @@ var OptionsMenu = function OptionsMenu(_ref) {
       })
     })
   });
-};
+});
 
 OptionsMenu.defaultProps = {
   children: [],

package/dist/elements/SelectOption/SelectOption.js

@@ -81,7 +81,7 @@ var SelectOption = function SelectOption(_ref) {
 SelectOption.defaultProps = {
   onClick: function onClick() {},
   selectType: '',
-  withSelectedIcon: false
+  withSelectedIcon: true
 };
 SelectOption.propTypes = {
   disabled: _propTypes.default.bool,

package/dist/elements/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OptionsMenu", {
+  enumerable: true,
+  get: function get() {
+    return _OptionsMenu.default;
+  }
+});
+Object.defineProperty(exports, "SelectOption", {
+  enumerable: true,
+  get: function get() {
+    return _SelectOption.default;
+  }
+});
+Object.defineProperty(exports, "ValidationTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ValidationTemplate.default;
+  }
+});
+
+var _OptionsMenu = _interopRequireDefault(require("./OptionsMenu/OptionsMenu"));
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption/SelectOption"));
+
+var _ValidationTemplate = _interopRequireDefault(require("./ValidationTemplate/ValidationTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDetectOutsideClick", {
+  enumerable: true,
+  get: function get() {
+    return _useDetectOutsideClick.useDetectOutsideClick;
+  }
+});
+
+var _useDetectOutsideClick = require("./useDetectOutsideClick");

package/dist/index.js

@@ -5,12 +5,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.types = exports.hooks = exports.constants = exports.components = void 0;
+exports.types = exports.hooks = exports.elements = exports.constants = exports.components = void 0;
 
 var components = _interopRequireWildcard(require("./components"));
 
 exports.components = components;
 
+var constants = _interopRequireWildcard(require("./constants"));
+
+exports.constants = constants;
+
+var elements = _interopRequireWildcard(require("./elements"));
+
+exports.elements = elements;
+
 var hooks = _interopRequireWildcard(require("./hooks"));
 
 exports.hooks = hooks;
@@ -19,10 +27,6 @@ var types = _interopRequireWildcard(require("./types"));
 
 exports.types = types;
 
-var constants = _interopRequireWildcard(require("./constants"));
-
-exports.constants = constants;
-
 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; }

package/dist/scss/mixins.scss

@@ -983,6 +983,10 @@
 }
 
 @mixin fieldWrapper {
+  display: flex;
+  flex: 1;
+  flex-flow: row nowrap;
+  align-items: center;
   position: relative;
   width: 100%;
   color: $primary;
@@ -990,3 +994,93 @@
   border: $primaryBorder;
   border-radius: 4px;
 }
+
+@mixin formField {
+  .form-field {
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    width: 100%;
+
+    &__label {
+      margin-bottom: 5px;
+      color: $topaz;
+      font-size: 12px;
+      text-align: left;
+      text-transform: capitalize;
+      background-color: transparent;
+
+      &-mandatory {
+        color: $amaranth;
+      }
+
+      &-disabled {
+        color: $spunPearl;
+
+        .form-field__label-mandatory {
+          color: $spunPearl;
+        }
+      }
+    }
+
+    &__wrapper {
+      @include fieldWrapper;
+
+      &-disabled {
+        color: $spunPearl;
+        cursor: not-allowed;
+      }
+
+      &-invalid {
+        border: $errorBorder;
+      }
+
+      &.without-border {
+        border-color: transparent;
+      }
+
+      &-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;
+      }
+    }
+
+    &__control {
+      position: relative;
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      padding: 0 8px 0 16px;
+    }
+
+    &__icons {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      margin-right: 4px;
+      min-height: 25px;
+
+      & > * {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "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",
@@ -26,8 +26,8 @@
         "react-dom": "*",
         "react-modal-promise": "*",
         "react-transition-group": "*",
-        "final-form": "^4.20.7",
-        "react-final-form": "^6.5.9"
+        "final-form": "*",
+        "react-final-form": "*"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.6",