@cloud-ru/ds-fields 1.0.0

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

@@ -0,0 +1,95 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { ChangeEvent, FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+type FieldTextAreaDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldTextAreaOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Значение (controlled-режим) */
+    value?: string;
+    /** Начальное значение (uncontrolled-режим) */
+    defaultValue?: string;
+    /** Колбек смены значения */
+    onChange?(value: string, event?: ChangeEvent<HTMLTextAreaElement>): void;
+    /** Плейсхолдер */
+    placeholder?: string;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Максимальное количество символов */
+    maxLength?: number;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Режим виртуальной клавиатуры (`inputmode` нативного `<textarea>`) */
+    inputMode?: HTMLAttributes<HTMLTextAreaElement>['inputMode'];
+    /** Проверка орфографии */
+    spellCheck?: boolean;
+    /**
+     * Минимальное количество строк
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Максимальное количество строк (после — появляется скролл)
+     * @default 1000
+     */
+    maxRows?: number;
+    /**
+     * Разрешить ввод свыше `maxLength` символов (счётчик продолжит расти).
+     * @default true
+     */
+    allowMoreThanMaxLength?: boolean;
+    /**
+     * Нода над textarea — ряд элементов до контента (Figma `elementWrapperBefore` /
+     * `slotBeforeContent`): тулбар с кнопками, чипами и т.п.
+     */
+    header?: ReactNode;
+    /**
+     * Нода под textarea — ряд элементов после контента (Figma `elementWrapperAfter` /
+     * `slotAfterContent`): действия, счётчик-плагин и т.п.
+     */
+    footer?: ReactNode;
+    /**
+     * Можно ли менять высоту мышкой за нижний угол. Игнорируется при `disabled` или `readonly`.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Кнопка очистки (видна при value && !readonly)
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Кнопка копирования (видна при value && !disabled, независимо от readonly)
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования */
+    onCopyButtonClick?(): void;
+    /** Колбек фокуса */
+    onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
+    /** Колбек блюра */
+    onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
+    /** Колбек нажатия клавиши */
+    onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement>): void;
+};
+export type FieldTextAreaProps = FieldTextAreaDecoratorProps & FieldTextAreaOwnProps;
+export declare const FieldTextArea: import("react").ForwardRefExoticComponent<FieldTextAreaDecoratorProps & FieldTextAreaOwnProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/cjs/components/FieldTextArea/FieldTextArea.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldTextArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+exports.FieldTextArea = (0, react_1.forwardRef)(function FieldTextArea({ label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, background = true, value: valueProp, defaultValue = '', onChange, placeholder, id, name, maxLength, disabled, readonly: readOnly, autoFocus, layoutPresets, inputMode, spellCheck, minRows = 3, maxRows = 1000, resizable = false, allowMoreThanMaxLength = true, header, footer, showClearButton: showClearButtonProp = true, showCopyButton: showCopyButtonProp = true, onCopyButtonClick, onFocus: onFocusProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId, ...rest }, ref) {
+    const localRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,
+    // событие в `onChange` пробрасываем сами (useValueControl передаёт только значение).
+    const [value = '', setValue] = (0, utils_1.useValueControl)({ value: valueProp, defaultValue });
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const stringValue = String(value ?? '');
+    const isResizable = resizable && !disabled && !readOnly;
+    const showClearUi = Boolean(showClearButtonProp && stringValue && !readOnly && !disabled);
+    // Copy не завязан на readonly (паритет с snack-uikit master): виден при любом непустом значении.
+    // В editable-режиме показываются обе кнопки (clear + copy), в readonly — только copy.
+    const showCopyUi = Boolean(showCopyButtonProp && stringValue && !disabled);
+    const onClear = (0, react_1.useCallback)(() => {
+        setValue('');
+        onChange?.('');
+        localRef.current?.focus();
+    }, [onChange, setValue]);
+    const onCopy = (0, react_1.useCallback)(async () => {
+        const copied = await (0, shared_1.copyTextToClipboard)(stringValue);
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, stringValue]);
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: (0, shared_1.toInputSize)(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        inputRef: localRef,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: Boolean(readOnly),
+        submitKeys: ['Tab'],
+    });
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        onKeyDownProp?.(event);
+        onInputKeyDown(event);
+    }, [onInputKeyDown, onKeyDownProp]);
+    const handleChange = (event) => {
+        setValue(event.target.value);
+        onChange?.(event.target.value, event);
+    };
+    // Клик в «пустую» зону поля (под textarea при minRows-резерве, в правый резерв под кнопки)
+    // фокусит textarea и ставит курсор в конец — паритет со снеком, где попадание в любую область
+    // поля работает как клик по textarea. Намеренно `onClick`, а не `onMouseDown`+preventDefault:
+    // resize-ручка scroll-контейнера тоже работает через mousedown-drag, и preventDefault убивал бы
+    // нативный CSS-resize. Click после resize-drag не возникает, а клики по textarea, кнопкам
+    // clear/copy и DS-скроллбару отсеиваем по target.
+    const handleContentClick = (0, react_1.useCallback)((event) => {
+        const target = event.target;
+        if (disabled || target === localRef.current || target.closest('button, [class*="os-scrollbar"]')) {
+            return;
+        }
+        const textarea = localRef.current;
+        if (textarea) {
+            textarea.focus();
+            const end = textarea.value.length;
+            textarea.setSelectionRange(end, end);
+        }
+    }, [disabled]);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const shell = ((0, jsx_runtime_1.jsx)(shared_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.fieldTextAreaShell, className: fieldClassName, size: size, validationState: effectiveValidationState, disabled: disabled, readonly: readOnly, background: background, focusVisible: focusVisible, hover: hover, header: header, footer: footer, style: { '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.contentWrapper, styles_module_scss_2.default.contentArea), onClick: handleContentClick, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: (0, classnames_1.default)(styles_module_scss_2.default.scrollContainer, { [styles_module_scss_2.default.scrollContainerResizable]: isResizable }), size: scroll_1.SIZE.S, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Never, resize: isResizable ? scroll_1.RESIZE.Vertical : scroll_1.RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": constants_1.TEST_IDS.fieldTextAreaScrollArea, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_2.default.textarea, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, id: id, name: name, maxLength: allowMoreThanMaxLength ? undefined : maxLength, autoFocus: resolvedAutoFocus, inputMode: inputMode, spellCheck: spellCheck, minRows: minRows, tabIndex: inputTabIndex, "data-test-id": constants_1.TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...(0, utils_1.extractSupportProps)(rest) }) }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixColumn, children: postfixButtons })] }) }));
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined), required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
+});

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

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

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

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

