@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/menu/StatefulSubMenu.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+//lib
+import { forwardRef } from 'react';
+//component
+import { SubMenu } from './SubMenu';
+// hooks
+import useStatefulSubmenu from './useStatefulSubmenu';
+var StatefulSubMenu = forwardRef(function (props, ref) {
+    var subMenuProps = useStatefulSubmenu(props).subMenuProps;
+    return _jsx(SubMenu, __assign({}, subMenuProps, { ref: ref }));
+});
+StatefulSubMenu.displayName = 'StatefulSubMenu';
+export { StatefulSubMenu };

package/esm/menu/SubMenu.d.ts

@@ -0,0 +1,112 @@
+import type { MouseEvent, ReactNode } from 'react';
+import { type Override } from '../overrides';
+import type { MenuItemProps, MenuProps, MenuRef, SubMenuItem } from './types';
+export type SubMenuProps = Omit<MenuProps, 'overrides'> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect: (item: SubMenuItem, event?: MouseEvent) => void;
+    overrides?: {
+        Menu?: Override<MenuProps & Record<string, any>>;
+        MenuItem?: Override<MenuItemProps & Record<string, any>>;
+    };
+    currentHeaderItem?: SubMenuItem;
+    onHeaderItemClick: () => void;
+    itemRenderer?: (item: SubMenuItem, onClick: NonNullable<SubMenuProps['onItemSelect']>) => ReactNode;
+    emptyStateRenderer?: (currentHeaderItem?: SubMenuItem) => ReactNode;
+};
+declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps, "overrides"> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect: (item: SubMenuItem, event?: MouseEvent) => void;
+    overrides?: {
+        Menu?: Override<Omit<import("../list").ListProps, "overrides"> & {
+            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+            disableNavigationOnMount?: boolean | undefined;
+            focusWhenNavigationEnabled?: boolean | undefined;
+            keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
+            overrides?: {
+                List?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    children?: ReactNode;
+                    virtual?: boolean | undefined;
+                    overrides?: {
+                        Root?: Override<Record<string, any>> | undefined;
+                    } | undefined;
+                    scrollElement?: HTMLElement | null | undefined;
+                    overscanCount?: number | undefined;
+                    estimateItemSize?: number | undefined;
+                    autoScrollToSelectedItem?: boolean | undefined;
+                    $showFocusOutline?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+            onHighlightedItemChange?: ((item?: HTMLElement | null | undefined) => void) | undefined;
+            disableAutoHighlight?: boolean | undefined;
+            resetMenuHighlightOnMouseLeave?: boolean | undefined;
+            resetMenuOnMouseLeave?: boolean | undefined;
+            reducer?: import("./types").Reducer | undefined;
+            captureScroll?: boolean | undefined;
+            selectOnTab?: boolean | undefined;
+            drillInFocusVisibleRef?: import("react").MutableRefObject<boolean | null> | undefined;
+        } & Record<string, any>> | undefined;
+        MenuItem?: Override<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            $item?: Record<string, any> | undefined;
+            getChildMenu?: (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) | undefined;
+            onMouseEnter?: (() => void) | undefined;
+            onMouseLeave?: (() => void) | undefined;
+            renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
+            overrides?: {
+                ListItem?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    alignItems?: import("../list").AlignItems | undefined;
+                    autoFocus?: boolean | undefined;
+                    button?: boolean | undefined;
+                    children?: ReactNode;
+                    disabled?: boolean | undefined;
+                    endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    highlighted?: boolean | undefined;
+                    onClick?: ((event: import("react").KeyboardEvent<Element> | MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+                    overrides?: {
+                        ChildContainer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        EndEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        Root?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StartEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                    } | undefined;
+                    selected?: boolean | undefined;
+                    startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                } & Record<string, any>> | undefined;
+                Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
+                    overrides?: ({
+                        Body?: Override<any> | undefined;
+                        Arrow?: Override<any> | undefined;
+                        Inner?: Override<any> | undefined;
+                    } & {
+                        LayersManager?: Override<import("../baseui/layer").LayersManagerProps> | undefined;
+                        ArrowTriangle?: Override<any> | undefined;
+                    }) | undefined;
+                    children?: ReactNode | ((args: {
+                        isOpen: boolean;
+                    }) => ReactNode);
+                    targetElement?: HTMLElement | null | undefined;
+                    triggerType?: import("../popover").TriggerType | undefined;
+                    placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+                    innerRef?: import("react").Ref<HTMLElement> | undefined;
+                    viewportAsBoundary?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+    currentHeaderItem?: SubMenuItem | undefined;
+    onHeaderItemClick: () => void;
+    itemRenderer?: ((item: SubMenuItem, onClick: NonNullable<SubMenuProps['onItemSelect']>) => ReactNode) | undefined;
+    emptyStateRenderer?: ((currentHeaderItem?: SubMenuItem) => ReactNode) | undefined;
+} & import("react").RefAttributes<MenuRef>>;
+export { SubMenu };

package/esm/menu/SubMenu.js

@@ -0,0 +1,52 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import _flatten from 'lodash/flatten';
+//components
+import Menu from './menu';
+import MenuItem from './menu-item';
+import ChevronRight from '../icon/components/chevron-right';
+import ChevronLeft from '../icon/components/chevron-left';
+import { Box } from '../box';
+//helpers
+import { useOverrides } from '../overrides';
+import { SUBMENU_BACK_ROW_ATTR } from './helpers';
+//hooks
+import useStickyElement from '../hooks/useStickyElement';
+import { useLocale } from '../locale';
+var SubMenu = forwardRef(function (_a, ref) {
+    var _b;
+    var _c;
+    var items = _a.items, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, itemRenderer = _a.itemRenderer, emptyStateRenderer = _a.emptyStateRenderer, overrides = _a.overrides, currentHeaderItem = _a.currentHeaderItem, onHeaderItemClick = _a.onHeaderItemClick, props = __rest(_a, ["items", "getItemLabel", "onItemSelect", "itemRenderer", "emptyStateRenderer", "overrides", "currentHeaderItem", "onHeaderItemClick"]);
+    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, Menu), 2), MenuOverriden = _d[0], menuProps = _d[1];
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, MenuItem), 2), MenuItemOverriden = _e[0], menuItemProps = _e[1];
+    var HeaderMenuItem = MenuItemOverriden;
+    var locale = useLocale();
+    var _f = useStickyElement(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var defaultItemRenderer = function (item, onClick) {
+        var _a;
+        return (_jsx(MenuItemOverriden, __assign({}, (item.startEnhancer ? { startEnhancer: item.startEnhancer } : {}), ((((_a = item.nestedItems) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ? { endEnhancer: _jsx(ChevronRight, {}) } : {}), menuItemProps, { "$item": item, onClick: function (event) {
+                var _a, _b;
+                onClick(item, event);
+                (_b = (_a = menuItemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            } }, { children: getItemLabel(item) })));
+    };
+    var itemsToRender = items.length
+        ? _flatten(items.map(function (item) { var _a; return (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(item, onItemSelect)) !== null && _a !== void 0 ? _a : defaultItemRenderer(item, onItemSelect); }))
+        : (_c = emptyStateRenderer === null || emptyStateRenderer === void 0 ? void 0 : emptyStateRenderer(currentHeaderItem)) !== null && _c !== void 0 ? _c : null;
+    return (_jsxs(MenuOverriden, __assign({ "aria-label": "Menu" }, props, menuProps, { ref: ref }, { children: [currentHeaderItem && (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), _jsx(HeaderMenuItem, __assign({ startEnhancer: _jsx(ChevronLeft, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
+                            'sticky top-0 w-full z-1 mb-1',
+                            function (_, _a) {
+                                var $highlighted = _a.$highlighted;
+                                return ($highlighted ? '' : 'spr-bg-primary');
+                            },
+                            isSticky ? 'spr-shadow-100' : '',
+                            menuItemProps.className,
+                        ] }, (props.role === 'listbox' ? { role: 'option' } : {}), { onClick: function (event) {
+                            var _a, _b;
+                            onHeaderItemClick();
+                            (_b = (_a = menuItemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                        } }, { children: getItemLabel(currentHeaderItem) }))] })), itemsToRender] })));
+});
+SubMenu.displayName = 'SubMenu';
+export { SubMenu };

package/esm/menu/helpers.d.ts

@@ -1,19 +1,22 @@
-import { Reducer, TraversalFunction } from './types';
+import type { Reducer, TraversalFunction, SubMenuItem } from './types';
 export declare const nextItem: TraversalFunction;
 export declare const prevItem: TraversalFunction;
 /**
- * Checks if given item can be highlighted
+ * Checks if given item can be highlighted (real menu/listbox rows only — skips sticky sentinels and other chrome).
  */
-export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+export declare const canHighlightItem: (item?: HTMLElement | null) => boolean;
 /**
  * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
  * Get index of next element which is not disabled
  */
 export declare const getNextItemIndexToHighlight: (highlightedItem: HTMLElement | null, parentContainer: HTMLElement, traversalFunction: TraversalFunction) => HTMLElement | null;
+/** Submenu header row: skipped for initial auto-highlight so the first content item shows the hover/focus background. */
+export declare const SUBMENU_BACK_ROW_ATTR = "data-sw-submenu-back";
 export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
     firstHighlightableItem: HTMLElement | null;
     firstSelectedItem: HTMLElement | null;
 };
 declare const getNextHighlightedItem: (event: KeyboardEvent, highlightedItem: HTMLElement | null, parentContainer: HTMLElement) => HTMLElement | null;
 export declare const defaultReducer: Reducer;
+export declare const findParentAndChildren: (itemId: string | number, items: Array<SubMenuItem>, valueKey: string | number, parentItem?: SubMenuItem) => [Array<SubMenuItem>, SubMenuItem | undefined] | undefined;
 export { getNextHighlightedItem };

package/esm/menu/helpers.js

@@ -6,10 +6,17 @@ export var nextItem = function (highlightedItem, parentContainer) {
     return parentContainer === null || parentContainer === void 0 ? void 0 : parentContainer.firstElementChild;
 };
 export var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
+var HIGHLIGHTABLE_LIST_ITEM_ROLES = new Set(['menuitem', 'menuitemcheckbox', 'menuitemradio', 'option']);
 /**
- * Checks if given item can be highlighted
+ * Checks if given item can be highlighted (real menu/listbox rows only — skips sticky sentinels and other chrome).
  */
-export var canHighlightItem = function (item) { return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-disabled')) !== 'true'; };
+export var canHighlightItem = function (item) {
+    var _a;
+    if (!item || item.getAttribute('aria-disabled') === 'true')
+        return false;
+    var role = (_a = item.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return role != null && HIGHLIGHTABLE_LIST_ITEM_ROLES.has(role);
+};
 /**
  * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
  * Get index of next element which is not disabled
@@ -28,12 +35,16 @@ export var getNextItemIndexToHighlight = function (highlightedItem, parentContai
     }
     return highlightedItem;
 };
+/** Submenu header row: skipped for initial auto-highlight so the first content item shows the hover/focus background. */
+export var SUBMENU_BACK_ROW_ATTR = 'data-sw-submenu-back';
 export var getFirstHighlightableElement = function (listItemsContainerRef) {
     var _a;
     var childItem = (_a = listItemsContainerRef.firstElementChild) !== null && _a !== void 0 ? _a : null, firstHighlightableItem = null, firstSelectedItem = null;
     while (childItem) {
-        if (!firstHighlightableItem && canHighlightItem(childItem)) {
-            firstHighlightableItem = childItem;
+        var el = childItem;
+        var isSubmenuBackRow = el.hasAttribute(SUBMENU_BACK_ROW_ATTR);
+        if (!firstHighlightableItem && canHighlightItem(el) && !isSubmenuBackRow) {
+            firstHighlightableItem = el;
         }
         if (childItem.getAttribute('aria-selected') === 'true') {
             firstSelectedItem = childItem;
@@ -74,4 +85,19 @@ var getNextHighlightedItem = function (event, highlightedItem, parentContainer)
     return highlightedItem;
 };
 export var defaultReducer = function (type, state) { return state; };
+export var findParentAndChildren = function (itemId, items, valueKey, parentItem) {
+    for (var idx = 0; idx < items.length; idx++) {
+        var item = items[idx];
+        if (item[valueKey] === itemId) {
+            return [item.nestedItems || [], parentItem];
+        }
+        if (item.nestedItems) {
+            var returnItems = findParentAndChildren(itemId, item.nestedItems, valueKey, item);
+            if (returnItems)
+                return returnItems;
+        }
+    }
+    //no items found with the expected itemId
+    return undefined;
+};
 export { getNextHighlightedItem };

package/esm/menu/index.d.ts

@@ -1,4 +1,8 @@
 export { default as Menu } from './menu';
 export { default as MenuItem } from './menu-item';
+export { default as ActionsIconButton, type ActionsIconButtonProps } from './ActionsIconButton';
 export { default as NestedMenuProvider } from './nested-menu-context';
-export type { MenuItemProps, ContextValue, MenuProps, MenuRef } from './types';
+export { SubMenu, type SubMenuProps } from './SubMenu';
+export { StatefulSubMenu, type StatefulSubMenuProps } from './StatefulSubMenu';
+export type { MenuItemProps, ContextValue, MenuProps, MenuRef, SubMenuItem, MenuItemActions, MenuItemActionsParams, MenuActionItem, } from './types';
+export { default as useStatefulSubMenu } from './useStatefulSubmenu';

package/esm/menu/index.js

@@ -1,3 +1,7 @@
 export { default as Menu } from './menu';
 export { default as MenuItem } from './menu-item';
+export { default as ActionsIconButton } from './ActionsIconButton';
 export { default as NestedMenuProvider } from './nested-menu-context';
+export { SubMenu } from './SubMenu';
+export { StatefulSubMenu } from './StatefulSubMenu';
+export { default as useStatefulSubMenu } from './useStatefulSubmenu';

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

@@ -1,32 +1,35 @@
 import * as React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+import type { ListItemSharedProps } from '../list/types';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list/types").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+    $item?: Record<string, any> | undefined;
     getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
     renderAll?: boolean | undefined;
+    hideInlineActions?: boolean | undefined;
     overrides?: {
-        ListItem?: import("../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-            $as?: React.ElementType<any> | undefined;
-            className?: import("..").Styles;
+        ListItem?: import("../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+            $as?: React.ElementType | undefined;
+            className?: import("..").ClassName;
             style?: import("..").Styles;
         } & {
-            alignItems?: import("../list").AlignItems | undefined;
+            alignItems?: import("../list/types").AlignItems | undefined;
             autoFocus?: boolean | undefined;
             button?: boolean | undefined;
             children?: React.ReactNode;
             disabled?: boolean | undefined;
-            endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            endEnhancer?: import("../list/types").Enhancer<ListItemSharedProps>;
             highlighted?: boolean | 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;
+                ChildContainer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+                EndEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+                Root?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+                StartEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+                StatefulTooltip?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
             } | undefined;
             selected?: boolean | undefined;
-            startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            startEnhancer?: import("../list/types").Enhancer<ListItemSharedProps>;
             tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
         Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
@@ -35,6 +38,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                 Arrow?: import("../overrides").Override<any> | undefined;
                 Inner?: import("../overrides").Override<any> | undefined;
             } & {
+                LayersManager?: import("../overrides").Override<import("../baseui/layer").LayersManagerProps> | undefined;
                 ArrowTriangle?: import("../overrides").Override<any> | undefined;
             }) | undefined;
             children?: React.ReactNode | ((args: {

package/esm/menu/menu-item.js

@@ -1,8 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-import { getComponentTheme } from '../helpers/themeHelpers';
+import { Box } from '../box';
 import useCombinedHandler from '../hooks/useCombinedHandler';
 import useCombinedRefs from '../hooks/useCombinedRef';
 import { useLatest } from '../hooks/useLatest';
@@ -11,65 +11,135 @@ import ChevronDown from '../icon/components/chevron-down';
 import ListItem from '../list/list-item';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { Popover } from '../popover';
-import { useLocale } from '../locale';
 import { canHighlightItem } from './helpers';
 import { useMenuContext } from './MenuContext';
 import cx from '../classNames';
+function resolveMenuActions(getActionsElement, item) {
+    if (!getActionsElement)
+        return null;
+    if (typeof getActionsElement === 'function') {
+        if (item == null)
+            return null;
+        return getActionsElement({ item: item });
+    }
+    return getActionsElement;
+}
 var listItemOverrides = {
     ListItem: {
         props: {
             overrides: {
                 Root: {
-                    style: function (_a, _b) {
-                        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 getStyle(cx({ 'outline-01': $outlined }), {
-                            backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
-                            cursor: $disabled ? 'not-allowed' : 'pointer',
-                        }, $outlined
-                            ? {
-                                outlineOffset: '-2px',
-                            }
-                            : {});
+                    className: function (_, _a) {
+                        var $disabled = _a.$disabled, $highlighted = _a.$highlighted, $selected = _a.$selected, $outlined = _a.$outlined;
+                        return cx($outlined ? 'outline outline-2 outline-offset-2 outline-[--spr-focus-01] -outline-offset-2' : '', $highlighted || $selected ? 'spr-bg-quaternary' : 'bg-transparent', $disabled ? 'cursor-not-allowed' : 'cursor-pointer', $highlighted ? 'forced-colors:border-1' : '', 'group');
                     },
                 },
             },
         },
     },
 };
-var MenuItem = React.forwardRef(function (_a, ref) {
-    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"]);
+/** Keys that must bubble to `useKeyboardNavigation` (document / list container listeners). */
+var MENU_ACTION_KEYBOARD_BUBBLE_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Tab',
+    'Enter',
+    ' ',
+    'Escape',
+]);
+var ACTION_CONTAINER_HANDLER_PROPS = {
+    onClick: function (event) {
+        event.stopPropagation();
+    },
+    onKeyDown: function (event) {
+        if (MENU_ACTION_KEYBOARD_BUBBLE_KEYS.has(event.key)) {
+            return;
+        }
+        event.stopPropagation();
+    },
+};
+function MenuActionContainer(_a) {
+    var sharedProps = _a.sharedProps, endEnhancer = _a.endEnhancer, renderedActions = _a.renderedActions;
+    return (_jsxs(Box, __assign({ className: cx('flex items-center gap-1 opacity-0 pointer-events-none', 'group-hover:opacity-100 group-hover:pointer-events-auto', 'group-focus-within:opacity-100 group-focus-within:pointer-events-auto', sharedProps.$highlighted ? 'opacity-100 pointer-events-auto' : ''), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions, typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
+}
+function buildListItemAriaProps(itemRole, selected, ChildMenu) {
+    var props = {};
+    if (selected !== undefined) {
+        props['aria-selected'] = Boolean(selected);
+    }
+    if (ChildMenu) {
+        props['aria-haspopup'] = 'menu';
+    }
+    return props;
+}
+function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
+    var renderedActions = useMemo(function () {
+        return shouldRenderActions
+            ? React.Children.map(resolvedItemActions, function (action, index) {
+                var _a;
+                if (!React.isValidElement(action))
+                    return action;
+                return React.cloneElement(action, { key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index) });
+            })
+            : null;
+    }, [resolvedItemActions, shouldRenderActions]);
+    return useMemo(function () {
+        if (shouldRenderActions) {
+            return function (sharedProps) { return (_jsx(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions })); };
+        }
+        if (endEnhancer)
+            return endEnhancer;
+        if (ChildMenu) {
+            return _jsx(ChevronDown, { size: 14, className: "transform -rotate-90" });
+        }
+        return undefined;
+    }, [ChildMenu, endEnhancer, renderedActions, shouldRenderActions]);
+}
+function useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen) {
+    var onMouseOverRef = useLatest(onMouseOver);
+    var handleMouseOver = useCallback(function (e) {
+        var _a;
+        (_a = onMouseOverRef.current) === null || _a === void 0 ? void 0 : _a.call(onMouseOverRef, e);
+    }, [onMouseOverRef]);
+    // Highlight on real pointer movement, not on `mouseover`. A `mouseover` is also dispatched when the
+    // element under a stationary cursor changes (e.g. drilling into a submenu swaps the row under the
+    // pointer), which would steal the highlight from the auto-highlighted first item and cause a flicker.
+    // `mousemove` only fires on genuine cursor movement, so it avoids that synthetic-hover race.
+    var handleMouseMove = useCallback(function () {
+        if (canHighlightItem(ownRef.current)) {
+            setHighlightedItem(ownRef.current);
+        }
+    }, [setHighlightedItem, ownRef]);
+    var resetMenu = useCallback(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
+    var closeNestedMenu = useCallback(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
+    return { handleMouseOver: handleMouseOver, handleMouseMove: handleMouseMove, resetMenu: resetMenu, closeNestedMenu: closeNestedMenu };
+}
+var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
+    var selected = _a.selected, highlighted = _a.highlighted, overrides = _a.overrides, getChildMenu = _a.getChildMenu, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, endEnhancer = _a.endEnhancer, hideInlineActions = _a.hideInlineActions, renderAll = _a.renderAll, explicitRole = _a.role, $item = _a.$item, restProps = __rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "endEnhancer", "hideInlineActions", "renderAll", "role", "$item"]);
     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 _c = useMenuContext(), highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
-    var locale = useLocale();
+    var _c = useMenuContext(), getActionsElement = _c.getActionsElement, highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
+    var itemRole = explicitRole !== null && explicitRole !== void 0 ? explicitRole : 'menuitem';
     useEffect(function () {
         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 resolvedItemActions = useMemo(function () { return resolveMenuActions(getActionsElement, $item); }, [getActionsElement, $item]);
+    var shouldRenderActions = Boolean(resolvedItemActions) && !ChildMenu && !hideInlineActions;
+    var resolvedEndEnhancer = useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu);
     var mergedOverrides = useMemo(function () { return mergeOverrides(listItemOverrides, overrides); }, [overrides]);
     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;
-        (_a = onMouseOverRef.current) === null || _a === void 0 ? void 0 : _a.call(onMouseOverRef, e);
-        if (canHighlightItem(ownRef.current)) {
-            setHighlightedItem(ownRef.current);
-        }
-    }, [onMouseOverRef, setHighlightedItem]);
-    var resetMenu = useCallback(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
-    var closeNestedMenu = useCallback(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
+    var _f = useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen), handleMouseOver = _f.handleMouseOver, handleMouseMove = _f.handleMouseMove, resetMenu = _f.resetMenu, closeNestedMenu = _f.closeNestedMenu;
     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, "$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 listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: itemRole, selected: selected, "data-haschildmenu": Boolean(ChildMenu), "data-hasactions": shouldRenderActions, highlighted: isItemHighlighted, "$outlined": isItemHighlighted && listItemFocusVisible, endEnhancer: resolvedEndEnhancer, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "$item": $item }, buildListItemAriaProps(itemRole, selected, ChildMenu), restProps, { onMouseOver: handleMouseOver, onMouseMove: handleMouseMove }, listItemProps)));
     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
-    // and opens child menu without pressing left arrow key
     useEffect(function () {
         if (!isItemHighlighted) {
             setHovered(false);
@@ -78,7 +148,8 @@ 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", 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 })));
 });
 MenuItem.displayName = 'MenuItem';
+MenuItem.__standard = 'Component';
 export default React.memo(MenuItem);

package/esm/menu/menu.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
-import { MenuRef } from './types';
+import type { MenuRef } from './types';
+import type { ClassName, Styles } from '../types';
 declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("../list").ListProps, "overrides"> & {
+    getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
     disableNavigationOnMount?: boolean | undefined;
     focusWhenNavigationEnabled?: boolean | undefined;
+    keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
     overrides?: {
-        List?: import("../overrides").Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-            $as?: import("react").ElementType<any> | undefined;
-            className?: import("..").Styles;
-            style?: import("..").Styles;
+        List?: import("../overrides").Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+            $as?: import("react").ElementType | undefined;
+            className?: ClassName;
+            style?: Styles;
         } & {
             children?: import("react").ReactNode;
             virtual?: boolean | undefined;
@@ -17,6 +20,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
             scrollElement?: HTMLElement | null | undefined;
             overscanCount?: number | undefined;
             estimateItemSize?: number | undefined;
+            autoScrollToSelectedItem?: boolean | undefined;
             $showFocusOutline?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
@@ -27,5 +31,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
     reducer?: import("./types").Reducer | undefined;
     captureScroll?: boolean | undefined;
     selectOnTab?: boolean | undefined;
+    drillInFocusVisibleRef?: import("react").MutableRefObject<boolean | null> | undefined;
 } & import("react").RefAttributes<MenuRef>>>;
 export default _default;