@sprinklrjs/spaceweb 10.1.0

package/menu/menu.js

@@ -0,0 +1,58 @@
+"use strict";
+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 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 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 nested_menu_context_1 = require("./nested-menu-context");
+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, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _d = _a.reducer, reducer = _d === void 0 ? helpers_1.defaultReducer : _d, captureScroll = _a.captureScroll, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _e[0], setListRef = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _f[0], listProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _g[0], setListItemsContainer = _g[1];
+    var _h = (0, useStatefulMenu_1.default)({
+        disableNavigationOnMount: disableNavigationOnMount,
+        disableAutoHighlight: disableAutoHighlight,
+        focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+        onHighlightedItemChange: onHighlightedItemChange,
+        listItemsContainerRef: listItemsContainer,
+        reducer: reducer,
+    }), turnOnKeyboardNavigation = _h.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _h.turnOffKeyboardNavigation, highlightedItem = _h.highlightedItem, setHighlightedItem = _h.setHighlightedItem, nestedMenuOpen = _h.nestedMenuOpen, setNestedMenuOpen = _h.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 ({
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        setMenuContainerRef: setListItemsContainer,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, setNestedMenuOpen]);
+    (0, useItemContainerEventHandlers_1.default)({
+        listItemsContainer: listItemsContainer,
+        resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
+        setHighlightedItem: setHighlightedItem,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+    });
+    (0, react_1.useImperativeHandle)(ref, function () {
+        var menuRef = listRef;
+        if (menuRef) {
+            menuRef.turnOnKeyboardNavigation = turnOnKeyboardNavigation;
+            menuRef.turnOffKeyboardNavigation = turnOffKeyboardNavigation;
+            menuRef.setHighlightedItem = setHighlightedItem;
+        }
+        return menuRef;
+    }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
+    var nestedMenuContext = (0, nested_menu_context_1.useNestedMenuContext)();
+    var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
+    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, "$showFocusOutline": $showFocusOutline, role: "menu" }, restProps, listProps, { children: children }), void 0) }), void 0));
+});
+Menu.displayName = 'Menu';
+exports.default = (0, react_1.memo)(Menu);

package/menu/nested-menu-context.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { ContextMenuInfo } from './types';
+export declare const NestedMenuContext: import("react").Context<Partial<{
+    registerMenu: (menuInfo: ContextMenuInfo) => void;
+    unregisterMenu: (menuRef?: HTMLElement | undefined) => void;
+    getMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getChildMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getParentMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getRootMenuInfo: () => ContextMenuInfo;
+}>>;
+export declare const useNestedMenuContext: () => Partial<{
+    registerMenu: (menuInfo: ContextMenuInfo) => void;
+    unregisterMenu: (menuRef?: HTMLElement | undefined) => void;
+    getMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getChildMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getParentMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getRootMenuInfo: () => ContextMenuInfo;
+}>;
+declare const NestedMenuProvider: {
+    ({ children }: PropsWithChildren<{}>): ReactElement;
+    displayName: string;
+};
+export default NestedMenuProvider;

