@cloud-ru/ds-fields 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.2.0 (2026-09-03)
+
+### Features
+
+- **FF-8959:** type the tag appearance on field select items ([9e053d8](https://github.com/cloud-ru-tech/snack-v2/commit/9e053d847a629bfca81fc4c6eee9c51b507bb529))
+
 ## 2.1.3 (2026-09-02)
 
 ### Bug Fixes

package/README.md

@@ -460,7 +460,7 @@ export function Select() {
 | `iconBefore` | `ReactNode` | — | Иконка перед текстом |
 | `id` | `string` | — | HTML-атрибут `id` для input (и `for` у label) |
 | `innerRef` | `Ref<HTMLDivElement>` | — | Ref на корневой DOM-элемент |
-| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ItemProps` \| `ScrollProps` | — | Список айтемов дроплиста (формат `@cloud-ru/ds-list`) |
+| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `FieldSelectItem` \| `ScrollProps` | — | Список айтемов дроплиста (формат `@cloud-ru/ds-list`) |
 | `label` | `string` | — | Заголовок |
 | `labelFor` | `string` | — | HTML-атрибут `for` для `<label>` |
 | `labelTooltip` | `QuestionTooltipProps` | — | Подсказка (question-tooltip) у заголовка |
@@ -478,8 +478,8 @@ export function Select() {
 | `onKeyDown` | `((event: KeyboardEvent<HTMLInputElement>) => void)` | — | Колбек нажатия клавиши на input (вызывается после внутренней обработки навигации) |
 | `onOpenChange` | `DroplistProps` | — | Колбек смены открытия |
 | `open` | `DroplistProps` | — | Управляемое открытие дроплиста |
-| `pinBottom` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ItemProps` \| `ScrollProps` | — | Пресет-айтемы снизу (формат `@cloud-ru/ds-list`) |
-| `pinTop` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ItemProps` \| `ScrollProps` | — | Пресет-айтемы сверху (формат `@cloud-ru/ds-list`) |
+| `pinBottom` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `FieldSelectItem` \| `ScrollProps` | — | Пресет-айтемы снизу (формат `@cloud-ru/ds-list`) |
+| `pinTop` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `FieldSelectItem` \| `ScrollProps` | — | Пресет-айтемы сверху (формат `@cloud-ru/ds-list`) |
 | `placeholder` | `string` | — | Placeholder в триггере, когда нет выбранного значения |
 | `placement` | `"bottom"` \| `"bottom-end"` \| `"bottom-start"` \| `"left"` \| `"left-end"` \| `"left-start"` \| `"right"` \| `"right-end"` \| `"right-start"` \| `"top"` \| `"top-end"` \| `"top-start"` | — | Placement дроплиста |
 | `postfix` | `ReactNode` | — | Постфикс — текст или нода после значения (Figma `postfix`) |
@@ -514,6 +514,8 @@ export function Select() {
 | `mobile` | `any` | — |  |
 | `tablet` | `any` | — |  |
 
+- `FieldSelectItem` = `({ 'data-test-id'?: string; } & AriaAttributes & { beforeContent?: ReactNode; afterContent?: ReactNode; content?: ItemContentProps | ReactNode; onClick?(e: MouseEvent<HTMLElement>): void; onMouseDown?(e: MouseEvent<HTMLElement>): void; onKeyDown?(e: KeyboardEvent<HTMLElement>): void; onFocus?(e: FocusEvent<HTMLElement>): void; onBlur?(e: FocusEvent<HTMLElement>): void; id?: ItemId; disabled?: boolean; hidden?: boolean; itemRef?: RefObject<HTMLElement>; className?: string; inactive?: boolean; switch?: boolean; showSwitchIcon?: boolean; itemWrapRender?(item: ReactNode): ReactNode; checked?: boolean; } & { appearance?: TagAppearance; }) | (Omit<GroupItem, "items"> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[]; }) | (Omit<GroupSelectItem, "items"> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[]; }) | (Omit<NextListItem, "items"> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[]; }) | (Omit<AccordionItem, "items"> & { appearance?: TagAppearance; items: WithTagAppearance<ItemProps>[]; })`
+
 ## FieldSlider
 
 ```tsx

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

@@ -1,11 +1,22 @@
 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';
 import { FieldLayoutPresets } from '../../hooks';
 import { SELECTION_MODE } from './constants';
 /** Режим выбора FieldSelect: одно значение или несколько. */
 export type Selection = ValueOf<typeof SELECTION_MODE>;
+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<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
     /**
@@ -29,11 +40,11 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     /** 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/dist/cjs/components/FieldSelect/utils.d.ts

@@ -1,19 +1,19 @@
 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 { FieldSelectMultipleProps, FieldSelectProps } from './types';
+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?: unknown;
+    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: ItemProps[]): WithIdContent[];
-export declare function findItem(items: ItemProps[], id: ItemId): WithIdContent | 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: ItemProps[], query: string, fuzzy: boolean): ItemProps[];
+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

@@ -40,11 +40,10 @@ function extractSearchText(item) {
     }
     return parts.join(' ');
 }
-// Цвет чипа выбранного значения (multiple) — паритет с легаси `option.appearance`.
-// Берётся с самого item'а (additive: потребитель задаёт `appearance` на элементе items).
+// Цвет тега выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
 function extractAppearance(item) {
-    const a = item?.appearance;
-    return typeof a === 'string' ? a : undefined;
+    return typeof item?.appearance === 'string' ? item.appearance : undefined;
 }
 function flatten(items) {
     const out = [];

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

@@ -1,11 +1,22 @@
 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';
 import { FieldLayoutPresets } from '../../hooks/index.js';
 import { SELECTION_MODE } from './constants.js';
 /** Режим выбора FieldSelect: одно значение или несколько. */
 export type Selection = ValueOf<typeof SELECTION_MODE>;
+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<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
     /**
@@ -29,11 +40,11 @@ type CommonSelectProps = FieldSelectDecoratorProps & DroplistPassthrough & {
     /** 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/dist/esm/components/FieldSelect/utils.d.ts

@@ -1,19 +1,19 @@
 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 { FieldSelectMultipleProps, FieldSelectProps } from './types.js';
+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?: unknown;
+    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: ItemProps[]): WithIdContent[];
-export declare function findItem(items: ItemProps[], id: ItemId): WithIdContent | 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: ItemProps[], query: string, fuzzy: boolean): ItemProps[];
+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

@@ -29,11 +29,10 @@ export function extractSearchText(item) {
     }
     return parts.join(' ');
 }
-// Цвет чипа выбранного значения (multiple) — паритет с легаси `option.appearance`.
-// Берётся с самого item'а (additive: потребитель задаёт `appearance` на элементе items).
+// Цвет тега выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
 export function extractAppearance(item) {
-    const a = item?.appearance;
-    return typeof a === 'string' ? a : undefined;
+    return typeof item?.appearance === 'string' ? item.appearance : undefined;
 }
 export function flatten(items) {
     const out = [];