@snack-uikit/chips 0.24.3 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.25.0 (2025-02-05)
+
+
+### Features
+
+* **PDS-1081:** add chip-choice-time to chip choice row ([5533d1d](https://github.com/cloud-ru-tech/snack-uikit/commit/5533d1d8403ec3363734aa8cee7f12c514d7931d))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-1081:** new chip choice row behavior (now chips can be pinned and dynamically added) ([c558fb0](https://github.com/cloud-ru-tech/snack-uikit/commit/c558fb05b3af0a71083e5715d97d19955e34d446))
+
+
+
+
 ## 0.24.3 (2025-02-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -125,10 +125,12 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | 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` | - |  |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | valueRender | `(value: any) => ReactNode` | - | Отображаемое значение |
 | value | `any` | - | Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> |
 | onChange | `(value: any) => void` | - |  |
@@ -147,10 +149,12 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | 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` | - |  |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
 | filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
 | searchable | `boolean` | - |  |
@@ -168,6 +172,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | value | `ItemId` | - | Controlled состояние |
 | defaultValue | `ItemId` | - | Начальное состояние |
@@ -186,10 +191,12 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | 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` | - |  |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
 | filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
 | searchable | `boolean` | - |  |
@@ -207,6 +214,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | value | `ItemId[]` | - | Controlled состояние |
 | defaultValue | `ItemId[]` | - | Начальное состояние |
@@ -224,10 +232,12 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | 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` | - |  |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | value | `Date` | - | Значение компонента |
 | defaultValue | `Date` | - | Значение компонента по-умолчанию |
 | onChange | `(value: Date) => void` | - | Колбек смены значения |
@@ -248,10 +258,12 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | 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` | - |  |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | value | `Range` | - | Значение компонента |
 | defaultValue | `Range` | - | Значение компонента по умолчанию |
 | onChange | `(value: Range) => void` | - | Колбек смены значения |
@@ -270,8 +282,10 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
-| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| onClearButtonClick | `MouseEventHandler<HTMLButtonElement>` | - | Колбек для клика по кнопке очистки |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | dropDownClassName | `string` | - |  |
 | value | `TimeValue` | - | Выбранное значение. |
 | defaultValue | `TimeValue` | - | Значение по-умолчанию для uncontrolled. |
@@ -308,8 +322,14 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | onChange | `(filters: TState) => void` | - | Колбек изменения состояния фильтров |
 | size | enum ChipChoiceRowSize: `"xs"`, `"s"`, `"m"` | s | Размер |
 | className | `string` | - | CSS-класс |
-| showClearAllButton | `boolean` | true | Скрыть/показать кнопку очиски |
-| clearAllButtonLabel | `string` | 'Clear all' | Текст кнопки очистки |
+| showClearButton | `boolean` | true | Скрыть/показать кнопку очиски фильтров |
+| showAddButton | `boolean` | true | Скрыть/показать кнопку добавления фильров |
+| visibleFilters | `string[]` | - | Состояние для видимых фильтров |
+| onVisibleFiltersChange | `(value: string[]) => void` | - | Коллбек на изменение видимых фильтров |
+## hasFilterBeenApplied
+`hasFilterBeenApplied` 
+
+функция проверки заполненности фильтра
 
 
 [//]: DOCUMENTATION_SECTION_END

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

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

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

@@ -40,14 +40,14 @@ exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
       className,
       tabIndex = 0,
       onClearButtonClick,
-      onKeyDown,
-      showClearButton: showClearButtonProp = true
+      onKeyDown
     } = _a,
-    rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "showClearButton"]);
+    rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown"]);
   const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
   const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
+  const showClearButton = Boolean(onClearButtonClick);
   const [isDroplistOpened, setIsDroplistOpened] = (0, react_1.useState)(false);
   const handleChipClick = e => {
     if (loading || disabled) return;
@@ -84,7 +84,6 @@ exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
         break;
     }
   };
-  const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value));
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
     role: 'button',
     ref: (0, merge_refs_1.default)(localRef, ref),

package/dist/cjs/components/ChipChoice/components/ChipChoiceCustom.d.ts

