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

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

@@ -0,0 +1,7 @@
+import { FieldChatProps } from './types';
+/**
+ * Поле чата: многострочный ввод с прикреплением файлов и кнопкой отправки.
+ * Enter — отправка, Shift+Enter — перенос строки. Прикреплённые файлы на mobile
+ * показываются над полем, на desktop — под полем.
+ */
+export declare function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, autoFocus, ...props }: FieldChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/FieldChat/FieldChat.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldChat = FieldChat;
+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 dropzone_1 = require("@cloud-ru/ds-dropzone");
+const fields_1 = require("@cloud-ru/ds-fields");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const Attachments_1 = require("./components/Attachments");
+const FieldSubmitButton_1 = require("./components/FieldSubmitButton");
+const TextAreaActionsFooter_1 = require("./components/TextAreaActionsFooter");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Поле чата: многострочный ввод с прикреплением файлов и кнопкой отправки.
+ * Enter — отправка, Shift+Enter — перенос строки. Прикреплённые файлы на mobile
+ * показываются над полем, на desktop — под полем.
+ */
+function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, autoFocus, ...props }) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    // disabled/readonly уходят в FieldTextArea через ...props, но футер-действия (скрепка, отправка)
+    // их не наследуют — гасим их явно, иначе прикрепление/отправка остаются кликабельны в disabled-поле.
+    const isInactive = Boolean(props.disabled || props.readonly);
+    const files = (0, react_1.useMemo)(() => attachment?.files?.map(file => ({
+        file,
+        onDelete: attachment?.onFileDelete,
+    })) ?? [], [attachment?.files, attachment?.onFileDelete]);
+    const isValueValid = (typeof value === 'string' && value.trim().length > 0) || files.length > 0;
+    const handleSubmit = () => {
+        if (isValueValid) {
+            handleSubmitProp(value ?? '');
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fieldChat, "data-layout-type": layoutType, children: [isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { ...props, autoFocus: autoFocus, value: value, size: 'm', minRows: 1, maxRows: 4, showCopyButton: false, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachment && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, open: isInactive ? false : undefined, triggerClassName: styles_module_scss_1.default.uploadTooltip, children: (0, jsx_runtime_1.jsx)(dropzone_1.FileUpload, { mode: dropzone_1.UPLOAD_MODE.Multiple, onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 's', icon: (0, jsx_runtime_1.jsx)(product_1.AttachmentSVG, {}), disabled: isInactive, "data-test-id": constants_1.TEST_IDS.fieldChatUpload }) }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { active: isValueValid && !isInactive, handleClick: handleSubmit, "data-test-id": constants_1.TEST_IDS.fieldChatSubmit })] }) }) }), !isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files })] }));
+}

package/dist/cjs/components/FieldChat/components/Attachments/Attachments.d.ts

@@ -0,0 +1,8 @@
+import { AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+export type AttachmentsProps = {
+    /** Прикреплённые файлы */
+    files: AttachmentSquareProps[];
+    /** Мобильная раскладка: карточки `Attachment` вместо квадратных `AttachmentSquare`, той же строкой под скролл. */
+    isMobile?: boolean;
+};
+export declare function Attachments({ files, isMobile }: AttachmentsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/FieldChat/components/Attachments/Attachments.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Attachments = Attachments;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const attachment_1 = require("@cloud-ru/ds-attachment");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Attachments({ files, isMobile }) {
+    if (!files.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.attachmentsScroll, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.attachments, children: files.map((file, index) => isMobile ? ((0, jsx_runtime_1.jsx)(attachment_1.Attachment, { size: 's', ...file }, file.file?.name || index)) : ((0, jsx_runtime_1.jsx)(attachment_1.AttachmentSquare, { size: 's', ...file }, file.file?.name || index))) }) }));
+}

package/dist/cjs/components/FieldChat/components/Attachments/index.d.ts

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

package/dist/cjs/components/FieldChat/components/Attachments/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("./Attachments"), exports);

