@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -1,7 +1,7 @@
 import { __assign, __read } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _isNumber from 'lodash/isNumber';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useCallback } from 'react';
 import { useGetExpandedGroup } from './hooks/useGetExpandedGroup';
 import { Box } from '../../box';
 import { Menu } from '../../menu';
@@ -15,87 +15,133 @@ import { NoResults } from '../styled-component';
 import { UNGROUPED_ID } from '../constants';
 import { BaseButton } from '../../base-button';
 import ChevronDown from '../../icon/components/chevron-down';
-import { chevronStyles } from '../../helpers/commonStyles';
 import { getNextItemIndexToHighlight, nextItem, prevItem } from '../../menu/helpers';
 import { Collapse } from '../../transitions/collapse';
+import { GROUP_SELECT_ALL_ID } from '../../baseui/select/constants';
+import { useLocale } from '../../locale';
+import { useDocument } from '../../spacewebProvider/DocumentProvider';
+import { HiddenElement } from '../utils/hidden-element';
+import { useSelectIds } from '../SelectIdsContext';
+import { useNumber } from '../../number';
 var Collapsible = function (_a) {
-    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, isFirstGroupedHeader = _a.isFirstGroupedHeader;
-    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [_jsxs(BaseButton, __assign({ disabled: disabled, onClick: function () { return onClick(group.id); }, className: [
-                    'w-full flex justify-between items-center py-2 pl-3 pr-3 border-t-1 border-b-1 border-solid spr-border-01 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
-                    expanded ? '' : 'border-b-0',
-                    isFirstGroupedHeader ? 'border-t-0' : '',
-                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block", variant: "h7" }, { children: [group.label, " ", _isNumber(group.count) ? "(".concat(group.count, ")") : ''] }), void 0), _jsx(ChevronDown, { style: chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), _jsx(Collapse, __assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }), void 0)] }), void 0));
+    var _b;
+    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, className = _a.className;
+    var formattedCount = useNumber({
+        value: (_b = group.count) !== null && _b !== void 0 ? _b : 0,
+    });
+    return (_jsxs(Box, __assign({ className: "rounded-inherit" }, { children: [_jsxs(BaseButton, __assign({ tabIndex: -1, disabled: disabled, onClick: function () { return onClick(group.id); }, 
+                // @ts-ignore -- css variable declaration in style props
+                style: { '--sw-padding-block-start': '0.55rem', '--sw-padding-block-end': '0.55rem' }, className: [
+                    'w-full flex justify-between items-center',
+                    'pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] pl-2 pr-2.5',
+                    'disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
+                    className,
+                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [_jsx(Box, __assign({ "$as": "span" }, { children: group.label })), _isNumber(group.count) ? _jsx(Box, __assign({ "$as": "span" }, { children: " (".concat(formattedCount, ")") })) : null] })), _jsx(ChevronDown, { size: 12, className: "transition-transform duration-200 ml-1 cursor-pointer spr-icon-primary ".concat(expanded ? 'rotate-180' : ''), "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") })] })), _jsx(Collapse, __assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
 };
 export var CollapsibleSelectMenu = function (_a) {
     var _b, _c, _d, _e;
-    var overrides = _a.overrides, value = _a.value, groupedItems = _a.items, multi = _a.multi, labelKey = _a.labelKey, valueKey = _a.valueKey, onItemSelect = _a.onItemSelect, shouldDisplaySelectAll = _a.shouldDisplaySelectAll, selectAllChecked = _a.selectAllSelected, noResultsMsg = _a.noResultsMsg, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, virtual = _a.virtual, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab, inputRef = _a.inputRef;
-    var selectAllSelected = !!shouldDisplaySelectAll && selectAllChecked;
-    var _f = __read(useGetExpandedGroup({ groupConfig: groupConfig, groupedItems: groupedItems }), 2), expandedGroupId = _f[0], setExpandedGroupId = _f[1];
-    var _g = __read(useState(false), 2), isFirstItemHighlighted = _g[0], setIsFirstItemHighlighted = _g[1];
-    var _h = __read(useState(false), 2), isLastItemHighlighted = _h[0], setIsLastItemHighlighted = _h[1];
+    var overrides = _a.overrides, value = _a.value, groupedItems = _a.items, _f = _a.multi, multi = _f === void 0 ? false : _f, labelKey = _a.labelKey, valueKey = _a.valueKey, onItemSelect = _a.onItemSelect, shouldDisplaySelectAll = _a.shouldDisplaySelectAll, _g = _a.selectAllSelected, globalSelectAllChecked = _g === void 0 ? false : _g, noResultsMsg = _a.noResultsMsg, noResultsConfig = _a.noResultsConfig, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, _h = _a.virtual, virtual = _h === void 0 ? true : _h, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab, _j = _a.disableWhenSelectAllChecked, disableWhenSelectAllChecked = _j === void 0 ? false : _j, deriveGroupItemCount = _a.deriveGroupItemCount, hideGroupSelectAll = _a.hideGroupSelectAll, inputElement = _a.inputElement, getActionsElement = _a.getActionsElement;
+    var globalSelectAllSelected = !!shouldDisplaySelectAll && globalSelectAllChecked;
+    var _k = __read(useGetExpandedGroup({ groupConfig: groupConfig, groupedItems: groupedItems, value: value }), 2), expandedGroupId = _k[0], setExpandedGroupId = _k[1];
+    var isFirstItemHighlighted = useRef(false);
+    var isLastItemHighlighted = useRef(false);
     var menuRef = useRef(null);
+    var ownerDocument = useDocument();
+    var _l = useSelectIds(), listboxId = _l.listboxId, menuDescriptionId = _l.menuDescriptionId;
     var selectedValuesSet = useMemo(function () {
         var set = new Set(_map(value, valueKey));
         return set;
     }, [value, valueKey]);
+    var defaultGetItemLabel = function (option) { return option[labelKey]; };
     /**
      * extract out useful overrides/props passed by baseui
      */
     var listOverride = overrides === null || overrides === void 0 ? void 0 : overrides.List;
     var optionOverride = overrides === null || overrides === void 0 ? void 0 : overrides.Option;
     var baseuiMenuListProps;
-    var getItemLabel, baseuiMenuItemProps;
+    var overridesGetItemLabel, baseuiMenuItemProps;
     if (typeof optionOverride === 'object' && typeof optionOverride.props === 'object') {
-        getItemLabel = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.getItemLabel;
+        overridesGetItemLabel = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.getItemLabel;
         baseuiMenuItemProps = (_e = (_d = (_c = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _c === void 0 ? void 0 : _c.overrides) === null || _d === void 0 ? void 0 : _d.ListItem) === null || _e === void 0 ? void 0 : _e.props;
     }
     if (typeof listOverride === 'object') {
         // todo: make this component a11y
         baseuiMenuListProps = listOverride.props;
     }
+    var getItemLabel = overridesGetItemLabel !== null && overridesGetItemLabel !== void 0 ? overridesGetItemLabel : defaultGetItemLabel;
     var mergedOverrides = useMemo(function () { return mergeOverrides(selectMenuOverrides, overrides); }, [overrides]);
-    var _j = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _j[0], menuProps = _j[1];
-    var _k = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _k[0], noResultsProps = _k[1];
+    var _m = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _m[0], menuProps = _m[1];
+    var _o = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _o[0], noResultsProps = _o[1];
     var menuItemOverrides = useMemo(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
     useEffect(function () {
-        var inputElement = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         var keydownHandler = function (event) {
-            var expandedGroupIndex = Math.max(groupConfig.findIndex(function (group) { return group.id === expandedGroupId; }), 0);
-            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted)) {
-                setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
+            var expandedGroupIndex = groupConfig.findIndex(function (group) { return group.id === expandedGroupId; });
+            var noGroupExpanded = expandedGroupIndex === -1;
+            if (event.key === 'ArrowDown' && (event.shiftKey || noGroupExpanded || isLastItemHighlighted.current)) {
+                var nextGroupIndex = noGroupExpanded ? 0 : Math.min(expandedGroupIndex + 1, groupConfig.length - 1);
+                setExpandedGroupId(groupConfig[nextGroupIndex].id);
                 event.stopPropagation(); // prevents the menu to move to the second item of the next group
             }
-            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted)) {
-                setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].id);
+            else if (event.key === 'ArrowUp' && (event.shiftKey || noGroupExpanded || isFirstItemHighlighted.current)) {
+                var prevGroupIndex = noGroupExpanded ? groupConfig.length - 1 : Math.max(expandedGroupIndex - 1, 0);
+                setExpandedGroupId(groupConfig[prevGroupIndex].id);
             }
         };
-        inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener('keydown', keydownHandler);
+        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', keydownHandler);
         return function () {
-            inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener('keydown', keydownHandler);
+            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.removeEventListener('keydown', keydownHandler);
         };
-    }, [inputRef, expandedGroupId, groupConfig, setExpandedGroupId, isFirstItemHighlighted, isLastItemHighlighted]);
+    }, [ownerDocument, expandedGroupId, groupConfig, setExpandedGroupId]);
+    // when the NoResults component is rendered, handleOnHighlightedItemChange is not triggered
+    useEffect(function () {
+        if (expandedGroupId && _isEmpty(groupedItems[expandedGroupId])) {
+            isFirstItemHighlighted.current = true;
+            isLastItemHighlighted.current = true;
+        }
+    }, [expandedGroupId, groupedItems]);
     var handleOnHighlightedItemChange = function (item) {
-        var _a, _b;
+        var _a;
         var nextHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, nextItem);
         var prevHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, prevItem);
-        setIsFirstItemHighlighted(!!(item && (!item.previousSibling || item === prevHighlightableElement)));
-        setIsLastItemHighlighted(!!(item && (!item.nextSibling || item === nextHighlightableElement)));
-        (_b = (_a = menuProps) === null || _a === void 0 ? void 0 : _a.onHighlightedItemChange) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+        isFirstItemHighlighted.current = !!(item && (!item.previousSibling || item === prevHighlightableElement));
+        isLastItemHighlighted.current = !!(item && (!item.nextSibling || item === nextHighlightableElement));
+        (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onHighlightedItemChange) === null || _a === void 0 ? void 0 : _a.call(menuProps, item);
     };
+    var handleOnClick = useCallback(function (newGroupId) {
+        setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); });
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+    }, [inputElement, setExpandedGroupId]);
     var selectAllItem = shouldDisplaySelectAll ? groupedItems[UNGROUPED_ID][0] : null;
     var clearAsOptionItem = !multi && clearAsOption ? groupedItems[UNGROUPED_ID][0] : null;
