@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/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/menu/index.js

@@ -3,10 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NestedMenuProvider = exports.MenuItem = exports.Menu = void 0;
+exports.useStatefulSubMenu = exports.StatefulSubMenu = exports.SubMenu = exports.NestedMenuProvider = exports.ActionsIconButton = exports.MenuItem = exports.Menu = void 0;
 var menu_1 = require("./menu");
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(menu_1).default; } });
 var menu_item_1 = require("./menu-item");
 Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return __importDefault(menu_item_1).default; } });
+var ActionsIconButton_1 = require("./ActionsIconButton");
+Object.defineProperty(exports, "ActionsIconButton", { enumerable: true, get: function () { return __importDefault(ActionsIconButton_1).default; } });
 var nested_menu_context_1 = require("./nested-menu-context");
 Object.defineProperty(exports, "NestedMenuProvider", { enumerable: true, get: function () { return __importDefault(nested_menu_context_1).default; } });
+var SubMenu_1 = require("./SubMenu");
+Object.defineProperty(exports, "SubMenu", { enumerable: true, get: function () { return SubMenu_1.SubMenu; } });
+var StatefulSubMenu_1 = require("./StatefulSubMenu");
+Object.defineProperty(exports, "StatefulSubMenu", { enumerable: true, get: function () { return StatefulSubMenu_1.StatefulSubMenu; } });
+var useStatefulSubmenu_1 = require("./useStatefulSubmenu");
+Object.defineProperty(exports, "useStatefulSubMenu", { enumerable: true, get: function () { return __importDefault(useStatefulSubmenu_1).default; } });

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

