@itcase/forms 1.1.49 → 1.1.51

package/dist/css/form/Field/Code/FormFieldCode.css

@@ -7,27 +7,81 @@
       text-align: center;
     }
     &^&_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs {
-        &_$(size) {
-          gap: var(--form-filed-code-size-$(size)-gap);
+        &_xxl {
+          gap: var(--form-filed-code-size-xxl-gap);
+        }
+        &_xl {
+          gap: var(--form-filed-code-size-xl-gap);
+        }
+        &_l {
+          gap: var(--form-filed-code-size-l-gap);
+        }
+        &_m {
+          gap: var(--form-filed-code-size-m-gap);
+        }
+        &_s {
+          gap: var(--form-filed-code-size-s-gap);
+        }
+        &_xs {
+          gap: var(--form-filed-code-size-xs-gap);
+        }
+        &_xxs {
+          gap: var(--form-filed-code-size-xxs-gap);
         }
-      }
     }
   }
 }
 .form-field_type_code {
-  @each $state in error, success, require, disabled, focus {
-    &.form__item_state_$(state) {
+    &.form__item_state_error {
       & .form-field__label {
         & .text {
-          color: var(--form-code-$(state)-label-color);
+          color: var(--form-code-error-label-color);
         }
       }
-      & .form-field__message-item_type-$(state) {
-        color: var(--form-code-$(state)-helptext-color);
+      & .form-field__message-item_type-error {
+        color: var(--form-code-error-helptext-color);
+      }
+    }
+    &.form__item_state_success {
+      & .form-field__label {
+        & .text {
+          color: var(--form-code-success-label-color);
+        }
+      }
+      & .form-field__message-item_type-success {
+        color: var(--form-code-success-helptext-color);
+      }
+    }
+    &.form__item_state_require {
+      & .form-field__label {
+        & .text {
+          color: var(--form-code-require-label-color);
+        }
+      }
+      & .form-field__message-item_type-require {
+        color: var(--form-code-require-helptext-color);
+      }
+    }
+    &.form__item_state_disabled {
+      & .form-field__label {
+        & .text {
+          color: var(--form-code-disabled-label-color);
+        }
+      }
+      & .form-field__message-item_type-disabled {
+        color: var(--form-code-disabled-helptext-color);
+      }
+    }
+    &.form__item_state_focus {
+      & .form-field__label {
+        & .text {
+          color: var(--form-code-focus-label-color);
+        }
+      }
+      & .form-field__message-item_type-focus {
+        color: var(--form-code-focus-helptext-color);
       }
     }
-  }
 }
 :root {
   --form-filed-code-size-l-gap: 8px;

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

@@ -7,13 +7,26 @@
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
     &_size {
-      @each $size in xl, l, m, s {
-        &_$(size) {
+        &_xl {
           ^^&-wrapper {
-            padding: var(--fileinput-size-$(size)-padding);
+            padding: var(--fileinput-size-xl-padding);
+          }
+        }
+        &_l {
+          ^^&-wrapper {
+            padding: var(--fileinput-size-l-padding);
+          }
+        }
+        &_m {
+          ^^&-wrapper {
+            padding: var(--fileinput-size-m-padding);
+          }
+        }
+        &_s {
+          ^^&-wrapper {
+            padding: var(--fileinput-size-s-padding);
           }
         }
-      }
     }
     &-wrapper {
       display: grid;
@@ -117,13 +130,26 @@
 .form-dropzone {
   &_shape {
     &_rounded {
-      @each $size in xl, l, m, s {
-        &.form-dropzone__dropzone_size_$(size) {
+        &.form-dropzone__dropzone_size_xl {
           & .form-dropzone__dropzone-wrapper {
-            border-radius: var(--fileinput-size-$(size)-shape-rounded);
+            border-radius: var(--fileinput-size-xl-shape-rounded);
+          }
+        }
+        &.form-dropzone__dropzone_size_l {
+          & .form-dropzone__dropzone-wrapper {
+            border-radius: var(--fileinput-size-l-shape-rounded);
+          }
+        }
+        &.form-dropzone__dropzone_size_m {
+          & .form-dropzone__dropzone-wrapper {
+            border-radius: var(--fileinput-size-m-shape-rounded);
+          }
+        }
+        &.form-dropzone__dropzone_size_s {
+          & .form-dropzone__dropzone-wrapper {
+            border-radius: var(--fileinput-size-s-shape-rounded);
           }
         }
-      }
     }
     &_circular {
       border-radius: 50%;
@@ -144,14 +170,36 @@
   }
 }
 .form-dropzone__dropzone-wrapper_column {
-  @each $count in 1, 2, 3, 4, 5 {
-    &_$(count) {
-      grid-template-columns: repeat($(count), minmax(0, 1fr));
+    &_1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
       & .form-dropzone__hint {
-        grid-column: span $(count);
+        grid-column: span 1;
+      }
+    }
+    &_2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      & .form-dropzone__hint {
+        grid-column: span 2;
+      }
+    }
+    &_3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      & .form-dropzone__hint {
+        grid-column: span 3;
+      }
+    }
+    &_4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      & .form-dropzone__hint {
+        grid-column: span 4;
+      }
+    }
+    &_5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      & .form-dropzone__hint {
+        grid-column: span 5;
       }
     }
-  }
 }
 :root {
   --fileinput-size-normal-padding: 16px 16px;

package/dist/css/form/Field/Group/FormBlockGroup.css

@@ -13,16 +13,38 @@
       visibility: hidden;
     }
     &_column {
-      @each $count in 2, 3, 4, 5 {
-        &_$(count) {
+        &_2 {
           ^^&-items {
             display: grid;
             column-gap: 24px;
-            grid-template-columns: repeat($(count), 1fr);
+            grid-template-columns: repeat(2, 1fr);
+            align-items: end;
+          }
+        }
+        &_3 {
+          ^^&-items {
+            display: grid;
+            column-gap: 24px;
+            grid-template-columns: repeat(3, 1fr);
+            align-items: end;
+          }
+        }
+        &_4 {
+          ^^&-items {
+            display: grid;
+            column-gap: 24px;
+            grid-template-columns: repeat(4, 1fr);
+            align-items: end;
+          }
+        }
+        &_5 {
+          ^^&-items {
+            display: grid;
+            column-gap: 24px;
+            grid-template-columns: repeat(5, 1fr);
             align-items: end;
           }
         }
-      }
     }
     &-wrapper {
       display: flex;

package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css

@@ -14,13 +14,41 @@
 .form-field {
   &_radio {
     &.form-field_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs {
-        &_$(size) {
+        &_xxl {
           & .form-radio {
-            gap: var(--form-filed-radio-size-$(size)-gap);
+            gap: var(--form-filed-radio-size-xxl-gap);
+          }
+        }
+        &_xl {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-xl-gap);
+          }
+        }
+        &_l {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-l-gap);
+          }
+        }
+        &_m {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-m-gap);
+          }
+        }
+        &_s {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-s-gap);
+          }
+        }
+        &_xs {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-xs-gap);
+          }
+        }
+        &_xxs {
+          & .form-radio {
+            gap: var(--form-filed-radio-size-xxs-gap);
           }
         }
