@alfalab/core-components-select 14.3.5 → 15.0.1

package/src/utils.ts

@@ -0,0 +1,154 @@
+import { cloneElement, isValidElement, ReactNode, RefObject, useEffect, useRef } from 'react';
+
+import { BaseSelectProps, GroupShape, OptionShape } from './typings';
+
+export const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>
+    Object.prototype.hasOwnProperty.call(item, 'options');
+
+export const isOptionShape = (item: OptionShape | string | null): item is OptionShape =>
+    !!item && Object.prototype.hasOwnProperty.call(item, 'key');
+
+export const joinOptions = ({
+    selected,
+    selectedMultiple,
+}: {
+    selected?: OptionShape;
+    selectedMultiple?: OptionShape[];
+}) => {
+    const options = selectedMultiple || (selected ? [selected] : []);
+
+    if (!options.length) return null;
+
+    return options.reduce((acc: Array<ReactNode | string>, option: OptionShape, index: number) => {
+        if (isValidElement(option.content)) {
+            acc.push(cloneElement(option.content, { key: option.key }));
+        } else {
+            acc.push(option.content);
+        }
+
+        if (index < options.length - 1) acc.push(', ');
+
+        return acc;
+    }, []);
+};
+
+// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу
+export function processOptions(
+    options: BaseSelectProps['options'],
+    selected: BaseSelectProps['selected'] = [],
+) {
+    const flatOptions: OptionShape[] = [];
+
+    const selectedArray = Array.isArray(selected) ? selected : [selected];
+    const selectedOptions = selectedArray.filter(isOptionShape);
+    const selectedKeys = selectedArray.filter(
+        (option): option is string => typeof option === 'string',
+    );
+
+    const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);
+
+    const process = (option: OptionShape) => {
+        flatOptions.push(option);
+
+        if (isSelected(option)) {
+            selectedOptions.push(option);
+        }
+    };
+
+    options.forEach((option) => {
+        if (isGroup(option)) {
+            option.options.forEach(process);
+        } else {
+            process(option);
+        }
+    });
+
+    return { flatOptions, selectedOptions };
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useVisibleOptionsArgs = {
+    /**
+     * Количество видимых пунктов
+     */
+    visibleOptions: number;
+
+    /**
+     * Реф на контейнер с пунтами меню
+     */
+    listRef: RefObject<HTMLElement>;
+
+    /**
+     * Реф на контейнер, которому нужно установить высоту
+     */
+    styleTargetRef?: RefObject<HTMLElement>;
+
+    /**
+     * Флаг открытия меню
+     */
+    open?: boolean;
+
+    /**
+     * Позволяет вызвать пересчет высоты
+     */
+    invalidate?: unknown;
+};
+
+export function useVisibleOptions({
+    visibleOptions,
+    listRef,
+    styleTargetRef = listRef,
+    open,
+    invalidate,
+}: useVisibleOptionsArgs) {
+    useEffect(() => {
+        const list = listRef.current;
+        const styleTarget = styleTargetRef.current;
+
+        if (open && list && styleTarget && visibleOptions > 0) {
+            const childCount = list.children.length;
+            const optionsNodes = ([] as HTMLElement[]).slice.call(
+                list.children,
+                0,
+                visibleOptions + 1,
+            );
+
+            let height = optionsNodes
+                .slice(0, visibleOptions)
+                .reduce((acc, child) => acc + child.clientHeight, 0);
+
+            if (visibleOptions < childCount) {
+                const lastVisibleOptionHeight = optionsNodes[optionsNodes.length - 1].clientHeight;
+
+                // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку
+                height += Math.round(
+                    childCount - visibleOptions === 1
+                        ? lastVisibleOptionHeight
+                        : lastVisibleOptionHeight / 2,
+                );
+            }
+
+            styleTarget.style.height = `${height}px`;
+        }
+    }, [listRef, open, styleTargetRef, visibleOptions, invalidate]);
+}
+
+// TODO: перенести
+export function usePrevious<T>(value: T) {
+    const ref = useRef<T>();
+
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref.current;
+}
+
+// TODO: перенести
+export const lastIndexOf = <T>(array: T[], predicate: (item: T) => boolean) => {
+    for (let i = array.length - 1; i >= 0; i--) {
+        if (predicate(array[i])) return i;
+    }
+
+    return -1;
+};

package/src/vars.css

