@alfalab/core-components-select 14.1.2 → 14.3.0

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

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../Component-2ff63ae2.js';
+export { O as OptionsListWithApply } from '../../../Component-b436aedf.js';
 import 'tslib';
 import 'react';
 import '../../../Component.js';
@@ -11,7 +11,7 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
-import '../../../getDataTestId-d8d91b2e.js';
+import '../../../getDataTestId-416fe68c.js';
 import '../../../utils.js';
 import '../../../components/native-select/Component.js';
 import '../../../components/field/Component.js';
@@ -27,6 +27,7 @@ import '../../../components/checkmark-mobile/Component.js';
 import '../../../components/options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
 import '../../../consts.js';
+import './header/Component.js';
 import '../../../components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/esm';
 import '@alfalab/core-components-modal/esm/mobile';
@@ -36,5 +37,5 @@ import '@alfalab/core-components-button/esm';
 import '../../../components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/esm';
-import '../../../intersection-observer-210062db.js';
+import '../../../intersection-observer-71fc11ef.js';
 import './footer/Component.js';

package/esm/presets/useSelectWithLoading/hook.js

@@ -10,7 +10,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark-mobile/Component.js';
 
-var styles = {"skeleton":"select__skeleton_twuw3"};
+var styles = {"skeleton":"select__skeleton_1oaqe"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/esm/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: gii20 */
-.select__skeleton_twuw3 {
+/* hash: 1q6yg */
+.select__skeleton_1oaqe {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/esm/responsive.js

@@ -11,7 +11,7 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/esm';
-import './getDataTestId-d8d91b2e.js';
+import './getDataTestId-416fe68c.js';
 import './utils.js';
 import './components/native-select/Component.js';
 import './components/field/Component.js';
@@ -27,7 +27,8 @@ import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
 import './consts.js';
-import './Component-2ff63ae2.js';
+import './Component-b436aedf.js';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/esm';
 import '@alfalab/core-components-modal/esm/mobile';
@@ -37,5 +38,5 @@ import '@alfalab/core-components-button/esm';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/esm';
-import './intersection-observer-210062db.js';
+import './intersection-observer-71fc11ef.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';

package/{hook-4b555174.d.ts → hook-b4e70cb0.d.ts}

@@ -29,17 +29,22 @@ type UseSelectWithApplyProps = {
      * Показывать пункт "Выбрать все"
      */
     showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
 };
 declare const SELECT_ALL_KEY = "select_all";
-declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, }: UseSelectWithApplyProps): {
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./index").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined; /**
-         * Пропсы, которые будут прокинуты в компонент списка
-         */
+        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
+        Header?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps> | undefined;
+        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined;
+        showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
         OptionsList: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
@@ -48,6 +53,12 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         onApply: () => void;
         onClose: () => void;
         selectedDraft: OptionShape[];
+        showHeaderWithSelectAll: boolean;
+        headerProps: {
+            indeterminate: boolean;
+            checked: boolean;
+            onChange: () => void;
+        };
     };
     allowUnselect: boolean;
     multiple: boolean;

package/index-3885b0d7.d.ts

@@ -1,3 +1,3 @@
 declare const isClient: () => boolean;
 export { isClient };
-export * from "./getDataTestId-d8391785";
+export * from "./getDataTestId-e8d9eb23";

package/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 var components_arrow_Component = require('./components/arrow/Component.js');
 var components_baseSelect_Component = require('./components/base-select/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-00c64376.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-3eb05f44.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');
@@ -24,8 +24,10 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('./getDataTestId-d8391785.js');
+require('./getDataTestId-e8d9eb23.js');
 require('./components/native-select/Component.js');
+require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
+require('@alfalab/core-components-checkbox');
 require('./components/base-select-mobile/Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
@@ -34,11 +36,10 @@ require('@alfalab/core-components-base-modal');
 require('@alfalab/core-components-button');
 require('@alfalab/core-components-form-control');
 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-131fbe35.js');
+require('./intersection-observer-c227d471.js');
 require('./consts.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('./components/checkmark/Component.js');

package/mobile.d.ts

@@ -0,0 +1,4 @@
+export { SelectMobile } from "./components/select-mobile/index";
+export { SelectModalMobile } from "./components/select-modal-mobile/index";
+export type { SelectMobileProps } from "./components/select-mobile/index";
+export type { SelectModalMobileProps } from "./components/select-modal-mobile/index";

package/mobile.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-3eb05f44.js');
+require('tslib');
+require('react');
+require('./Component.js');
+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('downshift');
+require('@alfalab/core-components-popover');
+require('@alfalab/hooks');
+require('./getDataTestId-e8d9eb23.js');
+require('./utils.js');
+require('./components/native-select/Component.js');
+require('./components/field/Component.js');
+require('@alfalab/core-components-form-control');
+require('./components/optgroup/Component.js');
+require('./components/option/Component.js');
+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/options-list/Component.js');
+require('@alfalab/core-components-scrollbar');
+require('./consts.js');
+require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
+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-base-modal');
+require('@alfalab/core-components-button');
+require('./components/virtual-options-list/Component.js');
+require('react-virtual');
+require('@alfalab/core-components-skeleton');
+require('./intersection-observer-c227d471.js');
+require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
+
+
+
+exports.SelectMobile = presets_useSelectWithApply_optionsListWithApply_Component.SelectMobile;
+exports.SelectModalMobile = presets_useSelectWithApply_optionsListWithApply_Component.SelectModalMobile;

package/modern/Component-3885b0d7.d.ts

@@ -51,7 +51,7 @@ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
 type NativeProps = HTMLAttributes<HTMLSpanElement>;
 type TextBaseProps = {
     /**
-     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
      */
     view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
     /**

package/{esm/Component-2ff63ae2.d.ts → modern/Component-c22703bb.d.ts}

@@ -2,9 +2,11 @@
 import React from "react";
 import { ReactNode } from "react";
 import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
-import { UseSelectWithApplyProps } from "./hook-4b555174";
+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 = {
     /**
      * Футер
@@ -28,6 +30,14 @@ type AdditionalMobileProps = {
      * Показывать пункт "Выбрать все"
      */
     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>>;
@@ -37,6 +47,9 @@ declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListP
     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'> & {
     /**
@@ -47,6 +60,23 @@ type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> &
      * Показывать пункт "Выбрать все"
      */
     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"> & {
     /**
@@ -57,5 +87,22 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
      * Показывать пункт "Выбрать все"
      */
     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/modern/{Component-0b711513.js → Component-c22703bb.js}

@@ -3,6 +3,7 @@ import './Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import './components/base-select/Component.js';
+import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import { Arrow } from './components/arrow/Component.js';
 import { BaseSelectMobile } from './components/base-select-mobile/Component.js';
 import { Footer as Footer$1 } from './components/base-select-mobile/footer/Component.js';
@@ -19,11 +20,11 @@ import '@alfalab/core-components-checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '@alfalab/core-components-skeleton/modern';
-import './intersection-observer-210062db.js';
+import './intersection-observer-71fc11ef.js';
 import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
 import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 
-const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGetOptionProps, showClear = true, selectedDraft = [], flatOptions = [], OptionsList: OptionsList$1 = OptionsList, onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = DEFAULT_VISIBLE_OPTIONS, Footer: Footer$1 = Footer, ...restProps }, ref) => {
+const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGetOptionProps, showClear = true, showHeaderWithSelectAll, selectedDraft = [], flatOptions = [], OptionsList: OptionsList$1 = OptionsList, onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = DEFAULT_VISIBLE_OPTIONS, Footer: Footer$1 = Footer, Header: Header$1 = Header, headerProps, ...restProps }, ref) => {
     const getOptionProps = useCallback((option, index) => {
         const optionProps = defaultGetOptionProps(option, index);
         const selected = option.key === SELECT_ALL_KEY
@@ -52,31 +53,34 @@ const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGe
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) }));
+    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: showHeaderWithSelectAll ? React.createElement(Header$1, { ...headerProps }) : undefined, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) }));
 });
 
 const SELECT_ALL_KEY = 'select_all';
 const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
