@snack-uikit/chips 0.12.9 → 0.13.0

package/dist/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -0,0 +1,87 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Droplist } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DROPLIST_SIZE_MAP } from '../constants';
+import { useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
+    if (value.length === 0 || value.length === total) {
+        return allLabel;
+    }
+    if (value.length === 1) {
+        return value[0].label;
+    }
+    return `${value.length.toString()}/${total}`;
+};
+export function ChipChoiceMultiple(_a) {
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton"]);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const flattenOptions = useMemo(() => {
+        const { flattenOptions } = kindFlattenOptions({ options });
+        return flattenOptions;
+    }, [options]);
+    const [searchValue = '', setSearchValue] = useState('');
+    const { t } = useLocale('Chips');
+    const [open, setOpen] = useState(false);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+    const selectedOptions = useMemo(() => (value && value.length ? value.map(id => flattenOptions[id]).filter(Boolean) : []), [flattenOptions, value]);
+    const valueToRender = valueRender
+        ? valueRender(selectedOptions)
+        : defaultMultiValueLabelFormatter({
+            value: selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [],
+            total: Object.keys(flattenOptions).length,
+            allLabel: t('allLabel'),
+        });
+    const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+    const items = useMemo(() => transformOptionsToItems(result, contentRender), [contentRender, result]);
+    const clearValue = () => setValue([]);
+    const chipRef = useRef(null);
+    const handleSelectionChange = useCallback((newValue) => {
+        if (newValue !== undefined) {
+            setValue(newValue);
+            setSearchValue('');
+        }
+    }, [setValue]);
+    useEffect(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    return (_jsx(Droplist, Object.assign({}, rest, { items: items, selection: {
+            value,
+            onChange: handleSelectionChange,
+            mode: 'multiple',
+        }, trigger: 'clickAndFocusVisible', placement: 'bottom-start', widthStrategy: 'gte', size: DROPLIST_SIZE_MAP[size], "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, open: open, triggerElemRef: chipRef, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+            }
+            setOpen(open);
+        }, scroll: true, className: dropDownClassName, search: searchable
+            ? {
+                value: searchValue,
+                onChange: setSearchValue,
+            }
+            : undefined, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, showClearButton: showClearButton && !(Array.isArray(value) && [0, Object.keys(flattenOptions).length].includes(value.length)), valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
+}

package/dist/components/ChipChoice/components/ChipChoiceSingle.d.ts

@@ -1,14 +1,8 @@
-import { ChipChoiceCommonProps, FilterOption } from '../types';
-export type ChipChoiceSingleProps = ChipChoiceCommonProps & {
-    /** Массив опций */
-    options: FilterOption[];
-    /** Значение компонента */
-    value?: string;
-    /** Значение компонента по умолчанию */
-    defaultValue?: string;
-    /** Колбек смены значения */
-    onChange?(value: string): void;
-    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
-    valueFormatter?(option?: FilterOption): string;
+import { ItemId } from '@snack-uikit/list';
+import { ChipChoiceSingleProps, ContentRenderProps } from '../types';
+export type ChipChoiceSingleValueFormatterProps = {
+    label?: ItemId;
+    allLabel?: string;
 };
-export declare function ChipChoiceSingle({ value, defaultValue, options, onChange, valueFormatter, size, 'data-test-id': dataTestId, ...rest }: ChipChoiceSingleProps): import("react/jsx-runtime").JSX.Element;
+export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceSingle.js

@@ -10,29 +10,71 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useMemo } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-import { Droplist } from '@snack-uikit/droplist';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Droplist } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
-import { SIZE } from '../../../constants';
-import { defaultSingleValueFormatter, normalizeValueForSingleChoice } from '../utils';
-import { ChipChoiceCustom } from './ChipChoiceCustom';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DROPLIST_SIZE_MAP } from '../constants';
+import { useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+export function defaultSingleValueFormatter({ label, allLabel }) {
+    return label !== null && label !== void 0 ? label : allLabel;
+}
 export function ChipChoiceSingle(_a) {
-    var { value, defaultValue, options, onChange, valueFormatter, size = SIZE.S, 'data-test-id': dataTestId } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueFormatter", "size", 'data-test-id']);
-    const [selectedValue, setSelectedValue] = useUncontrolledProp(normalizeValueForSingleChoice(options, value), normalizeValueForSingleChoice(options, defaultValue), onChange);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName"]);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const flattenOptions = useMemo(() => {
+        const { flattenOptions } = kindFlattenOptions({ options });
+        return flattenOptions;
+    }, [options]);
     const { t } = useLocale('Chips');
-    const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
-    const valueToRender = valueFormatter
-        ? valueFormatter(selectedOption)
-        : defaultSingleValueFormatter({ value: selectedOption, allLabel: t('allLabel') });
-    const clearValue = () => setSelectedValue(undefined);
-    return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, "data-test-id": dataTestId, size: size }, rest, { children: ({ handleDroplistItemKeyDown, closeDroplist }) => options.map((_a) => {
-            var { label, value } = _a, rest = __rest(_a, ["label", "value"]);
-            const onChangeHandler = () => {
-                setSelectedValue(value);
-                closeDroplist();
-            };
-            return (_createElement(Droplist.ItemSingle, Object.assign({}, rest, { key: value, option: label, checked: selectedValue === value, onChange: onChangeHandler, onKeyDown: handleDroplistItemKeyDown, "data-test-id": dataTestId && `${dataTestId}__option` })));
-        }) })));
+    const [open, setOpen] = useState(false);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+    const selectedOption = useMemo(() => (value ? flattenOptions[value] : {}), [flattenOptions, value]);
+    const [searchValue, setSearchValue] = useState('');
+    const valueToRender = valueRender
+        ? valueRender(selectedOption)
+        : defaultSingleValueFormatter({ label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label, allLabel: t('allLabel') });
+    const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+    const items = useMemo(() => transformOptionsToItems(result, contentRender), [contentRender, result]);
+    const clearValue = () => setValue(undefined);
+    const chipRef = useRef(null);
+    const handleSelectionChange = useCallback((newValue) => {
+        var _a;
+        if (newValue !== undefined) {
+            (_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            setOpen(false);
+            setValue(newValue);
+            setSearchValue('');
+        }
+    }, [setSearchValue, setValue]);
+    useEffect(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    return (_jsx(Droplist, Object.assign({}, rest, { items: items, selection: {
+            value,
+            onChange: handleSelectionChange,
+            mode: 'single',
+        }, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, size: DROPLIST_SIZE_MAP[size], trigger: 'click', placement: 'bottom-start', className: dropDownClassName, widthStrategy: 'gte', open: open, triggerElemRef: chipRef, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+            }
+            setOpen(open);
+        }, scroll: true, search: searchable
+            ? {
+                value: searchValue,
+                onChange: setSearchValue,
+            }
+            : undefined, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
 }

package/dist/components/ChipChoice/components/index.d.ts

@@ -1,5 +1,5 @@
 export * from './ChipChoiceCustom';
 export * from './ChipChoiceSingle';
-export * from './ChipChoiceMulti';
+export * from './ChipChoiceMultiple';
 export * from './ChipChoiceDate';
 export * from './ChipChoiceDateRange';

package/dist/components/ChipChoice/components/index.js

@@ -1,5 +1,5 @@
 export * from './ChipChoiceCustom';
 export * from './ChipChoiceSingle';
-export * from './ChipChoiceMulti';
+export * from './ChipChoiceMultiple';
 export * from './ChipChoiceDate';
 export * from './ChipChoiceDateRange';

package/dist/components/ChipChoice/constants.d.ts

@@ -1,5 +1,5 @@
 import { CalendarProps } from '@snack-uikit/calendar';
-import { DroplistProps } from '@snack-uikit/droplist';
+import { DroplistProps } from '@snack-uikit/list';
 import { Size } from '../../types';
 export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
     xs: "xxs";
@@ -10,8 +10,9 @@ export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
 export declare const CALENDAR_SIZE_MAP: Record<Size, CalendarProps['size']>;
 export declare const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']>;
 export declare const CHIP_CHOICE_TYPE: {
-    readonly Multi: "multi";
+    readonly Multiple: "multiple";
     readonly Date: "date";
     readonly DateRange: "date-range";
     readonly Single: "single";
+    readonly Custom: "custom";
 };

package/dist/components/ChipChoice/constants.js

@@ -18,8 +18,9 @@ export const DROPLIST_SIZE_MAP = {
     [SIZE.L]: 'l',
 };
 export const CHIP_CHOICE_TYPE = {
-    Multi: 'multi',
+    Multiple: 'multiple',
     Date: 'date',
     DateRange: 'date-range',
     Single: 'single',
+    Custom: 'custom',
 };

package/dist/components/ChipChoice/hooks.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEvent, KeyboardEventHandler } from 'react';
+import { AccordionOption, BaseOption, ContentRenderProps, FilterOption, NestListOption } from './types';
+type UseHandleOnKeyDownProps = {
+    setOpen(open: boolean): void;
+};
+export declare function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps): (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLDivElement>) => void;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useFuzzySearch<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[], minSearchInputLength?: number): (search: string) => FilterOption<T>[];
+export {};

