@cloud-ru/ds-fields 1.0.0

package/src/components/FieldSelect/styles.module.scss

@@ -0,0 +1,104 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/tag.module' as tag;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+
+$sizes: 's', 'm', 'l';
+
+// FieldSelect size → tag size (Figma fieldSelectMultiple chips): s→xs, m→xs, l→s.
+$chip-sizes: (
+  's': 'xs',
+  'm': 'xs',
+  'l': 's',
+);
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  transition: transform 0.15s ease-in-out;
+
+  &[data-open='true'] {
+    transform: rotate(180deg);
+  }
+}
+
+.trigger {
+  cursor: text;
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &[data-readonly='true'] {
+    cursor: default;
+  }
+}
+
+.readonlyCursor {
+  cursor: pointer;
+}
+
+// Контейнер «чипы + поисковый input» (паритет с легаси FieldSelect .contentWrapper):
+// занимает всю доступную ширину строки, чипы и input переносятся вместе одним потоком.
+.chipsRow {
+  display: flex;
+  flex: 1 0 0;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+
+  min-width: 0;
+
+  @each $size, $tagSize in $chip-sizes {
+    [data-size='#{$size}'] & {
+      // gap = tag.tagRow.gap по mapped tag size (Figma fieldSelectMultiple chips: 2 для xs/s) —
+      // одновременно column- и row-gap при flex-wrap (отступ между чипами и между рядами).
+      gap: base.simple-var(tag.$tag, 'anatomy', 'size', $tagSize, 'tagRow', 'gap');
+      // Вертикальные отступы строк чипов (Figma fieldContainer.contentWrapper.verticalPadding) —
+      // shared-поле их не применяет (single-line центрируется), а мультиселекту они нужны, чтобы
+      // ряды чипов не липли к краям контейнера (пропавшие отступы по макету).
+      padding-top: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-top');
+      padding-bottom: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-bottom');
+    }
+  }
+}
+
+// Поисковый input внутри чип-контейнера: течёт за последним чипом (inline-flex), переносится
+// на новую строку при длинном вводе. min-width задаётся инлайном из замера плага (см. FieldSelect.tsx);
+// базовый — крошечный, чтобы пустой input прижимался к последнему чипу (флоу как в легаси).
+.inputWrapper {
+  position: relative;
+  display: inline-flex;
+  // flex-basis: 0 — иначе content-based база (intrinsic-ширина <input>) уводит input на новую
+  // строку. Перенос управляется inline-minWidth (ширина введённого текста): пока текст влезает в
+  // остаток строки — input рядом с чипами, перерос — flex-wrap уносит его на новую строку.
+  flex: 1 1 0;
+  min-width: base.$sn-primitive-dimension-4;
+}
+
+// Скрытый замерочный плаг: рендерит введённый текст той же типографикой, что input, и отдаёт
+// его натуральную ширину через clientWidth. Вне потока (absolute, height 0) — на layout не влияет.
+.inputPlug {
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  width: fit-content;
+  max-width: 100%;
+  height: 0;
+
+  white-space: pre;
+
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      @include base.composite-var(base.$sn-regular, 'body', $size);
+    }
+  }
+}

package/src/components/FieldSelect/types.ts

