@sprinklrjs/spaceweb 10.1.0

package/esm/locale/en_US.js

@@ -0,0 +1,68 @@
+export var DEFAULT_LOCALE = {
+    select: {
+        noResultsMsg: 'No Results',
+        selectAllLabel: 'Select All',
+    },
+    asyncSelect: {
+        searchingText: 'Searching',
+        emptyInputMsg: 'Type to Search',
+    },
+    calendar: {
+        timePickerStartLabel: 'Start Time',
+        dateInputStartLabel: 'Start Date',
+        timePickerEndLabel: 'End Time',
+        dateInputEndLabel: 'End Date',
+    },
+    datePicker: {
+        popoverAriaLabel: 'Select a date',
+    },
+    timeRangePicker: {
+        today: 'Today',
+        yesterday: 'Yesterday',
+        lastOneHour: 'Last 1 Hour',
+        lastTwelveHour: 'Last 12 Hours',
+        lastTwentyFourHour: 'Last 24 Hours',
+        thisWeek: 'This Week',
+        lastWeek: 'Last Week',
+        lastSevenDays: 'Last 7 Days',
+        thisMonth: 'This Month',
+        lastMonth: 'Last Month',
+        lastTwentyEightDays: 'Last 28 Days',
+        lastThirtyDays: 'Last 30 Days',
+        lastSixtyDays: 'Last 60 Days',
+        lastNinetyDays: 'Last 90 Days',
+        lastOneTwentyDays: 'Last 120 Days',
+        lastOneEightyDays: 'Last 180 Days',
+        thisYear: 'This Year',
+        lastYear: 'Last Year',
+        lastThreeSixtyFiveDays: 'Last 365 Days',
+        nextSevenDays: 'Next 7 Days',
+        nextFourteenDays: 'Next 14 Days',
+        nextMonth: 'Next Month',
+        customRange: 'Custom Range',
+        headerLabel: 'Date Range',
+        timezoneLabel: 'Timezone',
+        cancelBtnLabel: 'Cancel',
+        saveBtnLabel: 'Save',
+        timeSelectStartLabel: 'Start Time',
+        timeSelectEndLabel: 'End Time',
+        screenReaderMessageInput: 'Press down arrow key to navigate quick select options and tab key to navigate to calendar. Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
+        ariaLabelRange: 'Select a time range.',
+        ariaLabel: 'Select a date.',
+        selectedDate: 'Selected date is ${date}.',
+        selectedDateRange: 'Selected date range is from ${startDate} to ${endDate}.',
+        selectSecondDatePrompt: 'Select the second date.',
+        timezonePlaceholder: 'Search',
+        rangeErrorMsg: 'Please select valid range.',
+        presetMenuAriaLabel: 'Select a duration',
+        popoverAriaLabel: 'Select a date range',
+    },
+    phoneInput: {
+        countrySelectPlaceholder: 'Search',
+        inputAriaLabel: 'Please enter a phone number without the country dial code.',
+        flagContainerAriaLabel: 'Press the enter key to navigate country select dropdown. Press the up or down arrow key to interact with the dropdown and select a country. Press the escape button to close the dropdown.',
+    },
+    menu: {
+        nestedMenuItemAriaLabel: 'You are currently at an item that opens a nested menu. Press right arrow or spacebar to enter that element and left arrow or escape to return.',
+    },
+};

package/esm/locale/index.d.ts

@@ -0,0 +1,3 @@
+export type { Locale } from './types';
+export { DEFAULT_LOCALE } from './en_US';
+export { LocaleProvider, LocaleConsumer, useLocale } from './context';

package/esm/locale/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_LOCALE } from './en_US';
+export { LocaleProvider, LocaleConsumer, useLocale } from './context';

package/esm/locale/types.d.ts

@@ -0,0 +1,21 @@
+import { TimeRangePickerLocale } from '../time-range-picker';
+import { SelectLocale } from '../select';
+import { AsyncSelectLocale } from '../asyncSelect';
+import { PhoneInputLocale } from '../phone-input';
+import { DatePickerLocale } from '../date-picker/locale';
+export declare type Locale = {
+    select: SelectLocale;
+    asyncSelect: AsyncSelectLocale;
+    datePicker: DatePickerLocale;
+    timeRangePicker: TimeRangePickerLocale;
+    phoneInput: PhoneInputLocale;
+    calendar: {
+        timePickerStartLabel: string;
+        dateInputStartLabel: string;
+        timePickerEndLabel: string;
+        dateInputEndLabel: string;
+    };
+    menu: {
+        nestedMenuItemAriaLabel: string;
+    };
+};

package/esm/locale/types.js

@@ -0,0 +1 @@
+export {};

