@alfalab/core-components-select 15.3.0 → 16.0.1

package/cssm/shared/index.js

@@ -2,74 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_arrow_Component = require('../components/arrow/Component.js');
-var components_baseSelect_Component = require('../components/base-select/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');
-var components_baseOption_Component = require('../components/base-option/Component.js');
-var components_search_Component = require('../components/search/Component.js');
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-244c8d6e.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-2f9ec939.js');
 var utils = require('../utils.js');
+var components_option_Component = require('../components/option/Component.js');
+var components_baseOption_Component = require('../components/base-option/Component.js');
+var components_optionsList_Component = require('../components/options-list/Component.js');
+var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
+var components_field_Component = require('../components/field/Component.js');
+var components_arrow_Component = require('../components/arrow/Component.js');
+var components_baseSelect_Component = require('../components/base-select/Component.js');
+var components_optgroup_Component = require('../components/optgroup/Component.js');
+var components_footer_Component = require('../components/footer/Component.js');
+require('tslib');
 require('react');
+require('@alfalab/core-components-skeleton/cssm');
+require('../presets/useSelectWithLoading/index.module.css');
+require('intersection-observer');
+require('../consts.js');
+require('../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
+require('@alfalab/core-components-button/cssm/desktop');
+require('../presets/useSelectWithApply/options-list-with-apply/footer/index.module.css');
+require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('../components/arrow/index.module.css');
-require('tslib');
-require('react-merge-refs');
-require('@juggle/resize-observer');
-require('downshift');
-require('@alfalab/core-components-popover/cssm');
-require('@alfalab/core-components-shared/cssm');
-require('@alfalab/hooks');
-require('../components/native-select/Component.js');
-require('../components/base-select/index.module.css');
-require('../components/field/index.module.css');
-require('../components/optgroup/index.module.css');
+require('@alfalab/core-components-checkbox/cssm');
+require('../presets/useSelectWithApply/options-list-with-apply/header/index.module.css');
 require('../components/checkmark/Component.js');
 require('@alfalab/core-components-badge/cssm');
-require('@alfalab/core-components-checkbox/cssm');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../components/checkmark/index.module.css');
 require('../components/checkmark-mobile/Component.js');
 require('../components/checkmark-mobile/index.module.css');
 require('../components/option/index.module.css');
+require('../components/base-checkmark/Component.js');
+require('../components/base-checkmark/index.module.css');
+require('../components/base-option/index.module.css');
+require('react-merge-refs');
+require('@alfalab/core-components-mq/cssm');
 require('@alfalab/core-components-scrollbar/cssm');
-require('../consts.js');
+require('@alfalab/core-components-shared/cssm');
 require('../components/options-list/index.module.css');
 require('react-virtual');
 require('../components/virtual-options-list/index.module.css');
-require('../components/base-checkmark/Component.js');
-require('../components/base-checkmark/index.module.css');
-require('../components/base-option/index.module.css');
-require('@alfalab/core-components-input/cssm');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-require('../components/search/index.module.css');
-require('@alfalab/core-components-skeleton/cssm');
-require('../presets/useSelectWithLoading/index.module.css');
-require('intersection-observer');
-require('../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
-require('@alfalab/core-components-button/cssm/desktop');
-require('../presets/useSelectWithApply/options-list-with-apply/footer/index.module.css');
-require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');
-require('../presets/useSelectWithApply/options-list-with-apply/header/index.module.css');
+require('@alfalab/hooks');
+require('../components/field/index.module.css');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('../components/arrow/index.module.css');
+require('@juggle/resize-observer');
+require('compute-scroll-into-view');
+require('downshift');
+require('../components/native-select/Component.js');
+require('../components/base-select/index.module.css');
+require('../components/base-select/mobile.module.css');
+require('../components/optgroup/index.module.css');
+require('@alfalab/core-components-base-modal/cssm');
+require('@alfalab/core-components-button/cssm/mobile');
+require('../components/footer/index.module.css');
 
 
 
-exports.Arrow = components_arrow_Component.Arrow;
-exports.BaseSelect = components_baseSelect_Component.BaseSelect;
-exports.Field = components_field_Component.Field;
-exports.Optgroup = components_optgroup_Component.Optgroup;
-exports.Option = components_option_Component.Option;
-exports.OptionsList = components_optionsList_Component.OptionsList;
-exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
-exports.BaseOption = components_baseOption_Component.BaseOption;
-exports.Search = components_search_Component.Search;
 exports.useSelectWithLoading = presets_useSelectWithLoading_hook.useSelectWithLoading;
 exports.useLazyLoading = presets_useLazyLoading_hook.useLazyLoading;
 exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Component.SELECT_ALL_KEY;
@@ -83,3 +76,12 @@ exports.lastIndexOf = utils.lastIndexOf;
 exports.processOptions = utils.processOptions;
 exports.usePrevious = utils.usePrevious;
 exports.useVisibleOptions = utils.useVisibleOptions;
+exports.Option = components_option_Component.Option;
+exports.BaseOption = components_baseOption_Component.BaseOption;
+exports.OptionsList = components_optionsList_Component.OptionsList;
+exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
+exports.Field = components_field_Component.Field;
+exports.Arrow = components_arrow_Component.Arrow;
+exports.BaseSelect = components_baseSelect_Component.BaseSelect;
+exports.Optgroup = components_optgroup_Component.Optgroup;
+exports.Footer = components_footer_Component.Footer;

package/cssm/typings.d.ts

@@ -1,6 +1,11 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { FormControlProps } from "@alfalab/core-components-form-control";
 import { InputProps } from "@alfalab/core-components-input";
+import { ModalProps } from "@alfalab/core-components-modal";
+import { ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
 import { PopoverProps } from "@alfalab/core-components-popover";
+import { UseSelectWithApplyProps } from "./hook-ad89c253";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -217,13 +222,14 @@ type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps & RefAttributes<HTMLInputElement>>;
+    Search?: FC<SearchProps>;
     /**
      * Настройки поиска
      */
     searchProps?: {
         componentProps?: SearchProps;
         accessor?: (option: OptionShape) => string;
+        filterFn?: (optionText: string, search: string) => boolean;
         value?: string;
         onChange?: (value: string) => void;
     };
@@ -528,10 +534,10 @@ type OptionProps = {
      */
     innerProps: {
         id: string;
-        onClick: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
-        role: string;
+        onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseMove?: (event: MouseEvent<HTMLDivElement>) => void;
+        role?: string;
     } & RefAttributes<HTMLDivElement> & AriaAttributes;
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -572,5 +578,78 @@ type CheckmarkProps = {
      */
     icon?: FC<SVGProps<SVGSVGElement>>;
 };
-type SearchProps = InputProps;
-export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps };
+type SearchProps = InputProps & RefAttributes<HTMLInputElement>;
+type SelectFieldProps = Omit<FormControlProps, 'size'> & Record<string, unknown>;
+type AdditionalMobileProps = {
+    /**
+     * Показывать кнопку 'Сбросить' в футере мобильного компонента
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка у мобильного компонента
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply в мобильном компоненте
+     */
+    useWithApplyHook?: boolean;
+};
+type BottomSheetSelectMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+};
+type ModalSelectMobileProps = {
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<ModalProps & RefAttributes<HTMLDivElement>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<ModalFooterProps>;
+};
+type ConditionalMobileProps = ({
+    isBottomSheet?: true;
+} & BottomSheetSelectMobileProps) | ({
+    isBottomSheet: false;
+} & ModalSelectMobileProps);
+type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark'> & AdditionalMobileProps & ModalSelectMobileProps;
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark'> & AdditionalMobileProps & ConditionalMobileProps;
+type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };

package/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { SelectDesktop, SelectDesktopProps } from "../Component.desktop";
-export {};
+export { SelectDesktop } from "../Component.desktop";
+export type { SelectDesktopProps } from "../typings";

package/desktop/index.js

@@ -6,14 +6,15 @@ var Component_desktop = require('../Component.desktop.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-form-control/desktop');
+require('@alfalab/core-components-popover');
 require('../components/arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('../components/base-select/Component.js');
 require('react-merge-refs');
 require('@juggle/resize-observer');
+require('compute-scroll-into-view');
 require('downshift');
-require('@alfalab/core-components-popover');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 require('../utils.js');
@@ -28,6 +29,7 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../components/checkmark-mobile/Component.js');
 require('../components/options-list/Component.js');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
 require('../consts.js');
 require('../components/search/Component.js');

package/esm/Component.desktop.d.ts

@@ -1,18 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { FormControlDesktopProps } from "@alfalab/core-components-form-control/desktop";
-import { BaseSelectProps } from "./typings";
-type SelectFieldProps = Omit<FormControlDesktopProps, 'size'> & Record<string, unknown>;
-type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
-declare const SelectDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps | undefined;
+declare const SelectDesktop: React.ForwardRefExoticComponent<Omit<import("./typings").BaseSelectProps, "fieldProps"> & {
+    fieldProps?: import("./typings").SelectFieldProps | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { SelectFieldProps, SelectDesktopProps, SelectDesktop };
+export { SelectDesktop };

package/esm/Component.desktop.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { FormControlDesktop } from '@alfalab/core-components-form-control/esm/desktop';
+import { Popover } from '@alfalab/core-components-popover/esm';
 import { Arrow } from './components/arrow/Component.js';
 import { BaseSelect } from './components/base-select/Component.js';
 import { Field } from './components/field/Component.js';
@@ -12,8 +13,8 @@ import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'compute-scroll-into-view';
 import 'downshift';
-import '@alfalab/core-components-popover/esm';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import './utils.js';
@@ -24,6 +25,7 @@ import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
+import '@alfalab/core-components-mq/esm';
 import '@alfalab/core-components-scrollbar/esm';
 import './consts.js';
 import '@alfalab/core-components-input/esm';
@@ -31,7 +33,7 @@ import '@alfalab/icons-glyph/MagnifierMIcon';
 
 var SelectDesktop = forwardRef(function (_a, ref) {
     var _b = _a.Arrow, Arrow$1 = _b === void 0 ? Arrow : _b, _c = _a.Field, Field$1 = _c === void 0 ? Field : _c, _d = _a.OptionsList, OptionsList$1 = _d === void 0 ? OptionsList : _d, _e = _a.Optgroup, Optgroup$1 = _e === void 0 ? Optgroup : _e, _f = _a.Option, Option$1 = _f === void 0 ? Option : _f, _g = _a.Search, Search$1 = _g === void 0 ? Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = __rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
-    return (React.createElement(BaseSelect, __assign({ ref: ref, Option: Option$1, Field: Field$1, fieldProps: __assign({ FormControlComponent: FormControlDesktop }, fieldProps), Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1 }, restProps)));
+    return (React.createElement(BaseSelect, __assign({ ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: __assign({ FormControlComponent: FormControlDesktop }, fieldProps), Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover }, restProps)));
 });
 
 export { SelectDesktop };

package/esm/Component.mobile.d.ts

@@ -1,41 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode } from "react";
-import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
-import { UseSelectWithApplyProps } from "./hook-8abfea97";
-import { BaseSelectProps } from "./typings";
-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>>;
-export { AdditionalMobileProps, SelectMobileProps, SelectMobile };
+import { SelectMobileProps } from "./typings";
+declare const SelectMobile: React.ForwardRefExoticComponent<SelectMobileProps & React.RefAttributes<unknown>>;
+export { SelectMobile };

package/esm/Component.mobile.js

@@ -1,34 +1,38 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet/esm';
 import { FormControlMobile } from '@alfalab/core-components-form-control/esm/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/esm/Component.mobile';
 import { Arrow } from './components/arrow/Component.js';
-import { BaseSelectMobile } from './components/base-select-mobile/Component.js';
-import { Footer } from './components/base-select-mobile/footer/Component.js';
+import { BaseSelect } from './components/base-select/Component.js';
 import { Field } from './components/field/Component.js';
+import { Footer } from './components/footer/Component.js';
 import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';
 import { OptionsList } from './components/options-list/Component.js';
 import { Search } from './components/search/Component.js';
 import { VirtualOptionsList } from './components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from './hook-70d58270.js';
+import { u as useSelectWithApply } from './hook-d82699d1.js';
 import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import 'react-merge-refs';
+import '@juggle/resize-observer';
+import 'compute-scroll-into-view';
 import 'downshift';
-import '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
 import '@alfalab/core-components-shared/esm';
+import '@alfalab/hooks';
 import './utils.js';
+import './components/native-select/Component.js';
 import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-button/esm/mobile';
-import '@alfalab/hooks';
 import './components/checkmark/Component.js';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
+import '@alfalab/core-components-mq/esm';
 import '@alfalab/core-components-scrollbar/esm';
 import './consts.js';
 import '@alfalab/core-components-input/esm';
@@ -39,9 +43,11 @@ import '@alfalab/core-components-button/esm/desktop';
 
 var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 var SelectMobile = 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$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.Search, Search$1 = _t === void 0 ? Search : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList$1 = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    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$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.Search, Search$1 = _t === void 0 ? Search : _t, selected = _a.selected, _u = _a.isBottomSheet, isBottomSheet = _u === void 0 ? true : _u, options = _a.options, _v = _a.OptionsList, OptionsList$1 = _v === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
         ? VirtualOptionsList
-        : OptionsList : _u, onChange = _a.onChange, bottomSheetProps = _a.bottomSheetProps, _v = _a.showClear, showClear = _v === void 0 ? true : _v, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _w = _a.useWithApplyHook, useWithApplyHook = _w === void 0 ? multiple : _w, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = __rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "options", "OptionsList", "onChange", "bottomSheetProps", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
+        : OptionsList : _v, onChange = _a.onChange, _w = _a.showClear, showClear = _w === void 0 ? true : _w, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _x = _a.useWithApplyHook, useWithApplyHook = _x === void 0 ? multiple : _x, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = __rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "isBottomSheet", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
+    var typedRestBottomSheetProps = restProps;
+    var typedRestModalProps = restProps;
     var applyProps = useSelectWithApply({
         optionsListProps: __assign(__assign({}, optionsListProps), { Footer: Footer }),
         OptionsList: OptionsList$1,
@@ -53,7 +59,14 @@ var SelectMobile = forwardRef(function (_a, ref) {
         showClear: showClear,
         showSelectAll: showSelectAll,
     });
-    return (React.createElement(BaseSelectMobile, __assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: __assign({ FormControlComponent: FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, bottomSheetProps: __assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, __assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, bottomSheetProps), optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
+    var bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, __assign({}, applyProps.optionsListProps.headerProps, { mobile: true })));
+    return (React.createElement(BaseSelect, __assign({ ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: __assign({ FormControlComponent: FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, isBottomSheet: isBottomSheet, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile }, (isBottomSheet
+        ? {
+            bottomSheetProps: __assign({ bottomAddons: bottomAddons }, typedRestBottomSheetProps.bottomSheetProps),
+        }
+        : {
+            modalHeaderProps: __assign({ bottomAddons: bottomAddons }, typedRestModalProps.modalHeaderProps),
+        }), { optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
 });
 
 export { SelectMobile };