@cloud-ru/ds-fields 1.0.0

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

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

@@ -0,0 +1,2 @@
+import { FieldDateProps } from './types';
+export declare const FieldDate: import("react").ForwardRefExoticComponent<FieldDateProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldDate/FieldDate.js

@@ -0,0 +1,369 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDate = 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 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 constants_2 = require("./constants");
+const mask_1 = require("./mask");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+exports.FieldDate = (0, react_1.forwardRef)(function FieldDate(props, ref) {
+    const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, placeholder, labelFrom = constants_2.DATE_RANGE_LABELS.from, labelTo = constants_2.DATE_RANGE_LABELS.to, iconBefore, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, today, showHolidays, buildCellProps, locale, presets, closeOnApply = true, closeOnPopstate, showClearButton = true, showCopyButton = true, onCopyButtonClick, showSeconds = true, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldDate, } = props;
+    const range = (0, utils_1.isRange)(props);
+    const maskMode = props.mode === constants_2.DATE_MODE.DateTime ? constants_2.DATE_MODE.DateTime : constants_2.DATE_MODE.Date;
+    const segMode = maskMode === constants_2.DATE_MODE.DateTime ? constants_2.DATE_MODE.DateTime : constants_2.DATE_MODE.Date;
+    const { mask: segMask, slots: segSlots } = (0, react_1.useMemo)(() => (0, segments_1.buildSegments)(segMode, showSeconds), [segMode, showSeconds]);
+    const placeholderMask = placeholder ?? segMask;
+    const fromInputRef = (0, react_1.useRef)(null);
+    const toInputRef = (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 resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    const [singleLocal, setSingleLocal] = (0, react_1.useState)(!range ? props.defaultValue : undefined);
+    const [rangeLocal, setRangeLocal] = (0, react_1.useState)(range ? (props.defaultValue ?? [undefined, undefined]) : [undefined, undefined]);
+    const singleValue = (0, react_1.useMemo)(() => (!range ? (props.value ?? singleLocal) : undefined), [range, props.value, singleLocal]);
+    const rangeValue = (0, react_1.useMemo)(() => (range ? (props.value ?? rangeLocal) : [undefined, undefined]), [range, props.value, rangeLocal]);
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    // Локальное состояние input'а(ов) — синхронизируется при внешних изменениях value, но не блокирует ввод.
+    const [singleInputValue, setSingleInputValue] = (0, react_1.useState)(() => !range && singleValue ? (0, mask_1.dateToMaskString)(singleValue, maskMode, showSeconds) : '');
+    const [rangeInputValue, setRangeInputValue] = (0, react_1.useState)(() => [
+        range && rangeValue[0] ? (0, mask_1.dateToMaskString)(rangeValue[0], maskMode, showSeconds) : '',
+        range && rangeValue[1] ? (0, mask_1.dateToMaskString)(rangeValue[1], maskMode, showSeconds) : '',
+    ]);
+    // Зеркало `rangeInputValue` — чтобы handleRangeInput читал актуальное состояние без side-effect в updater'е.
+    const rangeInputValueRef = (0, react_1.useRef)(rangeInputValue);
+    rangeInputValueRef.current = rangeInputValue;
+    (0, react_1.useEffect)(() => {
+        if (range)
+            return;
+        const next = singleValue ? (0, mask_1.dateToMaskString)(singleValue, maskMode, showSeconds) : '';
+        if (fromInputRef.current && document.activeElement === fromInputRef.current)
+            return;
+        setSingleInputValue(next);
+    }, [singleValue, range, maskMode, showSeconds]);
+    (0, react_1.useEffect)(() => {
+        if (!range)
+            return;
+        const next = [
+            rangeValue[0] ? (0, mask_1.dateToMaskString)(rangeValue[0], maskMode, showSeconds) : '',
+            rangeValue[1] ? (0, mask_1.dateToMaskString)(rangeValue[1], maskMode, showSeconds) : '',
+        ];
+        // Чтение фокуса — до updater'а (updater остаётся чистым, без side-effect/DOM-доступа).
+        const fromFocused = fromInputRef.current && document.activeElement === fromInputRef.current;
+        const toFocused = toInputRef.current && document.activeElement === toInputRef.current;
+        setRangeInputValue(prev => [fromFocused ? prev[0] : next[0], toFocused ? prev[1] : next[1]]);
+    }, [rangeValue, range, maskMode, showSeconds]);
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        // Календарь открывается кликом по полю (CalendarDropdown дёргает onOpenChange(true)).
+        // readonly/disabled поле открывать нельзя — блокируем открытие, закрытие разрешаем.
+        if (next && (disabled || readOnly))
+            return;
+        if (openProp === undefined)
+            setOpenLocal(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange, disabled, readOnly]);
+    const commitSingle = (0, react_1.useCallback)((next) => {
+        if (range)
+            return;
+        if (props.value === undefined)
+            setSingleLocal(next);
+        props.onChange?.(next);
+    }, [range, props]);
+    const commitRange = (0, react_1.useCallback)((next) => {
+        if (!range)
+            return;
+        if (props.value === undefined)
+            setRangeLocal(next);
+        props.onChange?.(next);
+    }, [range, props]);
+    // Сегментный ввод одиночной даты/даты-времени (range остаётся type-through ниже).
+    const singleSeg = (0, segments_1.useSegmentedMask)({
+        inputRef: fromInputRef,
+        mask: segMask,
+        slots: segSlots,
+        readonly: readOnly,
+        disabled,
+        setValue: setSingleInputValue,
+        onMaskedChange: masked => {
+            if (masked === '') {
+                commitSingle(undefined);
+                return;
+            }
+            const parsed = (0, mask_1.parseMask)(masked, maskMode, showSeconds);
+            if (parsed)
+                commitSingle(parsed);
+        },
+        onArrowDown: () => {
+            if (readOnly || disabled)
+                return;
+            handleOpenChange(true);
+            // Клавиатурный handoff: фокус уходит в сетку календаря (паритет с легаси checkForLeavingFocus).
+            setTimeout(() => navigationStartRef.current?.focus(), 0);
+        },
+        // ArrowUp в поле закрывает открытый календарь (фокус остаётся в input на текущем сегменте).
+        onArrowUp: () => {
+            if (readOnly || disabled)
+                return;
+            handleOpenChange(false);
+        },
+        onEscape: () => handleOpenChange(false),
+        onEdit: () => handleOpenChange(false),
+    });
+    const handleRangeInput = (0, react_1.useCallback)((idx) => (input) => {
+        const formatted = (0, mask_1.formatMask)(input, maskMode, showSeconds);
+        // Считаем следующее состояние из текущего rangeInputValue (ref), без side-effect в updater'е.
+        const prev = rangeInputValueRef.current;
+        const next = idx === 0 ? [formatted, prev[1]] : [prev[0], formatted];
+        setRangeInputValue(next);
+        const parsedFrom = next[0] ? (0, mask_1.parseMask)(next[0], maskMode, showSeconds) : undefined;
+        const parsedTo = next[1] ? (0, mask_1.parseMask)(next[1], maskMode, showSeconds) : undefined;
+        // Эмитим только когда обе даты валидны либо обе пусты — иначе ждём.
+        const bothValid = (parsedFrom !== undefined || next[0] === '') && (parsedTo !== undefined || next[1] === '');
+        if (bothValid)
+            commitRange([parsedFrom, parsedTo]);
+    }, [maskMode, showSeconds, commitRange]);
+    const handleClear = (0, react_1.useCallback)(() => {
+        if (range) {
+            setRangeInputValue(['', '']);
+            commitRange([undefined, undefined]);
+        }
+        else {
+            setSingleInputValue('');
+            commitSingle(undefined);
+        }
+        fromInputRef.current?.focus();
+    }, [range, commitRange, commitSingle]);
+    const handleCalendarSingleChange = (0, react_1.useCallback)((next) => {
+        if (range || disabled || readOnly)
+            return;
+        commitSingle(next);
+        // Sync-эффект пропускает обновление сфокусированного input'а — обновляем строку сами.
+        const nextStr = next ? (0, mask_1.dateToMaskString)(next, maskMode, showSeconds) : '';
+        setSingleInputValue(nextStr);
+        // Императивно кладём строку в DOM ДО focus(): клик по дате блюрит input → handleBlur движка
+        // сбрасывает `input.value` (был === mask) в ''. Возврат фокуса синхронно вызывает
+        // `ensureMask`, который на пустом DOM пишет mask обратно и перетирает только что выбранную
+        // дату (setSingleInputValue ещё не применён React'ом). Синхронизируем DOM сами — ensureMask
+        // видит непустое значение и no-op'ает (баг: маска «залипала» в value-цвете после выбора).
+        if (fromInputRef.current) {
+            fromInputRef.current.value = nextStr;
+        }
+        // Выбор даты возвращает фокус в input и закрывает календарь (легаси handleSelectDate).
+        // В date-time onChangeValue эмитится только по Apply (клик по дате копит internal state
+        // календаря), поэтому выбор времени закрытием не обрывается — паритет с легаси.
+        fromInputRef.current?.focus();
+        handleOpenChange(false);
+    }, [range, disabled, readOnly, commitSingle, maskMode, showSeconds, handleOpenChange]);
+    const handleCalendarRangeChange = (0, react_1.useCallback)((next) => {
+        if (!range || disabled || readOnly)
+            return;
+        commitRange(next);
+        // Закрываем только когда выбраны оба конца периода (календарь эмитит полный Range).
+        if (next[0] && next[1]) {
+            setRangeInputValue([
+                (0, mask_1.dateToMaskString)(next[0], maskMode, showSeconds),
+                (0, mask_1.dateToMaskString)(next[1], maskMode, showSeconds),
+            ]);
+            fromInputRef.current?.focus();
+            handleOpenChange(false);
+        }
+    }, [range, disabled, readOnly, commitRange, maskMode, showSeconds, handleOpenChange]);
+    // Общие input-обработчики range-инпутов (`inputCommon` ниже). Открытие календаря — за
+    // click-триггером Dropdown и ArrowDown (легаси-паритет); open-on-focus конфликтовал с
+    // click-toggle (первый клик открывал и тут же закрывал календарь).
+    const handleInputFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const handleInputKeyDown = (0, react_1.useCallback)((event) => {
+        if (disabled || readOnly)
+            return;
+        if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            handleOpenChange(false);
+            return;
+        }
+        // ArrowDown открывает календарь и передаёт фокус в сетку — тот же клавиатурный handoff,
+        // что у singleSeg.onArrowDown (легаси checkForLeavingFocus).
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleOpenChange(true);
+            setTimeout(() => navigationStartRef.current?.focus(), 0);
+        }
+        // ArrowUp закрывает открытый календарь (фокус остаётся в range-input).
+        if (event.key === 'ArrowUp' && open) {
+            event.preventDefault();
+            handleOpenChange(false);
+        }
+    }, [disabled, readOnly, open, handleOpenChange]);
+    // Single-input делегирует фокус/блюр сегментному движку, поэтому отдельные обработчики.
+    const handleSingleFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        singleSeg.handleFocus();
+        onFocusProp?.(event);
+    }, [singleSeg, onFocusProp]);
+    const handleSingleBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        singleSeg.handleBlur();
+        onBlurProp?.(event);
+    }, [singleSeg, onBlurProp]);
+    const handleCalendarFocusLeave = (0, react_1.useCallback)(() => {
+        fromInputRef.current?.focus();
+        handleOpenChange(false);
+    }, [handleOpenChange]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [readOnly, disabled]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const valueToCopy = range ? [rangeInputValue[0], rangeInputValue[1]].filter(Boolean).join(' – ') : singleInputValue;
+    // Галочку «скопировано» рисует useCopyButton по `true`-результату (паритет с FieldCombo/FieldTime).
+    const handleCopy = (0, react_1.useCallback)(async () => {
+        const copied = Boolean(valueToCopy) && (await (0, shared_1.copyTextToClipboard)(valueToCopy));
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, valueToCopy]);
+    const hasValue = range ? Boolean(rangeValue[0] || rangeValue[1]) : singleValue !== undefined;
+    const showClear = Boolean(showClearButton && hasValue && !disabled && !readOnly);
+    const showCopy = Boolean(showCopyButton && hasValue && readOnly && !disabled);
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClear,
+        size: (0, shared_1.toInputSize)(size),
+        onClear: handleClear,
+        disabled: Boolean(disabled || readOnly),
+        dataTestId: constants_1.TEST_IDS.fieldDateClear,
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopy,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy: handleCopy,
+        disabled: Boolean(disabled),
+        dataTestId: constants_1.TEST_IDS.fieldDateCopy,
+    });
+    // ArrowDown с postfix-кнопки открывает календарь и передаёт фокус в сетку
+    // (легаси checkForLeavingFocus на onButtonKeyDown).
+    const handlePostfixButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowDown' && !disabled && !readOnly) {
+            handleOpenChange(true);
+            setTimeout(() => navigationStartRef.current?.focus(), 0);
+        }
+    }, [disabled, readOnly, handleOpenChange]);
+    // Возврат фокуса с кнопок (ArrowLeft): handleFocus движка выбирает первый сегмент, а возврат
+    // идёт «справа» — перевыбираем последний (легаси setInputFocusFromButtons: Year/Seconds).
+    const setInputFocusFromButtons = (0, react_1.useCallback)(() => {
+        if (range) {
+            toInputRef.current?.focus();
+            return;
+        }
+        fromInputRef.current?.focus();
+        singleSeg.selectSlot(singleSeg.lastSlot);
+    }, [range, singleSeg]);
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        // Roving-композит живёт на «последнем» инпуте перед кнопками: single или range «to».
+        inputRef: range ? toInputRef : fromInputRef,
+        setInputFocus: setInputFocusFromButtons,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        onButtonKeyDown: handlePostfixButtonKeyDown,
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    // Нав-цепочка бежит безусловно ПОСЛЕ движка (легаси useHandlers): движок ставит каретку в конец
+    // на ArrowRight с последнего сегмента, nav читает её в том же keydown и забирает фокус на кнопку.
+    const handleSingleKeyDown = (0, react_1.useCallback)((event) => {
+        singleSeg.handleKeyDown(event);
+        onInputKeyDown(event);
+    }, [singleSeg, onInputKeyDown]);
+    const handleToInputKeyDown = (0, react_1.useCallback)((event) => {
+        handleInputKeyDown(event);
+        onInputKeyDown(event);
+    }, [handleInputKeyDown, onInputKeyDown]);
+    const inputCommon = {
+        disabled,
+        readonly: readOnly,
+        inputMode: 'numeric',
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onKeyDown: handleInputKeyDown,
+    };
+    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: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: range ? (
+                                    // --field-date-mask-ch — длина маски для ширины from-инпута (.rangeInputFrom, ширина в ch):
+                                    // «дата – дата» слитно слева, остаток поля забирает to-инпут.
+                                    (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_2.default.rangeInputs, style: { '--field-date-mask-ch': placeholderMask.length }, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ...inputCommon, ref: (0, merge_refs_1.default)(ref, fromInputRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, styles_module_scss_2.default.rangeInputFrom), value: rangeInputValue[0], placeholder: placeholderMask, onChange: handleRangeInput(0), id: id, name: name, autoFocus: resolvedAutoFocus, "aria-label": labelFrom, "data-test-id": constants_1.TEST_IDS.fieldDateInputFrom }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.rangeSeparator, "aria-hidden": true, children: "\u2013" }), (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ...inputCommon, ref: toInputRef, className: styles_module_scss_1.default.fieldInput, value: rangeInputValue[1], placeholder: placeholderMask, onChange: handleRangeInput(1), 
+                                                // «to» — последний инпут перед кнопками: на нём живёт roving-композит
+                                                // (ArrowRight в конце → clear/copy), keydown-цепочка с nav-handler'ом.
+                                                onKeyDown: handleToInputKeyDown, tabIndex: inputTabIndex, "aria-label": labelTo, "data-test-id": constants_1.TEST_IDS.fieldDateInputTo })] })) : ((0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, fromInputRef), className: styles_module_scss_1.default.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
+                                        // Single/date-time ведёт сегментный движок (keydown, useSegmentedMask), нативный
+                                        // onChange игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                                        onChange: () => { }, onKeyDown: handleSingleKeyDown, onClick: singleSeg.handleClick, onPaste: singleSeg.handlePaste, onFocus: handleSingleFocus, onBlur: handleSingleBlur, disabled: disabled, readonly: readOnly, inputMode: 'numeric', tabIndex: inputTabIndex, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, "data-test-id": constants_1.TEST_IDS.fieldDateInput })) }), postfixButtons && (
+                                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                                (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, onMouseDown: shared_1.preventSlotMouseDown, onClick: shared_1.stopSlotClickPropagation, children: postfixButtons }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldDateCalendar, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.CalendarSVG, {}) })] }) })] }));
+    let calendarProps;
+    if (range) {
+        // @cloud-ru/ds-calendar ожидает `Range = [Date, Date]` (оба края обязательны) и в date-range падает на
+        // `[undefined, …]` (getInRangePosition → .getFullYear() на undefined). FieldDate допускает частично
+        // заполненный период, поэтому передаём в сетку value только когда обе даты реальны — иначе undefined
+        // (нет выделения), а ввод периода продолжает работать через инпуты.
+        const bothEndsFilled = rangeValue[0] !== undefined && rangeValue[1] !== undefined;
+        calendarProps = {
+            mode: constants_2.DATE_MODE.DateRange,
+            value: bothEndsFilled ? rangeValue : undefined,
+            onChangeValue: handleCalendarRangeChange,
+        };
+    }
+    else if (maskMode === constants_2.DATE_MODE.DateTime) {
+        calendarProps = {
+            mode: constants_2.DATE_MODE.DateTime,
+            value: singleValue,
+            onChangeValue: handleCalendarSingleChange,
+            showSeconds,
+        };
+    }
+    else {
+        calendarProps = {
+            mode: constants_2.DATE_MODE.Date,
+            value: singleValue,
+            onChangeValue: handleCalendarSingleChange,
+        };
+    }
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(calendar_1.CalendarDropdown
+        // CalendarDropdown ожидает `Range = [Date, Date]` в режиме date-range, а FieldDate хранит
+        // `[Date | undefined, Date | undefined]` (период может быть заполнен частично). Локализованный
+        // cast в `mode`-union календаря — единственная точка, где сходятся эти представления периода.
+        , { ...calendarProps, "data-test-id": constants_1.TEST_IDS.fieldDateCalendarDropdown, size: size, open: open, onOpenChange: handleOpenChange, placement: placement ?? 'bottom-start', today: today, showHolidays: showHolidays, buildCellProps: buildCellProps, locale: locale, presets: presets, closeOnApply: closeOnApply, closeOnPopstate: closeOnPopstate, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, children: trigger }) }));
+});

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

@@ -0,0 +1,10 @@
+export declare const DATE_MODE: {
+    readonly Date: "date";
+    readonly DateTime: "date-time";
+    readonly DateRange: "date-range";
+};
+/** Дефолтные aria-label'ы полей периода (RU — паритет с языком компонента по умолчанию). */
+export declare const DATE_RANGE_LABELS: {
+    readonly from: "Начало периода";
+    readonly to: "Конец периода";
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_RANGE_LABELS = exports.DATE_MODE = void 0;
+exports.DATE_MODE = {
+    Date: 'date',
+    DateTime: 'date-time',
+    DateRange: 'date-range',
+};
+/** Дефолтные aria-label'ы полей периода (RU — паритет с языком компонента по умолчанию). */
+exports.DATE_RANGE_LABELS = {
+    from: 'Начало периода',
+    to: 'Конец периода',
+};

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

@@ -0,0 +1,3 @@
+export * from './FieldDate';
+export * from './constants';
+export * from './types';

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

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

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

@@ -0,0 +1,20 @@
+import { DATE_MODE } from './constants';
+/** Маска поддерживает только `date` / `date-time` (range собирается из двух одиночных масок). */
+export type MaskMode = typeof DATE_MODE.Date | typeof DATE_MODE.DateTime;
+export declare function getMaskString(mode: MaskMode, showSeconds?: boolean): string;
+/**
+ * Принимает любую строку, оставляет только цифры и форматирует под `DD.MM.YYYY[, HH:mm[:ss]]`.
+ *
+ * Две UX-механики, призванные не дать пользователю набрать невалидный сегмент:
+ * 1. **Авто-prefix `0`**: если первая цифра 2-цифрового сегмента превышает максимально допустимую
+ *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
+ *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
+ *    фокус автоматически уезжает на следующий сегмент.
+ * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ */
+export declare function formatMask(input: string, mode: MaskMode, showSeconds?: boolean): string;
+/** Парсит `DD.MM.YYYY` или `DD.MM.YYYY, HH:mm[:ss]` в `Date`. Возвращает `undefined` при невалидной/неполной строке. */
+export declare function parseMask(input: string, mode: MaskMode, showSeconds?: boolean): Date | undefined;
+/** Форматирует `Date` в строку под маску — для синхронизации с input при внешнем onChange. */
+export declare function dateToMaskString(value: Date, mode: MaskMode, showSeconds?: boolean): string;

package/dist/cjs/components/FieldDate/mask.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMaskString = getMaskString;
+exports.formatMask = formatMask;
+exports.parseMask = parseMask;
+exports.dateToMaskString = dateToMaskString;
+const constants_1 = require("./constants");
+const DATE_LEN = 8;
+const DATE_TIME_LEN = 12;
+const DATE_TIME_SECONDS_LEN = 14;
+// Плейсхолдер по умолчанию — RU (ДД.ММ.ГГГГ), как в легаси @snack-uikit/fields и Figma.
+// Структура парсинга остаётся числовой (DD/MM/YYYY[/HH/mm/ss]) — плейсхолдер только визуальный.
+const RU_DATE = 'ДД.ММ.ГГГГ';
+// Время отделяется запятой (паритет с легаси `ДД.ММ.ГГГГ, чч:мм:сс`).
+const TIME_SEPARATOR = ', ';
+function totalLen(mode, showSeconds) {
+    if (mode === constants_1.DATE_MODE.Date) {
+        return DATE_LEN;
+    }
+    return showSeconds ? DATE_TIME_SECONDS_LEN : DATE_TIME_LEN;
+}
+function getMaskString(mode, showSeconds = true) {
+    if (mode === constants_1.DATE_MODE.Date) {
+        return RU_DATE;
+    }
+    return showSeconds ? `${RU_DATE}${TIME_SEPARATOR}чч:мм:сс` : `${RU_DATE}${TIME_SEPARATOR}чч:мм`;
+}
+function buildSegments(mode, showSeconds) {
+    const base = [
+        { len: 2, max: 31, separator: '' }, // day
+        { len: 2, max: 12, separator: '.' }, // month
+        { len: 4, max: 9999, separator: '.' }, // year
+    ];
+    if (mode === constants_1.DATE_MODE.DateTime) {
+        base.push({ len: 2, max: 23, separator: TIME_SEPARATOR }); // hour
+        base.push({ len: 2, max: 59, separator: ':' }); // minute
+        if (showSeconds) {
+            base.push({ len: 2, max: 59, separator: ':' }); // second
+        }
+    }
+    return base;
+}
+/**
+ * Принимает любую строку, оставляет только цифры и форматирует под `DD.MM.YYYY[, HH:mm[:ss]]`.
+ *
+ * Две UX-механики, призванные не дать пользователю набрать невалидный сегмент:
+ * 1. **Авто-prefix `0`**: если первая цифра 2-цифрового сегмента превышает максимально допустимую
+ *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
+ *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
+ *    фокус автоматически уезжает на следующий сегмент.
+ * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ */
+function formatMask(input, mode, showSeconds = true) {
+    const maxLen = totalLen(mode, showSeconds);
+    const segments = buildSegments(mode, showSeconds);
+    let stream = input.replace(/\D/g, '').slice(0, maxLen);
+    let out = '';
+    for (const seg of segments) {
+        if (stream.length === 0)
+            break;
+        out += seg.separator;
+        // Auto-zero-prefix: если первая цифра > floor(max/10), сегмент не может начаться этой цифрой —
+        // считаем её цифрой «единиц» и дописываем `0` перед ней.
+        if (seg.len === 2) {
+            const first = Number(stream[0]);
+            const firstMax = Math.floor(seg.max / 10);
+            if (first > firstMax) {
+                out += `0${stream[0]}`;
+                stream = stream.slice(1);
+                continue;
+            }
+        }
+        const raw = stream.slice(0, seg.len);
+        stream = stream.slice(seg.len);
+        if (raw.length === seg.len) {
+            const n = Number(raw);
+            out += n > seg.max ? String(seg.max).padStart(seg.len, '0') : raw;
+        }
+        else {
+            out += raw;
+        }
+    }
+    return out;
+}
+/** Парсит `DD.MM.YYYY` или `DD.MM.YYYY, HH:mm[:ss]` в `Date`. Возвращает `undefined` при невалидной/неполной строке. */
+function parseMask(input, mode, showSeconds = true) {
+    const digits = input.replace(/\D/g, '');
+    const expected = totalLen(mode, showSeconds);
+    if (digits.length !== expected)
+        return undefined;
+    const day = Number(digits.slice(0, 2));
+    const month = Number(digits.slice(2, 4)) - 1;
+    const year = Number(digits.slice(4, 8));
+    const hour = mode === constants_1.DATE_MODE.DateTime ? Number(digits.slice(8, 10)) : 0;
+    const minute = mode === constants_1.DATE_MODE.DateTime ? Number(digits.slice(10, 12)) : 0;
+    const second = mode === constants_1.DATE_MODE.DateTime && showSeconds ? Number(digits.slice(12, 14)) : 0;
+    if (year < 1 || month < 0 || month > 11 || day < 1 || day > 31)
+        return undefined;
+    if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59)
+        return undefined;
+    const d = new Date(year, month, day, hour, minute, second);
+    // Отбраковать «перетекание» вроде 30 февраля → 2 марта.
+    if (d.getDate() !== day || d.getMonth() !== month || d.getFullYear() !== year)
+        return undefined;
+    return d;
+}
+/** Форматирует `Date` в строку под маску — для синхронизации с input при внешнем onChange. */
+function dateToMaskString(value, mode, showSeconds = true) {
+    const pad = (n) => String(n).padStart(2, '0');
+    const head = `${pad(value.getDate())}.${pad(value.getMonth() + 1)}.${value.getFullYear()}`;
+    if (mode !== constants_1.DATE_MODE.DateTime) {
+        return head;
+    }
+    const time = `${pad(value.getHours())}:${pad(value.getMinutes())}${showSeconds ? `:${pad(value.getSeconds())}` : ''}`;
+    return `${head}${TIME_SEPARATOR}${time}`;
+}

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

@@ -0,0 +1,43 @@
+.trigger{
+  cursor:pointer;
+}
+.trigger[data-disabled=true]{
+  cursor:not-allowed;
+}
+.trigger[data-readonly=true]{
+  cursor:default;
+}
+
+.rangeInputs{
+  display:inline-flex;
+  flex:1 1 0;
+  align-items:center;
+  min-width:0;
+}
+[data-size=s] .rangeInputs{
+  gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .rangeInputs{
+  gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .rangeInputs{
+  gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+
+.rangeInputFrom{
+  flex:0 0 auto;
+  width:calc(var(--field-date-mask-ch, 10) * 1ch);
+  text-align:start;
+}
+
+@supports (field-sizing: content){
+  .rangeInputFrom{
+    field-sizing:content;
+    width:auto;
+    max-width:calc(var(--field-date-mask-ch, 10) * 1ch);
+  }
+}
+.rangeSeparator{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}