package/esm/menu/MenuContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type MenuContextValue = {
+    highlightedItem: HTMLElement | null;
+    setHighlightedItem: (item: HTMLElement | null) => void;
+    setMenuContainerRef: (ref: HTMLElement | null) => void;
+    nestedMenuOpen: boolean;
+    setNestedMenuOpen: (open: boolean) => void;
+};
+export declare const MenuProvider: import("react").Provider<MenuContextValue>;
+export declare const useMenuContext: () => MenuContextValue;
+export {};

package/esm/menu/MenuContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+var MenuContext = createContext({
+    highlightedItem: null,
+    setHighlightedItem: function () { return null; },
+    setMenuContainerRef: function () { return null; },
+    nestedMenuOpen: false,
+    setNestedMenuOpen: function () { return null; },
+});
+export var MenuProvider = MenuContext.Provider;
+export var useMenuContext = function () { return useContext(MenuContext); };

package/esm/menu/helpers.d.ts

@@ -0,0 +1,12 @@
+import { Reducer } from './types';
+/**
+ * Checks if given item can be highlighted
+ */
+export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
+    firstHighlightableItem: HTMLElement | null;
+    firstSelectedItem: HTMLElement | null;
+};
+declare const getNextHighlightedItem: (event: KeyboardEvent, highlightedItem: HTMLElement | null, parentContainer: HTMLElement) => HTMLElement | null;
+export declare const defaultReducer: Reducer;
+export { getNextHighlightedItem };

package/esm/menu/helpers.js

@@ -0,0 +1,77 @@
+var nextItem = function (highlightedItem, parentContainer) {
+    var _a;
+    if (highlightedItem) {
+        return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.nextElementSibling) !== null && _a !== void 0 ? _a : highlightedItem);
+    }
+    return parentContainer.firstElementChild;
+};
+var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
+/**
+ * Checks if given item can be highlighted
+ */
+export var canHighlightItem = function (item) { return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-disabled')) !== 'true'; };
+/**
+ * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
+ * Get index of next element which is not disabled
+ */
+var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, traversalFunction) {
+    var previousItem = highlightedItem, nextHighlightableItem = traversalFunction(highlightedItem, parentContainer);
+    while (previousItem !== nextHighlightableItem) {
+        if (!canHighlightItem(nextHighlightableItem)) {
+            previousItem = nextHighlightableItem;
+            // Move to the next element.
+            nextHighlightableItem = traversalFunction(previousItem, parentContainer);
+        }
+        else {
+            return nextHighlightableItem;
+        }
+    }
+    return highlightedItem;
+};
+export var getFirstHighlightableElement = function (listItemsContainerRef) {
+    var _a;
+    var childItem = (_a = listItemsContainerRef.firstElementChild) !== null && _a !== void 0 ? _a : null, firstHighlightableItem = null, firstSelectedItem = null;
+    while (childItem) {
+        if (!firstHighlightableItem && canHighlightItem(childItem)) {
+            firstHighlightableItem = childItem;
+        }
+        if (childItem.getAttribute('aria-selected') === 'true') {
+            firstSelectedItem = childItem;
+            break;
+        }
+        childItem = childItem === null || childItem === void 0 ? void 0 : childItem.nextElementSibling;
+    }
+    return { firstHighlightableItem: firstHighlightableItem, firstSelectedItem: firstSelectedItem };
+};
+var getNextHighlightedItem = function (event, highlightedItem, parentContainer) {
+    switch (event.key) {
+        case 'ArrowDown':
+        case 'End':
+            event.preventDefault(); // prevent body scroll
+            return getNextItemIndexToHighlight(highlightedItem, parentContainer, nextItem);
+        case 'ArrowUp':
+        case 'Home':
+            event.preventDefault();
+            return getNextItemIndexToHighlight(highlightedItem, parentContainer, prevItem);
+        case 'Enter': {
+            // IME docs - If an Input Method Editor is processing key input and the event is keydown, return 229. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+            // related PR in baseweb - https://github.com/uber/baseweb/pull/2284
+            if (event.keyCode === 229) {
+                break;
+            }
+            /**
+             * This event is being captured by document body,
+             * we have to manually trigger click event on listItem as listItem is not focused and so onKeyDown event won't be captured by listItem
+             */
+            if (highlightedItem)
+                highlightedItem.click();
+            // prevents default enterKey event. Not required as highlightedItem.click is triggered
+            event.preventDefault();
+            break;
+        }
+        default:
+    }
+    return highlightedItem;
+};
+export var defaultReducer = function (type, state) { return state; };
+export { getNextHighlightedItem };

package/esm/menu/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Menu } from './menu';
+export { default as MenuItem } from './menu-item';
+export { default as NestedMenuProvider } from './nested-menu-context';
+export type { MenuItemProps, ContextValue, MenuProps, MenuRef } from './types';

package/esm/menu/index.js