package/dist/cjs/components/FieldChat/components/Attachments/styles.module.css

@@ -0,0 +1,12 @@
+.attachmentsScroll{
+  min-width:0;
+}
+
+.attachments{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  padding:var(--sn-primitive-dimension-1, 1px) 0;
+}
+.attachments > *{
+  flex-shrink:0;
+}

package/dist/cjs/components/FieldChat/components/FieldSubmitButton/FieldSubmitButton.d.ts

@@ -0,0 +1,18 @@
+export type FieldSubmitButtonProps = {
+    /** Активна ли отправка (есть валидное значение или прикреплённые файлы) */
+    active: boolean;
+    /** Колбек клика по кнопке отправки */
+    handleClick(): void;
+    /** Дополнительный класс */
+    className?: string;
+    /** Растянуть на всю ширину */
+    fullWidth?: boolean;
+    /** Показывать тултип над активной кнопкой */
+    showTooltip?: boolean;
+    /** Идентификатор для тестов */
+    'data-test-id'?: string;
+};
+/**
+ * Кнопка отправки сообщения. В активном состоянии — `submit` с тултипом, иначе — disabled.
+ */
+export declare function FieldSubmitButton({ active, handleClick, className, fullWidth, showTooltip, 'data-test-id': dataTestId, }: FieldSubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/FieldChat/components/FieldSubmitButton/FieldSubmitButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSubmitButton = FieldSubmitButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Кнопка отправки сообщения. В активном состоянии — `submit` с тултипом, иначе — disabled.
+ */
+function FieldSubmitButton({ active, handleClick, className, fullWidth, showTooltip = true, 'data-test-id': dataTestId, }) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    if (active) {
+        return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldAi.submit.tooltip'), hoverDelayOpen: 600, open: showTooltip ? undefined : false, triggerClassName: styles_module_scss_1.default.tooltipTrigger, children: (0, jsx_runtime_1.jsx)(button_1.Button, { fullWidth: fullWidth, icon: (0, jsx_runtime_1.jsx)(system_1.ArrowUpSVG, {}), size: 's', view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Primary, type: 'submit', onClick: handleClick, className: className, "data-test-id": dataTestId }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(system_1.ArrowUpSVG, {}), size: 's', view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Primary, disabled: true, className: className, fullWidth: fullWidth, "data-test-id": dataTestId }));
+}

package/dist/cjs/components/FieldChat/components/FieldSubmitButton/index.d.ts

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

package/dist/cjs/components/FieldChat/components/FieldSubmitButton/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("./FieldSubmitButton"), exports);

package/dist/cjs/components/FieldChat/components/FieldSubmitButton/styles.module.css

@@ -0,0 +1,3 @@
+.tooltipTrigger{
+  display:flex;
+}

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/TextAreaActionsFooter.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type TextAreaActionsFooterProps = {
+    /** Контент слева (например, счётчик символов) */
+    left?: ReactNode;
+    /** Контент справа (кнопки действий) */
+    right?: ReactNode;
+};
+export declare function TextAreaActionsFooter({ left, right }: TextAreaActionsFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/TextAreaActionsFooter.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaActionsFooter = TextAreaActionsFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TextAreaActionsFooter({ left, right }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actionsFooter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actionsLeft, children: left }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actionsRight, children: right })] }));
+}

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/index.d.ts

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

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/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("./TextAreaActionsFooter"), exports);

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/styles.module.css

