@sprinklrjs/spaceweb 14.13.1 → 14.14.0

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

@@ -0,0 +1,22 @@
+import type { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
+import type { Item, OnItemSelectFn } from '../../../baseui/menu/types';
+import type { MenuRef } from '../../../menu/types';
+import type { GroupConfig } from '../types';
+type UseRootSelectAllKeyboardNavParams = {
+    menuRef: RefObject<MenuRef>;
+    selectAllItem: Item | null;
+    ownerDocument: Document | undefined;
+    expandedGroupId: string | undefined;
+    setExpandedGroupId: Dispatch<SetStateAction<string | undefined>>;
+    groupConfig: GroupConfig;
+    onItemSelect?: OnItemSelectFn;
+    inputElement?: HTMLInputElement | null;
+    isFirstItemHighlighted: MutableRefObject<boolean>;
+};
+type UseRootSelectAllKeyboardNavReturn = {
+    selectAllItemRef: RefObject<HTMLElement | null>;
+    isRootSelectAllHighlighted: boolean;
+    leaveRootSelectAllHighlight: () => void;
+};
+export declare const useRootSelectAllKeyboardNav: ({ menuRef, selectAllItem, ownerDocument, expandedGroupId, setExpandedGroupId, groupConfig, onItemSelect, inputElement, isFirstItemHighlighted, }: UseRootSelectAllKeyboardNavParams) => UseRootSelectAllKeyboardNavReturn;
+export {};

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

@@ -0,0 +1,113 @@
+import { __read } from "tslib";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { canHighlightItem, getFirstHighlightableElement, getNextItemIndexToHighlight, prevItem, } from '../../../menu/helpers';
+var stopKeyboardEvent = function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+};
+var isFirstHighlightableInMenu = function (menu, highlightedItem) {
+    return getNextItemIndexToHighlight(highlightedItem, menu, prevItem) === highlightedItem;
+};
+var isFirstMenuItemHighlighted = function (menu, isFirstItemHighlighted) {
+    var highlightedMenuItem = menu === null || menu === void 0 ? void 0 : menu.querySelector('[data-highlighted="true"]');
+    if (menu && highlightedMenuItem && canHighlightItem(highlightedMenuItem)) {
+        return isFirstHighlightableInMenu(menu, highlightedMenuItem);
+    }
+    return isFirstItemHighlighted.current;
+};
+export var useRootSelectAllKeyboardNav = function (_a) {
+    var menuRef = _a.menuRef, selectAllItem = _a.selectAllItem, ownerDocument = _a.ownerDocument, expandedGroupId = _a.expandedGroupId, setExpandedGroupId = _a.setExpandedGroupId, groupConfig = _a.groupConfig, onItemSelect = _a.onItemSelect, inputElement = _a.inputElement, isFirstItemHighlighted = _a.isFirstItemHighlighted;
+    var selectAllItemRef = useRef(null);
+    var _b = __read(useState(!!selectAllItem), 2), isRootSelectAllHighlighted = _b[0], setIsRootSelectAllHighlighted = _b[1];
+    var clearMenuHighlight = useCallback(function () {
+        var _a, _b;
+        var menu = menuRef.current;
+        if (!menu)
+            return;
+        (_a = menu.turnOffKeyboardNavigation) === null || _a === void 0 ? void 0 : _a.call(menu);
+        (_b = menu.setHighlightedItem) === null || _b === void 0 ? void 0 : _b.call(menu, null);
+    }, [menuRef]);
+    var highlightFirstMenuItem = useCallback(function () {
+        var _a, _b;
+        var menu = menuRef.current;
+        if (!menu)
+            return;
+        (_a = menu.turnOnKeyboardNavigation) === null || _a === void 0 ? void 0 : _a.call(menu);
+        var firstHighlightableItem = getFirstHighlightableElement(menu).firstHighlightableItem;
+        var itemToHighlight = firstHighlightableItem;
+        (_b = menu.setHighlightedItem) === null || _b === void 0 ? void 0 : _b.call(menu, itemToHighlight);
+    }, [menuRef]);
+    var highlightRootSelectAll = useCallback(function () {
+        clearMenuHighlight();
+        setIsRootSelectAllHighlighted(true);
+    }, [clearMenuHighlight]);
+    var leaveRootSelectAllHighlight = useCallback(function () {
+        var _a, _b;
+        setIsRootSelectAllHighlighted(false);
+        (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.turnOnKeyboardNavigation) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [menuRef]);
+    useEffect(function () {
+        if (!selectAllItem || !ownerDocument)
+            return undefined;
+        var captureKeydownHandler = function (event) {
+            var _a;
+            if (isRootSelectAllHighlighted && event.key === 'ArrowDown' && !event.shiftKey) {
+                stopKeyboardEvent(event);
+                leaveRootSelectAllHighlight();
+                var firstGroupId = (_a = groupConfig[0]) === null || _a === void 0 ? void 0 : _a.id;
+                if (firstGroupId && expandedGroupId !== firstGroupId) {
+                    setExpandedGroupId(firstGroupId);
+                }
+                highlightFirstMenuItem();
+                return;
+            }
+            var expandedGroupIndex = groupConfig.findIndex(function (group) { return group.id === expandedGroupId; });
+            if (event.key === 'ArrowUp' &&
+                !event.shiftKey &&
+                expandedGroupIndex === 0 &&
+                isFirstMenuItemHighlighted(menuRef.current, isFirstItemHighlighted)) {
+                stopKeyboardEvent(event);
+                highlightRootSelectAll();
+                return;
+            }
+            if (isRootSelectAllHighlighted && event.key === 'Enter' && event.keyCode !== 229) {
+                stopKeyboardEvent(event);
+                onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect({ item: selectAllItem, event: event });
+            }
+        };
+        ownerDocument.body.addEventListener('keydown', captureKeydownHandler, { capture: true });
+        return function () {
+            ownerDocument.body.removeEventListener('keydown', captureKeydownHandler, { capture: true });
+        };
+    }, [
+        menuRef,
+        ownerDocument,
+        selectAllItem,
+        expandedGroupId,
+        groupConfig,
+        isRootSelectAllHighlighted,
+        setExpandedGroupId,
+        onItemSelect,
+        highlightRootSelectAll,
+        highlightFirstMenuItem,
+        leaveRootSelectAllHighlight,
+        isFirstItemHighlighted,
+    ]);
+    useEffect(function () {
+        var _a;
+        var selectAllItemId = (_a = selectAllItemRef.current) === null || _a === void 0 ? void 0 : _a.id;
+        if (!isRootSelectAllHighlighted || !inputElement || !selectAllItemId)
+            return undefined;
+        inputElement.setAttribute('aria-activedescendant', selectAllItemId);
+        return function () {
+            if (inputElement.getAttribute('aria-activedescendant') === selectAllItemId) {
+                inputElement.removeAttribute('aria-activedescendant');
+            }
+        };
+    }, [isRootSelectAllHighlighted, inputElement]);
+    return {
+        selectAllItemRef: selectAllItemRef,
+        isRootSelectAllHighlighted: isRootSelectAllHighlighted,
+        leaveRootSelectAllHighlight: leaveRootSelectAllHighlight,
+    };
+};

package/esm/select/styled-component.js

@@ -40,7 +40,7 @@ export var StyledInput = styled('input', 'bg-transparent border-none inline-bloc
     return ($disabled ? 'webkit-text-transparent' : '');
 });
 var StyledOverlayContentContainer = styled('div', 'overflow-auto rounded-inherit w-[--sw-width]');
