iguazio.dashboard-react-controls 0.0.27 → 0.0.29

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -64,7 +64,7 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
 
   var handleConfirmDialog = function handleConfirmDialog(event) {
     onResolve && onResolve();
-    confirmButton.handler(event);
+    confirmButton.handler && confirmButton.handler(event);
   };
 
   return isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {

package/dist/components/FormChipCell/FormChip/FormChip.js

@@ -40,7 +40,7 @@ var FormChip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       handleRemoveChip = _ref.handleRemoveChip,
       handleToEditMode = _ref.handleToEditMode,
       isDeleteMode = _ref.isDeleteMode,
-      isEditMode = _ref.isEditMode,
+      isEditable = _ref.isEditable,
       keyName = _ref.keyName,
       meta = _ref.meta,
       setChipsSizes = _ref.setChipsSizes,
@@ -69,7 +69,7 @@ var FormChip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "input-label-key",
       editConfig: editConfig,
       handleRemoveChip: handleRemoveChip,
-      isEditMode: isEditMode,
+      isEditable: isEditable,
       keyName: keyName,
       meta: meta,
       onChange: handleEditChip,
@@ -91,7 +91,7 @@ FormChip.defaultProps = {
     font: 'purple'
   },
   isDeleteMode: false,
-  isEditMode: false,
+  isEditable: false,
   keyName: '',
   validationRules: {},
   valueName: ''
@@ -105,7 +105,7 @@ FormChip.propTypes = {
   handleRemoveChip: _propTypes.default.func.isRequired,
   handleToEditMode: _propTypes.default.func.isRequired,
   isDeleteMode: _propTypes.default.bool,
-  isEditMode: _propTypes.default.bool,
+  isEditable: _propTypes.default.bool,
   keyName: _propTypes.default.string,
   meta: _propTypes.default.object.isRequired,
   setChipsSizes: _propTypes.default.func.isRequired,

package/dist/components/FormChipCell/FormChipCell.js

@@ -60,7 +60,7 @@ var FormChipCell = function FormChipCell(_ref) {
       delimiter = _ref.delimiter,
       formState = _ref.formState,
       initialValues = _ref.initialValues,
-      isEditMode = _ref.isEditMode,
+      isEditable = _ref.isEditable,
       label = _ref.label,
       name = _ref.name,
       onClick = _ref.onClick,
@@ -103,20 +103,20 @@ var FormChipCell = function FormChipCell(_ref) {
   var chipsCellRef = (0, _react.useRef)();
   var chipsWrapperRef = (0, _react.useRef)();
   var handleShowElements = (0, _react.useCallback)(function () {
-    if (!isEditMode || isEditMode && visibleChipsMaxLength) {
+    if (!isEditable || isEditable && visibleChipsMaxLength) {
       setShowHiddenChips(function (state) {
         return !state;
       });
     }
-  }, [isEditMode, visibleChipsMaxLength]);
+  }, [isEditable, visibleChipsMaxLength]);
   var chips = (0, _react.useMemo)(function () {
-    return isEditMode || visibleChipsMaxLength === 'all' ? {
+    return isEditable || visibleChipsMaxLength === 'all' ? {
       visibleChips: (0, _lodash.get)(formState.values, name),
       hiddenChips: []
     } : (0, _generateChipsList.generateChipsList)((0, _lodash.get)(formState.values, name), visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount);
-  }, [visibleChipsMaxLength, isEditMode, visibleChipsCount, formState.values, name]);
+  }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name]);
   var handleResize = (0, _react.useCallback)(function () {
-    if (!isEditMode && !(0, _common.isEveryObjectValueEmpty)(chipsSizes)) {
+    if (!isEditable && !(0, _common.isEveryObjectValueEmpty)(chipsSizes)) {
       var _chipsCellRef$current;
 
       var parentSize = (_chipsCellRef$current = chipsCellRef.current) === null || _chipsCellRef$current === void 0 ? void 0 : _chipsCellRef$current.getBoundingClientRect().width;
@@ -140,18 +140,18 @@ var FormChipCell = function FormChipCell(_ref) {
       setVisibleChipsCount(chipIndex);
       setShowChips(true);
     }
-  }, [chipsSizes, isEditMode]);
+  }, [chipsSizes, isEditable]);
   (0, _react.useEffect)(function () {
     handleResize();
   }, [handleResize, showChips]);
   (0, _react.useEffect)(function () {
-    if (!isEditMode) {
+    if (!isEditable) {
       window.addEventListener('resize', handleResize);
       return function () {
         return window.removeEventListener('resize', handleResize);
       };
     }
-  }, [handleResize, isEditMode]);
+  }, [handleResize, isEditable]);
   (0, _react.useEffect)(function () {
     window.addEventListener('mainResize', handleResize);
     return function () {
@@ -262,7 +262,7 @@ var FormChipCell = function FormChipCell(_ref) {
     event && event.preventDefault();
   }, [editConfig.chipIndex, handleRemoveChip, checkChipsList, formState.values, name]);
   var handleToEditMode = (0, _react.useCallback)(function (event, index) {
-    if (isEditMode) {
+    if (isEditable) {
       event.stopPropagation();
       setEditConfig(function (preState) {
         return _objectSpread(_objectSpread({}, preState), {}, {
@@ -275,7 +275,7 @@ var FormChipCell = function FormChipCell(_ref) {
     }
 
     onClick && onClick();
-  }, [isEditMode, onClick]);
+  }, [isEditable, onClick]);
 
   var validateFields = function validateFields(fieldsArray) {
     var uniquenessValidator = function uniquenessValidator(newValue, idx) {
@@ -378,7 +378,7 @@ var FormChipCell = function FormChipCell(_ref) {
         handleRemoveChip: handleRemoveChip,
         handleShowElements: handleShowElements,
         handleToEditMode: handleToEditMode,
-        isEditMode: isEditMode,
+        isEditable: isEditable,
         name: name,
         ref: {
           chipsCellRef: chipsCellRef,
@@ -406,7 +406,7 @@ FormChipCell.defaultProps = {
     font: 'purple'
   },
   delimiter: null,
-  isEditMode: false,
+  isEditable: false,
   label: null,
   onClick: function onClick() {},
   shortChips: false,
@@ -419,7 +419,7 @@ FormChipCell.propTypes = {
   delimiter: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   formState: _propTypes.default.shape({}).isRequired,
   initialValues: _propTypes.default.object.isRequired,
-  isEditMode: _propTypes.default.bool,
+  isEditable: _propTypes.default.bool,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   onClick: _propTypes.default.func,

package/dist/components/FormChipCell/FormChipCellView.js

@@ -58,7 +58,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
       _handleRemoveChip = _ref.handleRemoveChip,
       handleShowElements = _ref.handleShowElements,
       handleToEditMode = _ref.handleToEditMode,
-      isEditMode = _ref.isEditMode,
+      isEditable = _ref.isEditable,
       name = _ref.name,
       setChipsSizes = _ref.setChipsSizes,
       setEditConfig = _ref.setEditConfig,
@@ -70,8 +70,8 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
   var chipsCellRef = _ref2.chipsCellRef,
       chipsWrapperRef = _ref2.chipsWrapperRef;
   var buttonAddClassNames = (0, _classnames.default)('button-add', chipOptions.background && "button-add-background_".concat(chipOptions.background), chipOptions.borderColor && "button-add-border_".concat(chipOptions.borderColor), chipOptions.font && "button-add-font_".concat(chipOptions.font), chipOptions.density && "button-add-density_".concat(chipOptions.density));
-  var wrapperClassNames = (0, _classnames.default)('chips-wrapper', isEditMode && 'fixed-max-width');
-  var chipClassNames = (0, _classnames.default)('chip', 'chip__content', isEditMode && 'data-ellipsis', shortChips && 'chip_short', chips.hiddenChips && 'chip_hidden', chipOptions.density && "chip-density_".concat(chipOptions.density), chipOptions.borderRadius && "chip-border_".concat(chipOptions.borderRadius), chipOptions.background && "chip-background_".concat(chipOptions.background), chipOptions.borderColor && "chip-border_".concat(chipOptions.borderColor), chipOptions.font && "chip-font_".concat(chipOptions.font), isEditMode && 'editable', (showChips || isEditMode) && 'chip_visible');
+  var wrapperClassNames = (0, _classnames.default)('chips-wrapper', isEditable && 'fixed-max-width');
+  var chipClassNames = (0, _classnames.default)('chip', 'chip__content', isEditable && 'data-ellipsis', shortChips && 'chip_short', chips.hiddenChips && 'chip_hidden', chipOptions.density && "chip-density_".concat(chipOptions.density), chipOptions.borderRadius && "chip-border_".concat(chipOptions.borderRadius), chipOptions.background && "chip-background_".concat(chipOptions.background), chipOptions.borderColor && "chip-border_".concat(chipOptions.borderColor), chipOptions.font && "chip-font_".concat(chipOptions.font), isEditable && 'editable', (showChips || isEditable) && 'chip_visible');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
     name: name,
     validate: validateFields,
@@ -85,7 +85,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
         validationRules.key.push(_formChipCell.uniquenessError);
       }
 
-      return (isEditMode || !(0, _common.isEveryObjectValueEmpty)(fields)) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return (isEditable || !(0, _common.isEveryObjectValueEmpty)(fields)) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "chips-cell",
         ref: chipsCellRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -118,7 +118,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
                     return _handleRemoveChip(event, fields, index);
                   },
                   handleToEditMode: handleToEditMode,
-                  isEditMode: isEditMode,
+                  isEditable: isEditable,
                   keyName: "".concat(contentItem, ".key"),
                   meta: meta,
                   ref: chipsCellRef,
@@ -143,7 +143,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
               onClick: handleShowElements,
               children: chips.hiddenChipsNumber
             })]
-          }), isEditMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          }), isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             className: buttonAddClassNames,
             onClick: function onClick(e) {
               return handleAddNewChip(e, fields);
@@ -165,7 +165,7 @@ FormChipCellView.defaultProps = {
     density: 'dense',
     font: 'purple'
   },
-  isEditMode: false,
+  isEditable: false,
   shortChips: false,
   validationRules: {}
 };
@@ -178,7 +178,7 @@ FormChipCellView.propTypes = {
   handleRemoveChip: _propTypes.default.func.isRequired,
   handleShowElements: _propTypes.default.func.isRequired,
   handleToEditMode: _propTypes.default.func.isRequired,
-  isEditMode: _propTypes.default.bool,
+  isEditable: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   setChipsSizes: _propTypes.default.func.isRequired,
   setEditConfig: _propTypes.default.func.isRequired,

package/dist/components/FormChipCell/NewChipForm/NewChipForm.js

@@ -62,7 +62,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className = _ref.className,
       editConfig = _ref.editConfig,
       handleRemoveChip = _ref.handleRemoveChip,
-      isEditMode = _ref.isEditMode,
+      isEditable = _ref.isEditable,
       keyName = _ref.keyName,
       meta = _ref.meta,
       onChange = _ref.onChange,
@@ -125,8 +125,8 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       if (chipData.key && chipData.value) {
         setChipData(function (prevState) {
           return _objectSpread(_objectSpread({}, prevState), {}, {
-            keyFieldWidth: currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput,
-            valueFieldWidth: currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput
+            keyFieldWidth: currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput <= minWidthInput ? minWidthInput : currentWidthKeyInput,
+            valueFieldWidth: currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput <= minWidthValueInput ? minWidthValueInput : currentWidthValueInput
           });
         });
       } else {
@@ -187,7 +187,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var focusChip = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
 
-    if (editConfig.chipIndex === chipIndex && isEditMode) {
+    if (editConfig.chipIndex === chipIndex && isEditable) {
       if (!event.shiftKey && event.key === _constants.TAB && editConfig.isValueFocused) {
         onChange(event, _constants.TAB);
       } else if (event.shiftKey && event.key === _constants.TAB && editConfig.isKeyFocused) {
@@ -203,7 +203,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [editConfig, onChange, chipIndex, isEditMode]);
+  }, [editConfig, onChange, chipIndex, isEditable]);
   var handleOnFocus = (0, _react.useCallback)(function (event) {
     if (editConfig.chipIndex === chipIndex) {
       if (event.target.name === keyName) {
@@ -292,7 +292,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: refInputContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelKeyClassName,
-      disabled: !isEditMode || editConfig.chipIndex !== chipIndex,
+      disabled: !isEditable || editConfig.chipIndex !== chipIndex,
       name: keyName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -306,7 +306,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       children: ":"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelValueClassName,
-      disabled: !isEditMode || editConfig.chipIndex !== chipIndex,
+      disabled: !isEditable || editConfig.chipIndex !== chipIndex,
       name: valueName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -315,7 +315,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       style: {
         width: chipData.valueFieldWidth
       }
-    }), editConfig.chipIndex !== chipIndex && isEditMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    }), editConfig.chipIndex !== chipIndex && isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       className: "edit-chip__icon-close",
       onClick: function onClick(event) {
         return handleRemoveChip(event, chipIndex);
@@ -340,7 +340,7 @@ NewChipForm.propTypes = {
   className: _propTypes.default.string,
   editConfig: _propTypes.default.shape({}).isRequired,
   handleRemoveChip: _propTypes.default.func.isRequired,
-  isEditMode: _propTypes.default.bool.isRequired,
+  isEditable: _propTypes.default.bool.isRequired,
   keyName: _propTypes.default.string.isRequired,
   meta: _propTypes.default.object.isRequired,
   onChange: _propTypes.default.func.isRequired,

package/dist/components/FormChipCell/NewChipForm/newChipForm.scss

@@ -22,13 +22,16 @@
         &_invalid {
           color: $amaranth;
         }
+
         &::placeholder {
           color: $spunPearl;
         }
       }
 
-      &::placeholder {
-        color: $primary;
+      &.input-label-key, &.input-label-value {
+        &::placeholder {
+          color: $topaz;
+        }
       }
     }
 

package/dist/components/FormCombobox/FormCombobox.js

@@ -177,7 +177,7 @@ var FormCombobox = function FormCombobox(_ref) {
     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)) {
+    if (comboboxRef.current && !comboboxRef.current.contains(event.target) && suggestionListRef.current && !suggestionListRef.current.contains(event.target)) {
       setSearchIsFocused(false);
       setShowSelectDropdown(false);
       setShowSuggestionList(false);
@@ -423,6 +423,7 @@ var FormCombobox = function FormCombobox(_ref) {
                 })
               })]
             }), showSelectDropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
