@itcase/forms 1.1.8 → 1.1.10

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

@@ -94,6 +94,11 @@
       padding: 12px 0 0 0;
       grid-column-start: 2;
       align-self: flex-start;
+      white-space: wrap;
+      &-inner {
+        display: inline-block;
+        @mixin word-wrap;
+      }
     }
     &-remove {
       width: 100%;

package/dist/itcase-forms.cjs.js

@@ -22,6 +22,8 @@ var fileSelector = require('file-selector');
 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');
@@ -32,8 +34,6 @@ 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 Button = require('@itcase/ui/components/Button');
-var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
 
@@ -226,6 +226,9 @@ function FieldWrapperBase(props) {
   const {
     styles: formFieldStyles
   } = useStyles.useStyles(props);
+  const errorTextSize = props[`${errorKey}MessageTextSize`];
+  const errorTextColor = props[`${errorKey}MessageTextColor`];
+  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`,
@@ -264,9 +267,9 @@ function FieldWrapperBase(props) {
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: `${inputName}-error`,
     className: "form-field__message-item form-field__message-item_type-error",
-    size: validationAppearance?.textSize,
-    textColor: validationAppearance?.textColor,
-    textWeight: validationAppearance?.textWeight,
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight,
     dataTestId: `${inputName}FieldMessageError`
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
@@ -867,10 +870,8 @@ const defaultDropzoneProps = {
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
-  removeThumbText: 'удалить',
-  removeThumbTextColor: 'errorTextPrimary',
-  removeThumbTextHoverColor: 'errorTextPrimaryHover',
-  removeThumbTextSize: 's',
+  removeThumbAppearance: 'dangerPrimary sizeM',
+  removeThumbShape: 'rounded',
   shape: 'rounded',
   showFilename: true,
   thumbBorderColor: 'surfaceBorderTertiary',
@@ -1049,10 +1050,9 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     hintTitleTextSize,
     hintTitleTextWeight,
     hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbShape,
     removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
     removeThumbTextWeight,
     shapeClass,
     thumbBorderColorClass,
@@ -1066,11 +1066,11 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     thumbNameTextWrap
   } = propsGenerator;
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} thumbColumn form-dropzone__dropzone_size_${size} ${shapeClass}`
+    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass)
   }, filesList.map((file, index) => /*#__PURE__*/React__default.default.createElement("aside", {
     className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -1105,15 +1105,15 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     itemFill: "surfaceItemAccent",
     set: "simple"
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-dropzone__thumb-remove",
-    onClick: event => removeFile(event, index)
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: clsx__default.default('form-dropzone__thumb-remove')
+  }, /*#__PURE__*/React__default.default.createElement(Button.Button, {
     className: "form-dropzone__thumb-remove-text",
-    size: removeThumbTextSize,
-    textColor: removeThumbTextColor,
-    textColorHover: removeThumbTextHoverColor,
-    textWeight: removeThumbTextWeight
-  }, removeThumbText || 'Удалить')))), !filesList.length ? /*#__PURE__*/React__default.default.createElement("div", {
+    appearance: removeThumbAppearance,
+    label: removeThumbText || 'Удалить',
+    labelTextWeight: removeThumbTextWeight,
+    shape: removeThumbShape,
+    onClick: event => removeFile(event, index)
+  })))), !filesList.length ? /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-dropzone__hint"
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-dropzone__hint-title",
@@ -1121,7 +1121,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
@@ -1135,7 +1135,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
@@ -1252,8 +1252,8 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     borderColorHover,
     borderType,
     borderWidth,
-    errorMessageTextColor = 'errorTextPrimary',
-    errorMessageTextSize = 's',
+    errorMessageTextColor,
+    errorMessageTextSize,
     errorMessageTextWeight,
     hintDescriptionTextColor,
     hintDescriptionTextSize,
@@ -1263,11 +1263,10 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     hintTitleTextSize,
     hintTitleTextWeight,
     hintTitleTextWrap,
+    removeThumbAppearance,
     removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
     removeThumbTextWeight,
+    removeThumbShape,
     shape,
     thumbBorderColor,
     thumbBorderColorHover,
@@ -1358,11 +1357,10 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
       inputName: input.name,
       inputValue: input.value,
       metaTouched: meta.touched,
+      removeThumbAppearance: removeThumbAppearance,
       removeThumbText: removeThumbText,
-      removeThumbTextColor: removeThumbTextColor,
-      removeThumbTextHoverColor: removeThumbTextHoverColor,
-      removeThumbTextSize: removeThumbTextSize,
       removeThumbTextWeight: removeThumbTextWeight,
+      removeThumbShape: removeThumbShape,
       shape: shape,
       showFilename: showFilename,
       thumbBorderColor: thumbBorderColor,

package/dist/itcase-forms.esm.js

@@ -21,6 +21,8 @@ import { fromEvent } from 'file-selector';
 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';
