@itcase/forms 1.0.12 → 1.0.14

package/dist/css/form/Field/FileInput/FileInput.css

@@ -20,6 +20,7 @@
       flex-flow: column nowrap;
       justify-content: center;
       align-content: center;
+      align-items: center;
       cursor: pointer;
       &-title {
         padding: 0 0 8px 0;

package/dist/itcase-forms.cjs.js

@@ -1325,6 +1325,10 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
   var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
@@ -1350,7 +1354,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React__default.default.createElement("aside", {
       className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
@@ -1440,6 +1444,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     size = props.size,
     borderWidth = props.borderWidth,
     borderColor = props.borderColor,
+    borderColorHover = props.borderColorHover,
     borderType = props.borderType,
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
@@ -1502,6 +1507,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       hintTitle: hintTitle,
       borderWidth: borderWidth,
       borderColor: borderColor,
+      borderColorHover: borderColorHover,
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
@@ -2139,8 +2145,12 @@ TextareaField.propTypes = {
   inputProps: PropTypes__default.default.object
 };
 
-function focusOnError(formElementsList, errors) {
+var focusOnError = function focusOnError(formElementsList, errors) {
   var selectsIds = Object.keys(errors).map(function (fieldName) {
+    if (fieldName === finalForm.FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
     return "react-select-id_" + fieldName + "-input";
   });
   var errorFieldElement = formElementsList.find(function (element) {
@@ -2154,9 +2164,14 @@ function focusOnError(formElementsList, errors) {
   if (!errorFieldElement && errorsList.length) {
     var errorElement;
     try {
-      errorElement = document.querySelector("#" + errorsList[0] + "-error");
-      if (!errorElement) {
-        errorElement = document.querySelector("#id_" + errorsList[0]);
+      var fieldName = errorsList[0];
+      if (fieldName === finalForm.FORM_ERROR) {
+        errorElement = document.querySelector('notification__item_status_error');
+      } else {
+        errorElement = document.querySelector("#" + fieldName + "-error");
+        if (!errorElement) {
+          errorElement = document.querySelector("#id_" + fieldName);
+        }
       }
     } catch (err) {
       console.warn(err);
@@ -2176,31 +2191,42 @@ function focusOnError(formElementsList, errors) {
     });
   }
   return null;
-}
+};
 var focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
-function setErrorsMutator(args, state) {
+var setErrorsMutator = function setErrorsMutator(args, state) {
   var fieldName = args[0],
     data = args[1];
-  var fieldError = data.error || data.submitError;
+  var submitError = data.submitError;
+  var fieldError = data.error;
   if (fieldName === 'non_field_errors') {
-    state.formState.error = fieldError;
     // state.formState.invalid = true
     // state.formState.valid = false
-    state.formState.submitError = fieldError;
-  } else if (fieldName in state.fields && fieldError) {
-    var _Object$assign;
-    state.fields[fieldName].touched = true;
-    var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
-    state.formState.errors = errorsState;
-    state.formState.submitErrors = errorsState;
-    state.formState.lastSubmittedValues = state.formState.values;
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      var _Object$assign;
+      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      var _Object$assign2;
+      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
+
+      // state.fields[fieldName].submitFailed = true
+      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitError = submitError;
+      state.formState.submitErrors = submitErrorsState;
+      state.formState.submitFailed = true;
+      state.formState.submitSucceeded = false;
+      state.formState.lastSubmittedValues = state.formState.values;
+    }
   }
-}
-function sendFormDataToServer(_x, _x2) {
-  return _sendFormDataToServer.apply(this, arguments);
-}
-function _sendFormDataToServer() {
-  _sendFormDataToServer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, data) {
+};
+var sendFormDataToServer = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, data) {
     var response, _error$response, _error$response2, formErrors;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -2226,9 +2252,9 @@ function _sendFormDataToServer() {
             formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
           }
           if (typeof ((_error$response2 = _context.t0.response) == null ? void 0 : _error$response2.data) === 'object') {
-            Object.entries(_context.t0.response.data).forEach(function (_ref) {
-              var fieldName = _ref[0],
-                errorsList = _ref[1];
+            Object.entries(_context.t0.response.data).forEach(function (_ref2) {
+              var fieldName = _ref2[0],
+                errorsList = _ref2[1];
               formErrors[fieldName] = errorsList[0];
             });
           }
@@ -2243,8 +2269,10 @@ function _sendFormDataToServer() {
       }
     }, _callee, null, [[0, 7]]);
   }));
-  return _sendFormDataToServer.apply(this, arguments);
-}
+  return function sendFormDataToServer(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 var formTypes = {
   checkbox: 'checkbox',
@@ -2347,7 +2375,7 @@ function generateField(field, config, props) {
   }
 }
 
-var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   var additionalProps = props.additionalProps,
     after = props.after,
     before = props.before,
@@ -2444,105 +2472,110 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function (props,
     decorators: [focusOnErrorDecorator],
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
+    mutators: mutators,
+    render: function render(_ref) {
+      var handleSubmit = _ref.handleSubmit,
+        submitError = _ref.submitError,
+        modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
+        form = _ref.form;
+      return /*#__PURE__*/React__default.default.createElement("form", {
+        style: formStyles,
+        className: clsx__default.default(className, 'form', set && "form_set_" + set, type && "form_type_" + type, directionClass, fillClass, shapeClass, elevationClass),
+        name: formName,
+        "data-tour": dataTour,
+        ref: function ref() {
+          return onRefFormInstance(form);
+        },
+        onSubmit: handleSubmit,
+        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+      }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
+        className: "form__title",
+        size: titleTextSize,
+        textColor: titleTextColor,
+        textWeight: titleTextWeight
+      }, title), description && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+        className: "form__description",
+        size: descriptionSize,
+        textColor: descriptionTextColor,
+        textWeight: descriptionTextWeight
+      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
+        text: form.getState().submitError,
+        status: "error"
+      }), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
+        subscription: {
+          values: true
+        },
+        onChange: onChangeFormValues
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        direction: "vertical",
+        gap: fieldsGap || groupGap,
+        className: "form__wrapper"
+      }, Object.keys(config).map(function (key) {
+        return generateField(config[key], {
+          key: key
+        }, additionalProps[config[key].name]);
+      }), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+        className: "form__loader",
+        set: loaderSet,
+        fill: loaderFill,
+        itemFill: loaderItemFill,
+        text: loaderText
+      }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        fill: buttonFill,
+        justifyContent: buttonJustifyContent,
+        direction: buttonDirection,
+        padding: buttonPadding,
+        gap: buttonGap,
+        className: "form__button",
+        dataTour: dataTourButtons
+      }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: primaryButtonFill,
+        fillHover: primaryButtonFillHover,
+        size: primaryButtonSize,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelSize: primaryButtonLabelSize,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        label: primaryButtonLabel,
+        dataTour: dataTourPrimaryButton
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
+        size: secondaryButtonSize,
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelSize: secondaryButtonLabelSize,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        label: secondaryButtonLabel,
+        onClick: onClickSecondaryButton,
+        dataTour: dataTourSecondaryButton
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
+        size: tertiaryButtonSize,
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelSize: tertiaryButtonLabelSize,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        label: tertiaryButtonLabel,
+        onClick: onClickTertiaryButton,
+        dataTour: dataTourTertiaryButton
+      }) : tertiaryButton), after);
+    },
     subscription: {
       submitting: true,
-      pristine: true
+      pristine: true,
+      modifiedSinceLastSubmit: true,
+      submitError: true
     },