@@ -3,75 +3,155 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var React = (0, tslib_1.__importStar)(require("react"));
-var themeHelpers_1 = require("../helpers/themeHelpers");
-var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedHandler"));
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var React = tslib_1.__importStar(require("react"));
+var box_1 = require("../box");
+var useCombinedHandler_1 = tslib_1.__importDefault(require("../hooks/useCombinedHandler"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
 var useLatest_1 = require("../hooks/useLatest");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
-var list_item_1 = (0, tslib_1.__importDefault)(require("../list/list-item"));
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
+var chevron_down_1 = tslib_1.__importDefault(require("../icon/components/chevron-down"));
+var list_item_1 = tslib_1.__importDefault(require("../list/list-item"));
 var overrides_1 = require("../overrides");
 var popover_1 = require("../popover");
-var locale_1 = require("../locale");
 var helpers_1 = require("./helpers");
 var MenuContext_1 = require("./MenuContext");
-var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var classNames_1 = tslib_1.__importDefault(require("../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 = (0, themeHelpers_1.getComponentTheme)(theme, 'list').hoverBackgroundColor;
-                        return getStyle((0, classNames_1.default)({ '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 (0, classNames_1.default)($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 = (0, tslib_1.__rest)(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "renderAll"]);
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hovered = _b[0], setHovered = _b[1];
-    var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
-    var ownRef = (0, react_1.useRef)(null);
-    var itemRef = (0, useCombinedRef_1.default)(ref, ownRef);
-    var _c = (0, MenuContext_1.useMenuContext)(), highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
-    var locale = (0, locale_1.useLocale)();
-    (0, react_1.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 mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(listItemOverrides, overrides); }, [overrides]);
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _d[0], listItemProps = _d[1];
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.Popover), 2), PopoverOverride = _e[0], popoverProps = _e[1];
+/** 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 ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: (0, classNames_1.default)('flex items-center gap-1 pointer-events-none', 'group-hover:visible group-hover:pointer-events-auto', 'group-focus-within:visible group-focus-within:pointer-events-auto', 
+        // Use visibility (not opacity) so alwaysVisible children can override with `visible`.
+        sharedProps.$highlighted ? 'visible pointer-events-auto' : 'invisible'), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions.map(function (action) { return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: action.props.alwaysVisible ? 'visible opacity-100 pointer-events-auto' : undefined }, { children: action }), action.key)); }), 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 flattenActionElements(actions) {
+    return React.Children.toArray(actions).flatMap(function (node) {
+        if (React.isValidElement(node)) {
+            return node.type === React.Fragment ? flattenActionElements(node.props.children) : [node];
+        }
+        return [];
+    });
+}
+function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
+    var renderedActions = (0, react_1.useMemo)(function () {
+        return shouldRenderActions
+            ? flattenActionElements(resolvedItemActions).map(function (action, index) {
+                var _a;
+                return React.cloneElement(action, {
+                    key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index),
+                });
+            })
+            : null;
+    }, [resolvedItemActions, shouldRenderActions]);
+    return (0, react_1.useMemo)(function () {
+        if (shouldRenderActions) {
+            return function (sharedProps) { return ((0, jsx_runtime_1.jsx)(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions !== null && renderedActions !== void 0 ? renderedActions : [] })); };
+        }
+        if (endEnhancer)
+            return endEnhancer;
+        if (ChildMenu) {
+            return (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 14, className: "transform -rotate-90" });
+        }
+        return undefined;
+    }, [ChildMenu, endEnhancer, renderedActions, shouldRenderActions]);
+}
+function useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen) {
     var onMouseOverRef = (0, useLatest_1.useLatest)(onMouseOver);
     var handleMouseOver = (0, react_1.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 = (0, react_1.useCallback)(function () {
         if ((0, helpers_1.canHighlightItem)(ownRef.current)) {
             setHighlightedItem(ownRef.current);
         }
-    }, [onMouseOverRef, setHighlightedItem]);
+    }, [setHighlightedItem, ownRef]);
     var resetMenu = (0, react_1.useCallback)(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
     var closeNestedMenu = (0, react_1.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 = tslib_1.__rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "endEnhancer", "hideInlineActions", "renderAll", "role", "$item"]);
+    var _b = tslib_1.__read((0, react_1.useState)(false), 2), hovered = _b[0], setHovered = _b[1];
+    var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
+    var ownRef = (0, react_1.useRef)(null);
+    var itemRef = (0, useCombinedRef_1.default)(ref, ownRef);
+    var _c = (0, MenuContext_1.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';
+    (0, react_1.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 = (0, react_1.useMemo)(function () { return resolveMenuActions(getActionsElement, $item); }, [getActionsElement, $item]);
+    var shouldRenderActions = Boolean(resolvedItemActions) && !ChildMenu && !hideInlineActions;
+    var resolvedEndEnhancer = useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu);
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(listItemOverrides, overrides); }, [overrides]);
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _d[0], listItemProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.Popover), 2), PopoverOverride = _e[0], popoverProps = _e[1];
+    var _f = useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen), handleMouseOver = _f.handleMouseOver, handleMouseMove = _f.handleMouseMove, resetMenu = _f.resetMenu, closeNestedMenu = _f.closeNestedMenu;
     var id = (0, useUniqueId_1.default)();
-    var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, (0, tslib_1.__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 && (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
+    var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, tslib_1.__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 = (0, useCombinedHandler_1.default)(function () { return setHovered(true); }, onMouseEnter);
     var handleMouseLeave = (0, useCombinedHandler_1.default)(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
     (0, react_1.useEffect)(function () {
         if (!isItemHighlighted) {
             setHovered(false);
@@ -80,7 +160,8 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     if (!ChildMenu) {
         return listItem;
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverOverride, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(PopoverOverride, tslib_1.__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';
 exports.default = React.memo(MenuItem);

package/menu/menu.d.ts

@@ -1,22 +1,27 @@
 /// <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;
+            keepFirstItemMounted?: boolean | undefined;
             overrides?: {
                 Root?: import("../overrides").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;
@@ -27,5 +32,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;

package/menu/menu.js

@@ -5,37 +5,40 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var list_1 = require("../list");
 var overrides_1 = require("../overrides");
-var useScrollCapture_1 = (0, tslib_1.__importDefault)(require("../hooks/useScrollCapture"));
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var useScrollCapture_1 = tslib_1.__importDefault(require("../hooks/useScrollCapture"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
 var helpers_1 = require("./helpers");
 var MenuContext_1 = require("./MenuContext");
-var useItemContainerEventHandlers_1 = (0, tslib_1.__importDefault)(require("./useItemContainerEventHandlers"));
-var useStatefulMenu_1 = (0, tslib_1.__importDefault)(require("./useStatefulMenu"));
+var useItemContainerEventHandlers_1 = tslib_1.__importDefault(require("./useItemContainerEventHandlers"));
+var useStatefulMenu_1 = tslib_1.__importDefault(require("./useStatefulMenu"));
 var Menu = (0, react_1.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 ? helpers_1.defaultReducer : _f, captureScroll = _a.captureScroll, _g = _a.selectOnTab, selectOnTab = _g === void 0 ? false : _g, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab"]);
-    var _h = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _h[0], setListRef = _h[1];
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _j[0], listProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _k[0], setListItemsContainer = _k[1];
-    var _l = (0, useStatefulMenu_1.default)({
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, keyboardFocusRestoreTarget = _a.keyboardFocusRestoreTarget, _d = _a.virtual, virtual = _d === void 0 ? false : _d, className = _a.className, style = _a.style, _e = _a.overscanCount, overscanCount = _e === void 0 ? list_1.DEFAULT_OVER_SCAN_COUNT : _e, _f = _a.scrollElement, scrollElement = _f === void 0 ? null : _f, estimateItemSize = _a.estimateItemSize, children = _a.children, getActionsElement = _a.getActionsElement, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _g = _a.reducer, reducer = _g === void 0 ? helpers_1.defaultReducer : _g, captureScroll = _a.captureScroll, _h = _a.selectOnTab, selectOnTab = _h === void 0 ? false : _h, drillInFocusVisibleRef = _a.drillInFocusVisibleRef, restProps = tslib_1.__rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "keyboardFocusRestoreTarget", "virtual", "className", "style", "overscanCount", "scrollElement", "estimateItemSize", "children", "getActionsElement", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab", "drillInFocusVisibleRef"]);
+    var _j = tslib_1.__read((0, react_1.useState)(null), 2), listRef = _j[0], setListRef = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _k[0], listProps = _k[1];
+    var _l = tslib_1.__read((0, react_1.useState)(null), 2), listItemsContainer = _l[0], setListItemsContainer = _l[1];
+    var _m = (0, useStatefulMenu_1.default)({
         disableNavigationOnMount: disableNavigationOnMount,
         disableAutoHighlight: disableAutoHighlight,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+        keyboardFocusRestoreTarget: keyboardFocusRestoreTarget,
         onHighlightedItemChange: onHighlightedItemChange,
         listItemsContainerRef: listItemsContainer,
         reducer: reducer,
         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;
+        drillInFocusVisibleRef: drillInFocusVisibleRef,
+    }), turnOnKeyboardNavigation = _m.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _m.turnOffKeyboardNavigation, highlightedItem = _m.highlightedItem, setHighlightedItem = _m.setHighlightedItem, nestedMenuOpen = _m.nestedMenuOpen, listItemFocusVisible = _m.listItemFocusVisible, setNestedMenuOpen = _m.setNestedMenuOpen;
     var setScrollTarget = (0, useScrollCapture_1.default)({ enabled: captureScroll });
     var setListCombinedRef = (0, useCombinedRef_1.default)(setListRef, setScrollTarget);
     var menuContextValue = (0, react_1.useMemo)(function () { return ({
+        getActionsElement: getActionsElement,
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,
         setMenuContainerRef: setListItemsContainer,
         nestedMenuOpen: nestedMenuOpen,
         listItemFocusVisible: listItemFocusVisible,
         setNestedMenuOpen: setNestedMenuOpen,
-    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, listItemFocusVisible, setNestedMenuOpen]);
+    }); }, [getActionsElement, highlightedItem, setHighlightedItem, nestedMenuOpen, listItemFocusVisible, setNestedMenuOpen]);
     (0, useItemContainerEventHandlers_1.default)({
         listItemsContainer: listItemsContainer,
         resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
@@ -52,7 +55,11 @@ var Menu = (0, react_1.forwardRef)(function (_a, ref) {
         }
         return menuRef;
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
-    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, (0, tslib_1.__assign)({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, (0, tslib_1.__assign)({ ref: setListCombinedRef, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
+    var childrenArr = react_1.Children.toArray(children);
+    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, tslib_1.__assign({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, tslib_1.__assign({ ref: setListCombinedRef, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize, 
+            // useKeyboardNavigation will handle scrolling to selected-item if no. of items are less then overscanCount
+            autoScrollToSelectedItem: childrenArr.length >= 2 * overscanCount }, restProps, listProps, { style: [style, listProps === null || listProps === void 0 ? void 0 : listProps.style], className: [className, listProps === null || listProps === void 0 ? void 0 : listProps.className] }, { children: children })) })));
 });
 Menu.displayName = 'Menu';
+Menu.__standard = 'Component';
 exports.default = (0, react_1.memo)(Menu);

package/menu/nested-menu-context.js

@@ -4,13 +4,14 @@ exports.useNestedMenuContext = exports.NestedMenuContext = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-exports.NestedMenuContext = (0, react_1.createContext)({});
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+exports.NestedMenuContext = (0, createSingletonContext_1.createSingletonContext)({}, 'NestedMenuContext');
 exports.NestedMenuContext.displayName = 'NestedMenuContext';
 var useNestedMenuContext = function () { return (0, react_1.useContext)(exports.NestedMenuContext); };
 exports.useNestedMenuContext = useNestedMenuContext;
 var NestedMenuProvider = function (_a) {
     var children = _a.children;
-    var _b = (0, tslib_1.__read)((0, react_1.useState)([]), 2), menus = _b[0], setMenus = _b[1];
+    var _b = tslib_1.__read((0, react_1.useState)([]), 2), menus = _b[0], setMenus = _b[1];
     // storing menus in ref, to remove dependencies for getMenuInfo
     var menusRef = (0, react_1.useRef)(menus);
     menusRef.current = menus;
@@ -66,7 +67,7 @@ var NestedMenuProvider = function (_a) {
         getParentMenuInfo: getParentMenuInfo,
         getRootMenuInfo: getRootMenuInfo,
     }); }, [registerMenu, unregisterMenu, getMenuInfo, getChildMenuInfo, getParentMenuInfo, getRootMenuInfo]);
-    return (0, jsx_runtime_1.jsx)(exports.NestedMenuContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)(exports.NestedMenuContext.Provider, tslib_1.__assign({ value: contextValue }, { children: children }));
 };
 NestedMenuProvider.displayName = 'NestedMenuProvider';
 exports.default = NestedMenuProvider;

package/menu/types.d.ts

@@ -1,24 +1,43 @@
-import { Dispatch, SetStateAction } from 'react';
-import * as React from 'react';
-import { ListItemProps, ListProps } from '../list';
-import { Override } from '../overrides';
-import { PopoverProps } from '../popover';
-export declare type MenuItemProps = Omit<ListItemProps, 'overrides' | 'onMouseEnter' | 'onMouseLeave'> & {
-    getChildMenu?: () => null | React.ReactElement;
+import type { Dispatch, MutableRefObject, ReactElement, ReactNode, SetStateAction } from 'react';
+import type { ListItemProps, ListItemSharedProps, ListProps } from '../list';
+import type { Override } from '../overrides';
+import type { PopoverProps } from '../popover';
+import type { Enhancer } from '../list/types';
+export type MenuItemProps = Omit<ListItemProps, 'overrides' | 'onMouseEnter' | 'onMouseLeave'> & {
+    $item?: Record<string, any>;
+    getChildMenu?: () => null | ReactElement;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     renderAll?: boolean;
+    /**
+     * Opts this row out of the inline `getActionsElement` rendered by the parent {@link Menu}. Useful for
+     * synthetic rows like select-all, creatable, no-results, etc.
+     */
+    hideInlineActions?: boolean;
     overrides?: {
         ListItem?: Override<ListItemProps & Record<string, any>>;
         Popover?: Override<PopoverProps & Record<string, any>>;
     };
 };
-declare type State = {
+type State = {
     highlightedItem: HTMLElement | null;
 };
-export declare type ActionType = 'INITIALIZE_MENU';
-export declare type Reducer = (type: ActionType, nextState: State) => State;
-export declare type MenuProps = Omit<ListProps, 'overrides'> & {
+export type ActionType = 'INITIALIZE_MENU';
+export type Reducer = (type: ActionType, nextState: State) => State;
+export type MenuActionItem = Record<string, unknown>;
+export type MenuItemActionsParams<TItem extends MenuActionItem = MenuActionItem> = {
+    item: TItem;
+};
+/**
+ * Inline row actions: a static node for every row, or `({ item }) => …` for per-row actions
+ * (permissions, conditional buttons, etc.). Function form requires `$item` on {@link MenuItem}.
+ */
+export type MenuItemActions<TItem extends MenuActionItem = MenuActionItem> = ReactNode | ((params: MenuItemActionsParams<TItem>) => ReactNode);
+export type MenuProps = Omit<ListProps, 'overrides'> & {
+    /**
+     * Action buttons rendered for each MenuItem (skips submenu items). Pass `({ item }) => …` to vary actions per row.
+     */
+    getActionsElement?: MenuItemActions;
     /**
      * Navigation starts as soon as Menu mounts. Flag this prop true to disable this behaviour.
      * e.g. In nested menu we don't want navigationOnMount behavior
@@ -30,6 +49,10 @@ export declare type MenuProps = Omit<ListProps, 'overrides'> & {
      * false (useful with select) - Menu will not focus. Once navigation is enabled, you cannot stop it(because onBlur will not be called in any case) till the Menu is unmounted.
      */
     focusWhenNavigationEnabled?: boolean;
+    /**
+     * When `focusWhenNavigationEnabled` is false (e.g. Select), keyboard navigation restores focus here after ArrowLeft leaves the first inline action so action controls do not keep the native focus ring.
+     */
+    keyboardFocusRestoreTarget?: HTMLElement | null;
     overrides?: {
         List?: Override<ListProps & Record<string, any>>;
     };
@@ -49,20 +72,26 @@ export declare type MenuProps = Omit<ListProps, 'overrides'> & {
     reducer?: Reducer;
     captureScroll?: boolean;
     selectOnTab?: boolean;
+    /**
+     * Set `.current = true` immediately before updating items to drill into a submenu so the next
+     * auto-highlighted row shows the keyboard focus ring (Enter/Space). Cleared after read.
+     * Mouse-driven opens should leave this unset.
+     */
+    drillInFocusVisibleRef?: MutableRefObject<boolean | null>;
 };
-declare type MenuActions = {
+type MenuActions = {
     turnOnKeyboardNavigation?: () => void;
     turnOffKeyboardNavigation?: () => void;
     setHighlightedItem?: Dispatch<SetStateAction<HTMLElement | null>>;
 };
-export declare type MenuRef = HTMLElement & MenuActions;
-export declare type TraversalFunction = (highlightedItemIndex: HTMLElement | null, parentContainer: HTMLElement) => HTMLElement | null;
-export declare type ContextMenuInfo = {
+export type MenuRef = HTMLElement & MenuActions;
+export type TraversalFunction = (highlightedItemIndex: HTMLElement | null, parentContainer: HTMLElement) => HTMLElement | null;
+export type ContextMenuInfo = {
     menuRef: HTMLElement;
-    turnOnKeyboardNavigation: () => void;
+    turnOnKeyboardNavigation: (e?: KeyboardEvent) => void;
     turnOffKeyboardNavigation: () => void;
 };
-export declare type ContextValue = Partial<{
+export type ContextValue = Partial<{
     registerMenu: (menuInfo: ContextMenuInfo) => void;
     unregisterMenu: (menuRef?: HTMLElement) => void;
     getMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
@@ -70,4 +99,9 @@ export declare type ContextValue = Partial<{
     getParentMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
     getRootMenuInfo: () => ContextMenuInfo;
 }>;
+export type SubMenuItem = {
+    [x: string]: any;
+    nestedItems?: Array<SubMenuItem>;
+    startEnhancer?: Enhancer<ListItemSharedProps>;
+};
 export {};

package/menu/useItemContainerEventHandlers.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-declare type Params = {
+type Params = {
     turnOnKeyboardNavigation?: () => void;
     resetMenuHighlightOnMouseLeave?: boolean;
     focusWhenNavigationEnabled?: boolean;

package/menu/useItemContainerEventHandlers.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 var react_1 = require("react");
 /**
  * Attaches/removes event handlers to listItemContainer

package/menu/useKeyboardNavigation.d.ts

@@ -1,26 +1,29 @@
-import { ReactNode } from 'react';
-import { Reducer } from './types';
-declare type Params = {
+import type { MutableRefObject, ReactNode } from 'react';
+import type { Reducer } from './types';
+type Params = {
     /**
      * Navigation will be available for items of listContainer
      */
     listItemsContainerRef: HTMLElement | null;
     focusWhenNavigationEnabled?: boolean;
+    /** When menu does not take focus (Select), focus moves here after leaving inline actions. */
+    keyboardFocusRestoreTarget?: HTMLElement | null;
     disableNavigationOnMount?: boolean;
     disableAutoHighlight?: boolean;
     reducer: Reducer;
     selectOnTab?: boolean;
     children?: ReactNode;
+    drillInFocusVisibleRef?: MutableRefObject<boolean | null>;
 };
-declare type NavigationUtils = {
+type NavigationUtils = {
     highlightedItem: HTMLElement | null;
     setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
-    turnOnKeyboardNavigation: () => void;
+    turnOnKeyboardNavigation: (e?: KeyboardEvent) => void;
     turnOffKeyboardNavigation: () => void;
     listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
-declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, selectOnTab, children, }: Params) => NavigationUtils;
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, keyboardFocusRestoreTarget, disableAutoHighlight, reducer, selectOnTab, children, drillInFocusVisibleRef, }: Params) => NavigationUtils;
 export default useKeyboardNavigation;