@@ -0,0 +1,25 @@
+.actionsFooter{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  padding-bottom:var(--sn-primitive-dimension-8, 8px);
+}
+
+.actionsLeft{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.actionsRight{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:flex-end;
+  width:100%;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
+}

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

@@ -0,0 +1,2 @@
+export * from './FieldChat';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"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("./FieldChat"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,14 @@
+.fieldChat{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  width:100%;
+  min-width:0;
+}
+.fieldChat[data-layout-type=mobile]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.uploadTooltip{
+  display:flex;
+}

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

@@ -0,0 +1,14 @@
+import { AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+import { FileUploadProps } from '@cloud-ru/ds-dropzone';
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+export type FieldChatProps = Omit<FieldTextAreaProps, 'placeholder' | 'hint' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer' | 'minRows' | 'maxRows' | 'showCopyButton' | 'onKeyDown'> & {
+    /** Колбек действия при отправке */
+    handleSubmit(value: string): void;
+    /** Прикрепление файлов */
+    attachment?: Pick<FileUploadProps, 'onFilesUpload' | 'accept'> & {
+        /** Список загруженных файлов */
+        files?: File[];
+        /** Колбек действия при удалении прикреплённого файла */
+        onFileDelete: AttachmentSquareProps['onDelete'];
+    };
+};

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

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

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

@@ -0,0 +1,30 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { ResendCodeProps } from './components';
+import { UseCodeInputParams } from './hooks';
+export type FieldCodeRef = {
+    /** Перенести фокус на ячейку с индексом `index` */
+    moveFocus(index: number): void;
+    /** Убрать фокус со всех ячеек кода */
+    blurFields(): void;
+    /** Сбросить значение кода */
+    resetCode(): void;
+};
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет разрыв) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+    /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+    stretchCells?: boolean;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "data-test-id" | "label" | "error" | "size" | "disabled"> & import("react").RefAttributes<FieldCodeRef>>;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const components_1 = require("./components");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size = 'm', disabled, label, error, invalidCode, showEmptyChars, resendCode, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const { inputsRef, moveFocus, blurFields } = (0, hooks_1.useFocusCell)(codeLength);
+    const { code, cellHandlers, onChangeCode } = (0, hooks_1.useCodeInput)({ value, onChange, codeLength, moveFocus, onComplete });
+    const { resetCode } = (0, hooks_1.useFieldHelpers)({
+        onChangeCode,
+        isMobile,
+        moveFocus,
+        showEmptyChars,
+        code,
+        codeLength,
+    });
+    const { rootRef, codeContainerRef, hasOverflow } = (0, hooks_1.useFieldCodeOverflow)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        moveFocus,
+        blurFields,
+        resetCode,
+    }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = error ?? invalidCode;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, hasOverflow && styles_module_scss_1.default.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [(0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: (0, classnames_1.default)(!hasOverflow && styles_module_scss_1.default.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: (0, jsx_runtime_1.jsx)("div", { ref: codeContainerRef, className: styles_module_scss_1.default.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
+                            if (inputRef) {
+                                inputsRef.current[index] = inputRef;
+                            }
+                        }, className: (0, classnames_1.default)(spacing?.includes(index) && styles_module_scss_1.default.cellSpacing, cellClassName), stretchCells: stretchCells, size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: inputValue => cellHandlers.onChange(inputValue, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) }), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, { ...resendCode, size: resendCode.size ?? size }) : null] }));
+});

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

@@ -0,0 +1,7 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+export declare const Cell: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс ячейки кода */
+    className?: string;
+    /** Растягивать ячейку на всю доступную ширину */
+    stretchCells?: boolean;
+} & Pick<FieldComboProps, "validationState" | "size" | "disabled" | "onKeyDown" | "value" | "onChange" | "autoComplete" | "onPaste"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fields_1 = require("@cloud-ru/ds-fields");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../../../constants");
+const constants_2 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Cell = (0, react_1.forwardRef)(function Cell(props, ref) {
+    const { className, size, stretchCells, value, ...fieldCellProps } = props;
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { inputMode: 'numeric', ref: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.cell, stretchCells && styles_module_scss_1.default.stretch, className), "data-size": size, "data-test-id": constants_1.TEST_IDS.fieldCodeCell, showClearButton: false, value: value === constants_2.ZERO_WIDTH_SPACE ? '' : value, size: size, ...fieldCellProps }));
+});

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

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

package/dist/cjs/components/FieldCode/components/Cell/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("./Cell"), exports);

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

