@snack-uikit/chips 0.12.9 → 0.13.1

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.13.1 (2024-04-25)
+
+
+### Bug Fixes
+
+* **PDS-0000:** add export type ContentRenderProps ([6ccd417](https://github.com/cloud-ru-tech/snack-uikit/commit/6ccd4179458703ebb03bc58c25300555799c1a8d))
+* **PDS-0000:** fix clear button & label view in ChipMultiple ([064939f](https://github.com/cloud-ru-tech/snack-uikit/commit/064939f2ae0836ea381db8c38fac477d53b9a4ef))
+* **PDS-0000:** set default button type as button ([4ec64de](https://github.com/cloud-ru-tech/snack-uikit/commit/4ec64de508826df4a1e82fd8c75448d9919e563f))
+
+
+
+
+
+# 0.13.0 (2024-04-23)
+
+
+### Bug Fixes
+
+* **FF-01:** fix pseudo background ([ee468df](https://github.com/cloud-ru-tech/snack-uikit/commit/ee468df9494a81c7948fb20a647a87bdd0b1e980))
+* **PDS-59:** multi-value formatter ([f606ef2](https://github.com/cloud-ru-tech/snack-uikit/commit/f606ef2d3866dfc0f2630302732825cb9e5fb83c))
+* **PDS-59:** upd tests ([df72712](https://github.com/cloud-ru-tech/snack-uikit/commit/df7271268ac1621316dbb98b274e3d6602515b23))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-59:** change droplist -> list package ([f63f48a](https://github.com/cloud-ru-tech/snack-uikit/commit/f63f48a394470243a7410933d5e97aaa50317154))
+
+
+
+
 ## 0.12.9 (2024-04-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -1,6 +1,7 @@
 # Chips
 
 ## Installation
+
 `npm i @snack-uikit/chips`
 
 [Changelog](./CHANGELOG.md)
@@ -126,18 +127,19 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
-| valueToRender | `ReactNode` | - | Отображаемое значение |
-| value | `string \| Date \| string[] \| [Date, Date]` | - | Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> |
-| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
-| children | `ReactNode \| ((props: { handleDroplistItemKeyDown: (e: KeyboardEvent<Element>, cb?: KeyboardEventHandler) => void; closeDroplist(): void; }) => ReactNode)` | - | Контент выпадающего меню <br> <br> Принимает <strong>ReactNode</strong> <br> Или функцию с аргументами: <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню |
+| dropDownClassName | `string` | - |  |
+| valueRender | `(value: any) => ReactNode` | - | Отображаемое значение |
+| value | `any` | - | Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> |
+| onChange | `(value: any) => void` | - |  |
+| content | `(props: CustomContentRenderProps<any>) => ReactNode` | - | Контент выпадающего меню <br> <br> Принимает <strong>ReactNode</strong> <br> Или функцию с аргументами: <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню |
 ## ChipChoice.Single
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| options* | `FilterOption[]` | - | Массив опций |
+| options* | `FilterOption<T>[]` | - | Массив опций |
 | label | `string` | - | Лейбл |
 | disabled | `boolean` | - | Деактивирован ли компонент |
-| loading | `boolean` | - | Состояние загрузки |
+| loading | `boolean` | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
@@ -146,18 +148,32 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
-| value | `string` | - | Значение компонента |
-| defaultValue | `string` | - | Значение компонента по умолчанию |
-| onChange | `(value: string) => void` | - | Колбек смены значения |
-| valueFormatter | `(option?: FilterOption) => string` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
-## ChipChoice.Multi
+| dropDownClassName | `string` | - |  |
+| contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
+| filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
+| searchable | `boolean` | - |  |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId` | - | Controlled состояние |
+| defaultValue | `ItemId` | - | Начальное состояние |
+| valueRender | `(option?: BaseOption<T>) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
+## ChipChoice.Multiple
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| options* | `FilterOption[]` | - | Массив опций |
+| options* | `FilterOption<T>[]` | - | Массив опций |
 | label | `string` | - | Лейбл |
 | disabled | `boolean` | - | Деактивирован ли компонент |
-| loading | `boolean` | - | Состояние загрузки |
+| loading | `boolean` | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
@@ -166,10 +182,24 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
-| value | `string[]` | - | Значение компонента |
-| defaultValue | `string[]` | - | Значение компонента по умолчанию |
-| onChange | `(value: string[]) => void` | - | Колбек смены значения |
-| valueFormatter | `(options: FilterOption[]) => string` | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений. По умолчанию для отображения используется кол-во выбранных значений. |
+| dropDownClassName | `string` | - |  |
+| contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
+| filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
+| searchable | `boolean` | - |  |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId[]` | - | Controlled состояние |
+| defaultValue | `ItemId[]` | - | Начальное состояние |
+| valueRender | `(option?: BaseOption<T>[]) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
 ## ChipChoice.Date
 ### Props
 | name | type | default value | description |
@@ -185,10 +215,11 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
 | value | `Date` | - | Значение компонента |
 | defaultValue | `Date` | - | Значение компонента по-умолчанию |
 | onChange | `(value: Date) => void` | - | Колбек смены значения |
-| valueFormatter | `(value?: Date) => string` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
+| valueRender | `(value?: Date) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
 ## ChipChoice.DateRange
 ### Props
 | name | type | default value | description |
@@ -204,10 +235,31 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
 | value | `Range` | - | Значение компонента |
 | defaultValue | `Range` | - | Значение компонента по умолчанию |
 | onChange | `(value: Range) => void` | - | Колбек смены значения |
-| valueFormatter | `(value?: Range) => string` | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений |
+| valueRender | `(value?: Range) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений |
+## isAccordionOption
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+## isBaseOption
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+## isGroupOption
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+## isGroupSelectOption
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+## isNextListOption
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
 ## ChipChoiceRow
 ### Props
 | name | type | default value | description |
@@ -223,4 +275,3 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 
 
 [//]: DOCUMENTATION_SECTION_END
-

package/dist/components/ChipAssist/ChipAssist.js

@@ -26,5 +26,5 @@ export function ChipAssist(_a) {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (_jsxs("button", Object.assign({}, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: label })] })));
+    return (_jsxs("button", Object.assign({ type: 'button' }, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: label })] })));
 }

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

@@ -16,7 +16,7 @@
   outline:0;
   outline-offset:0;
   color:var(--sys-neutral-text-support, #656771);
-  background-color:var(--sys-neutral-background1-level, #fafafc);
+  background-color:var(--sys-neutral-background1-level, #fdfdff);
   border-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 .assistChip .spinner{

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

@@ -0,0 +1,20 @@
+import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../../types';
+export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'showClearButton' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+};
+export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "showClearButton"> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -0,0 +1,65 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useRef, useState } from 'react';
+import { Sun } from '@snack-uikit/loaders';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
+import { ButtonClearValue } from '../../../../helperComponents';
+import { BUTTON_CLEAR_VALUE_SIZE_MAP } from '../../constants';
+import styles from './styles.module.css';
+export const ChipChoiceBase = forwardRef((_a, ref) => {
+    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown, showClearButton: showClearButtonProp = true } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "showClearButton"]);
+    const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
+    const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const [isDroplistOpened, setIsDroplistOpened] = useState(false);
+    const handleChipClick = e => {
+        if (loading || disabled)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        !isDroplistOpened && setIsDroplistOpened(true);
+    };
+    const handleChipKeyDown = e => {
+        var _a;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.key === 'ArrowRight') {
+            (_a = clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const handleClearButtonClick = e => {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick(e);
+    };
+    const handleClearButtonKeyDown = e => {
+        var _a;
+        switch (e.key) {
+            case 'ArrowLeft': {
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                e.stopPropagation();
+                return;
+            }
+            default:
+                break;
+        }
+    };
+    const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value));
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: mergeRefs(localRef, ref), className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })));
+});

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

