@itcase/forms 1.0.64 → 1.0.65

package/dist/itcase-forms.cjs.js

@@ -2477,116 +2477,6 @@ ChipsField.propTypes = {
   onChange: PropTypes__default.default.func
 };
 
-const focusOnError = (formElementsList, errors) => {
-  const selectsIds = Object.keys(errors).map(fieldName => {
-    if (fieldName === finalForm.FORM_ERROR) {
-      // TODO: get from somewhere
-      return 'notification__item_status_error';
-    }
-    return `react-select-id_${fieldName}-input`;
-  });
-  const errorFieldElement = formElementsList.find(element => {
-    if (element.name) {
-      return finalForm.getIn(errors, element.name);
-    } else {
-      return selectsIds.includes(element.id);
-    }
-  });
-  const errorsList = Object.keys(errors);
-  if (!errorFieldElement && errorsList.length) {
-    let errorElement;
-    try {
-      const 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);
-    }
-    if (errorElement) {
-      errorElement.scrollIntoView({
-        block: 'center'
-      }); // , behavior: 'smooth'
-    }
-  }
-
-  // The field is covered by the header because header is "sticky",
-  // that's we scroll manually so that the field falls into the center of the visible area
-  if (errorFieldElement) {
-    errorFieldElement.scrollIntoView({
-      block: 'center'
-    });
-  }
-  return null;
-};
-const focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
-const setErrorsMutator = (args, state) => {
-  const [fieldName, data] = args;
-  const submitError = data.submitError;
-  const fieldError = data.error;
-  if (fieldName === 'non_field_errors') {
-    // state.formState.invalid = true
-    // state.formState.valid = false
-    state.formState.error = fieldError;
-    state.formState.submitError = submitError;
-  } else if (fieldName in state.fields) {
-    if (fieldError) {
-      const errorsState = Object.assign({}, state.formState.errors, {
-        [fieldName]: fieldError
-      });
-      state.fields[fieldName].touched = true;
-      state.fields[fieldName].error = fieldError;
-      state.formState.errors = errorsState;
-    }
-    if (submitError) {
-      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
-        [fieldName]: submitError
-      });
-
-      // 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;
-    }
-  }
-};
-const sendFormDataToServer = async (url, data) => {
-  try {
-    const response = await axios__default.default({
-      url: url,
-      method: 'POST',
-      data: data
-    });
-    return {
-      success: true,
-      response
-    };
-  } catch (error) {
-    const formErrors = {};
-    if (typeof error.response?.data === 'string') {
-      formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
-    }
-    if (typeof error.response?.data === 'object') {
-      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
-        formErrors[fieldName] = errorsList[0];
-      });
-    }
-    return {
-      success: false,
-      formErrors,
-      error
-    };
-  }
-};
-
 const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
