@snack-uikit/chips 0.24.3 → 0.25.0

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() })) })));
 }

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceSingle.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';
@@ -24,7 +25,7 @@ export function defaultSingleValueFormatter({ label, allLabel }) {
     return label !== null && label !== void 0 ? label : allLabel;
 }
 export function ChipChoiceSingle(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply = true, onApprove, onCancel, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel", "onClearButtonClick", "open", "onOpenChange"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -38,7 +39,7 @@ export function ChipChoiceSingle(_a) {
         return flattenOptions;
     }, [options]);
     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]);
@@ -50,10 +51,6 @@ export function ChipChoiceSingle(_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(undefined);
-        setDeferredValue(undefined);
-    };
     const chipRef = useRef(null);
     const handleSelectionChange = useCallback((newValue) => {
         var _a;
@@ -68,7 +65,7 @@ export function ChipChoiceSingle(_a) {
                 setDeferredValue(newValue);
             }
         }
-    }, [autoApply, setValue, setDeferredValue]);
+    }, [autoApply, setOpen, setValue, setDeferredValue]);
     const handleOnCancelClick = () => {
         onCancel && onCancel();
         setDeferredValue(value);
@@ -109,5 +106,5 @@ export function ChipChoiceSingle(_a) {
                 value: searchValue,
                 onChange: setSearchValue,
             }
-            : undefined, pinBottom: renderFooter(), children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, 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() })) })));
 }

