@alfalab/core-components-select 15.3.0 → 16.0.1

package/esm/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/{cssm/hook-8abfea97.d.ts → hook-ad89c253.d.ts}

@@ -81,9 +81,10 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     showSearch: boolean | undefined;
     searchProps: {
         value: string;
-        onChange: import("react").Dispatch<import("react").SetStateAction<string>>;
-        componentProps?: import("@alfalab/core-components-input").InputProps | undefined;
+        onChange: ((value: string) => void) | undefined;
+        componentProps?: import("./typings").SearchProps | undefined;
         accessor?: ((option: OptionShape) => string) | undefined;
+        filterFn?: ((optionText: string, search: string) => boolean) | undefined;
     } | undefined;
 };
 export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/{hook-0a5c9f56.js → hook-df30325f.js}

@@ -56,12 +56,16 @@ 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, showSearch = _a.showSearch, _g = _a.searchProps, searchProps = _g === void 0 ? {} : _g;
-    var _h = React.useState(''), search = _h[0], setSearch = _h[1];
+    var _h = React.useState(''), searchState = _h[0], setSearchState = _h[1];
+    var _j = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
+        ? [searchProps.value, searchProps.onChange]
+        : [searchState, setSearchState], search = _j[0], setSearch = _j[1];
     var accessor = searchProps.accessor || utils.defaultAccessor;
-    var _j = React.useMemo(function () {
-        return utils.processOptions(options, selected, showSearch ? function (option) { return utils.defaultFilterFn(accessor(option), search); } : undefined);
-    }, [accessor, options, search, selected, showSearch]), flatOptions = _j.flatOptions, selectedOptions = _j.selectedOptions;
-    var _k = React.useState(selectedOptions), selectedDraft = _k[0], setSelectedDraft = _k[1];
+    var filterFn = searchProps.filterFn || utils.defaultFilterFn;
+    var _k = React.useMemo(function () {
+        return utils.processOptions(options, selected, showSearch ? function (option) { return filterFn(accessor(option), search); } : undefined);
+    }, [filterFn, accessor, options, search, selected, showSearch]), flatOptions = _k.flatOptions, selectedOptions = _k.selectedOptions;
+    var _l = React.useState(selectedOptions), selectedDraft = _l[0], setSelectedDraft = _l[1];
     var selectedOptionsRef = React.useRef(selectedOptions);
     var handleApply = function () {
         onChange({

package/index.d.ts

@@ -1,2 +1,2 @@
-export { SelectResponsive as Select, SelectResponsiveProps as SelectProps } from "./Component.responsive";
-export {};
+export { SelectResponsive as Select } from "./Component.responsive";
+export type { SelectProps } from "./typings";

package/index.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq');
 require('./Component.desktop.js');
 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');
 require('./components/native-select/Component.js');
 require('./components/field/Component.js');
@@ -35,16 +37,15 @@ require('./components/search/Component.js');
 require('@alfalab/core-components-input');
 require('@alfalab/icons-glyph/MagnifierMIcon');
 require('./Component.mobile.js');
-require('@alfalab/core-components-form-control/mobile');
-require('./components/base-select-mobile/Component.js');
 require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
-require('./components/base-select-mobile/footer/Component.js');
+require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-modal/Component.mobile');
+require('./components/footer/Component.js');
 require('@alfalab/core-components-base-modal');
 require('@alfalab/core-components-button/mobile');
 require('./components/virtual-options-list/Component.js');
 require('react-virtual');
-require('./hook-0a5c9f56.js');
+require('./hook-df30325f.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('@alfalab/core-components-button/desktop');
 require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');

package/mobile/index.d.ts

@@ -1,5 +1,3 @@
 export { SelectMobile } from "../Component.mobile";
 export { SelectModalMobile } from "../Component.modal.mobile";
-export type { SelectMobileProps } from "../Component.mobile";
-export type { SelectModalMobileProps } from "../Component.modal.mobile";
-export {};
+export type { SelectMobileProps, SelectModalMobileProps } from "../typings";

package/mobile/index.js

@@ -6,19 +6,25 @@ var Component_mobile = require('../Component.mobile.js');
 var Component_modal_mobile = require('../Component.modal.mobile.js');
 require('tslib');
 require('react');
+require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-modal/Component.mobile');
 require('../components/arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('../components/base-select-mobile/Component.js');
+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-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-shared');
+require('@alfalab/hooks');
 require('../utils.js');
+require('../components/native-select/Component.js');
 require('../components/field/Component.js');
-require('@alfalab/hooks');
+require('../components/footer/Component.js');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-button/mobile');
 require('../components/optgroup/Component.js');
 require('../components/option/Component.js');
 require('../components/checkmark/Component.js');
@@ -28,17 +34,15 @@ 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');
 require('@alfalab/core-components-input');
 require('@alfalab/icons-glyph/MagnifierMIcon');
-require('../components/base-select-mobile/footer/Component.js');
-require('@alfalab/core-components-base-modal');
-require('@alfalab/core-components-button/mobile');
 require('../components/virtual-options-list/Component.js');
 require('react-virtual');
-require('../hook-0a5c9f56.js');
+require('../hook-df30325f.js');
 require('../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('@alfalab/core-components-button/desktop');
 require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');

package/modern/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/modern/Component.desktop.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { FormControlDesktop } from '@alfalab/core-components-form-control/modern/desktop';
+import { Popover } from '@alfalab/core-components-popover/modern';
 import { Arrow } from './components/arrow/Component.js';
 import { BaseSelect } from './components/base-select/Component.js';
 import { Field } from './components/field/Component.js';
@@ -11,8 +12,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/modern';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 import './utils.js';
@@ -23,14 +24,15 @@ import '@alfalab/core-components-checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
+import '@alfalab/core-components-mq/modern';
 import '@alfalab/core-components-scrollbar/modern';
 import './consts.js';
 import '@alfalab/core-components-input/modern';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 
-const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, Option: Option$1, Field: Field$1, fieldProps: {
+const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: {
         FormControlComponent: FormControlDesktop,
         ...fieldProps,
-    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, ...restProps })));
+    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));
 
 export { SelectDesktop };

package/modern/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/modern/Component.mobile.js

@@ -1,33 +1,37 @@
 import React, { forwardRef } from 'react';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet/modern';
 import { FormControlMobile } from '@alfalab/core-components-form-control/modern/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/modern/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-4eceefed.js';
+import { u as useSelectWithApply } from './hook-d879e08e.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/modern';
-import '@alfalab/core-components-modal/modern/mobile';
 import '@alfalab/core-components-shared/modern';
+import '@alfalab/hooks';
 import './utils.js';
+import './components/native-select/Component.js';
 import '@alfalab/core-components-base-modal/modern';
 import '@alfalab/core-components-button/modern/mobile';
-import '@alfalab/hooks';
 import './components/checkmark/Component.js';
 import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
+import '@alfalab/core-components-mq/modern';
 import '@alfalab/core-components-scrollbar/modern';
 import './consts.js';
 import '@alfalab/core-components-input/modern';
@@ -37,9 +41,11 @@ import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js
 import '@alfalab/core-components-button/modern/desktop';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
-const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, isBottomSheet = true, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
-    : OptionsList, onChange, bottomSheetProps, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
+    : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
+    const typedRestBottomSheetProps = restProps;
+    const typedRestModalProps = restProps;
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
@@ -54,13 +60,23 @@ const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allow
         showClear,
         showSelectAll,
     });
-    return (React.createElement(BaseSelectMobile, { ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: {
+    const bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true }));
+    return (React.createElement(BaseSelect, { 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: {
             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: {
-            bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true })),
-            ...bottomSheetProps,
-        }, optionsListProps: optionsListProps, ...restProps, ...(useWithApplyHook && applyProps) }));
+        }, 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: {
+                    bottomAddons,
+                    ...typedRestBottomSheetProps.bottomSheetProps,
+                },
+            }
+            : {
+                modalHeaderProps: {
+                    bottomAddons,
+                    ...typedRestModalProps.modalHeaderProps,
+                },
+            }), optionsListProps: optionsListProps, ...restProps, ...(useWithApplyHook && applyProps) }));
 });
 
 export { SelectMobile };