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

package/dist/cjs/segments/useSegmentedMask.js

@@ -1,11 +1,24 @@
 "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];
@@ -110,70 +123,60 @@ 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 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);
+        const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
+        const appended = prev + key;
+        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;
         }
-        else if (digit * 10 > slot.max) {
-            updateSlot(slot, key);
+        typedRef.current = null;
+        if (accepted)
             checkInputAndGoNext(slot);
-        }
-        else if (digit || digit >= slot.min) {
-            updateSlot(slot, key);
-        }
-    }, [checkInputAndGoNext, getSlotText, updateSlot]);
+    }, [checkInputAndGoNext, updateSlot]);
     const handleFocus = (0, react_1.useCallback)(() => {
         if (readonly || disabled)
             return;
+        resetTyped();
         ensureMask();
         // На фокус всегда выбираем ПЕРВЫЙ сегмент (паритет с легаси). При клике мышью `handleClick`
         // отработает следом и перевыберет сегмент под кареткой; при Tab остаётся первый.
         selectSlot(firstSlot);
-    }, [disabled, ensureMask, firstSlot, readonly, selectSlot]);
+    }, [disabled, ensureMask, firstSlot, readonly, resetTyped, selectSlot]);
     const handleClick = (0, react_1.useCallback)((event) => {
         if (readonly || disabled)
             return;
+        resetTyped();
         ensureMask();
         selectSlot(slotFromIndex(event.currentTarget.selectionStart));
-    }, [disabled, ensureMask, readonly, selectSlot, slotFromIndex]);
+    }, [disabled, ensureMask, readonly, resetTyped, selectSlot, slotFromIndex]);
     const handleBlur = (0, react_1.useCallback)(() => {
+        resetTyped();
         const input = inputRef.current;
         if (input && input.value === mask) {
             input.value = '';
             setValue('');
         }
-    }, [inputRef, mask, setValue]);
+    }, [inputRef, mask, resetTyped, 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;
@@ -188,7 +191,13 @@ 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?.();
@@ -223,11 +232,6 @@ 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,
@@ -243,21 +247,13 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         onEscape,
         prevSlot,
         readonly,
+        resetTyped,
         selectSlot,
         slotFromIndex,
         tryToComplete,
-        typeDigit,
     ]);
-    // Вставка (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;
+    const fillFromDigits = (0, react_1.useCallback)((digits) => {
+        resetTyped();
         ensureMask();
         let cursor = 0;
         let lastFilled;
@@ -276,7 +272,100 @@ 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();
-    }, [disabled, emit, ensureMask, lastSlot, nextSlot, readonly, selectSlot, slots, tryToComplete, updateSlot]);
-    return { handleKeyDown, handleClick, handleFocus, handleBlur, handlePaste, selectSlot, firstSlot, lastSlot };
+    }, [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,
+    };
 }

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), className: fieldStyles.fieldInput, value: singleInputValue, placeholder: placeholderMask, 
-                                        // Single/date-time ведёт сегментный движок (keydown, useSegmentedMask), нативный
-                                        // onChange игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                                                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).
                                         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,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/esm/components/FieldDate/mask.js