-    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true }, baseuiMenuItemProps, { className: ['mt-1 mx-1', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (group, index) {
+    var locale = useLocale().select;
+    return (_jsxs(Box, __assign({ className: "rounded-inherit" }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: globalSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true, "data-testid": "universal-select-all" }, baseuiMenuItemProps, { className: ['m-2', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (_group, index) {
                 var _a;
-                var groupId = group.id;
+                var _b, _c;
+                var groupId = _group.id, groupLabel = _group.label;
                 var itemsInGroup = groupedItems[groupId];
-                return (_jsx(Collapsible, __assign({ isFirstGroupedHeader: index === 0, group: group, expanded: selectAllSelected ? false : groupId === expandedGroupId, disabled: selectAllSelected, onClick: function (newGroupId) { return setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); }); } }, { children: _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, tabIndex: -1, selectOnTab: selectOnTab }, menuProps, { virtual: virtual, className: ['overflow-auto', { maxHeight: '200px' }, (_a = menuProps) === null || _a === void 0 ? void 0 : _a.className], onScroll: function (e) {
-                            $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
-                        }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
-                                var selected = selectedValuesSet.has(item[valueKey]);
-                                return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
-                            })] }), void 0)) }), groupId));
-            })] }), void 0));
+                var group = _group;
+                if (deriveGroupItemCount)
+                    group = __assign(__assign({}, _group), { count: (_c = (_b = _group.count) !== null && _b !== void 0 ? _b : itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.length) !== null && _c !== void 0 ? _c : 0 });
+                var shouldDisplayGroupSelectAll = multi && !hideGroupSelectAll && group.count > 0;
+                var groupSelectAllSelected = globalSelectAllSelected ||
+                    (itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.every(function (item) { return selectedValuesSet.has(item[valueKey]) || item.disabled; }));
+                var countDisabledOptions = Array.isArray(itemsInGroup)
+                    ? itemsInGroup.reduce(function (acc, opt) { return (opt.disabled ? acc + 1 : acc); }, 0)
+                    : 0;
+                var groupSelectAllItem = (_a = {},
+                    _a[valueKey] = groupId,
+                    _a[labelKey] = "".concat(locale.selectAllLabel, " (").concat(group.count - countDisabledOptions, ")"),
+                    _a[GROUP_SELECT_ALL_ID] = true,
+                    _a.selected = groupSelectAllSelected,
+                    _a);
+                return (_jsxs(Collapsible, __assign({ className: index === 0 && selectAllItem ? 'border-t-1 border-solid spr-border-primary' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: handleOnClick }, { children: [_jsx(HiddenElement, __assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, selectOnTab: selectOnTab, getActionsElement: getActionsElement }, menuProps, { role: "listbox", id: listboxId, virtual: virtual, className: ['overflow-auto max-h-50 pt-0', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], onScroll: function (e) {
+                                $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
+                            }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [shouldDisplayGroupSelectAll ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions }, baseuiMenuItemProps), "select-all-option")) : null, clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
+                                    var selected = selectedValuesSet.has(item[valueKey]);
+                                    return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+                                })] })))] }), groupId));
+            })] })));
 };