@@ -21,5 +21,5 @@ export type ChipChoiceCustomProps = ChipChoiceCommonProps & {
      */
     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 declare function ChipChoiceCustom({ size, value: valueProp, onChange: onChangeProp, placement, widthStrategy, content, valueRender, onClearButtonClick, open: openProp, onOpenChange, ...rest }: ChipChoiceCustomProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipChoiceCustom = ChipChoiceCustom;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
 const dropdown_1 = require("@snack-uikit/dropdown");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../../constants");
@@ -28,15 +29,18 @@ function ChipChoiceCustom(_a) {
       placement = 'bottom-start',
       widthStrategy = 'gte',
       content,
-      valueRender
+      valueRender,
+      onClearButtonClick,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender"]);
+    rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
   const localRef = (0, react_1.useRef)(null);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     onChange: onChangeProp
   });
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -46,11 +50,7 @@ function ChipChoiceCustom(_a) {
       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();
-  };
+  }, [setOpen]);
   return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
     trigger: 'click',
     widthStrategy: widthStrategy,
@@ -67,7 +67,7 @@ function ChipChoiceCustom(_a) {
     }) : content,
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       valueToRender: (_b = valueRender === null || valueRender === void 0 ? void 0 : valueRender(value)) !== null && _b !== void 0 ? _b : value,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       ref: localRef,
       value: value,
       size: size,

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

@@ -20,5 +20,5 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
 } & (ChipChoiceDateWithSeconds | {
     mode?: 'date' | 'month';
 });
-export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, placement, widthStrategy, buildCalendarCellProps, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceDate({ size, value, defaultValue, onChange, valueRender, dropDownClassName, mode, placement, widthStrategy, buildCalendarCellProps, onClearButtonClick, open: openProp, onOpenChange, ...rest }: ChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipChoiceDate = ChipChoiceDate;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
 const calendar_1 = require("@snack-uikit/calendar");
 const dropdown_1 = require("@snack-uikit/dropdown");
 const locale_1 = require("@snack-uikit/locale");
@@ -34,9 +35,12 @@ function ChipChoiceDate(_a) {
       mode = 'date',
       placement,
       widthStrategy,
-      buildCalendarCellProps
+      buildCalendarCellProps,
+      onClearButtonClick,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps"]);
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
   const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
     value,
     defaultValue,
@@ -44,7 +48,7 @@ function ChipChoiceDate(_a) {
   });
   const showSeconds = mode === 'date-time' ? (_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true : undefined;
   const localRef = (0, react_1.useRef)(null);
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -54,7 +58,7 @@ function ChipChoiceDate(_a) {
       var _a;
       return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, 0);
-  }, []);
+  }, [setOpen]);
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
@@ -80,7 +84,6 @@ function ChipChoiceDate(_a) {
       day: mode === 'date' ? 'numeric' : undefined
     });
   }, [mode, selectedValue, showSeconds, t, valueRender]);
