@itcase/forms 1.0.64 → 1.0.66

package/dist/itcase-forms.cjs.js

@@ -156,6 +156,7 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextSizeMobile,
+    labelTextSizeTablet,
     labelTextWeight,
     helpText,
     helpTextSize,
@@ -227,6 +228,7 @@ function FieldWrapperBase(props) {
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     sizeMobile: labelTextSizeMobile,
+    sizeTablet: labelTextSizeTablet,
     textColor: labelTextColor,
     textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
@@ -2477,116 +2479,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 +2601,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 +2724,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 +2744,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     groupGap,
     initialValues,
     initialValuesEqual,
-    isLoading,
     language,
     loader,
     loaderFill,
@@ -2751,10 +2753,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     mutators,
     notificationCloseButton,
     notificationType,
-    onChangeFormValues,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onSubmit,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2763,6 +2761,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2785,7 +2784,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 => {
@@ -2810,33 +2813,35 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     propsKey: 'elevation'
   });
   const {
-    styles: formStyles
+    styles: formStyles,
+    wrapper: wrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
     decorators: [focusOnErrorDecorator],
     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 +2856,89 @@ 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"
+        style: wrapperStyles
       }, 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 +2964,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 +3011,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

@@ -142,6 +142,7 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextSizeMobile,
+    labelTextSizeTablet,
     labelTextWeight,
     helpText,
     helpTextSize,
@@ -213,6 +214,7 @@ function FieldWrapperBase(props) {
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     sizeMobile: labelTextSizeMobile,
+    sizeTablet: labelTextSizeTablet,
     textColor: labelTextColor,
     textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
@@ -2463,116 +2465,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 +2587,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 +2710,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 +2730,6 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     groupGap,
     initialValues,
     initialValuesEqual,
-    isLoading,
     language,
     loader,
     loaderFill,
@@ -2737,10 +2739,6 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     mutators,
     notificationCloseButton,
     notificationType,
-    onChangeFormValues,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onSubmit,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2749,6 +2747,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2771,7 +2770,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 => {
@@ -2796,33 +2799,35 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     propsKey: 'elevation'
   });
   const {
-    styles: formStyles
+    styles: formStyles,
+    wrapper: wrapperStyles
   } = useStyles(props);
   return /*#__PURE__*/React.createElement(Form, {
     decorators: [focusOnErrorDecorator],
     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 +2842,89 @@ 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"
+        style: wrapperStyles
       }, 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 +2950,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 +2997,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.66",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,13 +30,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.6",
-    "@itcase/ui": "^1.1.21",
-    "axios": "^1.7.3",
+    "@itcase/common": "^1.2.8",
+    "@itcase/ui": "^1.2.2",
+    "axios": "^1.7.4",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.11.5",
+    "libphonenumber-js": "^1.11.7",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "postcss": "^8.4.41",
@@ -51,12 +51,12 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@itcase/lint": "^1.0.8",
+    "@itcase/lint": "^1.0.10",
     "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
@@ -74,7 +74,7 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.8.0",
+    "eslint": "9.9.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-babel": "5.3.1",
@@ -82,18 +82,18 @@
     "eslint-plugin-n": "17.10.2",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-promise": "7.0.0",
+    "eslint-plugin-promise": "7.1.0",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-standard": "5.0.0",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.8",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
     "npm": "^10.8.2",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-dark-theme-class": "^1.3.0",
-    "postcss-discard-duplicates": "^7.0.0",
+    "postcss-discard-duplicates": "^7.0.1",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-extend-rule": "^4.0.0",
@@ -106,15 +106,15 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.0",
+    "postcss-preset-env": "^10.0.2",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "3.3.3",
-    "rollup": "^4.20.0",
+    "rollup": "^4.21.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.0.0",
-    "stylelint": "^16.8.1",
+    "semantic-release": "^24.1.0",
+    "stylelint": "^16.8.2",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.4",