@sprinklrjs/spaceweb 10.1.0

package/loader/loader.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var typography_1 = require("../helpers/typography");
+var overrides_1 = require("../overrides");
+var typography_2 = require("../typography");
+var styled_component_1 = require("./styled-component");
+exports.DEFAULT_SIZE = 16;
+exports.DEFAULT_DELAY = 0;
+var Loader = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.delay, delay = _b === void 0 ? exports.DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? exports.DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
+    // should be visible from start if delay is 0
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _f[0], rootProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, typography_2.Typography), 2), Text = _g[0], textProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? styled_component_1.StyledBeatLoader : styled_component_1.StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, styled_component_1.StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    (0, react_1.useEffect)(function () {
+        var delayTimer;
+        if (delay) {
+            delayTimer = setTimeout(function () { return updateVisibleState(true); }, delay);
+        }
+        return function () { return clearTimeout(delayTimer); };
+    }, [delay]);
+    var sharedProps = {
+        $hasDelay: !!delay,
+        $hasLoadingContent: !!loadingContent,
+        $variant: variant,
+        $size: size,
+    };
+    var content = (0, typography_1.isTypographyNode)(loadingContent)
+        ? loadingContent
+        : loadingContent && ((0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
+    // todo: aria-label localization
+    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+});
+Loader.displayName = 'Loader';
+exports.default = Loader;

package/loader/package.json

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

package/loader/styled-component.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledClipLoader: import("../style/styled").StyledComponent;
+export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
+export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;

package/loader/styled-component.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var style_1 = require("../style");
+var clipAnimationStyles = function () { return ({
+    animationDuration: '0.75s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+    animationName: {
+        '0%': {
+            transform: 'rotate(0deg) scale(1)',
+        },
+        '50%': {
+            transform: 'rotate(180deg) scale(0.8)',
+        },
+        '100%': {
+            transform: 'rotate(360deg) scale(1)',
+        },
+    },
+}); };
+exports.StyledRoot = (0, style_1.styled)('div', 'inline-flex flex-col items-center spr-text-02');
+exports.StyledClipLoader = (0, style_1.styled)('div', 'border-solid rounded-full box-border', (0, longHandHelpers_1.borderWidth)('3px'), clipAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem, theme = utils.theme;
+    var $size = props.$size;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ height: px2rem($size), width: px2rem($size) }, (0, longHandHelpers_1.borderColor)(theme.spr.focus01)), { borderBottomColor: 'transparent' });
+});
+var ballAnimationStyles = function (_, _a) {
+    var $index = _a.$index;
+    return ({
+        animationDuration: '0.7s',
+        animationDelay: $index % 2 ? '0s' : '0.35s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationFillMode: 'both',
+        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+        animationName: {
+            '50%': {
+                transform: 'scale(0.75)',
+                opacity: 0.2,
+            },
+            '100%': {
+                transform: 'scale(1)',
+                opacity: 1,
+            },
+        },
+    });
+};
+exports.StyledBeatLoader = (0, style_1.styled)('div');
+exports.StyledBeatLoaderBall = (0, style_1.styled)('div', 'spr-tooltip-01 rounded-full inline-block', ballAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    return {
+        height: px2rem($size),
+        width: px2rem($size),
+        marginLeft: px2rem(2),
+        marginRight: px2rem(2),
+    };
+});

package/loader/types.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Override } from '../overrides';
+import { ClassName } from '../types';
+export declare type Variant = 'clip' | 'beat';
+export declare type SharedProps = {
+    $variant: Variant;
+    $hasLoadingContent: boolean;
+    $hasDelay: boolean;
+    $size?: number;
+};
+export declare type LoaderProps = {
+    className?: ClassName;
+    variant?: Variant;
+    size?: number;
+    delay?: number;
+    loadingContent?: React.ReactNode;
+    overrides?: {
+        Root?: Override<SharedProps & Record<string, any>>;
+        Text?: Override<SharedProps & Record<string, any>>;
+        Loader?: Override<SharedProps & Record<string, any>>;
+        BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
+    };
+};

package/loader/types.js

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

package/locale/context.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Locale } from './types';
+declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};
+export declare const localeContext: React.Context<Locale>;
+export declare const LocaleConsumer: React.Consumer<Locale>;
+export declare const useLocale: () => Locale;
+export declare const LocaleProvider: {
+    (props: {
+        children?: React.ReactNode;
+        locale?: DeepPartial<Locale>;
+    }): JSX.Element;
+    displayName: string;
+};
+export {};

package/locale/context.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocaleProvider = exports.useLocale = exports.LocaleConsumer = exports.localeContext = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
+var en_US_1 = require("./en_US");
+// TODO: will be changed to `undefined` when MeetWrapper is implemented.
+exports.localeContext = (0, react_1.createContext)(en_US_1.DEFAULT_LOCALE);
+exports.localeContext.displayName = 'LocaleContext';
+exports.LocaleConsumer = exports.localeContext.Consumer;
+var useLocale = function () { return (0, react_1.useContext)(exports.localeContext); };
+exports.useLocale = useLocale;
+var LocaleProvider = function (props) {
+    var Provider = exports.localeContext.Provider;
+    var outerLocale = (0, exports.useLocale)();
+    var value = (0, react_1.useMemo)(function () { return (0, merge_1.default)({}, en_US_1.DEFAULT_LOCALE, outerLocale, props.locale); }, [props.locale, outerLocale]);
+    return (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: props.children }), void 0);
+};
+exports.LocaleProvider = LocaleProvider;
+exports.LocaleProvider.displayName = 'LocaleProvider';

