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

package/dist/esm/components/MobileChipChoice/styles.module.css

@@ -0,0 +1,211 @@
+.label,
+.value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip: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, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+  cursor:progress;
+}
+.choiceChip[data-loading] true .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}
+
+.autoApplyFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:8px;
+}

package/dist/esm/components/MobileChipChoice/types.d.ts

@@ -0,0 +1,80 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { BaseItemProps, DroplistProps, GroupItemProps, GroupSelectItemProps, ItemContentProps, ItemId, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@sbercloud/uikit-product-mobile-dropdown';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { BaseChipProps, Size } from '../../types';
+export type AnyType = any;
+export type ContentRenderProps = Omit<ItemContentProps, 'option' | 'disabled'>;
+export type FilterOption<T extends ContentRenderProps = ContentRenderProps> = BaseOption<T> | AccordionOption<T> | GroupOption<T> | GroupSelectOption<T> | NestListOption<T>;
+export type BaseOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseItemProps, 'content' | 'id'> & {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+};
+export type AccordionOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseOption<T>, 'switch' | 'inactive' | 'value'> & {
+    id?: ItemId;
+    type: 'collapse';
+    options: FilterOption<T>[];
+};
+export type GroupOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type GroupSelectOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupSelectItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type NestListOption<T extends ContentRenderProps = ContentRenderProps> = Omit<NextListItemProps, 'items' | 'content'> & {
+    label: ItemId;
+    contentRenderProps?: T;
+    options: FilterOption<T>[];
+};
+export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
+    /** Размер */
+    size?: Size;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Управляет состоянием показан/не показан. */
+    open?: boolean;
+    /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
+    onOpenChange?(isOpen: boolean): void;
+    /** Вариант обрезания значения */
+    truncateVariant?: TruncateStringProps['variant'];
+}>;
+export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
+    options: FilterOption<T>[];
+    contentRender?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): ReactNode;
+    filterFn?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): boolean;
+    searchable?: boolean;
+    /**
+     * Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
+     * @default false
+     */
+    disableFuzzySearch?: boolean;
+    /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
+    autoApply?: boolean;
+    /** Колбек основной кнопки */
+    onApprove?(): void;
+    /** Колбек кнопки отмены */
+    onCancel?(): void;
+} & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading' | 'virtualized'>;
+export type MobileChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>): ReactNode;
+};
+export type MobileChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionMultipleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>[]): ReactNode;
+};

package/dist/esm/components/MobileChipChoice/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/MobileChipChoice/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typeGuards';
+export * from './utils';

package/dist/esm/components/MobileChipChoice/utils/index.js

@@ -0,0 +1,2 @@
+export * from './typeGuards';
+export * from './utils';

package/dist/esm/components/MobileChipChoice/utils/options.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ItemId, MobileDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ContentRenderProps, FilterOption } from '../types';
+export declare function transformOptionsToItems<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], contentRender?: (option: {
+    label: ItemId;
+    value?: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+}) => ReactNode): MobileDroplistProps['items'];