@@ -2709,8 +2599,119 @@ function generateField(field, config, props) {
   }
 }
 
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
+    if (fieldName === finalForm.FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return `react-select-id_${fieldName}-input`;
+  });
+  const errorFieldElement = formElementsList.find(element => {
+    if (element.name) {
+      return finalForm.getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  const errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    let errorElement;
+    try {
+      const 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);
+    }
+    if (errorElement) {
+      errorElement.scrollIntoView({
+        block: 'center'
+      }); // , behavior: 'smooth'
+    }
+  }
+
+  // The field is covered by the header because header is "sticky",
+  // that's we scroll manually so that the field falls into the center of the visible area
+  if (errorFieldElement) {
+    errorFieldElement.scrollIntoView({
+      block: 'center'
+    });
+  }
+  return null;
+};
+const focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
+  if (fieldName === 'non_field_errors') {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
+
+      // 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;
+    }
+  }
+};
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios__default.default({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
+
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    isLoading,
     additionalProps,
     after,
     before,
@@ -2721,13 +2722,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     buttonPadding,
     className,
     config,
-    dataTour,
     dataTestId,
-    dataTourButtons,
     dataTestIdButtons,
     dataTestIdPrimaryButton,
     dataTestIdSecondaryButton,
     dataTestIdTertiaryButton,
+    dataTour,
+    dataTourButtons,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2741,7 +2742,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     groupGap,
     initialValues,
     initialValuesEqual,
-    isLoading,
     language,
     loader,
     loaderFill,
@@ -2751,10 +2751,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     mutators,
     notificationCloseButton,
     notificationType,
-    onChangeFormValues,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onSubmit,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2763,6 +2759,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2785,7 +2782,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     titleTextSize,
     titleTextWeight,
     type,
-    validationSchema
+    validationSchema,
+    onChangeFormValues,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
+    onSubmit
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = React.useCallback(formInstance => {
@@ -2817,26 +2818,27 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     mutators: mutators,
+    validate: validate,
     render: ({
+      form,
       handleSubmit,
-      submitError,
       modifiedSinceLastSubmit,
-      form
+      submitError
     }) => {
       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,
-        "data-test-id": dataTestId
+        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
         ref: () => onRefFormInstance(form),
-        onSubmit: handleSubmit,
+        name: formName,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+        "data-test-id": dataTestId,
+        "data-tour": dataTour,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
+        style: formStyles,
+        onSubmit: handleSubmit
       }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
         className: "form__title",
         size: titleTextSize,
@@ -2851,88 +2853,88 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
         className: "form-notification__item",
-        titleTextSize: "h6",
         closeButton: notificationCloseButton,
+        status: "error",
         title: form.getState().submitError,
-        set: "form",
-        status: "error"
+        titleTextSize: "h6",
+        set: "form"
       })), 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, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper( /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__wrapper",
         direction: "vertical",
-        gap: fieldsGap || groupGap,
-        className: "form__wrapper"
+        gap: fieldsGap || groupGap
       }, Object.keys(config).map(key => generateField(config[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, {
+        text: loaderText,
+        set: loaderSet
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__button",
         fill: buttonFill,
-        justifyContent: buttonJustifyContent,
-        direction: buttonDirection,
         padding: buttonPadding,
-        gap: buttonGap,
-        className: "form__button",
+        dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        dataTestId: dataTestIdButtons
+        direction: buttonDirection,
+        gap: buttonGap,
+        justifyContent: buttonJustifyContent
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
         fill: primaryButtonFill,
         fillHover: primaryButtonFillHover,
-        size: primaryButtonSize,
-        labelTextColor: primaryButtonLabelTextColor,
-        labelSize: primaryButtonLabelSize,
-        labelTextWeight: primaryButtonLabelTextWeight,
-        label: primaryButtonLabel,
+        dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        dataTestId: dataTestIdPrimaryButton
+        label: primaryButtonLabel,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        size: primaryButtonSize
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelTextSize: secondaryButtonLabelSize,
         fill: secondaryButtonFill,
         fillHover: secondaryButtonFillHover,
-        size: secondaryButtonSize,
-        labelTextColor: secondaryButtonLabelTextColor,
-        labelSize: secondaryButtonLabelSize,
-        labelTextWeight: secondaryButtonLabelTextWeight,
-        label: secondaryButtonLabel,
-        onClick: onClickSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        dataTestId: dataTestIdSecondaryButton
+        label: secondaryButtonLabel,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        size: secondaryButtonSize,
+        onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelTextSize: tertiaryButtonLabelSize,
         fill: tertiaryButtonFill,
         fillHover: tertiaryButtonFillHover,
-        size: tertiaryButtonSize,
-        labelTextColor: tertiaryButtonLabelTextColor,
-        labelSize: tertiaryButtonLabelSize,
-        labelTextWeight: tertiaryButtonLabelTextWeight,
-        label: tertiaryButtonLabel,
-        onClick: onClickTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        dataTestId: dataTestIdTertiaryButton
+        label: tertiaryButtonLabel,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        size: tertiaryButtonSize,
+        onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {
-      submitting: true,
-      pristine: true,
       modifiedSinceLastSubmit: true,
-      submitError: true
+      pristine: true,
+      submitError: true,
+      submitting: true
     },
-    validate: validate,
     onSubmit: onSubmit
   });
 });
 FinalForm.propTypes = {
+  isLoading: PropTypes__default.default.bool,
   additionalProps: PropTypes__default.default.object,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
@@ -2958,7 +2960,6 @@ FinalForm.propTypes = {
   groupGap: PropTypes__default.default.string,
   initialValues: PropTypes__default.default.any,
   initialValuesEqual: PropTypes__default.default.any,
-  isLoading: PropTypes__default.default.bool,
   language: PropTypes__default.default.string,
   loader: PropTypes__default.default.element,
   loaderFill: PropTypes__default.default.string,
@@ -3006,16 +3007,16 @@ FinalForm.propTypes = {
   onSubmit: PropTypes__default.default.func
 };
 FinalForm.defaultProps = {
-  additionalProps: {},
+  direction: 'vertical',
   isLoading: false,
-  loaderSet: 'simple',
+  additionalProps: {},
+  buttonDirection: 'vertical',
+  disableFieldsAutoComplete: false,
+  language: 'en',
   loaderFill: 'surfacePrimary',
   loaderItemFill: 'surfaceItemAccent',
-  language: 'en',
-  titleSize: 'h1',
-  buttonDirection: 'vertical',
-  direction: 'vertical',
-  disableFieldsAutoComplete: false
+  loaderSet: 'simple',
+  titleSize: 'h1'
 };
 
 const DEFAULT_MESSAGES_FIELDS = {

package/dist/itcase-forms.esm.js

@@ -2463,116 +2463,6 @@ ChipsField.propTypes = {
   onChange: PropTypes.func
 };
 
-const focusOnError = (formElementsList, errors) => {
-  const selectsIds = Object.keys(errors).map(fieldName => {
-    if (fieldName === FORM_ERROR) {
-      // TODO: get from somewhere
-      return 'notification__item_status_error';
-    }
-    return `react-select-id_${fieldName}-input`;
-  });
-  const errorFieldElement = formElementsList.find(element => {
-    if (element.name) {
-      return getIn(errors, element.name);
-    } else {
-      return selectsIds.includes(element.id);
-    }
-  });
-  const errorsList = Object.keys(errors);
-  if (!errorFieldElement && errorsList.length) {
-    let errorElement;
-    try {
-      const 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);
-    }
-    if (errorElement) {
-      errorElement.scrollIntoView({
-        block: 'center'
-      }); // , behavior: 'smooth'
-    }
-  }
-
-  // The field is covered by the header because header is "sticky",
-  // that's we scroll manually so that the field falls into the center of the visible area
-  if (errorFieldElement) {
-    errorFieldElement.scrollIntoView({
-      block: 'center'
-    });
-  }
-  return null;
-};
-const focusOnErrorDecorator = createDecorator(null, focusOnError);
-const setErrorsMutator = (args, state) => {
-  const [fieldName, data] = args;
-  const submitError = data.submitError;
-  const fieldError = data.error;
-  if (fieldName === 'non_field_errors') {
-    // state.formState.invalid = true
-    // state.formState.valid = false
-    state.formState.error = fieldError;
-    state.formState.submitError = submitError;
-  } else if (fieldName in state.fields) {
-    if (fieldError) {
-      const errorsState = Object.assign({}, state.formState.errors, {
-        [fieldName]: fieldError
-      });
-      state.fields[fieldName].touched = true;
-      state.fields[fieldName].error = fieldError;
-      state.formState.errors = errorsState;
-    }
-    if (submitError) {
-      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
-        [fieldName]: submitError
-      });
-
-      // 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;
-    }
-  }
-};
-const sendFormDataToServer = async (url, data) => {
-  try {
-    const response = await axios({
-      url: url,
-      method: 'POST',
-      data: data
-    });
-    return {
-      success: true,
-      response
-    };
-  } catch (error) {
-    const formErrors = {};
-    if (typeof error.response?.data === 'string') {
-      formErrors[FORM_ERROR] = 'Something went wrong';
-    }
-    if (typeof error.response?.data === 'object') {
-      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
-        formErrors[fieldName] = errorsList[0];
-      });
-    }
-    return {
-      success: false,
-      formErrors,
-      error
-    };
-  }
-};
-
 const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
