@cloud-ru/ds-fields 2.1.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -43,20 +43,20 @@
     "@cloud-ru/ds-bottom-sheet": "^1.1.1",
     "@cloud-ru/ds-button": "^1.0.2",
     "@cloud-ru/ds-calendar": "^1.0.13",
-    "@cloud-ru/ds-color-picker": "^1.0.5",
+    "@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-dropdown": "^1.0.8",
-    "@cloud-ru/ds-icons": "^1.1.0",
+    "@cloud-ru/ds-field-decorator": "^1.0.5",
     "@cloud-ru/ds-input-private": "^1.0.4",
+    "@cloud-ru/ds-icons": "^1.1.0",
     "@cloud-ru/ds-list": "^2.1.2",
     "@cloud-ru/ds-loader": "^1.0.1",
     "@cloud-ru/ds-materials": "^1.0.1",
     "@cloud-ru/ds-scroll": "^1.0.2",
     "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@cloud-ru/ds-tag": "^1.0.9",
+    "@cloud-ru/ds-slider": "^1.0.4",
+    "@cloud-ru/ds-tag": "^1.1.0",
     "@cloud-ru/ds-tooltip": "^1.0.4",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-slider": "^1.0.4"
+    "@cloud-ru/ds-utils": "^1.1.0"
   }
 }

package/src/components/FieldSelect/types.ts

@@ -1,5 +1,6 @@
 import { FieldDecoratorProps, ValidationState } from '@cloud-ru/ds-field-decorator';
 import { DroplistProps, ItemId, ItemProps } from '@cloud-ru/ds-list';
+import { Appearance as TagAppearance } from '@cloud-ru/ds-tag';
 import { ValueOf } from '@cloud-ru/ds-utils';
 import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 
@@ -9,6 +10,14 @@ import { SELECTION_MODE } from './constants';
 /** Режим выбора FieldSelect: одно значение или несколько. */
 export type Selection = ValueOf<typeof SELECTION_MODE>;
 
+// ItemProps — union с рекурсивными группами, поэтому раздаём поле по всем веткам.
+type WithTagAppearance<T> = T extends { items: ItemProps[] }
+  ? Omit<T, 'items'> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[] }
+  : T & { appearance?: TagAppearance };
+
+/** Айтем дроплиста: айтем `@cloud-ru/ds-list` плюс `appearance` — цвет тега выбранного значения при `selection='multiple'`. */
+export type FieldSelectItem = WithTagAppearance<ItemProps>;
+
 type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
 
 type DroplistPassthrough = Pick<
@@ -48,11 +57,11 @@ type CommonSelectProps = FieldSelectDecoratorProps &
     /** CSS-класс оболочки поля */
     fieldClassName?: string;
     /** Список айтемов дроплиста (формат `@cloud-ru/ds-list`) */
-    items: ItemProps[];
+    items: FieldSelectItem[];
     /** Пресет-айтемы сверху (формат `@cloud-ru/ds-list`) */
-    pinTop?: ItemProps[];
+    pinTop?: FieldSelectItem[];
     /** Пресет-айтемы снизу (формат `@cloud-ru/ds-list`) */
-    pinBottom?: ItemProps[];
+    pinBottom?: FieldSelectItem[];
     /** Placeholder в триггере, когда нет выбранного значения */
     placeholder?: string;
     /** Иконка перед текстом */

package/src/components/FieldSelect/utils.ts

@@ -1,13 +1,13 @@
 import { Size } from '@cloud-ru/ds-field-decorator';
-import { ItemId, ItemProps } from '@cloud-ru/ds-list';
+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 { FieldSelectMultipleProps, FieldSelectProps } from './types';
+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?: unknown };
+export type WithIdContent = { id?: ItemId; content?: unknown; disabled?: boolean; appearance?: TagAppearance };
 
 export function extractLabel(item: WithIdContent): string {
   const { content, id } = item;
@@ -48,29 +48,27 @@ export function extractSearchText(item: WithIdContent): string {
   return parts.join(' ');
 }
 
-// Цвет чипа выбранного значения (multiple) — паритет с легаси `option.appearance`.
-// Берётся с самого item'а (additive: потребитель задаёт `appearance` на элементе items).
+// Цвет тега выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
 export function extractAppearance(item?: WithIdContent): TagAppearance | undefined {
-  const a = item?.appearance;
-
-  return typeof a === 'string' ? (a as TagAppearance) : undefined;
+  return typeof item?.appearance === 'string' ? item.appearance : undefined;
 }
 
-export function flatten(items: ItemProps[]): WithIdContent[] {
+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 ItemProps[]));
+      out.push(...flatten(item.items as FieldSelectItem[]));
     }
   }
 
   return out;
 }
 
-export function findItem(items: ItemProps[], id: ItemId): WithIdContent | undefined {
+export function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined {
   for (const item of flatten(items)) {
     if (item.id === id) {
       return item;
@@ -102,25 +100,25 @@ export function isFuzzyMatch(haystack: string, needle: string): boolean {
   return false;
 }
 
-export function filterItems(items: ItemProps[], query: string, fuzzy: boolean): ItemProps[] {
+export function filterItems(items: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[] {
   if (!query) {
     return items;
   }
 
   const q = query.toLowerCase();
 
-  const matches = (item: ItemProps): boolean => {
+  const matches = (item: FieldSelectItem): boolean => {
     const text = extractSearchText(item as WithIdContent).toLowerCase();
 
     return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
   };
 
-  const walk = (list: ItemProps[]): ItemProps[] =>
+  const walk = (list: FieldSelectItem[]): FieldSelectItem[] =>
     list.flatMap(item => {
       if ('items' in item && Array.isArray(item.items)) {
-        const filteredChildren = walk(item.items as ItemProps[]);
+        const filteredChildren = walk(item.items as FieldSelectItem[]);
 
-        return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren } as ItemProps] : [];
+        return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren } as FieldSelectItem] : [];
       }
 
       return matches(item) ? [item] : [];