-function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, }) {
+function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, }) {
     const { flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected), [options, selected]);
     const [selectedDraft, setSelectedDraft] = useState(selectedOptions);
     const selectedOptionsRef = useRef(selectedOptions);
-    const handleApply = useCallback(() => {
+    const handleApply = () => {
         onChange({
             selected: selectedDraft[0],
             selectedMultiple: selectedDraft,
             initiator: null,
         });
-    }, [onChange, selectedDraft]);
-    const handleClear = useCallback(() => {
+    };
+    const handleClear = () => {
         setSelectedDraft([]);
         onChange({
             selected: null,
             selectedMultiple: [],
             initiator: null,
         });
-    }, [onChange]);
-    const handleChange = useCallback(({ initiator, ...restArgs }) => {
+    };
+    const handleToggleAll = () => {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    const handleChange = ({ initiator, ...restArgs }) => {
         if (!initiator) {
             onChange({
                 initiator: null,
@@ -94,10 +98,8 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
                 ? selectedDraft.filter((o) => o !== initiator)
                 : selectedDraft.concat(initiator));
         }
-    }, [flatOptions, onChange, selectedDraft]);
-    const handleClose = useCallback(() => {
-        setSelectedDraft(selectedOptionsRef.current);
-    }, []);
+    };
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
     useEffect(() => {
         setSelectedDraft(selectedOptions);
         selectedOptionsRef.current = selectedOptions;
@@ -113,6 +115,12 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
             onApply: handleApply,
             onClose: handleClose,
             selectedDraft,
+            showHeaderWithSelectAll,
+            headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            },
         },
         allowUnselect: true,
         multiple: true,
@@ -125,7 +133,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
 const VIRTUAL_OPTIONS_LIST_THRESHOLD$1 = 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, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD$1
     ? VirtualOptionsList
-    : OptionsList, onChange, bottomSheetProps, showClear = true, showSelectAll, ...restProps }, ref) => {
+    : OptionsList, onChange, bottomSheetProps, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
@@ -138,13 +146,16 @@ 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: fieldProps, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, bottomSheetProps: bottomSheetProps, optionsListProps: optionsListProps, ...restProps, ...(multiple && !bottomSheetProps?.actionButton && applyProps) }));
+    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: fieldProps, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, bottomSheetProps: {
+            bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true })),
+            ...bottomSheetProps,
+        }, optionsListProps: optionsListProps, ...restProps, ...(useWithApplyHook && applyProps) }));
 });
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 const SelectModalMobile = 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, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
-    : OptionsList, onChange, showClear = true, showSelectAll, ...restProps }, ref) => {
+    : OptionsList, onChange, showClear = true, showSelectAll, useWithApplyHook = multiple, modalHeaderProps, showHeaderWithSelectAll, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
@@ -157,7 +168,10 @@ const SelectModalMobile = forwardRef(({ autocomplete = false, multiple = false,
         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: fieldProps, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, optionsListProps: optionsListProps, ...restProps, ...(multiple && applyProps) }));
+    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: fieldProps, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, optionsListProps: optionsListProps, modalHeaderProps: {
+            bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true })),
+            ...modalHeaderProps,
+        }, ...restProps, ...(useWithApplyHook && applyProps) }));
 });
 
 export { OptionsListWithApply as O, SelectMobile as S, SelectModalMobile as a, SELECT_ALL_KEY as b, useSelectWithApply as u };

