@snack-uikit/chips 0.24.1 → 0.24.2-preview-08c7f775.0

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

@@ -1,7 +1,9 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ChipChoiceProps, ChipChoiceRowSize, OmitBetter } from './types';
 export type FiltersState = Record<string, unknown>;
-export type ChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'>;
+export type ChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'> & {
+    pinned?: boolean;
+};
 export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
     /** Состояние фильтров */
     value?: TState;
@@ -15,9 +17,13 @@ export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
     size?: ChipChoiceRowSize;
     /** CSS-класс */
     className?: string;
-    /** Скрыть/показать кнопку очиски @default true */
-    showClearAllButton?: boolean;
-    /** Текст кнопки очистки @default 'Clear all' */
-    clearAllButtonLabel?: string;
+    /** Скрыть/показать кнопку очиски фильтров @default true */
+    showClearButton?: boolean;
+    /** Скрыть/показать кнопку добавления фильров @default true */
+    showAddButton?: boolean;
+    /** Состояние для видимых фильтров */
+    visibleFilters?: string[];
+    /** Коллбек на изменение видимых фильтров */
+    onVisibleFiltersChange?(value: string[]): void;
 }>;
-export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearAllButton, clearAllButtonLabel: clearAllButtonLabelProp, className, value, defaultValue, size, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipChoiceRow/ChipChoiceRow.js

@@ -19,10 +19,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChipChoiceRow = ChipChoiceRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const uncontrollable_1 = require("uncontrollable");
 const button_1 = require("@snack-uikit/button");
+const divider_1 = require("@snack-uikit/divider");
 const icons_1 = require("@snack-uikit/icons");
+const list_1 = require("@snack-uikit/list");
 const locale_1 = require("@snack-uikit/locale");
