@alfalab/core-components 46.1.0-beta.1 → 46.1.0-beta.2

package/select/cssm/{hook-d4f77aed.d.ts → hook-64a8061f.d.ts}

@@ -45,16 +45,20 @@ type UseSelectWithApplyProps = {
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
+        /**
+         * Обработчик выбора
+         */
         showClear?: boolean | undefined;
-        onClose?: (() => void) | undefined; /**
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined; /**
          * Компонент выпадающего меню
          */
-        selectedDraft?: OptionShape[] | undefined;
         OptionsList?: import("react").FC<import("./typings").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;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
         OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
@@ -63,6 +67,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/cssm/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-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-546b2479.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/cssm/presets/index.d.ts

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

package/select/cssm/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-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-546b2479.js');
 
 
 

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

@@ -2,8 +2,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('tslib');
 require('react');
+require('deep-equal');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-546b2479.js');
 
 
 

package/select/cssm/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-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-546b2479.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

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

@@ -1 +1 @@
-export * from "../../../hook-aae7b381";
+export * from "../../../hook-546b2479";

package/select/cssm/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-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-546b2479.js');
 
 
 

package/select/cssm/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-aae7b381.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-546b2479.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/cssm/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-64a8061f";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -479,6 +479,14 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +506,26 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик выбранных вариантов
+     */
+    setSelectedItems?: (items: OptionShape[]) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
 };
 type OptionProps = {
     /**

package/select/esm/Component.responsive.js

@@ -41,7 +41,8 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-6330ea30.js';
+import './hook-2e22c559.js';
+import 'deep-equal';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
@@ -55,5 +56,6 @@ var SelectResponsive = forwardRef(function (_a, ref) {
     var mobileProps = __assign(__assign({}, restProps), restProps.originalProps);
     return React.createElement(SelectMobile, __assign({ fieldProps: fieldProps }, mobileProps, { ref: ref }));
 });
+SelectResponsive.displayName = 'SelectResponsive';
 
 export { SelectResponsive };

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

@@ -355,7 +355,7 @@ function (_a, ref) {
         return (React.createElement("div", __assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
             React.createElement(OptionsList, __assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b)), 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, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple })),
             view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
     };
     var renderInPopover = function () {

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

@@ -19,7 +19,7 @@ var createCounter = function () {
 };
 var OptionsList = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup$1 = _f === void 0 ? Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup$1 = _f === void 0 ? Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple;
     var _k = useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -39,7 +39,16 @@ var OptionsList = forwardRef(function (_a, ref) {
     var listRef = useRef(null);
     var scrollbarRef = useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) {
+        var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+            return group.options.includes(item);
+        });
+        var handleSelectedItems = function (items) {
+            var _a;
+            setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).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, multiple: multiple }, group.options.map(function (option) { return renderOption(option, counter()); })));
+    };
     useVisibleOptions(__assign(__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

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

@@ -15,7 +15,7 @@ require('./index.css');
 
 var VirtualOptionsList = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup$1 = _g === void 0 ? Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex;
+    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup$1 = _g === void 0 ? Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search, multiple = _a.multiple;
     var listRef = useRef(null);
     var parentRef = useRef(null);
     var scrollbarRef = useRef(null);
@@ -100,13 +100,25 @@ var VirtualOptionsList = forwardRef(function (_a, ref) {
         return rowVirtualizer.virtualItems.map(function (virtualRow) {
             var _a;
             var option = flatOptions[virtualRow.index];
-            var group = options[groupStartIndexes[virtualRow.index]];
+            var renderGroup = function () {
+                var group = options[groupStartIndexes[virtualRow.index]];
+                if (!group)
+                    return null;
+                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                    return group.options.includes(item);
+                });
+                var handleSelectedItems = function (items) {
+                    var _a;
+                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+                };
+                return (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }));
+            };
             return (React.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn(styles.virtualRow, (_a = {},
                     _a[styles.highlighted] = highlightedIndex === virtualRow.index,
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName })),
+                renderGroup(),
                 !isGroup(option) && (React.createElement(Option, __assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/esm/{hook-6330ea30.d.ts → hook-2e22c559.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/esm/{hook-6330ea30.js → hook-2e22c559.js}

@@ -1,5 +1,6 @@
 import { __rest, __assign, __spreadArray } from 'tslib';
 import React, { forwardRef, useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import deepEqual from 'deep-equal';
 import { defaultAccessor, defaultFilterFn, processOptions } from './utils.js';
 import { OptionsList } from './components/options-list/Component.js';
 import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
@@ -15,7 +16,7 @@ import '../../button/esm/desktop';
 import '../../checkbox/esm';
 
 var OptionsListWithApply = 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$1 = _e === void 0 ? 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 ? DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer$1 = _k === void 0 ? Footer : _k, _l = _a.Header, Header$1 = _l === void 0 ? Header : _l, header = _a.header, headerProps = _a.headerProps, restProps = __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$1 = _e === void 0 ? 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 ? DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer$1 = _k === void 0 ? Footer : _k, _l = _a.Header, Header$1 = _l === void 0 ? Header : _l, header = _a.header, headerProps = _a.headerProps, setSelectedDraft = _a.setSelectedDraft, restProps = __rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps", "setSelectedDraft"]);
     var getOptionProps = useCallback(function (option, index) {
         var optionProps = defaultGetOptionProps(option, index);
         var selected = option.key === SELECT_ALL_KEY
@@ -34,6 +35,9 @@ var OptionsListWithApply = forwardRef(function (_a, ref) {
         onClear();
         toggleMenu();
     }, [onClear, toggleMenu]);
+    var handleSelectedItems = useCallback(function (items) {
+        setSelectedDraft === null || setSelectedDraft === void 0 ? void 0 : setSelectedDraft(items);
+    }, [setSelectedDraft]);
     useEffect(function () {
         var activeElement = document.activeElement;
         return function () {
@@ -51,7 +55,7 @@ var OptionsListWithApply = forwardRef(function (_a, ref) {
             header,
             showHeaderWithSelectAll && React.createElement(Header$1, __assign({}, headerProps))));
     };
-    return (React.createElement(OptionsList$1, __assign({}, 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 === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
+    return (React.createElement(OptionsList$1, __assign({}, 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 === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
 });
 
 var SELECT_ALL_KEY = 'select_all';
@@ -106,13 +110,16 @@ function useSelectWithApply(_a) {
     };
     var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
     useEffect(function () {
-        setSelectedDraft(selectedOptions);
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!deepEqual(selectedOptionsRef.current, selectedOptions)) {
+            setSelectedDraft(selectedOptions);
+        }
         selectedOptionsRef.current = selectedOptions;
     }, [selectedOptions]);
     var memoizedOptions = useMemo(function () { return (showSelectAll ? __spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
     return {
         OptionsList: OptionsListWithApply,
-        optionsListProps: __assign(__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
+        optionsListProps: __assign(__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-64a8061f.d.ts}

@@ -45,16 +45,20 @@ type UseSelectWithApplyProps = {
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
+        /**
+         * Обработчик выбора
+         */
         showClear?: boolean | undefined;
-        onClose?: (() => void) | undefined; /**
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined; /**
          * Компонент выпадающего меню
          */
-        selectedDraft?: OptionShape[] | undefined;
         OptionsList?: import("react").FC<import("./typings").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;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
         OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
@@ -63,6 +67,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/esm/index.js

@@ -41,7 +41,8 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-6330ea30.js';
+import './hook-2e22c559.js';
+import 'deep-equal';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/mobile/Component.mobile.js

@@ -12,7 +12,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-6330ea30.js';
+import { u as useSelectWithApply } from '../hook-2e22c559.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -38,6 +38,7 @@ import '../../../scrollbar/esm';
 import '../../../input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import 'react-virtual';
+import 'deep-equal';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 

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

@@ -37,7 +37,8 @@ import '../../../input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-6330ea30.js';
+import '../hook-2e22c559.js';
+import 'deep-equal';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/esm/mobile/index.js

@@ -38,7 +38,8 @@ import '../../../input/esm';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '../hook-6330ea30.js';
+import '../hook-2e22c559.js';
+import 'deep-equal';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 import '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';

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

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

package/select/esm/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-6330ea30.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-2e22c559.js';
 import 'tslib';
 import 'react';
 import '../../../skeleton/esm';
@@ -14,6 +14,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark-mobile/Component.js';
 import 'intersection-observer';
+import 'deep-equal';
 import '../utils.js';
 import '../../../shared/esm';
 import '../components/options-list/Component.js';

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

@@ -1,7 +1,8 @@
 import 'tslib';
 import 'react';
+import 'deep-equal';
 import '../../../../shared/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-6330ea30.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-2e22c559.js';
 import '../../utils.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';

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

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-6330ea30.js';
+export { O as OptionsListWithApply } from '../../../hook-2e22c559.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';
@@ -12,5 +12,6 @@ import '../../../../../shared/esm';
 import '../../../consts.js';
 import '../../../utils.js';
 import '../../../components/optgroup/Component.js';
+import 'deep-equal';
 import '../../../../../button/esm/desktop';
 import '../../../../../checkbox/esm';

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

@@ -1 +1 @@
-export * from "../../../hook-6330ea30";
+export * from "../../../hook-2e22c559";

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

@@ -1,6 +1,7 @@
-export { O as OptionsListWithApply } from '../../../hook-6330ea30.js';
+export { O as OptionsListWithApply } from '../../../hook-2e22c559.js';
 import 'tslib';
 import 'react';
+import 'deep-equal';
 import '../../../utils.js';
 import '../../../../../shared/esm';
 import '../../../components/options-list/Component.js';

package/select/esm/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-6330ea30.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-2e22c559.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';
@@ -24,6 +24,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark-mobile/Component.js';
 import 'intersection-observer';
+import 'deep-equal';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/esm/desktop';
 import '../../../shared/esm';

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-64a8061f";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -479,6 +479,14 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +506,26 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик выбранных вариантов
+     */
+    setSelectedItems?: (items: OptionShape[]) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
 };
 type OptionProps = {
     /**

package/select/{hook-5d10ace8.d.ts → hook-0318a7ee.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-5d10ace8.js → hook-0318a7ee.js}

@@ -1,5 +1,6 @@
 var tslib = require('tslib');
 var React = require('react');
+var deepEqual = require('deep-equal');
 var utils = require('./utils.js');
 var components_optionsList_Component = require('./components/options-list/Component.js');
 var consts = require('./consts.js');
@@ -9,9 +10,10 @@ var presets_useSelectWithApply_optionsListWithApply_header_Component = require('
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var deepEqual__default = /*#__PURE__*/_interopDefaultCompat(deepEqual);
 
 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 +32,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 +52,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';
@@ -102,13 +107,16 @@ function useSelectWithApply(_a) {
     };
     var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
     React.useEffect(function () {
-        setSelectedDraft(selectedOptions);
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!deepEqual__default.default(selectedOptionsRef.current, selectedOptions)) {
+            setSelectedDraft(selectedOptions);
+        }
         selectedOptionsRef.current = selectedOptions;
     }, [selectedOptions]);
     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,