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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.3-preview-0c4119af.0",
+  "version": "2.2.3-preview-7425cb27.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -40,23 +40,23 @@
     "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.15-preview-0c4119af.0",
+    "@cloud-ru/ds-button": "1.0.2",
+    "@cloud-ru/ds-calendar": "1.0.14",
     "@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-list": "2.1.3",
     "@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-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)}
+                  ref={mergeRefs(ref, fromInputRef, singleSeg.nativeInputRef)}
                   className={fieldStyles.fieldInput}
                   value={singleInputValue}
                   placeholder={placeholderMask}
-                  // Single/date-time ведёт сегментный движок (keydown, useSegmentedMask), нативный
-                  // onChange игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                  // Single/date-time ведёт сегментный движок (useSegmentedMask), нативный onChange
+                  // игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
                   onChange={() => {}}
                   onKeyDown={handleSingleKeyDown}
                   onClick={singleSeg.handleClick}

package/src/components/FieldDate/mask.ts

@@ -55,8 +55,9 @@ function buildSegments(mode: MaskMode, showSeconds: boolean): Segment[] {
  *    «десятку» (`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: string, mode: MaskMode, showSeconds = true): string {
   const maxLen = totalLen(mode, showSeconds);
@@ -81,7 +82,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 ? String(seg.max).padStart(seg.len, '0') : raw;
+      out += n > seg.max ? raw.slice(-1).padStart(seg.len, '0') : raw;
     } else {
       out += raw;
     }

package/src/components/FieldSelect/FieldSelect.tsx

@@ -34,7 +34,6 @@ 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 {
@@ -43,8 +42,6 @@ import {
   filterItems,
   findItem,
   flatten,
-  getMissingSelectedItems,
-  getSelectedIds,
   isMultiple,
   TAG_SIZE_MAP,
   WithIdContent,
@@ -114,8 +111,6 @@ 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);
 
@@ -182,31 +177,18 @@ 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([...missingSelectedItems, ...allItems])) {
+    for (const item of flatten(allItems)) {
       if (item.id !== undefined) {
         seenItems.current.set(item.id, item);
       }
     }
 
-    return (id: ItemId) => findItem(allItems, id) ?? findItem(missingSelectedItems, id) ?? seenItems.current.get(id);
-  }, [allItems, missingSelectedItems]);
+    return (id: ItemId) => findItem(allItems, id) ?? seenItems.current.get(id);
+  }, [allItems]);
 
   const selectedPairs = useMemo(() => {
     if (!multiple || multipleValue.length === 0) {
@@ -283,14 +265,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 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) {
@@ -308,112 +290,61 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     return filterItems(pinBottom, inputValue, enableFuzzySearch);
   }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
 
-  const handleSingleChange = useCallback(
-    (next: ItemId | undefined) => {
-      if (multiple) {
-        return;
-      }
-
-      if (props.value === undefined) {
-        setSingleLocal(next);
-      }
-
-      props.onChange?.(next);
-      setTyping(false);
-    },
-    [multiple, props],
-  );
-
-  const handleMultipleChange = useCallback(
-    (next: ItemId[]) => {
-      if (!multiple) {
-        return;
-      }
-
-      if (props.value === undefined) {
-        setMultipleLocal(next);
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      // readonly/disabled поле открывать нельзя, закрывать — можно.
+      if (next && (disabled || readOnly)) return;
+      if (openProp === undefined) {
+        setOpenLocal(next);
       }
 
-      props.onChange?.(next);
+      onOpenChange?.(next);
 
-      if (searchable) {
+      if (!next) {
         setTyping(false);
 
         if (resetSearchOnOptionSelection) {
-          setInputValue('');
+          setInputValue(selectedLabel);
         }
       }
     },
-    [multiple, props, searchable, resetSearchOnOptionSelection, setInputValue],
+    [openProp, onOpenChange, disabled, readOnly, resetSearchOnOptionSelection, setInputValue, selectedLabel],
   );
 
-  const resetCustomOptionSearch = useCallback(() => {
-    setTyping(false);
+  const handleSingleChange = (next: ItemId | undefined) => {
+    if (multiple) {
+      return;
+    }
 
-    if (resetSearchOnOptionSelection) {
-      setInputValue(multiple ? '' : selectedLabel);
+    if (props.value === undefined) {
+      setSingleLocal(next);
     }
-  }, [resetSearchOnOptionSelection, setInputValue, multiple, selectedLabel]);
 
-  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,
-  });
+    props.onChange?.(next);
+    setTyping(false);
+  };
 
-  const handleOpenChange = useCallback(
-    (next: boolean) => {
-      // readonly/disabled поле открывать нельзя, закрывать — можно.
-      if (next && (disabled || readOnly)) return;
-      if (openProp === undefined) {
-        setOpenLocal(next);
-      }
+  const handleMultipleChange = (next: ItemId[]) => {
+    if (!multiple) {
+      return;
+    }
 
-      onOpenChange?.(next);
+    if (props.value === undefined) {
+      setMultipleLocal(next);
+    }
 
-      if (!next) {
-        setTyping(false);
-        const committed = tryCommitOnClose();
+    props.onChange?.(next);
 
-        // Кастомная опция не зафиксирована — вернуть лейбл выбранного значения.
-        if (resetSearchOnOptionSelection && !committed) {
-          setInputValue(selectedLabel);
-        }
+    if (searchable) {
+      setTyping(false);
+
+      if (resetSearchOnOptionSelection) {
+        setInputValue('');
       }
-    },
-    [
-      openProp,
-      onOpenChange,
-      disabled,
-      readOnly,
-      resetSearchOnOptionSelection,
-      setInputValue,
-      selectedLabel,
-      tryCommitOnClose,
-    ],
-  );
+    }
+  };
 
   const handleInputChange = (next: string) => {
-    enableCloseCommit();
     setInputValue(next);
     setTyping(true);
 
@@ -540,13 +471,21 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
 
     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;
     }
 
@@ -597,23 +536,17 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     [searchable, onFocusProp],
   );
 
-  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 handleInputBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      setFocusVisible(false);
+      onBlurProp?.(event);
+    },
+    [onBlurProp],
+  );
 
   const droplistSelection = multiple
-    ? { mode: 'multiple' as const, value: multipleValue, onChange: handleListMultipleChange }
-    : { mode: 'single' as const, value: singleValue, onChange: handleListSingleChange };
+    ? { mode: 'multiple' as const, value: multipleValue, onChange: handleMultipleChange }
+    : { mode: 'single' as const, value: singleValue, onChange: handleSingleChange };
 
   const hasChips = chips && selectedPairs.length > 0;
 
@@ -765,7 +698,6 @@ 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,25 +2,3 @@ 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/types.ts

@@ -5,41 +5,11 @@ 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[];
-};
-
 // ItemProps — union с рекурсивными группами, поэтому раздаём поле по всем веткам.
 type WithTagAppearance<T> = T extends { items: ItemProps[] }
   ? Omit<T, 'items'> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[] }
@@ -145,8 +115,6 @@ type CommonSelectProps = FieldSelectDecoratorProps &
     autocomplete?: boolean;
     /**
      * Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»).
-     *
-     * @deprecated Используйте `allowCustomOption`. `true` эквивалентен `allowCustomOption` с триггером `enter`.
      * @default false
      */
     addOptionByEnter?: boolean;
@@ -201,55 +169,53 @@ type CommonSelectProps = FieldSelectDecoratorProps &
     'data-test-id'?: string;
   };
 
-export type FieldSelectSingleProps = CommonSelectProps &
-  CustomOptionProps<FieldSelectSingleAddCustomOptionTrigger> & {
-    /** Режим выбора. По умолчанию `'single'`. */
-    selection?: typeof SELECTION_MODE.Single;
-    /** Управляемое значение. Пустая строка трактуется как «значение не выбрано». */
-    value?: ItemId;
-    /** Неуправляемое значение по умолчанию. Пустая строка трактуется как «значение не выбрано». */
-    defaultValue?: ItemId;
-    /** Колбек смены значения */
-    onChange?(value: ItemId | undefined): void;
-    /**
-     * Закрывать дроплист после клика на айтем.
-     * @default true
-     */
-    closeDroplistOnItemClick?: boolean;
-  };
+export type FieldSelectSingleProps = CommonSelectProps & {
+  /** Режим выбора. По умолчанию `'single'`. */
+  selection?: typeof SELECTION_MODE.Single;
+  /** Управляемое значение. Пустая строка трактуется как «значение не выбрано». */
+  value?: ItemId;
+  /** Неуправляемое значение по умолчанию. Пустая строка трактуется как «значение не выбрано». */
+  defaultValue?: ItemId;
+  /** Колбек смены значения */
+  onChange?(value: ItemId | undefined): void;
+  /**
+   * Закрывать дроплист после клика на айтем.
+   * @default true
+   */
+  closeDroplistOnItemClick?: boolean;
+};
 
-export type FieldSelectMultipleProps = CommonSelectProps &
-  CustomOptionProps<FieldSelectMultipleAddCustomOptionTrigger> & {
-    /** Режим выбора */
-    selection: typeof SELECTION_MODE.Multiple;
-    /** Управляемые значения */
-    value?: ItemId[];
-    /** Неуправляемые значения по умолчанию */
-    defaultValue?: ItemId[];
-    /** Колбек смены значений */
-    onChange?(value: ItemId[]): void;
-    /**
-     * Форматтер строки выбранных значений (используется, если `chips=false`).
-     * @default — список лейблов через `, `
-     */
-    formatSelected?(selected: { id: ItemId; label: string }[]): string;
-    /**
-     * Отображать выбранные значения как чипы (`@cloud-ru/ds-tag`) внутри поля. Если `false`,
-     * показывает строку из `formatSelected` либо comma-joined.
-     * @default true
-     */
-    chips?: boolean;
-    /**
-     * Удалять последний чип по `Backspace`, когда строка ввода пустая.
-     * Работает только при `chips=true` и `searchable=true`.
-     * @default true
-     */
-    removeByBackspace?: boolean;
-    /**
-     * Закрывать дроплист после клика на айтем.
-     * @default false
-     */
-    closeDroplistOnItemClick?: boolean;
-  };
+export type FieldSelectMultipleProps = CommonSelectProps & {
+  /** Режим выбора */
+  selection: typeof SELECTION_MODE.Multiple;
+  /** Управляемые значения */
+  value?: ItemId[];
+  /** Неуправляемые значения по умолчанию */
+  defaultValue?: ItemId[];
+  /** Колбек смены значений */
+  onChange?(value: ItemId[]): void;
+  /**
+   * Форматтер строки выбранных значений (используется, если `chips=false`).
+   * @default — список лейблов через `, `
+   */
+  formatSelected?(selected: { id: ItemId; label: string }[]): string;
+  /**
+   * Отображать выбранные значения как чипы (`@cloud-ru/ds-tag`) внутри поля. Если `false`,
+   * показывает строку из `formatSelected` либо comma-joined.
+   * @default true
+   */
+  chips?: boolean;
+  /**
+   * Удалять последний чип по `Backspace`, когда строка ввода пустая.
+   * Работает только при `chips=true` и `searchable=true`.
+   * @default true
+   */
+  removeByBackspace?: boolean;
+  /**
+   * Закрывать дроплист после клика на айтем.
+   * @default false
+   */
+  closeDroplistOnItemClick?: boolean;
+};
 
 export type FieldSelectProps = FieldSelectSingleProps | FieldSelectMultipleProps;