@alfalab/core-components 41.11.0 → 41.12.0

package/select/esm/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-9982b72e.js';
+export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-b436aedf.js';
 import 'tslib';
 import 'react';
 import '../../../skeleton/esm';
@@ -12,7 +12,7 @@ import '../../../checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark-mobile/Component.js';
-import '../intersection-observer-45b7375a.js';
+import '../intersection-observer-71fc11ef.js';
 import '../Component.js';
 import '../components/arrow/Component.js';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -28,6 +28,7 @@ import '../../../form-control/esm';
 import '../components/optgroup/Component.js';
 import '../components/options-list/Component.js';
 import '../../../scrollbar/esm';
+import './useSelectWithApply/options-list-with-apply/header/Component.js';
 import '../components/base-select-mobile/Component.js';
 import '../../../bottom-sheet/esm';
 import '../../../modal/esm/mobile';
@@ -39,4 +40,4 @@ import 'react-virtual';
 import './useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../utils.js';
 import '../consts.js';
-import '../getDataTestId-990b8efa.js';
+import '../getDataTestId-416fe68c.js';

package/select/esm/presets/useLazyLoading/hook.js

@@ -2,7 +2,7 @@ import { __spreadArray, __assign } from 'tslib';
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Skeleton } from '../../../../skeleton/esm';
 import { Option } from '../../components/option/Component.js';
-import '../../intersection-observer-45b7375a.js';
+import '../../intersection-observer-71fc11ef.js';
 import 'classnames';
 import '../../components/checkmark/Component.js';
 import '../../../../badge/esm';
@@ -11,7 +11,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark-mobile/Component.js';
 
-var styles = {"skeleton":"select__skeleton_1hxnw"};
+var styles = {"skeleton":"select__skeleton_1rzbd"};
 require('./index.css');
 
 var DEBOUNCE_TIMEOUT = 300;

package/select/esm/presets/useLazyLoading/index.css

@@ -1,5 +1,5 @@
 /* hash: porvs */