@@ -0,0 +1,57 @@
+:root {
+    --select-error-color: var(--color-light-text-negative);
+    --select-arrow-color: var(--color-light-graphic-primary);
+    --select-arrow-hover-opacity: 0.7;
+
+    /* options list */
+
+    --select-options-list-border-radius: var(--border-radius-m);
+    --select-options-list-box-shadow: var(--shadow-m);
+    --select-options-list-offset: var(--gap-2xs);
+    --select-options-list-top-padding: 0;
+    --select-options-list-bottom-padding: 0;
+    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
+    --select-option-divider-display: none;
+    --select-option-divider-background: var(--color-light-border-primary);
+
+    /* option */
+
+    --select-option-left-padding: var(--gap-s);
+    --select-option-right-padding: var(--gap-s);
+    --select-option-l-left-padding: var(--gap-m);
+    --select-option-l-right-padding: var(--gap-m);
+    --select-option-background: var(--color-light-bg-primary);
+    --select-option-selected-background: var(--color-light-bg-primary);
+    --select-option-hover-background: var(--color-light-bg-secondary);
+    --select-option-active-background: var(--color-light-bg-tertiary);
+    --select-option-disabled-background: var(--color-light-bg-primary);
+    --select-option-color: var(--color-light-text-primary);
+    --select-option-selected-color: var(--color-light-text-primary);
+    --select-option-hover-color: var(--color-light-text-primary);
+    --select-option-active-color: var(--color-light-text-primary);
+    --select-option-disabled-color: var(--color-light-text-secondary);
+
+    /* checkmark */
+
+    --select-checkmark-margin: 0 var(--gap-xs) 0 0;
+    --select-checkmark-margin-after: var(--select-checkmark-margin);
+    --select-checkmark-size: 4px;
+    --select-checkmark-before-display: 'flex';
+    --select-checkmark-after-display: none;
+    --select-checkmark-before-display-multiple: block;
+    --select-checkmark-after-display-single: none;
+    --select-checkmark-unselected-opacity: 0;
+    --select-checkmark-background: var(--color-light-graphic-primary);
+    --select-checkmark-border-radius: var(--border-radius-circle);
+    --select-mobile-checkmark-display-icon: block;
+    --select-mobile-checkmark-display-badge: none;
+
+    /* optgroup */
+
+    --select-optgroup-color: var(--color-light-text-secondary);
+    --select-optgroup-background: var(--color-light-bg-primary);
+    --select-optgroup-left-padding: var(--gap-s);
+    --select-optgroup-right-padding: var(--gap-s);
+    --select-optgroup-l-left-padding: var(--gap-m);
+    --select-optgroup-l-right-padding: var(--gap-m);
+}

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/typings-baf4875b.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/Component-1e06de61.d.ts

@@ -1,108 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { ReactNode } from "react";
-import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
-import { UseSelectWithApplyProps } from "./hook-b4e70cb0";
-import { BaseSelectProps, OptionShape, OptionsListProps } from "./typings";
-import { FooterProps } from "./presets/useSelectWithApply/options-list-with-apply/footer/Component";
-import { HeaderProps } from "./presets/useSelectWithApply/options-list-with-apply/header/Component";
-import { ModalMobile } from "./Component.mobile-b2c0420d";
-type AdditionalMobileProps = {
-    /**
-     * Футер
-     * @deprecated Используйте bottomSheetProps.actionButton
-     */
-    footer?: ReactNode;
-    /**
-     * Будет ли свайпаться шторка
-     * @deprecated Используйте bottomSheetProps.swipeable
-     */
-    swipeable?: boolean;
-    /**
-     * Дополнительные пропсы шторки
-     */
-    bottomSheetProps?: Partial<BottomSheetProps>;
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: UseSelectWithApplyProps["showClear"];
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
-    /**
-     * Показывать пункт "Выбрать все" в заголовке списка
-     */
-    showHeaderWithSelectAll?: UseSelectWithApplyProps["showHeaderWithSelectAll"];
-    /**
-     * Использовать ли хук useSelectWithApply
-     */
-    useWithApplyHook?: boolean;
-};
-type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
-declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
-declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
-    showClear?: boolean | undefined;
-    onClose?: (() => void) | undefined;
-    selectedDraft?: OptionShape[] | undefined;
-    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
-    Footer?: React.FC<FooterProps> | undefined;
-    Header?: React.FC<HeaderProps> | undefined;
-    headerProps?: HeaderProps | undefined;
-    showHeaderWithSelectAll?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: UseSelectWithApplyProps['showClear'];
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
-    /**
-     *  Дополнительные пропсы шапки модалки
-     */
-    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
-    /**
-     *  Дополнительные пропсы модалки
-     */
-    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
-    /**
-     *  Дополнительные пропсы футера модалки
-     */
-    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
-    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
-    /**
-     * Использовать ли хук useSelectWithApply
-     */
-    useWithApplyHook?: boolean;
-};
-declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: UseSelectWithApplyProps['showClear'];
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
-    /**
-     *  Дополнительные пропсы шапки модалки
-     */
-    modalHeaderProps?: Partial<import("./Component.mobile-b2c0420d").HeaderProps> | undefined;
-    /**
-     *  Дополнительные пропсы модалки
-     */
-    modalProps?: Partial<import("./Component.mobile-b2c0420d").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
-    /**
-     *  Дополнительные пропсы футера модалки
-     */
-    modalFooterProps?: Partial<import("./Component.mobile-b2c0420d").FooterProps> | undefined;
-    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
-    /**
-     * Использовать ли хук useSelectWithApply
-     */
-    useWithApplyHook?: boolean | undefined;
-} & React.RefAttributes<unknown>>;
-export { AdditionalMobileProps, SelectMobileProps, SelectMobile, OptionsListWithApply, SelectModalMobileProps, SelectModalMobile };

