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

package/pure-cell/modern/components/amount-title/component.js

@@ -3,7 +3,7 @@ import 'classnames';
 import '../../../../amount/modern';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { b as AmountTitle } from '../../component-fe791444.js';
+export { b as AmountTitle } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/amount-title/index.js

@@ -1,4 +1,4 @@
-export { b as AmountTitle } from '../../component-fe791444.js';
+export { b as AmountTitle } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/category/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { C as Category } from '../../component-fe791444.js';
+export { C as Category } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/category/index.js

@@ -1,4 +1,4 @@
-export { C as Category } from '../../component-fe791444.js';
+export { C as Category } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/content/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { c as Content } from '../../component-fe791444.js';
+export { c as Content } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/content/index.js

@@ -1,4 +1,4 @@
-export { c as Content } from '../../component-fe791444.js';
+export { c as Content } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { F as Footer } from '../../component-fe791444.js';
+export { F as Footer } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/footer/index.js

@@ -1,4 +1,4 @@
-export { F as Footer } from '../../component-fe791444.js';
+export { F as Footer } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-button/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../button/modern';
 import '../../../../shared/modern';
-export { d as FooterButton } from '../../component-fe791444.js';
+export { d as FooterButton } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-fe791444.js';
+export { d as FooterButton } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { e as FooterText } from '../../component-fe791444.js';
+export { e as FooterText } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-fe791444.js';
+export { e as FooterText } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/graphics/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { G as Graphics } from '../../component-fe791444.js';
+export { G as Graphics } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-fe791444.js';
+export { G as Graphics } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { M as Main } from '../../component-fe791444.js';
+export { M as Main } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-fe791444.js';
+export { M as Main } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-fe791444.js';
+export { T as Text } from '../../component-9e925174.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-9e925174";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-fe791444.js';
+export { T as Text } from '../../component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-fe791444.js';
+export { P as PureCell } from './component-9e925174.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/radio-group/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;

package/radio-group/cssm/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;

package/radio-group/esm/Component.responsive.js

@@ -1,7 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
@@ -9,7 +8,7 @@ import 'classnames';
 import '@alfalab/hooks';
 
 var RadioGroup = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;

package/radio-group/esm/index.js

@@ -2,7 +2,6 @@ export { RadioGroup } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';

package/radio-group/modern/Component.responsive.js

@@ -1,13 +1,12 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const RadioGroup = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const RadioGroup = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;

package/radio-group/modern/index.js

@@ -1,7 +1,6 @@
 export { RadioGroup } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';

package/select/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('./mobile/Component.modal.mobile.js');
@@ -13,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectResponsive = React.forwardRef(function (_a, ref) {
-    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     if (isDesktop) {
         return (React__default.default.createElement(desktop_Component_desktop.SelectDesktop, tslib.__assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps })));

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

@@ -361,9 +361,9 @@ function (_a, ref) {
             return null;
         var listProps = optionsListProps;
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_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: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
+            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_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, addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles.optionsListBorder })));
     };
     var renderInPopover = function () {

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

@@ -27,7 +27,7 @@ var createCounter = function () {
 };
 var OptionsList = React.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 = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.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 = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -47,7 +47,7 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return group.options.includes(item); }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

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

@@ -23,7 +23,7 @@ require('./index.css');
 
 var VirtualOptionsList = React.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 = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.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 = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -114,7 +114,9 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
+                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                        return group.options.includes(item);
+                    }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search })),
                 !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/cssm/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('./mobile/Component.modal.mobile.js');
@@ -13,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectResponsive = React.forwardRef(function (_a, ref) {
-    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     if (isDesktop) {
         return (React__default.default.createElement(desktop_Component_desktop.SelectDesktop, tslib.__assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps })));

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

@@ -359,9 +359,9 @@ function (_a, ref) {
             return null;
         var listProps = optionsListProps;
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles__default.default.optionsListWrapper, view === 'desktop' && styles__default.default.optionsListWrapper) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles__default.default.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles__default.default.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: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
+            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles__default.default.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles__default.default.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles__default.default.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles__default.default.optionsListBorder })));
     };
     var renderInPopover = function () {

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

@@ -26,7 +26,7 @@ var createCounter = function () {
 };
 var OptionsList = React.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 = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.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 = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -46,7 +46,7 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return group.options.includes(item); }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

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

@@ -22,7 +22,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var VirtualOptionsList = React.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 = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.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 = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -113,7 +113,9 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
+                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                        return group.options.includes(item);
+                    }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search })),
                 !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/cssm/typings.d.ts

@@ -479,6 +479,18 @@ type OptionsListProps = {
      * Указать индекс пункта для hover состояния
      */
     setHighlightedIndex?: (index: number) => void;
+    /**
+     * Обработчик добавления в список выбранных вариантов
+     */
+    addSelectedItem?: (item: OptionShape) => void;
+    /**
+     * Обработчик удаления из списка выбранных вариантов
+     */
+    removeSelectedItem?: (item: OptionShape) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptgroupProps = {
     /**
@@ -498,6 +510,26 @@ type OptgroupProps = {
      * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Список вариантов выбора в группе
+     */
+    options?: OptionShape[];
+    /**
+     * Список выбранных вариантов в группе
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Обработчик добавления в список выбранных вариантов
+     */
+    addSelectedItem?: (item: OptionShape) => void;
+    /**
+     * Обработчик удаления из списка выбранных вариантов
+     */
+    removeSelectedItem?: (item: OptionShape) => void;
+    /**
+     * Значение поиска
+     */
+    search?: string;
 };
 type OptionProps = {
     /**

package/select/esm/Component.responsive.js

@@ -1,7 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { SelectDesktop } from './desktop/Component.desktop.js';
 import { SelectMobile } from './mobile/Component.mobile.js';
 import './mobile/Component.modal.mobile.js';
@@ -15,6 +14,7 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import 'downshift';
+import '../../shared/esm';
 import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
@@ -41,13 +41,13 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-cdd6fd77.js';
+import './hook-74e64a0c.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 
 var SelectResponsive = forwardRef(function (_a, ref) {
-    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     if (isDesktop) {
         return (React.createElement(SelectDesktop, __assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps })));

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

@@ -353,9 +353,9 @@ function (_a, ref) {
             return null;
         var listProps = optionsListProps;
         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 = {},
+            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, addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, 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 })),
             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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     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,7 @@ 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) { return (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return group.options.includes(item); }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search }, 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, addSelectedItem = _a.addSelectedItem, removeSelectedItem = _a.removeSelectedItem, search = _a.search;
     var listRef = useRef(null);
     var parentRef = useRef(null);
     var scrollbarRef = useRef(null);
@@ -106,7 +106,9 @@ var VirtualOptionsList = forwardRef(function (_a, ref) {
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName })),
+                group && (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                        return group.options.includes(item);
+                    }), addSelectedItem: addSelectedItem, removeSelectedItem: removeSelectedItem, search: search })),
                 !isGroup(option) && (React.createElement(Option, __assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };