@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/menu/menu.js

@@ -1,7 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useImperativeHandle, useMemo, useState } from 'react';
-import { List } from '../list';
+import { forwardRef, memo, useImperativeHandle, useMemo, useState, Children } from 'react';
+import { List, DEFAULT_OVER_SCAN_COUNT } from '../list';
 import { useOverrides } from '../overrides';
 import useScrollCapture from '../hooks/useScrollCapture';
 import useCombinedRefs from '../hooks/useCombinedRef';
@@ -10,30 +10,33 @@ import { MenuProvider } from './MenuContext';
 import useItemContainerEventHandlers from './useItemContainerEventHandlers';
 import useStatefulMenu from './useStatefulMenu';
 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, _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({
+    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 ? 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 ? defaultReducer : _g, captureScroll = _a.captureScroll, _h = _a.selectOnTab, selectOnTab = _h === void 0 ? false : _h, drillInFocusVisibleRef = _a.drillInFocusVisibleRef, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "keyboardFocusRestoreTarget", "virtual", "className", "style", "overscanCount", "scrollElement", "estimateItemSize", "children", "getActionsElement", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab", "drillInFocusVisibleRef"]);
+    var _j = __read(useState(null), 2), listRef = _j[0], setListRef = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _k[0], listProps = _k[1];
+    var _l = __read(useState(null), 2), listItemsContainer = _l[0], setListItemsContainer = _l[1];
+    var _m = useStatefulMenu({
         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 = useScrollCapture({ enabled: captureScroll });
     var setListCombinedRef = useCombinedRefs(setListRef, setScrollTarget);
     var menuContextValue = 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]);
     useItemContainerEventHandlers({
         listItemsContainer: listItemsContainer,
         resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
@@ -50,7 +53,11 @@ var Menu = forwardRef(function (_a, ref) {
         }
         return menuRef;
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
-    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));
+    var childrenArr = Children.toArray(children);
+    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __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';
 export default memo(Menu);

package/esm/menu/nested-menu-context.js

@@ -1,7 +1,8 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useState, useCallback, useContext, useRef, } from 'react';
-export var NestedMenuContext = createContext({});
+import { useMemo, useState, useCallback, useContext, useRef } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+export var NestedMenuContext = createSingletonContext({}, 'NestedMenuContext');
 NestedMenuContext.displayName = 'NestedMenuContext';
 export var useNestedMenuContext = function () { return useContext(NestedMenuContext); };
 var NestedMenuProvider = function (_a) {
@@ -62,7 +63,7 @@ var NestedMenuProvider = function (_a) {
         getParentMenuInfo: getParentMenuInfo,
         getRootMenuInfo: getRootMenuInfo,
     }); }, [registerMenu, unregisterMenu, getMenuInfo, getChildMenuInfo, getParentMenuInfo, getRootMenuInfo]);
-    return _jsx(NestedMenuContext.Provider, __assign({ value: contextValue }, { children: children }), void 0);
+    return _jsx(NestedMenuContext.Provider, __assign({ value: contextValue }, { children: children }));
 };
 NestedMenuProvider.displayName = 'NestedMenuProvider';
 export default NestedMenuProvider;

package/esm/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/esm/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/esm/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;

package/esm/menu/useKeyboardNavigation.js

@@ -2,22 +2,44 @@ import { __read } from "tslib";
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useLatest } from '../hooks/useLatest';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
-import { getFirstHighlightableElement, getNextHighlightedItem } from './helpers';
+import { canHighlightItem, getFirstHighlightableElement, getNextHighlightedItem, getNextItemIndexToHighlight, nextItem, prevItem, } from './helpers';
 import { useNestedMenuContext } from './nested-menu-context';
+var ACTION_CONTAINER_SELECTOR = '[data-menu-action-container="true"]';
+var MENU_ITEM_SELECTOR = '[role="menuitem"], [role="option"]';
+var ACTION_BUTTON_SELECTOR = 'button:not([disabled]):not([aria-disabled="true"]), [role="button"]:not([aria-disabled="true"]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var closest = function (element, selector) { var _a; return (_a = element === null || element === void 0 ? void 0 : element.closest(selector)) !== null && _a !== void 0 ? _a : null; };
+var getActionButtons = function (container) {
+    return container
+        ? Array.from(container.querySelectorAll(ACTION_BUTTON_SELECTOR)).filter(function (action) { return action.getAttribute('aria-disabled') !== 'true'; })
+        : [];
+};
+var hasInlineActions = function (item) {
+    return Boolean(item) && (item === null || item === void 0 ? void 0 : item.dataset.hasactions) === 'true' && canHighlightItem(item);
+};
+var focusActionButton = function (actionButtons, actionIndex) {
+    var _a;
+    if (!actionButtons.length)
+        return false;
+    var nextIndex = Math.min(Math.max(actionIndex, 0), actionButtons.length - 1);
+    (_a = actionButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    return true;
+};
 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, selectOnTab = _a.selectOnTab, children = _a.children;
+    var listItemsContainerRef = _a.listItemsContainerRef, _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, keyboardFocusRestoreTarget = _a.keyboardFocusRestoreTarget, disableAutoHighlight = _a.disableAutoHighlight, reducer = _a.reducer, selectOnTab = _a.selectOnTab, children = _a.children, drillInFocusVisibleRef = _a.drillInFocusVisibleRef;
     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 navigationEnabledRef = useLatest(navigationEnabled);
     var highlightedItemRef = useLatest(highlightedItem);
     var reducerRef = useLatest(reducer);
+    var keyboardFocusRestoreTargetRef = useLatest(keyboardFocusRestoreTarget);
     var ownerDocument = useDocument();
-    var setHighlightedItem = function (item, showFocusVisibleStyles) {
+    var setHighlightedItem = useCallback(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
     useLayoutEffect(function () {
         var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
@@ -25,23 +47,42 @@ var useKeyboardNavigation = function (_a) {
             return;
         }
         var firstHighlightableItem = getFirstHighlightableElement(listItemsContainerRef).firstHighlightableItem;
-        firstHighlightableItem && setHighlightedItem(firstHighlightableItem);
+        if (firstHighlightableItem) {
+            var showFocusRing = (drillInFocusVisibleRef === null || drillInFocusVisibleRef === void 0 ? void 0 : drillInFocusVisibleRef.current) === true;
+            if (drillInFocusVisibleRef && drillInFocusVisibleRef.current === true) {
+                drillInFocusVisibleRef.current = null;
+            }
+            setHighlightedItem(firstHighlightableItem, showFocusRing);
+        }
         // 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 () {
+        setTimeout(function () {
             var _a, _b;
             (_b = (_a = highlightedItemRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest' });
-        });
+            // waiting here to make sure react-virtual handles scroll to first selected element.
+            // once, react-virtual makes sure that first selected item is in viewport(getting rendered), menu will scroll that item into view.
+        }, 50);
     }, [highlightedItemRef]);
-    var turnOnKeyboardNavigation = useCallback(function () {
+    var turnOnKeyboardNavigation = useCallback(function (event) {
+        var _a, _b;
+        // this gets called when there is mouseover or focus event triggered on the listContainer if any one of those
+        // events have already started the keyboard navigation there is no need to restart it again
+        if (navigationEnabledRef.current)
+            return;
         setNavigationEnabled(true);
         setNestedMenuOpen(false);
-    }, [setNavigationEnabled, setNestedMenuOpen]);
-    var turnOffKeyboardNavigation = useCallback(function () { return setNavigationEnabled(false); }, []);
-    var _h = useNestedMenuContext(), getMenuInfo = _h.getMenuInfo, getParentMenuInfo = _h.getParentMenuInfo, getChildMenuInfo = _h.getChildMenuInfo;
-    // Highlight previously selected item or first highlightable item on mount
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'focus' && listItemsContainerRef) {
+            var _c = getFirstHighlightableElement(listItemsContainerRef), firstHighlightableItem = _c.firstHighlightableItem, firstSelectedItem = _c.firstSelectedItem;
+            setHighlightedItem(((_b = (_a = highlightedItemRef.current) !== null && _a !== void 0 ? _a : firstSelectedItem) !== null && _b !== void 0 ? _b : firstHighlightableItem), true);
+        }
+    }, [highlightedItemRef, listItemsContainerRef, navigationEnabledRef, setHighlightedItem]);
+    var turnOffKeyboardNavigation = useCallback(function () {
+        setListItemFocusVisible(false);
+        setNavigationEnabled(false);
+    }, []);
+    var _h = useNestedMenuContext(), getMenuInfo = _h.getMenuInfo, getParentMenuInfo = _h.getParentMenuInfo;
     useEffect(function () {
         if (disableAutoHighlight || !listItemsContainerRef) {
             return;
@@ -51,14 +92,106 @@ var useKeyboardNavigation = function (_a) {
             highlightedItem: firstSelectedItem !== null && firstSelectedItem !== void 0 ? firstSelectedItem : firstHighlightableItem,
         }).highlightedItem;
         setHighlightedItem(itemToHighlight);
-    }, [listItemsContainerRef, disableAutoHighlight, reducerRef, disableNavigationOnMount]);
-    var handleKeyDown = useCallback(function (event) {
+    }, [disableAutoHighlight, disableNavigationOnMount, listItemsContainerRef, reducerRef, setHighlightedItem]);
+    var handleActionKeyDown = useCallback(function (event, actionContainer) {
         var _a;
-        var _highlightedItem = highlightedItemRef.current;
+        var currentMenuItem = closest(actionContainer, MENU_ITEM_SELECTOR);
+        if (!listItemsContainerRef || !currentMenuItem || !hasInlineActions(currentMenuItem))
+            return false;
+        var actionButtons = getActionButtons(actionContainer);
+        if (!actionButtons.length)
+            return false;
+        var targetElement = event.target;
+        var activeActionElement = closest(targetElement, ACTION_BUTTON_SELECTOR);
+        var activeActionIndex = actionButtons.findIndex(function (action) { return action === activeActionElement; });
+        var actionIndex = activeActionIndex >= 0 ? activeActionIndex : 0;
+        if (activeActionElement &&
+            (event.key === ' ' || (event.key === 'Enter' && event.keyCode !== 229)) // IME guard
+        ) {
+            return true;
+        }
+        if (event.key === 'Tab' || event.key === 'Escape') {
+            if (keyboardFocusRestoreTargetRef.current) {
+                setHighlightedItem(currentMenuItem, true);
+                keyboardFocusRestoreTargetRef.current.focus({ preventScroll: true });
+                event.preventDefault();
+                return true;
+            }
+        }
+        if (event.key === 'Tab') {
+            setHighlightedItem(null);
+            turnOffKeyboardNavigation();
+            return true;
+        }
+        if (event.key === 'ArrowRight') {
+            if (actionIndex < actionButtons.length - 1) {
+                focusActionButton(actionButtons, actionIndex + 1);
+                event.preventDefault();
+            }
+            return true;
+        }
+        if (event.key === 'ArrowLeft') {
+            if (actionIndex > 0) {
+                focusActionButton(actionButtons, actionIndex - 1);
+            }
+            else {
+                setHighlightedItem(currentMenuItem, true);
+                if (focusWhenNavigationEnabled) {
+                    listItemsContainerRef.focus({ preventScroll: true });
+                }
+                else if (keyboardFocusRestoreTargetRef.current) {
+                    keyboardFocusRestoreTargetRef.current.focus({ preventScroll: true });
+                }
+                else {
+                    activeActionElement === null || activeActionElement === void 0 ? void 0 : activeActionElement.blur();
+                }
+            }
+            event.preventDefault();
+            return true;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            var traversalFunction = event.key === 'ArrowDown' ? nextItem : prevItem;
+            var itemToHighlight = getNextItemIndexToHighlight(currentMenuItem, listItemsContainerRef, traversalFunction);
+            setHighlightedItem(itemToHighlight, true);
+            if (focusWhenNavigationEnabled) {
+                listItemsContainerRef.focus({ preventScroll: true });
+            }
+            else if (keyboardFocusRestoreTargetRef.current) {
+                keyboardFocusRestoreTargetRef.current.focus({ preventScroll: true });
+            }
+            else {
+                activeActionElement === null || activeActionElement === void 0 ? void 0 : activeActionElement.blur();
+            }
+            (_a = itemToHighlight === null || itemToHighlight === void 0 ? void 0 : itemToHighlight.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(itemToHighlight, { block: 'nearest' });
+            event.preventDefault();
+            return true;
+        }
+        return false;
+    }, [
+        focusWhenNavigationEnabled,
+        keyboardFocusRestoreTargetRef,
+        listItemsContainerRef,
+        setHighlightedItem,
+        turnOffKeyboardNavigation,
+    ]);
+    var handleKeyDown = useCallback(function (event) {
+        var _a, _b;
         if (!listItemsContainerRef)
             return;
+        var actionContainer = closest(event.target, ACTION_CONTAINER_SELECTOR);
+        if (actionContainer && handleActionKeyDown(event, actionContainer))
+            return;
+        var _highlightedItem = highlightedItemRef.current;
         var nextItemToHighlight = getNextHighlightedItem(event, (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(_highlightedItem)) ? _highlightedItem : null, listItemsContainerRef);
         var turnOffCurrentMenuNavigation = ((getMenuInfo === null || getMenuInfo === void 0 ? void 0 : getMenuInfo(listItemsContainerRef)) || {}).turnOffKeyboardNavigation;
+        if (event.key === 'ArrowRight' && hasInlineActions(_highlightedItem)) {
+            var inlineActionContainer = (_a = _highlightedItem === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.querySelector(ACTION_CONTAINER_SELECTOR)) !== null && _a !== void 0 ? _a : null;
+            if (focusActionButton(getActionButtons(inlineActionContainer), 0)) {
+                setHighlightedItem(_highlightedItem, false);
+                event.preventDefault();
+                return;
+            }
+        }
         if (event.key === 'ArrowLeft') {
             var turnOnParentMenuNavigation = ((getParentMenuInfo === null || getParentMenuInfo === void 0 ? void 0 : getParentMenuInfo(listItemsContainerRef)) || {}).turnOnKeyboardNavigation;
             // stopping event as event propogates to parent nested menu and closes that too.
@@ -86,8 +219,26 @@ var useKeyboardNavigation = function (_a) {
          * 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, selectOnTab]);
+        (_b = nextItemToHighlight === null || nextItemToHighlight === void 0 ? void 0 : nextItemToHighlight.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(nextItemToHighlight, { block: 'nearest' });
+    }, [
+        getMenuInfo,
+        getParentMenuInfo,
+        handleActionKeyDown,
+        highlightedItemRef,
+        listItemsContainerRef,
+        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body,
+        selectOnTab,
+        setHighlightedItem,
+    ]);
+    var handleContainerBlur = useCallback(function (event) {
+        var _a, _b;
+        var currentTarget = event.currentTarget;
+        var nextFocusedElement = (_a = event.relatedTarget) !== null && _a !== void 0 ? _a : (_b = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.ownerDocument) === null || _b === void 0 ? void 0 : _b.activeElement;
+        if (nextFocusedElement && (listItemsContainerRef === null || listItemsContainerRef === void 0 ? void 0 : listItemsContainerRef.contains(nextFocusedElement))) {
+            return;
+        }
+        turnOffKeyboardNavigation();
+    }, [listItemsContainerRef, turnOffKeyboardNavigation]);
     useEffect(function () {
         if (!navigationEnabled) {
             return undefined;
@@ -100,10 +251,10 @@ var useKeyboardNavigation = function (_a) {
             listContainer.focus({ preventScroll: true });
             listContainer.addEventListener('keydown', handleKeyDown);
             // automatically disable navigation if element is blurred
-            listContainer.addEventListener('blur', turnOffKeyboardNavigation);
+            listContainer.addEventListener('blur', handleContainerBlur);
             return function () {
                 listContainer.removeEventListener('keydown', handleKeyDown);
-                listContainer.removeEventListener('blur', turnOffKeyboardNavigation);
+                listContainer.removeEventListener('blur', handleContainerBlur);
             };
         }
         ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', handleKeyDown);
@@ -113,6 +264,7 @@ var useKeyboardNavigation = function (_a) {
     }, [
         ownerDocument,
         focusWhenNavigationEnabled,
+        handleContainerBlur,
         handleKeyDown,
         listItemsContainerRef,
         navigationEnabled,

package/esm/menu/useStatefulMenu.d.ts

@@ -1,18 +1,20 @@
-import { ReactNode } from 'react';
-import { Reducer } from './types';
-declare type UseStatefulMenu = (params: {
+import { type ReactNode } from 'react';
+import type { Reducer } from './types';
+type UseStatefulMenu = (params: {
     disableNavigationOnMount?: boolean;
     disableAutoHighlight?: boolean;
     focusWhenNavigationEnabled: boolean;
+    keyboardFocusRestoreTarget?: HTMLElement | null;
     listItemsContainerRef: HTMLElement | null;
     onHighlightedItemChange?: (item?: HTMLElement | null) => void;
     reducer?: Reducer;
     selectOnTab?: boolean;
     children?: ReactNode;
+    drillInFocusVisibleRef?: React.MutableRefObject<boolean | null>;
 }) => {
     highlightedItem: HTMLElement | null;
     setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
-    turnOnKeyboardNavigation: () => void;
+    turnOnKeyboardNavigation: (e?: KeyboardEvent) => void;
     turnOffKeyboardNavigation: () => void;
     listItemFocusVisible: boolean;
     navigationEnabled: boolean;

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, selectOnTab = _a.selectOnTab, children = _a.children;
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled, keyboardFocusRestoreTarget = _a.keyboardFocusRestoreTarget, listItemsContainerRef = _a.listItemsContainerRef, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, _c = _a.reducer, reducer = _c === void 0 ? defaultReducer : _c, selectOnTab = _a.selectOnTab, children = _a.children, drillInFocusVisibleRef = _a.drillInFocusVisibleRef;
     useEffect(function () {
         // focusWhenNavigationEnabled is true, then make listContainer focusable if required
         if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
@@ -15,10 +15,12 @@ var useStatefulMenu = function (_a) {
         disableAutoHighlight: disableAutoHighlight,
         disableNavigationOnMount: disableNavigationOnMount,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+        keyboardFocusRestoreTarget: keyboardFocusRestoreTarget,
         listItemsContainerRef: listItemsContainerRef,
         reducer: reducer,
         selectOnTab: selectOnTab,
         children: children,
+        drillInFocusVisibleRef: drillInFocusVisibleRef,
     }), 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 () {

package/esm/menu/useStatefulSubmenu.d.ts

@@ -0,0 +1,9 @@
+import type { SubMenuProps } from './SubMenu';
+import type { StatefulSubMenuProps } from './StatefulSubMenu';
+import type { SubMenuItem } from './types';
+declare const useStatefulSubmenu: ({ items: allItems, valueKey, onItemSelect, ...restProps }: StatefulSubMenuProps) => {
+    subMenuProps: SubMenuProps;
+} & {
+    setCurrentParent: (item: SubMenuItem | undefined) => void;
+};
+export default useStatefulSubmenu;

package/esm/menu/useStatefulSubmenu.js

@@ -0,0 +1,39 @@
+import { __assign, __read, __rest } from "tslib";
+// lib
+import { useCallback, useMemo, useRef, useState } from 'react';
+// utils
+import { findParentAndChildren } from './helpers';
+var useStatefulSubmenu = function (_a) {
+    var allItems = _a.items, _b = _a.valueKey, valueKey = _b === void 0 ? 'id' : _b, onItemSelect = _a.onItemSelect, restProps = __rest(_a, ["items", "valueKey", "onItemSelect"]);
+    var _c = __read(useState(undefined), 2), currentParent = _c[0], setCurrentParent = _c[1];
+    var drillInFocusVisibleRef = useRef(null);
+    var _d = useMemo(function () {
+        if (!currentParent) {
+            return { items: allItems, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var results = findParentAndChildren(currentParent[valueKey], allItems, valueKey);
+        if (!results) {
+            return { items: allItems, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var _a = __read(results, 2), nestedItems = _a[0], parent = _a[1];
+        return {
+            items: nestedItems,
+            grandParent: parent,
+            currentHeaderItem: currentParent,
+        };
+    }, [allItems, currentParent, valueKey]), items = _d.items, grandParent = _d.grandParent, currentHeaderItem = _d.currentHeaderItem;
+    var handleActiveParentChange = useCallback(function (newParentItem) { return setCurrentParent(newParentItem); }, []);
+    return {
+        subMenuProps: __assign(__assign({}, restProps), { currentHeaderItem: currentHeaderItem, onHeaderItemClick: function () { return handleActiveParentChange(grandParent); }, onItemSelect: function (item, event) {
+                if (item.nestedItems) {
+                    drillInFocusVisibleRef.current = event != null && !event.isTrusted ? true : null;
+                    handleActiveParentChange(item);
+                }
+                else {
+                    onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item, event);
+                }
+            }, items: items, drillInFocusVisibleRef: drillInFocusVisibleRef }),
+        setCurrentParent: setCurrentParent,
+    };
+};
+export default useStatefulSubmenu;

package/esm/modal/ModalContext.d.ts

@@ -0,0 +1,11 @@
+import type { Intent } from './types';
+import type { ReactNode } from 'react';
+type ModalContextType = {
+    intent?: Intent;
+    icon?: ReactNode;
+    headerTitleId: string;
+    closeable: boolean;
+};
+export declare const ModalContextProvider: import("react").Provider<ModalContextType>;
+export declare const useModalContext: () => ModalContextType;
+export {};

package/esm/modal/ModalContext.js

@@ -0,0 +1,10 @@
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+import { useContext } from 'react';
+var ModalContext = createSingletonContext({
+    intent: 'default',
+    icon: undefined,
+    headerTitleId: '',
+    closeable: true,
+}, 'ModalContext');
+export var ModalContextProvider = ModalContext.Provider;
+export var useModalContext = function () { return useContext(ModalContext); };