@cloud-ru/ds-fields 1.0.0

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
+import { BAR_HIDE_STRATEGY, RESIZE, Scroll, SIZE as SCROLL_SIZE } from '@cloud-ru/ds-scroll';
+import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { TEST_IDS } from '../../constants.js';
+import { useAdaptiveAutoFocus } from '../../hooks/index.js';
+import { copyTextToClipboard, FieldShell, toInputSize, useCopyButton } from '../shared/index.js';
+import fieldStyles from '../shared/styles.module.css';
+import styles from './styles.module.css';
+export const FieldTextArea = forwardRef(function FieldTextArea({ label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = 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 = useRef(null);
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [hover, setHover] = useState(false);
+    const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
+    // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,
+    // событие в `onChange` пробрасываем сами (useValueControl передаёт только значение).
+    const [value = '', setValue] = useValueControl({ value: valueProp, defaultValue });
+    const effectiveValidationState = useMemo(() => (error ? 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 = useCallback(() => {
+        setValue('');
+        onChange?.('');
+        localRef.current?.focus();
+    }, [onChange, setValue]);
+    const onCopy = useCallback(async () => {
+        const copied = await copyTextToClipboard(stringValue);
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, stringValue]);
+    const clearButtonSettings = useClearButton({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: toInputSize(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: toInputSize(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+        inputRef: localRef,
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: Boolean(readOnly),
+        submitKeys: ['Tab'],
+    });
+    const handleKeyDown = 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 = 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 = useCallback((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleBlur = useCallback((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const handleMouseEnter = useCallback(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = useCallback(() => {
+        setHover(false);
+    }, []);
+    const shell = (_jsx(FieldShell, { "data-test-id": 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: _jsxs("div", { className: cn(fieldStyles.contentWrapper, styles.contentArea), onClick: handleContentClick, children: [_jsx(Scroll, { className: cn(styles.scrollContainer, { [styles.scrollContainerResizable]: isResizable }), size: SCROLL_SIZE.S, barHideStrategy: BAR_HIDE_STRATEGY.Never, resize: isResizable ? RESIZE.Vertical : RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": TEST_IDS.fieldTextAreaScrollArea, children: _jsx("div", { className: fieldStyles.inputLine, children: _jsx(TextareaAutosize, { ref: mergeRefs(ref, localRef), className: styles.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": TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...extractSupportProps(rest) }) }) }), postfixButtons && _jsx("span", { className: styles.postfixColumn, children: postfixButtons })] }) }));
+    return (_jsx(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/esm/components/FieldTextArea/index.d.ts

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

package/dist/esm/components/FieldTextArea/index.js

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

package/dist/esm/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/esm/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/index.js';
+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/esm/components/FieldTime/FieldTime.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TimePickerDropdown } from '@cloud-ru/ds-calendar';
+import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { WatchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { INPUT_MODE, InputPrivate, useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { useAdaptiveAutoFocus } from '../../hooks/index.js';
+import { buildSegments, useSegmentedMask } from '../../segments/index.js';
+import { copyTextToClipboard, getAcrylicProps, toInputSize, useCopyButton } from '../shared/index.js';
+import fieldStyles from '../shared/styles.module.css';
+import { parseTimeMask, timeToMaskString } from './mask.js';
+import styles from './styles.module.css';
+export const FieldTime = forwardRef(function FieldTime({ label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = 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 = TEST_IDS.fieldTime, ...rest }, ref) {
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const navigationStartRef = useRef(null);
+    const [hover, setHover] = useState(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [openLocal, setOpenLocal] = useState(false);
+    const open = openProp ?? openLocal;
+    const [valueLocal, setValueLocal] = useState(defaultValue);
+    const value = valueProp ?? valueLocal;
+    const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
+    const { mask: segMask, slots: segSlots } = useMemo(() => buildSegments('time', showSeconds), [showSeconds]);
+    const placeholderMask = placeholder ?? segMask;
+    const effectiveValidationState = useMemo(() => (error ? VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const [inputValue, setInputValue] = useState(value ? timeToMaskString(value, showSeconds) : '');
+    useEffect(() => {
+        // Пока поле в фокусе — значением владеет сегментный движок (keydown), внешний sync пропускаем,
+        // иначе setInputValue из эффекта дерётся с движком и зацикливает рендер.
+        if (localRef.current && document.activeElement === localRef.current)
+            return;
+        setInputValue(value ? timeToMaskString(value, showSeconds) : '');
+    }, [value, showSeconds]);
+    const emitChange = useCallback((next) => {
+        if (valueProp === undefined)
+            setValueLocal(next);
+        onChange?.(next);
+    }, [onChange, valueProp]);
+    const handleOpenChange = useCallback((next) => {
+        if (openProp === undefined)
+            setOpenLocal(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const timeSeg = useSegmentedMask({
+        inputRef: localRef,
+        mask: segMask,
+        slots: segSlots,
+        readonly: readOnly,
+        disabled,
+        setValue: setInputValue,
+        onMaskedChange: masked => {
+            if (masked === '') {
+                emitChange(undefined);
+                return;
+            }
+            const parsed = 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 = useCallback(() => {
+        setInputValue('');
+        emitChange(undefined);
+        onClearButtonClick?.();
+        if (required) {
+            localRef.current?.focus();
+            handleOpenChange(true);
+        }
+        else {
+            localRef.current?.blur();
+            handleOpenChange(false);
+        }
+    }, [emitChange, handleOpenChange, onClearButtonClick, required]);
+    const onCopy = useCallback(async () => {
+        const copied = Boolean(inputValue) && (await 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 = useClearButton({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: toInputSize(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: toInputSize(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+        inputRef: localRef,
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleMouseEnter = useCallback(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [readOnly, disabled]);
+    const handleMouseLeave = useCallback(() => {
+        setHover(false);
+    }, []);
+    const handleInputKeyDown = 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 = useCallback(() => undefined, []);
+    const handleInputFocus = useCallback((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        timeSeg.handleFocus();
+        onFocusProp?.(event);
+    }, [onFocusProp, timeSeg]);
+    const handleInputBlur = useCallback((event) => {
+        setFocusVisible(false);
+        timeSeg.handleBlur();
+        onBlurProp?.(event);
+    }, [onBlurProp, timeSeg]);
+    const trigger = (_jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.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: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible: focusVisible || open,
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [_jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: 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, ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldTimeInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: _jsx(WatchSVG, {}) })] }) })] }));
+    return (_jsx(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: _jsx(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/esm/components/FieldTime/index.d.ts

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

package/dist/esm/components/FieldTime/index.js

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

package/dist/esm/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;

package/dist/esm/components/FieldTime/mask.js

@@ -0,0 +1,20 @@
+function getMaxLen(showSeconds) {
+    return showSeconds ? 6 : 4;
+}
+export function parseTimeMask(input, showSeconds) {
+    const digits = input.replace(/\D/g, '');
+    const expected = getMaxLen(showSeconds);
+    if (digits.length !== expected)
+        return undefined;
+    const hours = Number(digits.slice(0, 2));
+    const minutes = Number(digits.slice(2, 4));
+    const seconds = showSeconds ? Number(digits.slice(4, 6)) : 0;
+    if (hours > 23 || minutes > 59 || seconds > 59)
+        return undefined;
+    return showSeconds ? { hours, minutes, seconds } : { hours, minutes };
+}
+export function timeToMaskString(value, showSeconds) {
+    const pad = (n) => String(n ?? 0).padStart(2, '0');
+    const head = `${pad(value.hours)}:${pad(value.minutes)}`;
+    return showSeconds ? `${head}:${pad(value.seconds)}` : head;
+}

package/dist/esm/components/FieldTime/styles.module.css

@@ -0,0 +1,3 @@
+.trigger{
+  cursor:text;
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,14 @@
+export * from './FieldColor/index.js';
+export * from './FieldCombo/index.js';
+export * from './FieldDate/index.js';
+export { SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+export type { Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+export * from './FieldSecure/index.js';
+export * from './FieldSelect/index.js';
+export * from './FieldSlider/index.js';
+export * from './FieldStepper/index.js';
+export * from './FieldText/index.js';
+export * from './FieldTextArea/index.js';
+export * from './FieldTime/index.js';
+export { FieldShell } from './shared/index.js';
+export type { FieldElementButtonProps, FieldShellProps } from './shared/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,12 @@
+export * from './FieldColor/index.js';
+export * from './FieldCombo/index.js';
+export * from './FieldDate/index.js';
+export { SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+export * from './FieldSecure/index.js';
+export * from './FieldSelect/index.js';
+export * from './FieldSlider/index.js';
+export * from './FieldStepper/index.js';
+export * from './FieldText/index.js';
+export * from './FieldTextArea/index.js';
+export * from './FieldTime/index.js';
+export { FieldShell } from './shared/index.js';

package/dist/esm/components/shared/helperComponents/FieldElementButton/FieldElementButton.d.ts

@@ -0,0 +1,35 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { ButtonSize, Variant } from './types.js';
+export type FieldElementButtonProps = {
+    /** Положение относительно поля */
+    variant: Variant;
+    /**
+     * Размер (совпадает с размером поля)
+     * @default 'm'
+     */
+    size?: ButtonSize;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Деактивировано */
+    disabled?: boolean;
+    /** Содержимое (иконка и т.д.) */
+    action: ReactNode;
+    /** Показать шеврон раскрытия */
+    withDropdownList?: boolean;
+    /**
+     * Контролируемое состояние раскрытия (используется обёрткой `FieldElementButtonList`).
+     * Если задано — шеврон отражает это значение; иначе кнопка управляет шевроном сама.
+     */
+    open?: boolean;
+    /** Обработчик нажатия клавиш (передаётся обёрткой `Droplist` для ArrowDown/ArrowUp) */
+    onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
+    /** Обработчик клика */
+    onClick?(): void;
+    /** HTML tabIndex (`-1` — исключить кнопку из tab-order, фокус по Tab уходит в поле) */
+    tabIndex?: number;
+    /** CSS-класс (передаётся обёрткой `Droplist` / `PopoverPrivate` на триггер) */
+    className?: string;
+    /** data-test-id кнопки-слота */
+    'data-test-id'?: string;
+};
+export declare const FieldElementButton: import("react").ForwardRefExoticComponent<FieldElementButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/shared/helperComponents/FieldElementButton/FieldElementButton.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun, SUN_SIZE } from '@cloud-ru/ds-loader';
+import cn from 'classnames';
+import { forwardRef, useCallback, useState } from 'react';
+import { BUTTON_SIZE } from './constants.js';
+import styles from './styles.module.css';
+const SUN_SIZE_MAP = {
+    [BUTTON_SIZE.S]: SUN_SIZE.XS,
+    [BUTTON_SIZE.M]: SUN_SIZE.S,
+    [BUTTON_SIZE.L]: SUN_SIZE.S,
+};
+export const FieldElementButton = forwardRef(function FieldElementButton({ size = BUTTON_SIZE.M, loading = false, disabled = false, onClick, onKeyDown, withDropdownList, open, variant, action, className, tabIndex, 'data-test-id': dataTestId, }, ref) {
+    const [isListOpen, setListOpen] = useState(false);
+    const [stateLayerPressed, setStateLayerPressed] = useState(false);
+    // Если `open` контролируется снаружи (FieldElementButtonList) — шеврон следует за ним,
+    // иначе кнопка хранит состояние раскрытия сама.
+    const listOpen = open ?? isListOpen;
+    const handleListToggleClick = useCallback(() => {
+        setListOpen(prevOpen => !prevOpen);
+        onClick?.();
+    }, [onClick]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled || loading) {
+            return;
+        }
+        if (event.key === 'Enter' && !event.repeat) {
+            setStateLayerPressed(true);
+        }
+        onKeyDown?.(event);
+    }, [disabled, loading, onKeyDown]);
+    const handleKeyUp = useCallback((event) => {
+        if (event.key === 'Enter') {
+            setStateLayerPressed(false);
+        }
+    }, []);
+    const handleBlur = useCallback(() => {
+        setStateLayerPressed(false);
+    }, []);
+    return (_jsxs("button", { ref: ref, type: 'button', className: cn(styles.buttonContainer, className), onClick: loading || disabled ? undefined : handleListToggleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: handleBlur, disabled: disabled || loading || undefined, tabIndex: tabIndex, "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": disabled || undefined, "data-pressed": stateLayerPressed ? true : undefined, "data-test-id": dataTestId, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": 'emptyNeutralOnBackground' }), _jsx("div", { className: styles.focusLayer, "aria-hidden": true }), _jsxs("div", { className: styles.elementWrapper, children: [loading && !disabled ? _jsx(Sun, { size: SUN_SIZE_MAP[size] }) : action, withDropdownList && _jsx("div", { className: styles.chevron, children: listOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) })] })] }));
+});