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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.3-preview-8025692f.0",
+  "version": "2.2.3-preview-a0540d7f.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -39,24 +39,24 @@
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
     "react-textarea-autosize": "^8.5.9",
-    "@cloud-ru/ds-bottom-sheet": "1.1.1",
     "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-bottom-sheet": "1.1.1",
+    "@cloud-ru/ds-button": "1.0.2",
+    "@cloud-ru/ds-calendar": "1.0.15-preview-a0540d7f.0",
     "@cloud-ru/ds-color-picker": "1.0.6",
-    "@cloud-ru/ds-calendar": "1.0.15-preview-8025692f.0",
     "@cloud-ru/ds-divider": "1.0.1",
     "@cloud-ru/ds-dropdown": "1.0.8",
-    "@cloud-ru/ds-button": "1.0.2",
-    "@cloud-ru/ds-field-decorator": "1.0.5",
     "@cloud-ru/ds-icons": "1.1.0",
-    "@cloud-ru/ds-list": "2.1.4-preview-8025692f.0",
+    "@cloud-ru/ds-field-decorator": "1.0.5",
     "@cloud-ru/ds-input-private": "1.0.4",
     "@cloud-ru/ds-loader": "1.0.1",
+    "@cloud-ru/ds-list": "2.1.4-preview-a0540d7f.0",
     "@cloud-ru/ds-materials": "1.0.1",
     "@cloud-ru/ds-scroll": "1.0.2",
-    "@cloud-ru/ds-slider": "1.0.4",
     "@cloud-ru/ds-skeleton": "1.0.1",
-    "@cloud-ru/ds-tooltip": "1.0.4",
+    "@cloud-ru/ds-slider": "1.0.4",
     "@cloud-ru/ds-tag": "1.1.1",