@@ -31,8 +33,6 @@ 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 { Button } from '@itcase/ui/components/Button';
-import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
@@ -215,6 +215,9 @@ function FieldWrapperBase(props) {
   const {
     styles: formFieldStyles
   } = useStyles(props);
+  const errorTextSize = props[`${errorKey}MessageTextSize`];
+  const errorTextColor = props[`${errorKey}MessageTextColor`];
+  const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React$1.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`,
@@ -253,9 +256,9 @@ function FieldWrapperBase(props) {
   }, isErrorState && errorMessage && /*#__PURE__*/React$1.createElement(Text, {
     id: `${inputName}-error`,
     className: "form-field__message-item form-field__message-item_type-error",
-    size: validationAppearance?.textSize,
-    textColor: validationAppearance?.textColor,
-    textWeight: validationAppearance?.textWeight,
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight,
     dataTestId: `${inputName}FieldMessageError`
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React$1.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
@@ -856,10 +859,8 @@ const defaultDropzoneProps = {
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
-  removeThumbText: 'удалить',
-  removeThumbTextColor: 'errorTextPrimary',
-  removeThumbTextHoverColor: 'errorTextPrimaryHover',
-  removeThumbTextSize: 's',
+  removeThumbAppearance: 'dangerPrimary sizeM',
+  removeThumbShape: 'rounded',
   shape: 'rounded',
   showFilename: true,
   thumbBorderColor: 'surfaceBorderTertiary',
@@ -1038,10 +1039,9 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     hintTitleTextSize,
     hintTitleTextWeight,
     hintTitleTextWrap,
+    removeThumbAppearance,
+    removeThumbShape,
     removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
     removeThumbTextWeight,
     shapeClass,
     thumbBorderColorClass,
@@ -1055,11 +1055,11 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     thumbNameTextWrap
   } = propsGenerator;
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} thumbColumn form-dropzone__dropzone_size_${size} ${shapeClass}`
+    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
   }), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React$1.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass)
   }, filesList.map((file, index) => /*#__PURE__*/React$1.createElement("aside", {
     className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -1094,15 +1094,15 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     itemFill: "surfaceItemAccent",
     set: "simple"
   })), /*#__PURE__*/React$1.createElement("div", {
-    className: "form-dropzone__thumb-remove",
-    onClick: event => removeFile(event, index)
-  }, /*#__PURE__*/React$1.createElement(Text, {
+    className: clsx('form-dropzone__thumb-remove')
+  }, /*#__PURE__*/React$1.createElement(Button, {
     className: "form-dropzone__thumb-remove-text",
-    size: removeThumbTextSize,
-    textColor: removeThumbTextColor,
-    textColorHover: removeThumbTextHoverColor,
-    textWeight: removeThumbTextWeight
-  }, removeThumbText || 'Удалить')))), !filesList.length ? /*#__PURE__*/React$1.createElement("div", {
+    appearance: removeThumbAppearance,
+    label: removeThumbText || 'Удалить',
+    labelTextWeight: removeThumbTextWeight,
+    shape: removeThumbShape,
+    onClick: event => removeFile(event, index)
+  })))), !filesList.length ? /*#__PURE__*/React$1.createElement("div", {
     className: "form-dropzone__hint"
   }, /*#__PURE__*/React$1.createElement(Text, {
     className: "form-dropzone__hint-title",
@@ -1110,7 +1110,7 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React$1.createElement(Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
@@ -1124,7 +1124,7 @@ const FileInputDropzone = /*#__PURE__*/React$1.memo(function FileInputDropzone(p
     textColor: hintTitleTextColor,
     textWeight: hintTitleTextWeight,
     textWrap: hintTitleTextWrap
-  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React$1.createElement(Text, {
+  }, hintTitle || 'Select a file or drag in form'), hintDescription && /*#__PURE__*/React$1.createElement(Text, {
     className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
@@ -1241,8 +1241,8 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
     borderColorHover,
     borderType,
     borderWidth,
-    errorMessageTextColor = 'errorTextPrimary',
-    errorMessageTextSize = 's',
+    errorMessageTextColor,
+    errorMessageTextSize,
     errorMessageTextWeight,
     hintDescriptionTextColor,
     hintDescriptionTextSize,
@@ -1252,11 +1252,10 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
     hintTitleTextSize,
     hintTitleTextWeight,
     hintTitleTextWrap,
+    removeThumbAppearance,
     removeThumbText,
-    removeThumbTextColor,
-    removeThumbTextHoverColor,
-    removeThumbTextSize,
     removeThumbTextWeight,
+    removeThumbShape,
     shape,
     thumbBorderColor,
     thumbBorderColorHover,
@@ -1347,11 +1346,10 @@ const FileInput = /*#__PURE__*/React$1.memo(function FileInput(props) {
       inputName: input.name,
       inputValue: input.value,
       metaTouched: meta.touched,
+      removeThumbAppearance: removeThumbAppearance,
       removeThumbText: removeThumbText,
-      removeThumbTextColor: removeThumbTextColor,
-      removeThumbTextHoverColor: removeThumbTextHoverColor,
-      removeThumbTextSize: removeThumbTextSize,
       removeThumbTextWeight: removeThumbTextWeight,
+      removeThumbShape: removeThumbShape,
       shape: shape,
       showFilename: showFilename,
       thumbBorderColor: thumbBorderColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -32,13 +32,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.23",
+    "@itcase/common": "^1.2.26",
     "@itcase/config": "^1.0.47",
     "@itcase/icons": "^1.1.1",
-    "@itcase/storybook-config": "^1.1.10",
+    "@itcase/storybook-config": "^1.1.12",
     "@itcase/tokens-am": "^1.1.9",
     "@itcase/tokens-baikal": "^1.1.9",
-    "@itcase/ui": "^1.8.13",
+    "@itcase/ui": "^1.8.19",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
@@ -56,9 +56,9 @@
     "react-select": "^5.10.1"
   },
   "devDependencies": {
-    "@itcase/lint": "^1.1.9",
-    "@babel/core": "^7.27.3",
-    "@babel/eslint-parser": "^7.27.1",
+    "@itcase/lint": "^1.1.10",
+    "@babel/core": "^7.27.4",
+    "@babel/eslint-parser": "^7.27.5",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@commitlint/cli": "^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.27.0",
+    "eslint": "9.28.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "prettier": "3.5.3",
     "rollup": "^4.41.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.5",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "typescript": "^5.8.3",
     "yup": "^1.6.1"
   }