+              headerIsHidden: true,
               customPosition: {
                 element: selectRef,
                 position: 'bottom-right'
@@ -455,6 +456,7 @@ var FormCombobox = function FormCombobox(_ref) {
             type: "text",
             value: inputValue
           }), showSuggestionList && (dropdownList.length > 0 || searchIsFocused) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
+            headerIsHidden: true,
             customPosition: {
               element: selectRef,
               position: 'bottom-right'

package/dist/components/FormCombobox/formCombobox.scss

@@ -103,11 +103,6 @@
       width: 100%;
       max-height: 250px;
       padding: 0;
-      border-radius: 0;
-
-      &__header {
-        display: none;
-      }
     }
   }
 

package/dist/components/FormInput/FormInput.js

@@ -99,38 +99,44 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       withoutBorder = _ref.withoutBorder,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _useField = (0, _reactFinalForm.useField)(name),
-      input = _useField.input,
-      meta = _useField.meta;
-
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
-      isInvalid = _useState2[0],
-      setIsInvalid = _useState2[1];
+      fieldMeta = _useState2[0],
+      setFieldMeta = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)({}),
       _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
+      fieldInput = _useState4[0],
+      setFieldInput = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      typedValue = _useState6[0],
-      setTypedValue = _useState6[1];
+      isInvalid = _useState6[0],
+      setIsInvalid = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(RegExp(pattern)),
-      _useState8 = _slicedToArray(_useState7, 1),
-      validationPattern = _useState8[0];
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isFocused = _useState8[0],
+      setIsFocused = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(rules),
+  var _useState9 = (0, _react.useState)(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      validationRules = _useState10[0],
-      setValidationRules = _useState10[1];
+      typedValue = _useState10[0],
+      setTypedValue = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(RegExp(pattern)),
+      _useState12 = _slicedToArray(_useState11, 1),
+      validationPattern = _useState12[0];
+
+  var _useState13 = (0, _react.useState)(rules),
+      _useState14 = _slicedToArray(_useState13, 2),
+      validationRules = _useState14[0],
+      setValidationRules = _useState14[1];
 
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      showValidationRules = _useState12[0],
-      setShowValidationRules = _useState12[1];
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      showValidationRules = _useState16[0],
+      setShowValidationRules = _useState16[1];
 
   var wrapperRef = (0, _react.useRef)();
   (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
@@ -142,16 +148,16 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   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
-  }, [input.value]);
+    setTypedValue(String(fieldInput.value)); // convert from number to string
+  }, [fieldInput.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]);
+    setIsInvalid(fieldMeta.invalid && (fieldMeta.validating || fieldMeta.modified || fieldMeta.submitFailed && fieldMeta.touched));
+  }, [fieldMeta.invalid, fieldMeta.modified, fieldMeta.submitFailed, fieldMeta.touched, fieldMeta.validating]);
   (0, _react.useEffect)(function () {
-    if (meta.valid && showValidationRules) {
+    if (fieldMeta.valid && showValidationRules) {
       setShowValidationRules(false);
     }
-  }, [meta.valid, showValidationRules]);
+  }, [fieldMeta.valid, showValidationRules]);
   (0, _react.useEffect)(function () {
     if (showValidationRules) {
       window.addEventListener('scroll', handleScroll, true);
@@ -166,6 +172,17 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       inputRef.current.focus();
     }
   }, [focused]);