package/esm/select/selectMenuAdapter/NestedSelectMenuAdapter.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { MenuAdapterProps } from './types';
+declare const NestedSelectMenuAdapter: (props: MenuAdapterProps) => ReactElement;
+export default NestedSelectMenuAdapter;

package/esm/select/selectMenuAdapter/NestedSelectMenuAdapter.js

@@ -0,0 +1,84 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import _map from 'lodash/map';
+import { useSelectIds } from '../SelectIdsContext';
+import _omit from 'lodash/omit';
+import _noop from 'lodash/noop';
+//components
+import { Menu, SubMenu } from '../../menu';
+import { NoResults } from '../styled-component';
+import SelectMenuItem from './SelectMenuItem';
+//helpers
+import { mergeOverrides, useOverrides } from '../../overrides';
+import { selectMenuOverrides } from '../overrides';
+import ChevronRight from '../../icon/components/chevron-right';
+var NestedSelectMenuAdapter = function (props) {
+    var _a, _b, _c, _d;
+    var listboxId = useSelectIds().listboxId;
+    var overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? _noop : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, noResultsMsg = props.noResultsMsg, noResultsConfig = props.noResultsConfig, captureScroll = props.captureScroll, virtual = props.virtual, overscanCount = props.overscanCount, getActionsElement = props.getActionsElement, inputElement = props.inputElement;
+    var selectedValuesSet = useMemo(function () {
+        var set = new Set(_map(value, valueKey));
+        return set;
+    }, [value, valueKey]);
+    /**
+     * extract out useful overrides/props passed by baseui
+     */
+    var listOverride = overrides === null || overrides === void 0 ? void 0 : overrides.List;
+    var optionOverride = overrides === null || overrides === void 0 ? void 0 : overrides.Option;
+    var baseuiMenuListProps;
+    var getItemLabel, baseuiMenuItemProps;
+    if (typeof optionOverride === 'object' && typeof optionOverride.props === 'object') {
+        getItemLabel = (_a = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _a === void 0 ? void 0 : _a.getItemLabel;
+        // @ts-ignore -- check legacy overrides structure
+        baseuiMenuItemProps = (_d = (_c = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.overrides) === null || _c === void 0 ? void 0 : _c.ListItem) === null || _d === void 0 ? void 0 : _d.props;
+    }
+    if (typeof listOverride === 'object') {
+        baseuiMenuListProps = listOverride.props;
+    }
+    var mergedOverrides = useMemo(function () {
+        var _a, _b;
+        return mergeOverrides({
+            SubMenu: {
+                props: {
+                    overrides: mergeOverrides(selectMenuOverrides, {
+                        Menu: ((_a = overrides === null || overrides === void 0 ? void 0 : overrides.Menu) !== null && _a !== void 0 ? _a : {}),
+                        MenuItem: ((_b = overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem) !== null && _b !== void 0 ? _b : {}),
+                    }),
+                },
+            },
+        }, _omit(overrides, 'Menu'));
+    }, [overrides]);
+    var _f = __read(useOverrides(mergedOverrides.SubMenu, SubMenu), 2), MenuOverriden = _f[0], menuProps = _f[1];
+    var _g = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
+    var menuItemOverrides = useMemo(function () { return ({
+        MenuItem: mergedOverrides.MenuItem,
+        ListItemText: mergedOverrides.ListItemText,
+    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    var defaultItemLabel = function (item) { return item[labelKey]; };
+    var currentCount = 0;
+    var totalCount = props.items.__ungrouped.length;
+    var itemRenderer = function (item) {
+        var _a;
+        if (item) {
+            currentCount += 1;
+            var hasNestedItems_1 = (((_a = item.nestedItems) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+            return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selectedValuesSet.has(item[valueKey]), multi: hasNestedItems_1 ? false : multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: function (params) {
+                    var _a, _b;
+                    var selectedItem = params.item, event = params.event;
+                    if (hasNestedItems_1) {
+                        (_b = (_a = menuProps).onItemSelect) === null || _b === void 0 ? void 0 : _b.call(_a, selectedItem, event);
+                        // stopping propagation to make sure select does not handle item with nestedItems.
+                        // Items with nestedItems are not selectable.
+                        event.stopPropagation();
+                    }
+                    else {
+                        onItemSelect(params);
+                    }
+                }, "$item": item, "aria-posinset": currentCount, "aria-setsize": totalCount }, (item.startEnhancer ? { startEnhancer: item.startEnhancer } : {}), (hasNestedItems_1 ? { endEnhancer: _jsx(ChevronRight, { size: 12 }) } : {}), baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
+        }
+        return null;
+    };
+    return totalCount ? (_jsx(MenuOverriden, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement }, baseuiMenuListProps, { id: listboxId, virtual: virtual, overscanCount: overscanCount, items: props.items.__ungrouped, itemRenderer: itemRenderer }, menuProps, { getItemLabel: getItemLabel !== null && getItemLabel !== void 0 ? getItemLabel : defaultItemLabel }))) : (_jsx(Menu, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: _jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)) })));
+};
+export default NestedSelectMenuAdapter;