@@ -0,0 +1,123 @@
+.scrollContainer{
+  flex:1 1 auto;
+  min-width:0;
+  min-height:calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+  max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
+}
+[data-size=s] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+}
+[data-size=m] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+[data-size=l] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+
+.scrollContainerResizable{
+  height:calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+}
+
+.textarea{
+  resize:none;
+  overflow:hidden;
+  width:100%;
+  min-width:0;
+  padding:0;
+  border:none;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:transparent;
+  outline:none;
+}
+.textarea::-moz-placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.textarea::placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.textarea:disabled::-moz-placeholder{
+  visibility:hidden;
+}
+.textarea:disabled::placeholder{
+  visibility:hidden;
+}
+.textarea:-moz-read-only{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.textarea:read-only{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+[data-size=s] .textarea{
+  min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
+  padding-right:calc(var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+[data-size=m] .textarea{
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+[data-size=l] .textarea{
+  min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
+  padding-right:calc(var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+
+.contentArea{
+  position:relative;
+}
+[data-size=s] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.postfixColumn{
+  position:absolute;
+  display:grid;
+  grid-template-columns:100%;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  place-items:center center;
+}
+[data-size=s] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+}
+[data-size=m] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+[data-size=l] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}

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

@@ -0,0 +1,74 @@
+import { TimeValue } from '@cloud-ru/ds-calendar';
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { FocusEvent } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+type FieldTimeDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldTimeOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Значение */
+    value?: TimeValue;
+    /** Дефолтное значение для uncontrolled-режима */
+    defaultValue?: TimeValue;
+    /** Колбек смены значения */
+    onChange?(value: TimeValue | undefined): void;
+    /** Плейсхолдер маски; по умолчанию `чч:мм:сс` или `чч:мм` в зависимости от `showSeconds`. */
+    placeholder?: string;
+    /** Открыт ли picker (controlled) */
+    open?: boolean;
+    /** Колбек смены состояния открытия */
+    onOpenChange?(open: boolean): void;
+    /**
+     * Показывать секунды в picker и в маске input.
+     * @default true
+     */
+    showSeconds?: boolean;
+    /**
+     * Закрыть picker после Apply.
+     * @default true
+     */
+    closeOnApply?: boolean;
+    /**
+     * Показывать кнопку очистки (видна при value && !readonly && !disabled).
+     * @default true
+     */
+    showClearButton?: boolean;
+    /** Колбек после клика по кнопке очистки. */
+    onClearButtonClick?(): void;
+    /**
+     * Показывать кнопку копирования (видна при readonly && value && !disabled).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения. */
+    onCopyButtonClick?(): void;
+    /**
+     * Фон поля (acrylic).
+     * @default true
+     */
+    background?: boolean;
+    /** Отключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Колбек фокуса input */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра input */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+};
+export type FieldTimeProps = FieldTimeDecoratorProps & FieldTimeOwnProps;
+export declare const FieldTime: import("react").ForwardRefExoticComponent<FieldTimeDecoratorProps & FieldTimeOwnProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/FieldTime/FieldTime.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldTime = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calendar_1 = require("@cloud-ru/ds-calendar");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const segments_1 = require("../../segments");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const mask_1 = require("./mask");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+exports.FieldTime = (0, react_1.forwardRef)(function FieldTime({ label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, background = true, value: valueProp, defaultValue, onChange, open: openProp, onOpenChange, showSeconds = true, closeOnApply = true, showClearButton: showClearButtonProp = true, onClearButtonClick, showCopyButton: showCopyButtonProp = true, onCopyButtonClick, disabled, readonly: readOnly, autoFocus, layoutPresets, id, name, placeholder, onFocus: onFocusProp, onBlur: onBlurProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldTime, ...rest }, ref) {
+    const localRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const navigationStartRef = (0, react_1.useRef)(null);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [openLocal, setOpenLocal] = (0, react_1.useState)(false);
+    const open = openProp ?? openLocal;
+    const [valueLocal, setValueLocal] = (0, react_1.useState)(defaultValue);
+    const value = valueProp ?? valueLocal;
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    const { mask: segMask, slots: segSlots } = (0, react_1.useMemo)(() => (0, segments_1.buildSegments)('time', showSeconds), [showSeconds]);
+    const placeholderMask = placeholder ?? segMask;
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const [inputValue, setInputValue] = (0, react_1.useState)(value ? (0, mask_1.timeToMaskString)(value, showSeconds) : '');
+    (0, react_1.useEffect)(() => {
+        // Пока поле в фокусе — значением владеет сегментный движок (keydown), внешний sync пропускаем,
+        // иначе setInputValue из эффекта дерётся с движком и зацикливает рендер.
+        if (localRef.current && document.activeElement === localRef.current)
+            return;
+        setInputValue(value ? (0, mask_1.timeToMaskString)(value, showSeconds) : '');
+    }, [value, showSeconds]);
+    const emitChange = (0, react_1.useCallback)((next) => {
+        if (valueProp === undefined)
+            setValueLocal(next);
+        onChange?.(next);
+    }, [onChange, valueProp]);
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        if (openProp === undefined)
+            setOpenLocal(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const timeSeg = (0, segments_1.useSegmentedMask)({
+        inputRef: localRef,
+        mask: segMask,
+        slots: segSlots,
+        readonly: readOnly,
+        disabled,
+        setValue: setInputValue,
+        onMaskedChange: masked => {
+            if (masked === '') {
+                emitChange(undefined);
+                return;
+            }
+            const parsed = (0, mask_1.parseTimeMask)(masked, showSeconds);
+            if (parsed)
+                emitChange(parsed);
+        },
+        onArrowDown: () => {
+            handleOpenChange(true);
+            // Клавиатурный handoff в picker (барабаны времени), паритет с легаси.
+            setTimeout(() => navigationStartRef.current?.focus(), 0);
+        },
+        // ArrowUp в поле закрывает открытый picker (фокус остаётся в input на текущем сегменте).
+        onArrowUp: () => handleOpenChange(false),
+        onEscape: () => handleOpenChange(false),
+        onEdit: () => handleOpenChange(false),
+    });
+    const onClear = (0, react_1.useCallback)(() => {
+        setInputValue('');
+        emitChange(undefined);
+        onClearButtonClick?.();
+        if (required) {
+            localRef.current?.focus();
+            handleOpenChange(true);
+        }
+        else {
+            localRef.current?.blur();
+            handleOpenChange(false);
+        }
+    }, [emitChange, handleOpenChange, onClearButtonClick, required]);
+    const onCopy = (0, react_1.useCallback)(async () => {
+        const copied = Boolean(inputValue) && (await (0, shared_1.copyTextToClipboard)(inputValue));
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [inputValue, onCopyButtonClick]);
+    const showClearUi = Boolean(showClearButtonProp && inputValue && !disabled && !readOnly);
+    const showCopyUi = Boolean(showCopyButtonProp && inputValue && !disabled && readOnly);
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: (0, shared_1.toInputSize)(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        inputRef: localRef,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [readOnly, disabled]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const handleInputKeyDown = (0, react_1.useCallback)((event) => {
+        timeSeg.handleKeyDown(event);
+        // Нав-цепочка бежит безусловно ПОСЛЕ движка (легаси-порядок useHandlers): движок мутирует
+        // selection синхронно (ArrowRight на последнем сегменте ставит каретку в конец), nav читает
+        // её в том же keydown и забирает фокус на postfix-кнопки. Гейт по defaultPrevented оставлял
+        // clear/copy недостижимыми со стрелок — движок всегда делает preventDefault на ArrowRight.
+        onInputKeyDown(event);
+    }, [onInputKeyDown, timeSeg]);
+    // value ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
+    const handleInputChange = (0, react_1.useCallback)(() => undefined, []);
+    const handleInputFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        timeSeg.handleFocus();
+        onFocusProp?.(event);
+    }, [onFocusProp, timeSeg]);
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        timeSeg.handleBlur();
+        onBlurProp?.(event);
+    }, [onBlurProp, timeSeg]);
+    const trigger = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, styles_module_scss_2.default.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, shared_1.getAcrylicProps)({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible: focusVisible || open,
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: input_private_1.INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldTimeInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}) })] }) })] }));
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(calendar_1.TimePickerDropdown
+        // Явный data-test-id на дропдауне → детерминированный id портального контента:
+        // `getTestIdBuilder` строит `content-${id}`, так контент адресуем для open-picker-снимка
+        // (без него контент рисуется без data-test-id, а в @cloud-ru/ds-fields::TEST_IDS такого слота нет).
+        , { "data-test-id": `${dataTestId}__picker`, size: size, value: value, onChangeValue: emitChange, showSeconds: showSeconds, closeOnApply: closeOnApply, open: open && !disabled && !readOnly, onOpenChange: handleOpenChange, trigger: 'click', placement: 'bottom-start', navigationStartRef: navigationStartRef, onFocusLeave: () => {
+                localRef.current?.focus();
+                handleOpenChange(false);
+            }, children: trigger }) }));
+});

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

@@ -0,0 +1,2 @@
+export * from './FieldTime';
+export type { TimeValue } from '@cloud-ru/ds-calendar';

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

package/dist/cjs/components/FieldTime/mask.d.ts

@@ -0,0 +1,3 @@
+import { TimeValue } from '@cloud-ru/ds-calendar';
+export declare function parseTimeMask(input: string, showSeconds: boolean): TimeValue | undefined;
+export declare function timeToMaskString(value: TimeValue, showSeconds: boolean): string;