@alfalab/core-components 46.0.0-beta.7 → 46.1.0-beta.0

package/select/esm/typings.d.ts

@@ -5,7 +5,7 @@ import { InputProps } from "../../input";
 import { ModalProps } from "../../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../../modal/shared";
 import { PopoverProps } from "../../popover";
-import { UseSelectWithApplyProps } from "./hook-d4f77aed";
+import { UseSelectWithApplyProps } from "./hook-e97e6ebb";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -479,6 +479,10 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +502,22 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик выбранных вариантов
+     */
+    setSelectedItems?: (items: OptionShape[]) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptionProps = {
     /**

package/select/{hook-504cecce.d.ts → hook-a65146fb.d.ts}

@@ -12,5 +12,6 @@ declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListP
     Header?: React.FC<HeaderProps> | undefined;
     headerProps?: HeaderProps | undefined;
     showHeaderWithSelectAll?: boolean | undefined;
+    setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { OptionsListWithApply };

package/select/{hook-504cecce.js → hook-a65146fb.js}

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var OptionsListWithApply = React.forwardRef(function (_a, ref) {
-    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, header = _a.header, headerProps = _a.headerProps, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps"]);
+    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, header = _a.header, headerProps = _a.headerProps, setSelectedDraft = _a.setSelectedDraft, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps", "setSelectedDraft"]);
     var getOptionProps = React.useCallback(function (option, index) {
         var optionProps = defaultGetOptionProps(option, index);
         var selected = option.key === SELECT_ALL_KEY
@@ -30,6 +30,9 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
         onClear();
         toggleMenu();
     }, [onClear, toggleMenu]);
+    var handleSelectedItems = React.useCallback(function (items) {
+        setSelectedDraft === null || setSelectedDraft === void 0 ? void 0 : setSelectedDraft(items);
+    }, [setSelectedDraft]);
     React.useEffect(function () {
         var activeElement = document.activeElement;
         return function () {
@@ -47,7 +50,7 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
             header,
             showHeaderWithSelectAll && React__default.default.createElement(Header, tslib.__assign({}, headerProps))));
     };
-    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
+    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), selectedItems: selectedDraft, setSelectedItems: handleSelectedItems, footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
 });
 
 var SELECT_ALL_KEY = 'select_all';
@@ -108,7 +111,7 @@ function useSelectWithApply(_a) {
     var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib.__spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
     return {
         OptionsList: OptionsListWithApply,
-        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
+        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, setSelectedDraft: setSelectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
                 indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
                 checked: selectedDraft.length === flatOptions.length,
                 onChange: handleToggleAll,

package/select/{esm/hook-d4f77aed.d.ts → hook-e97e6ebb.d.ts}

@@ -55,6 +55,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         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;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
         OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
@@ -63,6 +64,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         onApply: () => void;
         onClose: () => void;
         selectedDraft: OptionShape[];
+        setSelectedDraft: import("react").Dispatch<import("react").SetStateAction<OptionShape[]>>;
         showHeaderWithSelectAll: boolean;
         headerProps: {
             indeterminate: boolean;

package/select/mobile/Component.mobile.js

@@ -14,7 +14,7 @@ var components_option_Component = require('../components/option/Component.js');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_search_Component = require('../components/search/Component.js');
 var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-a65146fb.js');
 var presets_useSelectWithApply_optionsListWithApply_header_Component = require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/select/modern/Component.responsive.js

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { SelectDesktop } from './desktop/Component.desktop.js';
 import { SelectMobile } from './mobile/Component.mobile.js';
 import './mobile/Component.modal.mobile.js';
@@ -14,6 +13,7 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import 'downshift';
+import '../../shared/modern';
 import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
@@ -40,12 +40,12 @@ import '../../base-modal/modern';
 import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-f45c958e.js';
+import './hook-6a49b1bd.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 
-const SelectResponsive = forwardRef(({ onScroll, fieldProps, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
+const SelectResponsive = forwardRef(({ onScroll, fieldProps, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
     if (isDesktop) {
         return (React.createElement(SelectDesktop, { onScroll: onScroll, ...restProps, ref: ref, fieldProps: fieldProps }));

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

@@ -350,7 +350,7 @@ const BaseSelect = forwardRef(
         return (React.createElement("div", { ...menuProps, ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) },
             React.createElement(OptionsList, { ...listProps, ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn({ [mobileStyles.optionsList]: view === 'mobile' }), scrollbarClassName: cn({ [mobileStyles.scrollbar]: view === 'mobile' }), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn(optionGroupClassName, {
                     [mobileStyles.optionGroup]: view === 'mobile',
-                }), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll }),
+                }), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search }),
             view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
     };
     const renderInPopover = () => {

package/select/modern/components/checkmark/index.css

@@ -1,7 +1,7 @@
 /* hash: lgfms */
 :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 */ /* 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 {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-status-positive: #0cc44d; /* 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 {
@@ -35,7 +35,7 @@
     --select-checkmark-before-display-multiple: block;
     --select-checkmark-after-display-single: none;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-neutral-1500);
+    --select-checkmark-background: var(--color-light-neutral-translucent-1300);
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */

package/select/modern/components/options-list/Component.js

@@ -16,7 +16,7 @@ const createCounter = () => {
     // eslint-disable-next-line no-plusplus
     return () => count++;
 };
-const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, scrollbarClassName, Option, getOptionProps, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, }, ref) => {
+const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, scrollbarClassName, Option, getOptionProps, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, selectedItems, search, setSelectedItems, }, ref) => {
     const [scrollTop, setScrollTop] = useState(true);
     const [scrollBottom, setScrollBottom] = useState(false);
     const query = '(max-width: 1023px)';
@@ -34,7 +34,13 @@ const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, sc
     const listRef = useRef(null);
     const scrollbarRef = useRef(null);
     const counter = createCounter();
-    const renderGroup = (group) => (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map((option) => renderOption(option, counter()))));
+    const renderGroup = (group) => {
+        const groupSelectedItems = selectedItems?.filter((item) => group.options.includes(item));
+        const handleSelectedItems = (items) => {
+            setSelectedItems((selectedItems?.filter((item) => !group.options.includes(item)) ?? []).concat(items));
+        };
+        return (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search }, group.options.map((option) => renderOption(option, counter()))));
+    };
     useVisibleOptions({
         ...(!nativeScrollbar && { styleTargetRef: scrollbarRef }),
         visibleOptions,

package/select/modern/components/virtual-options-list/Component.js

@@ -12,7 +12,7 @@ import { Optgroup } from '../optgroup/Component.js';
 const styles = {"virtualOptionsList":"select__virtualOptionsList_p60lz","virtualOptionsListHeader":"select__virtualOptionsListHeader_p60lz","virtualOptionsListFooter":"select__virtualOptionsListFooter_p60lz","withBorder":"select__withBorder_p60lz","scrollable":"select__scrollable_p60lz","inner":"select__inner_p60lz","virtualRow":"select__virtualRow_p60lz","highlighted":"select__highlighted_p60lz","emptyPlaceholder":"select__emptyPlaceholder_p60lz","size-64":"select__size-64_p60lz","size-72":"select__size-72_p60lz"};
 require('./index.css');
 
-const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlightedIndex = -1, optionGroupClassName, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, header, footer, showFooter = true, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, setHighlightedIndex, }, ref) => {
+const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlightedIndex = -1, optionGroupClassName, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, header, footer, showFooter = true, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, setHighlightedIndex, selectedItems, setSelectedItems, search, }, ref) => {
     const listRef = useRef(null);
     const parentRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -93,13 +93,22 @@ const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlighte
     }, [options]);
     const renderList = () => rowVirtualizer.virtualItems.map((virtualRow) => {
         const option = flatOptions[virtualRow.index];
-        const group = options[groupStartIndexes[virtualRow.index]];
+        const renderGroup = () => {
+            const group = options[groupStartIndexes[virtualRow.index]];
+            if (!group)
+                return null;
+            const groupSelectedItems = selectedItems?.filter((item) => group.options.includes(item));
+            const handleSelectedItems = (items) => {
+                setSelectedItems((selectedItems?.filter((item) => !group.options.includes(item)) ?? []).concat(items));
+            };
+            return (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search }));
+        };
         return (React.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn(styles.virtualRow, {
                 [styles.highlighted]: highlightedIndex === virtualRow.index,
             }), style: {
                 transform: `translateY(${virtualRow.start}px)`,
             } },
