@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/dist/cjs/components/FieldCode/hooks/useCodeInput.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeInput = useCodeInput;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../constants");
+const utils_2 = require("../utils");
+const useRefState_1 = require("./useRefState");
+const buildCodeArray = (str, codeLength) => Array.from({ length: codeLength }, (_, idx) => str[idx] || constants_1.ZERO_WIDTH_SPACE);
+function useCodeInput(params) {
+    const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+    const [value = '', onChange] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const codeRef = (0, useRefState_1.useRefState)(buildCodeArray(value, codeLength));
+    const updateCodeByIndex = (0, react_1.useCallback)((index, newChar) => {
+        codeRef.current[index] = newChar;
+        onChange?.(codeRef.current.join(''));
+    }, [codeRef, onChange]);
+    const updateFullCode = (0, react_1.useCallback)((newCode) => {
+        codeRef.current = newCode.split('');
+        onChange?.(newCode);
+        moveFocus(codeLength - 1);
+        onComplete?.(newCode);
+    }, [codeLength, codeRef, moveFocus, onChange, onComplete]);
+    const handleAfterCellUpdate = (0, react_1.useCallback)((index) => {
+        const normalizedCode = codeRef.current.join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = (0, utils_2.isStringCodeLength)(normalizedCode, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete?.(normalizedCode);
+        }
+    }, [codeLength, codeRef, moveFocus, onComplete]);
+    const deleteChar = (0, react_1.useCallback)((index) => {
+        if (codeRef.current[index] && !(0, utils_2.isZeroWidthSpace)(codeRef.current[index])) {
+            updateCodeByIndex(index, constants_1.ZERO_WIDTH_SPACE);
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCodeByIndex]);
+    const onAutoCompleteInput = (0, react_1.useCallback)((code, index) => {
+        if ((0, utils_2.isStringCodeLength)(code, codeLength)) {
+            updateFullCode(code);
+            return;
+        }
+        if (!(0, utils_2.isNumberChar)(code)) {
+            return;
+        }
+        updateCodeByIndex(index, code);
+        handleAfterCellUpdate(index);
+    }, [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode]);
+    const onKeyDown = (0, react_1.useCallback)((e, index) => {
+        switch (e.key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if ((0, utils_2.isNumberChar)(e.key)) {
+                    e.preventDefault();
+                    updateCodeByIndex(index, e.key);
+                    handleAfterCellUpdate(index);
+                }
+                break;
+        }
+    }, [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex]);
+    const onPaste = (0, react_1.useCallback)((e) => {
+        const codeInput = e?.clipboardData.getData('text') ?? '';
+        if (!(0, utils_2.isStringCodeLength)(codeInput, codeLength)) {
+            return;
+        }
+        updateFullCode(codeInput);
+    }, [codeLength, updateFullCode]);
+    (0, react_1.useEffect)(() => {
+        codeRef.current = buildCodeArray(value, codeLength);
+    }, [codeLength, codeRef, value]);
+    return {
+        code: codeRef.current,
+        cellHandlers: {
+            onKeyDown,
+            onPaste,
+            onChange: onAutoCompleteInput,
+        },
+        onChangeCode: onChange,
+    };
+}

package/dist/cjs/components/FieldCode/hooks/useFieldCodeOverflow.d.ts

@@ -0,0 +1,6 @@
+/** Запасной сценарий: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export declare function useFieldCodeOverflow(): {
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    codeContainerRef: import("react").RefObject<HTMLDivElement>;
+    hasOverflow: boolean;
+};

package/dist/cjs/components/FieldCode/hooks/useFieldCodeOverflow.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeOverflow = useFieldCodeOverflow;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+function hasCodeOverflow(root, codeContainer) {
+    return codeContainer.scrollWidth > root.clientWidth;
+}
+/** Запасной сценарий: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+function useFieldCodeOverflow() {
+    const [hasOverflow, setHasOverflow] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const codeContainerRef = (0, react_1.useRef)(null);
+    const measure = (0, react_1.useCallback)(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        setHasOverflow(prev => {
+            const next = hasCodeOverflow(root, codeContainer);
+            return prev === next ? prev : next;
+        });
+    }, []);
+    (0, utils_1.useLayoutEffect)(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        measure();
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(root);
+        resizeObserver.observe(codeContainer);
+        const mutationObserver = new MutationObserver(measure);
+        mutationObserver.observe(codeContainer, { childList: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [measure]);
+    return { rootRef, codeContainerRef, hasOverflow };
+}

package/dist/cjs/components/FieldCode/hooks/useFieldCodeValidate.d.ts

@@ -0,0 +1,6 @@
+export type UseFieldCodeValidateParams = {
+    /** Ожидаемая длина кода (количество цифр) */
+    codeLength: number;
+};
+/** Возвращает функцию валидации значения кода: пустое значение / неполный код. */
+export declare function useFieldCodeValidate(params: UseFieldCodeValidateParams): (value?: string | number) => string | undefined;