-  const clearValue = () => setSelectedValue(undefined);
   const handleChangeValue = (0, react_1.useCallback)(value => {
     setSelectedValue(value);
     closeDroplist();
@@ -113,7 +116,7 @@ function ChipChoiceDate(_a) {
     "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       ref: localRef,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       value: selectedValue,
       valueToRender: valueToRender,
       size: size,

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

@@ -14,5 +14,5 @@ export type ChipChoiceDateRangeProps = ChipChoiceCommonProps & {
     /** Колбек свойств для управления ячейками календаря */
     buildCalendarCellProps?: CalendarProps['buildCellProps'];
 };
-export declare function ChipChoiceDateRange({ size, value, defaultValue, onChange, valueRender, dropDownClassName, buildCalendarCellProps, ...rest }: ChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceDateRange({ size, value, defaultValue, onChange, valueRender, dropDownClassName, buildCalendarCellProps, onClearButtonClick, open: openProp, onOpenChange, ...rest }: ChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -39,9 +39,12 @@ function ChipChoiceDateRange(_a) {
       onChange,
       valueRender,
       dropDownClassName,
-      buildCalendarCellProps
+      buildCalendarCellProps,
+      onClearButtonClick,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "buildCalendarCellProps"]);
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
   const [selectedValue, setSelectedValue] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
   const {
     t
@@ -50,16 +53,15 @@ function ChipChoiceDateRange(_a) {
     value: selectedValue,
     allLabel: t('allLabel')
   });
-  const clearValue = () => setSelectedValue(undefined);
   const localRef = (0, react_1.useRef)(null);
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const closeDroplist = (0, react_1.useCallback)(() => {
     setOpen(false);
     setTimeout(() => {
       var _a;
       return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, 0);
-  }, []);
+  }, [setOpen]);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -86,7 +88,7 @@ function ChipChoiceDateRange(_a) {
     className: dropDownClassName,
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       ref: localRef,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       value: selectedValue,
       valueToRender: valueToRender,
       size: size,

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

@@ -5,4 +5,4 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
     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, autoApply, disableFuzzySearch, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, onClearButtonClick, autoApply, disableFuzzySearch, onApprove, onCancel, open: openProp, onOpenChange, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipChoiceMultiple = ChipChoiceMultiple;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
 const list_1 = require("@snack-uikit/list");
 const locale_1 = require("@snack-uikit/locale");
 const utils_1 = require("@snack-uikit/utils");
@@ -50,13 +51,15 @@ function ChipChoiceMultiple(_a) {
       searchable,
       contentRender,
       dropDownClassName,
-      showClearButton = true,
+      onClearButtonClick,
       autoApply = true,
       disableFuzzySearch = false,
       onApprove,
-      onCancel
+      onCancel,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "disableFuzzySearch", "onApprove", "onCancel"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "onClearButtonClick", "autoApply", "disableFuzzySearch", "onApprove", "onCancel", "open", "onOpenChange"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -77,7 +80,7 @@ function ChipChoiceMultiple(_a) {
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -96,10 +99,6 @@ function ChipChoiceMultiple(_a) {
   });
   const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : optionSearch(searchValue), [optionSearch, options, searchValue, searchable, valueToRender]);
   const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
-  const clearValue = () => {
-    setValue([]);
-    setDeferredValue([]);
-  };
   const chipRef = (0, react_1.useRef)(null);
   const listRef = (0, react_1.useRef)(null);
   const handleSelectionChange = (0, react_1.useCallback)(newValue => {
@@ -170,9 +169,8 @@ function ChipChoiceMultiple(_a) {
     pinBottom: renderFooter(),
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       ref: chipRef,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       value: value,
-      showClearButton: showClearButton && !(Array.isArray(value) && [0].includes(value.length)),
       valueToRender: valueToRender,
       label: label,
       loading: rest.loading,

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

@@ -5,4 +5,4 @@ export type ChipChoiceSingleValueFormatterProps = {
     allLabel?: string;
 };
 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, disableFuzzySearch, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply, onApprove, onCancel, onClearButtonClick, open: openProp, onOpenChange, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -15,6 +15,7 @@ exports.defaultSingleValueFormatter = defaultSingleValueFormatter;
 exports.ChipChoiceSingle = ChipChoiceSingle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
 const list_1 = require("@snack-uikit/list");
 const locale_1 = require("@snack-uikit/locale");
 const utils_1 = require("@snack-uikit/utils");
@@ -46,9 +47,12 @@ function ChipChoiceSingle(_a) {
       disableFuzzySearch,
       autoApply = true,
       onApprove,
-      onCancel
+      onCancel,
+      onClearButtonClick,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel", "onClearButtonClick", "open", "onOpenChange"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -68,7 +72,7 @@ function ChipChoiceSingle(_a) {
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -87,10 +91,6 @@ function ChipChoiceSingle(_a) {
   });
   const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : optionSearch(searchValue), [optionSearch, options, searchValue, searchable, valueToRender]);
   const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
-  const clearValue = () => {
-    setValue(undefined);
-    setDeferredValue(undefined);
-  };
   const chipRef = (0, react_1.useRef)(null);
   const handleSelectionChange = (0, react_1.useCallback)(newValue => {
     var _a;
@@ -104,7 +104,7 @@ function ChipChoiceSingle(_a) {
         setDeferredValue(newValue);
       }
     }
-  }, [autoApply, setValue, setDeferredValue]);
+  }, [autoApply, setOpen, setValue, setDeferredValue]);
   const handleOnCancelClick = () => {
     onCancel && onCancel();
     setDeferredValue(value);
@@ -160,7 +160,7 @@ function ChipChoiceSingle(_a) {
     pinBottom: renderFooter(),
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       ref: chipRef,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       value: value,
       valueToRender: valueToRender,
       label: label,

package/dist/cjs/components/ChipChoice/components/ChipChoiceTime.d.ts

@@ -8,5 +8,5 @@ export type ChipChoiceTimeProps = Omit<ChipChoiceCommonProps, 'widthStrategy'> &
     /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
     valueRender?(value?: TimeValue): ReactNode;
 };
-export declare function ChipChoiceTime({ size, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds, placement, ...rest }: ChipChoiceTimeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceTime({ size, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds, placement, onClearButtonClick, open: openProp, onOpenChange, ...rest }: ChipChoiceTimeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/ChipChoice/components/ChipChoiceTime.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipChoiceTime = ChipChoiceTime;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
 const calendar_1 = require("@snack-uikit/calendar");
 const dropdown_1 = require("@snack-uikit/dropdown");
 const locale_1 = require("@snack-uikit/locale");
@@ -50,16 +51,19 @@ function ChipChoiceTime(_a) {
       valueRender,
       dropDownClassName,
       showSeconds = true,
-      placement
+      placement,
+      onClearButtonClick,
+      open: openProp,
+      onOpenChange
     } = _a,
-    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "placement"]);
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "placement", "onClearButtonClick", "open", "onOpenChange"]);
   const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
     value,
     defaultValue,
     onChange
   });
   const localRef = (0, react_1.useRef)(null);