package/locale/en_US.d.ts

@@ -0,0 +1,2 @@
+import { Locale } from './types';
+export declare const DEFAULT_LOCALE: Locale;

package/locale/en_US.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LOCALE = void 0;
+exports.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/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/locale/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocale = exports.LocaleConsumer = exports.LocaleProvider = exports.DEFAULT_LOCALE = void 0;
+var en_US_1 = require("./en_US");
+Object.defineProperty(exports, "DEFAULT_LOCALE", { enumerable: true, get: function () { return en_US_1.DEFAULT_LOCALE; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "LocaleProvider", { enumerable: true, get: function () { return context_1.LocaleProvider; } });
+Object.defineProperty(exports, "LocaleConsumer", { enumerable: true, get: function () { return context_1.LocaleConsumer; } });
+Object.defineProperty(exports, "useLocale", { enumerable: true, get: function () { return context_1.useLocale; } });

package/locale/package.json

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

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuContext = exports.MenuProvider = void 0;
+var react_1 = require("react");
+var MenuContext = (0, react_1.createContext)({
+    highlightedItem: null,
+    setHighlightedItem: function () { return null; },
+    setMenuContainerRef: function () { return null; },
+    nestedMenuOpen: false,
+    setNestedMenuOpen: function () { return null; },
+});
+exports.MenuProvider = MenuContext.Provider;
+var useMenuContext = function () { return (0, react_1.useContext)(MenuContext); };
+exports.useMenuContext = useMenuContext;

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.canHighlightItem = void 0;
+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
+ */
+var canHighlightItem = function (item) { return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-disabled')) !== 'true'; };
+exports.canHighlightItem = canHighlightItem;
+/**
+ * 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 (!(0, exports.canHighlightItem)(nextHighlightableItem)) {
+            previousItem = nextHighlightableItem;
+            // Move to the next element.
+            nextHighlightableItem = traversalFunction(previousItem, parentContainer);
+        }
+        else {
+            return nextHighlightableItem;
+        }
+    }
+    return highlightedItem;
+};
+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 && (0, exports.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 };
+};
+exports.getFirstHighlightableElement = getFirstHighlightableElement;
+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;
+};
+exports.getNextHighlightedItem = getNextHighlightedItem;
+var defaultReducer = function (type, state) { return state; };
+exports.defaultReducer = defaultReducer;

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedMenuProvider = exports.MenuItem = exports.Menu = void 0;
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(menu_1).default; } });
+var menu_item_1 = require("./menu-item");
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return __importDefault(menu_item_1).default; } });
+var nested_menu_context_1 = require("./nested-menu-context");
+Object.defineProperty(exports, "NestedMenuProvider", { enumerable: true, get: function () { return __importDefault(nested_menu_context_1).default; } });

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

@@ -0,0 +1,82 @@
+"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 React = (0, tslib_1.__importStar)(require("react"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedHandler"));
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var useLatest_1 = require("../hooks/useLatest");
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
+var list_item_1 = (0, tslib_1.__importDefault)(require("../list/list-item"));
+var overrides_1 = require("../overrides");
+var popover_1 = require("../popover");
+var locale_1 = require("../locale");
+var helpers_1 = require("./helpers");
+var MenuContext_1 = require("./MenuContext");
+var 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 = (0, themeHelpers_1.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 = (0, tslib_1.__rest)(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "renderAll"]);
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hovered = _c[0], setHovered = _c[1];
+    var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
+    var ownRef = (0, react_1.useRef)(null);
+    var itemRef = (0, useCombinedRef_1.default)(ref, ownRef);
+    var _d = (0, MenuContext_1.useMenuContext)(), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, setMenuContainerRef = _d.setMenuContainerRef, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var locale = (0, locale_1.useLocale)();
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        setMenuContainerRef((_b = (_a = ownRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null);
+    }, [setMenuContainerRef]);
+    var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(listItemOverrides, overrides); }, [overrides]);
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _e[0], listItemProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.Popover), 2), PopoverOverride = _f[0], popoverProps = _f[1];
+    var onMouseOverRef = (0, useLatest_1.useLatest)(onMouseOver);
+    var handleMouseOver = (0, react_1.useCallback)(function (e) {
+        var _a;
+        (_a = onMouseOverRef.current) === null || _a === void 0 ? void 0 : _a.call(onMouseOverRef, e);
+        if ((0, helpers_1.canHighlightItem)(ownRef.current)) {
+            setHighlightedItem(ownRef.current);
+        }
+    }, [onMouseOverRef, setHighlightedItem]);
+    var resetMenu = (0, react_1.useCallback)(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
+    var closeNestedMenu = (0, react_1.useCallback)(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
+    var id = (0, useUniqueId_1.default)();
+    var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, (0, tslib_1.__assign)({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, endEnhancer: ChildMenu && (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
+    var handleMouseEnter = (0, useCombinedHandler_1.default)(function () { return setHovered(true); }, onMouseEnter);
+    var handleMouseLeave = (0, useCombinedHandler_1.default)(function () { return setHovered(false); }, onMouseLeave);
+    // when we have opened child menu using hover, then after switching to keyboard hovered state remains true
+    // and opens child menu without pressing left arrow key
+    (0, react_1.useEffect)(function () {
+        if (!isItemHighlighted) {
+            setHovered(false);
+        }
+    }, [setHovered, isItemHighlighted]);
+    if (!ChildMenu) {
+        return listItem;
+    }
+    return ((0, jsx_runtime_1.jsx)(PopoverOverride, (0, tslib_1.__assign)({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", 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';
+exports.default = React.memo(MenuItem);

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