package/dist/components/ChipChoice/hooks.js

@@ -0,0 +1,35 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+export function useHandleOnKeyDown({ setOpen }) {
+    return useCallback((onKeyDown) => (e) => {
+        if (e.code === 'Space') {
+            e.stopPropagation();
+        }
+        else {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        }
+        if (['ArrowDown'].includes(e.key)) {
+            e.preventDefault();
+            setOpen(true);
+        }
+        if (['ArrowUp'].includes(e.key)) {
+            e.preventDefault();
+            setOpen(false);
+        }
+        if (e.key === 'Tab') {
+            setOpen(false);
+        }
+    }, [setOpen]);
+}
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(options, flatMapOptions, minSearchInputLength) {
+    return useCallback((search) => {
+        const searcher = new FuzzySearch(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {});
+        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+            ? searcher.search(search)
+            : options;
+    }, [flatMapOptions, minSearchInputLength, options]);
+}

package/dist/components/ChipChoice/index.d.ts

@@ -1,10 +1,11 @@
-import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMulti, ChipChoiceMultiProps, ChipChoiceSingle, ChipChoiceSingleProps } from './components';
-export type { FilterOption } from './types';
-export type { ChipChoiceCustomProps, ChipChoiceMultiProps, ChipChoiceSingleProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, };
+import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMultiple, ChipChoiceSingle, CustomContentRenderProps } from './components';
+export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps } from './types';
+export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps };
 export declare namespace ChipChoice {
     const Custom: typeof ChipChoiceCustom;
     const Single: typeof ChipChoiceSingle;
-    const Multi: typeof ChipChoiceMulti;
+    const Multiple: typeof ChipChoiceMultiple;
     const Date: typeof ChipChoiceDate;
     const DateRange: typeof ChipChoiceDateRange;
 }
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/dist/components/ChipChoice/index.js

