@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/select/select.js

@@ -2,23 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var base_select_1 = (0, tslib_1.__importDefault)(require("./base-select"));
-var overlaySelect_1 = (0, tslib_1.__importDefault)(require("./overlaySelect"));
-var mobileSelect_1 = (0, tslib_1.__importDefault)(require("./mobileSelect"));
-var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+//libs
+var react_1 = require("react");
+var keyBy_1 = tslib_1.__importDefault(require("lodash/keyBy"));
+//components
+var base_select_1 = tslib_1.__importDefault(require("./base-select"));
+var overlaySelect_1 = tslib_1.__importDefault(require("./overlaySelect"));
+var mobileSelect_1 = tslib_1.__importDefault(require("./mobileSelect"));
+//hooks
 var context_1 = require("../form-control/context");
 var style_1 = require("../style");
+//helpers
+var default_props_1 = tslib_1.__importDefault(require("./default-props"));
 var themeHelpers_1 = require("../helpers/themeHelpers");
+var adapt_select_value_1 = require("./utils/adapt-select-value");
+var utils_1 = require("../baseui/select/utils");
 var Select = function (props) {
     var adaptedProps = (0, context_1.useContextualFormProps)(props);
+    var options = props.options, valueKey = props.valueKey, value = props.value;
+    var optionsIdMap = (0, react_1.useMemo)(function () { return (0, keyBy_1.default)((0, utils_1.normalizeOptions)(options), valueKey); }, [options, valueKey]);
+    var adaptedValue = (0, react_1.useMemo)(function () { return (0, adapt_select_value_1.adaptSelectValue)(optionsIdMap, value); }, [optionsIdMap, value]);
     var theme = (0, style_1.useStyle)().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
+            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, tslib_1.__assign({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme), value: adaptedValue }));
         case 'mobile':
-            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
+            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, tslib_1.__assign({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme), value: adaptedValue }));
         default:
-            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
+            return (0, jsx_runtime_1.jsx)(base_select_1.default, tslib_1.__assign({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme), value: adaptedValue }));
     }
 };
 Select.defaultProps = default_props_1.default;

