@sprinklrjs/spaceweb 14.13.1 → 14.14.0

package/esm/baseui/modal/modal.js

@@ -15,6 +15,7 @@ import { SIZE, ROLE, CLOSE_SOURCE, BASEWEB_NAME, SIZE_WIDTHS } from './constants
 import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Hidden, } from './styled-components';
 import { CloseIcon } from './close-icon';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
+import { isolateAccessibilityTree } from '../../a11y/accessibilityIsolation';
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
@@ -61,6 +62,11 @@ var Modal = /** @class */ (function (_super) {
         _this.onCloseClick = function () {
             _this.triggerClose(CLOSE_SOURCE.closeButton);
         };
+        _this.onLayerMount = function () {
+            if (_this.props.isOpen) {
+                _this.enableModalAccessibilityIsolation();
+            }
+        };
         _this.animateOutComplete = function () {
             _this.setState({
                 isVisible: false,
@@ -82,6 +88,7 @@ var Modal = /** @class */ (function (_super) {
         }
     };
     Modal.prototype.componentWillUnmount = function () {
+        this.disableModalAccessibilityIsolation();
         this.resetMountNodeScroll();
         this.clearTimers();
         this.prevMounted = this.mounted;
@@ -121,6 +128,19 @@ var Modal = /** @class */ (function (_super) {
             this.lastMountNodeOverflowStyle = null;
         }
     };
+    Modal.prototype.enableModalAccessibilityIsolation = function () {
+        if (this.releaseModalAccessibilityIsolation || !this.rootRef.current) {
+            return;
+        }
+        this.releaseModalAccessibilityIsolation = isolateAccessibilityTree(this.rootRef.current);
+    };
+    Modal.prototype.disableModalAccessibilityIsolation = function () {
+        if (!this.releaseModalAccessibilityIsolation) {
+            return;
+        }
+        this.releaseModalAccessibilityIsolation();
+        this.releaseModalAccessibilityIsolation = undefined;
+    };
     Modal.prototype.clearTimers = function () {
         if (this.animateOutTimer) {
             clearTimeout(this.animateOutTimer);
@@ -140,6 +160,7 @@ var Modal = /** @class */ (function (_super) {
         // Clear any existing timers (like previous animateOutTimer)
         this.clearTimers();
         this.disableMountNodeScroll();
+        this.enableModalAccessibilityIsolation();
         if (this.props.animate) {
             this.animateStartTimer = requestAnimationFrame(function () {
                 _this.setState({ isVisible: true });
@@ -150,6 +171,7 @@ var Modal = /** @class */ (function (_super) {
         }
     };
     Modal.prototype.didClose = function () {
+        this.disableModalAccessibilityIsolation();
         this.resetMountNodeScroll();
         this.animateOutTimer = setTimeout(this.animateOutComplete, 500);
     };
@@ -206,7 +228,7 @@ var Modal = /** @class */ (function (_super) {
         }
         return (_jsx(FocusLock, __assign({ disabled: !focusLock, 
             // Allow focus to escape when UI is within an iframe
-            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: _jsx(Root, __assign({ "data-baseweb": BASEWEB_NAME, ref: this.rootRef }, sharedProps, rootProps, { children: _jsx(DialogContainer, __assign({ "data-testid": "spaceweb-modal-dialog-container", ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: _jsxs(Dialog, __assign({ tabIndex: -1, "aria-modal": true, role: role }, sharedProps, dialogProps, { style: [dialogueWidth ? { '--sw-width': dialogueWidth } : {}, dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.style] }, { children: [renderedContent, closeable ? (_jsx(Close, __assign({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: forkFocus(closeProps, this.handleFocus), onBlur: forkBlur(closeProps, this.handleBlur) }, { children: _jsx(CloseIcon, {}) }))) : null] })) })) })) })));
+            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: _jsx(Root, __assign({ "data-baseweb": BASEWEB_NAME, ref: this.rootRef }, sharedProps, rootProps, { children: _jsx(DialogContainer, __assign({ "data-testid": "spaceweb-modal-dialog-container", ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: _jsxs(Dialog, __assign({ tabIndex: -1, role: role }, sharedProps, dialogProps, { style: [dialogueWidth ? { '--sw-width': dialogueWidth } : {}, dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.style] }, { children: [renderedContent, closeable ? (_jsx(Close, __assign({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: forkFocus(closeProps, this.handleFocus), onBlur: forkBlur(closeProps, this.handleBlur) }, { children: _jsx(CloseIcon, {}) }))) : null] })) })) })) })));
     };
     Modal.prototype.render = function () {
         // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
@@ -214,7 +236,7 @@ var Modal = /** @class */ (function (_super) {
         var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
         if (renderedContent) {
             if (mountedAndOpen) {
-                return (_jsx(Layer, __assign({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) })));
+                return (_jsx(Layer, __assign({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, onMount: this.onLayerMount, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) })));
             }
             return _jsx(Hidden, { children: renderedContent });
         }

package/esm/baseui/select/default-props.d.ts

@@ -32,6 +32,7 @@ declare const defaultProps: {
     filterOutSelected: boolean;
     getOptionLabel: null;
     getValueLabel: null;
+    getValueAriaLabel: null;
     ignoreCase: boolean;
     isLoading: boolean;
     labelKey: string;

package/esm/baseui/select/default-props.js

@@ -31,6 +31,8 @@ var defaultProps = {
     getOptionLabel: null,
     // @ts-ignore
     getValueLabel: null,
+    // @ts-ignore
+    getValueAriaLabel: null,
     ignoreCase: true,
     isLoading: false,
     labelKey: 'label',

package/esm/baseui/select/select-component.d.ts

@@ -5,6 +5,8 @@ type GetOptionLabel = NonNullable<SelectProps['getOptionLabel']>;
 export declare function getOptionLabel({ option }: Parameters<GetOptionLabel>[0], { selectLocale, labelKey }: SelectProps): ReactNode;
 type GetValueLabel = NonNullable<SelectProps['getValueLabel']>;
 export declare function getValueLabel({ option }: Parameters<GetValueLabel>[0], { labelKey }: SelectProps): ReactNode;
+type GetValueAriaLabel = NonNullable<SelectProps['getValueAriaLabel']>;
+export declare function getValueAriaLabel({ option }: Parameters<GetValueAriaLabel>[0], { labelKey }: SelectProps): string | undefined;
 declare class Select extends Component<SelectProps, SelectState> {
     static defaultProps: {
         'aria-label': null;
@@ -39,6 +41,7 @@ declare class Select extends Component<SelectProps, SelectState> {
         filterOutSelected: boolean;
         getOptionLabel: null;
         getValueLabel: null;
+        getValueAriaLabel: null;
         ignoreCase: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -108,6 +111,7 @@ declare class Select extends Component<SelectProps, SelectState> {
     handleKeyDown: (event: KeyboardEvent) => void;
     getOptionLabel: GetOptionLabel;
     getValueLabel: GetValueLabel;
+    getValueAriaLabel: GetValueAriaLabel;
     getMemoizedOptionsMap: (options: Options, valueKey: string) => Map<string, Option>;
     /**
      * Extends the value into an array from the given options

package/esm/baseui/select/select-component.js

@@ -49,6 +49,12 @@ export function getValueLabel(_a, _b) {
     var labelKey = _b.labelKey;
     return labelKey && option[labelKey];
 }
+export function getValueAriaLabel(_a, _b) {
+    var option = _a.option;
+    var labelKey = _b.labelKey;
+    var label = labelKey && option[labelKey];
+    return typeof label === 'string' ? label : undefined;
+}
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select() {
@@ -401,6 +407,8 @@ var Select = /** @class */ (function (_super) {
         _this.getOptionLabel = function (optionData, props) { return getOptionLabel(optionData, props); };
         // eslint-disable-next-line class-methods-use-this -- delegates to module-level helper
         _this.getValueLabel = function (optionData, props) { return getValueLabel(optionData, props); };
+        // eslint-disable-next-line class-methods-use-this -- delegates to module-level helper
+        _this.getValueAriaLabel = function (optionData, props) { return getValueAriaLabel(optionData, props); };
         _this.getMemoizedOptionsMap = memoizeOne(function (options, valueKey) {
             var normalizedOptions = _this.getMemoizedNormalizedOptions(options);
             return new Map(normalizedOptions.map(function (option) { return [String(option[valueKey]), option]; }));
@@ -768,6 +776,7 @@ var Select = /** @class */ (function (_super) {
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
         var sharedProps = this.getSharedProps();
         var renderLabel = this.props.getValueLabel || this.getValueLabel;
+        var renderAriaLabel = this.props.getValueAriaLabel || this.getValueAriaLabel;
         var Value = this.props.valueComponent || Noop;
         var _b = __read(getOverrides(overrides.ExtraTagPopover, StatefulPopover), 2), ExtraTagPopover = _b[0], extraTagPopoverProps = _b[1];
         var _c = __read(getOverrides(overrides.ExtraTagPopoverList, List), 2), ExtraTagPopoverList = _c[0], extraTagPopoverListProps = _c[1];
@@ -796,7 +805,7 @@ var Select = /** @class */ (function (_super) {
                                 // if not stopped, backspace event will be handled by select as well.
                                 // which might remove pop last item from select.
                                 e.stopPropagation();
-                            }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue }, tabIndex: 0 }, sharedProps, { "$disabled": disabled, ref: i === _this.state.focusedExtraValueTagIdx
+                            }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue }, tabIndex: 0 }, sharedProps, { "$disabled": disabled, ariaLabel: renderAriaLabel({ option: value, index: i }, _this.props), ref: i === _this.state.focusedExtraValueTagIdx
                                 ? function (valueEl) {
                                     valueEl === null || valueEl === void 0 ? void 0 : valueEl.focus();
                                 }
@@ -813,6 +822,7 @@ var Select = /** @class */ (function (_super) {
         var _b = this.props.overrides, overrides = _b === void 0 ? {} : _b;
         var sharedProps = this.getSharedProps();
         var renderLabel = this.props.getValueLabel || this.getValueLabel;
+        var renderAriaLabel = this.props.getValueAriaLabel || this.getValueAriaLabel;
         var Value = this.props.valueComponent || Noop;
         if (!valueArray.length) {
             return null;
@@ -823,7 +833,7 @@ var Select = /** @class */ (function (_super) {
             var remainingTagsCount = valueArray.length - _limitTag;
             return (_jsxs(_Fragment, { children: [valueArray.slice(0, _limitTag).map(function (value, i) {
                         var disabled = sharedProps.$disabled || value.clearableValue === false;
-                        return (_jsx(Value, __assign({ value: value, removeValue: function () { return _this.removeValueAndFocus(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled, noTooltipOnTruncation: _this.props.noTooltipOnTruncation, 
+                        return (_jsx(Value, __assign({ value: value, removeValue: function () { return _this.removeValueAndFocus(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled, noTooltipOnTruncation: _this.props.noTooltipOnTruncation, ariaLabel: renderAriaLabel({ option: value, index: i }, _this.props), 
                             //react calls ref function whenever we pass it and not just on mount
                             ref: i === _this.state.currentValueTagIdx
                                 ? function (valueEl) {

package/esm/baseui/select/stateful-select.d.ts

@@ -35,6 +35,7 @@ declare namespace StatefulSelect {
         filterOutSelected: boolean;
         getOptionLabel: null;
         getValueLabel: null;
+        getValueAriaLabel: null;
         ignoreCase: boolean;
         isLoading: boolean;
         labelKey: string;

package/esm/baseui/select/types.d.ts

@@ -153,6 +153,11 @@ export type SelectProps = {
         option: Option;
         index?: number;
     }, props: SelectProps) => React.ReactNode) | null;
+    /** A custom method to get an aria-label for a selected option tag. */
+    getValueAriaLabel?: ((a: {
+        option: Option;
+        index?: number;
+    }, props: SelectProps) => string | undefined) | null;
     /** Sets the id attribute of the internal input element. Allows for usage with labels. */
     id?: string;
     /** Defines if the comparison for a new creatable value should be case-insensitive. */

package/esm/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/esm/list/list-item.js

@@ -7,7 +7,8 @@ import useCombinedRefs from '../hooks/useCombinedRef';
 import { useOverrides } from '../overrides';
 import { StyledChildContainer, StyledEndEnhancer, StyledListItem, StyledStartEnhancer } from './styled-component';
 import { useFocusVisible } from '../hooks/useFocusVisible';
-import { StatefulTooltip as DefaultStatefulTooltip } from '../tooltip';
+import { Tooltip as DefaultTooltip } from '../tooltip';
+import useListItemTooltip, { getListItemTooltipHandlers } from './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 = __rest(_a, ["startEnhancer", "children", "className", "style", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = useRef(null);
@@ -46,9 +47,15 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
-    var listEl = (_jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? _noop : 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 && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
-    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }))) : (listEl);
+    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultTooltip), 2), Tooltip = _r[0], tooltipProps = _r[1];
+    var tooltipControlProps = useListItemTooltip({
+        highlighted: highlighted,
+        tooltipHandlers: getListItemTooltipHandlers(tooltipProps),
+    });
+    var listEl = (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-disabled required for disabled button list items
+    _jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "$as": $as, "aria-disabled": disabled, onClick: disabled ? _noop : 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 && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
+    return tooltipContent ? (_jsx(Tooltip, __assign({ placement: "bottom", showArrow: true, content: tooltipContent, viewportAsBoundary: true }, tooltipProps, tooltipControlProps, { children: listEl }))) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 ListItem.__standard = 'Component';

package/esm/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/esm/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/esm/list/useListItemTooltip.js

@@ -0,0 +1,38 @@
+import { __read } from "tslib";
+import { useCallback, useState } from 'react';
+import useCombinedHandler from '../hooks/useCombinedHandler';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
+import { useMenuContext } from '../menu/MenuContext';
+export var getListItemTooltipHandlers = function (tooltipProps) {
+    return ({
+        onMouseEnter: tooltipProps.onMouseEnter,
+        onMouseLeave: tooltipProps.onMouseLeave,
+        onFocus: tooltipProps.onFocus,
+        onBlur: tooltipProps.onBlur,
+    });
+};
+var useListItemTooltip = function (_a) {
+    var highlighted = _a.highlighted, _b = _a.tooltipHandlers, tooltipHandlers = _b === void 0 ? {} : _b;
+    var listItemFocusVisible = useMenuContext().listItemFocusVisible;
+    var _c = __read(useState(false), 2), hoverOpen = _c[0], setHoverOpen = _c[1];
+    var onMouseEnter = tooltipHandlers.onMouseEnter, onMouseLeave = tooltipHandlers.onMouseLeave, onFocus = tooltipHandlers.onFocus, onBlur = tooltipHandlers.onBlur;
+    var openHoverTooltip = useCallback(function () { return setHoverOpen(true); }, []);
+    var closeHoverTooltip = useCallback(function () { return setHoverOpen(false); }, []);
+    var openOnFocusVisible = useCallback(function (event) {
+        if (isFocusVisible(event)) {
+            setHoverOpen(true);
+        }
+    }, []);
+    var onMouseEnterHandler = useCombinedHandler(openHoverTooltip, onMouseEnter);
+    var onMouseLeaveHandler = useCombinedHandler(closeHoverTooltip, onMouseLeave);
+    var onBlurHandler = useCombinedHandler(closeHoverTooltip, onBlur);
+    var onFocusHandler = useCombinedHandler(onFocus, openOnFocusVisible);
+    return {
+        isOpen: hoverOpen || (highlighted && listItemFocusVisible),
+        onMouseEnter: onMouseEnterHandler,
+        onMouseLeave: onMouseLeaveHandler,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+    };
+};
+export default useListItemTooltip;

package/esm/locale/en_US.js

@@ -23,6 +23,7 @@ export var 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/esm/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/esm/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/esm/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/esm/menu/menu-item.js

@@ -87,7 +87,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) {
@@ -140,7 +140,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 = 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/esm/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/esm/select/index.js

@@ -17,4 +17,4 @@ export { NestedSelect } from './nested-select';
 export { OverridenPopover } from './mobileSelect/overrides';
 // Utils
 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/esm/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/esm/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/esm/select/multi-value.js

@@ -11,7 +11,7 @@ import { CLEARABLE_KEY, LOADING_KEY } from './constants';
 import useCombinedRefs from '../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 = __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 = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused", "ariaLabel", "children"]);
     var _e = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _e[0], tagProps = _e[1];
     var theme = useStyle().theme;
     var tagRef = useRef();
@@ -49,6 +49,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':
@@ -64,7 +65,7 @@ var MultiValue = React.forwardRef(function (props, ref) {
             tagSpacingClasses = 'mr-1 my-0.5';
             break;
     }
-    return (_jsx(TagComponent, __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: mergeOverrides({
+    return (_jsx(TagComponent, __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: mergeOverrides({
             Root: {
                 className: [
                     'box-border max-w-[--sw-max-width]',
@@ -85,6 +86,6 @@ var MultiValue = React.forwardRef(function (props, ref) {
                 },
             },
             Action: { props: { tabIndex: -1 } },
-        }, tagProps.overrides) }, { children: isLoading ? (_jsx(StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" })) : (props.children) })));
+        }, tagProps.overrides) }, { children: isLoading ? _jsx(StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }) : children })));
 });
 export default MultiValue;

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

@@ -1,8 +1,9 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _isNumber from 'lodash/isNumber';
-import { useEffect, useMemo, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useGetExpandedGroup } from './hooks/useGetExpandedGroup';
+import { useRootSelectAllKeyboardNav } from './hooks/useRootSelectAllKeyboardNav';
 import { Box } from '../../box';
 import { Menu } from '../../menu';
 import { Typography } from '../../typography';
@@ -46,6 +47,7 @@ export var CollapsibleSelectMenu = function (_a) {
     var isFirstItemHighlighted = useRef(false);
     var isLastItemHighlighted = useRef(false);
     var menuRef = useRef(null);
+    var selectAllItem = shouldDisplaySelectAll ? groupedItems[UNGROUPED_ID][0] : null;
     var ownerDocument = useDocument();
     var _l = useSelectIds(), listboxId = _l.listboxId, menuDescriptionId = _l.menuDescriptionId;
     var selectedValuesSet = useMemo(function () {
@@ -72,6 +74,17 @@ export var CollapsibleSelectMenu = function (_a) {
     var mergedOverrides = useMemo(function () { return mergeOverrides(selectMenuOverrides, overrides); }, [overrides]);
     var _m = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _m[0], menuProps = _m[1];
     var _o = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _o[0], noResultsProps = _o[1];
+    var _p = 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 = useMemo(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
@@ -104,6 +117,9 @@ export var CollapsibleSelectMenu = function (_a) {
     }, [expandedGroupId, groupedItems]);
     var handleOnHighlightedItemChange = function (item) {
         var _a;
+        if (item) {
+            leaveRootSelectAllHighlight();
+        }
         var nextHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, nextItem);
         var prevHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, prevItem);
         isFirstItemHighlighted.current = !!(item && (!item.previousSibling || item === prevHighlightableElement));
@@ -111,13 +127,18 @@ export 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 = 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[UNGROUPED_ID][0] : null;
+    }, [inputElement, setExpandedGroupId, leaveRootSelectAllHighlight]);
     var clearAsOptionItem = !multi && clearAsOption ? groupedItems[UNGROUPED_ID][0] : null;
     var locale = useLocale().select;
-    return (_jsxs(Box, __assign({ className: "rounded-inherit" }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: globalSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true, "data-testid": "universal-select-all" }, baseuiMenuItemProps, { className: ['m-2', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (_group, index) {
+    var isMenuItemHighlighted = isRootSelectAllHighlighted ? false : undefined;
+    return (_jsxs(Box, __assign({ className: "rounded-inherit" }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __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;
@@ -137,11 +158,11 @@ export var CollapsibleSelectMenu = function (_a) {
                     _a[GROUP_SELECT_ALL_ID] = true,
                     _a.selected = groupSelectAllSelected,
                     _a);
-                return (_jsxs(Collapsible, __assign({ className: index === 0 && selectAllItem ? 'border-t-1 border-solid spr-border-primary' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: handleOnClick }, { children: [_jsx(HiddenElement, __assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, selectOnTab: selectOnTab, getActionsElement: getActionsElement }, menuProps, { role: "listbox", id: listboxId, virtual: virtual, className: ['overflow-auto max-h-50 pt-0', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], onScroll: function (e) {
+                return (_jsxs(Collapsible, __assign({ className: index === 0 && selectAllItem ? 'border-t-1 border-solid spr-border-primary' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: handleOnClick }, { children: [_jsx(HiddenElement, __assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, 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 ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions }, baseuiMenuItemProps), "select-all-option")) : null, clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
+                            }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [shouldDisplayGroupSelectAll ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "select-all-option")) : null, clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
                                     var selected = selectedValuesSet.has(item[valueKey]);
-                                    return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+                                    return (_jsx(SelectMenuItem, __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/esm/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?: ({

package/esm/select/selectMenuAdapter/SelectMenuItem.js

@@ -16,10 +16,11 @@ var shouldHideSelectItemActions = function (item) {
     return Boolean(item[SELECT_ALL_ID] || item[GROUP_SELECT_ALL_ID] || item[CLEAR_OPTION_ID] || item.isCreatable);
 };
 var SelectMenuItem = React.forwardRef(function (_a, ref) {
-    var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, restProps = __rest(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect"]);
-    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, MenuItem), 2), MenuItemOverriden = _b[0], menuItemProps = _b[1];
-    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Checkbox, Checkbox), 2), CheckboxOverriden = _c[0], checkboxProps = _c[1];
-    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ListItemText, ListItemText), 2), ListItemTextOverriden = _d[0], listItemTextProps = _d[1];
+    var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, _b = _a.role, role = _b === void 0 ? 'option' : _b, restProps = __rest(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect", "role"]);
+    var isCheckboxRole = role === 'checkbox';
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, MenuItem), 2), MenuItemOverriden = _c[0], menuItemProps = _c[1];
+    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Checkbox, Checkbox), 2), CheckboxOverriden = _d[0], checkboxProps = _d[1];
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ListItemText, ListItemText), 2), ListItemTextOverriden = _e[0], listItemTextProps = _e[1];
     var handleItemSelect = useCallback(function (event) { return onItemSelect({ item: item, event: event }); }, [item, onItemSelect]);
     var textOverrides = listItemTextProps === null || listItemTextProps === void 0 ? void 0 : listItemTextProps.overrides;
     var listItemTextOverrides = useMemo(function () {
@@ -32,14 +33,20 @@ var SelectMenuItem = React.forwardRef(function (_a, ref) {
     var id = useUniqueId();
     var checkboxPropsOverrides = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.overrides;
     var checkboxOverrides = useMemo(function () {
-        return mergeOverrides({ Input: { props: { 'aria-labelledby': id, tabIndex: -1 } }, Label: { className: 'hidden' } }, checkboxPropsOverrides);
+        return mergeOverrides({
+            Input: {
+                props: { 'aria-labelledby': id, tabIndex: -1 },
+                className: 'invisible',
+            },
+            Label: { className: 'hidden' },
+        }, checkboxPropsOverrides);
     }, [id, checkboxPropsOverrides]);
     // Passes intent to override intent from useContextualFormProps,
     // see: https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/282
     var startEnhancer = useMemo(function () {
         return multi && (_jsx(CheckboxOverriden, __assign({ checked: selected, size: "medium", disabled: item.disabled, intent: "default" }, checkboxProps, { overrides: checkboxOverrides })));
     }, [multi, CheckboxOverriden, selected, item.disabled, checkboxProps, checkboxOverrides]);
-    var menuItemEl = (_jsx(MenuItemOverriden, __assign({ role: "option", "aria-selected": selected, 
+    var menuItemEl = (_jsx(MenuItemOverriden, __assign({ role: role }, (isCheckboxRole ? { 'aria-checked': selected } : { 'aria-selected': selected }), { 
         // for Multi Select variant do not show selected styles
         selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, tabIndex: -1, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id, tooltipContent: item.tooltipContent, hideInlineActions: shouldHideSelectItemActions(item) }, restProps, menuItemProps, { children: _jsx(ListItemTextOverriden, __assign({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) })) })));
     return item.disabled && item.disabledTooltipConfig ? (_jsx(ActionableTooltip, __assign({}, item.disabledTooltipConfig, { children: menuItemEl }))) : (menuItemEl);