@cloud-ru/ds-fields 1.0.0

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

@@ -0,0 +1,197 @@
+import { FieldDecoratorProps, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { DroplistProps, ItemId, ItemProps } from '@cloud-ru/ds-list';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+import { SELECTION_MODE } from './constants';
+/** Режим выбора FieldSelect: одно значение или несколько. */
+export type Selection = ValueOf<typeof SELECTION_MODE>;
+type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
+type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
+    /**
+     * Флаг «ошибка загрузки данных» — при `true` дроплист рендерит `errorDataState`
+     * вместо списка (для асинхронной подгрузки с провалившимся запросом).
+     */
+    dataError?: DroplistProps['dataError'];
+    /**
+     * Флаг «список отфильтрован» — при `true` и пустом результате дроплист рендерит
+     * `noResultsState`. По умолчанию выводится из строки поиска (`searchable` + ввод).
+     */
+    dataFiltered?: DroplistProps['dataFiltered'];
+};
+type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
+    /** Размер */
+    size?: FieldDecoratorProps['size'];
+    /** Состояние валидации */
+    validationState?: ValidationState;
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Список айтемов дроплиста (формат `@cloud-ru/ds-list`) */
+    items: ItemProps[];
+    /** Пресет-айтемы сверху (формат `@cloud-ru/ds-list`) */
+    pinTop?: ItemProps[];
+    /** Пресет-айтемы снизу (формат `@cloud-ru/ds-list`) */
+    pinBottom?: ItemProps[];
+    /** Placeholder в триггере, когда нет выбранного значения */
+    placeholder?: string;
+    /** Иконка перед текстом */
+    iconBefore?: ReactNode;
+    /** Префикс — текст или нода перед значением (Figma `prefix`) */
+    prefix?: ReactNode;
+    /** Постфикс — текст или нода после значения (Figma `postfix`) */
+    postfix?: ReactNode;
+    /** Деактивировано */
+    disabled?: boolean;
+    /** Read-only режим */
+    readonly?: boolean;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /** Управляемое открытие дроплиста */
+    open?: DroplistProps['open'];
+    /** Колбек смены открытия */
+    onOpenChange?: DroplistProps['onOpenChange'];
+    /** Placement дроплиста */
+    placement?: DroplistProps['placement'];
+    /**
+     * Стратегия ширины дроплиста.
+     * @default 'eq' — равна ширине триггера
+     */
+    widthStrategy?: DroplistProps['widthStrategy'];
+    /**
+     * Включить поиск/ввод в поле — пользователь печатает, список фильтруется по подстроке лейбла.
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Управляемое/неуправляемое состояние строки поиска (текста в поле). Позволяет потребителю
+     * читать и задавать запрос (например, для серверного поиска вместе с `autocomplete`).
+     */
+    search?: {
+        /** Управляемое значение строки поиска */
+        value?: string;
+        /** Начальное значение строки поиска (uncontrolled) */
+        defaultValue?: string;
+        /** Колбек смены строки поиска */
+        onChange?(value: string): void;
+    };
+    /**
+     * Не фильтровать список на клиенте — фильтрацию обеспечивает потребитель (серверный поиск).
+     * Введённый текст уходит в `search.onChange`, список берётся из `items` как есть.
+     * @default false
+     */
+    autocomplete?: boolean;
+    /**
+     * Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»).
+     * @default false
+     */
+    addOptionByEnter?: boolean;
+    /**
+     * Сбрасывать строку поиска к выбранному значению после выбора. `false` нужен при асинхронной
+     * подгрузке (оставить введённый запрос как значение, пока данные не пришли).
+     * @default true
+     */
+    resetSearchOnOptionSelection?: boolean;
+    /**
+     * Показывать кнопку очистки значения (✕). Активна, когда есть выбранное значение
+     * и поле не disabled/readonly.
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Показывать кнопку копирования значения (только при `readonly` и непустом значении).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения в буфер */
+    onCopyButtonClick?(): void;
+    /** HTML-атрибут `id` для input (и `for` у label) */
+    id?: string;
+    /** HTML-атрибут `name` для input */
+    name?: string;
+    /** Автофокус input при монтировании. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Колбек фокуса input */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра input */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек нажатия клавиши на input (вызывается после внутренней обработки навигации) */
+    onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Включить нечёткий поиск: символы запроса должны встречаться в лейбле в том же порядке
+     * (например, `lge` найдёт `Large`). Если `false` — простой substring-match.
+     * @default true
+     */
+    enableFuzzySearch?: boolean;
+    /**
+     * Кастомный форматтер лейбла выбранного значения. Применяется к каждому выбранному
+     * элементу (single — значение в поле, multiple — лейбл чипа или элемент в comma-joined).
+     */
+    selectedOptionFormatter?(selected: {
+        id: ItemId;
+        label: string;
+    }): string;
+    /** Тестовый id корня */
+    'data-test-id'?: string;
+};
+export type FieldSelectSingleProps = CommonSelectProps & {
+    /** Режим выбора. По умолчанию `'single'`. */
+    selection?: typeof SELECTION_MODE.Single;
+    /** Управляемое значение */
+    value?: ItemId;
+    /** Неуправляемое значение по умолчанию */
+    defaultValue?: ItemId;
+    /** Колбек смены значения */
+    onChange?(value: ItemId | undefined): void;
+    /**
+     * Закрывать дроплист после клика на айтем.
+     * @default true
+     */
+    closeDroplistOnItemClick?: boolean;
+};
+export type FieldSelectMultipleProps = CommonSelectProps & {
+    /** Режим выбора */
+    selection: typeof SELECTION_MODE.Multiple;
+    /** Управляемые значения */
+    value?: ItemId[];
+    /** Неуправляемые значения по умолчанию */
+    defaultValue?: ItemId[];
+    /** Колбек смены значений */
+    onChange?(value: ItemId[]): void;
+    /**
+     * Форматтер строки выбранных значений (используется, если `chips=false`).
+     * @default — список лейблов через `, `
+     */
+    formatSelected?(selected: {
+        id: ItemId;
+        label: string;
+    }[]): string;
+    /**
+     * Отображать выбранные значения как чипы (`@cloud-ru/ds-tag`) внутри поля. Если `false`,
+     * показывает строку из `formatSelected` либо comma-joined.
+     * @default true
+     */
+    chips?: boolean;
+    /**
+     * Удалять последний чип по `Backspace`, когда строка ввода пустая.
+     * Работает только при `chips=true` и `searchable=true`.
+     * @default true
+     */
+    removeByBackspace?: boolean;
+    /**
+     * Закрывать дроплист после клика на айтем.
+     * @default false
+     */
+    closeDroplistOnItemClick?: boolean;
+};
+export type FieldSelectProps = FieldSelectSingleProps | FieldSelectMultipleProps;
+export {};

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

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

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

@@ -0,0 +1,19 @@
+import { Size } from '@cloud-ru/ds-field-decorator';
+import { ItemId, ItemProps } from '@cloud-ru/ds-list';
+import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
+import { FieldSelectMultipleProps, FieldSelectProps } from './types';
+export declare const TAG_SIZE_MAP: Record<Size, TagSize>;
+export type WithIdContent = {
+    id?: ItemId;
+    content?: unknown;
+    disabled?: boolean;
+    appearance?: unknown;
+};
+export declare function extractLabel(item: WithIdContent): string;
+export declare function extractSearchText(item: WithIdContent): string;
+export declare function extractAppearance(item?: WithIdContent): TagAppearance | undefined;
+export declare function flatten(items: ItemProps[]): WithIdContent[];
+export declare function findItem(items: ItemProps[], id: ItemId): WithIdContent | undefined;
+export declare function isFuzzyMatch(haystack: string, needle: string): boolean;
+export declare function filterItems(items: ItemProps[], query: string, fuzzy: boolean): ItemProps[];
+export declare function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps;

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAG_SIZE_MAP = void 0;
+exports.extractLabel = extractLabel;
+exports.extractSearchText = extractSearchText;
+exports.extractAppearance = extractAppearance;
+exports.flatten = flatten;
+exports.findItem = findItem;
+exports.isFuzzyMatch = isFuzzyMatch;
+exports.filterItems = filterItems;
+exports.isMultiple = isMultiple;
+const constants_1 = require("./constants");
+exports.TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };
+function extractLabel(item) {
+    const { content, id } = item;
+    if (!content) {
+        return String(id ?? '');
+    }
+    if (typeof content === 'string' || typeof content === 'number') {
+        return String(content);
+    }
+    if (typeof content === 'object' && content !== null && 'label' in content) {
+        return String(content.label);
+    }
+    return String(id ?? '');
+}
+// Текст для поиска: лейбл (option) + caption + description — паритет с легаси `useSearch`,
+// который матчил запрос по всем трём полям контента, а не только по лейблу.
+function extractSearchText(item) {
+    const parts = [extractLabel(item)];
+    const { content } = item;
+    if (content && typeof content === 'object') {
+        const c = content;
+        if (typeof c.caption === 'string') {
+            parts.push(c.caption);
+        }
+        if (typeof c.description === 'string') {
+            parts.push(c.description);
+        }
+    }
+    return parts.join(' ');
+}
+// Цвет чипа выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Берётся с самого item'а (additive: потребитель задаёт `appearance` на элементе items).
+function extractAppearance(item) {
+    const a = item?.appearance;
+    return typeof a === 'string' ? a : undefined;
+}
+function flatten(items) {
+    const out = [];
+    for (const item of items) {
+        out.push(item);
+        if ('items' in item && Array.isArray(item.items)) {
+            out.push(...flatten(item.items));
+        }
+    }
+    return out;
+}
+function findItem(items, id) {
+    for (const item of flatten(items)) {
+        if (item.id === id) {
+            return item;
+        }
+    }
+    return undefined;
+}
+// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
+// Пример: query=`lge` matches `Large` (L → r → arg → e).
+function isFuzzyMatch(haystack, needle) {
+    if (!needle) {
+        return true;
+    }
+    let i = 0;
+    for (const ch of haystack) {
+        if (ch === needle[i]) {
+            i += 1;
+            if (i === needle.length) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function filterItems(items, query, fuzzy) {
+    if (!query) {
+        return items;
+    }
+    const q = query.toLowerCase();
+    const matches = (item) => {
+        const text = extractSearchText(item).toLowerCase();
+        return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+    };
+    const walk = (list) => list.flatMap(item => {
+        if ('items' in item && Array.isArray(item.items)) {
+            const filteredChildren = walk(item.items);
+            return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren }] : [];
+        }
+        return matches(item) ? [item] : [];
+    });
+    return walk(items);
+}
+function isMultiple(props) {
+    return props.selection === constants_1.SELECTION_MODE.Multiple;
+}

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

@@ -0,0 +1,92 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { SliderProps } from '@cloud-ru/ds-slider';
+import { FocusEvent, ReactElement, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+import { SliderValue, TextInputFormatter } from './types';
+type SliderMarks = NonNullable<SliderProps['marks']>;
+type FieldSliderDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldSliderOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Значение (число или диапазон при `range`; controlled-режим) */
+    value?: SliderValue;
+    /** Начальное значение (uncontrolled-режим). По умолчанию `min` (или `[min, max]` при `range`). */
+    defaultValue?: SliderValue;
+    /** Колбек смены значения */
+    onChange?(value: SliderValue): void;
+    /**
+     * Диапазон с двумя ручками. Текстовое поле в этом режиме `readonly`
+     * и показывает значение как `min – max`.
+     * @default false
+     */
+    range?: boolean;
+    /** Минимум */
+    min: number;
+    /** Максимум */
+    max: number;
+    /** Шаг приращения. `null` — снэп только к меткам. */
+    step: number | null;
+    /** Метки на шкале */
+    marks?: SliderMarks;
+    /**
+     * Показывать линейку с метками
+     * @default true
+     */
+    showScaleBar?: boolean;
+    /**
+     * Равномерно распределять метки по шкале при нелинейных значениях
+     * (например `1 2 4 8 16 32` — равные промежутки вместо логарифмических).
+     * @default false
+     */
+    marksEqualSpacing?: boolean;
+    /** Форматирование значения в текстовом поле */
+    textInputFormatter?: TextInputFormatter;
+    /**
+     * Если `true` — текстовое поле принимает любые числа в диапазоне `min..max`,
+     * не снэпя к меткам.
+     * @default false
+     */
+    unbindInputFromMarks?: boolean;
+    /** Произвольный префикс */
+    prefix?: ReactNode;
+    /** Произвольный постфикс */
+    postfix?: ReactNode;
+    /** Иконка-постфикс справа от текстового поля */
+    postfixIcon?: ReactElement;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Показывать кнопку копирования значения (видна в readonly, при `!disabled`).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после успешного копирования значения. */
+    onCopyButtonClick?(): void;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Колбек фокуса */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+};
+export type FieldSliderProps = FieldSliderDecoratorProps & FieldSliderOwnProps;
+export declare const FieldSlider: import("react").ForwardRefExoticComponent<FieldSliderDecoratorProps & FieldSliderOwnProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/FieldSlider/FieldSlider.js

@@ -0,0 +1,196 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+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 slider_1 = require("@cloud-ru/ds-slider");
+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 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'));
+const utils_2 = require("./utils");
+exports.FieldSlider = (0, react_1.forwardRef)(function FieldSlider({ 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, showCopyButton = true, onCopyButtonClick, value: valueProp, defaultValue, onChange, range = false, min, max, step, marks, showScaleBar = true, marksEqualSpacing, textInputFormatter, unbindInputFromMarks = false, prefix, postfix, postfixIcon, disabled, readonly: readOnly, id, name, autoFocus, layoutPresets, onFocus, onBlur, 'data-test-id': dataTestId, ...rest }, ref) {
+    const localRef = (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 [copied, setCopied] = (0, react_1.useState)(false);
+    const copiedTimerRef = (0, react_1.useRef)(undefined);
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    (0, react_1.useEffect)(() => () => {
+        if (copiedTimerRef.current) {
+            clearTimeout(copiedTimerRef.current);
+        }
+    }, []);
+    // error форсит validationState='error' поверх любого значения — паритет с сиблингами (FieldStepper и др.).
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    // controlled/uncontrolled: useValueControl держит значение при отсутствии `value`.
+    const [value = range ? [min, max] : min, setValue] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+    });
+    const [inputValue, setInputValue] = (0, react_1.useState)(() => (0, utils_2.getTextFieldValue)(value, textInputFormatter));
+    const allowedKeys = (0, react_1.useMemo)(() => (marks ? Object.keys(marks) : []), [marks]);
+    const hasMarksEqualToValues = (0, react_1.useMemo)(() => {
+        if (!marks) {
+            return false;
+        }
+        return allowedKeys.every(key => key === String((0, utils_2.getMarkLabel)(marks[key])));
+    }, [allowedKeys, marks]);
+    // Актуальное значение для рантайм-ре-снапа шкалы (см. эффект ниже).
+    const valueRef = (0, react_1.useRef)(value);
+    valueRef.current = value;
+    const commitValue = (0, react_1.useCallback)((next) => {
+        // blur/Enter — это явный commit: значение фиксируется и onChange вызывается всегда,
+        // в том числе когда введённое снапнулось обратно к текущему (контракт «blur = commit»).
+        setValue(next);
+        onChange?.(next);
+        setInputValue((0, utils_2.getTextFieldValue)(next, textInputFormatter));
+    }, [onChange, setValue, textInputFormatter]);
+    const handleSliderChange = (0, react_1.useCallback)((next) => {
+        commitValue(next);
+    }, [commitValue]);
+    const snapAndCommit = (0, react_1.useCallback)((raw) => {
+        if (range) {
+            return;
+        }
+        const parsed = parseFloat(raw);
+        if (Number.isNaN(parsed)) {
+            commitValue(value);
+            return;
+        }
+        if (parsed <= min) {
+            commitValue(min);
+            return;
+        }
+        if (parsed >= max) {
+            commitValue(max);
+            return;
+        }
+        const allowedFromMarks = !marks || hasMarksEqualToValues || unbindInputFromMarks
+            ? []
+            : allowedKeys
+                .map(key => parseFloat(String((0, utils_2.getMarkLabel)(marks[key]))))
+                .filter(mark => !Number.isNaN(mark));
+        if (allowedFromMarks.length === 0) {
+            // Снэп к допустимым значениям шага. step<=0/null → снэпа нет, принимаем число как есть.
+            if (step === null || step <= 0) {
+                commitValue(parsed);
+                return;
+            }
+            const allowedValues = (0, utils_2.generateAllowedValues)(min, max, step);
+            if (allowedValues.includes(parsed)) {
+                commitValue(parsed);
+                return;
+            }
+            const closest = (0, utils_2.getClosestMark)(parsed, allowedValues, m => m);
+            commitValue(closest ? closest.mark : parsed);
+            return;
+        }
+        const closest = (0, utils_2.getClosestMark)(parsed, allowedFromMarks, m => m);
+        commitValue(closest ? closest.mark : parsed);
+    }, [allowedKeys, commitValue, hasMarksEqualToValues, marks, max, min, range, step, unbindInputFromMarks, value]);
+    const handleInputChange = (0, react_1.useCallback)((raw) => {
+        // В range-режиме поле readonly — правки игнорируем, не трогая идентичность колбека.
+        if (range) {
+            return;
+        }
+        // не пускаем нечисловой ввод в поле (паритет с легаси onTextFieldChange)
+        const parsed = parseFloat(raw);
+        if (raw && Number.isNaN(parsed)) {
+            return;
+        }
+        setInputValue(raw);
+    }, [range]);
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
+        snapAndCommit(inputValue);
+        onBlur?.(event);
+    }, [inputValue, onBlur, snapAndCommit]);
+    const handleInputFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocus?.(event);
+    }, [onFocus]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    // Copy-кнопка видна только в readonly при !disabled — паритет с Figma readonly-вариантом
+    // fieldSlider (слот buttonCopy). В range-режиме инпут тоже нередактируем, но copy там не
+    // показываем: это не readonly-проп, а две ручки диапазона (в легаси copy у range не было).
+    // Копируется отображаемый текст значения (`inputValue`, с учётом textInputFormatter).
+    const showCopyUi = Boolean(showCopyButton && readOnly && !disabled);
+    const handleCopy = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        (0, shared_1.copyTextToClipboard)(inputValue).then(copied => {
+            if (!copied) {
+                return;
+            }
+            onCopyButtonClick?.();
+            setCopied(true);
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
+        });
+    }, [inputValue, onCopyButtonClick]);
+    const handleInputKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter') {
+            snapAndCommit(inputValue);
+        }
+        // Клавиатурный путь к copy в readonly (кнопка с tabIndex −1 недостижима по Tab):
+        // ArrowRight из инпута → copy, ArrowLeft с copy — назад (handleCopyButtonKeyDown).
+        if (event.key === 'ArrowRight' && readOnly && showCopyUi && copyButtonRef.current) {
+            event.preventDefault();
+            copyButtonRef.current.focus();
+        }
+    }, [inputValue, readOnly, showCopyUi, snapAndCommit]);
+    const handleCopyButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            localRef.current?.focus();
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setInputValue((0, utils_2.getTextFieldValue)(value, textInputFormatter));
+    }, [textInputFormatter, value]);
+    // Рефы на последнюю snap-функцию и значение: пере-привязка по смене шкалы (эффект ниже)
+    // не зависит от их идентичности и не зацикливается на каждом onChange.
+    const snapAndCommitRef = (0, react_1.useRef)(snapAndCommit);
+    snapAndCommitRef.current = snapAndCommit;
+    // Рантайм-смена шкалы (marks/min/max) пере-привязывает текущее значение к новому допустимому
+    // набору (паритет с легаси re-snap effect): после, например, max 100→50 значение 75 уедет к 50.
+    // Range управляется слайдером и здесь не трогается.
+    (0, react_1.useEffect)(() => {
+        if (range) {
+            return;
+        }
+        snapAndCommitRef.current(String(valueRef.current));
+    }, [marks, min, max, range]);
+    const shell = (
+    // data-size на корне нужен, чтобы `.sliderWrapper` (сосед `.fieldWrapper`, а не потомок)
+    // подхватил size-зависимые токены отступов трека.
+    (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.fieldSlider, "data-size": size, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, "data-test-id": constants_1.TEST_IDS.fieldSliderField, 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,
+                                }), 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.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("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, type: input_private_1.TYPE.Text, inputMode: input_private_1.INPUT_MODE.Numeric, disabled: disabled, readonly: range || readOnly, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldSliderInput, ...(0, utils_1.extractSupportProps)(rest) }) }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: size, icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSliderCopyButton }) })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix }), postfixIcon && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixIcon, children: postfixIcon })] }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.sliderWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.slider, children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { range: range, min: min, max: max, step: step, value: value, onChange: handleSliderChange, marks: showScaleBar ? marks : undefined, marksEqualSpacing: marksEqualSpacing, disabled: readOnly || disabled, "data-test-id": constants_1.TEST_IDS.fieldSliderHandle }) }) })] }));
+    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, "data-test-id": dataTestId, children: shell }));
+});

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

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

package/dist/cjs/components/FieldSlider/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("./FieldSlider"), exports);
+__exportStar(require("./types"), exports);