@@ -0,0 +1 @@
+export * from './ChipChoiceBase';

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

@@ -0,0 +1 @@
+export * from './ChipChoiceBase';

package/dist/components/ChipChoice/components/{ChipChoiceCustom → ChipChoiceBase}/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);
 }
 
@@ -198,7 +202,8 @@
   --offset:var(--space-drop-list-drop-offset, 4px);
 }
 
-.label, .value{
+.label,
+.value{
   display:inline-flex;
   align-items:center;
 }
@@ -220,7 +225,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{
@@ -317,7 +322,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{
@@ -377,7 +383,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]{
@@ -393,7 +400,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/components/ChipChoiceCustom.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../types';
+type AnyType = any;
+export type CustomContentRenderProps<T = AnyType> = {
+    closeDroplist(): void;
+    value: T;
+    onChange?(value: T): void;
+};
+export type ChipChoiceCustomProps = ChipChoiceCommonProps & {
+    /** Отображаемое значение */
+    valueRender?(value: AnyType): ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: AnyType;
+    onChange?(value: AnyType): void;
+    /** Контент выпадающего меню
+     <br>
+     <br> Принимает <strong>ReactNode</strong>
+     <br> Или функцию с аргументами:
+     <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
+     <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
+     */
+    content?: (props: CustomContentRenderProps) => ReactNode;
+};
+export declare function ChipChoiceCustom({ size, value: valueProp, onChange: onChangeProp, placement, widthStrategy, content, valueRender, ...rest }: ChipChoiceCustomProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ChipChoice/components/ChipChoiceCustom.js

@@ -0,0 +1,38 @@
+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, useRef, useState } from 'react';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+export function ChipChoiceCustom(_a) {
+    var _b;
+    var { size = SIZE.S, value: valueProp, onChange: onChangeProp, placement = 'bottom-start', widthStrategy = 'gte', content, valueRender } = _a, rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender"]);
+    const localRef = useRef(null);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        onChange: onChangeProp,
+    });
+    const [open, setOpen] = useState(false);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    const closeDroplist = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, []);
+    const clearValue = () => {
+        setValue === null || setValue === void 0 ? void 0 : setValue(undefined);
+        closeDroplist();
+    };
+    return (_jsx(Dropdown, { trigger: 'click', widthStrategy: widthStrategy, placement: placement, outsideClick: true, triggerRef: localRef, open: open, onOpenChange: setOpen, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, content: typeof content === 'function' ? content({ closeDroplist, value, onChange: setValue }) : content, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { valueToRender: (_b = valueRender === null || valueRender === void 0 ? void 0 : valueRender(value)) !== null && _b !== void 0 ? _b : value, onClearButtonClick: clearValue, ref: localRef, value: value, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ChipChoiceCommonProps } from '../types';
 export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Значение компонента */
@@ -7,6 +8,6 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     /** Колбек смены значения */
     onChange?(value: Date): void;
     /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
-    valueFormatter?(value?: Date): string;
+    valueRender?(value?: Date): ReactNode;
 };
-export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueFormatter, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceDate.js

@@ -10,22 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useUncontrolledProp } from 'uncontrollable';
+import { useCallback, useRef, useState } from 'react';
 import { Calendar } from '@snack-uikit/calendar';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { useLocale } from '@snack-uikit/locale';
-import { SIZE } from '../../../constants';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
-import { ChipChoiceCustom } from './ChipChoiceCustom';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
 export function ChipChoiceDate(_a) {
-    var { size = SIZE.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
-    const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName"]);
+    const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
+    const localRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    const closeDroplist = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, []);
     const { t } = useLocale('Chips');
-    const valueToRender = valueFormatter
-        ? valueFormatter(selectedValue)
+    const valueToRender = valueRender
+        ? valueRender(selectedValue)
         : (selectedValue && new Date(selectedValue).toLocaleDateString()) || t('allLabel');
     const clearValue = () => setSelectedValue(undefined);
-    return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
+    return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
                 setSelectedValue(value);
                 closeDroplist();
-            }, navigationStartRef: element => element === null || element === void 0 ? void 0 : element.focus(), onFocusLeave: closeDroplist })) })));
+            }, navigationStartRef: element => element === null || element === void 0 ? void 0 : element.focus(), onFocusLeave: closeDroplist }), outsideClick: true, triggerRef: localRef, open: open, onOpenChange: setOpen, className: dropDownClassName, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
 }

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ChipChoiceCommonProps } from '../types';
 type Range = [Date, Date];
 export type ChipChoiceDateRangeProps = ChipChoiceCommonProps & {
@@ -8,7 +9,7 @@ export type ChipChoiceDateRangeProps = ChipChoiceCommonProps & {
     /** Колбек смены значения */
     onChange?(value: Range): void;
     /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений */
-    valueFormatter?(value?: Range): string;
+    valueRender?(value?: Range): ReactNode;
 };
-export declare function ChipChoiceDateRange({ size, value, defaultValue, onChange, valueFormatter, ...rest }: ChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceDateRange({ size, value, defaultValue, onChange, valueRender, dropDownClassName, ...rest }: ChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -10,12 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { useLocale } from '@snack-uikit/locale';
-import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { CHIP_CHOICE_TEST_IDS, DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
-import { ChipChoiceCustom } from './ChipChoiceCustom';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
 function defaultRangeFormatter({ value, allLabel }) {
     if (!value || !value.length)
         return allLabel;
@@ -23,18 +26,25 @@ function defaultRangeFormatter({ value, allLabel }) {
     return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
 }
 export function ChipChoiceDateRange(_a) {
-    var { size = SIZE.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName"]);
     const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
     const { t } = useLocale('Chips');
-    const valueToRender = valueFormatter
-        ? valueFormatter(selectedValue)
+    const valueToRender = valueRender
+        ? valueRender(selectedValue)
         : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
     const clearValue = () => setSelectedValue(undefined);
-    return (_jsx(ChipChoiceCustom, Object.assign({ value: selectedValue, valueToRender: valueToRender, onClearButtonClick: clearValue, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: range => {
-                setSelectedValue(range);
+    const localRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const closeDroplist = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, []);
+    const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+    return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
+                setSelectedValue(value);
                 closeDroplist();
             }, 
             // bug with focus
             // navigationStartRef={element => element?.focus()}
-            onFocusLeave: closeDroplist })) })));
+            onFocusLeave: closeDroplist }), outsideClick: true, triggerRef: localRef, open: open, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, onOpenChange: setOpen, className: dropDownClassName, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
 }

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

@@ -0,0 +1,8 @@
+import { ChipChoiceMultipleProps, ContentRenderProps } from '../types';
+import { FlattenOption } from '../utils';
+export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps = ContentRenderProps> = {
+    value: FlattenOption<T>[];
+    total: number;
+    allLabel: string;
+};
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;