+const tooltip_1 = require("@snack-uikit/tooltip");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const components_1 = require("./components");
@@ -32,53 +36,148 @@ function ChipChoiceRow(_a) {
   var {
       filters,
       onChange,
-      showClearAllButton = true,
-      clearAllButtonLabel: clearAllButtonLabelProp,
+      showClearButton = true,
+      showAddButton = true,
       className,
       value,
-      defaultValue,
-      size = constants_2.CHIP_CHOICE_ROW_SIZE.S
+      defaultValue: defaultValueProp,
+      size = constants_2.CHIP_CHOICE_ROW_SIZE.S,
+      visibleFilters: visibleFiltersProp,
+      onVisibleFiltersChange
     } = _a,
-    rest = __rest(_a, ["filters", "onChange", "showClearAllButton", "clearAllButtonLabel", "className", "value", "defaultValue", "size"]);
+    rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
   const {
     t
   } = (0, locale_1.useLocale)('Chips');
-  const clearAllButtonLabel = clearAllButtonLabelProp !== null && clearAllButtonLabelProp !== void 0 ? clearAllButtonLabelProp : t('clearAllButton');
-  const [state, setState] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue !== null && defaultValue !== void 0 ? defaultValue : {}, newState => {
+  const defaultValue = (0, react_1.useMemo)(() => defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : {}, [defaultValueProp]);
+  const [state, setState] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, newState => {
     const result = typeof newState === 'function' ? newState(state) : newState;
     onChange === null || onChange === void 0 ? void 0 : onChange(result);
   });
+  const [addListValue, setAddListValue] = (0, uncontrollable_1.useUncontrolledProp)(visibleFiltersProp, Object.keys(state), newState => {
+    const result = typeof newState === 'function' ? newState(addListValue) : newState;
+    onVisibleFiltersChange === null || onVisibleFiltersChange === void 0 ? void 0 : onVisibleFiltersChange(result);
+  });
+  const [openedChip, setOpenedChip] = (0, react_1.useState)('');
+  const [addListOpen, setAddListOpen] = (0, react_1.useState)(false);
   const handleChange = (fieldId, value) => {
     setState(state => Object.assign(Object.assign({}, state), {
       [fieldId]: value
     }));
   };
+  const handleChipOpen = (0, react_1.useCallback)(filterId => isOpen => {
+    setOpenedChip(isOpen ? filterId : '');
+  }, []);
   const handleFiltersClear = () => {
-    setState({});
+    const defaultState = filters.reduce((res, filter) => {
+      if (filter.pinned) {
+        return Object.assign(Object.assign({}, res), {
+          [filter.id]: defaultValue[filter.id]
+        });
+      }
+      return res;
+    }, {});
+    setState(defaultState);
+    setAddListValue([]);
   };
-  const hasAnyFilter = Object.values(state).some(filter => {
-    if (Array.isArray(filter)) {
-      return filter.length > 0 && Object.values(filter).some(Boolean);
+  const pinnedFilters = (0, react_1.useMemo)(() => filters.filter(filter => filter.pinned), [filters]);
+  const nonPinnedFilters = (0, react_1.useMemo)(() => filters.filter(filter => !filter.pinned), [filters]);
+  const visibleFilters = (0, react_1.useMemo)(() => addListValue.map(filterId => nonPinnedFilters.find(filter => filter.id === filterId)).filter(item => Boolean(item)), [addListValue, nonPinnedFilters]);
+  const hasAnyFilter = (0, react_1.useMemo)(() => visibleFilters.length > 0 || pinnedFilters.some(filter => state[filter.id] !== defaultValue[filter.id]), [defaultValue, pinnedFilters, state, visibleFilters.length]);
+  const handleClearPinnedFilter = filterId => {
+    const defaultFilterValue = defaultValue[filterId];
+    if (state[filterId] === defaultFilterValue) {
+      return;
     }
-    if (filter && typeof filter === 'object') {
-      return Object.values(filter).some(Boolean) || filter instanceof Date;
+    return () => setState(prevState => Object.assign(Object.assign({}, prevState), {
+      [filterId]: defaultFilterValue
+    }));
+  };
+  const handleRemoveVisibleFilter = filterId => () => {
+    setAddListValue(prev => prev === null || prev === void 0 ? void 0 : prev.filter(item => filterId !== item));
+    setState(prevState => Object.assign(Object.assign({}, prevState), {
+      [filterId]: undefined
+    }));
+  };
+  const addSelectorOptions = (0, react_1.useMemo)(() => nonPinnedFilters.filter(filter => !addListValue.includes(filter.id)).map((filter, index) => {
+    var _a, _b;
+    return {
+      id: filter.id,
+      content: {
+        option: (_a = filter.label) !== null && _a !== void 0 ? _a : filter.id
+      },
+      onClick: () => {
+        setAddListValue(function (prevValue) {
+          return [...(prevValue !== null && prevValue !== void 0 ? prevValue : []), filter.id];
+        });
+        setAddListOpen(false);
+      },
+      'data-test-id': `${constants_1.CHIP_CHOICE_ROW_IDS.addButtonOption}-${(_b = filter['data-test-id']) !== null && _b !== void 0 ? _b : index}`
+    };
+  }), [addListValue, nonPinnedFilters, setAddListValue]);
+  const canAddChips = addSelectorOptions.length > 0;
+  const addListPrevValue = (0, react_1.useRef)(addListValue);
+  (0, react_1.useEffect)(() => {
+    const prevValue = addListPrevValue.current;
+    if (addListValue.length > prevValue.length) {
+      const newItem = addListValue.find(item => !prevValue.includes(item));
+      if (newItem) {
+        handleChipOpen(newItem)(true);
+      }
     }
-    return Boolean(filter);
-  });
+    addListPrevValue.current = addListValue;
+  }, [addListValue, handleChipOpen]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.chipChoiceRow, className)
   }, (0, utils_1.extractSupportProps)(rest), {
-    children: [filters.map(filter => (0, jsx_runtime_1.jsx)(components_1.ForwardedChipChoice, Object.assign({}, filter, {
+    children: [pinnedFilters.length > 0 && (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.pinnedItems,
+      children: [pinnedFilters.map(filter => (0, jsx_runtime_1.jsx)(components_1.ForwardedChipChoice, Object.assign({}, filter, {
+        value: state[filter.id],
+        size: constants_2.MAP_ROW_SIZE_TO_CHOICE_SIZE[size],
+        onChange: value => handleChange(filter.id, value),
+        onClearButtonClick: handleClearPinnedFilter(filter.id)
+      }), filter.id)), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+        orientation: 'vertical',
+        className: styles_module_scss_1.default.divider
+      })]
+    }), visibleFilters.map(filter => (0, jsx_runtime_1.jsx)(components_1.ForwardedChipChoice, Object.assign({}, filter, {
       value: state[filter.id],
       size: constants_2.MAP_ROW_SIZE_TO_CHOICE_SIZE[size],
-      onChange: value => handleChange(filter.id, value)
-    }), filter.id)), showClearAllButton && hasAnyFilter && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-      onClick: handleFiltersClear,
-      label: clearAllButtonLabel,
-      icon: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {}),
-      iconPosition: 'before',
-      size: constants_2.MAP_ROW_SIZE_TO_BUTTON_SIZE[size],
-      "data-test-id": constants_1.CHIP_CHOICE_ROW_IDS.clearAllButton
+      onChange: value => handleChange(filter.id, value),
+      onClearButtonClick: handleRemoveVisibleFilter(filter.id),
+      open: openedChip === filter.id,
+      onOpenChange: handleChipOpen(filter.id)
+    }), filter.id)), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.controlWrapper,
+      children: [showAddButton && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+        tip: t('addButtonDisabledTip'),
+        open: canAddChips ? false : undefined,
+        placement: 'bottom',
+        "data-test-id": constants_1.CHIP_CHOICE_ROW_IDS.addButtonTooltip,
+        children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+          open: canAddChips && addListOpen,
+          onOpenChange: setAddListOpen,
+          items: addSelectorOptions,
+          triggerClassName: styles_module_scss_1.default.addButtonWrapper,
+          trigger: 'clickAndFocusVisible',
+          children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            disabled: !canAddChips,
+            label: t('add'),
+            icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
+            iconPosition: 'before',
+            size: constants_2.MAP_ROW_SIZE_TO_BUTTON_SIZE[size],
+            "data-test-id": constants_1.CHIP_CHOICE_ROW_IDS.addButton
+          })
+        })
+      }), showClearButton && hasAnyFilter && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+        onClick: handleFiltersClear,
+        label: t('clear'),
+        icon: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {}),
+        iconPosition: 'before',
+        size: constants_2.MAP_ROW_SIZE_TO_BUTTON_SIZE[size],
+        "data-test-id": constants_1.CHIP_CHOICE_ROW_IDS.clearButton
+      })]
     })]
   }));
 }

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