package/dist/cjs/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeValidate = useFieldCodeValidate;
+const react_1 = require("react");
+const locale_1 = require("../../../locale");
+const utils_1 = require("../utils");
+/** Возвращает функцию валидации значения кода: пустое значение / неполный код. */
+function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    return (0, react_1.useCallback)((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.split('').filter(utils_1.isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t]);
+}

package/dist/cjs/components/FieldCode/hooks/useFieldHelpers.d.ts

@@ -0,0 +1,12 @@
+type UseFieldHelpersParams = {
+    onChangeCode(code: string): void;
+    moveFocus(index: number): void;
+    isMobile?: boolean;
+    showEmptyChars?: boolean;
+    code: readonly string[];
+    codeLength: number;
+};
+export declare function useFieldHelpers(params: UseFieldHelpersParams): {
+    resetCode: () => void;
+};
+export {};

package/dist/cjs/components/FieldCode/hooks/useFieldHelpers.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldHelpers = useFieldHelpers;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+function useFieldHelpers(params) {
+    const { onChangeCode, moveFocus, isMobile = false, showEmptyChars, code, codeLength } = params;
+    const resetCode = (0, react_1.useCallback)(() => {
+        onChangeCode('');
+        if (!isMobile) {
+            moveFocus(0);
+        }
+    }, [isMobile, moveFocus, onChangeCode]);
+    (0, react_1.useEffect)(() => {
+        if (!isMobile) {
+            moveFocus(0);
+        }
+    }, [isMobile, moveFocus]);
+    (0, react_1.useEffect)(() => {
+        if (isMobile || !showEmptyChars) {
+            return;
+        }
+        const emptyIndex = (0, utils_1.getFirstEmptyCellIndex)(code);
+        if (emptyIndex >= 0) {
+            moveFocus(emptyIndex);
+        }
+        // Фокус перемещается только при включении подсветки или смене длины кода, не на каждый ввод.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showEmptyChars, isMobile, moveFocus, codeLength]);
+    return { resetCode };
+}

package/dist/cjs/components/FieldCode/hooks/useFocusCell.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocusCell(codeLength: number): {
+    inputsRef: import("react").MutableRefObject<HTMLInputElement[]>;
+    moveFocus: (newIndex: number) => void;
+    blurFields: () => void;
+};

package/dist/cjs/components/FieldCode/hooks/useFocusCell.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusCell = useFocusCell;
+const react_1 = require("react");
+function useFocusCell(codeLength) {
+    const inputsRef = (0, react_1.useRef)([]);
+    const focusInput = (0, react_1.useCallback)((index) => {
+        inputsRef.current[index]?.focus();
+    }, []);
+    const moveFocus = (0, react_1.useCallback)((newIndex) => {
+        if (newIndex >= 0 && newIndex < codeLength) {
+            focusInput(newIndex);
+        }
+    }, [codeLength, focusInput]);
+    const blurFields = (0, react_1.useCallback)(() => {
+        inputsRef.current.forEach(input => {
+            input?.blur();
+        });
+    }, []);
+    return { inputsRef, moveFocus, blurFields };
+}

package/dist/cjs/components/FieldCode/hooks/useRefState.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Ref-контейнер, присваивание `.current` которого вызывает ре-рендер.
+ * Локальная замена `useRefState` из `@siberiacancode/reactuse` — пакет не тянем ради одного хука.
+ */
+export declare function useRefState<T>(initialValue: T): {
+    current: T;
+};

package/dist/cjs/components/FieldCode/hooks/useRefState.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefState = useRefState;
+const react_1 = require("react");
+/**
+ * Ref-контейнер, присваивание `.current` которого вызывает ре-рендер.
+ * Локальная замена `useRefState` из `@siberiacancode/reactuse` — пакет не тянем ради одного хука.
+ */
+function useRefState(initialValue) {
+    const [, forceRender] = (0, react_1.useReducer)((tick) => tick + 1, 0);
+    const ref = (0, react_1.useRef)(initialValue);
+    return (0, react_1.useMemo)(() => ({
+        get current() {
+            return ref.current;
+        },
+        set current(value) {
+            ref.current = value;
+            forceRender();
+        },
+    }), []);
+}

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

@@ -0,0 +1,3 @@
+export * from './components/ResendCode';
+export * from './FieldCode';
+export * from './hooks/useFieldCodeValidate';

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

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ResendCode"), exports);
+__exportStar(require("./FieldCode"), exports);
+__exportStar(require("./hooks/useFieldCodeValidate"), exports);

package/dist/cjs/components/FieldCode/styles.module.css

@@ -0,0 +1,45 @@
+.fieldCode{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+.fieldCode[data-stretch-cells]{
+  align-items:stretch;
+  width:100%;
+}
+
+.fieldCodeScrollable{
+  overflow-x:auto;
+}
+
+.fieldDecorator{
+  width:unset;
+}
+
+.codeContainer{
+  display:flex;
+  justify-content:safe center;
+}
+.codeContainer[data-stretch-cells]{
+  width:100%;
+}
+.codeContainer[data-size=s]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=m]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=l]{
+  gap:var(--sn-primitive-dimension-12, 12px);
+}
+
+.cellSpacing[data-size=s]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=m]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=l]{
+  margin-right:var(--sn-primitive-dimension-12, 12px);
+}