package/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { ReactElement, UIEvent } from 'react';
-import { MenuAdapterProps } from './types';
-import { MenuProps } from '../../menu';
-import type { GroupConfig } from './types';
-export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: selectAllChecked, noResultsMsg, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, inputRef, }: {
+import type { ReactElement, ReactNode, UIEvent } from 'react';
+import type { MenuAdapterProps, GroupConfig } from './types';
+import { type MenuProps } from '../../menu';
+import type { ClassName } from '../../types';
+export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: globalSelectAllChecked, noResultsMsg, noResultsConfig, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, disableWhenSelectAllChecked, deriveGroupItemCount, hideGroupSelectAll, inputElement, getActionsElement, }: {
     items: import("../../baseui/menu").Items;
     initialState?: import("../../baseui/menu").InitialState | undefined;
     stateReducer?: import("../../baseui/menu").StateReducerFn | undefined;
@@ -11,7 +10,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     onActiveDescendantChange?: ((id?: string | undefined) => unknown) | undefined;
     onItemSelect?: import("../../baseui/menu").OnItemSelectFn | undefined;
     rootRef?: import("../../baseui/menu").RootRef | undefined;
-    children?: ((a: import("../../baseui/menu").RenderProps) => React.ReactNode) | undefined;
+    children?: ((a: import("../../baseui/menu").RenderProps) => ReactNode) | undefined;
     typeAhead?: boolean | undefined;
     addMenuToNesting?: ((ref: {
         current: HTMLElement | null;
@@ -35,28 +34,30 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     }) => boolean) | undefined;
 } & import("../../baseui/menu").MenuProps & {
     id?: string | undefined;
-    value: import("..").Value | undefined;
+    value?: import("..").Value | undefined;
     overrides?: {
         Menu?: import("../../overrides").Override<MenuProps> | undefined;
         MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
-            getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+            $item?: Record<string, any> | undefined;
+            getChildMenu?: (() => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
             renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
             overrides?: {
-                ListItem?: import("../../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-                    $as?: React.ElementType<any> | undefined;
-                    className?: import("../..").Styles;
-                    style?: import("../..").Styles;
+                ListItem?: import("../../overrides").Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: ClassName;
+                    style?: import("../../types").Styles;
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
                     autoFocus?: boolean | undefined;
                     button?: boolean | undefined;
-                    children?: React.ReactNode;
+                    children?: ReactNode;
                     disabled?: boolean | undefined;
                     endEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
                     highlighted?: boolean | undefined;
-                    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+                    onClick?: ((event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
                     overrides?: {
                         ChildContainer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
                         EndEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
@@ -66,7 +67,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: import("../../overrides").Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({
@@ -74,15 +75,16 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                         Arrow?: import("../../overrides").Override<any> | undefined;
                         Inner?: import("../../overrides").Override<any> | undefined;
                     } & {
+                        LayersManager?: import("../../overrides").Override<import("../../baseui/layer").LayersManagerProps> | undefined;
                         ArrowTriangle?: import("../../overrides").Override<any> | undefined;
                     }) | undefined;
-                    children?: React.ReactNode | ((args: {
+                    children?: ReactNode | ((args: {
                         isOpen: boolean;
-                    }) => React.ReactNode);
+                    }) => ReactNode);
                     targetElement?: HTMLElement | null | undefined;
                     triggerType?: import("../../popover").TriggerType | undefined;
                     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
-                    innerRef?: React.Ref<HTMLElement> | undefined;
+                    innerRef?: import("react").Ref<HTMLElement> | undefined;
                     viewportAsBoundary?: boolean | undefined;
                 } & Record<string, any>> | undefined;
             } | undefined;
@@ -103,17 +105,30 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     } | undefined;
     valueKey: string;
     labelKey: string;
-    multi: boolean | undefined;
-    selectAllSelected: boolean;
+    multi?: boolean | undefined;
+    selectAllSelected?: boolean | undefined;
     shouldDisplaySelectAll?: boolean | undefined;
     noResultsMsg?: string | undefined;
+    noResultsConfig?: import("../no-results-message").NoResultsMessageProps | undefined;
     captureScroll?: boolean | undefined;
     virtual?: boolean | undefined;
     overscanCount?: number | undefined;
     selectOnTab?: boolean | undefined;
-    inputRef?: React.RefObject<HTMLInputElement> | undefined;
+    getActionsElement?: import("../../menu").MenuItemActions;
+    inputElement?: HTMLInputElement | null | undefined;
 } & {
     $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
     groupConfig: GroupConfig;
     clearAsOption?: boolean | undefined;
+    /**
+     * When set to true, if selectAllSelected is true it disables the option groups and collapses them
+     * default value false as set in case of GroupedSelect, true in case of GroupedAsyncSelect
+     */
+    disableWhenSelectAllChecked?: boolean | undefined;
+    /**
+     * When set to true, counts group items in groupConfig
+     * default true for GroupedSelect, false in case of GroupedAsyncSelect
+     */
+    deriveGroupItemCount?: boolean | undefined;
+    hideGroupSelectAll?: boolean | undefined;
 }) => ReactElement;

package/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -3,103 +3,134 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsibleSelectMenu = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var isNumber_1 = (0, tslib_1.__importDefault)(require("lodash/isNumber"));
+var isNumber_1 = tslib_1.__importDefault(require("lodash/isNumber"));
 var react_1 = require("react");
 var useGetExpandedGroup_1 = require("./hooks/useGetExpandedGroup");
 var box_1 = require("../../box");
 var menu_1 = require("../../menu");
 var typography_1 = require("../../typography");
-var SelectMenuItem_1 = (0, tslib_1.__importDefault)(require("./SelectMenuItem"));
-var map_1 = (0, tslib_1.__importDefault)(require("lodash/map"));
-var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
+var SelectMenuItem_1 = tslib_1.__importDefault(require("./SelectMenuItem"));
+var map_1 = tslib_1.__importDefault(require("lodash/map"));
+var isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 var overrides_1 = require("../../overrides");
 var overrides_2 = require("../overrides");
 var styled_component_1 = require("../styled-component");
 var constants_1 = require("../constants");
 var base_button_1 = require("../../base-button");
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-down"));
-var commonStyles_1 = require("../../helpers/commonStyles");
+var chevron_down_1 = tslib_1.__importDefault(require("../../icon/components/chevron-down"));
 var helpers_1 = require("../../menu/helpers");
 var collapse_1 = require("../../transitions/collapse");
+var constants_2 = require("../../baseui/select/constants");
+var locale_1 = require("../../locale");
+var DocumentProvider_1 = require("../../spacewebProvider/DocumentProvider");
+var hidden_element_1 = require("../utils/hidden-element");
+var SelectIdsContext_1 = require("../SelectIdsContext");
 var Collapsible = function (_a) {
-    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, isFirstGroupedHeader = _a.isFirstGroupedHeader;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: { borderRadius: 'inherit' } }, { children: [(0, jsx_runtime_1.jsxs)(base_button_1.BaseButton, (0, tslib_1.__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: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, (0, tslib_1.__assign)({ className: "block", variant: "h7" }, { children: [group.label, " ", (0, isNumber_1.default)(group.count) ? "(".concat(group.count, ")") : ''] }), void 0), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { style: commonStyles_1.chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(collapse_1.Collapse, (0, tslib_1.__assign)({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }), void 0)] }), void 0));
+    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, className = _a.className;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "rounded-inherit" }, { children: [(0, jsx_runtime_1.jsxs)(base_button_1.BaseButton, tslib_1.__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: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, tslib_1.__assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: group.label })), (0, isNumber_1.default)(group.count) ? (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: " (".concat(group.count, ")") })) : null] })), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { 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") })] })), (0, jsx_runtime_1.jsx)(collapse_1.Collapse, tslib_1.__assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
 };
 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 = (0, tslib_1.__read)((0, useGetExpandedGroup_1.useGetExpandedGroup)({ groupConfig: groupConfig, groupedItems: groupedItems }), 2), expandedGroupId = _f[0], setExpandedGroupId = _f[1];
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(false), 2), isFirstItemHighlighted = _g[0], setIsFirstItemHighlighted = _g[1];
-    var _h = (0, tslib_1.__read)((0, react_1.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 = tslib_1.__read((0, useGetExpandedGroup_1.useGetExpandedGroup)({ groupConfig: groupConfig, groupedItems: groupedItems, value: value }), 2), expandedGroupId = _k[0], setExpandedGroupId = _k[1];
+    var isFirstItemHighlighted = (0, react_1.useRef)(false);
+    var isLastItemHighlighted = (0, react_1.useRef)(false);
     var menuRef = (0, react_1.useRef)(null);
+    var ownerDocument = (0, DocumentProvider_1.useDocument)();
+    var _l = (0, SelectIdsContext_1.useSelectIds)(), listboxId = _l.listboxId, menuDescriptionId = _l.menuDescriptionId;
     var selectedValuesSet = (0, react_1.useMemo)(function () {
         var set = new Set((0, map_1.default)(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 = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(overrides_2.selectMenuOverrides, overrides); }, [overrides]);
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuComponent = _j[0], menuProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _k[0], noResultsProps = _k[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuComponent = _m[0], menuProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _o[0], noResultsProps = _o[1];
     var menuItemOverrides = (0, react_1.useMemo)(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
     (0, react_1.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)) {
+            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted.current)) {
                 setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
                 event.stopPropagation(); // prevents the menu to move to the second item of the next group
             }
-            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted)) {
+            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted.current)) {
                 setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].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]);
     var handleOnHighlightedItemChange = function (item) {
-        var _a, _b;
+        var _a;
         var nextHighlightableElement = (0, helpers_1.getNextItemIndexToHighlight)(item !== null && item !== void 0 ? item : null, menuRef.current, helpers_1.nextItem);
         var prevHighlightableElement = (0, helpers_1.getNextItemIndexToHighlight)(item !== null && item !== void 0 ? item : null, menuRef.current, helpers_1.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 = (0, react_1.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[constants_1.UNGROUPED_ID][0] : null;
     var clearAsOptionItem = !multi && clearAsOption ? groupedItems[constants_1.UNGROUPED_ID][0] : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__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 = (0, locale_1.useLocale)().select;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "rounded-inherit" }, { children: [selectAllItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__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 ((0, jsx_runtime_1.jsx)(Collapsible, (0, tslib_1.__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: (0, isEmpty_1.default)(itemsInGroup) ? ((0, jsx_runtime_1.jsx)(NoResultsOverriden, (0, tslib_1.__assign)({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : ((0, jsx_runtime_1.jsxs)(MenuComponent, (0, tslib_1.__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 ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__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 = tslib_1.__assign(tslib_1.__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[constants_2.GROUP_SELECT_ALL_ID] = true,
+                    _a.selected = groupSelectAllSelected,
+                    _a);
+                return ((0, jsx_runtime_1.jsxs)(Collapsible, tslib_1.__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: [(0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, tslib_1.__assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), (0, isEmpty_1.default)(itemsInGroup) ? ((0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : ((0, jsx_runtime_1.jsxs)(MenuComponent, tslib_1.__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 ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__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 ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__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 ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__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));
+            })] })));
 };
 exports.CollapsibleSelectMenu = CollapsibleSelectMenu;

package/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/select/selectMenuAdapter/NestedSelectMenuAdapter.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var map_1 = tslib_1.__importDefault(require("lodash/map"));
+var SelectIdsContext_1 = require("../SelectIdsContext");
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+//components
+var menu_1 = require("../../menu");
+var styled_component_1 = require("../styled-component");
+var SelectMenuItem_1 = tslib_1.__importDefault(require("./SelectMenuItem"));
+//helpers
+var overrides_1 = require("../../overrides");
+var overrides_2 = require("../overrides");
+var chevron_right_1 = tslib_1.__importDefault(require("../../icon/components/chevron-right"));
+var NestedSelectMenuAdapter = function (props) {
+    var _a, _b, _c, _d;
+    var listboxId = (0, SelectIdsContext_1.useSelectIds)().listboxId;
+    var overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? noop_1.default : _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 = (0, react_1.useMemo)(function () {
+        var set = new Set((0, map_1.default)(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 = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return (0, overrides_1.mergeOverrides)({
+            SubMenu: {
+                props: {
+                    overrides: (0, overrides_1.mergeOverrides)(overrides_2.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 : {}),
+                    }),
+                },
+            },
+        }, (0, omit_1.default)(overrides, 'Menu'));
+    }, [overrides]);
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.SubMenu, menu_1.SubMenu), 2), MenuOverriden = _f[0], menuProps = _f[1];
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
+    var menuItemOverrides = (0, react_1.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 ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__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: (0, jsx_runtime_1.jsx)(chevron_right_1.default, { size: 12 }) } : {}), baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
+        }
+        return null;
+    };
+    return totalCount ? ((0, jsx_runtime_1.jsx)(MenuOverriden, tslib_1.__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 }))) : ((0, jsx_runtime_1.jsx)(menu_1.Menu, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: (0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)) })));
+};
+exports.default = NestedSelectMenuAdapter;

package/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/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var flatten_1 = (0, tslib_1.__importDefault)(require("lodash/flatten"));
-var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
-var map_1 = (0, tslib_1.__importDefault)(require("lodash/map"));
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
-var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
+var SelectIdsContext_1 = require("../SelectIdsContext");
+var isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
+var map_1 = tslib_1.__importDefault(require("lodash/map"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 var list_1 = require("../../list");
 var menu_1 = require("../../menu");
 var overrides_1 = require("../../overrides");
@@ -16,7 +17,7 @@ var constants_1 = require("../constants");
 var overrides_2 = require("../overrides");
 var styled_component_1 = require("../styled-component");
 var types_1 = require("../types");
-var SelectMenuItem_1 = (0, tslib_1.__importDefault)(require("./SelectMenuItem"));
+var SelectMenuItem_1 = tslib_1.__importDefault(require("./SelectMenuItem"));
 var utils_1 = require("../../baseui/select/utils");
 var removeUngroupedIfEmpty = function (groupedOptions) {
     var _a;
@@ -27,54 +28,58 @@ 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_1.default : _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 = (0, SelectIdsContext_1.useSelectIds)().listboxId;
+    var groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? noop_1.default : _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 = (0, react_1.useMemo)(function () {
         var set = new Set((0, map_1.default)(value, valueKey));
         return set;
     }, [value, valueKey]);
+    var defaultGetItemLabel = (0, react_1.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 = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(overrides_2.selectMenuOverrides, overrides); }, [overrides]);
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuOverriden = _f[0], menuProps = _f[1];
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Divider, list_1.Divider), 2), DividerOverriden = _h[0], dividerProps = _h[1];
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuOverriden = _f[0], menuProps = _f[1];
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
+    var _h = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides.Divider, list_1.Divider), 2), DividerOverriden = _h[0], dividerProps = _h[1];
     var menuItemOverrides = (0, react_1.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 = (0, utils_1.normalizeOptions)(groupedItems).length;
     var itemsToRender = (0, flatten_1.default)(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
         var itemsInGroup = groupedItems[itemGroup];
         var menuItems = itemsInGroup.flatMap(function (item) {
             currentCount += 1;
             var selected = selectedValuesSet.has(item[valueKey]) || (item[types_1.SELECT_ALL_ID] && selectAllSelected);
-            var selectMenuItem = ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__assign)({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, "aria-posinset": currentCount, "aria-setsize": totalCount }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
+            var selectMenuItem = ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, "aria-posinset": currentCount, "aria-setsize": totalCount }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
             return item[types_1.SELECT_ALL_ID]
-                ? [selectMenuItem, (0, jsx_runtime_1.jsx)(DividerOverriden, (0, tslib_1.__assign)({ "$item": item }, dividerProps), "divider-select-all")]
+                ? [selectMenuItem, (0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ "$item": item }, dividerProps), "divider-select-all")]
                 : selectMenuItem;
         });
         if (itemGroup !== constants_1.UNGROUPED_ID) {
-            menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, (0, tslib_1.__assign)({ first: index === 0 }, dividerProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "l4", weight: "medium", className: "spr-text-03" }, { children: itemGroup }), void 0) }), "divider-".concat(itemGroup)));
+            menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ first: index === 0 }, dividerProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
         }
         return menuItems;
     }));
     if ((0, isEmpty_1.default)(itemsToRender)) {
-        itemsToRender = ((0, jsx_runtime_1.jsx)(NoResultsOverriden, (0, tslib_1.__assign)({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true }, noResultsProps), void 0));
+        itemsToRender = ((0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__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
-    (0, jsx_runtime_1.jsx)(MenuOverriden, (0, tslib_1.__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));
+    (0, jsx_runtime_1.jsx)(MenuOverriden, tslib_1.__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 })));
 };
 exports.default = SelectMenuAdapter;