-var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
+var getCommaSeparatedValues = function (value, limitTags, labelKey, locale, multi) {
     if (limitTags === void 0) { limitTags = Number(Infinity); }
     var _limitTags = limitTags < 0 ? Number(Infinity) : limitTags;
     var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.slice(0, _limitTags).map(function (val) { return val[labelKey]; });
@@ -49,16 +49,26 @@ var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
         commaSeparatedValues.push("".concat("+".concat(extraTagNumber, " ").concat(extraTagNumber === 1 ? locale.select.item : locale.select.items)));
     }
     var _commaSeparatedValues = commaSeparatedValues === null || commaSeparatedValues === void 0 ? void 0 : commaSeparatedValues.join(',');
-    return value && value.length > 0
-        ? "".concat(getInterpolatedString(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".")
-        : '';
+    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        return '';
+    }
+    if (multi) {
+        var count = value.length;
+        var countLabel = count === 1 ? locale.select.item : locale.select.items;
+        return "".concat(getInterpolatedString(locale.select.selectedMultiValuesPrefix, {
+            count: String(count),
+            countLabel: countLabel,
+            values: _commaSeparatedValues,
+        }), ".");
+    }
+    return "".concat(getInterpolatedString(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".");
 };
 var InputContainer = function (_a) {
     var _b;
     var size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, $limitTags = _a.$limitTags, props = __rest(_a, ["size", "$value", "$labelKey", "placeholder", "$limitTags"]);
     var locale = useLocale();
     var listboxId = useSelectIds().listboxId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
@@ -77,7 +87,7 @@ var Input = forwardRef(function (_a, ref) {
     var placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, _c = _a.$limitTags, $limitTags = _c === void 0 ? Number(Infinity) : _c, props = __rest(_a, ["placeholder", "$value", "$labelKey", "$limitTags"]);
     var locale = useLocale();
     var _d = useSelectIds(), listboxId = _d.listboxId, inputId = _d.inputId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;

package/esm/select/types.d.ts

@@ -130,6 +130,7 @@ export type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
     $isContainerFocused?: boolean;
     $valueByIdMap: Record<string, Option>;
     $valueKey: string;
+    ariaLabel?: string;
     value: Option;
     removeValue: RemoveValue;
     selectSize: Size;

package/list/list-item.d.ts

@@ -22,6 +22,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list-item.js

@@ -10,6 +10,7 @@ var overrides_1 = require("../overrides");
 var styled_component_1 = require("./styled-component");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
 var tooltip_1 = require("../tooltip");
+var useListItemTooltip_1 = tslib_1.__importStar(require("./useListItemTooltip"));
 var ListItem = React.forwardRef(function (_a, ref) {
     var startEnhancer = _a.startEnhancer, children = _a.children, className = _a.className, style = _a.style, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, _l = _a.tooltipContent, tooltipContent = _l === void 0 ? '' : _l, restProps = tslib_1.__rest(_a, ["startEnhancer", "children", "className", "style", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = (0, react_1.useRef)(null);
@@ -48,9 +49,15 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
-    var listEl = ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), (0, jsx_runtime_1.jsx)(ChildContainer, tslib_1.__assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
-    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, tslib_1.__assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }))) : (listEl);
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.Tooltip), 2), Tooltip = _r[0], tooltipProps = _r[1];
+    var tooltipControlProps = (0, useListItemTooltip_1.default)({
+        highlighted: highlighted,
+        tooltipHandlers: (0, useListItemTooltip_1.getListItemTooltipHandlers)(tooltipProps),
+    });
+    var listEl = (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-disabled required for disabled button list items
+    (0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "$as": $as, "aria-disabled": disabled, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), (0, jsx_runtime_1.jsx)(ChildContainer, tslib_1.__assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(Tooltip, tslib_1.__assign({ placement: "bottom", showArrow: true, content: tooltipContent, viewportAsBoundary: true }, tooltipProps, tooltipControlProps, { children: listEl }))) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 ListItem.__standard = 'Component';

package/list/types.d.ts

@@ -1,7 +1,7 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import type { Override } from '../overrides/types';
 import type { SpacewebComponentProps } from '../types';
-import type { StatefulTooltipProps } from '../tooltip';
+import type { TooltipProps } from '../tooltip/types';
 export type AlignItems = 'start' | 'center';
 export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export type ListItemSharedProps = {
@@ -31,7 +31,7 @@ export type ListItemProps = SpacewebComponentProps & {
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: StatefulTooltipProps['content'];
+    tooltipContent?: TooltipProps['content'];
 };
 export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;

package/list/useListItemTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from '../tooltip/types';
+export type ListItemTooltipHandlerProps = Pick<TooltipProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
+export declare const getListItemTooltipHandlers: (tooltipProps: Record<string, unknown>) => Partial<ListItemTooltipHandlerProps>;
+type ListItemTooltipControlProps = Required<Pick<TooltipProps, 'isOpen'>> & ListItemTooltipHandlerProps;
+type Params = {
+    highlighted: boolean;
+    tooltipHandlers?: Partial<ListItemTooltipHandlerProps>;
+};
+declare const useListItemTooltip: ({ highlighted, tooltipHandlers }: Params) => ListItemTooltipControlProps;
+export default useListItemTooltip;

package/list/useListItemTooltip.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListItemTooltipHandlers = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useCombinedHandler_1 = tslib_1.__importDefault(require("../hooks/useCombinedHandler"));
+var focusVisible_1 = require("../baseui/utils/focusVisible");
+var MenuContext_1 = require("../menu/MenuContext");
+var getListItemTooltipHandlers = function (tooltipProps) {
+    return ({
+        onMouseEnter: tooltipProps.onMouseEnter,
+        onMouseLeave: tooltipProps.onMouseLeave,
+        onFocus: tooltipProps.onFocus,
+        onBlur: tooltipProps.onBlur,
+    });
+};
+exports.getListItemTooltipHandlers = getListItemTooltipHandlers;
+var useListItemTooltip = function (_a) {
+    var highlighted = _a.highlighted, _b = _a.tooltipHandlers, tooltipHandlers = _b === void 0 ? {} : _b;
+    var listItemFocusVisible = (0, MenuContext_1.useMenuContext)().listItemFocusVisible;
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), hoverOpen = _c[0], setHoverOpen = _c[1];
+    var onMouseEnter = tooltipHandlers.onMouseEnter, onMouseLeave = tooltipHandlers.onMouseLeave, onFocus = tooltipHandlers.onFocus, onBlur = tooltipHandlers.onBlur;
+    var openHoverTooltip = (0, react_1.useCallback)(function () { return setHoverOpen(true); }, []);
+    var closeHoverTooltip = (0, react_1.useCallback)(function () { return setHoverOpen(false); }, []);
+    var openOnFocusVisible = (0, react_1.useCallback)(function (event) {
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setHoverOpen(true);
+        }
+    }, []);
+    var onMouseEnterHandler = (0, useCombinedHandler_1.default)(openHoverTooltip, onMouseEnter);
+    var onMouseLeaveHandler = (0, useCombinedHandler_1.default)(closeHoverTooltip, onMouseLeave);
+    var onBlurHandler = (0, useCombinedHandler_1.default)(closeHoverTooltip, onBlur);
+    var onFocusHandler = (0, useCombinedHandler_1.default)(onFocus, openOnFocusVisible);
+    return {
+        isOpen: hoverOpen || (highlighted && listItemFocusVisible),
+        onMouseEnter: onMouseEnterHandler,
+        onMouseLeave: onMouseLeaveHandler,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+    };
+};
+exports.default = useListItemTooltip;

package/locale/en_US.js

@@ -26,6 +26,7 @@ exports.DEFAULT_LOCALE = {
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
         selectedValuesPrefix: 'Selected ${values}',
+        selectedMultiValuesPrefix: 'Selected ${count} ${countLabel} ${values}',
         item: 'item',
         items: 'items',
         multiValueNavigationDescription: 'Use Left and Right arrow keys to navigate between selected values. Enter BackSpace to remove currently focused value',

package/menu/StatefulSubMenu.d.ts

@@ -81,7 +81,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/menu/SubMenu.d.ts

@@ -82,7 +82,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/menu/menu-item.d.ts

@@ -30,7 +30,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<ListItemSharedProps>;
-            tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+            tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
         } & Record<string, any>> | undefined;
         Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
             overrides?: ({

package/menu/menu-item.js

@@ -89,7 +89,7 @@ function MenuActionContainer(_a) {
 }
 function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     var props = {};
-    if (selected !== undefined) {
+    if (selected !== undefined && itemRole !== 'checkbox') {
         props['aria-selected'] = Boolean(selected);
     }
     if (ChildMenu) {
@@ -142,7 +142,7 @@ var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
         var _a, _b;
         setMenuContainerRef((_b = (_a = ownRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null);
     }, [setMenuContainerRef]);
-    var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
+    var isItemHighlighted = highlighted !== null && highlighted !== void 0 ? highlighted : (highlightedItem !== null && highlightedItem === ownRef.current);
     var resolvedItemActions = (0, react_1.useMemo)(function () { return resolveMenuActions(getActionsElement, $item); }, [getActionsElement, $item]);
     var shouldRenderActions = ((_b = resolvedItemActions === null || resolvedItemActions === void 0 ? void 0 : resolvedItemActions.length) !== null && _b !== void 0 ? _b : 0) > 0 && !ChildMenu && !hideInlineActions;
     var resolvedEndEnhancer = useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.13.1",
+  "version": "14.14.0",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -35,6 +35,7 @@
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
     "any-date-parser": "2.2.3",
+    "aria-hidden": "^1.2.6",
     "body-scroll-lock": "3.1.5",
     "card-validator": "^6.2.0",
     "class-variance-authority": "^0.7.0",
@@ -100,7 +101,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.13.1",
+    "@sprinklrjs/spaceweb-themes": "14.14.0",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/select/index.d.ts

@@ -19,4 +19,4 @@ export { CollapsibleSelectMenu } from './selectMenuAdapter/CollapsibleSelectMenu
 export { NestedSelect } from './nested-select';
 export { OverridenPopover } from './mobileSelect/overrides';
 export { filterOptions as defaultFilterOptions } from './utils/default-filter-options';
-export { getOptionLabel, getValueLabel } from '../baseui/select/select-component';
+export { getOptionLabel, getValueLabel, getValueAriaLabel } from '../baseui/select/select-component';

package/select/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValueLabel = exports.getOptionLabel = exports.defaultFilterOptions = exports.OverridenPopover = exports.NestedSelect = exports.CollapsibleSelectMenu = exports.GroupedSelect = exports.GROUP_SELECT_ALL_ID = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.UNGROUPED_ID = exports.CLEARABLE_KEY = exports.LOADING_KEY = exports.STATE_CHANGE_TYPE = exports.CLEAR_OPTION_ID = exports.SELECT_ALL_ID = exports.useSelectIds = exports.SelectIdsProvider = exports.SelectIdsContext = void 0;
+exports.getValueAriaLabel = exports.getValueLabel = exports.getOptionLabel = exports.defaultFilterOptions = exports.OverridenPopover = exports.NestedSelect = exports.CollapsibleSelectMenu = exports.GroupedSelect = exports.GROUP_SELECT_ALL_ID = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.UNGROUPED_ID = exports.CLEARABLE_KEY = exports.LOADING_KEY = exports.STATE_CHANGE_TYPE = exports.CLEAR_OPTION_ID = exports.SELECT_ALL_ID = exports.useSelectIds = exports.SelectIdsProvider = exports.SelectIdsContext = void 0;
 var SelectIdsContext_1 = require("./SelectIdsContext");
 Object.defineProperty(exports, "SelectIdsContext", { enumerable: true, get: function () { return SelectIdsContext_1.SelectIdsContext; } });
 Object.defineProperty(exports, "SelectIdsProvider", { enumerable: true, get: function () { return SelectIdsContext_1.SelectIdsProvider; } });
@@ -64,3 +64,4 @@ Object.defineProperty(exports, "defaultFilterOptions", { enumerable: true, get:
 var select_component_1 = require("../baseui/select/select-component");
 Object.defineProperty(exports, "getOptionLabel", { enumerable: true, get: function () { return select_component_1.getOptionLabel; } });
 Object.defineProperty(exports, "getValueLabel", { enumerable: true, get: function () { return select_component_1.getValueLabel; } });
+Object.defineProperty(exports, "getValueAriaLabel", { enumerable: true, get: function () { return select_component_1.getValueAriaLabel; } });

package/select/locale.d.ts

@@ -5,6 +5,7 @@ export type SelectLocale = {
     selectPlaceholder: string;
     clearOptionLabel: string;
     selectedValuesPrefix: string;
+    selectedMultiValuesPrefix: string;
     item: string;
     items: string;
     collapsibleMenuDescription: string;

package/select/multi-value.d.ts

@@ -18,6 +18,7 @@ declare const MultiValue: React.ForwardRefExoticComponent<Omit<TagProps, "overri
         __groupSelectAll?: boolean | undefined;
     }>>;
     $valueKey: string;
+    ariaLabel?: string | undefined;
     value: Readonly<{
         [x: string]: any;
         id?: import("./types").Id | undefined;

package/select/multi-value.js

@@ -13,7 +13,7 @@ var constants_1 = require("./constants");
 var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
 var MultiValue = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
-    var _d = props.overrides, overrides = _d === void 0 ? {} : _d, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, _$size = props.$size, _$isContainerFocused = props.$isContainerFocused, restProps = tslib_1.__rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _d = props.overrides, overrides = _d === void 0 ? {} : _d, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, _$size = props.$size, _$isContainerFocused = props.$isContainerFocused, ariaLabel = props.ariaLabel, children = props.children, restProps = tslib_1.__rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused", "ariaLabel", "children"]);
     var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _e[0], tagProps = _e[1];
     var theme = (0, style_1.useStyle)().theme;
     var tagRef = (0, react_1.useRef)();
@@ -51,6 +51,7 @@ var MultiValue = React.forwardRef(function (props, ref) {
             break;
     }
     var closeable = (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled;
+    var resolvedAriaLabel = ariaLabel || (typeof children === 'string' ? children : undefined);
     var tagSpacingClasses;
     switch (selectSize) {
         case 'xxxs':
@@ -66,7 +67,7 @@ var MultiValue = React.forwardRef(function (props, ref) {
             tagSpacingClasses = 'mr-1 my-0.5';
             break;
     }
-    return ((0, jsx_runtime_1.jsx)(TagComponent, tslib_1.__assign({ ref: combinedRef, variant: "light", intent: "default", "aria-label": typeof restProps.children === 'string' ? restProps.children : '', tabIndex: -1, onActionClick: onActionClickHandler, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: closeable, overrides: (0, overrides_1.mergeOverrides)({
+    return ((0, jsx_runtime_1.jsx)(TagComponent, tslib_1.__assign({ ref: combinedRef, variant: "light", intent: "default" }, (resolvedAriaLabel ? { 'aria-label': resolvedAriaLabel } : {}), { tabIndex: -1, onActionClick: onActionClickHandler, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: closeable, overrides: (0, overrides_1.mergeOverrides)({
             Root: {
                 className: [
                     'box-border max-w-[--sw-max-width]',
@@ -87,6 +88,6 @@ var MultiValue = React.forwardRef(function (props, ref) {
                 },
             },
             Action: { props: { tabIndex: -1 } },
-        }, tagProps.overrides) }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" })) : (props.children) })));
+        }, tagProps.overrides) }, { children: isLoading ? (0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }) : children })));
 });
 exports.default = MultiValue;

package/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -67,7 +67,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: import("../../overrides").Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -6,6 +6,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var isNumber_1 = tslib_1.__importDefault(require("lodash/isNumber"));
 var react_1 = require("react");
 var useGetExpandedGroup_1 = require("./hooks/useGetExpandedGroup");
+var useRootSelectAllKeyboardNav_1 = require("./hooks/useRootSelectAllKeyboardNav");
 var box_1 = require("../../box");
 var menu_1 = require("../../menu");
 var typography_1 = require("../../typography");
@@ -49,6 +50,7 @@ var CollapsibleSelectMenu = function (_a) {
     var isFirstItemHighlighted = (0, react_1.useRef)(false);
     var isLastItemHighlighted = (0, react_1.useRef)(false);
     var menuRef = (0, react_1.useRef)(null);
+    var selectAllItem = shouldDisplaySelectAll ? groupedItems[constants_1.UNGROUPED_ID][0] : 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 () {
@@ -75,6 +77,17 @@ var CollapsibleSelectMenu = function (_a) {
     var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(overrides_2.selectMenuOverrides, overrides); }, [overrides]);
     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 _p = (0, useRootSelectAllKeyboardNav_1.useRootSelectAllKeyboardNav)({
+        menuRef: menuRef,
+        selectAllItem: selectAllItem,
+        ownerDocument: ownerDocument,
+        expandedGroupId: expandedGroupId,
+        setExpandedGroupId: setExpandedGroupId,
+        groupConfig: groupConfig,
+        onItemSelect: onItemSelect,
+        inputElement: inputElement,
+        isFirstItemHighlighted: isFirstItemHighlighted,
+    }), selectAllItemRef = _p.selectAllItemRef, isRootSelectAllHighlighted = _p.isRootSelectAllHighlighted, leaveRootSelectAllHighlight = _p.leaveRootSelectAllHighlight;
     var menuItemOverrides = (0, react_1.useMemo)(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
@@ -107,6 +120,9 @@ var CollapsibleSelectMenu = function (_a) {
     }, [expandedGroupId, groupedItems]);
     var handleOnHighlightedItemChange = function (item) {
         var _a;
+        if (item) {
+            leaveRootSelectAllHighlight();
+        }
         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);
         isFirstItemHighlighted.current = !!(item && (!item.previousSibling || item === prevHighlightableElement));
@@ -114,13 +130,18 @@ var CollapsibleSelectMenu = function (_a) {
         (_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) {
+        leaveRootSelectAllHighlight();
         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;
+    }, [inputElement, setExpandedGroupId, leaveRootSelectAllHighlight]);
     var clearAsOptionItem = !multi && clearAsOption ? groupedItems[constants_1.UNGROUPED_ID][0] : null;
     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 isMenuItemHighlighted = isRootSelectAllHighlighted ? false : undefined;
+    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({ ref: selectAllItemRef, overrides: menuItemOverrides, item: selectAllItem, selected: globalSelectAllSelected, highlighted: isRootSelectAllHighlighted, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, "$as": "div", button: true, "data-testid": "universal-select-all" }, baseuiMenuItemProps, { 
+                // Root Select All sits outside the options listbox, so it must be role="checkbox" (not role="option" )
+                // See SAP UI5 MultiComboBox Select All:
+                // https://ui5.sap.com/#/entity/sap.m.MultiComboBox/sample/sap.m.sample.MultiComboBoxSelectAll
+                role: "checkbox", className: ['m-2', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (_group, index) {
                 var _a;
                 var _b, _c;
                 var groupId = _group.id, groupLabel = _group.label;
@@ -140,11 +161,11 @@ var CollapsibleSelectMenu = function (_a) {
                     _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) {
+                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, disableAutoHighlight: isRootSelectAllHighlighted, 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) {
+                            }, 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, highlighted: isMenuItemHighlighted }, 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, highlighted: isMenuItemHighlighted }, 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]));
+                                    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, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
                                 })] })))] }), groupId));
             })] })));
 };

package/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -3,7 +3,7 @@ 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"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<MenuItemProps, "selected" | "role"> & Pick<SelectProps, "labelKey" | "multi" | "valueKey"> & {
     item: Record<string, any>;
     getItemLabel: (item: Record<string, any>) => React.ReactNode;
     onItemSelect: (item: Record<string, any>) => void;
@@ -38,7 +38,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: React.ReactNode | import("../../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({