@itcase/forms 1.0.82 → 1.1.0

package/dist/css/form/FormField/FormField.css

@@ -1,5 +1,3 @@
-/* stylelint-disable plugin/no-unsupported-browser-features */
-
 .form-field {
   &__content {
     &-inner {
@@ -25,7 +23,6 @@
     right: 8px;
   }
 }
-
 .form {
   &-field {
     &_type_code {
@@ -35,10 +32,9 @@
     }
   }
 }
-
 .form {
   &^&-field_type_float {
-    padding: var(--form-field_type_float-padding);
+    padding: var(--form-field_type_float-padding, 12px 0 12px 0);
     margin: var(--form-field_type_float-margin);
     position: relative;
     gap: var(--form-field_type_float-gap);
@@ -84,7 +80,6 @@
     }
   }
 }
-
 .form-field {
   &_type {
     &_normal {
@@ -95,7 +90,6 @@
     }
   }
 }
-
 .form-field {
   &_state {
     &_hidden {
@@ -105,7 +99,6 @@
     }
   }
 }
-
 .form-field {
   &_state {
     &_disabled {

package/dist/itcase-forms.cjs.js

@@ -2547,22 +2547,22 @@ ChipsField.propTypes = {
 };
 
 const formTypes = {
-  checkbox: 'checkbox',
+  code: 'code',
+  text: 'text',
+  textarea: 'textarea',
   custom: 'custom',
-  choice: 'choice',
+  checkbox: 'checkbox',
   chips: 'chips',
-  code: 'code',
+  choice: 'choice',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
   group: 'group',
+  maskedInput: 'maskedInput',
   radioGroup: 'radioGroup',
   segmented: 'segmented',
   select: 'select',
-  switch: 'switch',
-  text: 'text',
-  textarea: 'textarea',
-  maskedInput: 'maskedInput'
+  switch: 'switch'
 };
 function generateField(field, config, props) {
   switch (field.type) {
@@ -2657,8 +2657,8 @@ function generateField(field, config, props) {
         }, field, props), Object.entries(field.group).map(([key, value]) => {
           const groupProps = {
             ...value,
-            showMessage: field.showMessage,
-            classNameGroupItem: value.classNameGroupItem || 'form__group-item'
+            classNameGroupItem: value.classNameGroupItem || 'form__group-item',
+            showMessage: field.showMessage
           };
           return generateField(groupProps, {
             key: key + '_form_group'
@@ -2780,19 +2780,48 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    isLoading,
+    additionalProps,
+    after,
+    before,
+    buttonDirection,
+    buttonFill,
+    buttonGap,
+    buttonJustifyContent,
+    buttonPadding,
     className,
-    type,
-    initialValues,
-    initialValuesEqual,
     config,
-    title,
-    titleTextColor,
-    titleTextSize,
-    titleTextWeight,
+    dataTestId,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
     description,
     descriptionSize,
     descriptionTextColor,
     descriptionTextWeight,
+    disableFieldsAutoComplete,
+    fieldsGap,
+    formName,
+    groupGap,
+    initialValues,
+    initialValuesEqual,
+    language,
+    loader,
+    loaderFill,
+    loaderItemFill,
+    loaderShape,
+    loaderSize,
+    loaderText,
+    loaderType,
+    mutators,
+    notificationCloseButton,
+    notificationType,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2801,6 +2830,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2809,6 +2839,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
     secondaryButtonSize,
+    set,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
@@ -2817,41 +2848,12 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
-    dataTestIdPrimaryButton,
-    dataTourPrimaryButton,
-    dataTestIdSecondaryButton,
-    dataTourSecondaryButton,
-    dataTestIdTertiaryButton,
-    dataTourTertiaryButton,
-    additionalProps,
-    buttonDirection,
-    buttonFill,
-    buttonGap,
-    buttonJustifyContent,
-    buttonPadding,
-    dataTestId,
-    dataTestIdButtons,
-    dataTour,
-    dataTourButtons,
-    disableFieldsAutoComplete,
-    fieldsGap,
-    formName,
-    groupGap,
-    language,
-    loader,
-    loaderFill,
-    loaderItemFill,
-    loaderSet,
-    loaderText,
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
+    title,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
+    type,
     validationSchema,
-    before,
-    after,
-    isLoading,
-    set,
     onChangeFormValues,
     onClickSecondaryButton,
     onClickTertiaryButton,
@@ -2884,25 +2886,28 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     wrapper: wrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
+    decorators: [focusOnErrorDecorator],
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
+    mutators: mutators,
+    validate: validate,
     render: ({
-      submitError,
       form,
       handleSubmit,
-      modifiedSinceLastSubmit
+      modifiedSinceLastSubmit,
+      submitError
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        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),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
         "data-test-id": dataTestId,
-        "data-tour": dataTour
-        // We no need set reference to html element, we need reference to "final-form" instance
-        ,
-        ref: () => onRefFormInstance(form),
+        "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
@@ -2920,10 +2925,10 @@ 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",
+        closeButton: notificationCloseButton,
+        status: "error",
         title: form.getState().submitError,
         titleTextSize: "h6",
-        status: "error",
-        closeButton: notificationCloseButton,
         set: "form"
       })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
         subscription: {
@@ -2940,85 +2945,105 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
         className: "form__loader",
         fill: loaderFill,
-        text: loaderText,
         itemFill: loaderItemFill,
-        set: loaderSet
+        shape: loaderShape,
+        size: loaderSize,
+        text: loaderText,
+        type: loaderType
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
         className: "form__button",
-        direction: buttonDirection,
-        justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
         dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        direction: buttonDirection,
+        gap: buttonGap,
+        justifyContent: buttonJustifyContent
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         className: "form__button-item",
         width: "fill",
-        size: primaryButtonSize,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
         fill: primaryButtonFill,
         fillHover: primaryButtonFillHover,
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         label: primaryButtonLabel,
-        labelTextColor: primaryButtonLabelTextColor,
-        labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton
+        size: primaryButtonSize
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         className: "form__button-item",
         width: "fill",
-        size: secondaryButtonSize,
-        fill: secondaryButtonFill,
-        fillHover: secondaryButtonFillHover,
-        label: secondaryButtonLabel,
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
-        labelTextWeight: secondaryButtonLabelTextWeight,
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
         dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
+        label: secondaryButtonLabel,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        size: secondaryButtonSize,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         className: "form__button-item",
         width: "fill",
-        size: tertiaryButtonSize,
-        fill: tertiaryButtonFill,
-        fillHover: tertiaryButtonFillHover,
-        label: tertiaryButtonLabel,
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
-        labelTextWeight: tertiaryButtonLabelTextWeight,
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
         dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
+        label: tertiaryButtonLabel,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        size: tertiaryButtonSize,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },
-    decorators: [focusOnErrorDecorator],
-    mutators: mutators,
     subscription: {
-      submitError: true,
       modifiedSinceLastSubmit: 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,
+  buttonDirection: PropTypes__default.default.string,
+  buttonFill: PropTypes__default.default.string,
+  buttonGap: PropTypes__default.default.string,
+  buttonJustifyContent: PropTypes__default.default.string,
+  buttonPadding: PropTypes__default.default.string,
   className: PropTypes__default.default.string,
-  type: PropTypes__default.default.string,
-  initialValues: PropTypes__default.default.any,
-  initialValuesEqual: PropTypes__default.default.any,
   config: PropTypes__default.default.object,
-  title: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.string,
-  titleTextColor: PropTypes__default.default.string,
-  titleTextSize: PropTypes__default.default.string,
-  titleTextWeight: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
+  dataTourButtons: PropTypes__default.default.string,
+  dataTourPrimaryButton: PropTypes__default.default.string,
+  dataTourSecondaryButton: PropTypes__default.default.string,
+  dataTourTertiaryButton: PropTypes__default.default.string,
   description: PropTypes__default.default.string,
   descriptionSize: PropTypes__default.default.string,
   descriptionTextColor: PropTypes__default.default.string,
   descriptionTextWeight: PropTypes__default.default.string,
+  disableFieldsAutoComplete: PropTypes__default.default.bool,
+  fieldsGap: PropTypes__default.default.string,
+  formName: PropTypes__default.default.string,
+  groupGap: PropTypes__default.default.string,
+  initialValues: PropTypes__default.default.any,
+  initialValuesEqual: PropTypes__default.default.any,
+  language: PropTypes__default.default.string,
+  loader: PropTypes__default.default.element,
+  loaderFill: PropTypes__default.default.string,
+  loaderItemFill: PropTypes__default.default.string,
+  loaderSet: PropTypes__default.default.string,
+  loaderText: PropTypes__default.default.string,
+  mutators: PropTypes__default.default.any,
+  notificationCloseButton: PropTypes__default.default.element,
+  notificationType: PropTypes__default.default.string,
   primaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   primaryButtonFill: PropTypes__default.default.string,
   primaryButtonFillHover: PropTypes__default.default.string,
@@ -3035,6 +3060,7 @@ FinalForm.propTypes = {
   secondaryButtonLabelTextColor: PropTypes__default.default.string,
   secondaryButtonLabelTextWeight: PropTypes__default.default.string,
   secondaryButtonSize: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
   tertiaryButton: PropTypes__default.default.element,
   tertiaryButtonFill: PropTypes__default.default.string,
   tertiaryButtonFillHover: PropTypes__default.default.string,
@@ -3043,35 +3069,13 @@ FinalForm.propTypes = {
   tertiaryButtonLabelTextColor: PropTypes__default.default.string,
   tertiaryButtonLabelTextWeight: PropTypes__default.default.string,
   tertiaryButtonSize: PropTypes__default.default.string,
-  dataTourPrimaryButton: PropTypes__default.default.string,
-  dataTourSecondaryButton: PropTypes__default.default.string,
-  dataTourTertiaryButton: PropTypes__default.default.string,
-  additionalProps: PropTypes__default.default.object,
-  buttonDirection: PropTypes__default.default.string,
-  buttonFill: PropTypes__default.default.string,
-  buttonGap: PropTypes__default.default.string,
-  buttonJustifyContent: PropTypes__default.default.string,
-  buttonPadding: PropTypes__default.default.string,
-  dataTour: PropTypes__default.default.string,
-  dataTourButtons: PropTypes__default.default.string,
-  disableFieldsAutoComplete: PropTypes__default.default.bool,
-  fieldsGap: PropTypes__default.default.string,
-  formName: PropTypes__default.default.string,
-  groupGap: PropTypes__default.default.string,
-  language: PropTypes__default.default.string,
-  loader: PropTypes__default.default.element,
-  loaderFill: PropTypes__default.default.string,
-  loaderItemFill: PropTypes__default.default.string,
-  loaderSet: PropTypes__default.default.string,
-  loaderText: PropTypes__default.default.string,
-  mutators: PropTypes__default.default.any,
-  notificationCloseButton: PropTypes__default.default.element,
-  notificationType: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.string,
+  titleTextWeight: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
   validationSchema: PropTypes__default.default.object,
-  before: PropTypes__default.default.any,
-  after: PropTypes__default.default.any,
-  isLoading: PropTypes__default.default.bool,
-  set: PropTypes__default.default.string,
   onChangeFormValues: PropTypes__default.default.func,
   onClickSecondaryButton: PropTypes__default.default.func,
   onClickTertiaryButton: PropTypes__default.default.func,
@@ -3079,7 +3083,7 @@ FinalForm.propTypes = {
 };
 FinalForm.defaultProps = {
   direction: 'vertical',
-  titleSize: 'h1',
+  isLoading: false,
   additionalProps: {},
   buttonDirection: 'vertical',
   disableFieldsAutoComplete: false,
@@ -3087,7 +3091,7 @@ FinalForm.defaultProps = {
   loaderFill: 'surfacePrimary',
   loaderItemFill: 'surfaceItemAccent',
   loaderSet: 'simple',
-  isLoading: false
+  titleSize: 'h1'
 };
 
 const DEFAULT_MESSAGES_FIELDS = {

package/dist/itcase-forms.esm.js

@@ -2535,22 +2535,22 @@ ChipsField.propTypes = {
 };
 
 const formTypes = {
-  checkbox: 'checkbox',
+  code: 'code',
+  text: 'text',
+  textarea: 'textarea',
   custom: 'custom',
-  choice: 'choice',
+  checkbox: 'checkbox',
   chips: 'chips',
-  code: 'code',
+  choice: 'choice',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
   group: 'group',
+  maskedInput: 'maskedInput',
   radioGroup: 'radioGroup',
   segmented: 'segmented',
   select: 'select',
-  switch: 'switch',
-  text: 'text',
-  textarea: 'textarea',
-  maskedInput: 'maskedInput'
+  switch: 'switch'
 };
 function generateField(field, config, props) {
   switch (field.type) {
@@ -2645,8 +2645,8 @@ function generateField(field, config, props) {
         }, field, props), Object.entries(field.group).map(([key, value]) => {
           const groupProps = {
             ...value,
-            showMessage: field.showMessage,
-            classNameGroupItem: value.classNameGroupItem || 'form__group-item'
+            classNameGroupItem: value.classNameGroupItem || 'form__group-item',
+            showMessage: field.showMessage
           };
           return generateField(groupProps, {
             key: key + '_form_group'
@@ -2768,19 +2768,48 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
+    isLoading,
+    additionalProps,
+    after,
+    before,
+    buttonDirection,
+    buttonFill,
+    buttonGap,
+    buttonJustifyContent,
+    buttonPadding,
     className,
-    type,
-    initialValues,
-    initialValuesEqual,
     config,
-    title,
-    titleTextColor,
-    titleTextSize,
-    titleTextWeight,
+    dataTestId,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
     description,
     descriptionSize,
     descriptionTextColor,
     descriptionTextWeight,
+    disableFieldsAutoComplete,
+    fieldsGap,
+    formName,
+    groupGap,
+    initialValues,
+    initialValuesEqual,
+    language,
+    loader,
+    loaderFill,
+    loaderItemFill,
+    loaderShape,
+    loaderSize,
+    loaderText,
+    loaderType,
+    mutators,
+    notificationCloseButton,
+    notificationType,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2789,6 +2818,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2797,6 +2827,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
     secondaryButtonSize,
+    set,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
@@ -2805,41 +2836,12 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
-    dataTestIdPrimaryButton,
-    dataTourPrimaryButton,
-    dataTestIdSecondaryButton,
-    dataTourSecondaryButton,
-    dataTestIdTertiaryButton,
-    dataTourTertiaryButton,
-    additionalProps,
-    buttonDirection,
-    buttonFill,
-    buttonGap,
-    buttonJustifyContent,
-    buttonPadding,
-    dataTestId,
-    dataTestIdButtons,
-    dataTour,
-    dataTourButtons,
-    disableFieldsAutoComplete,
-    fieldsGap,
-    formName,
-    groupGap,
-    language,
-    loader,
-    loaderFill,
-    loaderItemFill,
-    loaderSet,
-    loaderText,
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
+    title,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
+    type,
     validationSchema,
-    before,
-    after,
-    isLoading,
-    set,
     onChangeFormValues,
     onClickSecondaryButton,
     onClickTertiaryButton,
@@ -2872,25 +2874,28 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     wrapper: wrapperStyles
   } = useStyles(props);
   return /*#__PURE__*/React.createElement(Form, {
+    decorators: [focusOnErrorDecorator],
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
+    mutators: mutators,
+    validate: validate,
     render: ({
-      submitError,
       form,
       handleSubmit,
-      modifiedSinceLastSubmit
+      modifiedSinceLastSubmit,
+      submitError
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        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),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
         "data-test-id": dataTestId,
-        "data-tour": dataTour
-        // We no need set reference to html element, we need reference to "final-form" instance
-        ,
-        ref: () => onRefFormInstance(form),
+        "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
         onSubmit: handleSubmit
@@ -2908,10 +2913,10 @@ 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",
+        closeButton: notificationCloseButton,
+        status: "error",
         title: form.getState().submitError,
         titleTextSize: "h6",
-        status: "error",
-        closeButton: notificationCloseButton,
         set: "form"
       })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {
@@ -2928,85 +2933,105 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
         className: "form__loader",
         fill: loaderFill,
-        text: loaderText,
         itemFill: loaderItemFill,
-        set: loaderSet
+        shape: loaderShape,
+        size: loaderSize,
+        text: loaderText,
+        type: loaderType
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
         className: "form__button",
-        direction: buttonDirection,
-        justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
-        gap: buttonGap,
         dataTestId: dataTestIdButtons,
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        direction: buttonDirection,
+        gap: buttonGap,
+        justifyContent: buttonJustifyContent
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         width: "fill",
-        size: primaryButtonSize,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
         fill: primaryButtonFill,
         fillHover: primaryButtonFillHover,
+        dataTestId: dataTestIdPrimaryButton,
+        dataTour: dataTourPrimaryButton,
         label: primaryButtonLabel,
-        labelTextColor: primaryButtonLabelTextColor,
-        labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        dataTestId: dataTestIdPrimaryButton,
-        dataTour: dataTourPrimaryButton
+        size: primaryButtonSize
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         width: "fill",
-        size: secondaryButtonSize,
-        fill: secondaryButtonFill,
-        fillHover: secondaryButtonFillHover,
-        label: secondaryButtonLabel,
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
-        labelTextWeight: secondaryButtonLabelTextWeight,
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
         dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
+        label: secondaryButtonLabel,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        size: secondaryButtonSize,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         className: "form__button-item",
         width: "fill",
-        size: tertiaryButtonSize,
-        fill: tertiaryButtonFill,
-        fillHover: tertiaryButtonFillHover,
-        label: tertiaryButtonLabel,
         labelTextColor: tertiaryButtonLabelTextColor,
         labelTextSize: tertiaryButtonLabelSize,
-        labelTextWeight: tertiaryButtonLabelTextWeight,
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
         dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
+        label: tertiaryButtonLabel,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        size: tertiaryButtonSize,
         onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },
-    decorators: [focusOnErrorDecorator],
-    mutators: mutators,
     subscription: {
-      submitError: true,
       modifiedSinceLastSubmit: 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,
+  buttonDirection: PropTypes.string,
+  buttonFill: PropTypes.string,
+  buttonGap: PropTypes.string,
+  buttonJustifyContent: PropTypes.string,
+  buttonPadding: PropTypes.string,
   className: PropTypes.string,
-  type: PropTypes.string,
-  initialValues: PropTypes.any,
-  initialValuesEqual: PropTypes.any,
   config: PropTypes.object,
-  title: PropTypes.string,
-  titleSize: PropTypes.string,
-  titleTextColor: PropTypes.string,
-  titleTextSize: PropTypes.string,
-  titleTextWeight: PropTypes.string,
+  dataTour: PropTypes.string,
+  dataTourButtons: PropTypes.string,
+  dataTourPrimaryButton: PropTypes.string,
+  dataTourSecondaryButton: PropTypes.string,
+  dataTourTertiaryButton: PropTypes.string,
   description: PropTypes.string,
   descriptionSize: PropTypes.string,
   descriptionTextColor: PropTypes.string,
   descriptionTextWeight: PropTypes.string,
+  disableFieldsAutoComplete: PropTypes.bool,
+  fieldsGap: PropTypes.string,
+  formName: PropTypes.string,
+  groupGap: PropTypes.string,
+  initialValues: PropTypes.any,
+  initialValuesEqual: PropTypes.any,
+  language: PropTypes.string,
+  loader: PropTypes.element,
+  loaderFill: PropTypes.string,
+  loaderItemFill: PropTypes.string,
+  loaderSet: PropTypes.string,
+  loaderText: PropTypes.string,
+  mutators: PropTypes.any,
+  notificationCloseButton: PropTypes.element,
+  notificationType: PropTypes.string,
   primaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   primaryButtonFill: PropTypes.string,
   primaryButtonFillHover: PropTypes.string,
@@ -3023,6 +3048,7 @@ FinalForm.propTypes = {
   secondaryButtonLabelTextColor: PropTypes.string,
   secondaryButtonLabelTextWeight: PropTypes.string,
   secondaryButtonSize: PropTypes.string,
+  set: PropTypes.string,
   tertiaryButton: PropTypes.element,
   tertiaryButtonFill: PropTypes.string,
   tertiaryButtonFillHover: PropTypes.string,
@@ -3031,35 +3057,13 @@ FinalForm.propTypes = {
   tertiaryButtonLabelTextColor: PropTypes.string,
   tertiaryButtonLabelTextWeight: PropTypes.string,
   tertiaryButtonSize: PropTypes.string,
-  dataTourPrimaryButton: PropTypes.string,
-  dataTourSecondaryButton: PropTypes.string,
-  dataTourTertiaryButton: PropTypes.string,
-  additionalProps: PropTypes.object,
-  buttonDirection: PropTypes.string,
-  buttonFill: PropTypes.string,
-  buttonGap: PropTypes.string,
-  buttonJustifyContent: PropTypes.string,
-  buttonPadding: PropTypes.string,
-  dataTour: PropTypes.string,
-  dataTourButtons: PropTypes.string,
-  disableFieldsAutoComplete: PropTypes.bool,
-  fieldsGap: PropTypes.string,
-  formName: PropTypes.string,
-  groupGap: PropTypes.string,
-  language: PropTypes.string,
-  loader: PropTypes.element,
-  loaderFill: PropTypes.string,
-  loaderItemFill: PropTypes.string,
-  loaderSet: PropTypes.string,
-  loaderText: PropTypes.string,
-  mutators: PropTypes.any,
-  notificationCloseButton: PropTypes.element,
-  notificationType: PropTypes.string,
+  title: PropTypes.string,
+  titleSize: PropTypes.string,
+  titleTextColor: PropTypes.string,
+  titleTextSize: PropTypes.string,
+  titleTextWeight: PropTypes.string,
+  type: PropTypes.string,
   validationSchema: PropTypes.object,
-  before: PropTypes.any,
-  after: PropTypes.any,
-  isLoading: PropTypes.bool,
-  set: PropTypes.string,
   onChangeFormValues: PropTypes.func,
   onClickSecondaryButton: PropTypes.func,
   onClickTertiaryButton: PropTypes.func,
@@ -3067,7 +3071,7 @@ FinalForm.propTypes = {
 };
 FinalForm.defaultProps = {
   direction: 'vertical',
-  titleSize: 'h1',
+  isLoading: false,
   additionalProps: {},
   buttonDirection: 'vertical',
   disableFieldsAutoComplete: false,
@@ -3075,7 +3079,7 @@ FinalForm.defaultProps = {
   loaderFill: 'surfacePrimary',
   loaderItemFill: 'surfaceItemAccent',
   loaderSet: 'simple',
-  isLoading: false
+  titleSize: 'h1'
 };
 
 const DEFAULT_MESSAGES_FIELDS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.82",
+  "version": "1.1.0",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,14 +30,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.22",
-    "@itcase/config": "^1.0.26",
-    "@itcase/ui": "^1.4.5",
-    "axios": "^1.8.4",
+    "@itcase/common": "^1.2.23",
+    "@itcase/config": "^1.0.43",
+    "@itcase/ui": "^1.8.1",
+    "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.12.6",
+    "libphonenumber-js": "^1.12.8",
     "lodash": "^4.17.21",
     "luxon": "^3.6.1",
     "prop-types": "^15.8.1",
@@ -51,13 +51,13 @@
     "react-select": "^5.10.1"
   },
   "devDependencies": {
-    "@itcase/lint": "^1.1.4",
-    "@babel/core": "^7.26.10",
-    "@babel/eslint-parser": "^7.27.0",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@itcase/lint": "^1.1.9",
+    "@babel/core": "^7.27.1",
+    "@babel/eslint-parser": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -71,15 +71,15 @@
     "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.24.0",
+    "eslint": "9.26.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^16.0.0",
     "postcss": "^8.5.3",
     "prettier": "3.5.3",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.3",
-    "stylelint": "^16.18.0",
+    "stylelint": "^16.19.1",
     "typescript": "^5.8.3"
   }
 }