-  const [open, setOpen] = (0, react_1.useState)(false);
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
   const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
     setOpen
   });
@@ -69,7 +73,7 @@ function ChipChoiceTime(_a) {
       var _a;
       return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, 0);
-  }, []);
+  }, [setOpen]);
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
@@ -83,7 +87,6 @@ function ChipChoiceTime(_a) {
       locale: constants_2.DEFAULT_LOCALE
     });
   }, [selectedValue, showSeconds, t, valueRender]);
-  const clearValue = () => setSelectedValue(undefined);
   const handleChangeValue = (0, react_1.useCallback)(value => {
     setSelectedValue(value);
     closeDroplist();
@@ -113,7 +116,7 @@ function ChipChoiceTime(_a) {
     "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
     children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
       ref: localRef,
-      onClearButtonClick: clearValue,
+      onClearButtonClick: onClearButtonClick,
       value: selectedValue,
       valueToRender: valueToRender,
       size: size,

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

@@ -16,6 +16,7 @@ export declare const CHIP_CHOICE_TYPE: {
     readonly Multiple: "multiple";
     readonly Date: "date";
     readonly DateTime: "date-time";
+    readonly Time: "time";
     readonly DateRange: "date-range";
     readonly Single: "single";
     readonly Custom: "custom";

package/dist/cjs/components/ChipChoice/constants.js

@@ -39,6 +39,7 @@ exports.CHIP_CHOICE_TYPE = {
   Multiple: 'multiple',
   Date: 'date',
   DateTime: 'date-time',
+  Time: 'time',
   DateRange: 'date-range',
   Single: 'single',
   Custom: 'custom'

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

@@ -37,8 +37,8 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
      * @default false
      */
     disableFuzzySearch?: boolean;
-    /** Отображение кнопки очистки значения @default true*/
-    showClearButton?: boolean;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
     /** Расположение выпадающего меню */
     placement?: DropdownProps['placement'];
     /**
@@ -50,6 +50,10 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
      */
     widthStrategy?: DropdownProps['widthStrategy'];
     dropDownClassName?: string;
+    /** Управляет состоянием показан/не показан. */
+    open?: boolean;
+    /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
+    onOpenChange?: (isOpen: boolean) => void;
 }>;
 export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
     options: FilterOption<T>[];
@@ -70,7 +74,7 @@ export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRe
     onApprove?: () => void;
     /** Колбек кнопки отмены */
     onCancel?: () => void;
-} & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading' | 'scrollToSelectedItem'>;
+} & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading' | 'scrollToSelectedItem' | 'virtualized'>;
 export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
     /** Массив опций */
     options: FilterOption<T>[];