@alfalab/core-components-select 17.5.1 → 17.6.0

package/esm/mobile/Component.mobile.js

@@ -12,16 +12,14 @@ 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-699ea205.js';
+import { u as useSelectWithApply } from '../hook-8bbe812b.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 
 var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 var SelectMobile = forwardRef(function (_a, ref) {
-    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.Search, Search$1 = _t === void 0 ? Search : _t, selected = _a.selected, _u = _a.isBottomSheet, isBottomSheet = _u === void 0 ? true : _u, options = _a.options, _v = _a.OptionsList, OptionsList$1 = _v === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.Search, Search$1 = _t === void 0 ? Search : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList$1 = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
         ? VirtualOptionsList
-        : OptionsList : _v, onChange = _a.onChange, _w = _a.showClear, showClear = _w === void 0 ? true : _w, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _x = _a.useWithApplyHook, useWithApplyHook = _x === void 0 ? multiple : _x, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = __rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "isBottomSheet", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
-    var typedRestBottomSheetProps = restProps;
-    var typedRestModalProps = restProps;
+        : OptionsList : _u, onChange = _a.onChange, _v = _a.showClear, showClear = _v === void 0 ? true : _v, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _w = _a.useWithApplyHook, useWithApplyHook = _w === void 0 ? multiple : _w, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = __rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
     var applyProps = useSelectWithApply({
         optionsListProps: __assign(__assign({}, optionsListProps), { Footer: Footer }),
         OptionsList: OptionsList$1,
@@ -34,13 +32,13 @@ var SelectMobile = forwardRef(function (_a, ref) {
         showSelectAll: showSelectAll,
     });
     var bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, __assign({}, applyProps.optionsListProps.headerProps, { mobile: true })));
-    return (React.createElement(BaseSelect, __assign({ ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: __assign({ FormControlComponent: FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, isBottomSheet: isBottomSheet, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile }, (isBottomSheet
+    return (React.createElement(BaseSelect, __assign({ ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: __assign({ FormControlComponent: FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile, optionsListProps: optionsListProps }, restProps, (restProps.isBottomSheet === false
         ? {
-            bottomSheetProps: __assign({ bottomAddons: bottomAddons }, typedRestBottomSheetProps.bottomSheetProps),
+            modalHeaderProps: __assign({ bottomAddons: bottomAddons }, restProps.modalHeaderProps),
         }
         : {
-            modalHeaderProps: __assign({ bottomAddons: bottomAddons }, typedRestModalProps.modalHeaderProps),
-        }), { optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
+            bottomSheetProps: __assign({ bottomAddons: bottomAddons }, restProps.bottomSheetProps),
+        }), (useWithApplyHook && applyProps))));
 });
 
 export { SelectMobile };

package/esm/presets/index.d.ts

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

package/esm/presets/index.js

@@ -1,3 +1,3 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-699ea205.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-8bbe812b.js';

package/esm/presets/useSelectWithApply/hook.js

@@ -2,4 +2,4 @@ import 'tslib';
 import 'react';
 import 'deep-equal';
 import '../../utils.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-699ea205.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-8bbe812b.js';

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

@@ -2,6 +2,6 @@ import 'tslib';
 import 'react';
 import '../../../components/options-list/Component.js';
 import '../../../consts.js';
-export { O as OptionsListWithApply } from '../../../hook-699ea205.js';
+export { O as OptionsListWithApply } from '../../../hook-8bbe812b.js';
 import './footer/Component.js';
 import './header/Component.js';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
 import { getDataTestId } from '@alfalab/core-components-shared/esm';
 
-var styles = {"footer":"select__footer_mtsft"};
+var styles = {"footer":"select__footer_1i5y0","button":"select__button_1i5y0"};
 require('./index.css')
 
 var Footer = function (_a) {
@@ -10,8 +10,8 @@ var Footer = function (_a) {
     return (React.createElement("div", { 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: 0, className: styles.footer },
-        React.createElement(ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-        showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+        React.createElement(ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'apply'), className: styles.button }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+        showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'clear'), className: styles.button }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
 };
 
 export { Footer };

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

@@ -1,4 +1,4 @@
-/* hash: 1atn7 */
+/* hash: 467s1 */
 :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-bg-primary: #fff; /* 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 */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_mtsft {
+} .select__footer_1i5y0 {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_mtsft > * + * {
+} .select__footer_1i5y0 > .select__button_1i5y0 + .select__button_1i5y0 {
         margin-left: var(--gap-xs);
     }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/esm';
 
-var styles = {"desktop":"select__desktop_1d88n","mobile":"select__mobile_1d88n"};
+var styles = {"desktop":"select__desktop_14hbg","mobile":"select__mobile_14hbg"};
 require('./index.css')
 
 var Header = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: aayk5 */
+/* hash: 7p34l */
 :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 { /* 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 */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_1d88n {
+} .select__desktop_14hbg {
     padding: var(--gap-s);
-} .select__mobile_1d88n {
+} .select__mobile_14hbg {
     padding: var(--gap-s) var(--gap-xs);
 }

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

@@ -1 +1 @@
-export * from "../../../hook-699ea205";
+export * from "../../../hook-8bbe812b";

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

@@ -1 +1 @@
-export { O as OptionsListWithApply } from '../../../hook-699ea205.js';
+export { O as OptionsListWithApply } from '../../../hook-8bbe812b.js';

package/esm/presets/useSelectWithLoading/hook.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Skeleton } from '@alfalab/core-components-skeleton/esm';
 import { Option } from '../../components/option/Component.js';
 
-var styles = {"skeleton":"select__skeleton_tq0ek"};
+var styles = {"skeleton":"select__skeleton_170xy"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/esm/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: gk7un */
-.select__skeleton_tq0ek {
+/* hash: hkekb */
+.select__skeleton_170xy {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/esm/shared/index.js

@@ -1,7 +1,7 @@
 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-699ea205.js';
-export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-8bbe812b.js';
+export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, 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';
 export { OptionsList } from '../components/options-list/Component.js';

package/esm/typings.d.ts

@@ -5,7 +5,7 @@ import { InputProps } from "@alfalab/core-components-input";
 import { ModalProps } from "@alfalab/core-components-modal";
 import { ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
 import { PopoverProps } from "@alfalab/core-components-popover";
-import { UseSelectWithApplyProps } from "./hook-64a8061f";
+import { UseSelectWithApplyProps } from "./hook-2f4e96b2";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -237,6 +237,8 @@ type BaseSelectProps = {
         filterFn?: (optionText: string, search: string) => boolean;
         value?: string;
         onChange?: (value: string) => void;
+        filterGroup?: boolean;
+        groupAccessor?: (group: GroupShape) => string | undefined;
     };
     /**
      * Обработчик выбора

package/esm/utils.d.ts

@@ -6,7 +6,7 @@ declare const joinOptions: ({ selected, selectedMultiple, }: {
     selected?: OptionShape | undefined;
     selectedMultiple?: OptionShape[] | undefined;
 }) => ReactNode[] | null;
-declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape) => boolean): {
+declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape | GroupShape) => boolean, filterGroup?: boolean): {
     filteredOptions: (OptionShape | GroupShape)[];
     flatOptions: OptionShape[];
     selectedOptions: OptionShape[];
@@ -35,6 +35,7 @@ type useVisibleOptionsArgs = {
 };
 declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
 declare function defaultFilterFn(optionText: string, search: string): boolean;
+declare function defaultGroupAccessor(option: GroupShape): string | undefined;
 declare function defaultAccessor(option: OptionShape): string;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
@@ -64,4 +65,4 @@ declare function getSelectTestIds(dataTestId: string): {
     modalHeader: string;
     modalContent: string;
 };
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf, getSelectTestIds };
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultGroupAccessor, defaultAccessor, usePrevious, lastIndexOf, getSelectTestIds };

package/esm/utils.js

@@ -26,9 +26,10 @@ var joinOptions = function (_a) {
     }, []);
 };
 // За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу
-function processOptions(options, selected, filterFn) {
+function processOptions(options, selected, filterFn, filterGroup) {
     if (selected === void 0) { selected = []; }
     if (filterFn === void 0) { filterFn = function () { return true; }; }
+    if (filterGroup === void 0) { filterGroup = false; }
     var flatOptions = [];
     var filteredOptions = [];
     var selectedArray = Array.isArray(selected) ? selected : [selected];
@@ -36,12 +37,20 @@ function processOptions(options, selected, filterFn) {
     var selectedKeys = selectedArray.filter(function (option) { return typeof option === 'string'; });
     var isSelected = function (option) { return selectedKeys.includes(option.key); };
     var process = function (option) {
-        if (isSelected(option)) {
+        var isGroupOption = isGroup(option);
+        if (!isGroupOption && isSelected(option)) {
             selectedOptions.push(option);
         }
         if (!filterFn(option))
             return false;
-        flatOptions.push(option);
+        if (isGroupOption) {
+            if (filterGroup) {
+                Array.prototype.push.apply(flatOptions, option.options);
+            }
+        }
+        else {
+            flatOptions.push(option);
+        }
         return true;
     };
     options.forEach(function (option) {
@@ -52,14 +61,16 @@ function processOptions(options, selected, filterFn) {
                 if (matched)
                     group_1.options.push(groupOption);
             });
-            if (group_1.options.length)
+            if (group_1.options.length) {
                 filteredOptions.push(group_1);
+                return;
+            }
+            if (!filterGroup)
+                return;
         }
-        else {
-            var matched = process(option);
-            if (matched)
-                filteredOptions.push(option);
-        }
+        var matched = process(option);
+        if (matched)
+            filteredOptions.push(option);
     });
     return { filteredOptions: filteredOptions, flatOptions: flatOptions, selectedOptions: selectedOptions };
 }
@@ -90,6 +101,9 @@ function defaultFilterFn(optionText, search) {
         return true;
     return optionText.toLowerCase().includes(search.toLowerCase());
 }
+function defaultGroupAccessor(option) {
+    return option.label;
+}
 function defaultAccessor(option) {
     if (typeof option.content === 'string')
         return option.content;
@@ -142,4 +156,4 @@ function getSelectTestIds(dataTestId) {
     };
 }
 
-export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions };
+export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions };

package/{cssm/hook-64a8061f.d.ts → hook-2f4e96b2.d.ts}

@@ -45,14 +45,12 @@ 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;
-        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;
@@ -83,13 +81,15 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     })[];
     onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
-    showSearch: boolean | undefined;
+    showSearch: boolean;
     searchProps: {
         value: string;
         onChange: ((value: string) => void) | undefined;
         componentProps?: import("./typings").SearchProps | undefined;
         accessor?: ((option: OptionShape) => string) | undefined;
         filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+        filterGroup?: boolean | undefined;
+        groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
     } | undefined;
     originalProps: {
         options: (OptionShape | import("./typings").GroupShape)[];
@@ -100,13 +100,15 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         showClear: boolean;
         showSelectAll: boolean;
         showHeaderWithSelectAll: boolean;
-        showSearch: boolean | undefined;
+        showSearch: boolean;
         searchProps: {
             componentProps?: import("./typings").SearchProps | undefined;
             accessor?: ((option: OptionShape) => string) | undefined;
             filterFn?: ((optionText: string, search: string) => boolean) | undefined;
             value?: string | undefined;
             onChange?: ((value: string) => void) | undefined;
+            filterGroup?: boolean | undefined;
+            groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
         };
     };
 };

package/{hook-23a1acb8.js → hook-4d5fa450.js}

@@ -60,17 +60,29 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
 var SELECT_ALL_KEY = 'select_all';
 var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
 function useSelectWithApply(_a) {
-    var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.optionsListProps, optionsListProps = _c === void 0 ? {} : _c, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.showSelectAll, showSelectAll = _e === void 0 ? false : _e, _f = _a.showHeaderWithSelectAll, showHeaderWithSelectAll = _f === void 0 ? false : _f, showSearch = _a.showSearch, _g = _a.searchProps, searchProps = _g === void 0 ? {} : _g;
-    var _h = React.useState(''), searchState = _h[0], setSearchState = _h[1];
-    var _j = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
+    var _b, _c;
+    var options = _a.options, selected = _a.selected, _d = _a.onChange, onChange = _d === void 0 ? function () { return null; } : _d, OptionsList = _a.OptionsList, _e = _a.optionsListProps, optionsListProps = _e === void 0 ? {} : _e, _f = _a.showClear, showClear = _f === void 0 ? true : _f, _g = _a.showSelectAll, showSelectAll = _g === void 0 ? false : _g, _h = _a.showHeaderWithSelectAll, showHeaderWithSelectAll = _h === void 0 ? false : _h, _j = _a.showSearch, showSearch = _j === void 0 ? false : _j, _k = _a.searchProps, searchProps = _k === void 0 ? {} : _k;
+    var _l = React.useState(''), searchState = _l[0], setSearchState = _l[1];
+    var _m = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
         ? [searchProps.value, searchProps.onChange]
-        : [searchState, setSearchState], search = _j[0], setSearch = _j[1];
+        : [searchState, setSearchState], search = _m[0], setSearch = _m[1];
     var accessor = searchProps.accessor || utils.defaultAccessor;
     var filterFn = searchProps.filterFn || utils.defaultFilterFn;
-    var _k = React.useMemo(function () {
-        return utils.processOptions(options, selected, showSearch ? function (option) { return filterFn(accessor(option), search); } : undefined);
-    }, [filterFn, accessor, options, search, selected, showSearch]), flatOptions = _k.flatOptions, selectedOptions = _k.selectedOptions;
-    var _l = React.useState(selectedOptions), selectedDraft = _l[0], setSelectedDraft = _l[1];
+    var groupAccessor = (_b = searchProps.groupAccessor) !== null && _b !== void 0 ? _b : utils.defaultGroupAccessor;
+    var filterGroup = (_c = searchProps.filterGroup) !== null && _c !== void 0 ? _c : false;
+    var _o = React.useMemo(function () {
+        return utils.processOptions(options, selected, showSearch
+            ? function (option) {
+                if (utils.isGroup(option)) {
+                    var groupAccessorValue = groupAccessor(option);
+                    return (typeof groupAccessorValue === 'string' &&
+                        filterFn(groupAccessorValue, search));
+                }
+                return filterFn(accessor(option), search);
+            }
+            : undefined, filterGroup);
+    }, [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor]), flatOptions = _o.flatOptions, selectedOptions = _o.selectedOptions;
+    var _p = React.useState(selectedOptions), selectedDraft = _p[0], setSelectedDraft = _p[1];
     var selectedOptionsRef = React.useRef(selectedOptions);
     var handleApply = function () {
         onChange({

package/mobile/Component.mobile.js

@@ -16,7 +16,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-23a1acb8.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4d5fa450.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 }; }
@@ -25,11 +25,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 var SelectMobile = React.forwardRef(function (_a, ref) {
-    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.Search, Search = _t === void 0 ? components_search_Component.Search : _t, selected = _a.selected, _u = _a.isBottomSheet, isBottomSheet = _u === void 0 ? true : _u, options = _a.options, _v = _a.OptionsList, OptionsList = _v === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.Search, Search = _t === void 0 ? components_search_Component.Search : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
         ? components_virtualOptionsList_Component.VirtualOptionsList
-        : components_optionsList_Component.OptionsList : _v, onChange = _a.onChange, _w = _a.showClear, showClear = _w === void 0 ? true : _w, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _x = _a.useWithApplyHook, useWithApplyHook = _x === void 0 ? multiple : _x, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = tslib.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "isBottomSheet", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
-    var typedRestBottomSheetProps = restProps;
-    var typedRestModalProps = restProps;
+        : components_optionsList_Component.OptionsList : _u, onChange = _a.onChange, _v = _a.showClear, showClear = _v === void 0 ? true : _v, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _w = _a.useWithApplyHook, useWithApplyHook = _w === void 0 ? multiple : _w, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = tslib.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
     var applyProps = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply({
         optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { Footer: components_footer_Component.Footer }),
         OptionsList: OptionsList,
@@ -42,13 +40,13 @@ var SelectMobile = React.forwardRef(function (_a, ref) {
         showSelectAll: showSelectAll,
     });
     var bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true })));
-    return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib.__assign({ ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, Search: Search, isBottomSheet: isBottomSheet, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, showSearch: showSearch, searchProps: searchProps, BottomSheet: coreComponentsBottomSheet.BottomSheet, ModalMobile: mobile$1.ModalMobile }, (isBottomSheet
+    return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib.__assign({ ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, Search: Search, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, showSearch: showSearch, searchProps: searchProps, BottomSheet: coreComponentsBottomSheet.BottomSheet, ModalMobile: mobile$1.ModalMobile, optionsListProps: optionsListProps }, restProps, (restProps.isBottomSheet === false
         ? {
-            bottomSheetProps: tslib.__assign({ bottomAddons: bottomAddons }, typedRestBottomSheetProps.bottomSheetProps),
+            modalHeaderProps: tslib.__assign({ bottomAddons: bottomAddons }, restProps.modalHeaderProps),
         }
         : {
-            modalHeaderProps: tslib.__assign({ bottomAddons: bottomAddons }, typedRestModalProps.modalHeaderProps),
-        }), { optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
+            bottomSheetProps: tslib.__assign({ bottomAddons: bottomAddons }, restProps.bottomSheetProps),
+        }), (useWithApplyHook && applyProps))));
 });
 
 exports.SelectMobile = SelectMobile;

package/modern/components/arrow/Component.js

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

package/modern/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: 14kpn */
+/* hash: n3hd3 */
 :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-translucent-700: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_14lsv {
+} .select__arrow_1rwor {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_14lsv {
+} .select__open_1rwor {
     transform: var(--arrow-transform);
 }

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_1b0iq","single":"select__single_1b0iq","selected":"select__selected_1b0iq"};
+const styles = {"checkmark":"select__checkmark_86mjr","single":"select__single_86mjr","selected":"select__selected_86mjr"};
 require('./index.css')
 
 const BaseCheckmark = ({ selected, disabled = false, className, multiple, }) => {

package/modern/components/base-checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 12vgb */
+/* hash: le819 */
 :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 { /* 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 */
@@ -23,14 +23,14 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_1b0iq {
+} .select__checkmark_86mjr {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__single_1b0iq {
+} .select__single_86mjr {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_1b0iq.select__selected_1b0iq {
+} .select__single_86mjr.select__selected_86mjr {
         opacity: 1;
     }

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

@@ -2,7 +2,7 @@ import React, { isValidElement } from 'react';
 import cn from 'classnames';
 import { BaseCheckmark } from '../base-checkmark/Component.js';
 
-const styles = {"option":"select__option_elt4i","disabled":"select__disabled_elt4i","checkmarkBefore":"select__checkmarkBefore_elt4i","mobile":"select__mobile_elt4i","checkmarkAfter":"select__checkmarkAfter_elt4i","textContent":"select__textContent_elt4i","selected":"select__selected_elt4i","highlighted":"select__highlighted_elt4i","checkmarkBeforeContent":"select__checkmarkBeforeContent_elt4i","checkmarkAfterContent":"select__checkmarkAfterContent_elt4i","content":"select__content_elt4i"};
+const styles = {"option":"select__option_19xyo","disabled":"select__disabled_19xyo","checkmarkBefore":"select__checkmarkBefore_19xyo","mobile":"select__mobile_19xyo","checkmarkAfter":"select__checkmarkAfter_19xyo","textContent":"select__textContent_19xyo","selected":"select__selected_19xyo","highlighted":"select__highlighted_19xyo","checkmarkBeforeContent":"select__checkmarkBeforeContent_19xyo","checkmarkAfterContent":"select__checkmarkAfterContent_19xyo","content":"select__content_19xyo"};
 require('./index.css')
 
 const BaseOption = ({ className, option, children, selected, highlighted, disabled, multiple, Checkmark = BaseCheckmark, checkmarkPosition = multiple ? 'before' : 'after', innerProps, dataTestId, mobile = false, }) => {