@@ -42,8 +42,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`.
  */
 export function formatMask(input, mode, showSeconds = true) {
     const maxLen = totalLen(mode, showSeconds);
@@ -69,7 +70,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 ? 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/esm/components/FieldSelect/FieldSelect.js

@@ -3,7 +3,7 @@ import { ChevronDownSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InputPrivate, useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
 import { Droplist } from '@cloud-ru/ds-list';
 import { Tag } from '@cloud-ru/ds-tag';
-import { isBrowser, useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
@@ -14,22 +14,18 @@ import { TEST_IDS } from '../../constants.js';
 import { useAdaptiveAutoFocus } from '../../hooks/index.js';
 import { copyTextToClipboard, getAcrylicProps, preventSlotMouseDown, stopSlotClickPropagation, toInputSize, useCopyButton, } from '../shared/index.js';
 import fieldStyles from '../shared/styles.module.css';
-import { useCustomOption } from './hooks.js';
 import styles from './styles.module.css';
-import { extractAppearance, extractLabel, filterItems, findItem, flatten, getMissingSelectedItems, getSelectedIds, isMultiple, TAG_SIZE_MAP, } from './utils/index.js';
+import { extractAppearance, extractLabel, filterItems, findItem, flatten, isMultiple, TAG_SIZE_MAP, } from './utils.js';
 export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     const { label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = TEST_IDS.fieldSelect, } = props;
     const multiple = isMultiple(props);
     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 = useAdaptiveAutoFocus(autoFocus, layoutPresets);
     const inputRef = useRef(null);
     // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
     const inputElementRef = useRef(null);
-    const restoreInputFocusRef = useRef(false);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
     const contentRef = useRef(null);
@@ -71,20 +67,16 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     }, [multiple, props.value, multipleLocal]);
     const effectiveValidationState = useMemo(() => (error ? VALIDATION_STATE.Error : validationState), [error, validationState]);
     const allItems = useMemo(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
-    const selectedIds = useMemo(() => getSelectedIds({ multiple, multipleValue, singleValue }), [multiple, multipleValue, singleValue]);
-    // Выбранное, которого нет в `items` (кастом по allowCustomOption, ленивая подгрузка) — в список, не только в чип.
-    const missingSelectedItems = useMemo(() => getMissingSelectedItems(selectedIds, allItems), [selectedIds, allItems]);
-    const itemsWithPlaceholders = useMemo(() => (missingSelectedItems.length > 0 ? [...missingSelectedItems, ...items] : items), [missingSelectedItems, items]);
     // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
     const seenItems = useRef(new Map());
     const resolveItem = useMemo(() => {
-        for (const item of flatten([...missingSelectedItems, ...allItems])) {
+        for (const item of flatten(allItems)) {
             if (item.id !== undefined) {
                 seenItems.current.set(item.id, item);
             }
         }
-        return (id) => findItem(allItems, id) ?? findItem(missingSelectedItems, id) ?? seenItems.current.get(id);
-    }, [allItems, missingSelectedItems]);
+        return (id) => findItem(allItems, id) ?? seenItems.current.get(id);
+    }, [allItems]);
     const selectedPairs = useMemo(() => {
         if (!multiple || multipleValue.length === 0) {
             return [];
@@ -139,13 +131,13 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         syncedLabelRef.current = selectedLabel;
         setInputValue(selectedLabel);
     }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
-    // При autocomplete фильтрует сервер — items берутся как есть, плюс выбранное вне списка.
+    // При autocomplete фильтрует сервер — items берутся как есть.
     const filteredItems = useMemo(() => {
         if (!searchable || autocomplete || !typing) {
-            return itemsWithPlaceholders;
+            return items;
         }
-        return filterItems(itemsWithPlaceholders, inputValue, enableFuzzySearch);
-    }, [searchable, autocomplete, typing, itemsWithPlaceholders, inputValue, enableFuzzySearch]);
+        return filterItems(items, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, items, inputValue, enableFuzzySearch]);
     const filteredPinTop = useMemo(() => {
         if (!searchable || autocomplete || !typing || !pinTop) {
             return pinTop;
@@ -158,7 +150,22 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         return filterItems(pinBottom, inputValue, enableFuzzySearch);
     }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
-    const handleSingleChange = useCallback((next) => {
+    const handleOpenChange = 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;
         }
@@ -167,12 +174,11 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         props.onChange?.(next);
         setTyping(false);
-    }, [multiple, props]);
-    const handleMultipleChange = useCallback((next) => {
+    };
+    const handleMultipleChange = (next) => {
         if (!multiple) {
             return;
         }
-        restoreInputFocusRef.current = isBrowser() && inputElementRef.current === document.activeElement;
         if (props.value === undefined) {
             setMultipleLocal(next);
         }
@@ -183,57 +189,8 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                 setInputValue('');
             }
         }
-    }, [multiple, props, searchable, resetSearchOnOptionSelection, setInputValue]);
-    const resetCustomOptionSearch = useCallback(() => {
-        setTyping(false);
-        if (resetSearchOnOptionSelection) {
-            setInputValue(multiple ? '' : selectedLabel);
-        }
-    }, [resetSearchOnOptionSelection, setInputValue, multiple, selectedLabel]);
-    const { listRef, suppressCloseCommit, enableCloseCommit, tryCommitOnClose, tryCommitOnBlur, tryCommitFromKeyboard, handleListSingleChange, handleListMultipleChange, } = useCustomOption({
-        allowCustomOption,
-        addCustomOptionTriggers,
-        addOptionByEnter,
-        multiple,
-        inputValue,
-        typing,
-        multipleValue,
-        commitSingle: handleSingleChange,
-        commitMultiple: handleMultipleChange,
-        resetSearch: resetCustomOptionSearch,
-        inputElementRef,
-        clearButtonRef,
-        copyButtonRef,
-        footerActiveElementsRefs,
-    });
-    const handleOpenChange = 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) {
@@ -332,12 +289,19 @@ export const FieldSelect = 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) {
@@ -350,11 +314,6 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
             removeChip(last);
         }
     };
-    const handleTriggerKeyDownCapture = (event) => {
-        if (event.key === 'Escape') {
-            suppressCloseCommit();
-        }
-    };
     const handleTriggerMouseEnter = useCallback(() => {
         if (!readOnly && !disabled) {
             setHover(true);
@@ -379,28 +338,14 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         onFocusProp?.(event);
     }, [searchable, onFocusProp]);
-    const handleInputBlur = (event) => {
+    const handleInputBlur = 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;
-    useLayoutEffect(() => {
-        if (!restoreInputFocusRef.current) {
-            return;
-        }
-        restoreInputFocusRef.current = false;
-        inputElementRef.current?.focus();
-    }, [multipleValue.length]);
     // minWidth поискового input'а = ширина введённого текста (`.inputPlug`), но не больше строки чипов.
     // Замер до paint, иначе input мигает при вводе.
     useLayoutEffect(() => {
@@ -413,11 +358,11 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
     }, [hasChips, inputValue, selectedPairs.length]);
     const searchInputField = (_jsx(InputPrivate, { ref: mergeRefs(ref, inputRef, inputElementRef), className: cn(fieldStyles.fieldInput, !searchable && styles.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": TEST_IDS.fieldSelectInput }));
-    const searchInput = hasChips ? (_jsx("div", { className: styles.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField }, 'search-input')) : (_jsx("div", { className: fieldStyles.inputArea, children: searchInputField }));
+    const searchInput = hasChips ? (_jsx("div", { className: styles.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : (_jsx("div", { className: fieldStyles.inputArea, children: searchInputField }));
     const trigger = (
     // Focusable-элемент — InputPrivate внутри, обёртка только собирает combobox.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDownCapture: handleTriggerKeyDownCapture, onClick: handleTriggerClick, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
+    _jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
                             validationState: effectiveValidationState,
                             disabled,
                             readonly: readOnly,
@@ -426,5 +371,5 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                         }), 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: [iconBefore && _jsx("div", { className: fieldStyles.iconSlot, children: iconBefore }), _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), hasChips ? (_jsxs("div", { className: styles.chipsRow, ref: contentRef, "data-test-id": TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => (_jsx(Tag, { label: formatPair(pair), size: TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
                                 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                                 _jsx("span", { className: fieldStyles.postfixButtonsSlot, onMouseDown: preventSlotMouseDown, onClick: stopSlotClickPropagation, children: postfixButtons })), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix })] }), _jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.chevron, "data-open": open || undefined, "aria-hidden": true, children: _jsx(ChevronDownSVG, {}) }) })] }) })] }));
-    return (_jsx(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: _jsx(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 (_jsx(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: _jsx(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/esm/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/esm/components/FieldSelect/constants.js

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