@cloud-ru/ds-fields 2.2.3-preview-a0540d7f.0 → 2.2.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.2.4 (2026-09-14)
+
+### Bug Fixes
+
+- **FF-9049:** handle date/time segment input via beforeinput for mobile keyboards, IME and autofill ([2bdf60d](https://github.com/cloud-ru-tech/snack-v2/commit/2bdf60da37d46a3be1e164874aa96fab26a08e08))
+- **FF-9049:** keep leading zeros in segmented date/time input, restart overflowing segment from last digit ([d7652ac](https://github.com/cloud-ru-tech/snack-v2/commit/d7652ac0bded8a0c5a4785ecb62b1e2d7d2720f8))
+
+## 2.2.3 (2026-09-14)
+
+**Note:** Version bump only for package @ds/fields
+
 ## 2.2.2 (2026-09-10)
 
 ### Bug Fixes

package/README.md

@@ -435,9 +435,7 @@ export function Select() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `addCustomOptionTriggers` | `("enter" \| "blur")[] \| ("enter" \| "blur" \| "space" \| "comma")[]` | — | События, по которым произвольный ввод фиксируется как выбранная опция. <br/> Учитывается только при `allowCustomOption={true}`. <br/> Если не задан — используются все триггеры режима (`single`: enter, blur; `multiple`: enter, blur, space, comma). <br/> Триггеры, недоступные в текущем `selection`, игнорируются. |
-| `addOptionByEnter` | `boolean` | `false` | Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»). <br/> @deprecated Используйте `allowCustomOption`. `true` эквивалентен `allowCustomOption` с триггером `enter`. |
-| `allowCustomOption` | `boolean` | `false` | Разрешить фиксировать произвольный ввод из строки поиска как выбранную опцию <br/> (значение, которого нет в `items`). |
+| `addOptionByEnter` | `boolean` | `false` | Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»). |
 | `autoFocus` | `boolean` | — | Автофокус input при монтировании. На mobile выключается адаптивно (см. `layoutPresets`) |
 | `autocomplete` | `boolean` | `false` | Не фильтровать список на клиенте — фильтрацию обеспечивает потребитель (серверный поиск). <br/> Введённый текст уходит в `search.onChange`, список берётся из `items` как есть. |
 | `background` | `boolean` | `true` | Фон поля (acrylic) |

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), className: styles_module_scss_1.default.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
-                                        // Single/date-time ведёт сегментный движок (keydown, 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, singleSeg.nativeInputRef), className: styles_module_scss_1.default.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
+                                        // Single/date-time ведёт сегментный движок (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,8 +10,9 @@ export declare function getMaskString(mode: MaskMode, showSeconds?: boolean): st
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
+ *    Пример: `39` для day → `09`, `13` для month → `03`.
  */
 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,8 +48,9 @@ function buildSegments(mode, showSeconds) {
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
+ *    Пример: `39` для day → `09`, `13` для month → `03`.
  */
 function formatMask(input, mode, showSeconds = true) {
     const maxLen = totalLen(mode, showSeconds);
@@ -75,7 +76,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 ? String(seg.max).padStart(seg.len, '0') : raw;
+            out += n > seg.max ? raw.slice(-1).padStart(seg.len, '0') : raw;
         }
         else {
             out += raw;

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

@@ -20,7 +20,6 @@ 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 hooks_2 = require("./hooks");
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
 exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
@@ -29,13 +28,10 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
     const chips = multiple ? (props.chips ?? true) : false;
     const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
     const closeDroplistOnItemClick = props.closeDroplistOnItemClick ?? !multiple;
-    const allowCustomOption = props.allowCustomOption === true;
-    const addCustomOptionTriggers = allowCustomOption ? props.addCustomOptionTriggers : undefined;
     const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
     const inputRef = (0, react_1.useRef)(null);
     // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
     const inputElementRef = (0, react_1.useRef)(null);
-    const restoreInputFocusRef = (0, react_1.useRef)(false);
     const clearButtonRef = (0, react_1.useRef)(null);
     const copyButtonRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
@@ -77,20 +73,16 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
     }, [multiple, props.value, multipleLocal]);
     const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
     const allItems = (0, react_1.useMemo)(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
-    const selectedIds = (0, react_1.useMemo)(() => (0, utils_2.getSelectedIds)({ multiple, multipleValue, singleValue }), [multiple, multipleValue, singleValue]);
-    // Выбранное, которого нет в `items` (кастом по allowCustomOption, ленивая подгрузка) — в список, не только в чип.
-    const missingSelectedItems = (0, react_1.useMemo)(() => (0, utils_2.getMissingSelectedItems)(selectedIds, allItems), [selectedIds, allItems]);
-    const itemsWithPlaceholders = (0, react_1.useMemo)(() => (missingSelectedItems.length > 0 ? [...missingSelectedItems, ...items] : items), [missingSelectedItems, items]);
     // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
     const seenItems = (0, react_1.useRef)(new Map());
     const resolveItem = (0, react_1.useMemo)(() => {
-        for (const item of (0, utils_2.flatten)([...missingSelectedItems, ...allItems])) {
+        for (const item of (0, utils_2.flatten)(allItems)) {
             if (item.id !== undefined) {
                 seenItems.current.set(item.id, item);
             }
         }
-        return (id) => (0, utils_2.findItem)(allItems, id) ?? (0, utils_2.findItem)(missingSelectedItems, id) ?? seenItems.current.get(id);
-    }, [allItems, missingSelectedItems]);
+        return (id) => (0, utils_2.findItem)(allItems, id) ?? seenItems.current.get(id);
+    }, [allItems]);
     const selectedPairs = (0, react_1.useMemo)(() => {
         if (!multiple || multipleValue.length === 0) {
             return [];
@@ -145,13 +137,13 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         syncedLabelRef.current = selectedLabel;
         setInputValue(selectedLabel);
     }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
-    // При autocomplete фильтрует сервер — items берутся как есть, плюс выбранное вне списка.
+    // При autocomplete фильтрует сервер — items берутся как есть.
     const filteredItems = (0, react_1.useMemo)(() => {
         if (!searchable || autocomplete || !typing) {
-            return itemsWithPlaceholders;
+            return items;
         }
-        return (0, utils_2.filterItems)(itemsWithPlaceholders, inputValue, enableFuzzySearch);
-    }, [searchable, autocomplete, typing, itemsWithPlaceholders, inputValue, enableFuzzySearch]);
+        return (0, utils_2.filterItems)(items, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, items, inputValue, enableFuzzySearch]);
     const filteredPinTop = (0, react_1.useMemo)(() => {
         if (!searchable || autocomplete || !typing || !pinTop) {
             return pinTop;
@@ -164,7 +156,22 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         return (0, utils_2.filterItems)(pinBottom, inputValue, enableFuzzySearch);
     }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
-    const handleSingleChange = (0, react_1.useCallback)((next) => {
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        // readonly/disabled поле открывать нельзя, закрывать — можно.
+        if (next && (disabled || readOnly))
+            return;
+        if (openProp === undefined) {
+            setOpenLocal(next);
+        }
+        onOpenChange?.(next);
+        if (!next) {
+            setTyping(false);
+            if (resetSearchOnOptionSelection) {
+                setInputValue(selectedLabel);
+            }
+        }
+    }, [openProp, onOpenChange, disabled, readOnly, resetSearchOnOptionSelection, setInputValue, selectedLabel]);
+    const handleSingleChange = (next) => {
         if (multiple) {
             return;
         }
@@ -173,12 +180,11 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         props.onChange?.(next);
         setTyping(false);
-    }, [multiple, props]);
-    const handleMultipleChange = (0, react_1.useCallback)((next) => {
+    };
+    const handleMultipleChange = (next) => {
         if (!multiple) {
             return;
         }
-        restoreInputFocusRef.current = (0, utils_1.isBrowser)() && inputElementRef.current === document.activeElement;
         if (props.value === undefined) {
             setMultipleLocal(next);
         }
@@ -189,57 +195,8 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
                 setInputValue('');
             }
         }
-    }, [multiple, props, searchable, resetSearchOnOptionSelection, setInputValue]);
-    const resetCustomOptionSearch = (0, react_1.useCallback)(() => {
-        setTyping(false);
-        if (resetSearchOnOptionSelection) {
-            setInputValue(multiple ? '' : selectedLabel);
-        }
-    }, [resetSearchOnOptionSelection, setInputValue, multiple, selectedLabel]);
-    const { listRef, suppressCloseCommit, enableCloseCommit, tryCommitOnClose, tryCommitOnBlur, tryCommitFromKeyboard, handleListSingleChange, handleListMultipleChange, } = (0, hooks_2.useCustomOption)({
-        allowCustomOption,
-        addCustomOptionTriggers,
-        addOptionByEnter,
-        multiple,
-        inputValue,
-        typing,
-        multipleValue,
-        commitSingle: handleSingleChange,
-        commitMultiple: handleMultipleChange,
-        resetSearch: resetCustomOptionSearch,
-        inputElementRef,
-        clearButtonRef,
-        copyButtonRef,
-        footerActiveElementsRefs,
-    });
-    const handleOpenChange = (0, react_1.useCallback)((next) => {
-        // readonly/disabled поле открывать нельзя, закрывать — можно.
-        if (next && (disabled || readOnly))
-            return;
-        if (openProp === undefined) {
-            setOpenLocal(next);
-        }
-        onOpenChange?.(next);
-        if (!next) {
-            setTyping(false);
-            const committed = tryCommitOnClose();
-            // Кастомная опция не зафиксирована — вернуть лейбл выбранного значения.
-            if (resetSearchOnOptionSelection && !committed) {
-                setInputValue(selectedLabel);
-            }
-        }
-    }, [
-        openProp,
-        onOpenChange,
-        disabled,
-        readOnly,
-        resetSearchOnOptionSelection,
-        setInputValue,
-        selectedLabel,
-        tryCommitOnClose,
-    ]);
+    };
     const handleInputChange = (next) => {
-        enableCloseCommit();
         setInputValue(next);
         setTyping(true);
         if (!open) {
@@ -338,12 +295,19 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         if (event.key === 'Escape' && open) {
             event.preventDefault();
-            suppressCloseCommit();
             handleOpenChange(false);
         }
-        if (tryCommitFromKeyboard(event)) {
+        if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
+            // Введённый текст становится новым значением (создание опции «на лету»).
             event.preventDefault();
-            event.stopPropagation();
+            if (multiple) {
+                if (!multipleValue.includes(inputValue)) {
+                    handleMultipleChange([...multipleValue, inputValue]);
+                }
+            }
+            else {
+                handleSingleChange(inputValue);
+            }
             return;
         }
         if (event.key === 'Enter' && !open) {
@@ -356,11 +320,6 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
             removeChip(last);
         }
     };
-    const handleTriggerKeyDownCapture = (event) => {
-        if (event.key === 'Escape') {
-            suppressCloseCommit();
-        }
-    };
     const handleTriggerMouseEnter = (0, react_1.useCallback)(() => {
         if (!readOnly && !disabled) {
             setHover(true);
@@ -385,28 +344,14 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         }
         onFocusProp?.(event);
     }, [searchable, onFocusProp]);
-    const handleInputBlur = (event) => {
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
         setFocusVisible(false);
-        const blurResult = tryCommitOnBlur(event);
-        // Закрытый список не получит onOpenChange — вернуть лейбл выбранного значения.
-        // Клик по айтему открытого списка даёт relatedTarget === null, восстановление делает закрытие.
-        if (resetSearchOnOptionSelection && blurResult === 'skipped' && (!open || event.relatedTarget !== null)) {
-            setTyping(false);
-            setInputValue(selectedLabel);
-        }
         onBlurProp?.(event);
-    };
+    }, [onBlurProp]);
     const droplistSelection = multiple
