@itcase/forms 1.0.13 → 1.0.15

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

@@ -5,6 +5,12 @@
     z-index: 1;
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
+    &-wrapper {
+      display: flex;
+      gap: 20px;
+      justify-content: space-between;
+      flex-flow: row wrap;
+    }
     &_size {
       @each $size in normal, compact {
         &_$(size) {
@@ -15,6 +21,7 @@
       }
     }
     ^&__hint {
+      width: 100%;
       min-height: 120px;
       display: flex;
       flex-flow: column nowrap;
@@ -41,6 +48,7 @@
     }
   }
   &__thumb {
+    flex: 30%;
     display: grid;
     column-gap: 8px;
     grid-template-columns: min-content 1fr;
@@ -48,8 +56,8 @@
     margin: 0 0 16px 0;
     padding: 8px 16px 8px 8px;
     &-image {
-      width: 80px;
-      height: 80px;
+      width: 160px;
+      height: 160px;
       grid-column-start: 1;
       grid-row-start: span 2;
       display: flex;

package/dist/css/form/Form/Form.css

@@ -220,6 +220,21 @@
     margin: 30px 0 0 0;
   }
 }
+.form-notification {
+  &_type {
+    &_sticky {
+      z-index: 100;
+      position: sticky;
+      top: 20px;
+      left: 0;
+    }
+  }
+  &__item {
+    text-align: center;
+    padding: 20px;
+    border-radius: 12px;
+  }
+}
 .form {
   &_type_bottom-button {
     flex: 1;

package/dist/css/form/Form/css/form-notification/form-notification.css

@@ -0,0 +1,15 @@
+.form-notification {
+  &_type {
+    &_sticky {
+      z-index: 100;
+      position: sticky;
+      top: 20px;
+      left: 0;
+    }
+  }
+  &__item {
+    text-align: center;
+    padding: 20px;
+    border-radius: 12px;
+  }
+}

package/dist/itcase-forms.cjs.js

@@ -1345,6 +1345,10 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
   });
+  var thumbBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'thumbBorderColorHover'
+  });
   var thumbBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'thumbBorderType'
@@ -1357,7 +1361,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     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),
+      className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
     }, isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-image"
@@ -1449,6 +1453,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
     thumbBorderColor = props.thumbBorderColor,
+    thumbBorderColorHover = props.thumbBorderColorHover,
     thumbBorderType = props.thumbBorderType,
     removeThumbTextHoverColor = props.removeThumbTextHoverColor,
     labelTextColor = props.labelTextColor,
@@ -1511,6 +1516,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
@@ -2145,8 +2151,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) {
@@ -2160,9 +2170,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);
@@ -2182,31 +2197,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) {
@@ -2232,9 +2258,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];
             });
           }
@@ -2249,8 +2275,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',
@@ -2353,7 +2381,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,
@@ -2412,6 +2440,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function (props,
     type = props.type,
     buttonJustifyContent = props.buttonJustifyContent,
     title = props.title,
+    notificationType = props.notificationType,
     buttonFill = props.buttonFill,
     titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
@@ -2450,105 +2479,113 @@ 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("div", {
+        className: clsx__default.default('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+      }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
+        className: "form-notification__item",
+        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 = {
@@ -2599,7 +2636,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';
@@ -1335,6 +1335,10 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
   });
+  var thumbBorderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'thumbBorderColorHover'
+  });
   var thumbBorderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'thumbBorderType'
@@ -1347,7 +1351,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     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),
+      className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
     }, isPreviews && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
@@ -1439,6 +1443,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
     thumbBorderColor = props.thumbBorderColor,
+    thumbBorderColorHover = props.thumbBorderColorHover,
     thumbBorderType = props.thumbBorderType,
     removeThumbTextHoverColor = props.removeThumbTextHoverColor,
     labelTextColor = props.labelTextColor,
@@ -1501,6 +1506,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
@@ -2135,8 +2141,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) {
@@ -2150,9 +2160,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);
@@ -2172,31 +2187,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) {
@@ -2222,9 +2248,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];
             });
           }
@@ -2239,8 +2265,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',
@@ -2343,7 +2371,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,
@@ -2402,6 +2430,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type = props.type,
     buttonJustifyContent = props.buttonJustifyContent,
     title = props.title,
+    notificationType = props.notificationType,
     buttonFill = props.buttonFill,
     titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
@@ -2440,105 +2469,113 @@ 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("div", {
+        className: clsx('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+      }, /*#__PURE__*/React.createElement(NotificationItem, {
+        className: "form-notification__item",
+        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 = {
@@ -2589,6 +2626,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.13",
+  "version": "1.0.15",
   "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",