package/dist/esm/components/MobileChipChoice/utils/options.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ItemContent } from '../../../helperComponents';
+import { isAccordionOption, isGroupOption, isGroupSelectOption, isNextListOption } from './typeGuards';
+export function transformOptionsToItems(options, contentRender) {
+    return options.map(option => {
+        if (isAccordionOption(option) || isNextListOption(option)) {
+            const { label, options, id, contentRenderProps, disabled } = option, rest = __rest(option, ["label", "options", "id", "contentRenderProps", "disabled"]);
+            return Object.assign(Object.assign({}, rest), { disabled,
+                id, content: contentRender ? (contentRender({ label, contentRenderProps, disabled })) : (_jsx(ItemContent, Object.assign({ option: label }, contentRenderProps, { disabled: disabled }))), items: transformOptionsToItems(options) });
+        }
+        if (isGroupSelectOption(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        if (isGroupOption(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        const _a = option, { label, value, contentRenderProps, disabled } = _a, rest = __rest(_a, ["label", "value", "contentRenderProps", "disabled"]);
+        return Object.assign(Object.assign({}, rest), { disabled, id: value, content: contentRender ? (contentRender({ label, contentRenderProps, disabled, value })) : (_jsx(ItemContent, Object.assign({ option: label }, contentRenderProps, { disabled: disabled }))) });
+    });
+}

package/dist/esm/components/MobileChipChoice/utils/typeGuards.d.ts

@@ -0,0 +1,6 @@
+import { AccordionOption, AnyType, BaseOption, ContentRenderProps, GroupOption, GroupSelectOption, NestListOption } from '../types';
+export declare function isBaseOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is BaseOption<T>;
+export declare function isAccordionOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is AccordionOption<T>;
+export declare function isNextListOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is NestListOption<T>;
+export declare function isGroupOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupOption<T>;
+export declare function isGroupSelectOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupSelectOption<T>;

package/dist/esm/components/MobileChipChoice/utils/typeGuards.js

@@ -0,0 +1,15 @@
+export function isBaseOption(option) {
+    return !('options' in option);
+}
+export function isAccordionOption(option) {
+    return option && 'options' in option && option['type'] === 'collapse';
+}
+export function isNextListOption(option) {
+    return option && 'options' in option && option['type'] === 'next-list';
+}
+export function isGroupOption(option) {
+    return option && 'options' in option && option['type'] === 'group';
+}
+export function isGroupSelectOption(option) {
+    return option && 'options' in option && option['type'] === 'group-select';
+}

package/dist/esm/components/MobileChipChoice/utils/utils.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ItemId } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ContentRenderProps, FilterOption } from '../types';
+export type FlattenOption<T extends ContentRenderProps = ContentRenderProps> = {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+    hidden?: boolean;
+    afterContent?: ReactNode;
+    beforeContent?: ReactNode;
+};
+type KindFlattenOptionsProps<T extends ContentRenderProps = ContentRenderProps> = {
+    options: FilterOption<T>[];
+};
+export declare function kindFlattenOptions<T extends ContentRenderProps = ContentRenderProps>({ options, }: KindFlattenOptionsProps<T>): {
+    flattenOptions: Record<string, FlattenOption<T>>;
+};
+export {};

package/dist/esm/components/MobileChipChoice/utils/utils.js

@@ -0,0 +1,30 @@
+import { isBaseOption } from './typeGuards';
+export function kindFlattenOptions({ options, }) {
+    const flattenOptions = {};
+    function flatten(option) {
+        if (isBaseOption(option)) {
+            const { value, label, contentRenderProps, disabled, afterContent, beforeContent, hidden } = option;
+            flattenOptions[value] = {
+                value,
+                label,
+                contentRenderProps,
+                disabled,
+                afterContent,
+                beforeContent,
+                hidden,
+            };
+            return;
+        }
+        const { options } = option;
+        for (let idx = 0; idx < options.length; idx++) {
+            flatten(options[idx]);
+        }
+        return;
+    }
+    for (let idx = 0; idx < options.length; idx++) {
+        flatten(options[idx]);
+    }
+    return {
+        flattenOptions,
+    };
+}

package/dist/esm/components/MobileChipChoiceRow/MobileChipChoiceRow.d.ts

@@ -0,0 +1,29 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ChipChoiceProps, ChipChoiceRowSize, OmitBetter } from './types';
+export type FiltersState = Record<string, unknown>;
+export type MobileChipChoiceRowFilter = OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'> & {
+    pinned?: boolean;
+};
+export type MobileChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
+    /** Состояние фильтров */
+    value?: TState;
+    /** Начальное состояние фильтров */
+    defaultValue?: Partial<TState>;
+    /** Колбек изменения состояния фильтров */
+    onChange?(filters: TState): void;
+    /** Массив чипов */
+    filters: MobileChipChoiceRowFilter[];
+    /** Размер @default 's' */
+    size?: ChipChoiceRowSize;
+    /** CSS-класс */
+    className?: string;
+    /** Скрыть/показать кнопку очиски фильтров @default true */
+    showClearButton?: boolean;
+    /** Скрыть/показать кнопку добавления фильров @default true */
+    showAddButton?: boolean;
+    /** Состояние для видимых фильтров */
+    visibleFilters?: string[];
+    /** Коллбек на изменение видимых фильтров */
+    onVisibleFiltersChange?(value: string[]): void;
+}>;
+export declare function MobileChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton: showClearButtonProp, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: MobileChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileChipChoiceRow/MobileChipChoiceRow.js