-        ? { mode: 'multiple', value: multipleValue, onChange: handleListMultipleChange }
-        : { mode: 'single', value: singleValue, onChange: handleListSingleChange };
+        ? { mode: 'multiple', value: multipleValue, onChange: handleMultipleChange }
+        : { mode: 'single', value: singleValue, onChange: handleSingleChange };
     const hasChips = chips && selectedPairs.length > 0;
-    (0, utils_1.useLayoutEffect)(() => {
-        if (!restoreInputFocusRef.current) {
-            return;
-        }
-        restoreInputFocusRef.current = false;
-        inputElementRef.current?.focus();
-    }, [multipleValue.length]);
     // minWidth поискового input'а = ширина введённого текста (`.inputPlug`), но не больше строки чипов.
     // Замер до paint, иначе input мигает при вводе.
     (0, utils_1.useLayoutEffect)(() => {
@@ -419,11 +364,11 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
         setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
     }, [hasChips, inputValue, selectedPairs.length]);
     const searchInputField = ((0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, inputRef, inputElementRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, !searchable && styles_module_scss_2.default.readonlyCursor), value: inputValue, onChange: searchable ? handleInputChange : undefined, placeholder: selectedLabel || hasChips ? '' : placeholder, disabled: disabled, readonly: !searchable || readOnly, id: id, name: name, autoFocus: resolvedAutoFocus, tabIndex: inputTabIndex, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleTriggerKeyDown, "data-test-id": constants_1.TEST_IDS.fieldSelectInput }));