@@ -3,6 +3,7 @@ export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
     multiple: typeof import("../../ChipChoice/components").ChipChoiceMultiple;
     date: typeof import("../../ChipChoice/components").ChipChoiceDate;
     "date-time": typeof import("../../ChipChoice/components").ChipChoiceDate;
+    time: typeof import("../../ChipChoice/components").ChipChoiceTime;
     "date-range": typeof import("../../ChipChoice/components").ChipChoiceDateRange;
     custom: typeof import("../../ChipChoice/components").ChipChoiceCustom;
 };

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

@@ -11,6 +11,7 @@ exports.MAP_CHIP_TYPE_TO_COMPONENT = {
   [constants_1.CHIP_CHOICE_TYPE.Multiple]: ChipChoice_1.ChipChoice.Multiple,
   [constants_1.CHIP_CHOICE_TYPE.Date]: ChipChoice_1.ChipChoice.Date,
   [constants_1.CHIP_CHOICE_TYPE.DateTime]: ChipChoice_1.ChipChoice.Date,
+  [constants_1.CHIP_CHOICE_TYPE.Time]: ChipChoice_1.ChipChoice.Time,
   [constants_1.CHIP_CHOICE_TYPE.DateRange]: ChipChoice_1.ChipChoice.DateRange,
   [constants_1.CHIP_CHOICE_TYPE.Custom]: ChipChoice_1.ChipChoice.Custom
 };

package/dist/cjs/components/ChipChoiceRow/helpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * функция проверки заполненности фильтра
+ * @function hasFilterBeenApplied
+ */
+export declare function hasFilterBeenApplied(filter: unknown): boolean;

package/dist/cjs/components/ChipChoiceRow/helpers.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasFilterBeenApplied = hasFilterBeenApplied;
+/**
+ * функция проверки заполненности фильтра
+ * @function hasFilterBeenApplied
+ */
+function hasFilterBeenApplied(filter) {
+  if (Array.isArray(filter)) {
+    return filter.length > 0 && Object.values(filter).some(Boolean);
+  }
+  if (filter && typeof filter === 'object') {
+    return Object.values(filter).some(Boolean) || filter instanceof Date;
+  }
+  return Boolean(filter);
+}

package/dist/cjs/components/ChipChoiceRow/index.d.ts

@@ -1 +1,2 @@
 export * from './ChipChoiceRow';
+export * from './helpers';

package/dist/cjs/components/ChipChoiceRow/index.js

@@ -22,4 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./ChipChoiceRow"), exports);
+__exportStar(require("./ChipChoiceRow"), exports);
+__exportStar(require("./helpers"), exports);

package/dist/cjs/components/ChipChoiceRow/styles.module.css

@@ -3,4 +3,25 @@
   gap:var(--space-chips-filter-row-gap, 4px);
   display:flex;
   flex-wrap:wrap;