@@ -0,0 +1,118 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { CrossSVG, PlusSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Divider } from '@snack-uikit/divider';
+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 MobileChipChoiceRow(_a) {
+    var { filters, onChange, showClearButton: showClearButtonProp = 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 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 = () => {
+        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 } = useMemo(() => filters.reduce((res, filter) => {
+        if (filter.pinned) {
+            res.pinnedFilters.push(filter);
+        }
+        else {
+            res.nonPinnedFilters.push(filter);
+        }
+        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]);
+    const showClearButton = showClearButtonProp && hasAnyFilter;
+    const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
+    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))), showPinnedFiltersDivider && _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(MobileTooltip, { tip: t('addButtonDisabledTip'), open: canAddChips ? false : undefined, placement: 'bottom', "data-test-id": CHIP_CHOICE_ROW_IDS.addButtonTooltip, children: _jsx(MobileDroplist, { open: canAddChips && addListOpen, onOpenChange: setAddListOpen, items: addSelectorOptions, 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 && (_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/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/esm/components/MobileChipChoiceRow/components/ForwardedChipChoice.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MAP_CHIP_TYPE_TO_COMPONENT } from './constants';
+export function ForwardedChipChoice(props) {
+    const Component = MAP_CHIP_TYPE_TO_COMPONENT[props.type];
+    return _jsx(Component, Object.assign({}, props));
+}

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

@@ -0,0 +1,11 @@
+import { MobileChipChoice } from '../../MobileChipChoice';
+import { CHIP_CHOICE_TYPE } from '../../MobileChipChoice/constants';
+export const MAP_CHIP_TYPE_TO_COMPONENT = {
+    [CHIP_CHOICE_TYPE.Single]: MobileChipChoice.Single,
+    [CHIP_CHOICE_TYPE.Multiple]: MobileChipChoice.Multiple,
+    [CHIP_CHOICE_TYPE.Date]: MobileChipChoice.Date,
+    [CHIP_CHOICE_TYPE.DateTime]: MobileChipChoice.Date,
+    [CHIP_CHOICE_TYPE.DateRange]: MobileChipChoice.DateRange,
+    [CHIP_CHOICE_TYPE.Time]: MobileChipChoice.Time,
+    [CHIP_CHOICE_TYPE.Custom]: MobileChipChoice.Custom,
+};

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { SIZE } from '../../constants';
+export const CHIP_CHOICE_ROW_SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+};
+export const MAP_ROW_SIZE_TO_CHOICE_SIZE = {
+    [CHIP_CHOICE_ROW_SIZE.Xs]: SIZE.Xs,
+    [CHIP_CHOICE_ROW_SIZE.S]: SIZE.S,
+    [CHIP_CHOICE_ROW_SIZE.M]: SIZE.M,
+};
+export const MAP_ROW_SIZE_TO_BUTTON_SIZE = {
+    [CHIP_CHOICE_ROW_SIZE.Xs]: 'xs',
+    [CHIP_CHOICE_ROW_SIZE.S]: 's',
+    [CHIP_CHOICE_ROW_SIZE.M]: 'm',
+};

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

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