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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.1 (2025-12-08)
+
+
+### Bug Fixes
+
+* **UIIAAS-1251:** docs ([0226b84](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/0226b8456be07d407c614979552ce88023eb8bd9))
+
+
+
+
+
+# 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

@@ -43,6 +43,7 @@
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
 | scrollList | `boolean` | - | Включить скролл для основной части списка стран |
 | searchPlaceholder | `string` | - |  |
 | onChangeCountry | `(country: FieldPhoneOptionsProps) => void` | - |  |
@@ -144,6 +145,166 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+## FieldName
+Поле имя c локальным стейтом и валидацией
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| value | `string` | - | Значение input |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
+| disabled | `boolean` | false | Является ли поле деактивированным |
+| readonly | `boolean` | false | Является ли поле доступным только для чтения |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
+| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
+| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
+| pattern | `string` | - | Регулярное выражение валидного инпута |
+| className | `string` | - | CSS-класс |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| 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` | - |  |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
+| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
+| button | `Button` | - | Кнопка действия внутри поля |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
+| showLabel | `boolean` | - |  |
+| customSchema | `StringSchema<string, AnyObject, undefined, "">` | - |  |
+| onValidationError | `(error: ValidationError) => void` | - | Колбэк, вызываемый при изменении ошибки валидации |
+| 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 |
+|------|------|---------------|-------------|
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| controllerProps* | `Omit<ControllerProps<FieldValues>, "disabled" \| "render" \| "rules">` | - | Режим контроллера с использованием react-hook-form |
+| value | `string` | - | Значение input |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
+| disabled | `boolean` | false | Является ли поле деактивированным |
+| readonly | `boolean` | false | Является ли поле доступным только для чтения |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
+| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
+| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
+| pattern | `string` | - | Регулярное выражение валидного инпута |
+| className | `string` | - | CSS-класс |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| 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` | - |  |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
+| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
+| button | `Button` | - | Кнопка действия внутри поля |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
+| showLabel | `boolean` | - |  |
+| customSchema | `StringSchema<string, AnyObject, undefined, "">` | - |  |
+| 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 |
+|------|------|---------------|-------------|
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| value | `string` | - | HTML-аттрибут value |
+| onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
+| id | `string` | - | HTML-аттрибут id |
+| maxLength | `number` | 255 | Максимальное кол-во символов |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только на чтение |
+| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
+| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
+| autoFocus | `boolean` | - | Включен ли авто-фокус |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
+| spellCheck | `boolean` | true | Включение проверки орфографии |
+| className | `string` | - | CSS-класс |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
+| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
+| 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` | true | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
+| customSchema | `StringSchema<string, AnyObject, undefined, "">` | - |  |
+| addButton | `boolean` | - | Поле появляется по кнопке "Добавить описание" (только для опционального поля) |
+| onValidationError | `(error: ValidationError) => void` | - | Колбэк, вызываемый при изменении ошибки валидации (только в standalone режиме) |
+| 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 |
+|------|------|---------------|-------------|
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| controllerProps* | `Omit<ControllerProps<FieldValues>, "disabled" \| "render" \| "rules">` | - | Режим контроллера с использованием react-hook-form |
+| value | `string` | - | HTML-аттрибут value |
+| onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
+| id | `string` | - | HTML-аттрибут id |
+| maxLength | `number` | 255 | Максимальное кол-во символов |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только на чтение |
+| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
+| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
+| autoFocus | `boolean` | - | Включен ли авто-фокус |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
+| spellCheck | `boolean` | true | Включение проверки орфографии |
+| className | `string` | - | CSS-класс |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
+| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
+| 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` | true | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
+| customSchema | `StringSchema<string, AnyObject, undefined, "">` | - |  |
+| addButton | `boolean` | - | Поле появляется по кнопке "Добавить описание" (только для опционального поля) |
+| 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";
     /** Колбек действия при отправке */
@@ -16,5 +16,5 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

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>>;