@@ -2695,8 +2585,119 @@ function generateField(field, config, props) {
   }
 }
 
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
+    if (fieldName === FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return `react-select-id_${fieldName}-input`;
+  });
+  const errorFieldElement = formElementsList.find(element => {
+    if (element.name) {
+      return getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  const errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    let errorElement;
+    try {
+      const 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);
+    }
+    if (errorElement) {
+      errorElement.scrollIntoView({
+        block: 'center'
+      }); // , behavior: 'smooth'
+    }
+  }
+
+  // The field is covered by the header because header is "sticky",
+  // that's we scroll manually so that the field falls into the center of the visible area
+  if (errorFieldElement) {
+    errorFieldElement.scrollIntoView({
+      block: 'center'
+    });
+  }
+  return null;
+};
+const focusOnErrorDecorator = createDecorator(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
+  if (fieldName === 'non_field_errors') {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
+
+      // 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;
+    }
+  }
+};
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
+
 const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
+    isLoading,
     additionalProps,
     after,
     before,
@@ -2707,13 +2708,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     buttonPadding,
     className,
     config,
-    dataTour,
     dataTestId,
-    dataTourButtons,
     dataTestIdButtons,
     dataTestIdPrimaryButton,
     dataTestIdSecondaryButton,
     dataTestIdTertiaryButton,
+    dataTour,
+    dataTourButtons,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2727,7 +2728,6 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     groupGap,
     initialValues,
     initialValuesEqual,
-    isLoading,
     language,
     loader,
     loaderFill,
@@ -2737,10 +2737,6 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     mutators,
     notificationCloseButton,
     notificationType,
-    onChangeFormValues,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onSubmit,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2749,6 +2745,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2771,7 +2768,11 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     titleTextSize,
     titleTextWeight,
     type,