package/esm/select/selectMenuAdapter/SelectMenuAdapter.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { MenuAdapterProps } from './types';
-declare const SelectMenuAdapter: (props: MenuAdapterProps) => React.ReactElement;
+import type { ReactElement } from 'react';
+import type { MenuAdapterProps } from './types';
+declare const SelectMenuAdapter: (props: MenuAdapterProps) => ReactElement;
 export default SelectMenuAdapter;

package/esm/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -1,7 +1,8 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import _flatten from 'lodash/flatten';
+import { useSelectIds } from '../SelectIdsContext';
 import _isEmpty from 'lodash/isEmpty';
 import _map from 'lodash/map';
 import _noop from 'lodash/noop';
@@ -25,25 +26,28 @@ var removeUngroupedIfEmpty = function (groupedOptions) {
 };
 var SelectMenuAdapter = function (props) {
     var _a, _b, _c, _d;
-    var id = props.id, groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? _noop : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, selectAllSelected = props.selectAllSelected, noResultsMsg = props.noResultsMsg, captureScroll = props.captureScroll, virtual = props.virtual, overscanCount = props.overscanCount, selectOnTab = props.selectOnTab;
+    var listboxId = useSelectIds().listboxId;
+    var groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? _noop : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, selectAllSelected = props.selectAllSelected, noResultsMsg = props.noResultsMsg, noResultsConfig = props.noResultsConfig, captureScroll = props.captureScroll, virtual = props.virtual, overscanCount = props.overscanCount, selectOnTab = props.selectOnTab, getActionsElement = props.getActionsElement, inputElement = props.inputElement;
     var selectedValuesSet = useMemo(function () {
         var set = new Set(_map(value, valueKey));
         return set;
     }, [value, valueKey]);
+    var defaultGetItemLabel = useCallback(function (option) { return option[labelKey]; }, [labelKey]);
     /**
      * extract out useful overrides/props passed by baseui
      */
     var listOverride = overrides === null || overrides === void 0 ? void 0 : overrides.List;
     var optionOverride = overrides === null || overrides === void 0 ? void 0 : overrides.Option;
     var baseuiMenuListProps;
-    var getItemLabel, baseuiMenuItemProps;
+    var overridesGetItemLabel, baseuiMenuItemProps;
     if (typeof optionOverride === 'object' && typeof optionOverride.props === 'object') {
-        getItemLabel = (_a = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _a === void 0 ? void 0 : _a.getItemLabel;
+        overridesGetItemLabel = (_a = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _a === void 0 ? void 0 : _a.getItemLabel;
         baseuiMenuItemProps = (_d = (_c = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.overrides) === null || _c === void 0 ? void 0 : _c.ListItem) === null || _d === void 0 ? void 0 : _d.props;
     }
     if (typeof listOverride === 'object') {
         baseuiMenuListProps = listOverride.props;
     }
+    var getItemLabel = overridesGetItemLabel !== null && overridesGetItemLabel !== void 0 ? overridesGetItemLabel : defaultGetItemLabel;
     var mergedOverrides = useMemo(function () { return mergeOverrides(selectMenuOverrides, overrides); }, [overrides]);
     var _f = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuOverriden = _f[0], menuProps = _f[1];
     var _g = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
@@ -51,7 +55,8 @@ var SelectMenuAdapter = function (props) {
     var menuItemOverrides = useMemo(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
-    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+        Checkbox: mergedOverrides.Checkbox,
+    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem, mergedOverrides.Checkbox]);
     var currentCount = 0, totalCount = normalizeOptions(groupedItems).length;
     var itemsToRender = _flatten(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
         var itemsInGroup = groupedItems[itemGroup];
@@ -64,15 +69,15 @@ var SelectMenuAdapter = function (props) {
                 : selectMenuItem;
         });
         if (itemGroup !== UNGROUPED_ID) {
-            menuItems.unshift(_jsx(DividerOverriden, __assign({ first: index === 0 }, dividerProps, { children: _jsx(Typography, __assign({ variant: "l4", weight: "medium", className: "spr-text-03" }, { children: itemGroup }), void 0) }), "divider-".concat(itemGroup)));
+            menuItems.unshift(_jsx(DividerOverriden, __assign({ first: index === 0 }, dividerProps, { children: _jsx(Typography, __assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
         }
         return menuItems;
     }));
     if (_isEmpty(itemsToRender)) {
-        itemsToRender = (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true }, noResultsProps), void 0));
+        itemsToRender = (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)));
     }
     return (
     // focusWhenNavigationEnabled false, or else it will remove focus from select input
-    _jsx(MenuOverriden, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox" }, baseuiMenuListProps, { id: id, virtual: virtual, overscanCount: overscanCount, selectOnTab: selectOnTab }, menuProps, { children: itemsToRender }), void 0));
+    _jsx(MenuOverriden, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement }, baseuiMenuListProps, { id: listboxId, virtual: virtual, overscanCount: overscanCount, selectOnTab: selectOnTab }, menuProps, { children: itemsToRender })));
 };
 export default SelectMenuAdapter;