package/Component-1e06de61.js

@@ -1,165 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-require('./Component.js');
-require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('./components/base-select/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_header_Component = require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
-var components_arrow_Component = require('./components/arrow/Component.js');
-var components_baseSelectMobile_Component = require('./components/base-select-mobile/Component.js');
-var components_baseSelectMobile_footer_Component = require('./components/base-select-mobile/footer/Component.js');
-var components_field_Component = require('./components/field/Component.js');
-var components_optgroup_Component = require('./components/optgroup/Component.js');
-var components_option_Component = require('./components/option/Component.js');
-var components_optionsList_Component = require('./components/options-list/Component.js');
-var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
-require('@alfalab/core-components-form-control');
-require('@alfalab/hooks');
-var utils = require('./utils.js');
-require('@alfalab/core-components-badge');
-require('@alfalab/core-components-checkbox');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
-require('@alfalab/core-components-skeleton');
-require('./intersection-observer-411362a8.js');
-var consts = require('./consts.js');
-var presets_useSelectWithApply_optionsListWithApply_footer_Component = require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var OptionsListWithApply = React.forwardRef(function (_a, ref) {
-    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, headerProps = _a.headerProps, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "headerProps"]);
-    var getOptionProps = React.useCallback(function (option, index) {
-        var optionProps = defaultGetOptionProps(option, index);
-        var selected = option.key === SELECT_ALL_KEY
-            ? selectedDraft.length === flatOptions.length - 1
-            : selectedDraft.includes(option);
-        return tslib.__assign(tslib.__assign({}, optionProps), { selected: selected });
-    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
-    var handleApply = React.useCallback(function () {
-        onApply();
-        toggleMenu();
-    }, [onApply, toggleMenu]);
-    var handleClear = React.useCallback(function () {
-        onClear();
-        toggleMenu();
-    }, [onClear, toggleMenu]);
-    React.useEffect(function () {
-        var activeElement = document.activeElement;
-        return function () {
-            onClose();
-            if (activeElement) {
-                activeElement.focus();
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: showHeaderWithSelectAll ? React__default.default.createElement(Header, tslib.__assign({}, headerProps)) : undefined, footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) })));
-});
-
-var SELECT_ALL_KEY = 'select_all';
-var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
-function useSelectWithApply(_a) {
-    var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.optionsListProps, optionsListProps = _c === void 0 ? {} : _c, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.showSelectAll, showSelectAll = _e === void 0 ? false : _e, _f = _a.showHeaderWithSelectAll, showHeaderWithSelectAll = _f === void 0 ? false : _f;
-    var _g = React.useMemo(function () { return utils.processOptions(options, selected); }, [options, selected]), flatOptions = _g.flatOptions, selectedOptions = _g.selectedOptions;
-    var _h = React.useState(selectedOptions), selectedDraft = _h[0], setSelectedDraft = _h[1];
-    var selectedOptionsRef = React.useRef(selectedOptions);
-    var handleApply = function () {
-        onChange({
-            selected: selectedDraft[0],
-            selectedMultiple: selectedDraft,
-            initiator: null,
-        });
-    };
-    var handleClear = function () {
-        setSelectedDraft([]);
-        onChange({
-            selected: null,
-            selectedMultiple: [],
-            initiator: null,
-        });
-    };
-    var handleToggleAll = function () {
-        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
-    };
-    var handleChange = function (_a) {
-        var initiator = _a.initiator, restArgs = tslib.__rest(_a, ["initiator"]);
-        if (!initiator) {
-            onChange(tslib.__assign({ initiator: null }, restArgs));
-            return;
-        }
-        var initiatorSelected = selectedDraft.includes(initiator) ||
-            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
-        if (initiator.key === SELECT_ALL_KEY) {
-            setSelectedDraft(initiatorSelected ? [] : flatOptions);
-        }
-        else {
-            setSelectedDraft(initiatorSelected
-                ? selectedDraft.filter(function (o) { return o !== initiator; })
-                : selectedDraft.concat(initiator));
-        }
-    };
-    var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
-    React.useEffect(function () {
-        setSelectedDraft(selectedOptions);
-        selectedOptionsRef.current = selectedOptions;
-    }, [selectedOptions]);
-    var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib.__spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
-    return {
-        OptionsList: OptionsListWithApply,
-        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
-                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
-                checked: selectedDraft.length === flatOptions.length,
-                onChange: handleToggleAll,
-            } }),
-        allowUnselect: true,
-        multiple: true,
-        options: memoizedOptions,
-        onChange: handleChange,
-        selected: selected,
-    };
-}
-
-var VIRTUAL_OPTIONS_LIST_THRESHOLD$1 = 30;
-var SelectMobile = React.forwardRef(function (_a, ref) {
-    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 'm' : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 'm' : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, selected = _a.selected, options = _a.options, _t = _a.OptionsList, OptionsList = _t === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD$1
-        ? components_virtualOptionsList_Component.VirtualOptionsList
-        : components_optionsList_Component.OptionsList : _t, onChange = _a.onChange, bottomSheetProps = _a.bottomSheetProps, _u = _a.showClear, showClear = _u === void 0 ? true : _u, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _v = _a.useWithApplyHook, useWithApplyHook = _v === void 0 ? multiple : _v, restProps = tslib.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "selected", "options", "OptionsList", "onChange", "bottomSheetProps", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook"]);
-    var applyProps = useSelectWithApply({
-        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { Footer: components_baseSelectMobile_footer_Component.Footer }),
-        OptionsList: OptionsList,
-        selected: selected,
-        options: options,
-        onChange: onChange,
-        showClear: showClear,
-        showSelectAll: showSelectAll,
-    });
-    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: fieldProps, optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, bottomSheetProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, bottomSheetProps), optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
-});
-
-var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
-var SelectModalMobile = React.forwardRef(function (_a, ref) {
-    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 'm' : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 'm' : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, selected = _a.selected, options = _a.options, _t = _a.OptionsList, OptionsList = _t === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
-        ? components_virtualOptionsList_Component.VirtualOptionsList
-        : components_optionsList_Component.OptionsList : _t, onChange = _a.onChange, _u = _a.showClear, showClear = _u === void 0 ? true : _u, showSelectAll = _a.showSelectAll, _v = _a.useWithApplyHook, useWithApplyHook = _v === void 0 ? multiple : _v, modalHeaderProps = _a.modalHeaderProps, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, restProps = tslib.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "selected", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "useWithApplyHook", "modalHeaderProps", "showHeaderWithSelectAll"]);
-    var applyProps = useSelectWithApply({
-        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { Footer: components_baseSelectMobile_footer_Component.Footer }),
-        OptionsList: OptionsList,
-        selected: selected,
-        options: options,
-        onChange: onChange,
-        showClear: showClear,
-        showSelectAll: showSelectAll,
-    });
-    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: fieldProps, optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, optionsListProps: optionsListProps, modalHeaderProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, modalHeaderProps) }, restProps, (useWithApplyHook && applyProps))));
-});
-
-exports.OptionsListWithApply = OptionsListWithApply;
-exports.SELECT_ALL_KEY = SELECT_ALL_KEY;
-exports.SelectMobile = SelectMobile;
-exports.SelectModalMobile = SelectModalMobile;
-exports.useSelectWithApply = useSelectWithApply;