+    "@cloud-ru/ds-tooltip": "1.0.4",
     "@cloud-ru/ds-utils": "1.1.0"
   }
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -520,12 +520,12 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(function F
                 </span>
               ) : (
                 <InputPrivate
-                  ref={mergeRefs(ref, fromInputRef, singleSeg.nativeInputRef)}
+                  ref={mergeRefs(ref, fromInputRef)}
                   className={fieldStyles.fieldInput}
                   value={singleInputValue}
                   placeholder={placeholderMask}
-                  // Single/date-time ведёт сегментный движок (useSegmentedMask), нативный onChange
-                  // игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                  // Single/date-time ведёт сегментный движок (keydown, useSegmentedMask), нативный
+                  // onChange игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
                   onChange={() => {}}
                   onKeyDown={handleSingleKeyDown}
                   onClick={singleSeg.handleClick}

package/src/components/FieldDate/mask.ts

@@ -55,9 +55,8 @@ function buildSegments(mode: MaskMode, showSeconds: boolean): Segment[] {
  *    «десятку» (`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: string, mode: MaskMode, showSeconds = true): string {
   const maxLen = totalLen(mode, showSeconds);
@@ -82,7 +81,7 @@ export function formatMask(input: string, mode: MaskMode, showSeconds = true): s
     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/src/components/FieldSelect/FieldSelect.tsx

@@ -2,7 +2,7 @@ import { ChevronDownSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InputPrivate, useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
 import { Droplist, ItemId } from '@cloud-ru/ds-list';
 import { Tag } from '@cloud-ru/ds-tag';
-import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { isBrowser, useLayoutEffect } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import {
@@ -34,6 +34,7 @@ import {
   useCopyButton,
 } from '../shared';
 import fieldStyles from '../shared/styles.module.scss';
+import { useCustomOption } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectProps } from './types';
 import {
@@ -42,6 +43,8 @@ import {
   filterItems,
   findItem,
   flatten,
+  getMissingSelectedItems,
+  getSelectedIds,
   isMultiple,
   TAG_SIZE_MAP,
   WithIdContent,
@@ -111,12 +114,15 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
   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<HTMLInputElement>(null);
   // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
   const inputElementRef = useRef<HTMLInputElement>(null);
+  const restoreInputFocusRef = useRef(false);
   const clearButtonRef = useRef<HTMLButtonElement>(null);
   const copyButtonRef = useRef<HTMLButtonElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -177,18 +183,31 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
 
   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<ItemId, WithIdContent>());
 
   const resolveItem = useMemo(() => {
-    for (const item of flatten(allItems)) {
+    for (const item of flatten([...missingSelectedItems, ...allItems])) {
       if (item.id !== undefined) {
         seenItems.current.set(item.id, item);
       }
     }
 
-    return (id: ItemId) => findItem(allItems, id) ?? seenItems.current.get(id);
-  }, [allItems]);
+    return (id: ItemId) => findItem(allItems, id) ?? findItem(missingSelectedItems, id) ?? seenItems.current.get(id);
+  }, [allItems, missingSelectedItems]);
 
   const selectedPairs = useMemo(() => {
     if (!multiple || multipleValue.length === 0) {
@@ -265,14 +284,14 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     setInputValue(selectedLabel);
   }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
 
-  // При autocomplete фильтрует сервер — items берутся как есть.
+  // При autocomplete фильтрует сервер — items берутся как есть, плюс выбранное вне списка.
   const filteredItems = useMemo(() => {
     if (!searchable || autocomplete || !typing) {
-      return items;
+      return itemsWithPlaceholders;
     }
 
-    return filterItems(items, inputValue, enableFuzzySearch);
-  }, [searchable, autocomplete, typing, items, inputValue, enableFuzzySearch]);
+    return filterItems(itemsWithPlaceholders, inputValue, enableFuzzySearch);
+  }, [searchable, autocomplete, typing, itemsWithPlaceholders, inputValue, enableFuzzySearch]);
 
   const filteredPinTop = useMemo(() => {
     if (!searchable || autocomplete || !typing || !pinTop) {
@@ -290,61 +309,115 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     return filterItems(pinBottom, inputValue, enableFuzzySearch);
   }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
 
-  const handleOpenChange = useCallback(
-    (next: boolean) => {
-      // readonly/disabled поле открывать нельзя, закрывать — можно.
-      if (next && (disabled || readOnly)) return;
-      if (openProp === undefined) {
-        setOpenLocal(next);
+  const handleSingleChange = useCallback(
+    (next: ItemId | undefined) => {
+      if (multiple) {
+        return;
       }
 
-      onOpenChange?.(next);
+      if (props.value === undefined) {
+        setSingleLocal(next);
+      }
 
-      if (!next) {
+      props.onChange?.(next);
+      setTyping(false);
+    },
+    [multiple, props],
+  );
+
+  const handleMultipleChange = useCallback(
+    (next: ItemId[]) => {
+      if (!multiple) {
+        return;
+      }
+
+      restoreInputFocusRef.current = isBrowser() && inputElementRef.current === document.activeElement;
+
+      if (props.value === undefined) {
+        setMultipleLocal(next);
+      }
+
+      props.onChange?.(next);
+
+      if (searchable) {
         setTyping(false);
 
         if (resetSearchOnOptionSelection) {
-          setInputValue(selectedLabel);
+          setInputValue('');
         }
       }
     },
-    [openProp, onOpenChange, disabled, readOnly, resetSearchOnOptionSelection, setInputValue, selectedLabel],
+    [multiple, props, searchable, resetSearchOnOptionSelection, setInputValue],
   );
 
-  const handleSingleChange = (next: ItemId | undefined) => {
-    if (multiple) {
-      return;
-    }
-
-    if (props.value === undefined) {
-      setSingleLocal(next);
-    }
-
-    props.onChange?.(next);
+  const resetCustomOptionSearch = useCallback(() => {
     setTyping(false);
-  };
 
-  const handleMultipleChange = (next: ItemId[]) => {
-    if (!multiple) {
-      return;
+    if (resetSearchOnOptionSelection) {
+      setInputValue(multiple ? '' : selectedLabel);
     }
+  }, [resetSearchOnOptionSelection, setInputValue, multiple, selectedLabel]);
 
-    if (props.value === undefined) {
-      setMultipleLocal(next);
-    }
+  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,
+  });
 
-    props.onChange?.(next);
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      // readonly/disabled поле открывать нельзя, закрывать — можно.
+      if (next && (disabled || readOnly)) return;
+      if (openProp === undefined) {
+        setOpenLocal(next);
+      }
 
-    if (searchable) {
-      setTyping(false);
+      onOpenChange?.(next);
+
+      if (!next) {
+        setTyping(false);
+        const committed = tryCommitOnClose();
 
-      if (resetSearchOnOptionSelection) {
-        setInputValue('');
+        // Кастомная опция не зафиксирована — вернуть лейбл выбранного значения.
+        if (resetSearchOnOptionSelection && !committed) {
+          setInputValue(selectedLabel);
+        }
       }
-    }
-  };
+    },
+    [
+      openProp,
+      onOpenChange,
+      disabled,
+      readOnly,
+      resetSearchOnOptionSelection,
+      setInputValue,
+      selectedLabel,
+      tryCommitOnClose,
+    ],
+  );
 
   const handleInputChange = (next: string) => {
+    enableCloseCommit();
     setInputValue(next);
     setTyping(true);
 
@@ -471,21 +544,13 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
 
     if (event.key === 'Escape' && open) {
       event.preventDefault();
+      suppressCloseCommit();
       handleOpenChange(false);
     }
 
-    if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
-      // Введённый текст становится новым значением (создание опции «на лету»).
+    if (tryCommitFromKeyboard(event)) {
       event.preventDefault();
-
-      if (multiple) {
-        if (!multipleValue.includes(inputValue)) {
-          handleMultipleChange([...multipleValue, inputValue]);
-        }
-      } else {
-        handleSingleChange(inputValue);
-      }
-
+      event.stopPropagation();
       return;
     }
 
@@ -501,6 +566,12 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     }
   };
 
+  const handleTriggerKeyDownCapture = (event: KeyboardEvent<HTMLElement>) => {
+    if (event.key === 'Escape') {
+      suppressCloseCommit();
+    }
+  };
+
   const handleTriggerMouseEnter = useCallback(() => {
     if (!readOnly && !disabled) {
       setHover(true);
@@ -536,20 +607,35 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     [searchable, onFocusProp],
   );
 
-  const handleInputBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      setFocusVisible(false);
-      onBlurProp?.(event);
-    },
-    [onBlurProp],
-  );
+  const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setFocusVisible(false);
+    const blurResult = tryCommitOnBlur(event);
+
+    // Закрытый список не получит onOpenChange — вернуть лейбл выбранного значения.
+    // Клик по айтему открытого списка даёт relatedTarget === null, восстановление делает закрытие.
+    if (resetSearchOnOptionSelection && blurResult === 'skipped' && (!open || event.relatedTarget !== null)) {
+      setTyping(false);
+      setInputValue(selectedLabel);
+    }
+
+    onBlurProp?.(event);
+  };
 
   const droplistSelection = multiple
-    ? { mode: 'multiple' as const, value: multipleValue, onChange: handleMultipleChange }
-    : { mode: 'single' as const, value: singleValue, onChange: handleSingleChange };
+    ? { mode: 'multiple' as const, value: multipleValue, onChange: handleListMultipleChange }
+    : { mode: 'single' as const, value: singleValue, onChange: handleListSingleChange };
 
   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(() => {
@@ -583,7 +669,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
   );
 
   const searchInput = hasChips ? (
-    <div className={styles.inputWrapper} style={{ minWidth: chipInputMinWidth } as CSSProperties}>
+    <div key='search-input' className={styles.inputWrapper} style={{ minWidth: chipInputMinWidth } as CSSProperties}>
       {searchInputField}
     </div>
   ) : (
@@ -605,6 +691,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
       data-test-id={dataTestId}
       onMouseEnter={handleTriggerMouseEnter}
       onMouseLeave={handleTriggerMouseLeave}
+      onKeyDownCapture={handleTriggerKeyDownCapture}
       onClick={handleTriggerClick}
     >
       <div className={fieldStyles.backgroundWrapper}>
@@ -698,6 +785,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
         placement={placement}
         widthStrategy={widthStrategy}
         triggerElemRef={inputRef}
+        listRef={listRef}
         size={size}
         open={open}
         onOpenChange={handleOpenChange}

package/src/components/FieldSelect/constants.ts

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

package/src/components/FieldSelect/hooks.ts

@@ -0,0 +1,177 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, RefObject, useCallback, useMemo, useRef } from 'react';
+
+import {
+  ADD_CUSTOM_OPTION_TRIGGER,
+  ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE,
+  ADD_CUSTOM_OPTION_TRIGGERS_SINGLE,
+} from './constants';
+import { FieldSelectAddCustomOptionTrigger } from './types';
+import {
+  getCustomOptionTriggerByCode,
+  isCustomOptionBlurInsideField,
+  resolveAddCustomOptionTriggers,
+  shouldCommitCustomOptionOnClose,
+  shouldHandleCustomOptionTrigger,
+} from './utils';
+
+/** Результат blur: фокус остался внутри поля, ввод зафиксирован, или коммитить было нечего. */
+type CustomOptionBlurResult = 'inside' | 'committed' | 'skipped';
+
+type UseCustomOptionParams = {
+  allowCustomOption: boolean;
+  addCustomOptionTriggers: readonly FieldSelectAddCustomOptionTrigger[] | undefined;
+  addOptionByEnter: boolean;
+  multiple: boolean;
+  inputValue: string;
+  typing: boolean;
+  multipleValue: ItemId[];
+  commitSingle(value: ItemId | undefined): void;
+  commitMultiple(value: ItemId[]): void;
+  resetSearch(): void;
+  inputElementRef: RefObject<HTMLInputElement | null>;
+  clearButtonRef: RefObject<HTMLButtonElement | null>;
+  copyButtonRef: RefObject<HTMLButtonElement | null>;
+  footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+
+/** Фиксация произвольного ввода как выбранной опции: триггеры, blur, закрытие списка. */
+export function useCustomOption({
+  allowCustomOption,
+  addCustomOptionTriggers,
+  addOptionByEnter,
+  multiple,
+  inputValue,
+  typing,
+  multipleValue,
+  commitSingle,
+  commitMultiple,
+  resetSearch,
+  inputElementRef,
+  clearButtonRef,
+  copyButtonRef,
+  footerActiveElementsRefs,
+}: UseCustomOptionParams) {
+  const listRef = useRef<HTMLElement>(null);
+  const skipCloseCommitRef = useRef(false);
+  const skipBlurCommitRef = useRef(false);
+
+  const resolvedTriggers = useMemo(
+    () =>
+      resolveAddCustomOptionTriggers({
+        allowCustomOption,
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        defaultTriggers: multiple ? ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE : ADD_CUSTOM_OPTION_TRIGGERS_SINGLE,
+      }),
+    [allowCustomOption, addCustomOptionTriggers, addOptionByEnter, multiple],
+  );
+
+  const tryCommit = useCallback(
+    (trigger: FieldSelectAddCustomOptionTrigger) => {
+      if (!typing || !shouldHandleCustomOptionTrigger(trigger, resolvedTriggers) || inputValue === '') {
+        return false;
+      }
+
+      if (multiple) {
+        if (multipleValue.includes(inputValue)) {
+          resetSearch();
+        } else {
+          commitMultiple([...multipleValue, inputValue]);
+        }
+      } else {
+        commitSingle(inputValue);
+      }
+
+      return true;
+    },
+    [typing, resolvedTriggers, inputValue, multiple, multipleValue, commitMultiple, commitSingle, resetSearch],
+  );
+
+  const suppressCloseCommit = useCallback(() => {
+    skipCloseCommitRef.current = true;
+    skipBlurCommitRef.current = true;
+  }, []);
+
+  const enableCloseCommit = useCallback(() => {
+    skipCloseCommitRef.current = false;
+    skipBlurCommitRef.current = false;
+  }, []);
+
+  const tryCommitOnClose = useCallback(() => {
+    const skipped = skipCloseCommitRef.current;
+    const shouldCommit = shouldCommitCustomOptionOnClose({
+      skip: skipped,
+      inputElement: inputElementRef.current,
+      activeElement: isBrowser() ? document.activeElement : null,
+    });
+
+    if (skipped) {
+      queueMicrotask(() => {
+        skipCloseCommitRef.current = false;
+      });
+    }
+
+    return shouldCommit && tryCommit(ADD_CUSTOM_OPTION_TRIGGER.Blur);
+  }, [inputElementRef, tryCommit]);
+
+  const tryCommitOnBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>): CustomOptionBlurResult => {
+      if (skipBlurCommitRef.current) {
+        skipBlurCommitRef.current = false;
+        return 'skipped';
+      }
+
+      if (
+        isCustomOptionBlurInsideField(event.relatedTarget, [
+          listRef.current,
+          clearButtonRef.current,
+          copyButtonRef.current,
+          ...(footerActiveElementsRefs?.map(ref => ref.current) ?? []),
+        ])
+      ) {
+        return 'inside';
+      }
+
+      return tryCommit(ADD_CUSTOM_OPTION_TRIGGER.Blur) ? 'committed' : 'skipped';
+    },
+    [clearButtonRef, copyButtonRef, footerActiveElementsRefs, tryCommit],
+  );
+
+  const tryCommitFromKeyboard = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      const trigger = getCustomOptionTriggerByCode(event.code, event.key);
+
+      return trigger !== undefined && tryCommit(trigger);
+    },
+    [tryCommit],
+  );
+
+  const handleListSingleChange = useCallback(
+    (next: ItemId | undefined) => {
+      skipCloseCommitRef.current = true;
+      commitSingle(next);
+    },
+    [commitSingle],
+  );
+
+  const handleListMultipleChange = useCallback(
+    (next: ItemId[]) => {
+      skipCloseCommitRef.current = true;
+      commitMultiple(next);
+    },
+    [commitMultiple],
+  );
+
+  return {
+    listRef,
+    suppressCloseCommit,
+    enableCloseCommit,
+    tryCommitOnClose,
+    tryCommitOnBlur,
+    tryCommitFromKeyboard,
+    handleListSingleChange,
+    handleListMultipleChange,
+  };
+}