@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/list/list-item.js

@@ -7,8 +7,9 @@ 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';
 var ListItem = React.forwardRef(function (_a, ref) {
-    var startEnhancer = _a.startEnhancer, children = _a.children, _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, restProps = __rest(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur"]);
+    var startEnhancer = _a.startEnhancer, children = _a.children, _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", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = useRef(null);
     var combinedRef = useCombinedRefs(ref, ownRef);
     React.useEffect(function () {
@@ -29,10 +30,10 @@ var ListItem = React.forwardRef(function (_a, ref) {
             onKeyDown(event);
         }
     }, [button, disabled, onClick, onKeyDown]);
-    var _l = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _l[0], rootProps = _l[1];
-    var _m = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _m[0], childContainerProps = _m[1];
-    var _o = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
-    var _p = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _p[0], endEnhancerProps = _p[1];
+    var _m = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _m[0], rootProps = _m[1];
+    var _o = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _o[0], childContainerProps = _o[1];
+    var _p = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var _q = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _q[0], endEnhancerProps = _q[1];
     var sharedProps = {
         $withStartEnhancer: !!startEnhancer,
         $withEndEnhancer: !!endEnhancer,
@@ -45,7 +46,9 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    return (_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, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    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, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 export default React.memo(ListItem);

package/esm/list/styled-component.d.ts

@@ -1,3 +1,4 @@
+export declare const LIST_MIN_WIDTH = 150;
 export declare const StyledList: import("../style/styled").StyledComponent;
 export declare const StyledListItem: import("../style/styled").StyledComponent;
 export declare const StyledListItemText: import("../style/styled").StyledComponent;

package/esm/list/styled-component.js

@@ -3,9 +3,13 @@ import cx from '../classNames';
 import { borderRadius } from '../helpers/longHandHelpers';
 import { getComponentTheme } from '../helpers/themeHelpers';
 import { styled } from '../style';
+export var LIST_MIN_WIDTH = 150;
 export var StyledList = styled('ul', 
 // bottom spacing will be added by ListItem
-'box-border spr-ui-01 py-1 px-1 my-0', borderRadius('inherit'), function (_, _a) {
+'box-border spr-ui-01 py-1 px-1 my-0', borderRadius('inherit'), function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ minWidth: px2rem(LIST_MIN_WIDTH) });
+}, function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
 });
@@ -25,9 +29,16 @@ var backgroundColor = function (_a, _b) {
     }
     return styles;
 };
-export var StyledListItem = styled('li', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle(cx('relative flex justify-start mb-1 last-child:mb-0 py-2 px-3 typography-l1 fill-current spr-ui-01 rounded-6', {
+var getListItemCompactStyles = function (_a) {
+    var theme = _a.theme;
+    if (theme.density === 'COMPACT')
+        return 'py-1 px-2 typography-l2 rounded-4 mb-0.5 last-child:mb-0';
+    else
+        return 'py-1.5 px-2 typography-l1 rounded-6 mb-0.5 last-child:mb-0';
+};
+export var StyledListItem = styled('li', getListItemCompactStyles, function (_a, props) {
+    var getStyle = _a.getStyle, theme = _a.theme;
+    return getStyle(cx('relative flex justify-start fill-current spr-ui-01', {
         'items-start': props.$alignItems === 'start',
         'items-center': props.$alignItems === 'center',
         'cursor-pointer': props.$button && !props.$disabled,
@@ -48,26 +59,23 @@ export var StyledSecondaryText = styled('div', 'spr-text-02 typography-l3', func
         marginTop: px2rem(2),
     });
 });
-export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03 mb-1 last-child:mb-0');
-export var StyledStartEnhancer = styled('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03 mb-0.5 last-child:mb-0');
+export var StyledStartEnhancer = styled('div', 'inline-flex pr-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle(cx({
-        'pr-2': direction !== 'rtl',
-        'pl-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-export var StyledEndEnhancer = styled('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+export var StyledEndEnhancer = styled('div', 'inline-flex pl-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle(cx({
-        'pl-2': direction !== 'rtl',
-        'pr-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-export var StyledChildContainer = styled('div', 'typography-l1 flex-auto', function (_a, props) {
-    var theme = _a.theme;
+export var StyledChildContainer = styled('div', 'flex-auto', function (_a, props) {
+    var theme = _a.theme, px2rem = _a.px2rem;
     return ({
         fontWeight: props.$selected ? 700 : 400,
+        fontSize: px2rem(13),
     });
 });

package/esm/list/types.d.ts

@@ -1,6 +1,7 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
+import { StatefulTooltipProps } from '../tooltip';
 export declare type AlignItems = 'start' | 'center';
 export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export declare type ListItemSharedProps = {
@@ -26,9 +27,11 @@ export declare type ListItemProps = SpacewebComponentProps & {
         EndEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
         Root?: Override<ListItemSharedProps & Record<string, any>>;
         StartEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+        StatefulTooltip?: Override<ListItemSharedProps & Record<string, any>>;
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: StatefulTooltipProps['content'];
 };
 export declare type ListProps = SpacewebComponentProps & {
     children?: ReactNode;

package/esm/locale/en_US.js

@@ -1,7 +1,14 @@
 export var DEFAULT_LOCALE = {
+    colorPicker: {
+        resetButtonLabel: 'Reset Color',
+    },
     select: {
         noResultsMsg: 'No Results',
         selectAllLabel: 'Select All',
+        hideButtonAriaLabel: 'Hide',
+        selectPlaceholder: 'Select...',
+        clearOptionLabel: 'Unassign',
+        selectedValuesPrefix: 'Selected ${values}.',
     },
     asyncSelect: {
         searchingText: 'Searching',
@@ -12,9 +19,12 @@ export var DEFAULT_LOCALE = {
         dateInputStartLabel: 'Start Date',
         timePickerEndLabel: 'End Time',
         dateInputEndLabel: 'End Date',
+        calendarButtonAriaLabel: 'Open Calendar',
     },
     datePicker: {
         popoverAriaLabel: 'Select a date',
+        timezonePickerLabel: 'Timezone',
+        timezonePickerPlaceholder: 'Select a timezone',
     },
     timeRangePicker: {
         today: 'Today',
@@ -74,4 +84,20 @@ export var DEFAULT_LOCALE = {
         toggleButtonShowAriaLabel: 'Show Alerts',
         toggleButtonHideAriaLabel: 'Hide Alerts',
     },
+    input: {
+        clearAriaLabel: 'Clear Value',
+    },
+    modal: {
+        closeAriaLabel: 'Close Modal',
+    },
+    snackbar: {
+        closeAriaLabel: 'Hide Snackbar',
+    },
+    tag: {
+        closeAriaLabel: 'Remove Tag',
+    },
+    search: {
+        searchPlaceholder: 'Search',
+    },
+    langCode: 'en-US',
 };

package/esm/locale/types.d.ts

@@ -4,8 +4,10 @@ import { AsyncSelectLocale } from '../asyncSelect';
 import { PhoneInputLocale } from '../phone-input';
 import { DatePickerLocale } from '../date-picker/locale';
 import { BannerLocale } from '../banner';
+import { ColorPickerLocale } from '../color-picker/locale';
 export declare type Locale = {
     select: SelectLocale;
+    colorPicker: ColorPickerLocale;
     asyncSelect: AsyncSelectLocale;
     datePicker: DatePickerLocale;
     timeRangePicker: TimeRangePickerLocale;
@@ -15,9 +17,26 @@ export declare type Locale = {
         dateInputStartLabel: string;
         timePickerEndLabel: string;
         dateInputEndLabel: string;
+        calendarButtonAriaLabel: string;
     };
     menu: {
         nestedMenuItemAriaLabel: string;
     };
     banner: BannerLocale;
+    input: {
+        clearAriaLabel: string;
+    };
+    modal: {
+        closeAriaLabel: string;
+    };
+    snackbar: {
+        closeAriaLabel: string;
+    };
+    tag: {
+        closeAriaLabel: string;
+    };
+    search: {
+        searchPlaceholder: string;
+    };
+    langCode: string;
 };

package/esm/menu/MenuContext.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 declare type MenuContextValue = {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: (item: HTMLElement | null) => void;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     setMenuContainerRef: (ref: HTMLElement | null) => void;
     nestedMenuOpen: boolean;
+    listItemFocusVisible: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
 export declare const MenuProvider: import("react").Provider<MenuContextValue>;

package/esm/menu/MenuContext.js

@@ -4,6 +4,7 @@ var MenuContext = createContext({
     setHighlightedItem: function () { return null; },
     setMenuContainerRef: function () { return null; },
     nestedMenuOpen: false,
+    listItemFocusVisible: false,
     setNestedMenuOpen: function () { return null; },
 });
 export var MenuProvider = MenuContext.Provider;

package/esm/menu/menu-item.d.ts

@@ -17,15 +17,17 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             disabled?: boolean | undefined;
             endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
             highlighted?: boolean | undefined;
-            onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+            onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             overrides?: {
                 ChildContainer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 EndEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 Root?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 StartEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                StatefulTooltip?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
         Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
             overrides?: ({
@@ -42,6 +44,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             triggerType?: import("../popover").TriggerType | undefined;
             placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
             innerRef?: React.Ref<HTMLElement> | undefined;
+            viewportAsBoundary?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;

package/esm/menu/menu-item.js

@@ -14,19 +14,20 @@ import { Popover } from '../popover';
 import { useLocale } from '../locale';
 import { canHighlightItem } from './helpers';
 import { useMenuContext } from './MenuContext';
+import cx from '../classNames';
 var listItemOverrides = {
     ListItem: {
         props: {
             overrides: {
                 Root: {
                     style: function (_a, _b) {
-                        var theme = _a.theme;
-                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected;
+                        var getStyle = _a.getStyle, theme = _a.theme;
+                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected, $outlined = _b.$outlined;
                         var hoverBackgroundColor = getComponentTheme(theme, 'list').hoverBackgroundColor;
-                        return {
+                        return getStyle(cx({ 'outline-01 outline-offset-0': $outlined }), {
                             backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
                             cursor: $disabled ? 'not-allowed' : 'pointer',
-                        };
+                        });
                     },
                 },
             },
@@ -34,13 +35,12 @@ var listItemOverrides = {
     },
 };
 var MenuItem = React.forwardRef(function (_a, ref) {
-    var _b;
     var selected = _a.selected, highlighted = _a.highlighted, overrides = _a.overrides, getChildMenu = _a.getChildMenu, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, renderAll = _a.renderAll, restProps = __rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "renderAll"]);
-    var _c = __read(useState(false), 2), hovered = _c[0], setHovered = _c[1];
+    var _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[1];
     var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
     var ownRef = useRef(null);
     var itemRef = useCombinedRefs(ref, ownRef);
-    var _d = useMenuContext(), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, setMenuContainerRef = _d.setMenuContainerRef, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var _c = useMenuContext(), highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
     var locale = useLocale();
     useEffect(function () {
         var _a, _b;
@@ -48,8 +48,8 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     }, [setMenuContainerRef]);
     var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
     var mergedOverrides = useMemo(function () { return mergeOverrides(listItemOverrides, overrides); }, [overrides]);
-    var _e = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, ListItem), 2), ListItemOverride = _e[0], listItemProps = _e[1];
-    var _f = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverOverride = _f[0], popoverProps = _f[1];
+    var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, ListItem), 2), ListItemOverride = _d[0], listItemProps = _d[1];
+    var _e = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverOverride = _e[0], popoverProps = _e[1];
     var onMouseOverRef = useLatest(onMouseOver);
     var handleMouseOver = useCallback(function (e) {
         var _a;
@@ -61,7 +61,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     var resetMenu = useCallback(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
     var closeNestedMenu = useCallback(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
     var id = useUniqueId();
-    var listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, endEnhancer: ChildMenu && _jsx(ChevronDown, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
+    var listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, "$outlined": isItemHighlighted && listItemFocusVisible, endEnhancer: ChildMenu && _jsx(ChevronDown, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
     var handleMouseEnter = useCombinedHandler(function () { return setHovered(true); }, onMouseEnter);
     var handleMouseLeave = useCombinedHandler(function () { return setHovered(false); }, onMouseLeave);
     // when we have opened child menu using hover, then after switching to keyboard hovered state remains true
@@ -74,7 +74,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     if (!ChildMenu) {
         return listItem;
     }
-    return (_jsx(PopoverOverride, __assign({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", mountNode: (_b = ownRef.current) === null || _b === void 0 ? void 0 : _b.parentElement, renderAll: renderAll, onClickOutside: resetMenu, onEsc: closeNestedMenu }, popoverProps, { children: listItem }), void 0));
+    return (_jsx(PopoverOverride, __assign({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", renderAll: renderAll, onClickOutside: resetMenu, onEsc: closeNestedMenu }, popoverProps, { children: listItem }), void 0));
 });
 MenuItem.displayName = 'MenuItem';
 export default React.memo(MenuItem);

package/esm/menu/menu.d.ts

@@ -26,5 +26,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
     resetMenuOnMouseLeave?: boolean | undefined;
     reducer?: import("./types").Reducer | undefined;
     captureScroll?: boolean | undefined;
+    selectOnTab?: boolean | undefined;
 } & import("react").RefAttributes<MenuRef>>>;
 export default _default;

package/esm/menu/menu.js

@@ -9,20 +9,21 @@ import { defaultReducer } from './helpers';
 import { MenuProvider } from './MenuContext';
 import useItemContainerEventHandlers from './useItemContainerEventHandlers';
 import useStatefulMenu from './useStatefulMenu';
-import { useNestedMenuContext } from './nested-menu-context';
 var Menu = forwardRef(function (_a, ref) {
-    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? defaultReducer : _f, captureScroll = _a.captureScroll, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
-    var _g = __read(useState(null), 2), listRef = _g[0], setListRef = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _h[0], listProps = _h[1];
-    var _j = __read(useState(null), 2), listItemsContainer = _j[0], setListItemsContainer = _j[1];
-    var _k = useStatefulMenu({
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? defaultReducer : _f, captureScroll = _a.captureScroll, _g = _a.selectOnTab, selectOnTab = _g === void 0 ? false : _g, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab"]);
+    var _h = __read(useState(null), 2), listRef = _h[0], setListRef = _h[1];
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _j[0], listProps = _j[1];
+    var _k = __read(useState(null), 2), listItemsContainer = _k[0], setListItemsContainer = _k[1];
+    var _l = useStatefulMenu({
         disableNavigationOnMount: disableNavigationOnMount,
         disableAutoHighlight: disableAutoHighlight,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
         onHighlightedItemChange: onHighlightedItemChange,
         listItemsContainerRef: listItemsContainer,
         reducer: reducer,
-    }), turnOnKeyboardNavigation = _k.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _k.turnOffKeyboardNavigation, highlightedItem = _k.highlightedItem, setHighlightedItem = _k.setHighlightedItem, nestedMenuOpen = _k.nestedMenuOpen, setNestedMenuOpen = _k.setNestedMenuOpen;
+        selectOnTab: selectOnTab,
+        children: children,
+    }), turnOnKeyboardNavigation = _l.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _l.turnOffKeyboardNavigation, highlightedItem = _l.highlightedItem, setHighlightedItem = _l.setHighlightedItem, nestedMenuOpen = _l.nestedMenuOpen, listItemFocusVisible = _l.listItemFocusVisible, setNestedMenuOpen = _l.setNestedMenuOpen;
     var setScrollTarget = useScrollCapture({ enabled: captureScroll });
     var setListCombinedRef = useCombinedRefs(setListRef, setScrollTarget);
     var menuContextValue = useMemo(function () { return ({
@@ -30,8 +31,9 @@ var Menu = forwardRef(function (_a, ref) {
         setHighlightedItem: setHighlightedItem,
         setMenuContainerRef: setListItemsContainer,
         nestedMenuOpen: nestedMenuOpen,
+        listItemFocusVisible: listItemFocusVisible,
         setNestedMenuOpen: setNestedMenuOpen,
-    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, setNestedMenuOpen]);
+    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, listItemFocusVisible, setNestedMenuOpen]);
     useItemContainerEventHandlers({
         listItemsContainer: listItemsContainer,
         resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
@@ -48,9 +50,7 @@ var Menu = forwardRef(function (_a, ref) {
         }
         return menuRef;
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
-    var nestedMenuContext = useNestedMenuContext();
-    var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
-    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
+    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
 });
 Menu.displayName = 'Menu';
 export default memo(Menu);

package/esm/menu/types.d.ts

@@ -48,6 +48,7 @@ export declare type MenuProps = Omit<ListProps, 'overrides'> & {
     resetMenuOnMouseLeave?: boolean;
     reducer?: Reducer;
     captureScroll?: boolean;
+    selectOnTab?: boolean;
 };
 declare type MenuActions = {
     turnOnKeyboardNavigation?: () => void;

package/esm/menu/useKeyboardNavigation.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { Reducer } from './types';
 declare type Params = {
     /**
@@ -9,15 +9,18 @@ declare type Params = {
     disableNavigationOnMount?: boolean;
     disableAutoHighlight?: boolean;
     reducer: Reducer;
+    selectOnTab?: boolean;
+    children?: ReactNode;
 };
 declare type NavigationUtils = {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     turnOnKeyboardNavigation: () => void;
     turnOffKeyboardNavigation: () => void;
+    listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
-declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, }: Params) => NavigationUtils;
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, selectOnTab, children, }: Params) => NavigationUtils;
 export default useKeyboardNavigation;

package/esm/menu/useKeyboardNavigation.js

@@ -5,27 +5,29 @@ import { useDocument } from '../spacewebProvider/DocumentProvider';
 import { getFirstHighlightableElement, getNextHighlightedItem } from './helpers';
 import { useNestedMenuContext } from './nested-menu-context';
 var useKeyboardNavigation = function (_a) {
-    var listItemsContainerRef = _a.listItemsContainerRef, _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, disableAutoHighlight = _a.disableAutoHighlight, reducer = _a.reducer;
-    var _d = __read(useState(null), 2), highlightedItem = _d[0], setHighlightedItem = _d[1];
-    var _e = __read(useState(!disableNavigationOnMount), 2), navigationEnabled = _e[0], setNavigationEnabled = _e[1];
-    var _f = __read(useState(false), 2), nestedMenuOpen = _f[0], setNestedMenuOpen = _f[1];
+    var listItemsContainerRef = _a.listItemsContainerRef, _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, disableAutoHighlight = _a.disableAutoHighlight, reducer = _a.reducer, selectOnTab = _a.selectOnTab, children = _a.children;
+    var _d = __read(useState(null), 2), highlightedItem = _d[0], _setHighlightedItem = _d[1];
+    var _e = __read(useState(false), 2), listItemFocusVisible = _e[0], setListItemFocusVisible = _e[1];
+    var _f = __read(useState(!disableNavigationOnMount), 2), navigationEnabled = _f[0], setNavigationEnabled = _f[1];
+    var _g = __read(useState(false), 2), nestedMenuOpen = _g[0], setNestedMenuOpen = _g[1];
     var highlightedItemRef = useLatest(highlightedItem);
     var reducerRef = useLatest(reducer);
     var ownerDocument = useDocument();
+    var setHighlightedItem = function (item, showFocusVisibleStyles) {
+        if (showFocusVisibleStyles === void 0) { showFocusVisibleStyles = false; }
+        _setHighlightedItem(item);
+        setListItemFocusVisible(showFocusVisibleStyles);
+    };
     // highlight first item in the list if prevHighlighted item is no longer in dom
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook whenever menu re-renders
     useLayoutEffect(function () {
         var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
-        if (!highlightedItem ||
-            disableAutoHighlight ||
-            isHighlightedItemInDom ||
-            !navigationEnabled ||
-            !listItemsContainerRef) {
+        if (disableAutoHighlight || isHighlightedItemInDom || !navigationEnabled || !listItemsContainerRef) {
             return;
         }
         var firstHighlightableItem = getFirstHighlightableElement(listItemsContainerRef).firstHighlightableItem;
         firstHighlightableItem && setHighlightedItem(firstHighlightableItem);
-    });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook only when children changes
+    }, [children]);
     useEffect(function () {
         // Scroll the selected item into view for the first time when menu opens up
         window.requestAnimationFrame(function () {
@@ -38,7 +40,7 @@ var useKeyboardNavigation = function (_a) {
         setNestedMenuOpen(false);
     }, [setNavigationEnabled, setNestedMenuOpen]);
     var turnOffKeyboardNavigation = useCallback(function () { return setNavigationEnabled(false); }, []);
-    var _g = useNestedMenuContext(), getMenuInfo = _g.getMenuInfo, getParentMenuInfo = _g.getParentMenuInfo, getChildMenuInfo = _g.getChildMenuInfo;
+    var _h = useNestedMenuContext(), getMenuInfo = _h.getMenuInfo, getParentMenuInfo = _h.getParentMenuInfo, getChildMenuInfo = _h.getChildMenuInfo;
     // Highlight previously selected item or first highlightable item on mount
     useEffect(function () {
         if (disableAutoHighlight || !listItemsContainerRef) {
@@ -75,13 +77,17 @@ var useKeyboardNavigation = function (_a) {
             // Stop scrolling the menu
             event.preventDefault();
         }
-        setHighlightedItem(nextItemToHighlight);
+        else if (event.key === 'Tab' && selectOnTab) {
+            _highlightedItem === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.click();
+            event.preventDefault();
+        }
+        setHighlightedItem(nextItemToHighlight, true);
         /**
          * When Menu mounts for the first time inside popover, it renders outside visible viewport until popover measures position of anchor/target element.
          * By calling `scrollIntoView` after keydown(instead useEffect), avoiding scrollIntoView call for the first render.
          */
         (_a = nextItemToHighlight === null || nextItemToHighlight === void 0 ? void 0 : nextItemToHighlight.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(nextItemToHighlight, { block: 'nearest' });
-    }, [getMenuInfo, getParentMenuInfo, highlightedItemRef, listItemsContainerRef, ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body]);
+    }, [getMenuInfo, getParentMenuInfo, highlightedItemRef, listItemsContainerRef, ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body, selectOnTab]);
     useEffect(function () {
         if (!navigationEnabled) {
             return undefined;
@@ -115,6 +121,7 @@ var useKeyboardNavigation = function (_a) {
     return {
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,
+        listItemFocusVisible: listItemFocusVisible,
         turnOffKeyboardNavigation: turnOffKeyboardNavigation,
         turnOnKeyboardNavigation: turnOnKeyboardNavigation,
         navigationEnabled: navigationEnabled,

package/esm/menu/useStatefulMenu.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { Reducer } from './types';
 declare type UseStatefulMenu = (params: {
     disableNavigationOnMount?: boolean;
@@ -7,11 +7,14 @@ declare type UseStatefulMenu = (params: {
     listItemsContainerRef: HTMLElement | null;
     onHighlightedItemChange?: (item?: HTMLElement | null) => void;
     reducer?: Reducer;
+    selectOnTab?: boolean;
+    children?: ReactNode;
 }) => {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     turnOnKeyboardNavigation: () => void;
     turnOffKeyboardNavigation: () => void;
+    listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;

package/esm/menu/useStatefulMenu.js

@@ -4,7 +4,7 @@ import { defaultReducer } from './helpers';
 import { useNestedMenuContext } from './nested-menu-context';
 import useKeyboardNavigation from './useKeyboardNavigation';
 var useStatefulMenu = function (_a) {
-    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled, listItemsContainerRef = _a.listItemsContainerRef, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, _c = _a.reducer, reducer = _c === void 0 ? defaultReducer : _c;
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled, listItemsContainerRef = _a.listItemsContainerRef, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, _c = _a.reducer, reducer = _c === void 0 ? defaultReducer : _c, selectOnTab = _a.selectOnTab, children = _a.children;
     useEffect(function () {
         // focusWhenNavigationEnabled is true, then make listContainer focusable if required
         if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
@@ -17,7 +17,9 @@ var useStatefulMenu = function (_a) {
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
         listItemsContainerRef: listItemsContainerRef,
         reducer: reducer,
-    }), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, turnOnKeyboardNavigation = _d.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _d.turnOffKeyboardNavigation, navigationEnabled = _d.navigationEnabled, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+        selectOnTab: selectOnTab,
+        children: children,
+    }), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, turnOnKeyboardNavigation = _d.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _d.turnOffKeyboardNavigation, listItemFocusVisible = _d.listItemFocusVisible, navigationEnabled = _d.navigationEnabled, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
     var _e = useNestedMenuContext(), unregisterMenu = _e.unregisterMenu, registerMenu = _e.registerMenu, getParentMenuInfo = _e.getParentMenuInfo;
     useEffect(function () {
         if (!listItemsContainerRef)
@@ -44,20 +46,24 @@ var useStatefulMenu = function (_a) {
         (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
     }, [highlightedItem, onHighlightedItemChangeRef]);
     useEffect(function () {
-        var _a, _b;
+        var activeElement;
         // set aria-activedescendant to current focused element whenever highlighted item changes
-        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)) {
-            if (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)
-                (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id);
+        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) && document.activeElement) {
+            activeElement = document.activeElement;
+            activeElement.setAttribute('aria-activedescendant', highlightedItem.id);
         }
-        else
-            (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-activedescendant');
+        return function () {
+            if (activeElement) {
+                activeElement.removeAttribute('aria-activedescendant');
+            }
+        };
     }, [navigationEnabled, highlightedItem]);
     return {
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,
         turnOffKeyboardNavigation: turnOffKeyboardNavigation,
         turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        listItemFocusVisible: listItemFocusVisible,
         navigationEnabled: navigationEnabled,
         nestedMenuOpen: nestedMenuOpen,
         setNestedMenuOpen: setNestedMenuOpen,