@@ -0,0 +1,3 @@
+export { default as Menu } from './menu';
+export { default as MenuItem } from './menu-item';
+export { default as NestedMenuProvider } from './nested-menu-context';

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+    getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+    renderAll?: boolean | undefined;
+    overrides?: {
+        ListItem?: import("../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+            $as?: React.ElementType<any> | undefined;
+            className?: import("..").Styles;
+            style?: import("..").Styles;
+        } & {
+            alignItems?: import("../list").AlignItems | undefined;
+            autoFocus?: boolean | undefined;
+            button?: boolean | undefined;
+            children?: React.ReactNode;
+            disabled?: boolean | undefined;
+            endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            highlighted?: boolean | undefined;
+            onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+            overrides?: {
+                ChildContainer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                EndEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                Root?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                StartEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+            } | undefined;
+            selected?: boolean | undefined;
+            startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+        } & Record<string, any>> | undefined;
+        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+            overrides?: ({
+                Body?: import("../overrides").Override<any> | undefined;
+                Arrow?: import("../overrides").Override<any> | undefined;
+                Inner?: import("../overrides").Override<any> | undefined;
+            } & {
+                ArrowTriangle?: import("../overrides").Override<any> | undefined;
+            }) | undefined;
+            children?: React.ReactNode | ((args: {
+                isOpen: boolean;
+            }) => React.ReactNode);
+            targetElement?: HTMLElement | null | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+} & React.RefAttributes<HTMLElement>>>;
+export default _default;

package/esm/menu/menu-item.js