package/modern/Component.js

@@ -12,7 +12,7 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
-import './getDataTestId-b301a7a9.js';
+import './getDataTestId-03736ddc.js';
 import './utils.js';
 import './components/native-select/Component.js';
 import '@alfalab/core-components-form-control/modern';

package/modern/Component.mobile-b2c0420d.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { NavigationBarProps } from "./types-ebda875c";
+import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
+type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+declare const Header: FC<HeaderProps>;
+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 View = "desktop" | "mobile";
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps["size"]>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+declare const Content: FC<ContentProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+declare const ModalContext: import("react").Context<BaseModalContext>;
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+    Closer: React.FC<CloserProps>;
+};
+export * from "./Component-3885b0d7";
+export * from "./index-ebda875c";
+export type { NavigationBarProps } from "./types-ebda875c";
+export { HeaderProps, Header, Content, FooterProps, Footer, Modal, ResponsiveContext, ModalContext, ModalMobile };

package/modern/Component.responsive.js

@@ -4,7 +4,7 @@ import { Select } from './Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import './components/base-select/Component.js';
-import { S as SelectMobile } from './Component-0b711513.js';
+import { S as SelectMobile } from './Component-c22703bb.js';
 import '@alfalab/core-components-form-control/modern';
 import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-checkbox/modern';
@@ -23,8 +23,9 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
-import './getDataTestId-b301a7a9.js';
+import './getDataTestId-03736ddc.js';
 import './components/native-select/Component.js';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/modern';
 import '@alfalab/core-components-modal/modern/mobile';
@@ -32,7 +33,7 @@ import './components/base-select-mobile/footer/Component.js';
 import '@alfalab/core-components-base-modal/modern';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-skeleton/modern';
-import './intersection-observer-210062db.js';
+import './intersection-observer-71fc11ef.js';
 import './consts.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '@alfalab/core-components-scrollbar/modern';

package/modern/components/arrow/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 
-const styles = {"arrow":"select__arrow_1xf52","open":"select__open_1xf52"};
+const styles = {"arrow":"select__arrow_pzzaq","open":"select__open_pzzaq"};
 require('./index.css')
 
 const Arrow = ({ open, className }) => (React.createElement(ChevronDownMIcon, { className: cn(styles.arrow, className, { [styles.open]: open }) }));

package/modern/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: avrnq */
+/* hash: gh5a9 */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e; /* 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 */
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_1xf52 {
+} .select__arrow_pzzaq {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_1xf52 {
+} .select__open_pzzaq {
     transform: var(--arrow-transform);
 }

package/modern/components/base-checkmark/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_1uil6","single":"select__single_1uil6","selected":"select__selected_1uil6"};
+const styles = {"checkmark":"select__checkmark_8e0mi","single":"select__single_8e0mi","selected":"select__selected_8e0mi"};
 require('./index.css')
 
 const BaseCheckmark = ({ selected, disabled = false, className, multiple, }) => {