package/esm/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -1,22 +1,24 @@
 import * as React from 'react';
-import { ListItemTextProps } from '../../list';
-import { Override } from '../../overrides';
-import { MenuItemProps } from '../../menu';
-import { SelectProps } from '../types';
+import { type ListItemTextProps } from '../../list';
+import { type Override } from '../../overrides';
+import type { MenuItemProps } from '../../menu';
+import type { SelectProps } from '../types';
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<MenuItemProps, "selected"> & Pick<SelectProps, "labelKey" | "multi" | "valueKey"> & {
     item: Record<string, any>;
     getItemLabel: (item: Record<string, any>) => React.ReactNode;
     onItemSelect: (item: Record<string, any>) => void;
     overrides?: {
         MenuItem?: Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            $item?: Record<string, any> | undefined;
             getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
             renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
             overrides?: {
-                ListItem?: Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-                    $as?: React.ElementType<any> | undefined;
-                    className?: import("../..").Styles;
+                ListItem?: Override<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: React.ElementType | undefined;
+                    className?: import("../..").ClassName;
                     style?: import("../..").Styles;
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
@@ -44,13 +46,14 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                         Arrow?: Override<any> | undefined;
                         Inner?: Override<any> | undefined;
                     } & {
+                        LayersManager?: Override<import("../../baseui/layer").LayersManagerProps> | undefined;
                         ArrowTriangle?: Override<any> | undefined;
                     }) | undefined;
                     children?: React.ReactNode | ((args: {
                         isOpen: boolean;
                     }) => React.ReactNode);
                     targetElement?: HTMLElement | null | undefined;
-                    triggerType?: import("../../popover").TriggerType | undefined;
+                    triggerType?: import("../../tooltip").TriggerType | undefined;
                     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
                     innerRef?: React.Ref<HTMLElement> | undefined;
                     viewportAsBoundary?: boolean | undefined;
@@ -58,6 +61,43 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
         } & Record<string, any>> | undefined;
         ListItemText?: Override<ListItemTextProps & Record<string, any>> | undefined;
