@alfalab/core-components-select 15.3.0 → 16.0.1

package/modern/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "15.3.0",
+    "version": "16.0.1",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -15,23 +15,25 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.2.0",
-        "@alfalab/core-components-base-modal": "^5.5.0",
-        "@alfalab/core-components-bottom-sheet": "^6.11.3",
-        "@alfalab/core-components-button": "^9.1.0",
-        "@alfalab/core-components-checkbox": "^3.2.0",
-        "@alfalab/core-components-form-control": "^10.2.0",
-        "@alfalab/core-components-input": "^12.3.0",
-        "@alfalab/core-components-modal": "^8.1.0",
+        "@alfalab/core-components-badge": "^5.3.0",
+        "@alfalab/core-components-base-modal": "^5.6.0",
+        "@alfalab/core-components-bottom-sheet": "^6.11.5",
+        "@alfalab/core-components-button": "^10.0.1",
+        "@alfalab/core-components-checkbox": "^3.3.0",
+        "@alfalab/core-components-form-control": "^11.0.0",
+        "@alfalab/core-components-input": "^13.0.1",
+        "@alfalab/core-components-modal": "^8.1.2",
+        "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/core-components-scrollbar": "^2.2.0",
         "@alfalab/core-components-skeleton": "^4.1.0",
-        "@alfalab/core-components-shared": "^0.7.0",
+        "@alfalab/core-components-shared": "^0.8.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "@juggle/resize-observer": "^3.3.1",
+        "compute-scroll-into-view": "^3.1.0",
         "classnames": "^2.3.1",
-        "downshift": "^5.4.7",
+        "downshift": "^8.2.2",
         "intersection-observer": "^0.12.0",
         "react-merge-refs": "^1.1.0",
         "react-virtual": "^2.3.2",

package/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-8abfea97";
+export * from "../hook-ad89c253";

package/presets/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-0a5c9f56.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-df30325f.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-skeleton');
@@ -20,8 +20,9 @@ require('intersection-observer');
 require('../utils.js');
 require('../components/options-list/Component.js');
 require('react-merge-refs');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../consts.js');
 require('../components/optgroup/Component.js');
 require('./useSelectWithApply/options-list-with-apply/footer/Component.js');

package/presets/useSelectWithApply/hook.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-0a5c9f56.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-df30325f.js');
 require('../../components/options-list/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../consts.js');
 require('../../components/optgroup/Component.js');
 require('./options-list-with-apply/footer/Component.js');

package/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -6,13 +6,14 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-0a5c9f56.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-df30325f.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../../utils.js');
 require('../../../components/optgroup/Component.js');
 require('@alfalab/core-components-button/desktop');

package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"footer":"select__footer_b1owf"};
+var styles = {"footer":"select__footer_1vdbq"};
 require('./index.css')
 
 var Footer = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 10dvs */
+/* hash: 1tiyk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_b1owf {
+} .select__footer_1vdbq {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_b1owf > * + * {
+} .select__footer_1vdbq > * + * {
         margin-left: var(--gap-xs);
     }

package/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_1kxe6","mobile":"select__mobile_1kxe6"};
+var styles = {"desktop":"select__desktop_1ywyh","mobile":"select__mobile_1ywyh"};
 require('./index.css')
 
 var Header = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1hj4p */
+/* hash: t09wr */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_1kxe6 {
+} .select__desktop_1ywyh {
     padding: var(--gap-s);
-} .select__mobile_1kxe6 {
+} .select__mobile_1ywyh {
     padding: var(--gap-s) var(--gap-xs);
 }

package/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-0a5c9f56";
+export * from "../../../hook-df30325f";

package/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-0a5c9f56.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-df30325f.js');
 require('tslib');
 require('react');
 require('../../../utils.js');
 require('../../../components/options-list/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../../consts.js');
 require('../../../components/optgroup/Component.js');
 require('./footer/Component.js');

package/presets/useSelectWithLoading/hook.js