package/dist/esm/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/esm/components/ChipChoice/components/ChipChoiceTime.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 { TimePicker } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useLocale } from '@snack-uikit/locale';
@@ -35,15 +36,15 @@ const getStringTimeValue = (time, { showSeconds, locale }) => {
     });
 };
 export function ChipChoiceTime(_a) {
-    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds = true, placement } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "placement"]);
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, dropDownClassName, showSeconds = true, placement, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "showSeconds", "placement", "onClearButtonClick", "open", "onOpenChange"]);
     const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
     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) {
@@ -53,12 +54,11 @@ export function ChipChoiceTime(_a) {
             return t('allLabel');
         return getStringTimeValue(selectedValue, { showSeconds, locale: DEFAULT_LOCALE });
     }, [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(TimePicker, { size: TIME_PICKER_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds }), placement: placement, widthStrategy: 'auto', 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(TimePicker, { size: TIME_PICKER_SIZE_MAP[size], value: selectedValue, fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds }), placement: placement, widthStrategy: 'auto', 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/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/esm/components/ChipChoice/constants.js

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

package/dist/esm/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>[];

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

@@ -11,37 +11,106 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { ButtonFunction } from '@snack-uikit/button';
-import { CrossSVG } from '@snack-uikit/icons';
+import { Divider } from '@snack-uikit/divider';
+import { CrossSVG, PlusSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CHIP_CHOICE_ROW_IDS } from '../../constants';
 import { ForwardedChipChoice } from './components';
 import { CHIP_CHOICE_ROW_SIZE, MAP_ROW_SIZE_TO_BUTTON_SIZE, MAP_ROW_SIZE_TO_CHOICE_SIZE } from './constants';
 import styles from './styles.module.css';
 export function ChipChoiceRow(_a) {
-    var { filters, onChange, showClearAllButton = true, clearAllButtonLabel: clearAllButtonLabelProp, className, value, defaultValue, size = CHIP_CHOICE_ROW_SIZE.S } = _a, rest = __rest(_a, ["filters", "onChange", "showClearAllButton", "clearAllButtonLabel", "className", "value", "defaultValue", "size"]);
+    var { filters, onChange, showClearButton = true, showAddButton = true, className, value, defaultValue: defaultValueProp, size = CHIP_CHOICE_ROW_SIZE.S, visibleFilters: visibleFiltersProp, onVisibleFiltersChange } = _a, rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
     const { t } = useLocale('Chips');
-    const clearAllButtonLabel = clearAllButtonLabelProp !== null && clearAllButtonLabelProp !== void 0 ? clearAllButtonLabelProp : t('clearAllButton');
-    const [state, setState] = useUncontrolledProp(value, (defaultValue !== null && defaultValue !== void 0 ? defaultValue : {}), newState => {
+    const defaultValue = useMemo(() => (defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : {}), [defaultValueProp]);
+    const [state, setState] = useUncontrolledProp(value, defaultValue, newState => {
         const result = typeof newState === 'function' ? newState(state) : newState;
         onChange === null || onChange === void 0 ? void 0 : onChange(result);
     });
+    const [addListValue, setAddListValue] = 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] = useState('');
+    const [addListOpen, setAddListOpen] = useState(false);
     const handleChange = (fieldId, value) => {
         setState((state) => (Object.assign(Object.assign({}, state), { [fieldId]: value })));
     };
+    const handleChipOpen = 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, nonPinnedFilters } = useMemo(() => filters.reduce((res, filter) => {
+        if (filter.pinned) {
+            res.pinnedFilters.push(filter);
         }
-        if (filter && typeof filter === 'object') {
-            return Object.values(filter).some(Boolean) || filter instanceof Date;
+        else {
+            res.nonPinnedFilters.push(filter);
         }
-        return Boolean(filter);
-    });
-    return (_jsxs("div", Object.assign({ className: cn(styles.chipChoiceRow, className) }, extractSupportProps(rest), { children: [filters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value) }), filter.id))), showClearAllButton && hasAnyFilter && (_jsx(ButtonFunction, { onClick: handleFiltersClear, label: clearAllButtonLabel, icon: _jsx(CrossSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.clearAllButton }))] })));
+        return res;
+    }, { pinnedFilters: [], nonPinnedFilters: [] }), [filters]);
+    const visibleFilters = useMemo(() => addListValue.reduce((res, filterId) => {
+        const filter = nonPinnedFilters.find(filter => filter.id === filterId);
+        if (filter) {
+            res.push(filter);
+        }
+        return res;
+    }, []), [addListValue, nonPinnedFilters]);
+    const hasAnyFilter = 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;
+        }
+        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 = useMemo(() => nonPinnedFilters.reduce((res, filter, index) => {
+        var _a, _b;
+        if (addListValue.includes(filter.id)) {
+            return res;
+        }
+        res.push({
+            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': `${CHIP_CHOICE_ROW_IDS.addButtonOption}-${(_b = filter['data-test-id']) !== null && _b !== void 0 ? _b : index}`,
+        });
+        return res;
+    }, []), [addListValue, nonPinnedFilters, setAddListValue]);
+    const canAddChips = addSelectorOptions.length > 0;
+    const addListPrevValue = useRef(addListValue);
+    useEffect(() => {
+        const prevValue = addListPrevValue.current;
+        if (addListValue.length > prevValue.length) {
+            const newItem = addListValue.find(item => !prevValue.includes(item));
+            if (newItem) {
+                handleChipOpen(newItem)(true);
+            }
+        }
+        addListPrevValue.current = addListValue;
+    }, [addListValue, handleChipOpen]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.chipChoiceRow, className) }, extractSupportProps(rest), { children: [pinnedFilters.length > 0 && (_jsxs("div", { className: styles.pinnedItems, children: [pinnedFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleClearPinnedFilter(filter.id) }), filter.id))), _jsx(Divider, { orientation: 'vertical', className: styles.divider })] })), visibleFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleRemoveVisibleFilter(filter.id), open: openedChip === filter.id, onOpenChange: handleChipOpen(filter.id) }), filter.id))), _jsxs("div", { className: styles.controlWrapper, children: [showAddButton && (_jsx(Tooltip, { tip: t('addButtonDisabledTip'), open: canAddChips ? false : undefined, placement: 'bottom', "data-test-id": CHIP_CHOICE_ROW_IDS.addButtonTooltip, children: _jsx(Droplist, { open: canAddChips && addListOpen, onOpenChange: setAddListOpen, items: addSelectorOptions, triggerClassName: styles.addButtonWrapper, trigger: 'clickAndFocusVisible', children: _jsx(ButtonFunction, { disabled: !canAddChips, label: t('add'), icon: _jsx(PlusSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.addButton }) }) })), showClearButton && hasAnyFilter && (_jsx(ButtonFunction, { onClick: handleFiltersClear, label: t('clear'), icon: _jsx(CrossSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.clearButton }))] })] })));
 }

package/dist/esm/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/esm/components/ChipChoiceRow/components/constants.js