+}
+
+.pinnedItems{
+  gap:var(--space-chips-filter-row-gap, 4px);
+  display:flex;
+  flex-wrap:wrap;
+}
+
+.controlWrapper{
+  gap:var(--space-chips-choice-row-control-wrapper-gap, 8px);
+  display:flex;
+  flex-wrap:nowrap;
+}
+
+.divider{
+  align-self:stretch;
+  height:auto;
+}
+
+.addButtonWrapper{
+  display:inline-flex;
 }

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

@@ -1,9 +1,6 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ChipChoiceCustomProps } from '../ChipChoice/components';
-import { ChipChoiceDateProps } from '../ChipChoice/components/ChipChoiceDate';
-import { ChipChoiceDateRangeProps } from '../ChipChoice/components/ChipChoiceDateRange';
+import { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, ChipChoiceMultipleProps, ChipChoiceSingleProps, ChipChoiceTimeProps } from '../ChipChoice';
 import { CHIP_CHOICE_TYPE } from '../ChipChoice/constants';
-import { ChipChoiceMultipleProps, ChipChoiceSingleProps } from '../ChipChoice/types';
 import { CHIP_CHOICE_ROW_SIZE } from './constants';
 export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
 type ChipChoiceMultipleType = {
@@ -21,6 +18,9 @@ type ChipChoiceDateTimeType = {
     mode: 'date-time';
     showSeconds?: boolean;
 };
+type ChipChoiceTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.Time;
+} & ChipChoiceTimeProps;
 type ChipChoiceDateRangeType = {
     type: typeof CHIP_CHOICE_TYPE.DateRange;
 } & ChipChoiceDateRangeProps;
@@ -29,7 +29,7 @@ type ChipChoiceCustomType = {
 } & ChipChoiceCustomProps;
 export type ChipChoiceProps = {
     id: string;
-} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateTimeType | ChipChoiceDateRangeType | ChipChoiceCustomType);
+} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateTimeType | ChipChoiceTimeType | ChipChoiceDateRangeType | ChipChoiceCustomType);
 export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];
 export {};

package/dist/cjs/constants.d.ts

@@ -29,7 +29,10 @@ export declare const CHIP_CHOICE_TEST_IDS: {
     approveButton: string;
 };
 export declare const CHIP_CHOICE_ROW_IDS: {
-    clearAllButton: string;
+    clearButton: string;
+    addButton: string;
+    addButtonTooltip: string;
+    addButtonOption: string;
 };
 export declare const CHIP_TOGGLE_TEST_IDS: {
     input: string;

package/dist/cjs/constants.js

@@ -35,7 +35,10 @@ exports.CHIP_CHOICE_TEST_IDS = {
   approveButton: 'chip-choice__approve-button'
 };
 exports.CHIP_CHOICE_ROW_IDS = {
-  clearAllButton: 'chip-choice-row__clear-all-button'
+  clearButton: 'chip-choice-row__clear-button',
+  addButton: 'chip-choice-row__add-button',
+  addButtonTooltip: 'chip-choice-row__add-button-tooltip',
+  addButtonOption: 'chip-choice-row__add-button-option'
 };
 exports.CHIP_TOGGLE_TEST_IDS = {
   input: 'chip-toggle__input',

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -20,11 +20,12 @@ 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"]);
+    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown"]);
     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 showClearButton = Boolean(onClearButtonClick);
     const [isDroplistOpened, setIsDroplistOpened] = useState(false);
     const handleChipClick = e => {
         if (loading || disabled)
@@ -60,6 +61,5 @@ export const ChipChoiceBase = forwardRef((_a, ref) => {
                 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/esm/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/esm/components/ChipChoice/components/ChipChoiceCustom.js

@@ -10,7 +10,8 @@ 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 { useCallback, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
@@ -18,21 +19,17 @@ 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"]);
+    var { size = SIZE.S, value: valueProp, onChange: onChangeProp, placement = 'bottom-start', widthStrategy = 'gte', content, valueRender, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
     const localRef = useRef(null);
     const [value, setValue] = useValueControl({
         value: valueProp,
         onChange: onChangeProp,
     });
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
     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() })) }));
+    }, [setOpen]);
+    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: onClearButtonClick, ref: localRef, value: value, size: size, onKeyDown: handleOnKeyDown() })) }));
 }

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceDate.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useLocale } from '@snack-uikit/locale';
@@ -21,16 +22,16 @@ import { useHandleOnKeyDown } from '../hooks';
 import { ChipChoiceBase } from './ChipChoiceBase';
 export function ChipChoiceDate(_a) {
     var _b;
-    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, mode = 'date', placement, widthStrategy, buildCalendarCellProps } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps"]);
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, mode = 'date', placement, widthStrategy, buildCalendarCellProps, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode", "placement", "widthStrategy", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
     const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
     const showSeconds = mode === 'date-time' ? ((_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true) : undefined;
     const localRef = useRef(null);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
     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);
-    }, []);
+    }, [setOpen]);
     const { t } = useLocale('Chips');
     const valueToRender = useMemo(() => {
         if (valueRender) {
@@ -55,12 +56,11 @@ export function ChipChoiceDate(_a) {
             day: mode === 'date' ? 'numeric' : undefined,
         });
     }, [mode, selectedValue, showSeconds, t, valueRender]);
-    const clearValue = () => setSelectedValue(undefined);
     const handleChangeValue = useCallback((value) => {
         setSelectedValue(value);
         closeDroplist();
     }, [closeDroplist, setSelectedValue]);
     const navigationStartRef = useRef(null);
     const focusNavigationStartItem = () => setTimeout(() => { var _a; return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-    return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: mode, size: CALENDAR_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds, locale: DEFAULT_LOCALE, buildCellProps: buildCalendarCellProps }), placement: placement, widthStrategy: widthStrategy, 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(focusNavigationStartItem) })) }));
+    return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: mode, size: CALENDAR_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds, locale: DEFAULT_LOCALE, buildCellProps: buildCalendarCellProps }), placement: placement, widthStrategy: widthStrategy, 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: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown(focusNavigationStartItem) })) }));
 }

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -10,7 +10,7 @@ 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 { useCallback, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -26,19 +26,18 @@ function defaultRangeFormatter({ value, allLabel }) {
     return `${from.toLocaleDateString(DEFAULT_LOCALE)} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString(DEFAULT_LOCALE)}`;
 }
 export function ChipChoiceDateRange(_a) {
-    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, buildCalendarCellProps } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "buildCalendarCellProps"]);
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, buildCalendarCellProps, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "buildCalendarCellProps", "onClearButtonClick", "open", "onOpenChange"]);
     const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
     const { t } = useLocale('Chips');
     const valueToRender = valueRender
         ? valueRender(selectedValue)
         : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
-    const clearValue = () => setSelectedValue(undefined);
     const localRef = useRef(null);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
     const closeDroplist = useCallback(() => {
         setOpen(false);
         setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-    }, []);
+    }, [setOpen]);
     const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
     return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
                 setSelectedValue(value);
@@ -46,5 +45,5 @@ export function ChipChoiceDateRange(_a) {
             }, locale: DEFAULT_LOCALE, 
             // bug with focus
             // navigationStartRef={element => element?.focus()}
-            onFocusLeave: closeDroplist, buildCellProps: buildCalendarCellProps }), 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() })) }));
+            onFocusLeave: closeDroplist, buildCellProps: buildCalendarCellProps }), 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: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
 }

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 import { Droplist } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { useValueControl } from '@snack-uikit/utils';
@@ -31,7 +32,7 @@ const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
     return `${len.toString()}/${total}`;
 };
 export function ChipChoiceMultiple(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true, autoApply = true, disableFuzzySearch = false, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "disableFuzzySearch", "onApprove", "onCancel"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, onClearButtonClick, autoApply = true, disableFuzzySearch = false, onApprove, onCancel, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "onClearButtonClick", "autoApply", "disableFuzzySearch", "onApprove", "onCancel", "open", "onOpenChange"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -46,7 +47,7 @@ export function ChipChoiceMultiple(_a) {
     }, [options]);
     const [searchValue = '', setSearchValue] = useState('');
     const { t } = useLocale('Chips');
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
     const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
     const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
     const dropListSelection = useMemo(() => (autoApply ? value : deferredValue), [autoApply, deferredValue, value]);
@@ -61,10 +62,6 @@ export function ChipChoiceMultiple(_a) {
     const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
     const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)), [optionSearch, options, searchValue, searchable, valueToRender]);
     const items = useMemo(() => transformOptionsToItems(result, contentRender), [contentRender, result]);
-    const clearValue = () => {
-        setValue([]);
-        setDeferredValue([]);
-    };
     const chipRef = useRef(null);
     const listRef = useRef(null);
     const handleSelectionChange = useCallback((newValue) => {
@@ -121,5 +118,5 @@ export function ChipChoiceMultiple(_a) {
                 value: searchValue,
                 onChange: setSearchValue,
             }
-            : undefined, pinBottom: renderFooter(), children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, showClearButton: showClearButton && !(Array.isArray(value) && [0].includes(value.length)), valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
+            : undefined, pinBottom: renderFooter(), children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: onClearButtonClick, value: value, valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
 }