-    mutators: mutators,
     validate: validate,
     onSubmit: onSubmit
-  }, function (_ref) {
-    var handleSubmit = _ref.handleSubmit,
-      form = _ref.form;
-    return /*#__PURE__*/React__default.default.createElement("form", {
-      style: formStyles,
-      className: clsx__default.default(className, 'form', set && "form_set_" + set, type && "form_type_" + type, directionClass, fillClass, shapeClass, elevationClass),
-      name: formName,
-      "data-tour": dataTour,
-      ref: function ref() {
-        return onRefFormInstance(form);
-      },
-      onSubmit: handleSubmit,
-      autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
-      autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-      autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-      spellCheck: disableFieldsAutoComplete ? 'false' : undefined
-    }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
-      className: "form__title",
-      size: titleTextSize,
-      textColor: titleTextColor,
-      textWeight: titleTextWeight
-    }, title), description && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-      className: "form__description",
-      size: descriptionSize,
-      textColor: descriptionTextColor,
-      textWeight: descriptionTextWeight
-    }, description), form.getState().submitError && /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
-      text: form.getState().submitError,
-      status: "error"
-    }), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
-      subscription: {
-        values: true
-      },
-      onChange: onChangeFormValues
-    }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
-      direction: "vertical",
-      gap: fieldsGap || groupGap,
-      className: "form__wrapper"
-    }, Object.keys(config).map(function (key) {
-      return generateField(config[key], {
-        key: key
-      }, additionalProps[config[key].name]);
-    }), isLoading && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, loader ? loader : /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
-      className: "form__loader",
-      set: loaderSet,
-      fill: loaderFill,
-      itemFill: loaderItemFill,
-      text: loaderText
-    }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
-      fill: buttonFill,
-      justifyContent: buttonJustifyContent,
-      direction: buttonDirection,
-      padding: buttonPadding,
-      gap: buttonGap,
-      className: "form__button",
-      dataTour: dataTourButtons
-    }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: primaryButtonFill,
-      fillHover: primaryButtonFillHover,
-      size: primaryButtonSize,
-      labelTextColor: primaryButtonLabelTextColor,
-      labelSize: primaryButtonLabelSize,
-      labelTextWeight: primaryButtonLabelTextWeight,
-      label: primaryButtonLabel,
-      dataTour: dataTourPrimaryButton
-    }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: secondaryButtonFill,
-      fillHover: secondaryButtonFillHover,
-      size: secondaryButtonSize,
-      labelTextColor: secondaryButtonLabelTextColor,
-      labelSize: secondaryButtonLabelSize,
-      labelTextWeight: secondaryButtonLabelTextWeight,
-      label: secondaryButtonLabel,
-      onClick: onClickSecondaryButton,
-      dataTour: dataTourSecondaryButton
-    }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: tertiaryButtonFill,
-      fillHover: tertiaryButtonFillHover,
-      size: tertiaryButtonSize,
-      labelTextColor: tertiaryButtonLabelTextColor,
-      labelSize: tertiaryButtonLabelSize,
-      labelTextWeight: tertiaryButtonLabelTextWeight,
-      label: tertiaryButtonLabel,
-      onClick: onClickTertiaryButton,
-      dataTour: dataTourTertiaryButton
-    }) : tertiaryButton), after);
   });
 });
 FinalForm.propTypes = {
@@ -2593,7 +2626,6 @@ FinalForm.defaultProps = {
   direction: 'vertical',
   disableFieldsAutoComplete: false
 };
-FinalForm.displayName = 'FinalForm';
 
 Object.defineProperty(exports, 'Field', {
   enumerable: true,

package/dist/itcase-forms.esm.js

@@ -1,6 +1,6 @@
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
 import React, { useMemo, useEffect, useCallback, useState } from 'react';
-import { setIn, getIn, FORM_ERROR } from 'final-form';
+import { setIn, FORM_ERROR, getIn } from 'final-form';
 import { useForm, Field, Form, FormSpy } from 'react-final-form';
 export { Field, useForm, useFormState } from 'react-final-form';
 import PropTypes from 'prop-types';
@@ -1315,6 +1315,10 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  var borderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
   var borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
@@ -1340,7 +1344,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React.createElement("aside", {
       className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
@@ -1430,6 +1434,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     size = props.size,
     borderWidth = props.borderWidth,
     borderColor = props.borderColor,
+    borderColorHover = props.borderColorHover,
     borderType = props.borderType,
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
@@ -1492,6 +1497,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       hintTitle: hintTitle,
       borderWidth: borderWidth,
       borderColor: borderColor,
+      borderColorHover: borderColorHover,
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
@@ -2129,8 +2135,12 @@ TextareaField.propTypes = {
   inputProps: PropTypes.object
 };
 
-function focusOnError(formElementsList, errors) {
+var focusOnError = function focusOnError(formElementsList, errors) {
   var selectsIds = Object.keys(errors).map(function (fieldName) {
+    if (fieldName === FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
     return "react-select-id_" + fieldName + "-input";
   });
   var errorFieldElement = formElementsList.find(function (element) {
@@ -2144,9 +2154,14 @@ function focusOnError(formElementsList, errors) {
   if (!errorFieldElement && errorsList.length) {
     var errorElement;
     try {
-      errorElement = document.querySelector("#" + errorsList[0] + "-error");
-      if (!errorElement) {
-        errorElement = document.querySelector("#id_" + errorsList[0]);
+      var fieldName = errorsList[0];
+      if (fieldName === FORM_ERROR) {
+        errorElement = document.querySelector('notification__item_status_error');
+      } else {
+        errorElement = document.querySelector("#" + fieldName + "-error");
+        if (!errorElement) {
+          errorElement = document.querySelector("#id_" + fieldName);
+        }
       }
     } catch (err) {
       console.warn(err);
@@ -2166,31 +2181,42 @@ function focusOnError(formElementsList, errors) {
     });
   }
   return null;
-}
+};
 var focusOnErrorDecorator = createDecorator(null, focusOnError);
-function setErrorsMutator(args, state) {
+var setErrorsMutator = function setErrorsMutator(args, state) {
   var fieldName = args[0],
     data = args[1];
-  var fieldError = data.error || data.submitError;
+  var submitError = data.submitError;
+  var fieldError = data.error;
   if (fieldName === 'non_field_errors') {
-    state.formState.error = fieldError;
     // state.formState.invalid = true
     // state.formState.valid = false
-    state.formState.submitError = fieldError;
-  } else if (fieldName in state.fields && fieldError) {
-    var _Object$assign;
-    state.fields[fieldName].touched = true;
-    var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
-    state.formState.errors = errorsState;
-    state.formState.submitErrors = errorsState;
-    state.formState.lastSubmittedValues = state.formState.values;
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      var _Object$assign;
+      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      var _Object$assign2;
+      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
+
+      // state.fields[fieldName].submitFailed = true
+      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitError = submitError;
+      state.formState.submitErrors = submitErrorsState;
+      state.formState.submitFailed = true;
+      state.formState.submitSucceeded = false;
+      state.formState.lastSubmittedValues = state.formState.values;
+    }
   }
-}
-function sendFormDataToServer(_x, _x2) {
-  return _sendFormDataToServer.apply(this, arguments);
-}
-function _sendFormDataToServer() {
-  _sendFormDataToServer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, data) {
+};
+var sendFormDataToServer = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, data) {
     var response, _error$response, _error$response2, formErrors;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -2216,9 +2242,9 @@ function _sendFormDataToServer() {
             formErrors[FORM_ERROR] = 'Something went wrong';
           }
           if (typeof ((_error$response2 = _context.t0.response) == null ? void 0 : _error$response2.data) === 'object') {
-            Object.entries(_context.t0.response.data).forEach(function (_ref) {
-              var fieldName = _ref[0],
-                errorsList = _ref[1];
+            Object.entries(_context.t0.response.data).forEach(function (_ref2) {
+              var fieldName = _ref2[0],
+                errorsList = _ref2[1];
               formErrors[fieldName] = errorsList[0];
             });
           }
@@ -2233,8 +2259,10 @@ function _sendFormDataToServer() {
       }
     }, _callee, null, [[0, 7]]);
   }));
-  return _sendFormDataToServer.apply(this, arguments);
-}
+  return function sendFormDataToServer(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 var formTypes = {
   checkbox: 'checkbox',
@@ -2337,7 +2365,7 @@ function generateField(field, config, props) {
   }
 }
 
-var FinalForm = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   var additionalProps = props.additionalProps,
     after = props.after,
     before = props.before,
@@ -2434,105 +2462,110 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function (props, ref) {
     decorators: [focusOnErrorDecorator],
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
+    mutators: mutators,
+    render: function render(_ref) {
+      var handleSubmit = _ref.handleSubmit,
+        submitError = _ref.submitError,
+        modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
+        form = _ref.form;
+      return /*#__PURE__*/React.createElement("form", {
+        style: formStyles,
+        className: clsx(className, 'form', set && "form_set_" + set, type && "form_type_" + type, directionClass, fillClass, shapeClass, elevationClass),
+        name: formName,
+        "data-tour": dataTour,
+        ref: function ref() {
+          return onRefFormInstance(form);
+        },
+        onSubmit: handleSubmit,
+        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+      }, before, title && /*#__PURE__*/React.createElement(Title, {
+        className: "form__title",
+        size: titleTextSize,
+        textColor: titleTextColor,
+        textWeight: titleTextWeight
+      }, title), description && /*#__PURE__*/React.createElement(Text, {
+        className: "form__description",
+        size: descriptionSize,
+        textColor: descriptionTextColor,
+        textWeight: descriptionTextWeight
+      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement(NotificationItem, {
+        text: form.getState().submitError,
+        status: "error"
+      }), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
+        subscription: {
+          values: true
+        },
+        onChange: onChangeFormValues
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(Group$1, {
+        direction: "vertical",
+        gap: fieldsGap || groupGap,
+        className: "form__wrapper"
+      }, Object.keys(config).map(function (key) {
+        return generateField(config[key], {
+          key: key
+        }, additionalProps[config[key].name]);
+      }), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+        className: "form__loader",
+        set: loaderSet,
+        fill: loaderFill,
+        itemFill: loaderItemFill,
+        text: loaderText
+      }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
+        fill: buttonFill,
+        justifyContent: buttonJustifyContent,
+        direction: buttonDirection,
+        padding: buttonPadding,
+        gap: buttonGap,
+        className: "form__button",
+        dataTour: dataTourButtons
+      }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: primaryButtonFill,
+        fillHover: primaryButtonFillHover,
+        size: primaryButtonSize,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelSize: primaryButtonLabelSize,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        label: primaryButtonLabel,
+        dataTour: dataTourPrimaryButton
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
+        size: secondaryButtonSize,
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelSize: secondaryButtonLabelSize,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        label: secondaryButtonLabel,
+        onClick: onClickSecondaryButton,
+        dataTour: dataTourSecondaryButton
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
+        size: tertiaryButtonSize,
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelSize: tertiaryButtonLabelSize,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        label: tertiaryButtonLabel,
+        onClick: onClickTertiaryButton,
+        dataTour: dataTourTertiaryButton
+      }) : tertiaryButton), after);
+    },
     subscription: {
       submitting: true,
-      pristine: true
+      pristine: true,
+      modifiedSinceLastSubmit: true,
+      submitError: true
     },
-    mutators: mutators,
     validate: validate,
     onSubmit: onSubmit
-  }, function (_ref) {
-    var handleSubmit = _ref.handleSubmit,
-      form = _ref.form;
-    return /*#__PURE__*/React.createElement("form", {
-      style: formStyles,
-      className: clsx(className, 'form', set && "form_set_" + set, type && "form_type_" + type, directionClass, fillClass, shapeClass, elevationClass),
-      name: formName,
-      "data-tour": dataTour,
-      ref: function ref() {
-        return onRefFormInstance(form);
-      },
-      onSubmit: handleSubmit,
-      autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
-      autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-      autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-      spellCheck: disableFieldsAutoComplete ? 'false' : undefined
-    }, before, title && /*#__PURE__*/React.createElement(Title, {
-      className: "form__title",
-      size: titleTextSize,
-      textColor: titleTextColor,
-      textWeight: titleTextWeight
-    }, title), description && /*#__PURE__*/React.createElement(Text, {
-      className: "form__description",
-      size: descriptionSize,
-      textColor: descriptionTextColor,
-      textWeight: descriptionTextWeight
-    }, description), form.getState().submitError && /*#__PURE__*/React.createElement(NotificationItem, {
-      text: form.getState().submitError,
-      status: "error"
-    }), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
-      subscription: {
-        values: true
-      },
-      onChange: onChangeFormValues
-    }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(Group$1, {
-      direction: "vertical",
-      gap: fieldsGap || groupGap,
-      className: "form__wrapper"
-    }, Object.keys(config).map(function (key) {
-      return generateField(config[key], {
-        key: key
-      }, additionalProps[config[key].name]);
-    }), isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, loader ? loader : /*#__PURE__*/React.createElement(Loader, {
-      className: "form__loader",
-      set: loaderSet,
-      fill: loaderFill,
-      itemFill: loaderItemFill,
-      text: loaderText
-    }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
-      fill: buttonFill,
-      justifyContent: buttonJustifyContent,
-      direction: buttonDirection,
-      padding: buttonPadding,
-      gap: buttonGap,
-      className: "form__button",
-      dataTour: dataTourButtons
-    }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: primaryButtonFill,
-      fillHover: primaryButtonFillHover,
-      size: primaryButtonSize,
-      labelTextColor: primaryButtonLabelTextColor,
-      labelSize: primaryButtonLabelSize,
-      labelTextWeight: primaryButtonLabelTextWeight,
-      label: primaryButtonLabel,
-      dataTour: dataTourPrimaryButton
-    }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: secondaryButtonFill,
-      fillHover: secondaryButtonFillHover,
-      size: secondaryButtonSize,
-      labelTextColor: secondaryButtonLabelTextColor,
-      labelSize: secondaryButtonLabelSize,
-      labelTextWeight: secondaryButtonLabelTextWeight,
-      label: secondaryButtonLabel,
-      onClick: onClickSecondaryButton,
-      dataTour: dataTourSecondaryButton
-    }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-      width: "fill",
-      className: "form__button-item",
-      fill: tertiaryButtonFill,
-      fillHover: tertiaryButtonFillHover,
-      size: tertiaryButtonSize,
-      labelTextColor: tertiaryButtonLabelTextColor,
-      labelSize: tertiaryButtonLabelSize,
-      labelTextWeight: tertiaryButtonLabelTextWeight,
-      label: tertiaryButtonLabel,
-      onClick: onClickTertiaryButton,
-      dataTour: dataTourTertiaryButton
-    }) : tertiaryButton), after);
   });
 });
 FinalForm.propTypes = {
@@ -2583,6 +2616,5 @@ FinalForm.defaultProps = {
   direction: 'vertical',
   disableFieldsAutoComplete: false
 };
-FinalForm.displayName = 'FinalForm';
 
 export { CheckboxField as Checkbox, ChoiceField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",
@@ -35,15 +35,15 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.6",
-    "@itcase/ui": "^1.0.18",
-    "axios": "^1.4.0",
+    "@itcase/ui": "^1.0.25",
+    "axios": "^1.5.0",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.41",
+    "libphonenumber-js": "^1.10.43",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.1",
+    "luxon": "^3.4.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-date-range": "^1.4.0",
@@ -67,7 +67,7 @@
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.47.0",
+    "eslint": "8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
@@ -76,7 +76,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^5.0.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.3",
     "npm": "^9.8.1",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^10.1.0",
@@ -95,7 +95,7 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.1.1",
+    "postcss-preset-env": "^9.1.2",
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",