@cloud-ru/uikit-product-mobile-chips 0.8.36 → 0.8.37

package/dist/cjs/components/MobileChipChoiceRow/MobileChipChoiceRow.js

@@ -0,0 +1,124 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileChipChoiceRow = MobileChipChoiceRow;
+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 uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const uikit_product_mobile_tooltip_1 = require("@sbercloud/uikit-product-mobile-tooltip");
+const button_1 = require("@snack-uikit/button");
+const divider_1 = require("@snack-uikit/divider");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const components_1 = require("./components");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MobileChipChoiceRow(_a) {
+    var { filters, onChange, showClearButton: showClearButtonProp = true, showAddButton = true, className, value, defaultValue: defaultValueProp, size = constants_2.CHIP_CHOICE_ROW_SIZE.S, visibleFilters: visibleFiltersProp, onVisibleFiltersChange } = _a, rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Chips');
+    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 = () => {
+        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 { pinnedFilters, nonPinnedFilters } = (0, react_1.useMemo)(() => filters.reduce((res, filter) => {
+        if (filter.pinned) {
+            res.pinnedFilters.push(filter);
+        }
+        else {
+            res.nonPinnedFilters.push(filter);
+        }
+        return res;
+    }, { pinnedFilters: [], nonPinnedFilters: [] }), [filters]);
+    const visibleFilters = (0, react_1.useMemo)(() => addListValue.reduce((res, filterId) => {
+        const filter = nonPinnedFilters.find(filter => filter.id === filterId);
+        if (filter) {
+            res.push(filter);
+        }
+        return res;
+    }, []), [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;
+        }
+        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.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': `${constants_1.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 = (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);
+            }
+        }
+        addListPrevValue.current = addListValue;
+    }, [addListValue, handleChipOpen]);
+    const showClearButton = showClearButtonProp && hasAnyFilter;
+    const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
+    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: [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))), showPinnedFiltersDivider && (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), 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)(uikit_product_mobile_tooltip_1.MobileTooltip, { 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)(uikit_product_mobile_dropdown_1.MobileDroplist, { open: canAddChips && addListOpen, onOpenChange: setAddListOpen, items: addSelectorOptions, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { disabled: !canAddChips, label: t('add'), icon: (0, jsx_runtime_1.jsx)(uikit_product_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 && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: handleFiltersClear, label: t('clear'), icon: (0, jsx_runtime_1.jsx)(uikit_product_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/MobileChipChoiceRow/components/ForwardedChipChoice.d.ts

@@ -0,0 +1,2 @@
+import { ChipChoiceProps } from '../types';
+export declare function ForwardedChipChoice(props: ChipChoiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MobileChipChoiceRow/components/ForwardedChipChoice.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForwardedChipChoice = ForwardedChipChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+function ForwardedChipChoice(props) {
+    const Component = constants_1.MAP_CHIP_TYPE_TO_COMPONENT[props.type];
+    return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
+}

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

@@ -0,0 +1,9 @@
+export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
+    single: typeof import("../../MobileChipChoice/components").MobileChipChoiceSingle;
+    multiple: typeof import("../../MobileChipChoice/components").MobileChipChoiceMultiple;
+    date: typeof import("../../MobileChipChoice/components").MobileChipChoiceDate;
+    "date-time": typeof import("../../MobileChipChoice/components").MobileChipChoiceDate;
+    "date-range": typeof import("../../MobileChipChoice/components").MobileChipChoiceDateRange;
+    time: typeof import("../../MobileChipChoice/components").MobileChipChoiceTime;
+    custom: typeof import("../../MobileChipChoice/components").MobileChipChoiceCustom;
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_CHIP_TYPE_TO_COMPONENT = void 0;
+const MobileChipChoice_1 = require("../../MobileChipChoice");
+const constants_1 = require("../../MobileChipChoice/constants");
+exports.MAP_CHIP_TYPE_TO_COMPONENT = {
+    [constants_1.CHIP_CHOICE_TYPE.Single]: MobileChipChoice_1.MobileChipChoice.Single,
+    [constants_1.CHIP_CHOICE_TYPE.Multiple]: MobileChipChoice_1.MobileChipChoice.Multiple,
+    [constants_1.CHIP_CHOICE_TYPE.Date]: MobileChipChoice_1.MobileChipChoice.Date,
+    [constants_1.CHIP_CHOICE_TYPE.DateTime]: MobileChipChoice_1.MobileChipChoice.Date,
+    [constants_1.CHIP_CHOICE_TYPE.DateRange]: MobileChipChoice_1.MobileChipChoice.DateRange,
+    [constants_1.CHIP_CHOICE_TYPE.Time]: MobileChipChoice_1.MobileChipChoice.Time,
+    [constants_1.CHIP_CHOICE_TYPE.Custom]: MobileChipChoice_1.MobileChipChoice.Custom,
+};

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ForwardedChipChoice"), exports);

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

@@ -0,0 +1,12 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export declare const CHIP_CHOICE_ROW_SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const MAP_ROW_SIZE_TO_CHOICE_SIZE: {
+    xs: "xs";
+    s: "s";
+    m: "m";
+};
+export declare const MAP_ROW_SIZE_TO_BUTTON_SIZE: Record<string, ButtonFunctionProps['size']>;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_ROW_SIZE_TO_BUTTON_SIZE = exports.MAP_ROW_SIZE_TO_CHOICE_SIZE = exports.CHIP_CHOICE_ROW_SIZE = void 0;
+const constants_1 = require("../../constants");
+exports.CHIP_CHOICE_ROW_SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+};
+exports.MAP_ROW_SIZE_TO_CHOICE_SIZE = {
+    [exports.CHIP_CHOICE_ROW_SIZE.Xs]: constants_1.SIZE.Xs,
+    [exports.CHIP_CHOICE_ROW_SIZE.S]: constants_1.SIZE.S,
+    [exports.CHIP_CHOICE_ROW_SIZE.M]: constants_1.SIZE.M,
+};
+exports.MAP_ROW_SIZE_TO_BUTTON_SIZE = {
+    [exports.CHIP_CHOICE_ROW_SIZE.Xs]: 'xs',
+    [exports.CHIP_CHOICE_ROW_SIZE.S]: 's',
+    [exports.CHIP_CHOICE_ROW_SIZE.M]: 'm',
+};

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

@@ -0,0 +1,2 @@
+export * from './MobileChipChoiceRow';
+export { hasFilterBeenApplied } from '@snack-uikit/chips';

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

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasFilterBeenApplied = void 0;
+__exportStar(require("./MobileChipChoiceRow"), exports);
+var chips_1 = require("@snack-uikit/chips");
+Object.defineProperty(exports, "hasFilterBeenApplied", { enumerable: true, get: function () { return chips_1.hasFilterBeenApplied; } });

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

@@ -0,0 +1,28 @@
+.chipChoiceRow{
+  display:flex;
+  flex-wrap:wrap;
+  counter-axis-spacing:var(--space-chips-filter-row-gap, 4px);
+  gap:var(--space-chips-filter-row-gap, 4px);
+}
+
+.pinnedItems{
+  gap:var(--space-chips-filter-row-gap, 4px);
+  display:flex;
+  flex-wrap:wrap;
+  min-width:0;
+}
+
+.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/MobileChipChoiceRow/types.d.ts

@@ -0,0 +1,36 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MobileChipChoiceCustomProps, MobileChipChoiceDateProps, MobileChipChoiceDateRangeProps, MobileChipChoiceTimeProps } from '../MobileChipChoice/components';
+import { CHIP_CHOICE_TYPE } from '../MobileChipChoice/constants';
+import { MobileChipChoiceMultipleProps, MobileChipChoiceSingleProps } from '../MobileChipChoice/types';
+import { CHIP_CHOICE_ROW_SIZE } from './constants';
+export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
+type ChipChoiceMultipleType = {
+    type: typeof CHIP_CHOICE_TYPE.Multiple;
+} & MobileChipChoiceMultipleProps;
+type ChipChoiceSingleType = {
+    type: typeof CHIP_CHOICE_TYPE.Single;
+} & MobileChipChoiceSingleProps;
+type ChipChoiceDateType = {
+    type: typeof CHIP_CHOICE_TYPE.Date;
+} & MobileChipChoiceDateProps;
+type ChipChoiceDateTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateTime;
+} & Omit<MobileChipChoiceDateProps, 'mode'> & {
+    mode: 'date-time';
+    showSeconds?: boolean;
+};
+type ChipChoiceDateRangeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateRange;
+} & MobileChipChoiceDateRangeProps;
+type ChipChoiceTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.Time;
+} & MobileChipChoiceTimeProps;
+type ChipChoiceCustomType = {
+    type: typeof CHIP_CHOICE_TYPE.Custom;
+} & MobileChipChoiceCustomProps;
+export type ChipChoiceProps = {
+    id: string;
+} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateTimeType | ChipChoiceDateRangeType | ChipChoiceTimeType | 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/components/MobileChipChoiceRow/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,3 @@
+export * from './AdaptiveChips';
+export * from './MobileChipChoice';
+export * from './MobileChipChoiceRow';

package/dist/cjs/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveChips"), exports);
+__exportStar(require("./MobileChipChoice"), exports);
+__exportStar(require("./MobileChipChoiceRow"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,43 @@
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const BUTTON_SIZE: {
+    readonly Xxs: "xxs";
+    readonly Xs: "xs";
+};
+export declare const VARIANT: {
+    readonly LabelOnly: "label-only";
+    readonly IconBefore: "icon-before";
+};
+export declare const CHIP_ASSIST_TEST_IDS: {
+    icon: string;
+    spinner: string;
+    label: string;
+};
+export declare const CHIP_CHOICE_TEST_IDS: {
+    icon: string;
+    label: string;
+    spinner: string;
+    value: string;
+    clearButton: string;
+    droplist: string;
+    footer: string;
+    cancelButton: string;
+    approveButton: string;
+};
+export declare const CHIP_CHOICE_ROW_IDS: {
+    clearButton: string;
+    addButton: string;
+    addButtonTooltip: string;
+    addButtonOption: string;
+};
+export declare const CHIP_TOGGLE_TEST_IDS: {
+    input: string;
+    icon: string;
+    spinner: string;
+    label: string;
+};
+export declare const DEFAULT_EMPTY_VALUE = "\u2014";

package/dist/cjs/constants.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_EMPTY_VALUE = exports.CHIP_TOGGLE_TEST_IDS = exports.CHIP_CHOICE_ROW_IDS = exports.CHIP_CHOICE_TEST_IDS = exports.CHIP_ASSIST_TEST_IDS = exports.VARIANT = exports.BUTTON_SIZE = exports.SIZE = void 0;
+exports.SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.BUTTON_SIZE = {
+    Xxs: 'xxs',
+    Xs: 'xs',
+};
+exports.VARIANT = {
+    LabelOnly: 'label-only',
+    IconBefore: 'icon-before',
+};
+exports.CHIP_ASSIST_TEST_IDS = {
+    icon: 'chip-assist__icon',
+    spinner: 'chip-assist__spinner',
+    label: 'chip-assist__label',
+};
+exports.CHIP_CHOICE_TEST_IDS = {
+    icon: 'chip-choice__icon',
+    label: 'chip-choice__label',
+    spinner: 'chip-choice__spinner',
+    value: 'chip-choice__value',
+    clearButton: 'chip-choice__clear-button',
+    droplist: 'chip-choice__droplist',
+    footer: 'chip-choice__footer',
+    cancelButton: 'chip-choice__cancel-button',
+    approveButton: 'chip-choice__approve-button',
+};
+exports.CHIP_CHOICE_ROW_IDS = {
+    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',
+    icon: 'chip-toggle__icon',
+    spinner: 'chip-toggle__spinner',
+    label: 'chip-toggle__label',
+};
+exports.DEFAULT_EMPTY_VALUE = '—';

package/dist/cjs/helperComponents/ButtonClearValue/ButtonClearValue.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ButtonSize } from '../../types';
+type ButtonClearValueProps = {
+    size: ButtonSize;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    tabIndex?: number;
+    'data-test-id'?: string;
+};
+export declare const ButtonClearValue: import("react").ForwardRefExoticComponent<ButtonClearValueProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/helperComponents/ButtonClearValue/ButtonClearValue.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonClearValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.ButtonClearValue = (0, react_1.forwardRef)(({ size, onClick, tabIndex = -1, onKeyDown, 'data-test-id': dataTestId }, ref) => {
+    const handleClick = event => {
+        event.stopPropagation();
+        onClick(event);
+    };
+    return ((0, jsx_runtime_1.jsxs)("button", { className: styles_module_scss_1.default.buttonClearValue, "data-size": size, onClick: handleClick, "data-test-id": dataTestId, type: 'button', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, children: [size === constants_1.BUTTON_SIZE.Xxs && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossSVG, { size: 16 }), size === constants_1.BUTTON_SIZE.Xs && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossSVG, {})] }));
+});

package/dist/cjs/helperComponents/ButtonClearValue/index.d.ts

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

package/dist/cjs/helperComponents/ButtonClearValue/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonClearValue"), exports);

package/dist/cjs/helperComponents/ButtonClearValue/styles.module.css

@@ -0,0 +1,43 @@
+.buttonClearValue{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:transparent;
+  border:none;
+}
+.buttonClearValue[data-size=xxs]{
+  width:var(--size-chip-choice-button-clear-value-xxs, 16px);
+  height:var(--size-chip-choice-button-clear-value-xxs, 16px);
+  border-radius:var(--radius-chip-choice-button-clear-value-xxs, 16px);
+}
+.buttonClearValue[data-size=xxs] svg{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+.buttonClearValue[data-size=xs]{
+  width:var(--size-chip-choice-button-clear-value-xs, 24px);
+  height:var(--size-chip-choice-button-clear-value-xs, 24px);
+  border-radius:var(--radius-chip-choice-button-clear-value-xs, 24px);
+}
+.buttonClearValue[data-size=xs] svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.buttonClearValue:hover{
+  cursor:pointer;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.buttonClearValue:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  color:var(--sys-neutral-text-support, #6d707f);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.buttonClearValue:active{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/cjs/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,9 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemContent = ItemContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ItemContent(_a) {
+    var { caption, description, option, className, disabled } = _a, rest = __rest(_a, ["caption", "description", "option", "className", "disabled"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.content, className) }, (0, utils_1.extractSupportProps)(rest), { "data-size": 'l', "data-disabled": disabled || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, "data-test-id": 'list__base-item-option', children: option }), caption && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, "data-test-id": 'list__base-item-description', children: description }))] })));
+}

package/dist/cjs/helperComponents/ItemContent/index.d.ts

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

package/dist/cjs/helperComponents/ItemContent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ItemContent"), exports);