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

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

@@ -0,0 +1,122 @@
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useAutoApplyFooter, useHandleOnKeyDown, useOptionSearch } from '../hooks';
+import { kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.css';
+const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
+    const len = value.length;
+    if ([0, total].includes(len) && total !== len) {
+        return allLabel;
+    }
+    if (len === 1) {
+        return value[0].label;
+    }
+    return `${len.toString()}/${total}`;
+};
+export function MobileChipChoiceMultiple(_a) {
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable: searchableProp, contentRender, onClearButtonClick, open: openProp, onOpenChange, virtualized, disableFuzzySearch = false, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "onClearButtonClick", "open", "onOpenChange", "virtualized", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
+    const { t } = useLocale();
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const [deferredValue, setDeferredValue] = useValueControl({
+        defaultValue,
+    });
+    const flattenOptions = useMemo(() => {
+        const { flattenOptions } = kindFlattenOptions({ options });
+        return flattenOptions;
+    }, [options]);
+    const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+    const [searchValue = '', setSearchValue] = useState('');
+    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]);
+    const selectedOptions = useMemo(() => (value && value.length ? value.map(id => flattenOptions[id]).filter(Boolean) : []), [flattenOptions, value]);
+    const valueToRender = valueRender
+        ? valueRender(selectedOptions)
+        : defaultMultiValueLabelFormatter({
+            value: selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [],
+            total: Object.keys(flattenOptions).length,
+            allLabel: t('Chips.allLabel'),
+        });
+    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 chipRef = useRef(null);
+    const listRef = useRef(null);
+    const handleSelectionChange = useCallback((newValue) => {
+        var _a;
+        if (newValue !== undefined) {
+            if (autoApply) {
+                setValue(newValue);
+            }
+            else {
+                setDeferredValue(newValue);
+            }
+            if (searchValue) {
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }, [autoApply, searchValue, setValue, setDeferredValue]);
+    const handleOnCancelClick = () => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        setDeferredValue(value);
+        setOpen(false);
+    };
+    const handleOnApproveClick = () => {
+        onApprove === null || onApprove === void 0 ? void 0 : onApprove();
+        setValue(deferredValue);
+        setOpen(false);
+    };
+    const autoApplyFooter = useAutoApplyFooter({
+        autoApply,
+        onApprove: handleOnApproveClick,
+        onCancel: handleOnCancelClick,
+    });
+    useEffect(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    useEffect(() => {
+        setDeferredValue(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (_jsx(MobileDroplist, { items: items, selection: {
+            value: dropListSelection,
+            onChange: handleSelectionChange,
+            mode: 'multiple',
+        }, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, open: open, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+                handleOnCancelClick();
+            }
+            setOpen(open);
+        }, label: label, virtualized: virtualized, footer: _jsxs("div", { className: styles.footer, children: [_jsxs("div", { className: styles.footerTopLine, children: [_jsx("span", { className: styles.counter, children: `${t('MobileChips.selectedN')}${(value === null || value === void 0 ? void 0 : value.length) || 0}` }), _jsx(ButtonFunction, { label: t('MobileChips.resetAll'), onClick: () => {
+                                handleSelectionChange([]);
+                            }, size: 'm' })] }), autoApply ? (_jsx(ButtonFilled, { fullWidth: true, label: t('MobileChips.select'), onClick: () => {
+                        setOpen(false);
+                    }, size: 'l' })) : (autoApplyFooter)] }), 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/MobileChipChoice/components/MobileChipChoiceSingle.d.ts

@@ -0,0 +1,8 @@
+import { ItemId } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ContentRenderProps, MobileChipChoiceSingleProps } from '../types';
+export type ChipChoiceSingleValueFormatterProps = {
+    label?: ItemId;
+    allLabel?: string;
+};
+export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
+export declare function MobileChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable: searchableProp, contentRender, onClearButtonClick, open: openProp, onOpenChange, virtualized, disableFuzzySearch, autoApply, onApprove, onCancel, ...rest }: MobileChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,105 @@
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useAutoApplyFooter, useHandleOnKeyDown, useOptionSearch } from '../hooks';
+import { kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.css';
+export function defaultSingleValueFormatter({ label, allLabel }) {
+    return label !== null && label !== void 0 ? label : allLabel;
+}
+export function MobileChipChoiceSingle(_a) {
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable: searchableProp, contentRender, onClearButtonClick, open: openProp, onOpenChange, virtualized, disableFuzzySearch = false, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "onClearButtonClick", "open", "onOpenChange", "virtualized", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const [deferredValue, setDeferredValue] = useValueControl({
+        defaultValue,
+    });
+    const flattenOptions = useMemo(() => {
+        const { flattenOptions } = kindFlattenOptions({ options });
+        return flattenOptions;
+    }, [options]);
+    const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+    const { t } = useLocale('Chips');
+    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]);
+    const selectedOption = useMemo(() => (value ? flattenOptions[value] : {}), [flattenOptions, value]);
+    const [searchValue, setSearchValue] = useState('');
+    const valueToRender = valueRender
+        ? valueRender(selectedOption)
+        : defaultSingleValueFormatter({ label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label, allLabel: t('allLabel') });
+    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 chipRef = useRef(null);
+    const handleSelectionChange = useCallback((newValue) => {
+        var _a;
+        if (newValue !== undefined) {
+            (_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if (autoApply) {
+                setOpen(false);
+                setSearchValue('');
+                setValue(newValue);
+            }
+            else {
+                setDeferredValue(newValue);
+            }
+            return;
+        }
+        if (autoApply) {
+            setOpen(false);
+        }
+    }, [autoApply, setOpen, setValue, setDeferredValue]);
+    const handleOnCancelClick = useCallback(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        setDeferredValue(value);
+        setOpen(false);
+    }, [onCancel, setDeferredValue, setOpen, value]);
+    const handleOnApproveClick = useCallback(() => {
+        onApprove === null || onApprove === void 0 ? void 0 : onApprove();
+        setValue(deferredValue);
+        setOpen(false);
+    }, [deferredValue, onApprove, setOpen, setValue]);
+    const autoApplyFooter = useAutoApplyFooter({
+        autoApply,
+        onApprove: handleOnApproveClick,
+        onCancel: handleOnCancelClick,
+    });
+    useEffect(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    return (_jsx(MobileDroplist, { items: items, selection: {
+            value: dropListSelection,
+            onChange: handleSelectionChange,
+            mode: 'single',
+        }, "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, open: open, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+                handleOnCancelClick();
+            }
+            setOpen(open);
+        }, label: label, virtualized: virtualized, footer: !autoApply && autoApplyFooter ? _jsx("div", { className: styles.footer, children: autoApplyFooter }) : undefined, 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/MobileChipChoice/components/MobileChipChoiceTime.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { ChipChoiceCommonProps } from '../types';
+type TimeValue = TimePickerProps['value'];
+export type MobileChipChoiceTimeProps = Omit<ChipChoiceCommonProps, 'widthStrategy'> & Pick<TimePickerProps, 'value' | 'defaultValue' | 'showSeconds'> & {
+    /** Колбек смены значения */
+    onChange?(value: TimeValue): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueRender?(value?: TimeValue): ReactNode;
+};
+export declare function MobileChipChoiceTime({ size, value, defaultValue, onChange, valueRender, showSeconds, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+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 { useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { TimePicker } from '@snack-uikit/calendar';
+import { useValueControl } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DEFAULT_LOCALE } from '../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.css';
+const getStringTimeValue = (time, { showSeconds, locale }) => {
+    var _a, _b, _c;
+    if (!time) {
+        return '';
+    }
+    const date = new Date();
+    date.setHours((_a = time.hours) !== null && _a !== void 0 ? _a : 0);
+    date.setMinutes((_b = time.minutes) !== null && _b !== void 0 ? _b : 0);
+    date.setSeconds((_c = time.seconds) !== null && _c !== void 0 ? _c : 0);
+    return date.toLocaleTimeString(locale, {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: showSeconds ? 'numeric' : undefined,
+    });
+};
+export function MobileChipChoiceTime(_a) {
+    var { size = SIZE.S, value, defaultValue, onChange, valueRender, showSeconds = true, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "showSeconds", "onClearButtonClick", "open", "onOpenChange"]);
+    const [selectedValue, setSelectedValue] = useValueControl({ value, defaultValue, onChange });
+    const localRef = useRef(null);
+    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) {
+            return valueRender(selectedValue);
+        }
+        if (!selectedValue)
+            return t('allLabel');
+        return getStringTimeValue(selectedValue, { showSeconds, locale: DEFAULT_LOCALE });
+    }, [selectedValue, showSeconds, t, valueRender]);
+    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(MobileDropdown, { content: _jsx(TimePicker, { className: styles.timeWrapper, value: selectedValue, size: 'l', fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds }), open: open, onOpenChange: setOpen, "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/MobileChipChoice/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './MobileChipChoiceCustom';
+export * from './MobileChipChoiceSingle';
+export * from './MobileChipChoiceMultiple';
+export * from './MobileChipChoiceDate';
+export * from './MobileChipChoiceDateRange';
+export * from './MobileChipChoiceTime';

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

@@ -0,0 +1,6 @@
+export * from './MobileChipChoiceCustom';
+export * from './MobileChipChoiceSingle';
+export * from './MobileChipChoiceMultiple';
+export * from './MobileChipChoiceDate';
+export * from './MobileChipChoiceDateRange';
+export * from './MobileChipChoiceTime';

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

@@ -0,0 +1,37 @@
+.footer{
+  width:100%;
+}
+
+.footerTopLine{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:4px;
+}
+
+.counter{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+
+.bodyNoPadding{
+  padding:0 !important;
+}
+
+.dateWrapper{
+  height:384px;
+}
+
+.dateTimeWrapper{
+  height:458px;
+  padding-bottom:8px;
+}
+
+.timeWrapper{
+  min-width:100%;
+}

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

@@ -0,0 +1,16 @@
+export declare const BUTTON_CLEAR_VALUE_SIZE_MAP: {
+    xs: "xxs";
+    s: "xs";
+    m: "xs";
+    l: "xs";
+};
+export declare const CHIP_CHOICE_TYPE: {
+    readonly Multiple: "multiple";
+    readonly Date: "date";
+    readonly DateTime: "date-time";
+    readonly DateRange: "date-range";
+    readonly Single: "single";
+    readonly Custom: "custom";
+    readonly Time: "time";
+};
+export declare const DEFAULT_LOCALE: Intl.Locale;

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

@@ -0,0 +1,17 @@
+import { BUTTON_SIZE, SIZE } from '../../constants';
+export const BUTTON_CLEAR_VALUE_SIZE_MAP = {
+    [SIZE.Xs]: BUTTON_SIZE.Xxs,
+    [SIZE.S]: BUTTON_SIZE.Xs,
+    [SIZE.M]: BUTTON_SIZE.Xs,
+    [SIZE.L]: BUTTON_SIZE.Xs,
+};
+export const CHIP_CHOICE_TYPE = {
+    Multiple: 'multiple',
+    Date: 'date',
+    DateTime: 'date-time',
+    DateRange: 'date-range',
+    Single: 'single',
+    Custom: 'custom',
+    Time: 'time',
+};
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

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

@@ -0,0 +1,23 @@
+import { KeyboardEvent, KeyboardEventHandler } from 'react';
+import { MobileDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { AccordionOption, BaseOption, ContentRenderProps, FilterOption, NestListOption } from './types';
+type UseHandleOnKeyDownProps = {
+    setOpen(open: boolean): void;
+};
+export declare function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps): (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLDivElement>) => void;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useOptionSearch<T extends ContentRenderProps = ContentRenderProps>({ options, flatMapOptions, minSearchInputLength, disableFuzzySearch, }: {
+    options: FilterOption<T>[];
+    flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[];
+    minSearchInputLength?: number;
+    disableFuzzySearch?: boolean;
+}): (search: string) => FilterOption<T>[];
+type UseAutoApplyProps = {
+    autoApply: boolean;
+    onApprove(): void;
+    onCancel(): void;
+};
+export declare function useAutoApplyFooter({ autoApply, onApprove, onCancel, }: UseAutoApplyProps): MobileDroplistProps['footer'];
+export {};

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FuzzySearch from 'fuzzy-search';
+import { useCallback, useMemo } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { CHIP_CHOICE_TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function useHandleOnKeyDown({ setOpen }) {
+    return useCallback((onKeyDown) => (e) => {
+        if (e.code === 'Space') {
+            e.stopPropagation();
+        }
+        else {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        }
+        if (['ArrowDown'].includes(e.key)) {
+            e.preventDefault();
+            setOpen(true);
+        }
+        if (['ArrowUp'].includes(e.key)) {
+            e.preventDefault();
+            setOpen(false);
+        }
+        if (e.key === 'Tab') {
+            setOpen(false);
+        }
+    }, [setOpen]);
+}
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useOptionSearch({ options, flatMapOptions, minSearchInputLength, disableFuzzySearch, }) {
+    return useCallback((search) => {
+        if (search.length < (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH))
+            return options;
+        if (disableFuzzySearch) {
+            return options.filter(option => {
+                var _a, _b;
+                const fieldsForSearch = [option.label];
+                if ('contentRenderProps' in option) {
+                    fieldsForSearch.push((_a = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _a === void 0 ? void 0 : _a.description);
+                    fieldsForSearch.push((_b = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _b === void 0 ? void 0 : _b.caption);
+                }
+                return fieldsForSearch
+                    .filter((v) => Boolean(v))
+                    .some(value => value.toString().includes(search));
+            });
+        }
+        return new FuzzySearch(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {}).search(search);
+    }, [disableFuzzySearch, flatMapOptions, minSearchInputLength, options]);
+}
+export function useAutoApplyFooter({ autoApply, onApprove, onCancel, }) {
+    const { t } = useLocale('Chips');
+    return useMemo(() => {
+        if (autoApply) {
+            return null;
+        }
+        return (_jsxs("div", { className: styles.autoApplyFooter, "data-test-id": CHIP_CHOICE_TEST_IDS.footer, children: [_jsx(ButtonFunction, { fullWidth: true, size: 'l', appearance: 'neutral', label: t('cancel'), onClick: onCancel, "data-test-id": CHIP_CHOICE_TEST_IDS.cancelButton }), _jsx(ButtonFilled, { size: 'l', fullWidth: true, appearance: 'primary', label: t('apply'), onClick: onApprove, "data-test-id": CHIP_CHOICE_TEST_IDS.approveButton })] }));
+    }, [t, autoApply, onApprove, onCancel]);
+}

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

@@ -0,0 +1,12 @@
+import { CustomContentRenderProps, MobileChipChoiceCustom, MobileChipChoiceCustomProps, MobileChipChoiceDate, MobileChipChoiceDateProps, MobileChipChoiceDateRange, MobileChipChoiceDateRangeProps, MobileChipChoiceMultiple, MobileChipChoiceSingle, MobileChipChoiceTime, MobileChipChoiceTimeProps } from './components';
+export type { FilterOption, MobileChipChoiceMultipleProps, MobileChipChoiceSingleProps, ContentRenderProps, } from './types';
+export type { MobileChipChoiceCustomProps, MobileChipChoiceDateProps, MobileChipChoiceDateRangeProps, MobileChipChoiceTimeProps, CustomContentRenderProps, };
+export declare namespace MobileChipChoice {
+    const Custom: typeof MobileChipChoiceCustom;
+    const Single: typeof MobileChipChoiceSingle;
+    const Multiple: typeof MobileChipChoiceMultiple;
+    const Date: typeof MobileChipChoiceDate;
+    const DateRange: typeof MobileChipChoiceDateRange;
+    const Time: typeof MobileChipChoiceTime;
+}
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

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

@@ -0,0 +1,11 @@
+import { MobileChipChoiceCustom, MobileChipChoiceDate, MobileChipChoiceDateRange, MobileChipChoiceMultiple, MobileChipChoiceSingle, MobileChipChoiceTime, } from './components';
+export var MobileChipChoice;
+(function (MobileChipChoice) {
+    MobileChipChoice.Custom = MobileChipChoiceCustom;
+    MobileChipChoice.Single = MobileChipChoiceSingle;
+    MobileChipChoice.Multiple = MobileChipChoiceMultiple;
+    MobileChipChoice.Date = MobileChipChoiceDate;
+    MobileChipChoice.DateRange = MobileChipChoiceDateRange;
+    MobileChipChoice.Time = MobileChipChoiceTime;
+})(MobileChipChoice || (MobileChipChoice = {}));
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';