@@ -0,0 +1,80 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as React from 'react';
+import { getComponentTheme } from '../helpers/themeHelpers';
+import useCombinedHandler from '../hooks/useCombinedHandler';
+import useCombinedRefs from '../hooks/useCombinedRef';
+import { useLatest } from '../hooks/useLatest';
+import useUniqueId from '../hooks/useUniqueId';
+import ChevronDown from '../icon/components/chevron-down';
+import ListItem from '../list/list-item';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { Popover } from '../popover';
+import { useLocale } from '../locale';
+import { canHighlightItem } from './helpers';
+import { useMenuContext } from './MenuContext';
+var listItemOverrides = {
+    ListItem: {
+        props: {
+            overrides: {
+                Root: {
+                    style: function (_a, _b) {
+                        var theme = _a.theme;
+                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected;
+                        var hoverBackgroundColor = getComponentTheme(theme, 'list').hoverBackgroundColor;
+                        return {
+                            backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
+                            cursor: $disabled ? 'not-allowed' : 'pointer',
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+var MenuItem = React.forwardRef(function (_a, ref) {
+    var _b;
+    var selected = _a.selected, highlighted = _a.highlighted, overrides = _a.overrides, getChildMenu = _a.getChildMenu, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, renderAll = _a.renderAll, restProps = __rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "renderAll"]);
+    var _c = __read(useState(false), 2), hovered = _c[0], setHovered = _c[1];
+    var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
+    var ownRef = useRef(null);
+    var itemRef = useCombinedRefs(ref, ownRef);
+    var _d = useMenuContext(), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, setMenuContainerRef = _d.setMenuContainerRef, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var locale = useLocale();
+    useEffect(function () {
+        var _a, _b;
+        setMenuContainerRef((_b = (_a = ownRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null);
+    }, [setMenuContainerRef]);
+    var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
+    var mergedOverrides = useMemo(function () { return mergeOverrides(listItemOverrides, overrides); }, [overrides]);
+    var _e = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, ListItem), 2), ListItemOverride = _e[0], listItemProps = _e[1];
+    var _f = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverOverride = _f[0], popoverProps = _f[1];
+    var onMouseOverRef = useLatest(onMouseOver);
+    var handleMouseOver = useCallback(function (e) {
+        var _a;
+        (_a = onMouseOverRef.current) === null || _a === void 0 ? void 0 : _a.call(onMouseOverRef, e);
+        if (canHighlightItem(ownRef.current)) {
+            setHighlightedItem(ownRef.current);
+        }
+    }, [onMouseOverRef, setHighlightedItem]);
+    var resetMenu = useCallback(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
+    var closeNestedMenu = useCallback(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
+    var id = useUniqueId();
+    var listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, endEnhancer: ChildMenu && _jsx(ChevronDown, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
+    var handleMouseEnter = useCombinedHandler(function () { return setHovered(true); }, onMouseEnter);
+    var handleMouseLeave = useCombinedHandler(function () { return setHovered(false); }, onMouseLeave);
+    // when we have opened child menu using hover, then after switching to keyboard hovered state remains true
+    // and opens child menu without pressing left arrow key
+    useEffect(function () {
+        if (!isItemHighlighted) {
+            setHovered(false);
+        }
+    }, [setHovered, isItemHighlighted]);
+    if (!ChildMenu) {
+        return listItem;
+    }
+    return (_jsx(PopoverOverride, __assign({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", mountNode: (_b = ownRef.current) === null || _b === void 0 ? void 0 : _b.parentElement, renderAll: renderAll, onClickOutside: resetMenu, onEsc: closeNestedMenu }, popoverProps, { children: listItem }), void 0));
+});
+MenuItem.displayName = 'MenuItem';
+export default React.memo(MenuItem);

package/esm/menu/menu.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { MenuRef } from './types';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("../list").ListProps, "overrides"> & {
+    disableNavigationOnMount?: boolean | undefined;
+    focusWhenNavigationEnabled?: boolean | undefined;
+    overrides?: {
+        List?: import("../overrides").Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+            $as?: import("react").ElementType<any> | undefined;
+            className?: import("..").Styles;
+            style?: import("..").Styles;
+        } & {
+            children?: import("react").ReactNode;
+            overrides?: {
+                Root?: import("../overrides").Override<Record<string, any>> | undefined;
+            } | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+    onHighlightedItemChange?: ((item?: HTMLElement | null | undefined) => void) | undefined;
+    disableAutoHighlight?: boolean | undefined;
+    resetMenuHighlightOnMouseLeave?: boolean | undefined;
+    resetMenuOnMouseLeave?: boolean | undefined;
+    reducer?: import("./types").Reducer | undefined;
+    captureScroll?: boolean | undefined;
+} & import("react").RefAttributes<MenuRef>>>;
+export default _default;

package/esm/menu/menu.js

@@ -0,0 +1,56 @@
+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 { useOverrides } from '../overrides';
+import useScrollCapture from '../hooks/useScrollCapture';
+import useCombinedRefs from '../hooks/useCombinedRef';
+import { defaultReducer } from './helpers';
+import { MenuProvider } from './MenuContext';
+import useItemContainerEventHandlers from './useItemContainerEventHandlers';
+import useStatefulMenu from './useStatefulMenu';
+import { useNestedMenuContext } from './nested-menu-context';
+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, 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 ? defaultReducer : _d, captureScroll = _a.captureScroll, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
+    var _e = __read(useState(null), 2), listRef = _e[0], setListRef = _e[1];
+    var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _f[0], listProps = _f[1];
+    var _g = __read(useState(null), 2), listItemsContainer = _g[0], setListItemsContainer = _g[1];
+    var _h = useStatefulMenu({
+        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 = useScrollCapture({ enabled: captureScroll });
+    var setListCombinedRef = useCombinedRefs(setListRef, setScrollTarget);
+    var menuContextValue = useMemo(function () { return ({
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        setMenuContainerRef: setListItemsContainer,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, setNestedMenuOpen]);
+    useItemContainerEventHandlers({
+        listItemsContainer: listItemsContainer,
+        resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
+        setHighlightedItem: setHighlightedItem,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+    });
+    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 = useNestedMenuContext();
+    var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
+    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu" }, restProps, listProps, { children: children }), void 0) }), void 0));
+});
+Menu.displayName = 'Menu';
+export default memo(Menu);

package/esm/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/esm/menu/nested-menu-context.js

@@ -0,0 +1,68 @@
+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({});
+NestedMenuContext.displayName = 'NestedMenuContext';
+export var useNestedMenuContext = function () { return useContext(NestedMenuContext); };
+var NestedMenuProvider = function (_a) {
+    var children = _a.children;
+    var _b = __read(useState([]), 2), menus = _b[0], setMenus = _b[1];
+    // storing menus in ref, to remove dependencies for getMenuInfo
+    var menusRef = useRef(menus);
+    menusRef.current = menus;
+    var registerMenu = useCallback(function (menuInfo) {
+        setMenus(function (_menus) { return _menus.concat(menuInfo); });
+    }, []);
+    var unregisterMenu = 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 = 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 = 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 = 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 = useCallback(function () {
+        var _menus = menusRef.current;
+        return _menus[0];
+    }, []);
+    var contextValue = useMemo(function () { return ({
+        registerMenu: registerMenu,
+        unregisterMenu: unregisterMenu,
+        getMenuInfo: getMenuInfo,
+        getChildMenuInfo: getChildMenuInfo,
+        getParentMenuInfo: getParentMenuInfo,
+        getRootMenuInfo: getRootMenuInfo,
+    }); }, [registerMenu, unregisterMenu, getMenuInfo, getChildMenuInfo, getParentMenuInfo, getRootMenuInfo]);
+    return _jsx(NestedMenuContext.Provider, __assign({ value: contextValue }, { children: children }), void 0);
+};
+NestedMenuProvider.displayName = 'NestedMenuProvider';
+export default NestedMenuProvider;

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

@@ -0,0 +1 @@
+export {};

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