-    const searchInput = hasChips ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField }, 'search-input')) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: searchInputField }));
+    const searchInput = hasChips ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: searchInputField }));
     const trigger = (
     // Focusable-элемент — InputPrivate внутри, обёртка только собирает combobox.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (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: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDownCapture: handleTriggerKeyDownCapture, onClick: handleTriggerClick, 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)({
+    (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: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, 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,
@@ -432,5 +377,5 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
                         }), 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: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), hasChips ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.chipsRow, ref: contentRef, "data-test-id": constants_1.TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { label: formatPair(pair), size: utils_2.TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, (0, jsx_runtime_1.jsx)("span", { ref: inputPlugRef, className: styles_module_scss_2.default.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), 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 })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-open": open || undefined, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
-    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)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, listRef: listRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
+    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)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
 });

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

@@ -2,14 +2,3 @@ export declare const SELECTION_MODE: {
     readonly Single: "single";
     readonly Multiple: "multiple";
 };
-/** События, по которым произвольный ввод фиксируется как выбранная опция. */
-export declare const ADD_CUSTOM_OPTION_TRIGGER: {
-    readonly Enter: "enter";
-    readonly Blur: "blur";
-    readonly Space: "space";
-    readonly Comma: "comma";
-};
-/** Триггеры по умолчанию для `selection='single'` при `allowCustomOption`. */
-export declare const ADD_CUSTOM_OPTION_TRIGGERS_SINGLE: readonly ["enter", "blur"];
-/** Триггеры по умолчанию для `selection='multiple'` при `allowCustomOption`. */
-export declare const ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE: readonly ["enter", "blur", "space", "comma"];

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