+        Checkbox?: Override<Omit<{
+            'aria-describedby'?: string | undefined;
+            'aria-errormessage'?: string | undefined;
+            ariaLabel?: string | undefined;
+            'aria-label'?: string | undefined;
+            children?: React.ReactNode;
+            containsInteractiveElement?: boolean | undefined;
+            overrides?: import("../../checkbox").CheckboxOverrides | undefined;
+            size?: import("../../checkbox").CheckboxSize | undefined;
+            intent?: import("../../checkbox").CheckboxIntent | undefined;
+            inputRef?: React.Ref<HTMLInputElement> | undefined;
+            checked?: boolean | undefined;
+            disabled?: boolean | undefined;
+            required?: boolean | undefined;
+            error?: boolean | undefined;
+            checkmarkType?: "default" | "toggle" | undefined;
+            autoFocus?: boolean | undefined;
+            id?: string | undefined;
+            name?: string | undefined;
+            value?: string | undefined;
+            isIndeterminate?: boolean | undefined;
+            labelPlacement?: import("../../checkbox").LabelPlacement | undefined;
+            title?: string | null | undefined;
+            onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseDown?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseUp?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseEnter?: ((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => unknown) | undefined;
+            onMouseLeave?: ((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => unknown) | undefined;
+            onFocus?: ((e: React.FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+            onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+        }, "className" | "style"> & {
+            $as?: React.ElementType | undefined;
+            className?: import("../..").ClassName;
+            style?: import("../..").Styles;
+        } & import("../../helpers/commonStyles").OutlineProps & {
+            'data-spaceweb'?: string | undefined;
+        } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/select/selectMenuAdapter/SelectMenuItem.js

@@ -8,28 +8,41 @@ import { ListItemText } from '../../list';
 import MenuItem from '../../menu/menu-item';
 import { mergeOverrides, useOverrides } from '../../overrides';
 import useUniqueId from '../../hooks/useUniqueId';
-import { SELECT_ALL_ID } from '../types';
+import { ActionableTooltip } from '../../tooltip';
+import { CLEAR_OPTION_ID, SELECT_ALL_ID } from '../types';
+import { GROUP_SELECT_ALL_ID } from '../../baseui/select/constants';
+/** Select-all, group-select-all, clear, and creatable rows do not show `getActionsElement` by default. */
+var shouldHideSelectItemActions = function (item) {
+    return Boolean(item[SELECT_ALL_ID] || item[GROUP_SELECT_ALL_ID] || item[CLEAR_OPTION_ID] || item.isCreatable);
+};
 var SelectMenuItem = React.forwardRef(function (_a, ref) {
-    var _b;
     var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, restProps = __rest(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect"]);
-    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, MenuItem), 2), MenuItemOverriden = _c[0], menuItemProps = _c[1];
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, MenuItem), 2), MenuItemOverriden = _b[0], menuItemProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Checkbox, Checkbox), 2), CheckboxOverriden = _c[0], checkboxProps = _c[1];
     var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ListItemText, ListItemText), 2), ListItemTextOverriden = _d[0], listItemTextProps = _d[1];