-      }
     }
   }
 }

package/dist/itcase-forms.cjs.js

@@ -299,8 +299,8 @@ const defaultFieldSizeXL = {
 function FieldWrapperBase(props) {
   const {
     id,
-    dataTour,
     className,
+    dataTour,
     type,
     label,
     labelHidden,
@@ -314,32 +314,32 @@ function FieldWrapperBase(props) {
     descTextColor,
     descTextSize,
     descTextWeight,
-    errorKey,
-    errorMessage,
-    isErrorState,
-    metaError,
-    helpTextColorSuccess,
-    isDisabled,
     afterItem,
     beforeItem,
     dividerDirection,
     dividerFill,
     dividerSize,
     dividerWidth,
+    errorKey,
+    errorMessage,
     fieldClassName,
     helpText,
     helpTextColor,
+    helpTextColorSuccess,
     helpTextSize,
     helpTextSizeMobile,
     helpTextWeight,
     inputName,
     inputValue,
     metaActive,
+    metaError,
     showDivider,
     showMessage,
     tag: Tag = 'div',
     before,
     after,
+    isDisabled,
+    isErrorState,
     isHidden,
     isRequired,
     isValidState,
@@ -383,12 +383,12 @@ function FieldWrapperBase(props) {
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-test-id": `${inputName}Field`,
+    "data-testid": `${inputName}Field`,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`,
+    "data-testid": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
@@ -398,7 +398,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
-    "data-test-id": `${inputName}FieldDesc`
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -415,24 +415,24 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message",
-    "data-test-id": `${inputName}FieldMessage`
+    "data-testid": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: `${inputName}-error`,
-    dataTestId: `${inputName}FieldMessageError`,
     className: "form-field__message-item form-field__message-item_type-error",
+    dataTestId: `${inputName}FieldMessageError`,
     size: errorTextSize,
     textColor: errorTextColor,
     textWeight: errorTextWeight
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
+    dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
     sizeMobile: helpTextSizeMobile
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
+    dataTestId: `${inputName}FieldMessageHelpText`,
     size: messageTextSize
   }, '\u00A0')), after);
 }
@@ -2695,30 +2695,30 @@ const setErrorsMutator = (args, state) => {
   const [fieldName, data] = args;
   const submitError = data.submitError;
   const fieldError = data.error;
-  if (fieldName === 'non_field_errors') {
+  if (fieldName === 'non_field_errors' || fieldName === finalForm.FORM_ERROR) {
     // state.formState.invalid = true
     // state.formState.valid = false
     state.formState.error = fieldError;
     state.formState.submitError = submitError;
-    console.log('non_field_errors');
-    console.log(data);
-    console.log('non_field_errors');
   } else if (fieldName in state.fields) {
-    if (fieldError) {
+    state.fields[fieldName].touched = true;
+
+    // TODO: make clear error not by empty string check
+    if (fieldError || 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) {
+
+    // TODO: make clear error not by empty string check
+    if (submitError || submitError === '') {
       const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
         [fieldName]: submitError
       });
-
-      // state.fields[fieldName].submitFailed = true
-      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitFailed = true;
+      state.fields[fieldName].submitSucceeded = false;
       state.fields[fieldName].submitError = submitError;
       state.formState.submitErrors = submitErrorsState;
       state.formState.submitFailed = true;
@@ -2884,7 +2884,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        "data-test-id": dataTestId,
+        "data-testid": dataTestId,
         "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,

package/dist/itcase-forms.esm.js

@@ -288,8 +288,8 @@ const defaultFieldSizeXL = {
 function FieldWrapperBase(props) {
   const {
     id,
-    dataTour,
     className,
+    dataTour,
     type,
     label,
     labelHidden,
@@ -303,32 +303,32 @@ function FieldWrapperBase(props) {
     descTextColor,
     descTextSize,
     descTextWeight,
-    errorKey,
-    errorMessage,
-    isErrorState,
-    metaError,
-    helpTextColorSuccess,
-    isDisabled,
     afterItem,
     beforeItem,
     dividerDirection,
     dividerFill,
     dividerSize,
     dividerWidth,
+    errorKey,
+    errorMessage,
     fieldClassName,
     helpText,
     helpTextColor,
+    helpTextColorSuccess,
     helpTextSize,
     helpTextSizeMobile,
     helpTextWeight,
     inputName,
     inputValue,
     metaActive,
+    metaError,
     showDivider,
     showMessage,
     tag: Tag = 'div',
     before,
     after,
+    isDisabled,
+    isErrorState,
     isHidden,
     isRequired,
     isValidState,
@@ -372,12 +372,12 @@ function FieldWrapperBase(props) {
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React.createElement(Tag, {
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-test-id": `${inputName}Field`,
+    "data-testid": `${inputName}Field`,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__label'),
-    "data-test-id": `${inputName}FieldLabel`,
+    "data-testid": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -387,7 +387,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
-    "data-test-id": `${inputName}FieldDesc`
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -404,24 +404,24 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
-    "data-test-id": `${inputName}FieldMessage`
+    "data-testid": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
     id: `${inputName}-error`,
-    dataTestId: `${inputName}FieldMessageError`,
     className: "form-field__message-item form-field__message-item_type-error",
+    dataTestId: `${inputName}FieldMessageError`,
     size: errorTextSize,
     textColor: errorTextColor,
     textWeight: errorTextWeight
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
-    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
+    dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
     sizeMobile: helpTextSizeMobile
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
-    dataTestId: `${inputName}FieldMessageHelpText`,
     className: "form-field__message-item form-field__message-item_type_help-text",
+    dataTestId: `${inputName}FieldMessageHelpText`,
     size: messageTextSize
   }, '\u00A0')), after);
 }
@@ -2684,30 +2684,30 @@ const setErrorsMutator = (args, state) => {
   const [fieldName, data] = args;
   const submitError = data.submitError;
   const fieldError = data.error;
-  if (fieldName === 'non_field_errors') {
+  if (fieldName === 'non_field_errors' || fieldName === FORM_ERROR) {
     // state.formState.invalid = true
     // state.formState.valid = false
     state.formState.error = fieldError;
     state.formState.submitError = submitError;
-    console.log('non_field_errors');
-    console.log(data);
-    console.log('non_field_errors');
   } else if (fieldName in state.fields) {
-    if (fieldError) {
+    state.fields[fieldName].touched = true;
+
+    // TODO: make clear error not by empty string check
+    if (fieldError || 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) {
+
+    // TODO: make clear error not by empty string check
+    if (submitError || submitError === '') {
       const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
         [fieldName]: submitError
       });
-
-      // state.fields[fieldName].submitFailed = true
-      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitFailed = true;
+      state.fields[fieldName].submitSucceeded = false;
       state.fields[fieldName].submitError = submitError;
       state.formState.submitErrors = submitErrorsState;
       state.formState.submitFailed = true;
@@ -2873,7 +2873,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        "data-test-id": dataTestId,
+        "data-testid": dataTestId,
         "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.49",
+  "version": "1.1.51",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -32,23 +32,23 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.32",
-    "@itcase/config": "^1.0.57",
-    "@itcase/icons": "^1.2.23",
-    "@itcase/storybook-config": "^1.2.13",
-    "@itcase/tokens-am": "^1.1.20",
-    "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/ui": "^1.8.147",
-    "axios": "^1.12.2",
+    "@itcase/common": "^1.2.34",
+    "@itcase/config": "^1.0.72",
+    "@itcase/icons": "^1.2.28",
+    "@itcase/storybook-config": "^1.2.29",
+    "@itcase/tokens-am": "^1.1.37",
+    "@itcase/tokens-baikal": "^1.1.37",
+    "@itcase/ui": "^1.9.28",
+    "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
     "final-form-focus": "1.1.2",
-    "libphonenumber-js": "^1.12.23",
+    "libphonenumber-js": "^1.12.31",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
     "react": "^18.3.1",
     "react-date-range": "^2.0.1",
-    "react-datepicker": "^8.7.0",
+    "react-datepicker": "^8.10.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",
     "react-final-form": "6.5.9",
@@ -56,16 +56,16 @@
     "react-select": "^5.10.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@itcase/lint": "^1.1.67",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@commitlint/cli": "^20.2.0",
+    "@commitlint/config-conventional": "^20.2.0",
+    "@itcase/lint": "^1.1.69",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.1.0",
@@ -74,16 +74,16 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.37.0",
+    "eslint": "9.39.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.3",
+    "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
-    "prettier": "3.6.2",
-    "rollup": "^4.52.4",
+    "prettier": "3.7.4",
+    "rollup": "^4.53.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.2.9",
-    "storybook": "^9.1.10",
-    "stylelint": "^16.25.0",
+    "semantic-release": "^25.0.2",
+    "storybook": "^10.1.4",
+    "stylelint": "^16.26.1",
     "typescript": "^5.9.3",
     "yup": "^1.7.1"
   }