package/menu/nested-menu-context.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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)({});
+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];
+    // storing menus in ref, to remove dependencies for getMenuInfo
+    var menusRef = (0, react_1.useRef)(menus);
+    menusRef.current = menus;
+    var registerMenu = (0, react_1.useCallback)(function (menuInfo) {
+        setMenus(function (_menus) { return _menus.concat(menuInfo); });
+    }, []);
+    var unregisterMenu = (0, react_1.useCallback)(function (ref) {
+        setMenus(function (_menus) {
+            var index = _menus.findIndex(function (_a) {
+                var menuRef = _a.menuRef;
+                return ref === menuRef;
+            });
+            if (index !== -1) {
+                // also unregister child menus if not already
+                return _menus.slice(0, index);
+            }
+            return _menus;
+        });
+    }, []);
+    var getMenuInfo = (0, react_1.useCallback)(function (ref) {
+        var _menus = menusRef.current;
+        var index = _menus.findIndex(function (_a) {
+            var menuRef = _a.menuRef;
+            return ref === menuRef;
+        });
+        return _menus[index];
+    }, []);
+    var getChildMenuInfo = (0, react_1.useCallback)(function (ref) {
+        var _menus = menusRef.current;
+        var index = _menus.findIndex(function (_a) {
+            var menuRef = _a.menuRef;
+            return ref === menuRef;
+        });
+        return _menus[index + 1];
+    }, []);
+    var getParentMenuInfo = (0, react_1.useCallback)(function (ref) {
+        var _menus = menusRef.current;
+        var index = _menus.findIndex(function (_a) {
+            var menuRef = _a.menuRef;
+            return ref === menuRef;
+        });
+        return _menus[index - 1];
+    }, []);
+    var getRootMenuInfo = (0, react_1.useCallback)(function () {
+        var _menus = menusRef.current;
+        return _menus[0];
+    }, []);
+    var contextValue = (0, react_1.useMemo)(function () { return ({
+        registerMenu: registerMenu,
+        unregisterMenu: unregisterMenu,
+        getMenuInfo: getMenuInfo,
+        getChildMenuInfo: getChildMenuInfo,
+        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);
+};
+NestedMenuProvider.displayName = 'NestedMenuProvider';
+exports.default = NestedMenuProvider;

package/menu/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/menu/index.js"
+}

package/menu/types.d.ts

@@ -0,0 +1,72 @@
+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;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    renderAll?: boolean;
+    overrides?: {
+        ListItem?: Override<ListItemProps & Record<string, any>>;
+        Popover?: Override<PopoverProps & Record<string, any>>;
+    };
+};
+declare 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'> & {
+    /**
+     * 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
+     */
+    disableNavigationOnMount?: boolean;
+    /**
+     * Should Menu be focused when keyboard navigation is on.
+     * true (default) - Menu will be focused as soon as you hover mouse on Menu. keyboard navigation will be disabled only when MenuList is blurred.
+     * 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;
+    overrides?: {
+        List?: Override<ListProps & Record<string, any>>;
+    };
+    onHighlightedItemChange?: (item?: HTMLElement | null) => void;
+    /**
+     * By default 1st item or selected item will be highlighted on mount. If true, no item will be highlighted on mount.
+     */
+    disableAutoHighlight?: boolean;
+    /**
+     * If true, none of the MenuItem will be highlighted when mouse leaves the Menu.
+     */
+    resetMenuHighlightOnMouseLeave?: boolean;
+    /**
+     * @deprecated This prop will be removed. use resetMenuHighlightOnMouseLeave
+     */
+    resetMenuOnMouseLeave?: boolean;
+    reducer?: Reducer;
+    captureScroll?: boolean;
+};
+declare 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 = {
+    menuRef: HTMLElement;
+    turnOnKeyboardNavigation: () => void;
+    turnOffKeyboardNavigation: () => void;
+};
+export declare type ContextValue = Partial<{
+    registerMenu: (menuInfo: ContextMenuInfo) => void;
+    unregisterMenu: (menuRef?: HTMLElement) => void;
+    getMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getChildMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getParentMenuInfo: (menuRef: HTMLElement) => ContextMenuInfo;
+    getRootMenuInfo: () => ContextMenuInfo;
+}>;
+export {};

package/menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/menu/useItemContainerEventHandlers.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+declare type Params = {
+    turnOnKeyboardNavigation?: () => void;
+    resetMenuHighlightOnMouseLeave?: boolean;
+    focusWhenNavigationEnabled?: boolean;
+    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    listItemsContainer: HTMLElement | null;
+};
+/**
+ * Attaches/removes event handlers to listItemContainer
+ */
+declare const useItemContainerEventHandlers: ({ turnOnKeyboardNavigation, resetMenuHighlightOnMouseLeave, setHighlightedItem, listItemsContainer, focusWhenNavigationEnabled, }: Params) => void;
+export default useItemContainerEventHandlers;

package/menu/useItemContainerEventHandlers.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var react_1 = require("react");
+/**
+ * Attaches/removes event handlers to listItemContainer
+ */
+var useItemContainerEventHandlers = function (_a) {
+    var _b = _a.turnOnKeyboardNavigation, turnOnKeyboardNavigation = _b === void 0 ? noop_1.default : _b, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, setHighlightedItem = _a.setHighlightedItem, listItemsContainer = _a.listItemsContainer, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled;
+    var resetMenuHighlight = (0, react_1.useCallback)(function () {
+        if (resetMenuHighlightOnMouseLeave) {
+            setHighlightedItem(null);
+        }
+    }, [resetMenuHighlightOnMouseLeave, setHighlightedItem]);
+    (0, react_1.useEffect)(function () {
+        if (!focusWhenNavigationEnabled)
+            return undefined;
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('focus', turnOnKeyboardNavigation);
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('mouseenter', turnOnKeyboardNavigation);
+        return function () {
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('focus', turnOnKeyboardNavigation);
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('mouseenter', turnOnKeyboardNavigation);
+        };
+    }, [focusWhenNavigationEnabled, listItemsContainer, turnOnKeyboardNavigation]);
+    (0, react_1.useEffect)(function () {
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('blur', resetMenuHighlight);
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('mouseleave', resetMenuHighlight);
+        return function () {
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('blur', resetMenuHighlight);
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('mouseleave', resetMenuHighlight);
+        };
+    }, [resetMenuHighlight, listItemsContainer]);
+};
+exports.default = useItemContainerEventHandlers;

package/menu/useKeyboardNavigation.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Reducer } from './types';
+declare type Params = {
+    /**
+     * Navigation will be available for items of listContainer
+     */
+    listItemsContainerRef: HTMLElement | null;
+    focusWhenNavigationEnabled?: boolean;
+    disableNavigationOnMount?: boolean;
+    disableAutoHighlight?: boolean;
+    reducer: Reducer;
+};
+declare type NavigationUtils = {
+    highlightedItem: HTMLElement | null;
+    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    turnOnKeyboardNavigation: () => void;
+    turnOffKeyboardNavigation: () => void;
+    navigationEnabled: boolean;
+    nestedMenuOpen: boolean;
+    setNestedMenuOpen: (open: boolean) => void;
+};
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, }: Params) => NavigationUtils;
+export default useKeyboardNavigation;

package/menu/useKeyboardNavigation.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+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 useKeyboardNavigation = function (_a) {
+    var listItemsContainerRef = _a.listItemsContainerRef, _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, disableAutoHighlight = _a.disableAutoHighlight, reducer = _a.reducer;
+    var _d = (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)(!disableNavigationOnMount), 2), navigationEnabled = _e[0], setNavigationEnabled = _e[1];
+    var _f = (0, tslib_1.__read)((0, react_1.useState)(false), 2), nestedMenuOpen = _f[0], setNestedMenuOpen = _f[1];
+    var highlightedItemRef = (0, useLatest_1.useLatest)(highlightedItem);
+    var reducerRef = (0, useLatest_1.useLatest)(reducer);
+    var ownerDocument = (0, DocumentProvider_1.useDocument)();
+    // highlight first item in the list if prevHighlighted item is no longer in dom
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook whenever menu re-renders
+    (0, react_1.useLayoutEffect)(function () {
+        var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
+        if (!highlightedItem ||
+            disableAutoHighlight ||
+            isHighlightedItemInDom ||
+            !navigationEnabled ||
+            !listItemsContainerRef) {
+            return;
+        }
+        var firstHighlightableItem = (0, helpers_1.getFirstHighlightableElement)(listItemsContainerRef).firstHighlightableItem;
+        firstHighlightableItem && setHighlightedItem(firstHighlightableItem);
+    });
+    (0, react_1.useEffect)(function () {
+        // Scroll the selected item into view for the first time when menu opens up
+        window.requestAnimationFrame(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' });
+        });
+    }, [highlightedItemRef]);
+    var turnOnKeyboardNavigation = (0, react_1.useCallback)(function () {
+        setNavigationEnabled(true);
+        setNestedMenuOpen(false);
+    }, [setNavigationEnabled, setNestedMenuOpen]);
+    var turnOffKeyboardNavigation = (0, react_1.useCallback)(function () { return setNavigationEnabled(false); }, []);
+    var _g = (0, nested_menu_context_1.useNestedMenuContext)(), getMenuInfo = _g.getMenuInfo, getParentMenuInfo = _g.getParentMenuInfo, getChildMenuInfo = _g.getChildMenuInfo;
+    // Highlight previously selected item or first highlightable item on mount
+    (0, react_1.useEffect)(function () {
+        if (disableAutoHighlight || !listItemsContainerRef) {
+            return;
+        }
+        var _a = (0, helpers_1.getFirstHighlightableElement)(listItemsContainerRef), firstHighlightableItem = _a.firstHighlightableItem, firstSelectedItem = _a.firstSelectedItem;
+        var itemToHighlight = reducerRef.current('INITIALIZE_MENU', {
+            highlightedItem: firstSelectedItem !== null && firstSelectedItem !== void 0 ? firstSelectedItem : firstHighlightableItem,
+        }).highlightedItem;
+        setHighlightedItem(itemToHighlight);
+    }, [listItemsContainerRef, disableAutoHighlight, reducerRef, disableNavigationOnMount]);
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+        var _a;
+        var _highlightedItem = highlightedItemRef.current;
+        if (!listItemsContainerRef)
+            return;
+        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 === '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.
+            if (turnOnParentMenuNavigation) {
+                turnOffCurrentMenuNavigation === null || turnOffCurrentMenuNavigation === void 0 ? void 0 : turnOffCurrentMenuNavigation();
+                event.stopPropagation();
+            }
+            turnOnParentMenuNavigation === null || turnOnParentMenuNavigation === void 0 ? void 0 : turnOnParentMenuNavigation();
+        }
+        else if (
+        // Open child menu on ArrowRight and SpaceBar
+        (event.key === 'ArrowRight' || event.key === ' ') &&
+            (_highlightedItem === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.dataset.haschildmenu) === 'true') {
+            setNestedMenuOpen(true);
+            turnOffCurrentMenuNavigation === null || turnOffCurrentMenuNavigation === void 0 ? void 0 : turnOffCurrentMenuNavigation();
+            // Stop scrolling the menu
+            event.preventDefault();
+        }
+        setHighlightedItem(nextItemToHighlight);
+        /**
+         * 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]);
+    (0, react_1.useEffect)(function () {
+        if (!navigationEnabled) {
+            return undefined;
+        }
+        var listContainer = listItemsContainerRef;
+        if (focusWhenNavigationEnabled && listContainer) {
+            /**
+             * When Menu is opened inside popover, prevent it from scrolling to top.
+             */
+            listContainer.focus({ preventScroll: true });
+            listContainer.addEventListener('keydown', handleKeyDown);
+            // automatically disable navigation if element is blurred
+            listContainer.addEventListener('blur', turnOffKeyboardNavigation);
+            return function () {
+                listContainer.removeEventListener('keydown', handleKeyDown);
+                listContainer.removeEventListener('blur', turnOffKeyboardNavigation);
+            };
+        }
+        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', handleKeyDown);
+        return function () {
+            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        ownerDocument,
+        focusWhenNavigationEnabled,
+        handleKeyDown,
+        listItemsContainerRef,
+        navigationEnabled,
+        turnOffKeyboardNavigation,
+    ]);
+    return {
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        turnOffKeyboardNavigation: turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        navigationEnabled: navigationEnabled,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    };
+};
+exports.default = useKeyboardNavigation;

package/menu/useStatefulMenu.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Reducer } from './types';
+declare type UseStatefulMenu = (params: {
+    disableNavigationOnMount?: boolean;
+    disableAutoHighlight?: boolean;
+    focusWhenNavigationEnabled: boolean;
+    listItemsContainerRef: HTMLElement | null;
+    onHighlightedItemChange?: (item?: HTMLElement | null) => void;
+    reducer?: Reducer;
+}) => {
+    highlightedItem: HTMLElement | null;
+    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    turnOnKeyboardNavigation: () => void;
+    turnOffKeyboardNavigation: () => void;
+    navigationEnabled: boolean;
+    nestedMenuOpen: boolean;
+    setNestedMenuOpen: (open: boolean) => void;
+};
+declare const useStatefulMenu: UseStatefulMenu;
+export default useStatefulMenu;

package/menu/useStatefulMenu.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+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 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;
+    (0, react_1.useEffect)(function () {
+        // focusWhenNavigationEnabled is true, then make listContainer focusable if required
+        if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
+            listItemsContainerRef.tabIndex = 0;
+        }
+    }, [focusWhenNavigationEnabled, listItemsContainerRef]);
+    var _d = (0, useKeyboardNavigation_1.default)({
+        disableAutoHighlight: disableAutoHighlight,
+        disableNavigationOnMount: disableNavigationOnMount,
+        focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+        listItemsContainerRef: listItemsContainerRef,
+        reducer: reducer,
+    }), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, turnOnKeyboardNavigation = _d.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _d.turnOffKeyboardNavigation, navigationEnabled = _d.navigationEnabled, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var _e = (0, nested_menu_context_1.useNestedMenuContext)(), unregisterMenu = _e.unregisterMenu, registerMenu = _e.registerMenu, getParentMenuInfo = _e.getParentMenuInfo;
+    (0, react_1.useEffect)(function () {
+        if (!listItemsContainerRef)
+            return undefined;
+        var menuRef = listItemsContainerRef;
+        registerMenu === null || registerMenu === void 0 ? void 0 : registerMenu({ menuRef: menuRef, turnOffKeyboardNavigation: turnOffKeyboardNavigation, turnOnKeyboardNavigation: turnOnKeyboardNavigation });
+        return function () {
+            unregisterMenu === null || unregisterMenu === void 0 ? void 0 : unregisterMenu(menuRef);
+            // on unmount start parent menu's navigation
+            var turnOnParentMenuNavigation = ((getParentMenuInfo === null || getParentMenuInfo === void 0 ? void 0 : getParentMenuInfo(listItemsContainerRef)) || {}).turnOnKeyboardNavigation;
+            turnOnParentMenuNavigation === null || turnOnParentMenuNavigation === void 0 ? void 0 : turnOnParentMenuNavigation();
+        };
+    }, [
+        listItemsContainerRef,
+        registerMenu,
+        turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation,
+        unregisterMenu,
+        getParentMenuInfo,
+    ]);
+    var onHighlightedItemChangeRef = (0, useLatest_1.useLatest)(onHighlightedItemChange);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
+    }, [highlightedItem, onHighlightedItemChangeRef]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        // set aria-activedescendant to current focused element whenever highlighted item changes
+        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)) {
+            if (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)
+                (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id);
+        }
+        else
+            (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-activedescendant');
+    }, [navigationEnabled, highlightedItem]);
+    return {
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        turnOffKeyboardNavigation: turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        navigationEnabled: navigationEnabled,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    };
+};
+exports.default = useStatefulMenu;

package/modal/adapter.d.ts

@@ -0,0 +1,6 @@
+import { ROLE } from 'baseui/modal';
+import { StyleUtils } from '../types';
+import { Role, Size } from './types';
+import { ValueOf } from '../utility-types';
+export declare const getWidthFromSize: ({ px2rem }: StyleUtils, size: Size) => string;
+export declare const roleMap: Record<Role, ValueOf<ROLE>>;

package/modal/adapter.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.roleMap = exports.getWidthFromSize = void 0;
+var modal_1 = require("baseui/modal");
+var getWidthFromSize = function (_a, size) {
+    var px2rem = _a.px2rem;
+    switch (size) {
+        case 'sm':
+            return px2rem(520);
+        case 'md':
+            return px2rem(720);
+        case 'lg':
+            return px2rem(1220);
+        default:
+            return 'auto';
+    }
+};
+exports.getWidthFromSize = getWidthFromSize;
+exports.roleMap = {
+    dialog: modal_1.ROLE.dialog,
+    alertdialog: modal_1.ROLE.alertdialog,
+};

package/modal/index.d.ts

@@ -0,0 +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, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
+export { CLOSE_SOURCE } from './types';

package/modal/index.js

@@ -0,0 +1,24 @@
+"use strict";
+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.StyledBackdrop = exports.StyledRoot = exports.ModalBody = 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");
+Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return __importDefault(modal_header_1).default; } });
+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; } });
+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, "StyledBackdrop", { enumerable: true, get: function () { return styled_components_1.StyledBackdrop; } });
+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; } });
+var types_1 = require("./types");
+Object.defineProperty(exports, "CLOSE_SOURCE", { enumerable: true, get: function () { return types_1.CLOSE_SOURCE; } });

package/modal/modal-footer.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ModalFooterProps } from './types';
+declare const ModalFooter: {
+    (props: ModalFooterProps): ReactElement;
+    displayName: string;
+};
+export default ModalFooter;

package/modal/modal-footer.js

@@ -0,0 +1,12 @@
+"use strict";
+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 helpers_1 = require("../helpers");
+var ModalFooter = function (props) {
+    var sharedProps = (0, helpers_1.add$props)({ noBorder: props.noBorder });
+    return (0, jsx_runtime_1.jsx)(styled_components_1.StyledModalFooter, (0, tslib_1.__assign)({}, props, sharedProps), void 0);
+};
+ModalFooter.displayName = 'ModalFooter';
+exports.default = ModalFooter;

package/modal/modal-header.d.ts

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

package/modal/modal-header.js

@@ -0,0 +1,13 @@
+"use strict";
+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 helpers_1 = require("../helpers");
+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);
+};
+ModalHeader.displayName = 'ModalHeader';
+exports.default = ModalHeader;