package/dist/cjs/components/FieldCode/utils.d.ts

@@ -0,0 +1,6 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare function getFirstEmptyCellIndex(code: readonly string[]): number;
+export declare const getCellValidationState: (value: string, showEmptyChars?: boolean, error?: boolean) => FieldComboProps["validationState"];

package/dist/cjs/components/FieldCode/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCellValidationState = exports.isZeroWidthSpace = exports.isStringCodeLength = exports.isNumberChar = void 0;
+exports.getFirstEmptyCellIndex = getFirstEmptyCellIndex;
+const constants_1 = require("./constants");
+const isNumberChar = (char) => /^\d$/.test(char);
+exports.isNumberChar = isNumberChar;
+const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+exports.isStringCodeLength = isStringCodeLength;
+const isZeroWidthSpace = (value) => value === constants_1.ZERO_WIDTH_SPACE;
+exports.isZeroWidthSpace = isZeroWidthSpace;
+function getFirstEmptyCellIndex(code) {
+    return code.findIndex(exports.isZeroWidthSpace);
+}
+const getCellValidationState = (value, showEmptyChars, error) => {
+    if (showEmptyChars) {
+        return (0, exports.isZeroWidthSpace)(value) ? 'error' : 'default';
+    }
+    return error ? 'error' : 'default';
+};
+exports.getCellValidationState = getCellValidationState;

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+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 fields_1 = require("@cloud-ru/ds-fields");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const yup_1 = require("yup");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const components_1 = require("./components");
+const constants_1 = require("./constants");
+/**
+ * Поле «Описание» с локальным стейтом и валидацией (yup).
+ */
+exports.FieldDescription = (0, react_1.forwardRef)(function FieldDescription({ size = 'm', required = false, maxLength = constants_1.DEFAULT_MAX_LENGTH, customSchema, resizable = true, addButton, onValidationError, value: propValue, ...restProps }, ref) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    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 [internalValue, setInternalValue] = (0, react_1.useState)(propValue ?? '');
+    const [error, setError] = (0, react_1.useState)(null);
+    // Как в FieldName: заданный `value` переводит поле в controlled-режим.
+    const value = propValue !== undefined ? propValue : internalValue;
+    const handleChange = (newValue) => {
+        setInternalValue(newValue);
+        restProps.onChange?.(newValue);
+        const result = validate(newValue);
+        setError(result.error);
+        onValidationError?.(result.error);
+    };
+    const handleBlur = (event) => {
+        restProps.onBlur?.(event);
+        const result = validate(value);
+        setError(result.error);
+        onValidationError?.(result.error);
+    };
+    const errorMes = restProps.error ?? error?.message;
+    const standaloneComponent = ((0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { ...restProps, resizable: resizable, label: t('FieldDescription.label'), placeholder: t('FieldDescription.placeholder'), inputMode: 'text', ref: (0, merge_refs_1.default)(ref, textareaRef), size: size, maxLength: maxLength, value: value, onChange: handleChange, onBlur: handleBlur, validationState: errorMes ? 'error' : restProps.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,9 @@
+/**
+ * Поле «Описание» с обёрткой для react-hook-form.
+ */
+export declare const FieldDescriptionRHF: import("react").ForwardRefExoticComponent<Omit<import("@cloud-ru/ds-fields").FieldTextAreaProps, "label" | "caption" | "hint" | "placeholder" | "footer" | "name" | "inputMode" | "searchPlaceholder"> & {
+    customSchema?: import("yup").StringSchema;
+    addButton?: boolean;
+} & {
+    controllerProps: Omit<import("react-hook-form").ControllerProps<import("react-hook-form").FieldValues>, "render" | "rules" | "disabled">;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,47 @@
+"use strict";
+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 fields_1 = require("@cloud-ru/ds-fields");
+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 hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const FieldWithAddButton_1 = require("./components/FieldWithAddButton");
+const constants_1 = require("./constants");
+/**
+ * Поле «Описание» с обёрткой для react-hook-form.
+ */
+exports.FieldDescriptionRHF = (0, react_1.forwardRef)(function FieldDescriptionRHF({ controllerProps, customSchema, size = 'm', required = false, maxLength = constants_1.DEFAULT_MAX_LENGTH, addButton, resizable = true, ...props }, ref) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    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, { ...controllerProps, rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            const errorMes = props.error ?? error?.message;
+            return ((0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { ...props, resizable: resizable, size: size, label: t('FieldDescription.label'), placeholder: t('FieldDescription.placeholder'), inputMode: 'text', ref: (0, merge_refs_1.default)(ref, localRef, textareaRef), maxLength: maxLength, value: value, onChange: newValue => {
+                    props.onChange?.(newValue);
+                    onChange(newValue);
+                }, onBlur: event => {
+                    props.onBlur?.(event);
+                    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 { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { ReactNode, RefObject } from 'react';
+export declare function FieldWithAddButton({ children, size, autoFocusRef, }: {
+    children: ReactNode;
+    size?: FieldTextAreaProps['size'];
+    autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldWithAddButton = FieldWithAddButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const locale_1 = require("../../../locale");
+function FieldWithAddButton({ children, size = 'm', autoFocusRef, }) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const [showField, setShowField] = (0, react_1.useState)(false);
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const handleAddClick = (0, react_1.useCallback)(() => setShowField(true), []);
+    (0, react_1.useEffect)(() => {
+        // На mobile автофокус запрещён — он принудительно открывает экранную клавиатуру.
+        if (showField && !isMobile && autoFocusRef.current) {
+            autoFocusRef.current.focus();
+        }
+    }, [showField, isMobile, autoFocusRef]);
+    if (showField) {
+        return children;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, label: t('FieldDescription.addButton'), onClick: handleAddClick, size: size, "data-test-id": constants_1.TEST_IDS.fieldDescriptionAddButton }) }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldWithAddButton"), exports);

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 * from './FieldDescription';
+export * from './FieldDescriptionRHF';
+export * from './types';

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

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldDescription"), exports);
+__exportStar(require("./FieldDescriptionRHF"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,17 @@
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+export type FieldDescriptionPropsBase = Omit<FieldTextAreaProps, 'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'> & {
+    /** Дополнительная yup-схема, которая конкатенируется к встроенной */
+    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/FieldMask/FieldMask.d.ts

@@ -0,0 +1,12 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { InputMask } from 'imask';
+import { Mask } from './types';
+export type FieldMaskProps = Omit<FieldComboProps, 'value' | 'onChange' | 'inputMode'> & {
+    /** Значение поля (controlled-режим) */
+    value?: string;
+    /** Колбек смены значения; вторым аргументом — экземпляр маски imask */
+    onChange?(value: string, mask: InputMask): void;
+    /** Предустановленная маска поля */
+    mask: Mask;
+};
+export declare const FieldMask: import("react").ForwardRefExoticComponent<Omit<FieldMaskProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;