@cloud-ru/ds-fields 2.2.2 → 2.2.3-preview-0c4119af.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.2",
+  "version": "2.2.3-preview-0c4119af.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-adaptive": "^1.0.1",
-    "@cloud-ru/ds-button": "^1.0.2",
-    "@cloud-ru/ds-bottom-sheet": "^1.1.1",
-    "@cloud-ru/ds-calendar": "^1.0.14",
-    "@cloud-ru/ds-color-picker": "^1.0.6",
-    "@cloud-ru/ds-dropdown": "^1.0.8",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-field-decorator": "^1.0.5",
-    "@cloud-ru/ds-icons": "^1.1.0",
-    "@cloud-ru/ds-input-private": "^1.0.4",
-    "@cloud-ru/ds-loader": "^1.0.1",
-    "@cloud-ru/ds-list": "^2.1.3",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-materials": "^1.0.1",
-    "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@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"
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-button": "1.0.2",
+    "@cloud-ru/ds-bottom-sheet": "1.1.1",
+    "@cloud-ru/ds-calendar": "1.0.15-preview-0c4119af.0",
+    "@cloud-ru/ds-color-picker": "1.0.6",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-field-decorator": "1.0.5",
+    "@cloud-ru/ds-icons": "1.1.0",
+    "@cloud-ru/ds-dropdown": "1.0.8",
+    "@cloud-ru/ds-list": "2.1.4-preview-0c4119af.0",
+    "@cloud-ru/ds-input-private": "1.0.4",
+    "@cloud-ru/ds-loader": "1.0.1",
+    "@cloud-ru/ds-materials": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.2",
+    "@cloud-ru/ds-tooltip": "1.0.4",
+    "@cloud-ru/ds-slider": "1.0.4",
+    "@cloud-ru/ds-skeleton": "1.0.1",
+    "@cloud-ru/ds-tag": "1.1.1",
+    "@cloud-ru/ds-utils": "1.1.0"
   }
 }

package/src/components/FieldSelect/FieldSelect.tsx

@@ -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,6 +114,8 @@ 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);
 
@@ -177,18 +182,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 +283,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 +308,112 @@ 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;
+      }
+
+      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,
+    multipleValue,
+    commitSingle: handleSingleChange,
+    commitMultiple: handleMultipleChange,
+    resetSearch: resetCustomOptionSearch,
+    inputElementRef,
+    clearButtonRef,
+    copyButtonRef,
+    footerActiveElementsRefs,
+  });
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      // readonly/disabled поле открывать нельзя, закрывать — можно.
+      if (next && (disabled || readOnly)) return;
+      if (openProp === undefined) {
+        setOpenLocal(next);
+      }
 
-    props.onChange?.(next);
+      onOpenChange?.(next);
 
-    if (searchable) {
-      setTyping(false);
+      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 +540,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;
     }
 
@@ -536,17 +597,23 @@ 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;
 
@@ -698,6 +765,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,162 @@
+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;
+  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,
+  multipleValue,
+  commitSingle,
+  commitMultiple,
+  resetSearch,
+  inputElementRef,
+  clearButtonRef,
+  copyButtonRef,
+  footerActiveElementsRefs,
+}: UseCustomOptionParams) {
+  const listRef = useRef<HTMLElement>(null);
+  const skipCloseCommitRef = 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 (!shouldHandleCustomOptionTrigger(trigger, resolvedTriggers) || inputValue === '') {
+        return false;
+      }
+
+      if (multiple) {
+        if (multipleValue.includes(inputValue)) {
+          resetSearch();
+        } else {
+          commitMultiple([...multipleValue, inputValue]);
+        }
+      } else {
+        commitSingle(inputValue);
+      }
+
+      return true;
+    },
+    [resolvedTriggers, inputValue, multiple, multipleValue, commitMultiple, commitSingle, resetSearch],
+  );
+
+  const suppressCloseCommit = useCallback(() => {
+    skipCloseCommitRef.current = true;
+  }, []);
+
+  const enableCloseCommit = useCallback(() => {
+    skipCloseCommitRef.current = false;
+  }, []);
+
+  const tryCommitOnClose = useCallback(() => {
+    const shouldCommit = shouldCommitCustomOptionOnClose({
+      skip: skipCloseCommitRef.current,
+      inputElement: inputElementRef.current,
+      activeElement: isBrowser() ? document.activeElement : null,
+    });
+
+    skipCloseCommitRef.current = false;
+
+    return shouldCommit && tryCommit(ADD_CUSTOM_OPTION_TRIGGER.Blur);
+  }, [inputElementRef, tryCommit]);
+
+  const tryCommitOnBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>): CustomOptionBlurResult => {
+      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,
+  };
+}