-    validationSchema
+    validationSchema,
+    onChangeFormValues,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
+    onSubmit
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = useCallback(formInstance => {
@@ -2803,26 +2804,27 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     mutators: mutators,
+    validate: validate,
     render: ({
+      form,
       handleSubmit,
-      submitError,
       modifiedSinceLastSubmit,
-      form
+      submitError
     }) => {
       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,
-        "data-test-id": dataTestId
+        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
         ref: () => onRefFormInstance(form),
-        onSubmit: handleSubmit,
+        name: formName,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+        "data-test-id": dataTestId,
+        "data-tour": dataTour,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
+        style: formStyles,
+        onSubmit: handleSubmit
       }, before, title && /*#__PURE__*/React.createElement(Title, {
         className: "form__title",
         size: titleTextSize,
@@ -2837,88 +2839,88 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         className: clsx('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
       }, /*#__PURE__*/React.createElement(NotificationItem, {
         className: "form-notification__item",
-        titleTextSize: "h6",
         closeButton: notificationCloseButton,
+        status: "error",
         title: form.getState().submitError,
-        set: "form",
-        status: "error"
+        titleTextSize: "h6",
+        set: "form"
       })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(Group$1, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper( /*#__PURE__*/React.createElement(Group$1, {
+        className: "form__wrapper",
         direction: "vertical",
-        gap: fieldsGap || groupGap,
-        className: "form__wrapper"
+        gap: fieldsGap || groupGap
       }, Object.keys(config).map(key => generateField(config[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, {
+        text: loaderText,
+        set: loaderSet
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
+        className: "form__button",
         fill: buttonFill,
-        justifyContent: buttonJustifyContent,
-        direction: buttonDirection,
         padding: buttonPadding,
-        gap: buttonGap,
-        className: "form__button",
+        dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        dataTestId: dataTestIdButtons
+        direction: buttonDirection,
+        gap: buttonGap,
+        justifyContent: buttonJustifyContent
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
         fill: primaryButtonFill,
         fillHover: primaryButtonFillHover,
-        size: primaryButtonSize,
-        labelTextColor: primaryButtonLabelTextColor,
-        labelSize: primaryButtonLabelSize,
-        labelTextWeight: primaryButtonLabelTextWeight,
-        label: primaryButtonLabel,
+        dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        dataTestId: dataTestIdPrimaryButton
+        label: primaryButtonLabel,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        size: primaryButtonSize
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelTextSize: secondaryButtonLabelSize,
         fill: secondaryButtonFill,
         fillHover: secondaryButtonFillHover,
-        size: secondaryButtonSize,
-        labelTextColor: secondaryButtonLabelTextColor,
-        labelSize: secondaryButtonLabelSize,
-        labelTextWeight: secondaryButtonLabelTextWeight,
-        label: secondaryButtonLabel,
-        onClick: onClickSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        dataTestId: dataTestIdSecondaryButton
+        label: secondaryButtonLabel,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        size: secondaryButtonSize,
+        onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelTextSize: tertiaryButtonLabelSize,
         fill: tertiaryButtonFill,
         fillHover: tertiaryButtonFillHover,
-        size: tertiaryButtonSize,
-        labelTextColor: tertiaryButtonLabelTextColor,
-        labelSize: tertiaryButtonLabelSize,
-        labelTextWeight: tertiaryButtonLabelTextWeight,
-        label: tertiaryButtonLabel,
-        onClick: onClickTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        dataTestId: dataTestIdTertiaryButton
+        label: tertiaryButtonLabel,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        size: tertiaryButtonSize,
+        onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {
-      submitting: true,
-      pristine: true,
       modifiedSinceLastSubmit: true,
-      submitError: true
+      pristine: true,
+      submitError: true,
+      submitting: true
     },
-    validate: validate,
     onSubmit: onSubmit
   });
 });
 FinalForm.propTypes = {
+  isLoading: PropTypes.bool,
   additionalProps: PropTypes.object,
   after: PropTypes.any,
   before: PropTypes.any,
@@ -2944,7 +2946,6 @@ FinalForm.propTypes = {
   groupGap: PropTypes.string,
   initialValues: PropTypes.any,
   initialValuesEqual: PropTypes.any,
-  isLoading: PropTypes.bool,
   language: PropTypes.string,
   loader: PropTypes.element,
   loaderFill: PropTypes.string,
@@ -2992,16 +2993,16 @@ FinalForm.propTypes = {
   onSubmit: PropTypes.func
 };
 FinalForm.defaultProps = {
-  additionalProps: {},
+  direction: 'vertical',
   isLoading: false,
-  loaderSet: 'simple',
+  additionalProps: {},
+  buttonDirection: 'vertical',
+  disableFieldsAutoComplete: false,
+  language: 'en',
   loaderFill: 'surfacePrimary',
   loaderItemFill: 'surfaceItemAccent',
-  language: 'en',
-  titleSize: 'h1',
-  buttonDirection: 'vertical',
-  direction: 'vertical',
-  disableFieldsAutoComplete: false
+  loaderSet: 'simple',
+  titleSize: 'h1'
 };
 
 const DEFAULT_MESSAGES_FIELDS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",