-    var handleItemSelect = useCallback(function () { return onItemSelect({ item: item }); }, [item, onItemSelect]);
-    var textOverrides = (_b = listItemTextProps) === null || _b === void 0 ? void 0 : _b.overrides;
+    var handleItemSelect = useCallback(function (event) { return onItemSelect({ item: item, event: event }); }, [item, onItemSelect]);
+    var textOverrides = listItemTextProps === null || listItemTextProps === void 0 ? void 0 : listItemTextProps.overrides;
     var listItemTextOverrides = useMemo(function () {
         return mergeOverrides({
-            PrimaryText: { props: { className: cx({ 'font-semibold': item[SELECT_ALL_ID] }) } },
+            PrimaryText: {
+                className: cx({ 'font-semibold': item[SELECT_ALL_ID] || item[GROUP_SELECT_ALL_ID] }),
+            },
         }, textOverrides);
-    }, [item, valueKey, textOverrides]);
+    }, [item, textOverrides]);
     var id = useUniqueId();
+    var checkboxPropsOverrides = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.overrides;
+    var checkboxOverrides = useMemo(function () {
+        return mergeOverrides({ Input: { props: { 'aria-labelledby': id, tabIndex: -1 } }, Label: { className: 'hidden' } }, checkboxPropsOverrides);
+    }, [id, checkboxPropsOverrides]);
     // Passes intent to override intent from useContextualFormProps,
     // see: https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/282
     var startEnhancer = useMemo(function () {
-        return multi && (_jsx(Checkbox, { checked: selected, size: "sm", overrides: { Input: { props: { 'aria-labelledby': id } }, Label: { style: 'hidden' } }, disabled: item.disabled, intent: "default" }, void 0));
-    }, [multi, selected, item.disabled, item[valueKey], id]);
-    return (_jsx(MenuItemOverriden, __assign({ role: "option", "aria-selected": selected, 
+        return multi && (_jsx(CheckboxOverriden, __assign({ checked: selected, size: "medium", disabled: item.disabled, intent: "default" }, checkboxProps, { overrides: checkboxOverrides })));
+    }, [multi, CheckboxOverriden, selected, item.disabled, checkboxProps, checkboxOverrides]);
+    var menuItemEl = (_jsx(MenuItemOverriden, __assign({ role: "option", "aria-selected": selected, 
         // for Multi Select variant do not show selected styles
-        selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id }, restProps, menuItemProps, { children: _jsx(ListItemTextOverriden, __assign({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) }), void 0) }), void 0));
+        selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, tabIndex: -1, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id, tooltipContent: item.tooltipContent, hideInlineActions: shouldHideSelectItemActions(item) }, restProps, menuItemProps, { children: _jsx(ListItemTextOverriden, __assign({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) })) })));
+    return item.disabled && item.disabledTooltipConfig ? (_jsx(ActionableTooltip, __assign({}, item.disabledTooltipConfig, { children: menuItemEl }))) : (menuItemEl);
 });
 SelectMenuItem.displayName = 'SelectMenuItem';
 export default React.memo(SelectMenuItem);