@@ -5,6 +5,7 @@ export const MAP_CHIP_TYPE_TO_COMPONENT = {
     [CHIP_CHOICE_TYPE.Multiple]: ChipChoice.Multiple,
     [CHIP_CHOICE_TYPE.Date]: ChipChoice.Date,
     [CHIP_CHOICE_TYPE.DateTime]: ChipChoice.Date,
+    [CHIP_CHOICE_TYPE.Time]: ChipChoice.Time,
     [CHIP_CHOICE_TYPE.DateRange]: ChipChoice.DateRange,
     [CHIP_CHOICE_TYPE.Custom]: ChipChoice.Custom,
 };

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * функция проверки заполненности фильтра
+ * @function hasFilterBeenApplied
+ */
+export 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/esm/components/ChipChoiceRow/index.d.ts

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

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

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

package/dist/esm/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/esm/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/esm/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/esm/constants.js

@@ -29,7 +29,10 @@ export const CHIP_CHOICE_TEST_IDS = {
     approveButton: 'chip-choice__approve-button',
 };
 export const 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',
 };
 export const CHIP_TOGGLE_TEST_IDS = {
     input: 'chip-toggle__input',

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.24.3",
+  "version": "0.25.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,12 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.6",
-    "@snack-uikit/calendar": "0.11.19",
+    "@snack-uikit/button": "0.19.7",
+    "@snack-uikit/calendar": "0.11.20",
+    "@snack-uikit/divider": "3.2.3",
     "@snack-uikit/dropdown": "0.4.3",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/list": "0.24.1",
+    "@snack-uikit/list": "0.24.2",
     "@snack-uikit/loaders": "0.9.1",
+    "@snack-uikit/tooltip": "0.16.0",
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1",
     "fuzzy-search": "3.2.1",
@@ -54,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4beda461fbd94378a1534458d7942270226a39ef"
+  "gitHead": "70bed6c518009afe4292cb9d12baf08a16700781"
 }

package/src/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.tsx

@@ -13,15 +13,13 @@ import styles from './styles.module.scss';
 
 export type ChipChoiceBaseProps = Pick<
   ChipChoiceCommonProps,
-  'loading' | 'tabIndex' | 'showClearButton' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'
+  'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'
 > & {
   /** Отображаемое значение */
   valueToRender?: ReactNode;
   /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any;
-  /** Колбек для клика по кнопке очистки */
-  onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
   onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
 };
 
@@ -40,7 +38,6 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
       tabIndex = 0,
       onClearButtonClick,
       onKeyDown,
-      showClearButton: showClearButtonProp = true,
       ...rest
     },
     ref,
@@ -51,6 +48,7 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
     const localRef = useRef<HTMLDivElement>(null);
 
     const clearButtonRef = useRef<HTMLButtonElement>(null);
+    const showClearButton = Boolean(onClearButtonClick);
 
     const [isDroplistOpened, setIsDroplistOpened] = useState(false);
 
@@ -93,8 +91,6 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
       }
     };
 
-    const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value));
-
     return (
       <div
         {...extractSupportProps(rest)}
@@ -104,7 +100,6 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
         data-size={size}
         data-variant={variant}
         data-loading={loading || undefined}
-        // data-test-id={testId || undefined}
         data-disabled={(!loading && disabled) || undefined}
         onClick={handleChipClick}
         onKeyDown={handleChipKeyDown}

package/src/components/ChipChoice/components/ChipChoiceCustom.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
@@ -41,6 +42,9 @@ export function ChipChoiceCustom({
   widthStrategy = 'gte',
   content,
   valueRender,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
   ...rest
 }: ChipChoiceCustomProps) {
   const localRef = useRef<HTMLDivElement>(null);
@@ -50,18 +54,13 @@ export function ChipChoiceCustom({
     onChange: onChangeProp,
   });
 
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
   const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
 
   const closeDroplist = useCallback(() => {
     setOpen(false);
     setTimeout(() => localRef.current?.focus(), 0);
-  }, []);
-
-  const clearValue = () => {
-    setValue?.(undefined);
-    closeDroplist();
-  };
+  }, [setOpen]);
 
   return (
     <Dropdown
@@ -78,7 +77,7 @@ export function ChipChoiceCustom({
       <ChipChoiceBase
         {...rest}
         valueToRender={valueRender?.(value) ?? value}
-        onClearButtonClick={clearValue}
+        onClearButtonClick={onClearButtonClick}
         ref={localRef}
         value={value}
         size={size}