-.select__skeleton_1hxnw {
+.select__skeleton_1rzbd {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/select/esm/presets/useSelectWithApply/hook.js

@@ -4,7 +4,7 @@ import '../../Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../../components/base-select/Component.js';
-export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../../Component-9982b72e.js';
+export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../../Component-b436aedf.js';
 import '../../../../form-control/esm';
 import '@alfalab/hooks';
 import '../../../../badge/esm';
@@ -14,7 +14,7 @@ import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/options-list/Component.js';
 import '../../components/virtual-options-list/Component.js';
 import '../../../../skeleton/esm';
-import '../../intersection-observer-45b7375a.js';
+import '../../intersection-observer-71fc11ef.js';
 import '../../components/arrow/Component.js';
 import '../../components/field/Component.js';
 import '../../components/optgroup/Component.js';
@@ -27,6 +27,7 @@ import 'downshift';
 import '../../../../popover/esm';
 import '../../components/native-select/Component.js';
 import '../../../../scrollbar/esm';
+import './options-list-with-apply/header/Component.js';
 import '../../components/base-select-mobile/Component.js';
 import '../../../../bottom-sheet/esm';
 import '../../../../modal/esm/mobile';
@@ -35,6 +36,6 @@ import '../../../../base-modal/esm';
 import '../../../../button/esm';
 import './options-list-with-apply/footer/Component.js';
 import 'react-virtual';
-import '../../getDataTestId-990b8efa.js';
+import '../../getDataTestId-416fe68c.js';
 import '../../utils.js';
 import '../../consts.js';

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

@@ -1,8 +1,9 @@
 import 'tslib';
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../Component-9982b72e.js';
+export { O as OptionsListWithApply } from '../../../Component-b436aedf.js';
 import './footer/Component.js';
+import './header/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../../scrollbar/esm';
@@ -34,7 +35,7 @@ import '../../../../../button/esm';
 import '../../../components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '../../../../../skeleton/esm';
-import '../../../intersection-observer-45b7375a.js';
+import '../../../intersection-observer-71fc11ef.js';
 import '../../../consts.js';
 import '../../../utils.js';
-import '../../../getDataTestId-990b8efa.js';
+import '../../../getDataTestId-416fe68c.js';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '../../../../../../button/esm';
 
-var styles = {"footer":"select__footer_f9h6w"};
+var styles = {"footer":"select__footer_144g5"};
 require('./index.css');
 
 var Footer = function (_a) {

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

@@ -17,19 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} :root {
-
-    /* options list */
-
-    /* option */
-
-    /* checkmark */
-
-    /* optgroup */
-} .select__footer_f9h6w {
+} .select__footer_144g5 {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_f9h6w > * + * {
+} .select__footer_144g5 > * + * {
         margin-left: var(--gap-xs);
     }

package/select/esm/presets/useSelectWithApply/options-list-with-apply/header/Component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from 'react';
+import { CheckboxProps } from "../../../../../../checkbox";
+type HeaderProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: CheckboxProps['onChange'];
+    mobile?: boolean;
+};
+declare const Header: React.FC<HeaderProps>;
+export { HeaderProps, Header };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import { Checkbox } from '../../../../../../checkbox/esm';
+
+var styles = {"desktop":"select__desktop_1jjm0","mobile":"select__mobile_1jjm0"};
+require('./index.css');
+
+var Header = function (_a) {
+    var _b;
+    var onChange = _a.onChange, checked = _a.checked, indeterminate = _a.indeterminate, mobile = _a.mobile;
+    return (React.createElement("div", { className: cn((_b = {}, _b[styles.desktop] = !mobile, _b[styles.mobile] = mobile, _b)) },
+        React.createElement(Checkbox, { block: true, indeterminate: indeterminate, size: 'm', onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435' })));
+};
+
+export { Header };

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

@@ -0,0 +1,23 @@
+/* hash: 1t43i */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .select__desktop_1jjm0 {
+    padding: var(--gap-s);
+} .select__mobile_1jjm0 {
+    padding: var(--gap-s) var(--gap-xs);
+}

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

@@ -1 +1 @@
-export * from "../../../Component-9982b72e";
+export * from "../../../Component-b436aedf";

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

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../Component-9982b72e.js';
+export { O as OptionsListWithApply } from '../../../Component-b436aedf.js';
 import 'tslib';
 import 'react';
 import '../../../Component.js';
@@ -24,6 +24,7 @@ import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../../components/checkmark-mobile/Component.js';
 import '../../../components/options-list/Component.js';
 import '../../../../../scrollbar/esm';
+import './header/Component.js';
 import '../../../components/base-select-mobile/Component.js';
 import '../../../../../bottom-sheet/esm';
 import '../../../../../modal/esm/mobile';
@@ -33,8 +34,8 @@ import '../../../../../button/esm';
 import '../../../components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '../../../../../skeleton/esm';
-import '../../../intersection-observer-45b7375a.js';
+import '../../../intersection-observer-71fc11ef.js';
 import './footer/Component.js';
 import '../../../utils.js';
 import '../../../consts.js';
-import '../../../getDataTestId-990b8efa.js';
+import '../../../getDataTestId-416fe68c.js';

package/select/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_cw50s"};
+var styles = {"skeleton":"select__skeleton_1oaqe"};
 require('./index.css');
 
 function useSelectWithLoading(_a) {

package/select/esm/presets/useSelectWithLoading/index.css

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

package/select/esm/responsive.js

@@ -24,7 +24,8 @@ import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '../../scrollbar/esm';
-import './Component-9982b72e.js';
+import './Component-b436aedf.js';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './components/base-select-mobile/Component.js';
 import '../../bottom-sheet/esm';
 import '../../modal/esm/mobile';
@@ -34,8 +35,8 @@ import '../../button/esm';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
 import '../../skeleton/esm';
-import './intersection-observer-45b7375a.js';
+import './intersection-observer-71fc11ef.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
-import './getDataTestId-990b8efa.js';
+import './getDataTestId-416fe68c.js';
 import './utils.js';
 import './consts.js';

package/select/{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/select/index-3885b0d7.d.ts

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

package/select/index.js

@@ -3,7 +3,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-344072e1.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');
@@ -22,8 +22,10 @@ require('@juggle/resize-observer');
 require('downshift');
 require('../popover');
 require('@alfalab/hooks');
-require('./getDataTestId-8a4d1ce5.js');
+require('./getDataTestId-e8d9eb23.js');
 require('./components/native-select/Component.js');
+require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
+require('../checkbox');
 require('./components/base-select-mobile/Component.js');
 require('../bottom-sheet');
 require('../modal/mobile');
@@ -32,11 +34,10 @@ require('../base-modal');
 require('../button');
 require('../form-control');
 require('../badge');
-require('../checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../skeleton');
-require('./intersection-observer-2786d67d.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/select/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-344072e1.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-3eb05f44.js');
 require('tslib');
 require('react');
 require('./Component.js');
@@ -13,7 +13,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('../popover');
 require('@alfalab/hooks');
-require('./getDataTestId-8a4d1ce5.js');
+require('./getDataTestId-e8d9eb23.js');
 require('./utils.js');
 require('./components/native-select/Component.js');
 require('./components/field/Component.js');
@@ -29,6 +29,7 @@ require('./components/checkmark-mobile/Component.js');
 require('./components/options-list/Component.js');
 require('../scrollbar');
 require('./consts.js');
+require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 require('./components/base-select-mobile/Component.js');
 require('../bottom-sheet');
 require('../modal/mobile');
@@ -38,7 +39,7 @@ require('../button');
 require('./components/virtual-options-list/Component.js');
 require('react-virtual');
 require('../skeleton');
-require('./intersection-observer-2786d67d.js');
+require('./intersection-observer-c227d471.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 
 

package/select/modern/{Component-39ac1b03.d.ts → Component-c22703bb.d.ts}

@@ -2,9 +2,10 @@
 import React from "react";
 import { ReactNode } from "react";
 import { BottomSheetProps } from "../../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 = {
     /**
@@ -29,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>>;
@@ -38,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'> & {
     /**
@@ -60,6 +72,11 @@ type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> &
      *  Дополнительные пропсы футера модалки
      */
     modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
 };
 declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
     /**
@@ -82,5 +99,10 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
      *  Дополнительные пропсы футера модалки
      */
     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/select/modern/{Component-39ac1b03.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,7 +20,7 @@ import '../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../skeleton/modern';
-import './intersection-observer-45b7375a.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';
 import 'react-merge-refs';
@@ -30,14 +31,14 @@ import './components/native-select/Component.js';
 import './components/checkmark/Component.js';
 import './components/checkmark-mobile/Component.js';
 import '../../scrollbar/modern';
-import './getDataTestId-8418441c.js';
+import './getDataTestId-03736ddc.js';
 import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
 import '../../base-modal/modern';
 import '../../button/modern';
 import 'react-virtual';
 
-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
@@ -66,31 +67,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,
@@ -108,10 +112,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;
@@ -127,6 +129,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,
@@ -139,7 +147,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,
@@ -152,13 +160,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,
@@ -171,7 +182,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 && !restProps.modalFooterProps?.children && 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/select/modern/Component.js

@@ -21,7 +21,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
 import '../../scrollbar/modern';
-import './getDataTestId-8418441c.js';
+import './getDataTestId-03736ddc.js';
 import './utils.js';
 import './consts.js';
 

package/select/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-39ac1b03.js';
+import { S as SelectMobile } from './Component-c22703bb.js';
 import '../../form-control/modern';
 import '../../badge/modern';
 import '../../checkbox/modern';
@@ -23,6 +23,7 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '../../popover/modern';
 import './components/native-select/Component.js';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './components/base-select-mobile/Component.js';
 import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
@@ -30,11 +31,11 @@ import './components/base-select-mobile/footer/Component.js';
 import '../../base-modal/modern';
 import '../../button/modern';
 import '../../skeleton/modern';
-import './intersection-observer-45b7375a.js';
+import './intersection-observer-71fc11ef.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../scrollbar/modern';
 import 'react-virtual';
-import './getDataTestId-8418441c.js';
+import './getDataTestId-03736ddc.js';
 import './utils.js';
 import './consts.js';