@itcase/forms 1.1.42 → 1.1.44

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

@@ -110,6 +110,21 @@
     border-radius: 12px;
   }
 }
+.form {
+  &_title-position {
+    &_sticky {
+      ^^&__title {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+      }
+      ^^&__wrapper {
+        overflow: scroll;
+        flex: 1;
+      }
+    }
+  }
+}
 .form {
   &_type_bottom-button {
     flex: 1;
@@ -139,11 +154,6 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      ^^&__title {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
       ^^&__wrapper {
         overflow: scroll;
         flex: 1;

package/dist/css/styles/main.css

@@ -7,6 +7,6 @@ textarea:autofill:focus,
 select:autofill,
 select:autofill:hover,
 select:autofill:focus {
-  box-shadow: 0 0 0 1000px #fff inset;
+  box-shadow: 0 0 0 1000px transparent inset;
   transition: background-color 5000s ease-in-out 0s;
 }

package/dist/itcase-forms.cjs.js

@@ -2642,9 +2642,9 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    className,
     dataTestId,
     dataTour,
-    className,
     type,
     initialValues,
     initialValuesEqual,
@@ -2652,6 +2652,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     validationSchema,
     title,
     titleFill,
+    titlePosition,
     titleTextColor,
     titleTextSize,
     titleTextWeight,
@@ -2660,8 +2661,36 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     descTextColor,
     descTextWeight,
     buttonGap,
+    additionalProps = {},
+    buttonDirection = 'vertical',
+    buttonFill,
+    buttonJustifyContent,
+    buttonPadding,
+    buttonPosition,
+    dataTestIdButtons,
     dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTourButtons,
     dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
+    disableFieldsAutoComplete = false,
+    fieldsGap,
+    formName,
+    groupGap,
+    language,
+    loader,
+    loaderAppearance,
+    loaderFill = 'surfacePrimary',
+    loaderItemFill = 'accentItemSecondary',
+    loaderShape,
+    loaderSize = 'l',
+    loaderText,
+    loaderType = 'simple',
+    mutators,
+    notificationCloseButton,
+    notificationType,
     primaryButton,
     primaryButtonAppearance,
     primaryButtonFill,
@@ -2673,9 +2702,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
-    dataTestIdSecondaryButton,
-    dataTourSecondaryButton,
-    onClickSecondaryButton,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
     secondaryButtonFill,
@@ -2687,9 +2714,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
     secondaryButtonSize,
-    dataTestIdTertiaryButton,
-    dataTourTertiaryButton,
-    onClickTertiaryButton,
+    shapeStrengthClass,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
@@ -2698,35 +2723,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
-    additionalProps = {},
-    buttonDirection = 'vertical',
-    buttonFill,
-    buttonJustifyContent,
-    buttonPadding,
-    buttonPosition,
-    dataTestIdButtons,
-    dataTourButtons,
-    disableFieldsAutoComplete = false,
-    fieldsGap,
-    formName,
-    groupGap,
-    language,
-    loader,
-    loaderAppearance = 'surfacePrimary sizeM',
-    loaderFill,
-    loaderItemFill,
-    loaderShape,
-    loaderSize,
-    loaderText,
-    loaderType = 'simple',
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    shapeStrengthClass,
     before,
     after,
     isLoading,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
     onChangeFormValues,
     onSubmit
   } = props;
@@ -2751,13 +2752,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     render: ({
-      submitError,
       form,
       handleSubmit,
-      modifiedSinceLastSubmit
+      modifiedSinceLastSubmit,
+      submitError
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
@@ -2784,8 +2785,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
         className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_${notificationType}` : 'form-notification_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.Notification, {
-        className: "form-notification__item",
         appearance: "errorPrimary",
+        className: "form-notification__item",
         title: form.getState().submitError,
         titleTextSize: "h6",
         status: "error",
@@ -2803,28 +2804,28 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       }, Object.keys(config).map(key => generateField(config[key], {
         key
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+        appearance: loaderAppearance,
         className: "form__loader",
         type: loaderType,
-        appearance: loaderAppearance,
         size: loaderSize,
         fill: loaderFill,
         text: loaderText,
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group.Group, {
+        className: "form__button",
         dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
         gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        appearance: primaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        className: "form__button-item",
-        appearance: primaryButtonAppearance,
         width: "fill",
         size: primaryButtonSize,
         fill: primaryButtonFill,
@@ -2833,13 +2834,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        isDisabled: primaryButtonIsDisabled,
-        loading: primaryButtonIsLoading
+        loading: primaryButtonIsLoading,
+        isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        appearance: secondaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        className: "form__button-item",
-        appearance: secondaryButtonAppearance,
         width: "fill",
         size: secondaryButtonSize,
         fill: secondaryButtonFill,
@@ -2848,13 +2849,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
-        isDisabled: secondaryButtonIsDisabled,
         loading: secondaryButtonIsLoading,
+        isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
+        className: "form__button-item",
         dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
         fill: tertiaryButtonFill,
@@ -2869,9 +2870,9 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     decorators: [focusOnErrorDecorator],
     mutators: mutators,
     subscription: {
-      submitError: true,
       modifiedSinceLastSubmit: true,
       pristine: true,
+      submitError: true,
       submitting: true
     },
     validate: validate,

package/dist/itcase-forms.esm.js

@@ -2631,9 +2631,9 @@ const sendFormDataToServer = async (url, data) => {
 
 const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   const {
+    className,
     dataTestId,
     dataTour,
-    className,
     type,
     initialValues,
     initialValuesEqual,
@@ -2641,6 +2641,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     validationSchema,
     title,
     titleFill,
+    titlePosition,
     titleTextColor,
     titleTextSize,
     titleTextWeight,
@@ -2649,8 +2650,36 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     descTextColor,
     descTextWeight,
     buttonGap,
+    additionalProps = {},
+    buttonDirection = 'vertical',
+    buttonFill,
+    buttonJustifyContent,
+    buttonPadding,
+    buttonPosition,
+    dataTestIdButtons,
     dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
+    dataTourButtons,
     dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
+    disableFieldsAutoComplete = false,
+    fieldsGap,
+    formName,
+    groupGap,
+    language,
+    loader,
+    loaderAppearance,
+    loaderFill = 'surfacePrimary',
+    loaderItemFill = 'accentItemSecondary',
+    loaderShape,
+    loaderSize = 'l',
+    loaderText,
+    loaderType = 'simple',
+    mutators,
+    notificationCloseButton,
+    notificationType,
     primaryButton,
     primaryButtonAppearance,
     primaryButtonFill,
@@ -2662,9 +2691,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
-    dataTestIdSecondaryButton,
-    dataTourSecondaryButton,
-    onClickSecondaryButton,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
     secondaryButtonFill,
@@ -2676,9 +2703,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
     secondaryButtonSize,
-    dataTestIdTertiaryButton,
-    dataTourTertiaryButton,
-    onClickTertiaryButton,
+    shapeStrengthClass,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
@@ -2687,35 +2712,11 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
     tertiaryButtonSize,
-    additionalProps = {},
-    buttonDirection = 'vertical',
-    buttonFill,
-    buttonJustifyContent,
-    buttonPadding,
-    buttonPosition,
-    dataTestIdButtons,
-    dataTourButtons,
-    disableFieldsAutoComplete = false,
-    fieldsGap,
-    formName,
-    groupGap,
-    language,
-    loader,
-    loaderAppearance = 'surfacePrimary sizeM',
-    loaderFill,
-    loaderItemFill,
-    loaderShape,
-    loaderSize,
-    loaderText,
-    loaderType = 'simple',
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    shapeStrengthClass,
     before,
     after,
     isLoading,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
     onChangeFormValues,
     onSubmit
   } = props;
@@ -2740,13 +2741,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     render: ({
-      submitError,
       form,
       handleSubmit,
-      modifiedSinceLastSubmit
+      modifiedSinceLastSubmit,
+      submitError
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
@@ -2773,8 +2774,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
         className: clsx('notification', 'form-notification', notificationType ? `form-notification_${notificationType}` : 'form-notification_global')
       }, /*#__PURE__*/React.createElement(Notification, {
-        className: "form-notification__item",
         appearance: "errorPrimary",
+        className: "form-notification__item",
         title: form.getState().submitError,
         titleTextSize: "h6",
         status: "error",
@@ -2792,28 +2793,28 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, Object.keys(config).map(key => generateField(config[key], {
         key
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+        appearance: loaderAppearance,
         className: "form__loader",
         type: loaderType,
-        appearance: loaderAppearance,
         size: loaderSize,
         fill: loaderFill,
         text: loaderText,
         itemFill: loaderItemFill,
         shape: loaderShape
       }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group, {
+        className: "form__button",
         dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        className: "form__button",
         direction: buttonDirection,
         justifyContent: buttonJustifyContent,
         fill: buttonFill,
         padding: buttonPadding,
         gap: buttonGap
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        appearance: primaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        className: "form__button-item",
-        appearance: primaryButtonAppearance,
         width: "fill",
         size: primaryButtonSize,
         fill: primaryButtonFill,
@@ -2822,13 +2823,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        isDisabled: primaryButtonIsDisabled,
-        loading: primaryButtonIsLoading
+        loading: primaryButtonIsLoading,
+        isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        appearance: secondaryButtonAppearance,
+        className: "form__button-item",
         dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        className: "form__button-item",
-        appearance: secondaryButtonAppearance,
         width: "fill",
         size: secondaryButtonSize,
         fill: secondaryButtonFill,
@@ -2837,13 +2838,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
-        isDisabled: secondaryButtonIsDisabled,
         loading: secondaryButtonIsLoading,
+        isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        className: "form__button-item",
         dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        className: "form__button-item",
         width: "fill",
         size: tertiaryButtonSize,
         fill: tertiaryButtonFill,
@@ -2858,9 +2859,9 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     decorators: [focusOnErrorDecorator],
     mutators: mutators,
     subscription: {
-      submitError: true,
       modifiedSinceLastSubmit: true,
       pristine: true,
+      submitError: true,
       submitting: true
     },
     validate: validate,

package/package.json

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