@@ -1,26 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE = exports.ADD_CUSTOM_OPTION_TRIGGERS_SINGLE = exports.ADD_CUSTOM_OPTION_TRIGGER = exports.SELECTION_MODE = void 0;
+exports.SELECTION_MODE = void 0;
 exports.SELECTION_MODE = {
     Single: 'single',
     Multiple: 'multiple',
 };
-/** События, по которым произвольный ввод фиксируется как выбранная опция. */
-exports.ADD_CUSTOM_OPTION_TRIGGER = {
-    Enter: 'enter',
-    Blur: 'blur',
-    Space: 'space',
-    Comma: 'comma',
-};
-/** Триггеры по умолчанию для `selection='single'` при `allowCustomOption`. */
-exports.ADD_CUSTOM_OPTION_TRIGGERS_SINGLE = [
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Enter,
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Blur,
-];
-/** Триггеры по умолчанию для `selection='multiple'` при `allowCustomOption`. */
-exports.ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE = [
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Enter,
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Blur,
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Space,
-    exports.ADD_CUSTOM_OPTION_TRIGGER.Comma,
-];

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

@@ -4,30 +4,9 @@ import { Appearance as TagAppearance } from '@cloud-ru/ds-tag';
 import { ValueOf } from '@cloud-ru/ds-utils';
 import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 import { FieldLayoutPresets } from '../../hooks';