@@ -1,9 +1,10 @@
-import { ChipChoiceCustom, ChipChoiceDate, ChipChoiceDateRange, ChipChoiceMulti, ChipChoiceSingle, } from './components';
+import { ChipChoiceCustom, ChipChoiceDate, ChipChoiceDateRange, ChipChoiceMultiple, ChipChoiceSingle, } from './components';
 export var ChipChoice;
 (function (ChipChoice) {
     ChipChoice.Custom = ChipChoiceCustom;
     ChipChoice.Single = ChipChoiceSingle;
-    ChipChoice.Multi = ChipChoiceMulti;
+    ChipChoice.Multiple = ChipChoiceMultiple;
     ChipChoice.Date = ChipChoiceDate;
     ChipChoice.DateRange = ChipChoiceDateRange;
 })(ChipChoice || (ChipChoice = {}));
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/dist/components/ChipChoice/styles.module.css

@@ -1,4 +1,5 @@
-.label, .value{
+.label,
+.value{
   display:inline-flex;
   align-items:center;
 }
@@ -20,7 +21,7 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
-  background-color:var(--sys-neutral-background1-level, #fafafc);
+  background-color:var(--sys-neutral-background1-level, #fdfdff);
   border-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 .choiceChip .spinner{
@@ -117,7 +118,8 @@
   padding-right:var(--space-chips-label-layout-padding-l, 12px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip .label, .choiceChip .value{
+.choiceChip .label,
+.choiceChip .value{
   color:var(--sys-neutral-text-support, #656771);
 }
 .choiceChip .icon{
@@ -177,7 +179,8 @@
   background-color:var(--sys-neutral-background, #f1f2f6);
   border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
 }
-.choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
   color:var(--sys-neutral-text-light, #868892);
 }
 .choiceChip[data-loading]{
@@ -190,7 +193,8 @@
   align-items:center;
   justify-content:center;
 }
-.choiceChip[data-loading] .label, .choiceChip[data-loading] .value{
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
   color:var(--sys-neutral-text-support, #656771);
 }
 

package/dist/components/ChipChoice/types.d.ts

@@ -1,10 +1,31 @@
-import { MouseEventHandler } from 'react';
-import { DroplistProps, ItemSingleProps } from '@snack-uikit/droplist';
+import { MouseEventHandler, ReactNode } from 'react';
+import { DropdownProps } from '@snack-uikit/dropdown';
+import { BaseItemProps, DroplistProps, GroupItemProps, GroupSelectItemProps, ItemContentProps, ItemId, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { BaseChipProps, Size } from '../../types';
-export type FilterOption = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar'> & {
-    label: string;
-    value: string;
+export type AnyType = any;
+export type ContentRenderProps = Omit<ItemContentProps, 'option' | 'disabled'>;
+export type FilterOption<T extends ContentRenderProps = ContentRenderProps> = BaseOption<T> | AccordionOption<T> | GroupOption<T> | GroupSelectOption<T> | NestListOption<T>;
+export type BaseOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseItemProps, 'content' | 'id'> & {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+};
+export type AccordionOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseOption<T>, 'switch' | 'inactive' | 'value'> & {
+    id?: ItemId;
+    type: 'collapse';
+    options: FilterOption<T>[];
+};
+export type GroupOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type GroupSelectOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupSelectItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type NestListOption<T extends ContentRenderProps = ContentRenderProps> = Omit<NextListItemProps, 'items' | 'content'> & {
+    label: ItemId;
+    contentRenderProps?: T;
+    options: FilterOption<T>[];
 };
 export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     /** Размер */
@@ -14,7 +35,7 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     /** Отображение кнопки очистки значения @default true*/
     showClearButton?: boolean;
     /** Расположение выпадающего меню */
-    placement?: DroplistProps['placement'];
+    placement?: DropdownProps['placement'];
     /**
      * Стратегия управления шириной контейнера поповера
      * <br> - `auto` - соответствует ширине контента,
@@ -22,5 +43,32 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
      * <br> - `eq` - Equal, строго равен ширине таргета.
      * @default gte
      */
-    widthStrategy?: DroplistProps['widthStrategy'];
+    widthStrategy?: DropdownProps['widthStrategy'];
+    dropDownClassName?: string;
 }>;
+export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
+    options: FilterOption<T>[];
+    contentRender?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): ReactNode;
+    filterFn?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): boolean;
+    searchable?: boolean;
+} & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading'>;
+export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>): ReactNode;
+};
+export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionMultipleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>[]): ReactNode;
+};

package/dist/components/ChipChoice/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typeGuards';
+export * from './utils';

package/dist/components/ChipChoice/utils/index.js

@@ -0,0 +1,2 @@
+export * from './typeGuards';
+export * from './utils';

package/dist/components/ChipChoice/utils/options.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ItemId, ItemProps } from '@snack-uikit/list';
+import { ContentRenderProps, FilterOption } from '../types';
+export declare function transformOptionsToItems<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], contentRender?: (option: {
+    label: ItemId;
+    value?: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+}) => ReactNode): ItemProps[];