package/esm/select/selectMenuAdapter/hooks/useGetExpandedGroup.d.ts

@@ -1,6 +1,8 @@
 import type { GroupConfig } from '../types';
-import type { Items } from '../../../baseui/menu/types';
-export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, }: {
+import type { Items } from '../../../baseui/menu';
+import type { Value } from '../../../baseui/select/types';
+export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, value, }: {
     groupConfig: GroupConfig;
     groupedItems: Items;
+    value?: Value | undefined;
 }) => [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>];

package/esm/select/selectMenuAdapter/hooks/useGetExpandedGroup.js

@@ -1,16 +1,43 @@
 import { __read } from "tslib";
 import { useState } from 'react';
+import _isEqual from 'lodash/isEqual';
+var groupHasItems = function (groupId, groupedItems) { var _a; return !!(groupId && ((_a = groupedItems[groupId]) === null || _a === void 0 ? void 0 : _a.length)); };
+var isNotEqual = function (a, b) { return a !== b && !_isEqual(a, b); };
+var getInitialExpandedGroup = function (groupConfig, value) {
+    var _a, _b;
+    if ((value === null || value === void 0 ? void 0 : value.length) === 1) {
+        var selectedOptgroup_1 = (_a = value[0]) === null || _a === void 0 ? void 0 : _a.__optgroup;
+        if (selectedOptgroup_1 && groupConfig.some(function (group) { return group.id === selectedOptgroup_1; })) {
+            return selectedOptgroup_1;
+        }
+    }
+    return (_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id;
+};
 export var useGetExpandedGroup = function (_a) {
-    var _b;
-    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems;
-    var _c = __read(useState((_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id), 2), expandedGroupId = _c[0], setExpandedGroupId = _c[1];
-    // by default open very first group with non zero elements
-    var _d = __read(useState(false), 2), initialised = _d[0], setInitialised = _d[1];
-    if (!initialised) {
-        var validGroup = groupConfig.find(function (group) { var _a; return !!group.count || !!((_a = groupedItems[group.id]) === null || _a === void 0 ? void 0 : _a.length); });
-        if (validGroup) {
-            setExpandedGroupId(validGroup.id);
-            setInitialised(true);
+    var _b, _c;
+    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems, value = _a.value;
+    var _d = __read(useState(function () {
+        return getInitialExpandedGroup(groupConfig, value);
+    }), 2), expandedGroupId = _d[0], setExpandedGroupId = _d[1];
+    var _e = __read(useState(), 2), prevGroupConfig = _e[0], setPreviousGroupConfig = _e[1];
+    var _f = __read(useState(), 2), prevGroupItems = _f[0], setPrevGroupItems = _f[1];
+    if (isNotEqual(prevGroupConfig, groupConfig) || isNotEqual(prevGroupItems, groupedItems)) {
+        // Auto-switch to first group with items when groupConfig changed, or when groupedItems
+        // changed and the current expanded group has none. This allows empty groups to be
+        // expanded so users can see the "no results" message.
+        var groupConfigChanged = isNotEqual(prevGroupConfig, groupConfig);
+        var groupItemsChanged = isNotEqual(prevGroupItems, groupedItems);
+        var currentGroupHasItems = groupHasItems(expandedGroupId, groupedItems);
+        var shouldAutoSwitch = (groupConfigChanged && !currentGroupHasItems) || (groupItemsChanged && expandedGroupId && !currentGroupHasItems);
+        if (shouldAutoSwitch) {
+            var groupWithItems = groupConfig.find(function (group) { return groupHasItems(group.id, groupedItems); });
+            setExpandedGroupId((_b = groupWithItems === null || groupWithItems === void 0 ? void 0 : groupWithItems.id) !== null && _b !== void 0 ? _b : (_c = groupConfig[0]) === null || _c === void 0 ? void 0 : _c.id);
+        }
+        if (groupConfigChanged) {
+            setPreviousGroupConfig(groupConfig);
+        }
+        if (groupItemsChanged) {
+            setPrevGroupItems(groupedItems);
         }
     }
     return [expandedGroupId, setExpandedGroupId];