@cloud-ru/ds-fields 2.2.3-preview-a42433ce.0 → 2.2.3-preview-f436e22b.0

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

@@ -327,9 +327,9 @@ exports.FieldDate = (0, react_1.forwardRef)(function FieldDate(props, ref) {
                                     (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, singleSeg.nativeInputRef), className: styles_module_scss_1.default.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
-                                        // Single/date-time ведёт сегментный движок (useSegmentedMask), нативный onChange
-                                        // игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                                                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, {}) })] }) })] }));

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

@@ -10,9 +10,8 @@ export declare function getMaskString(mode: MaskMode, showSeconds?: boolean): st
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
- *    Пример: `39` для day → `09`, `13` для month → `03`.
+ * 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` при невалидной/неполной строке. */

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

@@ -48,9 +48,8 @@ function buildSegments(mode, showSeconds) {
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
- *    Пример: `39` для day → `09`, `13` для month → `03`.
+ * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
  */
 function formatMask(input, mode, showSeconds = true) {
     const maxLen = totalLen(mode, showSeconds);
@@ -76,7 +75,7 @@ function formatMask(input, mode, showSeconds = true) {
         stream = stream.slice(seg.len);
         if (raw.length === seg.len) {
             const n = Number(raw);
-            out += n > seg.max ? raw.slice(-1).padStart(seg.len, '0') : raw;
+            out += n > seg.max ? String(seg.max).padStart(seg.len, '0') : raw;
         }
         else {
             out += raw;

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

@@ -137,7 +137,7 @@ exports.FieldTime = (0, react_1.forwardRef)(function FieldTime({ label = '', lab
         // clear/copy недостижимыми со стрелок — движок всегда делает preventDefault на ArrowRight.
         onInputKeyDown(event);
     }, [onInputKeyDown, timeSeg]);
-    // value ведёт сегментный движок (useSegmentedMask); нативный onChange input'а игнорируем.
+    // value ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
     const handleInputChange = (0, react_1.useCallback)(() => undefined, []);
     const handleInputFocus = (0, react_1.useCallback)((event) => {
         setFocusVisible(event.target.matches(':focus-visible'));
@@ -155,7 +155,7 @@ exports.FieldTime = (0, react_1.forwardRef)(function FieldTime({ label = '', lab
                             readonly: readOnly,
                             hover,
                             focusVisible: focusVisible || open,
-                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef, timeSeg.nativeInputRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: input_private_1.INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldTimeInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}) })] }) })] }));
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: input_private_1.INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldTimeInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}) })] }) })] }));
     return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(calendar_1.TimePickerDropdown
         // Явный data-test-id на дропдауне → детерминированный id портального контента:
         // `getTestIdBuilder` строит `content-${id}`, так контент адресуем для open-picker-снимка

package/dist/cjs/segments/useSegmentedMask.d.ts

@@ -29,7 +29,6 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }: UseSegmentedMaskParams): {
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -37,7 +36,6 @@ export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disa
     handleFocus: () => void;
     handleBlur: () => void;
     handlePaste: (event: ClipboardEvent<HTMLInputElement>) => void;
-    nativeInputRef: (node: HTMLInputElement | null) => void;
     selectSlot: (slot: SlotMeta) => void;
     firstSlot: SlotMeta;
     lastSlot: SlotMeta;

package/dist/cjs/segments/useSegmentedMask.js

@@ -1,24 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSegmentedMask = useSegmentedMask;
-const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
-const RESET_TYPED_KEYS = new Set([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'Backspace',
-    'Delete',
-    'Enter',
-    'Tab',
-    'Escape',
-]);
 /**
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }) {
     const firstSlot = slots[0];
@@ -123,61 +110,70 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         }
         selectSlot(nextSlot(slot));
     }, [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete]);
-    // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
-    const typedRef = (0, react_1.useRef)(null);
-    const resetTyped = (0, react_1.useCallback)(() => {
-        typedRef.current = null;
-    }, []);
     const typeDigit = (0, react_1.useCallback)((slot, key) => {
+        const text = getSlotText(slot);
+        const numberValue = Number(text) || 0;
+        const digit = Number(key);
+        const slotValue = parseInt(numberValue.toString() + key, 10) || 0;
+        const valueLength = slotValue.toString().length;
         const maxLength = slot.max.toString().length;
-        const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
-        const appended = prev + key;
-        // Как в React Aria и MUI X: `13` в месяце → `03`.
-        const overflow = Number(appended) > slot.max;
-        const digits = overflow ? key : appended;
-        const value = Number(digits);
-        const complete = overflow || digits.length >= maxLength || value * 10 > slot.max;
-        const accepted = value >= slot.min;
-        if (accepted)
-            updateSlot(slot, value);
-        if (!complete) {
-            typedRef.current = { key: slot.key, digits };
-            return;
+        const isTheLastInput = /^0+$/.test(text) && maxLength === 2 && digit === 0;
+        if (valueLength < maxLength) {
+            if (slotValue || slotValue >= slot.min) {
+                updateSlot(slot, slotValue);
+                if (isTheLastInput)
+                    checkInputAndGoNext(slot);
+            }
+            if (slotValue * 10 > slot.max) {
+                checkInputAndGoNext(slot);
+            }
+        }
+        else if (valueLength > maxLength) {
+            if (digit * 10 > slot.max) {
+                updateSlot(slot, key);
+                checkInputAndGoNext(slot);
+            }
+            else if (digit || digit >= slot.min) {
+                updateSlot(slot, key);
+            }
+        }
+        else if (slotValue <= slot.max) {
+            updateSlot(slot, slotValue);
+            checkInputAndGoNext(slot);
         }
-        typedRef.current = null;
-        if (accepted)
+        else if (digit * 10 > slot.max) {
+            updateSlot(slot, key);
             checkInputAndGoNext(slot);
-    }, [checkInputAndGoNext, updateSlot]);
+        }
+        else if (digit || digit >= slot.min) {
+            updateSlot(slot, key);
+        }
+    }, [checkInputAndGoNext, getSlotText, updateSlot]);
     const handleFocus = (0, react_1.useCallback)(() => {
         if (readonly || disabled)
             return;
-        resetTyped();
         ensureMask();
         // На фокус всегда выбираем ПЕРВЫЙ сегмент (паритет с легаси). При клике мышью `handleClick`
         // отработает следом и перевыберет сегмент под кареткой; при Tab остаётся первый.
         selectSlot(firstSlot);
-    }, [disabled, ensureMask, firstSlot, readonly, resetTyped, selectSlot]);
+    }, [disabled, ensureMask, firstSlot, readonly, selectSlot]);
     const handleClick = (0, react_1.useCallback)((event) => {
         if (readonly || disabled)
             return;
-        resetTyped();
         ensureMask();
         selectSlot(slotFromIndex(event.currentTarget.selectionStart));
-    }, [disabled, ensureMask, readonly, resetTyped, selectSlot, slotFromIndex]);
+    }, [disabled, ensureMask, readonly, selectSlot, slotFromIndex]);
     const handleBlur = (0, react_1.useCallback)(() => {
-        resetTyped();
         const input = inputRef.current;
         if (input && input.value === mask) {
             input.value = '';
             setValue('');
         }
-    }, [inputRef, mask, resetTyped, setValue]);
+    }, [inputRef, mask, setValue]);
     const handleKeyDown = (0, react_1.useCallback)((event) => {
         const input = inputRef.current;
         if (!input || readonly || disabled)
             return;
-        if (RESET_TYPED_KEYS.has(event.key))
-            resetTyped();
         // Tab уводит фокус из поля — не перехватываем.
         if (event.key === 'Tab')
             return;
@@ -192,13 +188,7 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
             onArrowUp?.();
             return;
         }
-        // Копирование и вставку не блокируем: правку поля перехватит beforeinput.
-        if (event.ctrlKey || event.metaKey || event.altKey)
-            return;
         onEdit?.();
-        // Экранные клавиатуры присылают `Unidentified` вместо цифры, её данные есть только в beforeinput.
-        if (/^\d$/.test(event.key) || event.key === 'Unidentified')
-            return;
         if (event.key === 'Escape') {
             event.preventDefault();
             onEscape?.();
@@ -233,6 +223,11 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         if (event.key === 'Enter') {
             tryToComplete();
             emit();
+            return;
+        }
+        if (/^\d$/.test(event.key)) {
+            typeDigit(slot, event.key);
+            emit();
         }
     }, [
         clearSlot,
@@ -248,13 +243,21 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         onEscape,
         prevSlot,
         readonly,
-        resetTyped,
         selectSlot,
         slotFromIndex,
         tryToComplete,
+        typeDigit,
     ]);
-    const fillFromDigits = (0, react_1.useCallback)((digits) => {
-        resetTyped();
+    // Вставка (Ctrl+V) полной строки даты/времени: вытаскиваем цифры и заполняем сегменты
+    // слева направо. Нативный onChange у поля игнорируется (движок controlled), поэтому без
+    // этого обработчика вставка не работала бы вовсе.
+    const handlePaste = (0, react_1.useCallback)((event) => {
+        if (readonly || disabled)
+            return;
+        event.preventDefault();
+        const digits = event.clipboardData.getData('text').replace(/\D/g, '');
+        if (!digits)
+            return;
         ensureMask();
         let cursor = 0;
         let lastFilled;
@@ -273,100 +276,7 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         else if (lastFilled) {
             selectSlot(nextSlot(lastFilled));
         }
-    }, [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot]);
-    const handlePaste = (0, react_1.useCallback)((event) => {
-        if (readonly || disabled)
-            return;
-        event.preventDefault();
-        const digits = event.clipboardData.getData('text').replace(/\D/g, '');
-        if (!digits)
-            return;
-        fillFromDigits(digits);
-        emit();
-    }, [disabled, emit, fillFromDigits, readonly]);
-    const applyEdit = (0, react_1.useCallback)((inputType, text) => {
-        const input = inputRef.current;
-        if (!input)
-            return;
-        onEdit?.();
-        if (inputType.startsWith('delete')) {
-            resetTyped();
-            clearSlot(slotFromIndex(input.selectionStart));
-            emit();
-            return;
-        }
-        const digits = text.replace(/\D/g, '');
-        if (!inputType.startsWith('insert') || !digits)
-            return;
-        // Автозаполнение, `fill` и drop присылают строку целиком.
-        if (text.length > 1) {
-            fillFromDigits(digits);
-        }
-        else {
-            typeDigit(slotFromIndex(input.selectionStart), digits);
-        }
-        emit();
-    }, [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit]);
-    // Композицию IME браузер не даёт отменить — откатываем её в input.
-    const pendingEditRef = (0, react_1.useRef)(null);
-    const handleBeforeInput = (0, react_1.useCallback)((event) => {
-        const input = inputRef.current;
-        if (!input || readonly || disabled)
-            return;
-        ensureMask();
-        if (!event.cancelable) {
-            pendingEditRef.current = { value: input.value, start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 };
-            return;
-        }
-        event.preventDefault();
-        applyEdit(event.inputType, event.data ?? event.dataTransfer?.getData('text') ?? '');
-    }, [applyEdit, disabled, ensureMask, inputRef, readonly]);
-    const handleInput = (0, react_1.useCallback)((event) => {
-        const input = inputRef.current;
-        if (!input || readonly || disabled)
-            return;
-        const pending = pendingEditRef.current;
-        pendingEditRef.current = null;
-        if (pending) {
-            const inputType = event instanceof InputEvent ? event.inputType : '';
-            const inserted = input.value.slice(pending.start, input.value.length - (pending.value.length - pending.end));
-            input.value = pending.value;
-            setValue(pending.value);
-            input.setSelectionRange(pending.start, pending.end);
-            // Цифру композиции вводит её фиксация (insertText), иначе цифра запишется дважды.
-            if (!inputType.includes('Composition'))
-                applyEdit(inputType, inserted);
-            return;
-        }
-        // Автозаполнение меняет значение без beforeinput.
-        const digits = input.value.replace(/\D/g, '');
-        input.value = mask;
-        setValue(mask);
-        fillFromDigits(digits);
         emit();
-    }, [applyEdit, disabled, emit, fillFromDigits, inputRef, mask, readonly, setValue]);
-    // React 18 не отдаёт `inputType` в `onBeforeInput`, поэтому слушаем нативные события.
-    const onNativeBeforeInput = (0, utils_1.useEventHandler)(handleBeforeInput);
-    const onNativeInput = (0, utils_1.useEventHandler)(handleInput);
-    const attachedInputRef = (0, react_1.useRef)(null);
-    const nativeInputRef = (0, react_1.useCallback)((node) => {
-        /* eslint-disable @cloud-ru/ssr-safe-react/domApi -- callback-ref вызывается только в браузере */
-        attachedInputRef.current?.removeEventListener('beforeinput', onNativeBeforeInput);
-        attachedInputRef.current?.removeEventListener('input', onNativeInput);
-        attachedInputRef.current = node;
-        node?.addEventListener('beforeinput', onNativeBeforeInput);
-        node?.addEventListener('input', onNativeInput);
-        /* eslint-enable @cloud-ru/ssr-safe-react/domApi */
-    }, [onNativeBeforeInput, onNativeInput]);
-    return {
-        handleKeyDown,
-        handleClick,
-        handleFocus,
-        handleBlur,
-        handlePaste,
-        nativeInputRef,
-        selectSlot,
-        firstSlot,
-        lastSlot,
-    };
+    }, [disabled, emit, ensureMask, lastSlot, nextSlot, readonly, selectSlot, slots, tryToComplete, updateSlot]);
+    return { handleKeyDown, handleClick, handleFocus, handleBlur, handlePaste, selectSlot, firstSlot, lastSlot };
 }

package/dist/esm/components/FieldDate/FieldDate.js

@@ -321,9 +321,9 @@ export const FieldDate = forwardRef(function FieldDate(props, ref) {
                                     _jsxs("span", { className: styles.rangeInputs, style: { '--field-date-mask-ch': placeholderMask.length }, children: [_jsx(InputPrivate, { ...inputCommon, ref: mergeRefs(ref, fromInputRef), className: cn(fieldStyles.fieldInput, styles.rangeInputFrom), value: rangeInputValue[0], placeholder: placeholderMask, onChange: handleRangeInput(0), id: id, name: name, autoFocus: resolvedAutoFocus, "aria-label": labelFrom, "data-test-id": TEST_IDS.fieldDateInputFrom }), _jsx("span", { className: styles.rangeSeparator, "aria-hidden": true, children: "\u2013" }), _jsx(InputPrivate, { ...inputCommon, ref: toInputRef, className: fieldStyles.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": TEST_IDS.fieldDateInputTo })] })) : (_jsx(InputPrivate, { ref: mergeRefs(ref, fromInputRef, singleSeg.nativeInputRef), className: fieldStyles.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
-                                        // Single/date-time ведёт сегментный движок (useSegmentedMask), нативный onChange
-                                        // игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                                                onKeyDown: handleToInputKeyDown, tabIndex: inputTabIndex, "aria-label": labelTo, "data-test-id": TEST_IDS.fieldDateInputTo })] })) : (_jsx(InputPrivate, { ref: mergeRefs(ref, fromInputRef), className: fieldStyles.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": TEST_IDS.fieldDateInput })) }), postfixButtons && (
                                 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                                 _jsx("span", { className: fieldStyles.postfixButtonsSlot, onMouseDown: preventSlotMouseDown, onClick: stopSlotClickPropagation, children: postfixButtons }))] }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldDateCalendar, "aria-hidden": true, children: _jsx(CalendarSVG, {}) })] }) })] }));

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

@@ -10,9 +10,8 @@ export declare function getMaskString(mode: MaskMode, showSeconds?: boolean): st
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
- *    Пример: `39` для day → `09`, `13` для month → `03`.
+ * 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` при невалидной/неполной строке. */

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

@@ -42,9 +42,8 @@ function buildSegments(mode, showSeconds) {
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
- *    Пример: `39` для day → `09`, `13` для month → `03`.
+ * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
  */
 export function formatMask(input, mode, showSeconds = true) {
     const maxLen = totalLen(mode, showSeconds);
@@ -70,7 +69,7 @@ export function formatMask(input, mode, showSeconds = true) {
         stream = stream.slice(seg.len);
         if (raw.length === seg.len) {
             const n = Number(raw);
-            out += n > seg.max ? raw.slice(-1).padStart(seg.len, '0') : raw;
+            out += n > seg.max ? String(seg.max).padStart(seg.len, '0') : raw;
         }
         else {
             out += raw;

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

@@ -131,7 +131,7 @@ export const FieldTime = forwardRef(function FieldTime({ label = '', labelToolti
         // clear/copy недостижимыми со стрелок — движок всегда делает preventDefault на ArrowRight.
         onInputKeyDown(event);
     }, [onInputKeyDown, timeSeg]);
-    // value ведёт сегментный движок (useSegmentedMask); нативный onChange input'а игнорируем.
+    // value ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
     const handleInputChange = useCallback(() => undefined, []);
     const handleInputFocus = useCallback((event) => {
         setFocusVisible(event.target.matches(':focus-visible'));
@@ -149,7 +149,7 @@ export const FieldTime = forwardRef(function FieldTime({ label = '', labelToolti
                             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, timeSeg.nativeInputRef), 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, {}) })] }) })] }));
+                        }), 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-снимка

package/dist/esm/segments/useSegmentedMask.d.ts

@@ -29,7 +29,6 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }: UseSegmentedMaskParams): {
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -37,7 +36,6 @@ export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disa
     handleFocus: () => void;
     handleBlur: () => void;
     handlePaste: (event: ClipboardEvent<HTMLInputElement>) => void;
-    nativeInputRef: (node: HTMLInputElement | null) => void;
     selectSlot: (slot: SlotMeta) => void;
     firstSlot: SlotMeta;
     lastSlot: SlotMeta;