package/dist/components/ChipChoice/utils/options.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ItemContent } from '@snack-uikit/list';
+import { isAccordionOption, isGroupOption, isGroupSelectOption, isNextListOption } from './typeGuards';
+export function transformOptionsToItems(options, contentRender) {
+    return options.map(option => {
+        if (isAccordionOption(option) || isNextListOption(option)) {
+            const { label, options, id, contentRenderProps, disabled } = option, rest = __rest(option, ["label", "options", "id", "contentRenderProps", "disabled"]);
+            return Object.assign(Object.assign({}, rest), { id, content: contentRender ? (contentRender({ label, contentRenderProps })) : (_jsx(ItemContent, Object.assign({ option: label }, contentRenderProps, { disabled: disabled }))), items: transformOptionsToItems(options) });
+        }
+        if (isGroupSelectOption(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        if (isGroupOption(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        const _a = option, { label, value, contentRenderProps, disabled } = _a, rest = __rest(_a, ["label", "value", "contentRenderProps", "disabled"]);
+        return Object.assign(Object.assign({}, rest), { id: value, content: contentRender ? (contentRender({ label, contentRenderProps })) : (_jsx(ItemContent, Object.assign({ option: label }, contentRenderProps, { disabled: disabled }))) });
+    });
+}

package/dist/components/ChipChoice/utils/typeGuards.d.ts

@@ -0,0 +1,6 @@
+import { AccordionOption, AnyType, BaseOption, ContentRenderProps, GroupOption, GroupSelectOption, NestListOption } from '../types';
+export declare function isBaseOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is BaseOption<T>;
+export declare function isAccordionOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is AccordionOption<T>;
+export declare function isNextListOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is NestListOption<T>;
+export declare function isGroupOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupOption<T>;
+export declare function isGroupSelectOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupSelectOption<T>;

package/dist/components/ChipChoice/utils/typeGuards.js

@@ -0,0 +1,15 @@
+export function isBaseOption(option) {
+    return !('options' in option);
+}
+export function isAccordionOption(option) {
+    return option && 'options' in option && option['type'] === 'collapse';
+}
+export function isNextListOption(option) {
+    return option && 'options' in option && option['type'] === 'next-list';
+}
+export function isGroupOption(option) {
+    return option && 'options' in option && option['type'] === 'group';
+}
+export function isGroupSelectOption(option) {
+    return option && 'options' in option && option['type'] === 'group-select';
+}

package/dist/components/ChipChoice/utils/utils.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ItemId } from '@snack-uikit/list';
+import { ContentRenderProps, FilterOption } from '../types';
+export type FlattenOption<T extends ContentRenderProps = ContentRenderProps> = {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+    afterContent?: ReactNode;
+    beforeContent?: ReactNode;
+};
+type KindFlattenOptionsProps<T extends ContentRenderProps = ContentRenderProps> = {
+    options: FilterOption<T>[];
+};
+export declare function kindFlattenOptions<T extends ContentRenderProps = ContentRenderProps>({ options, }: KindFlattenOptionsProps<T>): {
+    flattenOptions: Record<string, FlattenOption<T>>;
+};
+export {};

package/dist/components/ChipChoice/utils/utils.js

@@ -0,0 +1,29 @@
+import { isBaseOption } from './typeGuards';
+export function kindFlattenOptions({ options, }) {
+    const flattenOptions = {};
+    function flatten(option) {
+        if (isBaseOption(option)) {
+            const { value, label, contentRenderProps, disabled, afterContent, beforeContent } = option;
+            flattenOptions[value] = {
+                value,
+                label,
+                contentRenderProps,
+                disabled,
+                afterContent,
+                beforeContent,
+            };
+            return;
+        }
+        const { options } = option;
+        for (let idx = 0; idx < options.length; idx++) {
+            flatten(options[idx]);
+        }
+        return;
+    }
+    for (let idx = 0; idx < options.length; idx++) {
+        flatten(options[idx]);
+    }
+    return {
+        flattenOptions,
+    };
+}

package/dist/components/ChipChoiceRow/components/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
     single: typeof import("../../ChipChoice/components").ChipChoiceSingle;
-    multi: typeof import("../../ChipChoice/components").ChipChoiceMulti;
+    multiple: typeof import("../../ChipChoice/components").ChipChoiceMultiple;
     date: typeof import("../../ChipChoice/components").ChipChoiceDate;
     "date-range": typeof import("../../ChipChoice/components").ChipChoiceDateRange;
+    custom: typeof import("../../ChipChoice/components").ChipChoiceCustom;
 };

package/dist/components/ChipChoiceRow/components/constants.js

@@ -2,7 +2,8 @@ import { ChipChoice } from '../../ChipChoice';
 import { CHIP_CHOICE_TYPE } from '../../ChipChoice/constants';
 export const MAP_CHIP_TYPE_TO_COMPONENT = {
     [CHIP_CHOICE_TYPE.Single]: ChipChoice.Single,
-    [CHIP_CHOICE_TYPE.Multi]: ChipChoice.Multi,
+    [CHIP_CHOICE_TYPE.Multiple]: ChipChoice.Multiple,
     [CHIP_CHOICE_TYPE.Date]: ChipChoice.Date,
     [CHIP_CHOICE_TYPE.DateRange]: ChipChoice.DateRange,
+    [CHIP_CHOICE_TYPE.Custom]: ChipChoice.Custom,
 };