@cloud-ru/uikit-product-fields-predefined 0.13.11 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.14.0 (2025-12-03)
+
+
+### Features
+
+* **UIIAAS-1251:** added FieldDescription & FieldName ([e03ba16](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/e03ba16f0bbe62d0c00e7e109727a4b49f13fc6b))
+
+
+
+
+
 ## 0.13.11 (2025-11-28)
 
 ### Only dependencies have been changed

package/README.md

@@ -14,39 +14,6 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| value | `string` | - | Значение input |
-| onChange | `((value: string, e?: ChangeEvent<HTMLInputElement>) => void) & ((value: string) => void)` | - | Колбек смены значения |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | false | Является ли поле деактивированным |
-| readonly | `boolean` | false | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
-| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
-| pattern | `string` | - | Регулярное выражение валидного инпута |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
-| error | `string` | - |  |
-| type | "text" \| "tel" \| "email" | - |  |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| scrollList | `boolean` | - | Включить скролл для основной части списка стран |
-| searchPlaceholder | `string` | - |  |
-| onChangeCountry | `(country: FieldPhoneOptionsProps) => void` | - |  |
-| options | `CountrySettings` | - | options — объект конфигурации для изменения стандартного списка стран |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## useCountries
@@ -60,90 +27,48 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| selectProps* | `FieldSelectProps` | - | Пропсы прокидываемые в селект |
-| submitHandler* | `() => Promise<string \| void>` | - | Коллбек создания новой опции, при успешном выполнении возвращает value новой опции |
-| entityName* | `EntityName` | - | Тип объекта для создания новой опции (в единственном числе вин.падеже для кнопки Создать <entityName> и множественном числе) |
-| createLayoutProps* | `CreateLayoutModalProps \| CreateLayoutDrawerProps` | - | Пропсы передаваемые в модалку или дровер создания новой опции |
-| createLayoutType* | "modal" \| "drawer" | - | По клику на кнопку создания открывать модальное окно или дровер |
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| onRefetch | `VoidFunction` | - | Коллбек рефетча запроса на получение списка опций в случае ошибки (при передаче dataError в selectProps). |
-| className | `string` | - | CSS-класс |
-| afterClose | `VoidFunction` | - | Коллбек после закрытия модального окна/дровера |
-| entityIcon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка сервиса |
-| permission | "none" \| "canRead" \| "canCreate" | - | Управление состоянием компонента в зависимости от прав пользователя (по дефолту permission = 'canCreate') |
 ## FieldAi
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| onSubmit* | `(value: string) => void` | - | Колбек действия при отправке |
-| value | `string` | - | HTML-аттрибут value |
-| onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"tel"`, `"email"`, `"search"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
-| id | `string` | - | HTML-аттрибут id |
-| name | `string` | - | HTML-аттрибут name |
-| maxLength | `number` | - | Максимальное кол-во символов |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение |
-| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
-| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
-| autoFocus | `boolean` | - | Включен ли авто-фокус |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
-| className | `string` | - | CSS-класс |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
-| error | `string` | - |  |
-| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| minRows | `number` | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен |
-| maxRows | `number` | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен |
-| resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
-| secure | `boolean \| "password"` | - | Режим ввода sensitive данных (пароля, API ключей, токенов, etc) |
-| onResetContextClick | `() => void` | - | Действие при клике по кнопке сброса контекста |
 | ref | `LegacyRef<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldChat
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| handleSubmit* | `(value: string) => void` | - | Колбек действия при отправке |
-| value | `string` | - | HTML-аттрибут value |
-| onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"tel"`, `"email"`, `"search"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
-| id | `string` | - | HTML-аттрибут id |
-| name | `string` | - | HTML-аттрибут name |
-| maxLength | `number` | - | Максимальное кол-во символов |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение |
-| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
-| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
-| autoFocus | `boolean` | - | Включен ли авто-фокус |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
-| className | `string` | - | CSS-класс |
-| caption | `string` | - | Подпись справа от лейбла |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
-| error | `string` | - |  |
-| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| minRows | `number` | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен |
-| maxRows | `number` | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен |
-| resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
-| attachment | `Pick<FileUploadProps, "onFilesUpload" \| "accept"> & { files?: File[]; onFileDelete: (file?: File) => void; }` | - |  |
 ## AIDisclaimer
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+## FieldName
+Поле имя c локальным стейтом и валидацией
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| key | `Key` | - |  |
+## FieldNameRHF
+Поле имя c оберткой для React Hook Form
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| key | `Key` | - |  |
+## FieldDescription
+Поле описание c локальным стейтом и валидацией
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| ref | `LegacyRef<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| key | `Key` | - |  |
+## FieldDescriptionRHF
+Поле описание c оберткой для React Hook Form
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| ref | `LegacyRef<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| key | `Key` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/FieldAi/FieldAi.d.ts

@@ -8,7 +8,7 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
 }>;
-export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "placeholder" | "label" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
+export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     /** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
     secure?: boolean | "password";
     /** Колбек действия при отправке */

package/dist/cjs/components/FieldAi/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "placeholder" | "label" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/FieldDescription/FieldDescription.d.ts

@@ -0,0 +1,12 @@
+import { ValidationError } from 'yup';
+/**
+ * Поле описание c локальным стейтом и валидацией
+ */
+export declare const FieldDescription: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextAreaProps, "name" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "searchPlaceholder" | "footer"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    onValidationError?: (error: ValidationError | null) => void;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/FieldDescription/FieldDescription.js

@@ -0,0 +1,68 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDescription = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const yup_1 = require("yup");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
+const hooks_1 = require("../../hooks");
+const components_1 = require("./components");
+const constants_1 = require("./constants");
+/**
+ * Поле описание c локальным стейтом и валидацией
+ */
+exports.FieldDescription = (0, react_1.forwardRef)((_a, ref) => {
+    var _b;
+    var { size = 'm', required = false, maxLength = constants_1.DEFAULT_MAX_LENGTH, customSchema, resizable = true, addButton, onValidationError } = _a, props = __rest(_a, ["size", "required", "maxLength", "customSchema", "resizable", "addButton", "onValidationError"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const textareaRef = (0, react_1.useRef)(null);
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.string)()
+            .trim()
+            .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validate } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const [value, setValue] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)(null);
+    const handleChange = (newValue) => {
+        var _a;
+        setValue(newValue);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+        const result = validate(newValue);
+        setError(result.error);
+        onValidationError === null || onValidationError === void 0 ? void 0 : onValidationError(result.error);
+    };
+    const handleBlur = (newValue) => {
+        var _a;
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+        const result = validate(value);
+        setError(result.error);
+        onValidationError === null || onValidationError === void 0 ? void 0 : onValidationError(result.error);
+    };
+    const errorMes = (_b = props.error) !== null && _b !== void 0 ? _b : error === null || error === void 0 ? void 0 : error.message;
+    const standaloneComponent = ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { resizable: resizable, label: t('FieldDescription.label'), inputMode: 'text', ref: (0, merge_refs_1.default)(ref, textareaRef), size: size, maxLength: maxLength, value: value, onChange: handleChange, onBlur: handleBlur, validationState: errorMes ? 'error' : props.validationState, hint: errorMes, caption: !required ? t('FieldDescription.optional') : undefined })));
+    if (addButton && !required) {
+        return ((0, jsx_runtime_1.jsx)(components_1.FieldWithAddButton, { autoFocusRef: textareaRef, size: size, children: standaloneComponent }));
+    }
+    return standaloneComponent;
+});

package/dist/cjs/components/FieldDescription/FieldDescriptionRHF.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Поле описание c оберткой для React Hook Form
+ */
+export declare const FieldDescriptionRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextAreaProps, "name" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "searchPlaceholder" | "footer"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/FieldDescription/FieldDescriptionRHF.js

@@ -0,0 +1,62 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDescriptionRHF = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const yup_1 = require("yup");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
+const hooks_1 = require("../../hooks");
+const FieldWithAddButton_1 = require("./components/FieldWithAddButton");
+const constants_1 = require("./constants");
+/**
+ * Поле описание c оберткой для React Hook Form
+ */
+exports.FieldDescriptionRHF = (0, react_1.forwardRef)((_a, ref) => {
+    var { controllerProps, customSchema, size = 'm', required = false, maxLength = constants_1.DEFAULT_MAX_LENGTH, addButton, resizable = true } = _a, props = __rest(_a, ["controllerProps", "customSchema", "size", "required", "maxLength", "addButton", "resizable"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const textareaRef = (0, react_1.useRef)(null);
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.string)()
+            .trim()
+            .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validateRHF } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const controllerComponent = ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, Object.assign({}, controllerProps, { rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            var _a;
+            const errorMes = (_a = props.error) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.message;
+            return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { resizable: resizable, size: size, label: t('FieldDescription.label'), inputMode: 'text', ref: (0, merge_refs_1.default)(ref, localRef, textareaRef), maxLength: maxLength, value: value, onChange: newValue => {
+                    var _a;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+                    onChange(newValue);
+                }, onBlur: value => {
+                    var _a;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, value);
+                    onBlur();
+                }, validationState: errorMes ? 'error' : props.validationState, hint: errorMes, caption: !required ? t('FieldDescription.optional') : undefined })));
+        } })));
+    if (addButton && !required) {
+        return ((0, jsx_runtime_1.jsx)(FieldWithAddButton_1.FieldWithAddButton, { autoFocusRef: textareaRef, size: size, children: controllerComponent }));
+    }
+    return controllerComponent;
+});

package/dist/cjs/components/FieldDescription/components/FieldWithAddButton.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+export declare function FieldWithAddButton({ children, size, autoFocusRef, }: {
+    children: React.ReactNode;
+    size?: FieldTextAreaProps['size'];
+    autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;

package/dist/cjs/components/FieldDescription/components/FieldWithAddButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldWithAddButton = FieldWithAddButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+function FieldWithAddButton({ children, size, autoFocusRef, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const [showField, setShowField] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (showField && autoFocusRef.current) {
+            autoFocusRef.current.focus();
+        }
+    }, [showField, autoFocusRef]);
+    if (showField) {
+        return children;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: !showField && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PlusSVG, {}), iconPosition: 'before', label: t('FieldDescription.addButton'), onClick: () => setShowField(true), size: size })) }));
+}

package/dist/cjs/components/FieldDescription/components/index.d.ts

@@ -0,0 +1 @@
+export { FieldWithAddButton } from './FieldWithAddButton';

package/dist/cjs/components/FieldDescription/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldWithAddButton = void 0;
+var FieldWithAddButton_1 = require("./FieldWithAddButton");
+Object.defineProperty(exports, "FieldWithAddButton", { enumerable: true, get: function () { return FieldWithAddButton_1.FieldWithAddButton; } });

package/dist/cjs/components/FieldDescription/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_LENGTH = 255;

package/dist/cjs/components/FieldDescription/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MAX_LENGTH = void 0;
+exports.DEFAULT_MAX_LENGTH = 255;

package/dist/cjs/components/FieldDescription/index.d.ts

@@ -0,0 +1,3 @@
+export { FieldDescription } from './FieldDescription';
+export { FieldDescriptionRHF } from './FieldDescriptionRHF';
+export type { FieldDescriptionProps, FieldDescriptionPropsBase, FieldDescriptionRHFProps } from './types';

package/dist/cjs/components/FieldDescription/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDescriptionRHF = exports.FieldDescription = void 0;
+var FieldDescription_1 = require("./FieldDescription");
+Object.defineProperty(exports, "FieldDescription", { enumerable: true, get: function () { return FieldDescription_1.FieldDescription; } });
+var FieldDescriptionRHF_1 = require("./FieldDescriptionRHF");
+Object.defineProperty(exports, "FieldDescriptionRHF", { enumerable: true, get: function () { return FieldDescriptionRHF_1.FieldDescriptionRHF; } });

package/dist/cjs/components/FieldDescription/types.d.ts

@@ -0,0 +1,16 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+export type FieldDescriptionPropsBase = Omit<FieldTextAreaProps, 'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'> & {
+    customSchema?: StringSchema;
+    /** Поле появляется по кнопке "Добавить описание" (только для опционального поля) */
+    addButton?: boolean;
+};
+export type FieldDescriptionProps = FieldDescriptionPropsBase & {
+    /** Колбэк, вызываемый при изменении ошибки валидации (только в standalone режиме) */
+    onValidationError?: (error: ValidationError | null) => void;
+};
+export type FieldDescriptionRHFProps = FieldDescriptionPropsBase & {
+    /** Режим контроллера с использованием react-hook-form */
+    controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/dist/cjs/components/FieldDescription/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/FieldName/FieldName.d.ts

@@ -0,0 +1,12 @@
+import { ValidationError } from 'yup';
+/**
+ * Поле имя c локальным стейтом и валидацией
+ */
+export declare const FieldName: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextProps, "type" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "footer"> & {
+    showLabel?: boolean;
+    customSchema?: import("yup").StringSchema;
+} & {
+    onValidationError?: (error: ValidationError | null) => void;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldName/FieldName.js

@@ -0,0 +1,95 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const yup_1 = require("yup");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
+const input_private_1 = require("@snack-uikit/input-private");
+const hooks_1 = require("../../hooks");
+const constants_1 = require("./constants");
+/**
+ * Поле имя c локальным стейтом и валидацией
+ */
+exports.FieldName = (0, react_1.forwardRef)((props, ref) => {
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const { value: propValue = '', onChange: propOnChange, onBlur: propOnBlur, error: propError, maxLength = constants_1.DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, allowMoreThanMaxLength = true, size = 'm' } = props, inputProps = __rest(props, ["value", "onChange", "onBlur", "error", "maxLength", "required", "customSchema", "showLabel", "allowMoreThanMaxLength", "size"]);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(propValue);
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.string)()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validate } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const currentValue = 'value' in props ? propValue : internalValue;
+    const currentError = propError || (validationError === null || validationError === void 0 ? void 0 : validationError.message);
+    const isRequiredError = currentError === null || currentError === void 0 ? void 0 : currentError.match(t('FieldName.required'));
+    const handleChange = (newValue) => {
+        const result = validate(newValue);
+        // Если была required-ошибка и пользователь начал ввод, очищаем ее
+        if (isRequiredError && !isFocused) {
+            setValidationError(null);
+        }
+        else if (result.error && result.error.message !== t('FieldName.required')) {
+            // Любую НЕ required ошибку показываем сразу
+            setValidationError(result.error);
+        }
+        else {
+            setValidationError(null);
+        }
+        setInternalValue(newValue);
+        propOnChange === null || propOnChange === void 0 ? void 0 : propOnChange(newValue);
+    };
+    const handleBlur = (e) => {
+        var _a;
+        (0, input_private_1.runAfterRerender)(() => setIsFocused(false));
+        const result = validate(currentValue);
+        setValidationError(result.error);
+        (_a = props.onValidationError) === null || _a === void 0 ? void 0 : _a.call(props, result.error);
+        propOnBlur === null || propOnBlur === void 0 ? void 0 : propOnBlur(e);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+    const handleClear = () => {
+        var _a;
+        const result = validate('');
+        setValidationError(result.error);
+        (_a = props.onValidationError) === null || _a === void 0 ? void 0 : _a.call(props, result.error);
+    };
+    const shouldShowCounter = currentError && ((currentError === null || currentError === void 0 ? void 0 : currentError.match(t('FieldName.maxSymbols', { max: maxLength }))) || isRequiredError);
+    // Ошибка обязательного поля появляется после blur
+    const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldText, Object.assign({}, inputProps, { inputMode: 'text', onClearButtonClick: handleClear, allowMoreThanMaxLength: allowMoreThanMaxLength, ref: (0, merge_refs_1.default)(ref, inputRef), value: currentValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? currentError : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, caption: !required ? t('FieldDescription.optional') : undefined })));
+});

package/dist/cjs/components/FieldName/FieldNameRHF.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Поле имя c оберткой для React Hook Form
+ */
+export declare const FieldNameRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/uikit-product-mobile-fields").FieldTextProps, "type" | "caption" | "label" | "hint" | "placeholder" | "inputMode" | "footer"> & {
+    showLabel?: boolean;
+    customSchema?: import("yup").StringSchema;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & {
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+} & import("react").RefAttributes<HTMLInputElement>>;