+  (0, _react.useEffect)(function () {
+    setValidationRules(function () {
+      return rules.map(function (rule) {
+        return _objectSpread(_objectSpread({}, rule), {}, {
+          isValid: !fieldMeta.error || !Array.isArray(fieldMeta.error) ? true : !fieldMeta.error.some(function (err) {
+            return err.name === rule.name;
+          })
+        });
+      });
+    });
+  }, [fieldMeta.error, rules]);
 
   var getValidationRules = function getValidationRules() {
     return validationRules.map(function (_ref3) {
@@ -183,7 +200,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var handleInputBlur = function handleInputBlur(event) {
     var _event$relatedTarget;
 
-    input.onBlur(event);
+    fieldInput.onBlur && fieldInput.onBlur(event);
 
     if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.form-field__suggestion-list'))) {
       setIsFocused(false);
@@ -192,7 +209,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var handleInputFocus = function handleInputFocus(event) {
-    input.onFocus(event);
+    fieldInput.onFocus && fieldInput.onFocus(event);
     setIsFocused(true);
   };
 
@@ -205,7 +222,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var handleSuggestionClick = function handleSuggestionClick(item) {
-    input.onChange && input.onChange(item);
+    fieldInput.onChange && fieldInput.onChange(item);
     setIsFocused(false);
     onBlur();
   };
@@ -217,24 +234,12 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     });
   };
 
-  (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 validateField = function validateField(value, allValues) {
     var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
     if (!valueToValidate && !required || disabled) return;
     var validationError = null;
 
-    if (!(0, _lodash.isEmpty)(validationRules)) {
+    if (!(0, _lodash.isEmpty)(rules)) {
       var _checkPatternsValidit = (0, _validation.checkPatternsValidity)(rules, valueToValidate),
           _checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
           newRules = _checkPatternsValidit2[0],
@@ -259,14 +264,14 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         if (inputProps.max && +valueToValidate > +inputProps.max) {
           validationError = {
             name: 'maxValue',
-            label: "Max value is ".concat(inputProps.max)
+            label: "The maximum value should be ".concat(inputProps.max)
           };
         }
 
         if (inputProps.min && +valueToValidate < +inputProps.min) {
           validationError = {
             name: 'minValue',
-            label: "Min value is ".concat(inputProps.min)
+            label: "The minimum value should be ".concat(inputProps.min)
           };
         }
       }
@@ -290,7 +295,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
 
     if (!validationError && validator) {
-      validationError = validator(value);
+      validationError = validator(value, allValues);
     }
 
     return validationError;
@@ -301,6 +306,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     return inputProps.type === 'number' ? +val : val;
   };
 
+  var setFieldData = (0, _lodash.debounce)(function (input, meta) {
+    if (!(0, _lodash.isEqual)(meta, fieldMeta)) {
+      setFieldMeta(meta);
+    }
+
+    if (!(0, _lodash.isEqual)(input, fieldInput)) {
+      setFieldInput(input);
+    }
+  }, 50);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     validate: validateField,
     name: name,
@@ -310,6 +324,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       var input = _ref4.input,
           meta = _ref4.meta;
+      setFieldData(input, meta);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: ref,
         className: formFieldClassNames,
@@ -429,7 +444,7 @@ FormInput.defaultProps = {
   pattern: null,
   placeholder: '',
   required: false,
-  step: '1',
+  step: 1,
   suggestionList: [],
   tip: '',
   type: 'text',
@@ -457,7 +472,7 @@ FormInput.propTypes = {
   pattern: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
-  step: _propTypes.default.string,
+  step: _propTypes.default.number,
   suggestionList: _propTypes.default.arrayOf(_propTypes.default.string),
   tip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   type: _propTypes.default.string,

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.js

@@ -97,14 +97,14 @@ InputNumberButtons.defaultProps = {
   disabled: false,
   min: null,
   max: null,
-  step: '1'
+  step: 1
 };
 InputNumberButtons.propTypes = {
   disabled: _propTypes.default.bool,
   min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   max: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   onChange: _propTypes.default.func.isRequired,
-  step: _propTypes.default.string,
+  step: _propTypes.default.number,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
 };