@itcase/forms 1.1.18 → 1.1.20

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

@@ -6,11 +6,10 @@
     }
   }
   &__message {
-    padding: 4px 0 0 0;
     &-item {
       height: var(--form-field-helptext-height);
       line-height: var(--form-field-helptext-line-height);
-      padding: var(--form-field-helptext-padding, 0);
+      padding: var(--form-field-helptext-padding);
       display: block;
     }
   }
@@ -75,16 +74,16 @@
   &_type {
     &_normal {
       position: relative;
-      &.form-field {
-        &_type {
-          &_input {
-            @each $size in s, m, l, xl {
-              &.form-field_size_$(size) {
-                gap: var(--form-field_type_normal_$(size)-gap, 4px);
-                margin: var(--form-field_type_normal_$(size)-margin);
-                padding: var(--form-field_type_normal_$(size)padding);
-              }
-            }
+      @each $size in xl, l, m, s {
+        &.form-field_size_$(size) {
+          gap: var(--form-field_type_normal_$(size)-gap);
+          padding: var(--form-field_type_normal_$(size)-padding);
+          margin: var(--form-field_type_normal_$(size)-margin);
+          ^^^&__label {
+            padding: var(--form-field_type_normal_$(size)-label-padding);
+          }
+          ^^^&__message {
+            padding: var(--form-field_type_normal_$(size)-message-padding);
           }
         }
       }
@@ -94,10 +93,10 @@
 .form-field {
   &_type {
     &_classic {
-      position: relative;
-      gap: var(--form-field_type_normal-gap, 4px);
-      margin: var(--form-field_type_normal-margin);
       padding: var(--form-field_type_normal-padding);
+      margin: var(--form-field_type_normal-margin);
+      position: relative;
+      gap: var(--form-field_type_normal-gap);
     }
   }
 }
@@ -163,3 +162,9 @@
     }
   }
 }
+:root {
+  --form-field_type_normal_m-gap: 0.5m;
+  --form-field_type_normal_m-padding: 1.5m 0;
+  --form-field_type_normal_m-label-padding: 0 0.5m;
+  --form-field_type_normal_m-message-padding: 0 1.5m;
+}

package/dist/itcase-forms.cjs.js

@@ -23,7 +23,6 @@ var castArray = require('lodash/castArray');
 var reactDropzone = require('react-dropzone');
 var common = require('@itcase/common');
 var Button = require('@itcase/ui/components/Button');
-var Group$1 = require('@itcase/ui/components/Group');
 var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
@@ -34,6 +33,7 @@ var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var reactImask = require('react-imask');
 var Chips = require('@itcase/ui/components/Chips');
+var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
 
@@ -130,15 +130,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
+  size: 'm',
   labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
   errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
   dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
   helpTextSize: 's',
-  messageTextColor: 'surfaceTextSecondary',
-  messageTextSize: 's',
   requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
@@ -1546,10 +1547,10 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1559,6 +1560,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1589,18 +1591,18 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       size: iconSize,
       iconFill: iconFill,
       iconFillHover: iconFillHover,
-      imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
       shape: iconShape,
-      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
     }), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
-      imageSrc: clearIcon,
+      imageSrc: typeof clearIcon === 'string' && clearIcon,
       shape: clearIconShape,
-      SvgImage: clearIcon,
+      SvgImage: typeof clearIcon !== 'string' && clearIcon,
       onClick: onClickClearIcon
     }));
   });
@@ -2383,7 +2385,11 @@ function ChipsField(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
+    }, fieldProps), options.length ? /*#__PURE__*/React__default.default.createElement(Chips.ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
       className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
@@ -2391,7 +2397,7 @@ function ChipsField(props) {
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
       onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    }, updatedInputProps)))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));

package/dist/itcase-forms.esm.js

@@ -22,7 +22,6 @@ import castArray from 'lodash/castArray';
 import { useDropzone, ErrorCode } from 'react-dropzone';
 import { createFileFromDataURL } from '@itcase/common';
 import { Button } from '@itcase/ui/components/Button';
-import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
 import { Input } from '@itcase/ui/components/Input';
@@ -32,7 +31,8 @@ import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { useIMask } from 'react-imask';
-import { Chips } from '@itcase/ui/components/Chips';
+import { ChipsGroup, Chips } from '@itcase/ui/components/Chips';
+import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { Notification } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
@@ -119,15 +119,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
+  size: 'm',
   labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
   errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
   dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
   helpTextSize: 's',
-  messageTextColor: 'surfaceTextSecondary',
-  messageTextSize: 's',
   requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
@@ -1535,10 +1536,10 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1548,6 +1549,7 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
+    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1578,18 +1580,18 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
       size: iconSize,
       iconFill: iconFill,
       iconFillHover: iconFillHover,
-      imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
       shape: iconShape,
-      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
     }), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
-      imageSrc: clearIcon,
+      imageSrc: typeof clearIcon === 'string' && clearIcon,
       shape: clearIconShape,
-      SvgImage: clearIcon,
+      SvgImage: typeof clearIcon !== 'string' && clearIcon,
       onClick: onClickClearIcon
     }));
   });
@@ -2372,7 +2374,11 @@ function ChipsField(props) {
       showMessage: showMessage,
       isRequired: isRequired,
       isValidState: isValidState
-    }, fieldProps), options.length ? options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
+    }, fieldProps), options.length ? /*#__PURE__*/React$1.createElement(ChipsGroup, {
+      direction: "horizontal",
+      gap: "1m",
+      wrap: "wrap"
+    }, options.map(option => /*#__PURE__*/React$1.createElement(Chips, Object.assign({
       className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
@@ -2380,7 +2386,7 @@ function ChipsField(props) {
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
       onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps))) : /*#__PURE__*/React$1.createElement(Text, {
+    }, updatedInputProps)))) : /*#__PURE__*/React$1.createElement(Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@itcase/storybook-config": "^1.1.14",
     "@itcase/tokens-am": "^1.1.9",
     "@itcase/tokens-baikal": "^1.1.9",
-    "@itcase/ui": "^1.8.36",
+    "@itcase/ui": "^1.8.39",
     "axios": "^1.10.0",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
@@ -57,9 +57,9 @@
   },
   "devDependencies": {
     "@itcase/lint": "^1.1.19",
-    "@babel/core": "^7.27.4",
-    "@babel/eslint-parser": "^7.27.5",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
@@ -76,15 +76,15 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.0.0",
-    "eslint": "9.29.0",
+    "eslint": "9.30.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "postcss": "^8.5.6",
-    "prettier": "3.6.1",
+    "prettier": "3.6.2",
     "rollup": "^4.44.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.2.5",
-    "stylelint": "^16.21.0",
+    "semantic-release": "^24.2.6",
+    "stylelint": "^16.21.1",
     "typescript": "^5.8.3",
     "yup": "^1.6.1"
   }