@@ -0,0 +1,212 @@
+import { FieldDecoratorProps, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { DroplistProps, ItemId, ItemProps } from '@cloud-ru/ds-list';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
+
+import { FieldLayoutPresets } from '../../hooks';
+import { SELECTION_MODE } from './constants';
+
+/** Режим выбора FieldSelect: одно значение или несколько. */
+export type Selection = ValueOf<typeof SELECTION_MODE>;
+
+type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
+
+type DroplistPassthrough = Pick<
+  DroplistProps,
+  | 'footer'
+  | 'footerActiveElementsRefs'
+  | 'loading'
+  | 'noDataState'
+  | 'noResultsState'
+  | 'errorDataState'
+  | 'virtualized'
+  | 'scrollToSelectedItem'
+  | 'limitedScrollHeight'
+  | 'untouchableScrollbars'
+  | 'closeOnPopstate'
+> & {
+  /**
+   * Флаг «ошибка загрузки данных» — при `true` дроплист рендерит `errorDataState`
+   * вместо списка (для асинхронной подгрузки с провалившимся запросом).
+   */
+  dataError?: DroplistProps['dataError'];
+  /**
+   * Флаг «список отфильтрован» — при `true` и пустом результате дроплист рендерит
+   * `noResultsState`. По умолчанию выводится из строки поиска (`searchable` + ввод).
+   */
+  dataFiltered?: DroplistProps['dataFiltered'];
+};
+
+type CommonSelectProps = FieldSelectDecoratorProps &
+  DroplistPassthrough & {
+    /** Размер */
+    size?: FieldDecoratorProps['size'];
+    /** Состояние валидации */
+    validationState?: ValidationState;
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Список айтемов дроплиста (формат `@cloud-ru/ds-list`) */
+    items: ItemProps[];
+    /** Пресет-айтемы сверху (формат `@cloud-ru/ds-list`) */
+    pinTop?: ItemProps[];
+    /** Пресет-айтемы снизу (формат `@cloud-ru/ds-list`) */
+    pinBottom?: ItemProps[];
+    /** Placeholder в триггере, когда нет выбранного значения */
+    placeholder?: string;
+    /** Иконка перед текстом */
+    iconBefore?: ReactNode;
+    /** Префикс — текст или нода перед значением (Figma `prefix`) */
+    prefix?: ReactNode;
+    /** Постфикс — текст или нода после значения (Figma `postfix`) */
+    postfix?: ReactNode;
+    /** Деактивировано */
+    disabled?: boolean;
+    /** Read-only режим */
+    readonly?: boolean;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /** Управляемое открытие дроплиста */
+    open?: DroplistProps['open'];
+    /** Колбек смены открытия */
+    onOpenChange?: DroplistProps['onOpenChange'];
+    /** Placement дроплиста */
+    placement?: DroplistProps['placement'];
+    /**
+     * Стратегия ширины дроплиста.
+     * @default 'eq' — равна ширине триггера
+     */
+    widthStrategy?: DroplistProps['widthStrategy'];
+    /**
+     * Включить поиск/ввод в поле — пользователь печатает, список фильтруется по подстроке лейбла.
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Управляемое/неуправляемое состояние строки поиска (текста в поле). Позволяет потребителю
+     * читать и задавать запрос (например, для серверного поиска вместе с `autocomplete`).
+     */
+    search?: {
+      /** Управляемое значение строки поиска */
+      value?: string;
+      /** Начальное значение строки поиска (uncontrolled) */
+      defaultValue?: string;
+      /** Колбек смены строки поиска */
+      onChange?(value: string): void;
+    };
+    /**
+     * Не фильтровать список на клиенте — фильтрацию обеспечивает потребитель (серверный поиск).
+     * Введённый текст уходит в `search.onChange`, список берётся из `items` как есть.
+     * @default false
+     */
+    autocomplete?: boolean;
+    /**
+     * Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»).
+     * @default false
+     */
+    addOptionByEnter?: boolean;
+    /**
+     * Сбрасывать строку поиска к выбранному значению после выбора. `false` нужен при асинхронной
+     * подгрузке (оставить введённый запрос как значение, пока данные не пришли).
+     * @default true
+     */
+    resetSearchOnOptionSelection?: boolean;
+    /**
+     * Показывать кнопку очистки значения (✕). Активна, когда есть выбранное значение
+     * и поле не disabled/readonly.
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Показывать кнопку копирования значения (только при `readonly` и непустом значении).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения в буфер */
+    onCopyButtonClick?(): void;
+    /** HTML-атрибут `id` для input (и `for` у label) */
+    id?: string;
+    /** HTML-атрибут `name` для input */
+    name?: string;
+    /** Автофокус input при монтировании. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Колбек фокуса input */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра input */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек нажатия клавиши на input (вызывается после внутренней обработки навигации) */
+    onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Включить нечёткий поиск: символы запроса должны встречаться в лейбле в том же порядке
+     * (например, `lge` найдёт `Large`). Если `false` — простой substring-match.
+     * @default true
+     */
+    enableFuzzySearch?: boolean;
+    /**
+     * Кастомный форматтер лейбла выбранного значения. Применяется к каждому выбранному
+     * элементу (single — значение в поле, multiple — лейбл чипа или элемент в comma-joined).
+     */
+    selectedOptionFormatter?(selected: { id: ItemId; label: string }): string;
+    /** Тестовый id корня */
+    'data-test-id'?: string;
+  };
+
+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 & {
+  /** Режим выбора */
+  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;

package/src/components/FieldSelect/utils.ts

@@ -0,0 +1,134 @@
+import { Size } from '@cloud-ru/ds-field-decorator';
+import { ItemId, ItemProps } from '@cloud-ru/ds-list';
+import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
+
+import { SELECTION_MODE } from './constants';
+import { FieldSelectMultipleProps, FieldSelectProps } from './types';
+
+export const TAG_SIZE_MAP: Record<Size, TagSize> = { s: 'xs', m: 'xs', l: 's' };
+
+export type WithIdContent = { id?: ItemId; content?: unknown; disabled?: boolean; appearance?: unknown };
+
+export function extractLabel(item: WithIdContent): string {
+  const { content, id } = item;
+
+  if (!content) {
+    return String(id ?? '');
+  }
+
+  if (typeof content === 'string' || typeof content === 'number') {
+    return String(content);
+  }
+
+  if (typeof content === 'object' && content !== null && 'label' in content) {
+    return String((content as { label: unknown }).label);
+  }
+
+  return String(id ?? '');
+}
+
+// Текст для поиска: лейбл (option) + caption + description — паритет с легаси `useSearch`,
+// который матчил запрос по всем трём полям контента, а не только по лейблу.
+export function extractSearchText(item: WithIdContent): string {
+  const parts = [extractLabel(item)];
+  const { content } = item;
+
+  if (content && typeof content === 'object') {
+    const c = content as { caption?: unknown; description?: unknown };
+
+    if (typeof c.caption === 'string') {
+      parts.push(c.caption);
+    }
+
+    if (typeof c.description === 'string') {
+      parts.push(c.description);
+    }
+  }
+
+  return parts.join(' ');
+}
+
+// Цвет чипа выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Берётся с самого item'а (additive: потребитель задаёт `appearance` на элементе items).
+export function extractAppearance(item?: WithIdContent): TagAppearance | undefined {
+  const a = item?.appearance;
+
+  return typeof a === 'string' ? (a as TagAppearance) : undefined;
+}
+
+export function flatten(items: ItemProps[]): WithIdContent[] {
+  const out: WithIdContent[] = [];
+
+  for (const item of items) {
+    out.push(item as WithIdContent);
+
+    if ('items' in item && Array.isArray(item.items)) {
+      out.push(...flatten(item.items as ItemProps[]));
+    }
+  }
+
+  return out;
+}
+
+export function findItem(items: ItemProps[], id: ItemId): WithIdContent | undefined {
+  for (const item of flatten(items)) {
+    if (item.id === id) {
+      return item;
+    }
+  }
+
+  return undefined;
+}
+
+// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
+// Пример: query=`lge` matches `Large` (L → r → arg → e).
+export function isFuzzyMatch(haystack: string, needle: string): boolean {
+  if (!needle) {
+    return true;
+  }
+
+  let i = 0;
+
+  for (const ch of haystack) {
+    if (ch === needle[i]) {
+      i += 1;
+
+      if (i === needle.length) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function filterItems(items: ItemProps[], query: string, fuzzy: boolean): ItemProps[] {
+  if (!query) {
+    return items;
+  }
+
+  const q = query.toLowerCase();
+
+  const matches = (item: ItemProps): boolean => {
+    const text = extractSearchText(item as WithIdContent).toLowerCase();
+
+    return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+  };
+
+  const walk = (list: ItemProps[]): ItemProps[] =>
+    list.flatMap(item => {
+      if ('items' in item && Array.isArray(item.items)) {
+        const filteredChildren = walk(item.items as ItemProps[]);
+
+        return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren } as ItemProps] : [];
+      }
+
+      return matches(item) ? [item] : [];
+    });
+
+  return walk(items);
+}
+
+export function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps {
+  return props.selection === SELECTION_MODE.Multiple;
+}