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

package/src/components/FieldSelect/utils/customOption.ts

@@ -0,0 +1,77 @@
+import { ADD_CUSTOM_OPTION_TRIGGER } from '../constants';
+import { FieldSelectAddCustomOptionTrigger, FieldSelectMultipleAddCustomOptionTrigger } from '../types';
+
+/**
+ * Сопоставляет клавишу с триггером кастомной опции (`enter` / `space` / `comma`).
+ * Сначала `KeyboardEvent.code`, затем `key` — если `code` пустой или не из словаря (`','` без `Comma`).
+ */
+export function getCustomOptionTriggerByCode(
+  code: string,
+  key?: string,
+): FieldSelectMultipleAddCustomOptionTrigger | undefined {
+  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: FieldSelectAddCustomOptionTrigger | undefined,
+  availableTriggers: readonly FieldSelectAddCustomOptionTrigger[],
+): trigger is FieldSelectAddCustomOptionTrigger {
+  return trigger !== undefined && availableTriggers.includes(trigger);
+}
+
+export function resolveAddCustomOptionTriggers(params: {
+  allowCustomOption: boolean;
+  addCustomOptionTriggers: readonly FieldSelectAddCustomOptionTrigger[] | undefined;
+  addOptionByEnter: boolean;
+  defaultTriggers: readonly FieldSelectAddCustomOptionTrigger[];
+}): FieldSelectAddCustomOptionTrigger[] {
+  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: EventTarget | null,
+  nodes: (Node | null | undefined)[],
+): boolean {
+  return relatedTarget instanceof Node && nodes.some(node => Boolean(node?.contains(relatedTarget)));
+}
+
+/** Клик снаружи закрывает список, не снимая фокус с input — blur не придёт. */
+export function shouldCommitCustomOptionOnClose(params: {
+  skip: boolean;
+  inputElement: Element | null;
+  activeElement: Element | null;
+}): boolean {
+  return !params.skip && params.activeElement !== null && params.activeElement === params.inputElement;
+}

package/src/components/FieldSelect/utils/extract.ts

@@ -0,0 +1,49 @@
+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 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`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
+export function extractAppearance(item?: WithIdContent): TagAppearance | undefined {
+  return typeof item?.appearance === 'string' ? item.appearance : undefined;
+}

package/src/components/FieldSelect/utils/filter.ts

@@ -0,0 +1,51 @@
+import { FieldSelectItem } from '../types';
+import { extractSearchText, WithIdContent } from './extract';
+
+// 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: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[] {
+  if (!query) {
+    return items;
+  }
+
+  const q = query.toLowerCase();
+
+  const matches = (item: FieldSelectItem): boolean => {
+    const text = extractSearchText(item as WithIdContent).toLowerCase();
+
+    return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+  };
+
+  const walk = (list: FieldSelectItem[]): FieldSelectItem[] =>
+    list.flatMap(item => {
+      if ('items' in item && Array.isArray(item.items)) {
+        const filteredChildren = walk(item.items as FieldSelectItem[]);
+
+        return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren } as FieldSelectItem] : [];
+      }
+
+      return matches(item) ? [item] : [];
+    });
+
+  return walk(items);
+}

package/src/components/FieldSelect/utils/index.ts

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

package/src/components/FieldSelect/utils/items.ts

@@ -0,0 +1,58 @@
+import { ItemId } from '@cloud-ru/ds-list';
+
+import { FieldSelectItem } from '../types';
+import { WithIdContent } from './extract';
+
+export function flatten(items: FieldSelectItem[]): 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 FieldSelectItem[]));
+    }
+  }
+
+  return out;
+}
+
+export function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined {
+  for (const item of flatten(items)) {
+    if (item.id === id) {
+      return item;
+    }
+  }
+
+  return undefined;
+}
+
+/** Айтем для выбранного значения, которого нет в `items` (кастомная опция, ленивая подгрузка). */
+export function createPlaceholderItem(id: ItemId): FieldSelectItem {
+  return { id, content: { label: String(id) } };
+}
+
+/** Выбранные id, которых нет в дереве айтемов — в дроплист их нужно добавить отдельно. */
+export function getMissingSelectedItems(selectedIds: ItemId[], allItems: FieldSelectItem[]): FieldSelectItem[] {
+  if (selectedIds.length === 0) {
+    return [];
+  }
+
+  const existingIds = new Set<ItemId>();
+
+  for (const item of flatten(allItems)) {
+    if (item.id !== undefined) {
+      existingIds.add(item.id);
+    }
+  }
+
+  const missing: FieldSelectItem[] = [];
+
+  for (const id of selectedIds) {
+    if (id !== '' && !existingIds.has(id)) {
+      missing.push(createPlaceholderItem(id));
+    }
+  }
+
+  return missing;
+}

package/src/components/FieldSelect/utils/selection.ts

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

package/src/components/FieldSelect/utils/tagSize.ts

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

package/dist/cjs/components/FieldSelect/utils.d.ts

@@ -1,19 +0,0 @@
-import { Size } from '@cloud-ru/ds-field-decorator';
-import { ItemId } from '@cloud-ru/ds-list';
-import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
-import { FieldSelectItem, FieldSelectMultipleProps, FieldSelectProps } from './types';
-export declare const TAG_SIZE_MAP: Record<Size, TagSize>;
-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;
-export declare function flatten(items: FieldSelectItem[]): WithIdContent[];
-export declare function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined;
-export declare function isFuzzyMatch(haystack: string, needle: string): boolean;
-export declare function filterItems(items: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[];
-export declare function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps;

package/dist/cjs/components/FieldSelect/utils.js

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAG_SIZE_MAP = void 0;
-exports.extractLabel = extractLabel;
-exports.extractSearchText = extractSearchText;
-exports.extractAppearance = extractAppearance;
-exports.flatten = flatten;
-exports.findItem = findItem;
-exports.isFuzzyMatch = isFuzzyMatch;
-exports.filterItems = filterItems;
-exports.isMultiple = isMultiple;
-const constants_1 = require("./constants");
-exports.TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };
-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`,
-// который матчил запрос по всем трём полям контента, а не только по лейблу.
-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 часто приходят из ответа бэкенда.
-function extractAppearance(item) {
-    return typeof item?.appearance === 'string' ? item.appearance : undefined;
-}
-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;
-}
-function findItem(items, id) {
-    for (const item of flatten(items)) {
-        if (item.id === id) {
-            return item;
-        }
-    }
-    return undefined;
-}
-// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
-// Пример: query=`lge` matches `Large` (L → r → arg → e).
-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;
-}
-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);
-}
-function isMultiple(props) {
-    return props.selection === constants_1.SELECTION_MODE.Multiple;
-}

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