@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_164am"};
+var styles = {"skeleton":"select__skeleton_16ngw"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 2b85k */
-.select__skeleton_164am {
+/* hash: q34u7 */
+.select__skeleton_16ngw {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared/index.d.ts

@@ -1,5 +1,12 @@
-export * from "../components/index";
 export * from "../presets/index";
 export * from "../typings";
 export * from "../utils";
-export type { AdditionalMobileProps } from "../Component.mobile";
+export * from "../components/option/index";
+export * from "../components/base-option/index";
+export * from "../components/options-list/index";
+export * from "../components/virtual-options-list/index";
+export * from "../components/field/index";
+export * from "../components/arrow/index";
+export * from "../components/base-select/index";
+export * from "../components/optgroup/index";
+export * from "../components/footer/index";

package/shared/index.js

@@ -2,59 +2,51 @@
 
 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-0a5c9f56.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-df30325f.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');
+require('intersection-observer');
+require('../consts.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');
 require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('tslib');
-require('react-merge-refs');
-require('@juggle/resize-observer');
-require('downshift');
-require('@alfalab/core-components-popover');
-require('@alfalab/core-components-shared');
-require('@alfalab/hooks');
-require('../components/native-select/Component.js');
+require('@alfalab/core-components-checkbox');
 require('../components/checkmark/Component.js');
 require('@alfalab/core-components-badge');
-require('@alfalab/core-components-checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../components/checkmark-mobile/Component.js');
+require('../components/base-checkmark/Component.js');
+require('react-merge-refs');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('../consts.js');
+require('@alfalab/core-components-shared');
 require('react-virtual');
-require('../components/base-checkmark/Component.js');
-require('@alfalab/core-components-input');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-require('@alfalab/core-components-skeleton');
-require('intersection-observer');
-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');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('@juggle/resize-observer');
+require('compute-scroll-into-view');
+require('downshift');
+require('../components/native-select/Component.js');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-button/mobile');
 
 
 
-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;
@@ -68,3 +60,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/src/Component.desktop.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import {
-    FormControlDesktop,
-    FormControlDesktopProps,
-} from '@alfalab/core-components-form-control/desktop';
+import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop';
+import { Popover } from '@alfalab/core-components-popover';
 
 import { Arrow as DefaultArrow } from './components/arrow';
 import { BaseSelect } from './components/base-select';
@@ -12,16 +10,7 @@ import { Optgroup as DefaultOptgroup } from './components/optgroup';
 import { Option as DefaultOption } from './components/option';
 import { OptionsList as DefaultOptionsList } from './components/options-list';
 import { Search as DefaultSearch } from './components/search';
-import { BaseSelectProps } from './typings';
-
-export type SelectFieldProps = Omit<FormControlDesktopProps, 'size'> & Record<string, unknown>;
-
-export type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
+import { SelectDesktopProps } from './typings';
 
 export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
     (
@@ -39,6 +28,7 @@ export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
     ) => (
         <BaseSelect
             ref={ref}
+            view='desktop'
             Option={Option}
             Field={Field}
             fieldProps={{
@@ -49,6 +39,7 @@ export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
             Optgroup={Optgroup}
             OptionsList={OptionsList}
             Arrow={Arrow}
+            Popover={Popover}
             {...restProps}
         />
     ),

package/src/Component.mobile.tsx

@@ -1,62 +1,26 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
 
-import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet';
 import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile';
 
 import { Arrow as DefaultArrow } from './components/arrow';
-import { BaseSelectMobile } from './components/base-select-mobile';
-import { Footer } from './components/base-select-mobile/footer';
+import { BaseSelect } from './components/base-select';
 import { Field as DefaultField } from './components/field';
+import { Footer } from './components/footer';
 import { Optgroup as DefaultOptgroup } from './components/optgroup';
 import { Option as DefaultOption } from './components/option';
 import { OptionsList as DefaultOptionsList } from './components/options-list';
 import { Search as DefaultSearch } from './components/search';
 import { VirtualOptionsList as DefaultVirtualOptionsList } from './components/virtual-options-list';
-import { useSelectWithApply, UseSelectWithApplyProps } from './presets/useSelectWithApply/hook';
+import { useSelectWithApply } from './presets/useSelectWithApply/hook';
 import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component';
-import { AnyObject, BaseSelectProps } from './typings';
-
-export 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;
-};
-
-export type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> &
-    AdditionalMobileProps;
+import {
+    AnyObject,
+    BottomSheetSelectMobileProps,
+    ModalSelectMobileProps,
+    SelectMobileProps,
+} from './typings';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 
@@ -82,12 +46,12 @@ export const SelectMobile = forwardRef(
             Option = DefaultOption,
             Search = DefaultSearch,
             selected,
+            isBottomSheet = true,
             options,
             OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
                 ? DefaultVirtualOptionsList
                 : DefaultOptionsList,
             onChange,
-            bottomSheetProps,
             showClear = true,
             showSelectAll,
             showHeaderWithSelectAll,
@@ -98,6 +62,9 @@ export const SelectMobile = forwardRef(
         }: SelectMobileProps,
         ref,
     ) => {
+        const typedRestBottomSheetProps = restProps as BottomSheetSelectMobileProps;
+        const typedRestModalProps = restProps as ModalSelectMobileProps;
+
         const applyProps = useSelectWithApply({
             optionsListProps: {
                 ...(optionsListProps as AnyObject),
@@ -113,9 +80,14 @@ export const SelectMobile = forwardRef(
             showSelectAll,
         });
 
+        const bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (
+            <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
+        );
+
         return (
-            <BaseSelectMobile
+            <BaseSelect
                 ref={ref}
+                view='mobile'
                 autocomplete={autocomplete}
                 multiple={multiple}
                 allowUnselect={allowUnselect}
@@ -136,19 +108,28 @@ export const SelectMobile = forwardRef(
                 Optgroup={Optgroup}
                 Option={Option}
                 Search={Search}
-                isBottomSheet={true}
+                isBottomSheet={isBottomSheet}
                 options={options}
                 selected={selected}
                 onChange={onChange}
                 OptionsList={OptionsList}
                 showSearch={showSearch}
                 searchProps={searchProps}
-                bottomSheetProps={{
-                    bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
-                        <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
-                    ),
-                    ...bottomSheetProps,
-                }}
+                BottomSheet={BottomSheet}
+                ModalMobile={ModalMobile}
+                {...(isBottomSheet
+                    ? {
+                          bottomSheetProps: {
+                              bottomAddons,
+                              ...typedRestBottomSheetProps.bottomSheetProps,
+                          },
+                      }
+                    : {
+                          modalHeaderProps: {
+                              bottomAddons,
+                              ...typedRestModalProps.modalHeaderProps,
+                          },
+                      })}
                 optionsListProps={optionsListProps}
                 {...restProps}
                 {...(useWithApplyHook && applyProps)}