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

package/dist/esm/components/FieldSelect/types.d.ts

@@ -4,9 +4,30 @@ import { Appearance as TagAppearance } from '@cloud-ru/ds-tag';
 import { ValueOf } from '@cloud-ru/ds-utils';
 import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 import { FieldLayoutPresets } from '../../hooks/index.js';
-import { SELECTION_MODE } from './constants.js';
+import { ADD_CUSTOM_OPTION_TRIGGER, ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE, ADD_CUSTOM_OPTION_TRIGGERS_SINGLE, SELECTION_MODE } from './constants.js';
 /** Режим выбора 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[];
+};
 type WithTagAppearance<T> = T extends {
     items: ItemProps[];
 } ? Omit<T, 'items'> & {
@@ -98,6 +119,8 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     autocomplete?: boolean;
     /**
      * Зафиксировать введённый текст как новый выбор по `Enter` (создание опции «на лету»).
+     *
+     * @deprecated Используйте `allowCustomOption`. `true` эквивалентен `allowCustomOption` с триггером `enter`.
      * @default false
      */
     addOptionByEnter?: boolean;
@@ -154,7 +177,7 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     /** Тестовый id корня */
     'data-test-id'?: string;
 };
-export type FieldSelectSingleProps = CommonSelectProps & {
+export type FieldSelectSingleProps = CommonSelectProps & CustomOptionProps<FieldSelectSingleAddCustomOptionTrigger> & {
     /** Режим выбора. По умолчанию `'single'`. */
     selection?: typeof SELECTION_MODE.Single;
     /** Управляемое значение. Пустая строка трактуется как «значение не выбрано». */
@@ -169,7 +192,7 @@ export type FieldSelectSingleProps = CommonSelectProps & {
      */
     closeDroplistOnItemClick?: boolean;
 };
-export type FieldSelectMultipleProps = CommonSelectProps & {
+export type FieldSelectMultipleProps = CommonSelectProps & CustomOptionProps<FieldSelectMultipleAddCustomOptionTrigger> & {
     /** Режим выбора */
     selection: typeof SELECTION_MODE.Multiple;
     /** Управляемые значения */

package/dist/esm/components/FieldSelect/utils/customOption.d.ts

@@ -0,0 +1,21 @@
+import { FieldSelectAddCustomOptionTrigger, FieldSelectMultipleAddCustomOptionTrigger } from '../types.js';
+/**
+ * Сопоставляет клавишу с триггером кастомной опции (`enter` / `space` / `comma`).
+ * Сначала `KeyboardEvent.code`, затем `key` — если `code` пустой или не из словаря (`','` без `Comma`).
+ */
+export declare function getCustomOptionTriggerByCode(code: string, key?: string): FieldSelectMultipleAddCustomOptionTrigger | undefined;
+export declare function shouldHandleCustomOptionTrigger(trigger: FieldSelectAddCustomOptionTrigger | undefined, availableTriggers: readonly FieldSelectAddCustomOptionTrigger[]): trigger is FieldSelectAddCustomOptionTrigger;
+export declare function resolveAddCustomOptionTriggers(params: {
+    allowCustomOption: boolean;
+    addCustomOptionTriggers: readonly FieldSelectAddCustomOptionTrigger[] | undefined;
+    addOptionByEnter: boolean;
+    defaultTriggers: readonly FieldSelectAddCustomOptionTrigger[];
+}): FieldSelectAddCustomOptionTrigger[];
+/** Фокус ушёл на дроплист, футер или postfix — кастомную опцию на blur фиксировать не нужно. */
+export declare function isCustomOptionBlurInsideField(relatedTarget: EventTarget | null, nodes: (Node | null | undefined)[]): boolean;
+/** Клик снаружи закрывает список, не снимая фокус с input — blur не придёт. */
+export declare function shouldCommitCustomOptionOnClose(params: {
+    skip: boolean;
+    inputElement: Element | null;
+    activeElement: Element | null;
+}): boolean;

package/dist/esm/components/FieldSelect/utils/customOption.js

@@ -0,0 +1,48 @@
+import { ADD_CUSTOM_OPTION_TRIGGER } from '../constants.js';
+/**
+ * Сопоставляет клавишу с триггером кастомной опции (`enter` / `space` / `comma`).
+ * Сначала `KeyboardEvent.code`, затем `key` — если `code` пустой или не из словаря (`','` без `Comma`).
+ */
+export function getCustomOptionTriggerByCode(code, key) {
+    switch (code) {
+        case 'Enter':
+            return ADD_CUSTOM_OPTION_TRIGGER.Enter;
+        case 'Space':
+            return ADD_CUSTOM_OPTION_TRIGGER.Space;
+        case 'Comma':
+            return ADD_CUSTOM_OPTION_TRIGGER.Comma;
+        default:
+            break;
+    }
+    switch (key) {
+        case 'Enter':
+            return ADD_CUSTOM_OPTION_TRIGGER.Enter;
+        case ' ':
+            return ADD_CUSTOM_OPTION_TRIGGER.Space;
+        case ',':
+            return ADD_CUSTOM_OPTION_TRIGGER.Comma;
+        default:
+            return undefined;
+    }
+}
+export function shouldHandleCustomOptionTrigger(trigger, availableTriggers) {
+    return trigger !== undefined && availableTriggers.includes(trigger);
+}
+export function resolveAddCustomOptionTriggers(params) {
+    if (params.allowCustomOption) {
+        const source = params.addCustomOptionTriggers !== undefined ? params.addCustomOptionTriggers : params.defaultTriggers;
+        return source.filter(trigger => params.defaultTriggers.includes(trigger));
+    }
+    if (params.addOptionByEnter) {
+        return [ADD_CUSTOM_OPTION_TRIGGER.Enter];
+    }
+    return [];
+}
+/** Фокус ушёл на дроплист, футер или postfix — кастомную опцию на blur фиксировать не нужно. */
+export function isCustomOptionBlurInsideField(relatedTarget, nodes) {
+    return relatedTarget instanceof Node && nodes.some(node => Boolean(node?.contains(relatedTarget)));
+}
+/** Клик снаружи закрывает список, не снимая фокус с input — blur не придёт. */
+export function shouldCommitCustomOptionOnClose(params) {
+    return !params.skip && params.activeElement !== null && params.activeElement === params.inputElement;
+}

package/dist/esm/components/FieldSelect/utils/extract.d.ts

@@ -0,0 +1,11 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { Appearance as TagAppearance } from '@cloud-ru/ds-tag';
+export type WithIdContent = {
+    id?: ItemId;
+    content?: unknown;
+    disabled?: boolean;
+    appearance?: TagAppearance;
+};
+export declare function extractLabel(item: WithIdContent): string;
+export declare function extractSearchText(item: WithIdContent): string;
+export declare function extractAppearance(item?: WithIdContent): TagAppearance | undefined;

package/dist/esm/components/FieldSelect/utils/extract.js

@@ -0,0 +1,34 @@
+export function extractLabel(item) {
+    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.label);
+    }
+    return String(id ?? '');
+}
+// Текст для поиска: лейбл (option) + caption + description — паритет с легаси `useSearch`,
+// который матчил запрос по всем трём полям контента, а не только по лейблу.
+export function extractSearchText(item) {
+    const parts = [extractLabel(item)];
+    const { content } = item;
+    if (content && typeof content === 'object') {
+        const c = content;
+        if (typeof c.caption === 'string') {
+            parts.push(c.caption);
+        }
+        if (typeof c.description === 'string') {
+            parts.push(c.description);
+        }
+    }
+    return parts.join(' ');
+}
+// Цвет тега выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
+export function extractAppearance(item) {
+    return typeof item?.appearance === 'string' ? item.appearance : undefined;
+}

package/dist/esm/components/FieldSelect/utils/filter.d.ts

@@ -0,0 +1,3 @@
+import { FieldSelectItem } from '../types.js';
+export declare function isFuzzyMatch(haystack: string, needle: string): boolean;
+export declare function filterItems(items: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[];

package/dist/esm/components/FieldSelect/utils/filter.js

@@ -0,0 +1,36 @@
+import { extractSearchText } from './extract.js';
+// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
+// Пример: query=`lge` matches `Large` (L → r → arg → e).
+export function isFuzzyMatch(haystack, needle) {
+    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, query, fuzzy) {
+    if (!query) {
+        return items;
+    }
+    const q = query.toLowerCase();
+    const matches = (item) => {
+        const text = extractSearchText(item).toLowerCase();
+        return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+    };
+    const walk = (list) => list.flatMap(item => {
+        if ('items' in item && Array.isArray(item.items)) {
+            const filteredChildren = walk(item.items);
+            return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren }] : [];
+        }
+        return matches(item) ? [item] : [];
+    });
+    return walk(items);
+}

package/dist/esm/components/FieldSelect/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './customOption.js';
+export * from './extract.js';
+export * from './filter.js';
+export * from './items.js';
+export * from './selection.js';
+export * from './tagSize.js';

package/dist/esm/components/FieldSelect/utils/index.js

@@ -0,0 +1,6 @@
+export * from './customOption.js';
+export * from './extract.js';
+export * from './filter.js';
+export * from './items.js';
+export * from './selection.js';
+export * from './tagSize.js';

package/dist/esm/components/FieldSelect/utils/items.d.ts

@@ -0,0 +1,9 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { FieldSelectItem } from '../types.js';
+import { WithIdContent } from './extract.js';
+export declare function flatten(items: FieldSelectItem[]): WithIdContent[];
+export declare function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined;
+/** Айтем для выбранного значения, которого нет в `items` (кастомная опция, ленивая подгрузка). */
+export declare function createPlaceholderItem(id: ItemId): FieldSelectItem;
+/** Выбранные id, которых нет в дереве айтемов — в дроплист их нужно добавить отдельно. */
+export declare function getMissingSelectedItems(selectedIds: ItemId[], allItems: FieldSelectItem[]): FieldSelectItem[];

package/dist/esm/components/FieldSelect/utils/items.js

@@ -0,0 +1,41 @@
+export function flatten(items) {
+    const out = [];
+    for (const item of items) {
+        out.push(item);
+        if ('items' in item && Array.isArray(item.items)) {
+            out.push(...flatten(item.items));
+        }
+    }
+    return out;
+}
+export function findItem(items, id) {
+    for (const item of flatten(items)) {
+        if (item.id === id) {
+            return item;
+        }
+    }
+    return undefined;
+}
+/** Айтем для выбранного значения, которого нет в `items` (кастомная опция, ленивая подгрузка). */
+export function createPlaceholderItem(id) {
+    return { id, content: { label: String(id) } };
+}
+/** Выбранные id, которых нет в дереве айтемов — в дроплист их нужно добавить отдельно. */
+export function getMissingSelectedItems(selectedIds, allItems) {
+    if (selectedIds.length === 0) {
+        return [];
+    }
+    const existingIds = new Set();
+    for (const item of flatten(allItems)) {
+        if (item.id !== undefined) {
+            existingIds.add(item.id);
+        }
+    }
+    const missing = [];
+    for (const id of selectedIds) {
+        if (id !== '' && !existingIds.has(id)) {
+            missing.push(createPlaceholderItem(id));
+        }
+    }
+    return missing;
+}

package/dist/esm/components/FieldSelect/utils/selection.d.ts

@@ -0,0 +1,11 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { FieldSelectMultipleProps, Selection } from '../types.js';
+export declare function isMultiple(props: {
+    selection?: Selection;
+}): props is FieldSelectMultipleProps;
+/** Выбранные id в нормализованном виде: массив и для `single`, и для `multiple`. */
+export declare function getSelectedIds(params: {
+    multiple: boolean;
+    multipleValue: ItemId[];
+    singleValue: ItemId | undefined;
+}): ItemId[];

package/dist/esm/components/FieldSelect/utils/selection.js

@@ -0,0 +1,14 @@
+import { SELECTION_MODE } from '../constants.js';
+export function isMultiple(props) {
+    return props.selection === SELECTION_MODE.Multiple;
+}
+/** Выбранные id в нормализованном виде: массив и для `single`, и для `multiple`. */
+export function getSelectedIds(params) {
+    if (params.multiple) {
+        return params.multipleValue;
+    }
+    if (params.singleValue === undefined) {
+        return [];
+    }
+    return [params.singleValue];
+}

package/dist/esm/components/FieldSelect/utils/tagSize.d.ts

@@ -0,0 +1,4 @@
+import { Size } from '@cloud-ru/ds-field-decorator';
+import { Size as TagSize } from '@cloud-ru/ds-tag';
+/** Соответствие размера поля размеру чипа выбранного значения (`selection='multiple'`). */
+export declare const TAG_SIZE_MAP: Record<Size, TagSize>;

package/dist/esm/components/FieldSelect/utils/tagSize.js

@@ -0,0 +1,2 @@
+/** Соответствие размера поля размеру чипа выбранного значения (`selection='multiple'`). */
+export const TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };