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

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceCustom.js

@@ -0,0 +1,38 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileChipChoiceCustom = MobileChipChoiceCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+function MobileChipChoiceCustom(_a) {
+    var _b;
+    var { size = constants_1.SIZE.S, value: valueProp, onChange: onChangeProp, content, valueRender, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "onChange", "content", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
+    const localRef = (0, react_1.useRef)(null);
+    const [value, setValue] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        onChange: onChangeProp,
+    });
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    const closeDroplist = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [setOpen]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { open: open, onOpenChange: setOpen, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, content: typeof content === 'function' ? content({ closeDroplist, value, onChange: setValue }) : content, children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { valueToRender: (_b = valueRender === null || valueRender === void 0 ? void 0 : valueRender(value)) !== null && _b !== void 0 ? _b : value, onClearButtonClick: onClearButtonClick, ref: localRef, value: value, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceDate.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { CalendarProps } from '@snack-uikit/calendar';
+import { ChipChoiceCommonProps } from '../types';
+type ChipChoiceDateWithSeconds = {
+    mode?: 'date-time';
+    showSeconds?: boolean;
+};
+export type MobileChipChoiceDateProps = ChipChoiceCommonProps & {
+    /** Значение компонента */
+    value?: Date;
+    /** Значение компонента по-умолчанию */
+    defaultValue?: Date;
+    /** Колбек смены значения */
+    onChange?(value: Date): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueRender?(value?: Date): ReactNode;
+    mode?: Exclude<CalendarProps['mode'], 'range'>;
+} & (ChipChoiceDateWithSeconds | {
+    mode?: 'date' | 'month' | 'year';
+});
+export declare function MobileChipChoiceDate({ size, value, defaultValue, onChange, valueRender, mode, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceDateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceDate.js

@@ -0,0 +1,73 @@
+"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.MobileChipChoiceDate = MobileChipChoiceDate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const calendar_1 = require("@snack-uikit/calendar");
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MobileChipChoiceDate(_a) {
+    var _b;
+    var { size = constants_1.SIZE.S, value, defaultValue, onChange, valueRender, mode = 'date', onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "mode", "onClearButtonClick", "open", "onOpenChange"]);
+    const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({ value, defaultValue, onChange });
+    const showSeconds = mode === 'date-time' ? ((_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true) : undefined;
+    const localRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    const closeDroplist = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [setOpen]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Chips');
+    const valueToRender = (0, react_1.useMemo)(() => {
+        if (valueRender) {
+            return valueRender(selectedValue);
+        }
+        if (!selectedValue)
+            return t('allLabel');
+        const date = new Date(selectedValue);
+        if (mode === 'date-time') {
+            return date.toLocaleString(constants_2.DEFAULT_LOCALE, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: showSeconds ? '2-digit' : undefined,
+            });
+        }
+        return date.toLocaleDateString(constants_2.DEFAULT_LOCALE, {
+            year: 'numeric',
+            month: 'numeric',
+            day: mode === 'date' ? 'numeric' : undefined,
+        });
+    }, [mode, selectedValue, showSeconds, t, valueRender]);
+    const handleChangeValue = (0, react_1.useCallback)((value) => {
+        setSelectedValue(value);
+        closeDroplist();
+    }, [closeDroplist, setSelectedValue]);
+    const navigationStartRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { content: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: mode === 'date-time' ? styles_module_scss_1.default.dateTimeWrapper : styles_module_scss_1.default.dateWrapper, barHideStrategy: 'never', children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: mode, size: 'l', value: selectedValue, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds, locale: constants_2.DEFAULT_LOCALE }) }), open: open, onOpenChange: setOpen, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceDateRange.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../types';
+type Range = [Date, Date];
+export type MobileChipChoiceDateRangeProps = ChipChoiceCommonProps & {
+    /** Значение компонента */
+    value?: Range;
+    /** Значение компонента по умолчанию */
+    defaultValue?: Range;
+    /** Колбек смены значения */
+    onChange?(value: Range): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений */
+    valueRender?(value?: Range): ReactNode;
+};
+export declare function MobileChipChoiceDateRange({ size, value, defaultValue, onChange, valueRender, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceDateRangeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceDateRange.js

@@ -0,0 +1,52 @@
+"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.MobileChipChoiceDateRange = MobileChipChoiceDateRange;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const calendar_1 = require("@snack-uikit/calendar");
+const constants_1 = require("../../../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function defaultRangeFormatter({ value, allLabel }) {
+    if (!value || !value.length)
+        return allLabel;
+    const [from, to] = value;
+    return `${from.toLocaleDateString()} ${constants_1.DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+function MobileChipChoiceDateRange(_a) {
+    var { size = constants_1.SIZE.S, value, defaultValue, onChange, valueRender, onClearButtonClick, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "onClearButtonClick", "open", "onOpenChange"]);
+    const [selectedValue, setSelectedValue] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Chips');
+    const valueToRender = valueRender
+        ? valueRender(selectedValue)
+        : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
+    const localRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const closeDroplist = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [setOpen]);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { content: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.dateWrapper, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: 'range', size: 'l', value: selectedValue, onChangeValue: value => {
+                    setSelectedValue(value);
+                    closeDroplist();
+                }, onFocusLeave: closeDroplist }) }), open: open, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, onOpenChange: setOpen, children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceMultiple.d.ts

@@ -0,0 +1,8 @@
+import { ContentRenderProps, MobileChipChoiceMultipleProps } from '../types';
+import { FlattenOption } from '../utils';
+export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps = ContentRenderProps> = {
+    value: FlattenOption<T>[];
+    total: number;
+    allLabel: string;
+};
+export declare function MobileChipChoiceMultiple<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 }: MobileChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,128 @@
+"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.MobileChipChoiceMultiple = MobileChipChoiceMultiple;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const button_1 = require("@snack-uikit/button");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const hooks_1 = require("../hooks");
+const utils_2 = require("../utils");
+const options_1 = require("../utils/options");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const styles_module_scss_1 = __importDefault(require('./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}`;
+};
+function MobileChipChoiceMultiple(_a) {
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = constants_1.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 } = (0, uikit_product_locale_1.useLocale)();
+    const [value, setValue] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const [deferredValue, setDeferredValue] = (0, utils_1.useValueControl)({
+        defaultValue,
+    });
+    const flattenOptions = (0, react_1.useMemo)(() => {
+        const { flattenOptions } = (0, utils_2.kindFlattenOptions)({ options });
+        return flattenOptions;
+    }, [options]);
+    const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+    const [searchValue = '', setSearchValue] = (0, react_1.useState)('');
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    const flatMapOptions = (0, react_1.useMemo)(() => Object.values(flattenOptions), [flattenOptions]);
+    const dropListSelection = (0, react_1.useMemo)(() => (autoApply ? value : deferredValue), [autoApply, deferredValue, value]);
+    const selectedOptions = (0, react_1.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 = (0, hooks_1.useOptionSearch)({ options, flatMapOptions, disableFuzzySearch });
+    const result = (0, react_1.useMemo)(() => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)), [optionSearch, options, searchValue, searchable, valueToRender]);
+    const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
+    const chipRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const handleSelectionChange = (0, react_1.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 = (0, hooks_1.useAutoApplyFooter)({
+        autoApply,
+        onApprove: handleOnApproveClick,
+        onCancel: handleOnCancelClick,
+    });
+    (0, react_1.useEffect)(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    (0, react_1.useEffect)(() => {
+        setDeferredValue(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { items: items, selection: {
+            value: dropListSelection,
+            onChange: handleSelectionChange,
+            mode: 'multiple',
+        }, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, open: open, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+                handleOnCancelClick();
+            }
+            setOpen(open);
+        }, label: label, virtualized: virtualized, footer: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footerTopLine, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.counter, children: `${t('MobileChips.selectedN')}${(value === null || value === void 0 ? void 0 : value.length) || 0}` }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { label: t('MobileChips.resetAll'), onClick: () => {
+                                handleSelectionChange([]);
+                            }, size: 'm' })] }), autoApply ? ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { fullWidth: true, label: t('MobileChips.select'), onClick: () => {
+                        setOpen(false);
+                    }, size: 'l' })) : (autoApplyFooter)] }), children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: onClearButtonClick, value: value, valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/cjs/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/cjs/components/MobileChipChoice/components/MobileChipChoiceSingle.js

@@ -0,0 +1,112 @@
+"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.defaultSingleValueFormatter = defaultSingleValueFormatter;
+exports.MobileChipChoiceSingle = MobileChipChoiceSingle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const hooks_1 = require("../hooks");
+const utils_2 = require("../utils");
+const options_1 = require("../utils/options");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function defaultSingleValueFormatter({ label, allLabel }) {
+    return label !== null && label !== void 0 ? label : allLabel;
+}
+function MobileChipChoiceSingle(_a) {
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = constants_1.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] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const [deferredValue, setDeferredValue] = (0, utils_1.useValueControl)({
+        defaultValue,
+    });
+    const flattenOptions = (0, react_1.useMemo)(() => {
+        const { flattenOptions } = (0, utils_2.kindFlattenOptions)({ options });
+        return flattenOptions;
+    }, [options]);
+    const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+    const { t } = (0, uikit_product_locale_1.useLocale)('Chips');
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    const flatMapOptions = (0, react_1.useMemo)(() => Object.values(flattenOptions), [flattenOptions]);
+    const dropListSelection = (0, react_1.useMemo)(() => (autoApply ? value : deferredValue), [autoApply, deferredValue, value]);
+    const selectedOption = (0, react_1.useMemo)(() => (value ? flattenOptions[value] : {}), [flattenOptions, value]);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const valueToRender = valueRender
+        ? valueRender(selectedOption)
+        : defaultSingleValueFormatter({ label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label, allLabel: t('allLabel') });
+    const optionSearch = (0, hooks_1.useOptionSearch)({ options, flatMapOptions, disableFuzzySearch });
+    const result = (0, react_1.useMemo)(() => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)), [optionSearch, options, searchValue, searchable, valueToRender]);
+    const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
+    const chipRef = (0, react_1.useRef)(null);
+    const handleSelectionChange = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        setDeferredValue(value);
+        setOpen(false);
+    }, [onCancel, setDeferredValue, setOpen, value]);
+    const handleOnApproveClick = (0, react_1.useCallback)(() => {
+        onApprove === null || onApprove === void 0 ? void 0 : onApprove();
+        setValue(deferredValue);
+        setOpen(false);
+    }, [deferredValue, onApprove, setOpen, setValue]);
+    const autoApplyFooter = (0, hooks_1.useAutoApplyFooter)({
+        autoApply,
+        onApprove: handleOnApproveClick,
+        onCancel: handleOnCancelClick,
+    });
+    (0, react_1.useEffect)(() => {
+        if (searchValue && !open) {
+            setSearchValue('');
+        }
+    }, [searchable, open, searchValue]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { items: items, selection: {
+            value: dropListSelection,
+            onChange: handleSelectionChange,
+            mode: 'single',
+        }, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, open: open, onOpenChange: open => {
+            if (!open) {
+                setSearchValue('');
+                handleOnCancelClick();
+            }
+            setOpen(open);
+        }, label: label, virtualized: virtualized, footer: !autoApply && autoApplyFooter ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footer, children: autoApplyFooter }) : undefined, children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: onClearButtonClick, value: value, valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) }));
+}