-import { ADD_CUSTOM_OPTION_TRIGGER, ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE, ADD_CUSTOM_OPTION_TRIGGERS_SINGLE, SELECTION_MODE } from './constants';
+import { SELECTION_MODE } from './constants';
 /** Режим выбора FieldSelect: одно значение или несколько. */
 export type Selection = ValueOf<typeof SELECTION_MODE>;
-/** Событие, по которому произвольный ввод фиксируется как выбранная опция. */
-export type FieldSelectAddCustomOptionTrigger = ValueOf<typeof ADD_CUSTOM_OPTION_TRIGGER>;
-/** Триггеры кастомной опции в режиме `single`. */
-export type FieldSelectSingleAddCustomOptionTrigger = (typeof ADD_CUSTOM_OPTION_TRIGGERS_SINGLE)[number];
-/** Триггеры кастомной опции в режиме `multiple`. */
-export type FieldSelectMultipleAddCustomOptionTrigger = (typeof ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE)[number];
-type CustomOptionProps<TTrigger extends FieldSelectAddCustomOptionTrigger> = {
-    /**
-     * Разрешить фиксировать произвольный ввод из строки поиска как выбранную опцию
-     * (значение, которого нет в `items`).
-     * @default false
-     */
-    allowCustomOption?: boolean;
-    /**
-     * События, по которым произвольный ввод фиксируется как выбранная опция.
-     * Учитывается только при `allowCustomOption={true}`.
-     * Если не задан — используются все триггеры режима (`single`: enter, blur; `multiple`: enter, blur, space, comma).
-     * Триггеры, недоступные в текущем `selection`, игнорируются.
-     */
-    addCustomOptionTriggers?: TTrigger[];
-};
 type WithTagAppearance<T> = T extends {
     items: ItemProps[];
 } ? Omit<T, 'items'> & {
@@ -119,8 +98,6 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     autocomplete?: boolean;
     /**
      * Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»).
-     *
-     * @deprecated Используйте `allowCustomOption`. `true` эквивалентен `allowCustomOption` с триггером `enter`.
      * @default false
      */
     addOptionByEnter?: boolean;
@@ -177,7 +154,7 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     /** Тестовый id корня */
     'data-test-id'?: string;
 };
-export type FieldSelectSingleProps = CommonSelectProps & CustomOptionProps<FieldSelectSingleAddCustomOptionTrigger> & {
+export type FieldSelectSingleProps = CommonSelectProps & {
     /** Режим выбора. По умолчанию `'single'`. */
     selection?: typeof SELECTION_MODE.Single;
     /** Управляемое значение. Пустая строка трактуется как «значение не выбрано». */
@@ -192,7 +169,7 @@ export type FieldSelectSingleProps = CommonSelectProps & CustomOptionProps<Field
      */
     closeDroplistOnItemClick?: boolean;
 };
-export type FieldSelectMultipleProps = CommonSelectProps & CustomOptionProps<FieldSelectMultipleAddCustomOptionTrigger> & {
+export type FieldSelectMultipleProps = CommonSelectProps & {
     /** Режим выбора */
     selection: typeof SELECTION_MODE.Multiple;
     /** Управляемые значения */

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

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

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

@@ -0,0 +1,103 @@
+"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`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
+function extractAppearance(item) {
+    return typeof item?.appearance === 'string' ? item.appearance : 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/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 ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
+    // value ведёт сегментный движок (useSegmentedMask); нативный 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), 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, 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, {}) })] }) })] }));
     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,6 +29,7 @@ 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;
@@ -36,6 +37,7 @@ 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;