@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/menu/useKeyboardNavigation.js

@@ -6,20 +6,42 @@ var useLatest_1 = require("../hooks/useLatest");
 var DocumentProvider_1 = require("../spacewebProvider/DocumentProvider");
 var helpers_1 = require("./helpers");
 var nested_menu_context_1 = require("./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' && (0, helpers_1.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 _d = (0, tslib_1.__read)((0, react_1.useState)(null), 2), highlightedItem = _d[0], _setHighlightedItem = _d[1];
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(false), 2), listItemFocusVisible = _e[0], setListItemFocusVisible = _e[1];
-    var _f = (0, tslib_1.__read)((0, react_1.useState)(!disableNavigationOnMount), 2), navigationEnabled = _f[0], setNavigationEnabled = _f[1];
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(false), 2), nestedMenuOpen = _g[0], setNestedMenuOpen = _g[1];
+    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 = tslib_1.__read((0, react_1.useState)(null), 2), highlightedItem = _d[0], _setHighlightedItem = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(false), 2), listItemFocusVisible = _e[0], setListItemFocusVisible = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(!disableNavigationOnMount), 2), navigationEnabled = _f[0], setNavigationEnabled = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)(false), 2), nestedMenuOpen = _g[0], setNestedMenuOpen = _g[1];
+    var navigationEnabledRef = (0, useLatest_1.useLatest)(navigationEnabled);
     var highlightedItemRef = (0, useLatest_1.useLatest)(highlightedItem);
     var reducerRef = (0, useLatest_1.useLatest)(reducer);
+    var keyboardFocusRestoreTargetRef = (0, useLatest_1.useLatest)(keyboardFocusRestoreTarget);
     var ownerDocument = (0, DocumentProvider_1.useDocument)();
-    var setHighlightedItem = function (item, showFocusVisibleStyles) {
+    var setHighlightedItem = (0, react_1.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
     (0, react_1.useLayoutEffect)(function () {
         var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
@@ -27,23 +49,42 @@ var useKeyboardNavigation = function (_a) {
             return;
         }
         var firstHighlightableItem = (0, helpers_1.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]);
     (0, react_1.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 = (0, react_1.useCallback)(function () {
+    var turnOnKeyboardNavigation = (0, react_1.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 = (0, react_1.useCallback)(function () { return setNavigationEnabled(false); }, []);
-    var _h = (0, nested_menu_context_1.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 = (0, helpers_1.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 = (0, react_1.useCallback)(function () {
+        setListItemFocusVisible(false);
+        setNavigationEnabled(false);
+    }, []);
+    var _h = (0, nested_menu_context_1.useNestedMenuContext)(), getMenuInfo = _h.getMenuInfo, getParentMenuInfo = _h.getParentMenuInfo;
     (0, react_1.useEffect)(function () {
         if (disableAutoHighlight || !listItemsContainerRef) {
             return;
@@ -53,14 +94,106 @@ var useKeyboardNavigation = function (_a) {
             highlightedItem: firstSelectedItem !== null && firstSelectedItem !== void 0 ? firstSelectedItem : firstHighlightableItem,
         }).highlightedItem;
         setHighlightedItem(itemToHighlight);
-    }, [listItemsContainerRef, disableAutoHighlight, reducerRef, disableNavigationOnMount]);
-    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+    }, [disableAutoHighlight, disableNavigationOnMount, listItemsContainerRef, reducerRef, setHighlightedItem]);
+    var handleActionKeyDown = (0, react_1.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' ? helpers_1.nextItem : helpers_1.prevItem;
+            var itemToHighlight = (0, helpers_1.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 = (0, react_1.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 = (0, helpers_1.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.
@@ -88,8 +221,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 = (0, react_1.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]);
     (0, react_1.useEffect)(function () {
         if (!navigationEnabled) {
             return undefined;
@@ -102,10 +253,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);
@@ -115,6 +266,7 @@ var useKeyboardNavigation = function (_a) {
     }, [
         ownerDocument,
         focusWhenNavigationEnabled,
+        handleContainerBlur,
         handleKeyDown,
         listItemsContainerRef,
         navigationEnabled,

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

@@ -5,9 +5,9 @@ var react_1 = require("react");
 var useLatest_1 = require("../hooks/useLatest");
 var helpers_1 = require("./helpers");
 var nested_menu_context_1 = require("./nested-menu-context");
-var useKeyboardNavigation_1 = (0, tslib_1.__importDefault)(require("./useKeyboardNavigation"));
+var useKeyboardNavigation_1 = tslib_1.__importDefault(require("./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 ? helpers_1.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 ? helpers_1.defaultReducer : _c, selectOnTab = _a.selectOnTab, children = _a.children, drillInFocusVisibleRef = _a.drillInFocusVisibleRef;
     (0, react_1.useEffect)(function () {
         // focusWhenNavigationEnabled is true, then make listContainer focusable if required
         if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
@@ -18,10 +18,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 = (0, nested_menu_context_1.useNestedMenuContext)(), unregisterMenu = _e.unregisterMenu, registerMenu = _e.registerMenu, getParentMenuInfo = _e.getParentMenuInfo;
     (0, react_1.useEffect)(function () {

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+// lib
+var react_1 = require("react");
+// utils
+var helpers_1 = require("./helpers");
+var useStatefulSubmenu = function (_a) {
+    var allItems = _a.items, _b = _a.valueKey, valueKey = _b === void 0 ? 'id' : _b, onItemSelect = _a.onItemSelect, restProps = tslib_1.__rest(_a, ["items", "valueKey", "onItemSelect"]);
+    var _c = tslib_1.__read((0, react_1.useState)(undefined), 2), currentParent = _c[0], setCurrentParent = _c[1];
+    var drillInFocusVisibleRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useMemo)(function () {
+        if (!currentParent) {
+            return { items: allItems, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var results = (0, helpers_1.findParentAndChildren)(currentParent[valueKey], allItems, valueKey);
+        if (!results) {
+            return { items: allItems, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var _a = tslib_1.__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 = (0, react_1.useCallback)(function (newParentItem) { return setCurrentParent(newParentItem); }, []);
+    return {
+        subMenuProps: tslib_1.__assign(tslib_1.__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,
+    };
+};
+exports.default = useStatefulSubmenu;

package/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/modal/ModalContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalContext = exports.ModalContextProvider = void 0;
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+var react_1 = require("react");
+var ModalContext = (0, createSingletonContext_1.createSingletonContext)({
+    intent: 'default',
+    icon: undefined,
+    headerTitleId: '',
+    closeable: true,
+}, 'ModalContext');
+exports.ModalContextProvider = ModalContext.Provider;
+var useModalContext = function () { return (0, react_1.useContext)(ModalContext); };
+exports.useModalContext = useModalContext;

package/modal/adapter.js

@@ -5,12 +5,16 @@ var modal_1 = require("../baseui/modal");
 var getWidthFromSize = function (_a, size) {
     var px2rem = _a.px2rem;
     switch (size) {
+        case 'medium':
+            return px2rem(600);
         case 'sm':
             return px2rem(520);
         case 'md':
             return px2rem(720);
         case 'lg':
             return px2rem(1220);
+        case 'fullPage':
+            return '94vw';
         default:
             return 'auto';
     }

package/modal/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from '../baseui/modal';
-export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
-export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
+export { FocusOnce, isModalOpen } from '../baseui/modal';
+export { ModalBody, StyledRoot, StyledDialog, StyledDialogContainer, StyledModal } from './styled-components';
+export type { SharedProps, ModalProps, ModalHeaderProps, ModalFooterProps, ModalState, Size, Role, } from './types';
 export { CLOSE_SOURCE } from './types';

package/modal/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CLOSE_SOURCE = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledRoot = exports.ModalBody = exports.FocusOnce = exports.ModalFooter = exports.ModalHeader = exports.Modal = void 0;
+exports.CLOSE_SOURCE = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledRoot = exports.ModalBody = exports.isModalOpen = exports.FocusOnce = exports.ModalFooter = exports.ModalHeader = exports.Modal = void 0;
 var modal_1 = require("./modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
 var modal_header_1 = require("./modal-header");
@@ -12,10 +12,10 @@ var modal_footer_1 = require("./modal-footer");
 Object.defineProperty(exports, "ModalFooter", { enumerable: true, get: function () { return __importDefault(modal_footer_1).default; } });
 var modal_2 = require("../baseui/modal");
 Object.defineProperty(exports, "FocusOnce", { enumerable: true, get: function () { return modal_2.FocusOnce; } });
+Object.defineProperty(exports, "isModalOpen", { enumerable: true, get: function () { return modal_2.isModalOpen; } });
 var styled_components_1 = require("./styled-components");
 Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return styled_components_1.ModalBody; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
-Object.defineProperty(exports, "StyledClose", { enumerable: true, get: function () { return styled_components_1.StyledClose; } });
 Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return styled_components_1.StyledDialog; } });
 Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return styled_components_1.StyledDialogContainer; } });
 Object.defineProperty(exports, "StyledModal", { enumerable: true, get: function () { return styled_components_1.StyledModal; } });

package/modal/modal-footer.js

@@ -5,9 +5,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
 var ModalFooter = function (_a) {
-    var noBorder = _a.noBorder, props = (0, tslib_1.__rest)(_a, ["noBorder"]);
+    var noBorder = _a.noBorder, props = tslib_1.__rest(_a, ["noBorder"]);
     var sharedProps = (0, helpers_1.add$props)({ noBorder: noBorder });
-    return (0, jsx_runtime_1.jsx)(styled_components_1.StyledModalFooter, (0, tslib_1.__assign)({}, props, sharedProps), void 0);
+    return (0, jsx_runtime_1.jsx)(styled_components_1.StyledModalFooter, tslib_1.__assign({}, props, sharedProps));
 };
 ModalFooter.displayName = 'ModalFooter';
 exports.default = ModalFooter;

package/modal/modal-header.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { ModalHeaderProps } from './types';
+import { type ReactElement } from 'react';
+import type { ModalHeaderProps } from './types';
 declare const ModalHeader: {
-    ({ noBorder, ...restProps }: ModalHeaderProps): ReactElement;
+    ({ noBorder, children, description, id, ...restProps }: ModalHeaderProps): ReactElement;
     displayName: string;
 };
 export default ModalHeader;

package/modal/modal-header.js

@@ -3,11 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("./styled-components");
+var grid_1 = require("../grid");
+var typography_1 = require("../typography");
 var helpers_1 = require("../helpers");
+var ModalContext_1 = require("./ModalContext");
+var HEADER_TEXT_CLASSES = typography_1.TYPOGRAPHY_VARIANT_VS_CLASS_MAP['heading-5'];
+var ModalHeaderContent = function (_a) {
+    var icon = _a.icon, children = _a.children, description = _a.description, titleId = _a.titleId;
+    if (!icon && !description) {
+        return children;
+    }
+    return ((0, jsx_runtime_1.jsxs)(grid_1.Grid, tslib_1.__assign({ style: icon ? { gridTemplateColumns: 'auto 1fr' } : {}, gap: 2 }, { children: [icon ? (0, jsx_runtime_1.jsx)(grid_1.Col, tslib_1.__assign({ className: "flex items-center justify-center" }, { children: icon })) : null, (0, jsx_runtime_1.jsx)(grid_1.Col, tslib_1.__assign({ id: titleId, className: ['truncate', HEADER_TEXT_CLASSES] }, { children: children })), description ? ((0, jsx_runtime_1.jsx)(grid_1.Col, tslib_1.__assign({ className: icon ? 'col-start-2' : '' }, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-sm" }, { children: description })) }))) : null] })));
+};
 var ModalHeader = function (_a) {
-    var noBorder = _a.noBorder, restProps = (0, tslib_1.__rest)(_a, ["noBorder"]);
-    var sharedProps = (0, helpers_1.add$props)({ noBorder: noBorder });
-    return (0, jsx_runtime_1.jsx)(styled_components_1.StyledModalHeader, (0, tslib_1.__assign)({}, restProps, sharedProps), void 0);
+    var _b = _a.noBorder, noBorder = _b === void 0 ? true : _b, children = _a.children, description = _a.description, id = _a.id, restProps = tslib_1.__rest(_a, ["noBorder", "children", "description", "id"]);
+    var _c = (0, ModalContext_1.useModalContext)(), icon = _c.icon, headerTitleId = _c.headerTitleId, closeable = _c.closeable;
+    var sharedProps = (0, helpers_1.add$props)({ noBorder: noBorder, icon: icon, closeable: closeable });
+    var titleId = id !== null && id !== void 0 ? id : headerTitleId;
+    var hasLayout = Boolean(icon || description);
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModalHeader, tslib_1.__assign({}, restProps, sharedProps, { id: hasLayout ? undefined : titleId, 
+        // Pass typography classes to ModalHeader if we don't add any layout elements
+        className: [!icon && !description ? HEADER_TEXT_CLASSES : undefined, restProps.className] }, { children: (0, jsx_runtime_1.jsx)(ModalHeaderContent, tslib_1.__assign({ icon: icon, description: description, titleId: hasLayout ? titleId : undefined }, { children: children })) })));
 };
 ModalHeader.displayName = 'ModalHeader';
 exports.default = ModalHeader;

package/modal/modal.d.ts

@@ -1,7 +1,16 @@
-import * as React from 'react';
-import { ModalProps } from './types';
-declare const _default: React.MemoExoticComponent<{
-    ({ size, role, ariaLabel, overrides, ...props }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+import { type ReactElement } from 'react';
+import type { ModalProps } from './types';
+import Alert from '../icon/components/alert-solid';
+import Tick from '../icon/components/tickCircle-solid';
+import Warning from '../icon/components/warning-solid';
+export declare const INTENT_TO_ICON: {
+    success: typeof Tick;
+    error: typeof Alert;
+    warning: typeof Warning;
+};
+declare const _default: import("react").MemoExoticComponent<{
+    ({ size, role, ariaLabel, ariaLabelledBy, icon: _icon, intent, overrides, ...props }: ModalProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
+    __standard: string;
 }>;
 export default _default;