@@ -0,0 +1,19 @@
+.cell{
+  flex-shrink:0;
+}
+.cell input{
+  text-align:center;
+}
+.cell[data-size=s]:not(.stretch){
+  width:var(--sn-primitive-dimension-32, 32px);
+}
+.cell[data-size=m]:not(.stretch){
+  width:var(--sn-primitive-dimension-40, 40px);
+}
+.cell[data-size=l]:not(.stretch){
+  width:var(--sn-primitive-dimension-52, 52px);
+}
+.cell.stretch{
+  flex:1 1 0;
+  min-width:0;
+}

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

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+export type ResendCodeProps = {
+    /** Колбек отправки нового кода */
+    onResend(): void;
+    /** Количество секунд до следующей отправки кода */
+    secondsToNextResend: number;
+} & Pick<ButtonProps, 'size' | 'disabled'>;
+export declare function ResendCode(props: ResendCodeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResendCode = ResendCode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const constants_1 = require("../../../../constants");
+const locale_1 = require("../../../../locale");
+const utils_1 = require("./utils");
+function ResendCode(props) {
+    const { onResend, secondsToNextResend, disabled, size = 'm', ...buttonProps } = props;
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const isResendCodeWithVia = secondsToNextResend > 0;
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: isResendCodeWithVia
+            ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
+                timer: (0, utils_1.formatSecondsAsMmSs)(secondsToNextResend),
+            })
+            : t('FieldCode.resendCodeButtons.resendCode'), onClick: onResend, icon: (0, jsx_runtime_1.jsx)(system_1.UpdateSVG, {}), iconPosition: button_1.ICON_POSITION.Before, disabled: isResendCodeWithVia || disabled, size: size, "data-test-id": constants_1.TEST_IDS.fieldCodeResend, ...buttonProps }));
+}

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

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

package/dist/cjs/components/FieldCode/components/ResendCode/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("./ResendCode"), exports);

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

@@ -0,0 +1 @@
+export declare function formatSecondsAsMmSs(totalSeconds: number): string;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatSecondsAsMmSs = formatSecondsAsMmSs;
+function formatSecondsAsMmSs(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}

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

@@ -0,0 +1,2 @@
+export * from './Cell';
+export * from './ResendCode';

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

@@ -0,0 +1,18 @@
+"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("./Cell"), exports);
+__exportStar(require("./ResendCode"), exports);

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

@@ -0,0 +1,2 @@
+/** Заполнитель пустой ячейки кода — сохраняет позицию символа в строке значения. */
+export declare const ZERO_WIDTH_SPACE = "\u200B";

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZERO_WIDTH_SPACE = void 0;
+/** Заполнитель пустой ячейки кода — сохраняет позицию символа в строке значения. */
+exports.ZERO_WIDTH_SPACE = '\u200B';

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

@@ -0,0 +1,5 @@
+export * from './useCodeInput';
+export * from './useFieldCodeOverflow';
+export * from './useFieldCodeValidate';
+export * from './useFieldHelpers';
+export * from './useFocusCell';

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

@@ -0,0 +1,21 @@
+"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("./useCodeInput"), exports);
+__exportStar(require("./useFieldCodeOverflow"), exports);
+__exportStar(require("./useFieldCodeValidate"), exports);
+__exportStar(require("./useFieldHelpers"), exports);
+__exportStar(require("./useFocusCell"), exports);

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

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+export type UseCodeInputParams = {
+    /** Количество цифр в коде (целое ≥ 1) */
+    codeLength: number;
+    /** Значение кода */
+    value?: string;
+    /** Колбек изменения значения */
+    onChange?(code: string): void;
+    /** Функция переноса фокуса на ячейку с индексом `index` */
+    moveFocus(index: number): void;
+    /** Колбек ввода всех символов кода */
+    onComplete?(code: string): void;
+};
+export declare function useCodeInput(params: UseCodeInputParams): {
+    code: string[];
+    cellHandlers: {
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
+        onPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+        onChange: (code: string, index: number) => void;
+    };
+    onChangeCode: (value: any, ...args: any[]) => any;
+};