package/dist/cjs/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/cjs/components/MobileChipChoice/components/MobileChipChoiceTime.js

@@ -0,0 +1,71 @@
+"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.MobileChipChoiceTime = MobileChipChoiceTime;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const calendar_1 = require("@snack-uikit/calendar");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const styles_module_scss_1 = __importDefault(require('./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,
+    });
+};
+function MobileChipChoiceTime(_a) {
+    var { size = constants_1.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] = (0, utils_1.useValueControl)({ value, defaultValue, onChange });
+    const localRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({ setOpen });
+    const closeDroplist = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [setOpen]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Chips');
+    const valueToRender = (0, react_1.useMemo)(() => {
+        if (valueRender) {
+            return valueRender(selectedValue);
+        }
+        if (!selectedValue)
+            return t('allLabel');
+        return getStringTimeValue(selectedValue, { showSeconds, locale: constants_2.DEFAULT_LOCALE });
+    }, [selectedValue, showSeconds, t, valueRender]);
+    const handleChangeValue = (0, react_1.useCallback)((value) => {
+        setSelectedValue(value);
+        closeDroplist();
+    }, [closeDroplist, setSelectedValue]);
+    const navigationStartRef = (0, react_1.useRef)(null);
+    const focusNavigationStartItem = () => setTimeout(() => { var _a; return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDropdown, { content: (0, jsx_runtime_1.jsx)(calendar_1.TimePicker, { className: styles_module_scss_1.default.timeWrapper, value: selectedValue, size: 'l', fitToContainer: false, onChangeValue: handleChangeValue, navigationStartRef: navigationStartRef, onFocusLeave: closeDroplist, showSeconds: showSeconds }), open: open, onOpenChange: setOpen, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist, children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, { ref: localRef, onClearButtonClick: onClearButtonClick, value: selectedValue, valueToRender: valueToRender, size: size, onKeyDown: handleOnKeyDown(focusNavigationStartItem) })) }));
+}

package/dist/cjs/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/cjs/components/MobileChipChoice/components/index.js

@@ -0,0 +1,22 @@
+"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("./MobileChipChoiceCustom"), exports);
+__exportStar(require("./MobileChipChoiceSingle"), exports);
+__exportStar(require("./MobileChipChoiceMultiple"), exports);
+__exportStar(require("./MobileChipChoiceDate"), exports);
+__exportStar(require("./MobileChipChoiceDateRange"), exports);
+__exportStar(require("./MobileChipChoiceTime"), exports);

package/dist/cjs/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/cjs/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;