@alfalab/core-components-select 17.5.0 → 17.6.0

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

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"footer":"select__footer_1tbkk"};
+var styles = {"footer":"select__footer_1i5y0","button":"select__button_1i5y0"};
 require('./index.css')
 
 var Footer = function (_a) {
@@ -18,8 +18,8 @@ var Footer = function (_a) {
     return (React__default.default.createElement("div", { 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: 0, className: styles.footer },
-        React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-        showClear && selectedDraft.length > 0 && (React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+        React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'apply'), className: styles.button }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+        showClear && selectedDraft.length > 0 && (React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear'), className: styles.button }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
 };
 
 exports.Footer = Footer;

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

@@ -1,4 +1,4 @@
-/* hash: 8n9oq */
+/* 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_1tbkk {
+} .select__footer_1i5y0 {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_1tbkk > * + * {
+} .select__footer_1i5y0 > .select__button_1i5y0 + .select__button_1i5y0 {
         margin-left: var(--gap-xs);
     }

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

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_1wv7a","mobile":"select__mobile_1wv7a"};
+var styles = {"desktop":"select__desktop_14hbg","mobile":"select__mobile_14hbg"};
 require('./index.css')
 
 var Header = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: yr2o7 */
+/* 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_1wv7a {
+} .select__desktop_14hbg {
     padding: var(--gap-s);
-} .select__mobile_1wv7a {
+} .select__mobile_14hbg {
     padding: var(--gap-s) var(--gap-xs);
 }

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

@@ -1 +1 @@
-export * from "../../../hook-598322df";
+export * from "../../../hook-4d5fa450";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-598322df.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-4d5fa450.js');
 
 
 

package/presets/useSelectWithLoading/hook.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_ggzqz"};
+var styles = {"skeleton":"select__skeleton_170xy"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

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

package/shared/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-598322df.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-4d5fa450.js');
 var utils = require('../utils.js');
 var components_option_Component = require('../components/option/Component.js');
 var components_baseOption_Component = require('../components/base-option/Component.js');
@@ -25,6 +25,7 @@ exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Compone
 exports.useSelectWithApply = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply;
 exports.defaultAccessor = utils.defaultAccessor;
 exports.defaultFilterFn = utils.defaultFilterFn;
+exports.defaultGroupAccessor = utils.defaultGroupAccessor;
 exports.getSelectTestIds = utils.getSelectTestIds;
 exports.isGroup = utils.isGroup;
 exports.isOptionShape = utils.isOptionShape;

package/src/components/base-select/Component.tsx

@@ -44,7 +44,13 @@ import type {
     OptionsListProps,
     SearchProps,
 } from '../../typings';
-import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils';
+import {
+    defaultAccessor,
+    defaultFilterFn,
+    defaultGroupAccessor,
+    isGroup,
+    processOptions,
+} from '../../utils';
 import { NativeSelect } from '../native-select';
 
 import styles from './index.module.css';
@@ -162,10 +168,29 @@ export const BaseSelect = forwardRef(
 
         const accessor = searchProps.accessor || defaultAccessor;
         const filterFn = searchProps.filterFn || defaultFilterFn;
+        const filterGroup = searchProps.filterGroup ?? false;
+        const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
 
         const { filteredOptions, flatOptions, selectedOptions } = useMemo(
-            () => processOptions(options, selected, (option) => filterFn(accessor(option), search)),
-            [filterFn, accessor, options, search, selected],
+            () =>
+                processOptions(
+                    options,
+                    selected,
+                    (option) => {
+                        if (isGroup(option)) {
+                            const groupAccessorValue = groupAccessor(option);
+
+                            return (
+                                typeof groupAccessorValue === 'string' &&
+                                filterFn(groupAccessorValue, search)
+                            );
+                        }
+
+                        return filterFn(accessor(option), search);
+                    },
+                    filterGroup,
+                ),
+            [options, selected, filterFn, accessor, search, filterGroup, groupAccessor],
         );
 
         const scrollIntoView = (node: HTMLElement) => {

package/src/components/base-select/mobile.module.css

@@ -5,7 +5,7 @@
     overflow: hidden;
 }
 
-.sheetContent {
+.sheetContent.sheetContent {
     padding: 0;
 
     & .modalContent {

package/src/mobile/Component.mobile.tsx

@@ -15,12 +15,7 @@ import { Search as DefaultSearch } from '../components/search';
 import { VirtualOptionsList as DefaultVirtualOptionsList } from '../components/virtual-options-list';
 import { useSelectWithApply } from '../presets/useSelectWithApply/hook';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component';
-import {
-    AnyObject,
-    BottomSheetSelectMobileProps,
-    ModalSelectMobileProps,
-    SelectMobileProps,
-} from '../typings';
+import { AnyObject, SelectMobileProps } from '../typings';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 
@@ -46,7 +41,6 @@ export const SelectMobile = forwardRef(
             Option = DefaultOption,
             Search = DefaultSearch,
             selected,
-            isBottomSheet = true,
             options,
             OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
                 ? DefaultVirtualOptionsList
@@ -62,9 +56,6 @@ export const SelectMobile = forwardRef(
         }: SelectMobileProps,
         ref,
     ) => {
-        const typedRestBottomSheetProps = restProps as BottomSheetSelectMobileProps;
-        const typedRestModalProps = restProps as ModalSelectMobileProps;
-
         const applyProps = useSelectWithApply({
             optionsListProps: {
                 ...(optionsListProps as AnyObject),
@@ -108,7 +99,6 @@ export const SelectMobile = forwardRef(
                 Optgroup={Optgroup}
                 Option={Option}
                 Search={Search}
-                isBottomSheet={isBottomSheet}
                 options={options}
                 selected={selected}
                 onChange={onChange}
@@ -117,21 +107,21 @@ export const SelectMobile = forwardRef(
                 searchProps={searchProps}
                 BottomSheet={BottomSheet}
                 ModalMobile={ModalMobile}
-                {...(isBottomSheet
+                optionsListProps={optionsListProps}
+                {...restProps}
+                {...(restProps.isBottomSheet === false
                     ? {
-                          bottomSheetProps: {
+                          modalHeaderProps: {
                               bottomAddons,
-                              ...typedRestBottomSheetProps.bottomSheetProps,
+                              ...restProps.modalHeaderProps,
                           },
                       }
                     : {
-                          modalHeaderProps: {
+                          bottomSheetProps: {
                               bottomAddons,
-                              ...typedRestModalProps.modalHeaderProps,
+                              ...restProps.bottomSheetProps,
                           },
                       })}
-                optionsListProps={optionsListProps}
-                {...restProps}
                 {...(useWithApplyHook && applyProps)}
             />
         );

package/src/presets/useSelectWithApply/hook.tsx

@@ -2,7 +2,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import deepEqual from 'deep-equal';
 
 import type { AnyObject, BaseSelectProps, OptionShape } from '../../typings';
-import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils';
+import {
+    defaultAccessor,
+    defaultFilterFn,
+    defaultGroupAccessor,
+    isGroup,
+    processOptions,
+} from '../../utils';
 
 import { OptionsListWithApply } from './options-list-with-apply';
 
@@ -71,7 +77,7 @@ export function useSelectWithApply({
     showClear = true,
     showSelectAll = false,
     showHeaderWithSelectAll = false,
-    showSearch,
+    showSearch = false,
     searchProps = {},
 }: UseSelectWithApplyProps) {
     const [searchState, setSearchState] = useState('');
@@ -83,15 +89,31 @@ export function useSelectWithApply({
 
     const accessor = searchProps.accessor || defaultAccessor;
     const filterFn = searchProps.filterFn || defaultFilterFn;
+    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
+    const filterGroup = searchProps.filterGroup ?? false;
 
     const { flatOptions, selectedOptions } = useMemo(
         () =>
             processOptions(
                 options,
                 selected,
-                showSearch ? (option) => filterFn(accessor(option), search) : undefined,
+                showSearch
+                    ? (option) => {
+                          if (isGroup(option)) {
+                              const groupAccessorValue = groupAccessor(option);
+
+                              return (
+                                  typeof groupAccessorValue === 'string' &&
+                                  filterFn(groupAccessorValue, search)
+                              );
+                          }
+
+                          return filterFn(accessor(option), search);
+                      }
+                    : undefined,
+                filterGroup,
             ),
-        [filterFn, accessor, options, search, selected, showSearch],
+        [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor],
     );
 
     const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);

package/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx

@@ -32,6 +32,7 @@ export const Footer = ({
             view='primary'
             onClick={handleApply}
             dataTestId={getDataTestId(dataTestId, 'apply')}
+            className={styles.button}
         >
             Применить
         </ButtonDesktop>
@@ -42,6 +43,7 @@ export const Footer = ({
                 view='secondary'
                 onClick={handleClear}
                 dataTestId={getDataTestId(dataTestId, 'clear')}
+                className={styles.button}
             >
                 Сбросить
             </ButtonDesktop>

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

@@ -5,7 +5,7 @@
     padding: var(--gap-s);
     outline: none;
 
-    & > * + * {
+    & > .button + .button {
         margin-left: var(--gap-xs);
     }
 }

package/src/typings.ts

@@ -307,6 +307,8 @@ export type BaseSelectProps = {
         filterFn?: (optionText: string, search: string) => boolean;
         value?: string;
         onChange?: (value: string) => void;
+        filterGroup?: boolean;
+        groupAccessor?: (group: GroupShape) => string | undefined;
     };
 
     /**

package/src/utils.ts

@@ -38,7 +38,8 @@ export const joinOptions = ({
 export function processOptions(
     options: BaseSelectProps['options'],
     selected: BaseSelectProps['selected'] = [],
-    filterFn: (option: OptionShape) => boolean = () => true,
+    filterFn: (option: OptionShape | GroupShape) => boolean = () => true,
+    filterGroup = false,
 ) {
     const flatOptions: OptionShape[] = [];
     const filteredOptions: BaseSelectProps['options'] = [];
@@ -51,14 +52,22 @@ export function processOptions(
 
     const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);
 
-    const process = (option: OptionShape) => {
-        if (isSelected(option)) {
+    const process = (option: OptionShape | GroupShape) => {
+        const 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;
     };
@@ -76,12 +85,17 @@ export function processOptions(
                 if (matched) group.options.push(groupOption);
             });
 
-            if (group.options.length) filteredOptions.push(group);
-        } else {
-            const matched = process(option);
+            if (group.options.length) {
+                filteredOptions.push(group);
 
-            if (matched) filteredOptions.push(option);
+                return;
+            }
+
+            if (!filterGroup) return;
         }
+        const matched = process(option);
+
+        if (matched) filteredOptions.push(option);
     });
 
     return { filteredOptions, flatOptions, selectedOptions };
@@ -160,6 +174,10 @@ export function defaultFilterFn(optionText: string, search: string) {
     return optionText.toLowerCase().includes(search.toLowerCase());
 }
 
+export function defaultGroupAccessor(option: GroupShape) {
+    return option.label;
+}
+
 export function defaultAccessor(option: OptionShape) {
     if (typeof option.content === 'string') return option.content;
     if (typeof option.value === 'string') return option.value;

package/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/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/utils.js

@@ -30,9 +30,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];
@@ -40,12 +41,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) {
@@ -56,14 +65,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 };
 }
@@ -94,6 +105,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;
@@ -148,6 +162,7 @@ function getSelectTestIds(dataTestId) {
 
 exports.defaultAccessor = defaultAccessor;
 exports.defaultFilterFn = defaultFilterFn;
+exports.defaultGroupAccessor = defaultGroupAccessor;
 exports.getSelectTestIds = getSelectTestIds;
 exports.isGroup = isGroup;
 exports.isOptionShape = isOptionShape;