-            group && (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName })),
+            renderGroup(),
             !isGroup(option) && (React.createElement(Option, { ...getOptionProps(option, virtualRow.index) }))));
     });
     const contentNodeProps = {

package/select/modern/components/virtual-options-list/index.css

@@ -40,6 +40,7 @@
     outline: none;
     box-sizing: border-box;
     position: sticky;
+    justify-content: space-between;
 } .select__virtualOptionsListHeader_p60lz {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
@@ -80,6 +81,7 @@
     } .select__emptyPlaceholder_p60lz {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
+    flex: 1;
 } .select__size-64_p60lz .select__emptyPlaceholder_p60lz,
 .select__size-72_p60lz .select__emptyPlaceholder_p60lz {
     padding: var(--gap-xl) var(--gap-m);

package/select/modern/{hook-f45c958e.d.ts → hook-6a49b1bd.d.ts}

@@ -12,5 +12,6 @@ declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListP
     Header?: React.FC<HeaderProps> | undefined;
     headerProps?: HeaderProps | undefined;
     showHeaderWithSelectAll?: boolean | undefined;
+    setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { OptionsListWithApply };

package/select/modern/{hook-f45c958e.js → hook-6a49b1bd.js}

@@ -13,7 +13,7 @@ import './components/optgroup/Component.js';
 import '../../button/modern/desktop';
 import '../../checkbox/modern';
 
-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, header, headerProps, ...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, header, headerProps, setSelectedDraft, ...restProps }, ref) => {
     const getOptionProps = useCallback((option, index) => {
         const optionProps = defaultGetOptionProps(option, index);
         const selected = option.key === SELECT_ALL_KEY
@@ -32,6 +32,9 @@ const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGe
         onClear();
         toggleMenu();
     }, [onClear, toggleMenu]);
+    const handleSelectedItems = useCallback((items) => {
+        setSelectedDraft?.(items);
+    }, [setSelectedDraft]);
     useEffect(() => {
         const activeElement = document.activeElement;
         return () => {
@@ -49,7 +52,7 @@ const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGe
             header,
             showHeaderWithSelectAll && React.createElement(Header$1, { ...headerProps })));
     };
-    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps?.dataTestId }) }));
+    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), selectedItems: selectedDraft, setSelectedItems: handleSelectedItems, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps?.dataTestId }) }));
 });
 
 const SELECT_ALL_KEY = 'select_all';
@@ -117,6 +120,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
             onApply: handleApply,
             onClose: handleClose,
             selectedDraft,
+            setSelectedDraft,
             showHeaderWithSelectAll,
             headerProps: {
                 indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,

package/select/{hook-d4f77aed.d.ts → modern/hook-e97e6ebb.d.ts}

@@ -55,6 +55,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         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;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
         OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
@@ -63,6 +64,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         onApply: () => void;
         onClose: () => void;
         selectedDraft: OptionShape[];
+        setSelectedDraft: import("react").Dispatch<import("react").SetStateAction<OptionShape[]>>;
         showHeaderWithSelectAll: boolean;
         headerProps: {
             indeterminate: boolean;

package/select/modern/index.js

@@ -1,7 +1,6 @@
 export { SelectResponsive as Select } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import '../../form-control/modern/desktop';
 import '../../popover/modern';
@@ -13,6 +12,7 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import 'downshift';
+import '../../shared/modern';
 import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
@@ -40,7 +40,7 @@ import '../../base-modal/modern';
 import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-f45c958e.js';
+import './hook-6a49b1bd.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/modern/mobile/Component.mobile.js

@@ -11,7 +11,7 @@ import { Option } from '../components/option/Component.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
 import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from '../hook-f45c958e.js';
+import { u as useSelectWithApply } from '../hook-6a49b1bd.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/select/modern/mobile/Component.modal.mobile.js

@@ -36,7 +36,7 @@ import '../../../input/modern';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-f45c958e.js';
+import '../hook-6a49b1bd.js';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/modern/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/modern/mobile/index.js

@@ -37,7 +37,7 @@ import '../../../input/modern';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-f45c958e.js';
+import '../hook-6a49b1bd.js';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/modern/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/modern/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-d4f77aed";
+export * from "../hook-e97e6ebb";

package/select/modern/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-f45c958e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-6a49b1bd.js';
 import 'react';
 import '../../../skeleton/modern';
 import '../components/option/Component.js';

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

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../../shared/modern';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-f45c958e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-6a49b1bd.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';

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

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-f45c958e.js';
+export { O as OptionsListWithApply } from '../../../hook-6a49b1bd.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';

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

@@ -1 +1 @@
-export * from "../../../hook-f45c958e";
+export * from "../../../hook-6a49b1bd";

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

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-f45c958e.js';
+export { O as OptionsListWithApply } from '../../../hook-6a49b1bd.js';
 import 'react';
 import '../../../utils.js';
 import '../../../../../shared/modern';

package/select/modern/shared/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-f45c958e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-6a49b1bd.js';
 export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
 export { Option } from '../components/option/Component.js';
 export { BaseOption } from '../components/base-option/Component.js';

package/select/modern/typings.d.ts

@@ -5,7 +5,7 @@ import { InputProps } from "../../input";
 import { ModalProps } from "../../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../../modal/shared";
 import { PopoverProps } from "../../popover";
-import { UseSelectWithApplyProps } from "./hook-d4f77aed";
+import { UseSelectWithApplyProps } from "./hook-e97e6ebb";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -479,6 +479,10 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +502,22 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик выбранных вариантов
+     */
+    setSelectedItems?: (items: OptionShape[]) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptionProps = {
     /**

package/select/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-d4f77aed";
+export * from "../hook-e97e6ebb";

package/select/presets/index.js

@@ -2,7 +2,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-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-a65146fb.js');
 
 
 

package/select/presets/useSelectWithApply/hook.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-a65146fb.js');
 
 
 

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

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-a65146fb.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

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

@@ -1 +1 @@
-export * from "../../../hook-504cecce";
+export * from "../../../hook-a65146fb";

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-a65146fb.js');
 
 
 

package/select/shared/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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-504cecce.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-a65146fb.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');

package/select/typings.d.ts

@@ -5,7 +5,7 @@ import { InputProps } from "../input";
 import { ModalProps } from "../modal";
 import { ModalFooterProps, ModalHeaderProps } from "../modal/shared";
 import { PopoverProps } from "../popover";
-import { UseSelectWithApplyProps } from "./hook-d4f77aed";
+import { UseSelectWithApplyProps } from "./hook-e97e6ebb";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -479,6 +479,10 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +502,22 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик выбранных вариантов
+     */
+    setSelectedItems?: (items: OptionShape[]) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptionProps = {
     /**

package/select-with-tags/Component.responsive.js

@@ -7,7 +7,6 @@ var desktop = require('../form-control/desktop');
 var mobile = require('../form-control/mobile');
 var coreComponentsMq = require('../mq');
 var coreComponentsPopover = require('../popover');
-var coreComponentsShared = require('../shared');
 var components_baseSelectWithTags_Component = require('./components/base-select-with-tags/Component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -15,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return (React__default.default.createElement(components_baseSelectWithTags_Component.BaseSelectWithTags, tslib.__assign({}, restProps, { ref: ref, view: isDesktop ? 'desktop' : 'mobile', Popover: coreComponentsPopover.Popover, BottomSheet: coreComponentsBottomSheet.BottomSheet, FormControlComponent: isDesktop ? desktop.FormControlDesktop : mobile.FormControlMobile })));
 });