@@ -1,19 +0,0 @@
-import { Size } from '@cloud-ru/ds-field-decorator';
-import { ItemId } from '@cloud-ru/ds-list';
-import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
-import { FieldSelectItem, FieldSelectMultipleProps, FieldSelectProps } from './types.js';
-export declare const TAG_SIZE_MAP: Record<Size, TagSize>;
-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;
-export declare function flatten(items: FieldSelectItem[]): WithIdContent[];
-export declare function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined;
-export declare function isFuzzyMatch(haystack: string, needle: string): boolean;
-export declare function filterItems(items: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[];
-export declare function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps;

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

@@ -1,92 +0,0 @@
-import { SELECTION_MODE } from './constants.js';
-export const TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };
-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;
-}
-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;
-}
-// 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);
-}
-export function isMultiple(props) {
-    return props.selection === SELECTION_MODE.Multiple;
-}

package/src/components/FieldSelect/utils.ts

@@ -1,132 +0,0 @@
-import { Size } from '@cloud-ru/ds-field-decorator';
-import { ItemId } from '@cloud-ru/ds-list';
-import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
-
-import { SELECTION_MODE } from './constants';
-import { FieldSelectItem, 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?: TagAppearance };
-
-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`.
-// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
-export function extractAppearance(item?: WithIdContent): TagAppearance | undefined {
-  return typeof item?.appearance === 'string' ? item.appearance : undefined;
-}
-
-export function flatten(items: FieldSelectItem[]): 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 FieldSelectItem[]));
-    }
-  }
-
-  return out;
-}
-
-export function findItem(items: FieldSelectItem[], 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: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[] {
-  if (!query) {
-    return items;
-  }
-
-  const q = query.toLowerCase();
-
-  const matches = (item: FieldSelectItem): boolean => {
-    const text = extractSearchText(item as WithIdContent).toLowerCase();
-
-    return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
-  };
-
-  const walk = (list: FieldSelectItem[]): FieldSelectItem[] =>
-    list.flatMap(item => {
-      if ('items' in item && Array.isArray(item.items)) {
-        const filteredChildren = walk(item.items as FieldSelectItem[]);
-
-        return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren } as FieldSelectItem] : [];
-      }
-
-      return matches(item) ? [item] : [];
-    });
-
-  return walk(items);
-}
-
-export function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps {
-  return props.selection === SELECTION_MODE.Multiple;
-}