@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/locale/context.js

@@ -4,19 +4,19 @@ exports.LocaleProvider = exports.useLocale = exports.LocaleConsumer = exports.lo
 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 createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+var deepMerge_1 = tslib_1.__importDefault(require("../helpers/deepMerge"));
 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.localeContext = (0, createSingletonContext_1.createSingletonContext)(en_US_1.DEFAULT_LOCALE, '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);
+    var value = (0, react_1.useMemo)(function () { return (0, deepMerge_1.default)({}, en_US_1.DEFAULT_LOCALE, outerLocale, props.locale); }, [props.locale, outerLocale]);
+    return (0, jsx_runtime_1.jsx)(Provider, tslib_1.__assign({ value: value }, { children: props.children }));
 };
 exports.LocaleProvider = LocaleProvider;
 exports.LocaleProvider.displayName = 'LocaleProvider';

package/locale/en_US.js

@@ -7,32 +7,61 @@ exports.DEFAULT_LOCALE = {
         colorLibraryLabel: 'Color Library',
         solidColorLabel: 'Solid Color',
         gradientColorLabel: 'Gradient Color',
+        gradientDirection: 'Direction',
+        gradientDegree: 'Degree',
+        gradientEndPoints: 'End Points',
         selectColorLabel: 'Select Color',
+        sprinklrPresets: 'Sprinklr Presets',
+        selectFirstColorAriaLabel: 'Select first color',
+        selectSecondColorAriaLabel: 'Select second color',
+    },
+    breadCrumb: {
+        collapsedItemsTooltip: 'Show hidden breadcrumb items',
     },
     select: {
         noResultsMsg: 'No Results',
         selectAllLabel: 'Select All',
         hideButtonAriaLabel: 'Hide',
+        create: 'Create',
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
-        selectedValuesPrefix: 'Selected ${values}.',
+        selectedValuesPrefix: 'Selected ${values}',
+        item: 'item',
+        items: 'items',
+        multiValueNavigationDescription: 'Use Left and Right arrow keys to navigate between selected values. Enter BackSpace to remove currently focused value',
         collapsibleMenuDescription: 'You are currently using a collapsible grouped menu. To move to next group press Shift and down arrow. To move to previous group press Shift and up arrow.',
+        groupExpandedSuffix: 'group expanded',
     },
     asyncSelect: {
         searchingText: 'Searching',
         emptyInputMsg: 'Type to Search',
+        notSufficientCharacterMsg: 'Type at least ${minimumInput} characters to search',
     },
     calendar: {
         timePickerStartLabel: 'Start Time',
         dateInputStartLabel: 'Start Date',
         timePickerEndLabel: 'End Time',
         dateInputEndLabel: 'End Date',
+        dateInputLabel: 'Date',
+        timePickerLabel: 'Time',
         calendarButtonAriaLabel: 'Open Calendar',
     },
     datePicker: {
+        ariaLabelCalendar: 'Calendar.',
         popoverAriaLabel: 'Select a date',
+        nextMonth: 'Next Month',
+        previousMonth: 'Previous Month',
         timezonePickerLabel: 'Timezone',
         timezonePickerPlaceholder: 'Select a timezone',
+        ariaRoleDescCalMonth: 'Calendar Month',
+        selectedStartDateLabel: 'Selected start date',
+        selectedEndDateLabel: 'Selected end date',
+        dateNotAvailableLabel: 'Not available',
+        dateAvailableLabel: "It's available",
+        selectedLabel: 'Selected',
+        chooseLabel: 'Choose',
+        openDatePicker: 'Open Date Picker',
+        closeDatePicker: 'Close Date Picker',
     },
     timeRangePicker: {
         today: 'Today',
@@ -61,6 +90,7 @@ exports.DEFAULT_LOCALE = {
         headerLabel: 'Date Range',
         timezoneLabel: 'Timezone',
         cancelBtnLabel: 'Cancel',
+        clearBtnLabel: 'Clear',
         saveBtnLabel: 'Save',
         timeSelectStartLabel: 'Start Time',
         timeSelectEndLabel: 'End Time',
@@ -73,10 +103,15 @@ exports.DEFAULT_LOCALE = {
         timezonePlaceholder: 'Search',
         rangeErrorMsg: 'Please select valid range.',
         presetMenuAriaLabel: 'Select a duration',
+        presetSearchPlaceholder: 'Search presets',
+        presetSearchAriaLabel: 'Filter time range presets',
+        presetSearchNoResults: 'No matching presets',
         popoverAriaLabel: 'Select a date range',
         maxDateErrorMessage: 'Please select a date earlier than ${maxDate}',
         minDateErrorMessage: 'Please select a date later than ${minDate}',
         minMaxDateErrorMessage: 'Please select a date range between ${minDate} & ${maxDate}',
+        timePickerAriaLabel12Hour: 'Select a time, 12-hour format.',
+        timePickerAriaLabel24Hour: 'Select a time, 24-hour format.',
     },
     phoneInput: {
         countrySelectPlaceholder: 'Search',
@@ -84,13 +119,19 @@ exports.DEFAULT_LOCALE = {
         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.',
+        nestedMenuItemAriaDescription: '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.',
+        subMenuBackButtonAriaLabel: 'Go back to previous menu',
     },
     banner: {
         toggleButtonShowLabel: 'Show',
         toggleButtonHideLabel: 'Hide',
         toggleButtonShowAriaLabel: 'Show Alerts',
         toggleButtonHideAriaLabel: 'Hide Alerts',
+        closeIconTooltipContent: 'Close Banner',
+        errorTitle: 'Error',
+        warningTitle: 'Warning',
+        successTitle: 'Success',
+        infoTitle: 'Info',
     },
     input: {
         clearAriaLabel: 'Clear Value',
@@ -107,5 +148,12 @@ exports.DEFAULT_LOCALE = {
     search: {
         searchPlaceholder: 'Search',
     },
+    accordion: {
+        collapse: 'Collapse',
+        expand: 'Expand',
+    },
+    loader: {
+        loaderAriaLabel: 'Loading',
+    },
     langCode: 'en-US',
 };

package/locale/types.d.ts

@@ -5,10 +5,13 @@ import type { PhoneInputLocale } from '../phone-input/locale';
 import type { DatePickerLocale } from '../date-picker/locale';
 import type { BannerLocale } from '../banner/locale';
 import type { ColorPickerLocale } from '../color-picker/locale';
-export declare type Locale = {
+export type Locale = {
     select: SelectLocale;
     colorPicker: ColorPickerLocale;
     asyncSelect: AsyncSelectLocale;
+    breadCrumb: {
+        collapsedItemsTooltip: string;
+    };
     datePicker: DatePickerLocale;
     timeRangePicker: TimeRangePickerLocale;
     phoneInput: PhoneInputLocale;
@@ -17,10 +20,13 @@ export declare type Locale = {
         dateInputStartLabel: string;
         timePickerEndLabel: string;
         dateInputEndLabel: string;
+        dateInputLabel: string;
+        timePickerLabel: string;
         calendarButtonAriaLabel: string;
     };
     menu: {
-        nestedMenuItemAriaLabel: string;
+        nestedMenuItemAriaDescription: string;
+        subMenuBackButtonAriaLabel: string;
     };
     banner: BannerLocale;
     input: {
@@ -38,5 +44,12 @@ export declare type Locale = {
     search: {
         searchPlaceholder: string;
     };
+    accordion: {
+        collapse: string;
+        expand: string;
+    };
+    loader: {
+        loaderAriaLabel: string;
+    };
     langCode: string;
 };

package/menu/ActionsIconButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type IconButtonProps } from '../button';
+export type ActionsIconButtonProps = IconButtonProps & {
+    /** When true, the action stays visible even when the row is not hovered or keyboard-highlighted. */
+    alwaysVisible?: boolean;
+};
+declare const ActionsIconButton: import("react").ForwardRefExoticComponent<ActionsIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ActionsIconButton;

package/menu/ActionsIconButton.js

@@ -0,0 +1,10 @@
+"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 button_1 = require("../button");
+var ActionsIconButton = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__assign({ ref: ref, tabIndex: -1, size: "small" }, props))); });
+ActionsIconButton.displayName = 'ActionsIconButton';
+ActionsIconButton.__standard = 'Component';
+exports.default = ActionsIconButton;

package/menu/MenuContext.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-declare type MenuContextValue = {
+import type { MenuItemActions } from './types';
+type MenuContextValue = {
+    getActionsElement?: MenuItemActions;
     highlightedItem: HTMLElement | null;
     setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     setMenuContainerRef: (ref: HTMLElement | null) => void;

package/menu/MenuContext.js

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuContext = exports.MenuProvider = void 0;
 var react_1 = require("react");
-var MenuContext = (0, react_1.createContext)({
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+var MenuContext = (0, createSingletonContext_1.createSingletonContext)({
     highlightedItem: null,
     setHighlightedItem: function () { return null; },
     setMenuContainerRef: function () { return null; },
     nestedMenuOpen: false,
     listItemFocusVisible: false,
     setNestedMenuOpen: function () { return null; },
-});
+}, 'MenuContext');
 exports.MenuProvider = MenuContext.Provider;
 var useMenuContext = function () { return (0, react_1.useContext)(MenuContext); };
 exports.useMenuContext = useMenuContext;

package/menu/StatefulSubMenu.d.ts

@@ -0,0 +1,111 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import type { Override } from '../overrides';
+import type { MenuItemProps, MenuProps, MenuRef, SubMenuItem } from './types';
+export type StatefulSubMenuProps = Omit<MenuProps, 'overrides'> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect?: (item: SubMenuItem, event?: MouseEvent) => void;
+    overrides?: {
+        Menu?: Override<MenuProps & Record<string, any>>;
+        MenuItem?: Override<MenuItemProps & Record<string, any>>;
+    };
+    itemRenderer?: (item: SubMenuItem, onClick: NonNullable<StatefulSubMenuProps['onItemSelect']>) => ReactNode;
+    emptyStateRenderer?: (currentHeaderItem?: SubMenuItem) => ReactNode;
+    valueKey?: string;
+};
+declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps, "overrides"> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect?: ((item: SubMenuItem, event?: MouseEvent) => void) | undefined;
+    overrides?: {
+        Menu?: Override<Omit<import("../list").ListProps, "overrides"> & {
+            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+            disableNavigationOnMount?: boolean | undefined;
+            focusWhenNavigationEnabled?: boolean | undefined;
+            keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
+            overrides?: {
+                List?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    children?: ReactNode;
+                    virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
+                    overrides?: {
+                        Root?: Override<Record<string, any>> | undefined;
+                    } | undefined;
+                    scrollElement?: HTMLElement | null | undefined;
+                    overscanCount?: number | undefined;
+                    estimateItemSize?: number | undefined;
+                    autoScrollToSelectedItem?: boolean | undefined;
+                    $showFocusOutline?: boolean | 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;
+            selectOnTab?: boolean | undefined;
+            drillInFocusVisibleRef?: import("react").MutableRefObject<boolean | null> | undefined;
+        } & Record<string, any>> | undefined;
+        MenuItem?: Override<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            $item?: Record<string, any> | undefined;
+            getChildMenu?: (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) | undefined;
+            onMouseEnter?: (() => void) | undefined;
+            onMouseLeave?: (() => void) | undefined;
+            renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
+            overrides?: {
+                ListItem?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    alignItems?: import("../list").AlignItems | undefined;
+                    autoFocus?: boolean | undefined;
+                    button?: boolean | undefined;
+                    children?: ReactNode;
+                    disabled?: boolean | undefined;
+                    endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    highlighted?: boolean | undefined;
+                    onClick?: ((event: import("react").KeyboardEvent<Element> | MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+                    overrides?: {
+                        ChildContainer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        EndEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        Root?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StartEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                    } | undefined;
+                    selected?: boolean | undefined;
+                    startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                } & Record<string, any>> | undefined;
+                Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
+                    overrides?: ({
+                        Body?: Override<any> | undefined;
+                        Arrow?: Override<any> | undefined;
+                        Inner?: Override<any> | undefined;
+                    } & {
+                        LayersManager?: Override<import("../baseui/layer").LayersManagerProps> | undefined;
+                        ArrowTriangle?: Override<any> | undefined;
+                    }) | undefined;
+                    children?: ReactNode | ((args: {
+                        isOpen: boolean;
+                    }) => ReactNode);
+                    targetElement?: HTMLElement | null | undefined;
+                    triggerType?: import("../popover").TriggerType | undefined;
+                    placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+                    innerRef?: import("react").Ref<HTMLElement> | undefined;
+                    viewportAsBoundary?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+    itemRenderer?: ((item: SubMenuItem, onClick: NonNullable<StatefulSubMenuProps['onItemSelect']>) => ReactNode) | undefined;
+    emptyStateRenderer?: ((currentHeaderItem?: SubMenuItem) => ReactNode) | undefined;
+    valueKey?: string | undefined;
+} & import("react").RefAttributes<MenuRef>>;
+export { StatefulSubMenu };

package/menu/StatefulSubMenu.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulSubMenu = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+//lib
+var react_1 = require("react");
+//component
+var SubMenu_1 = require("./SubMenu");
+// hooks
+var useStatefulSubmenu_1 = tslib_1.__importDefault(require("./useStatefulSubmenu"));
+var StatefulSubMenu = (0, react_1.forwardRef)(function (props, ref) {
+    var subMenuProps = (0, useStatefulSubmenu_1.default)(props).subMenuProps;
+    return (0, jsx_runtime_1.jsx)(SubMenu_1.SubMenu, tslib_1.__assign({}, subMenuProps, { ref: ref }));
+});
+exports.StatefulSubMenu = StatefulSubMenu;
+StatefulSubMenu.displayName = 'StatefulSubMenu';

package/menu/SubMenu.d.ts

@@ -0,0 +1,113 @@
+import type { MouseEvent, ReactNode } from 'react';
+import { type Override } from '../overrides';
+import type { MenuItemProps, MenuProps, MenuRef, SubMenuItem } from './types';
+export type SubMenuProps = Omit<MenuProps, 'overrides'> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect: (item: SubMenuItem, event?: MouseEvent) => void;
+    overrides?: {
+        Menu?: Override<MenuProps & Record<string, any>>;
+        MenuItem?: Override<MenuItemProps & Record<string, any>>;
+    };
+    currentHeaderItem?: SubMenuItem;
+    onHeaderItemClick: () => void;
+    itemRenderer?: (item: SubMenuItem, onClick: NonNullable<SubMenuProps['onItemSelect']>) => ReactNode;
+    emptyStateRenderer?: (currentHeaderItem?: SubMenuItem) => ReactNode;
+};
+declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps, "overrides"> & {
+    items: Array<SubMenuItem>;
+    getItemLabel: (item: SubMenuItem) => ReactNode;
+    onItemSelect: (item: SubMenuItem, event?: MouseEvent) => void;
+    overrides?: {
+        Menu?: Override<Omit<import("../list").ListProps, "overrides"> & {
+            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+            disableNavigationOnMount?: boolean | undefined;
+            focusWhenNavigationEnabled?: boolean | undefined;
+            keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
+            overrides?: {
+                List?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    children?: ReactNode;
+                    virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
+                    overrides?: {
+                        Root?: Override<Record<string, any>> | undefined;
+                    } | undefined;
+                    scrollElement?: HTMLElement | null | undefined;
+                    overscanCount?: number | undefined;
+                    estimateItemSize?: number | undefined;
+                    autoScrollToSelectedItem?: boolean | undefined;
+                    $showFocusOutline?: boolean | 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;
+            selectOnTab?: boolean | undefined;
+            drillInFocusVisibleRef?: import("react").MutableRefObject<boolean | null> | undefined;
+        } & Record<string, any>> | undefined;
+        MenuItem?: Override<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            $item?: Record<string, any> | undefined;
+            getChildMenu?: (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) | undefined;
+            onMouseEnter?: (() => void) | undefined;
+            onMouseLeave?: (() => void) | undefined;
+            renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
+            overrides?: {
+                ListItem?: Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: import("..").ClassName;
+                    style?: import("..").Styles;
+                } & {
+                    alignItems?: import("../list").AlignItems | undefined;
+                    autoFocus?: boolean | undefined;
+                    button?: boolean | undefined;
+                    children?: ReactNode;
+                    disabled?: boolean | undefined;
+                    endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    highlighted?: boolean | undefined;
+                    onClick?: ((event: import("react").KeyboardEvent<Element> | MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+                    overrides?: {
+                        ChildContainer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        EndEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        Root?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StartEnhancer?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                    } | undefined;
+                    selected?: boolean | undefined;
+                    startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                } & Record<string, any>> | undefined;
+                Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
+                    overrides?: ({
+                        Body?: Override<any> | undefined;
+                        Arrow?: Override<any> | undefined;
+                        Inner?: Override<any> | undefined;
+                    } & {
+                        LayersManager?: Override<import("../baseui/layer").LayersManagerProps> | undefined;
+                        ArrowTriangle?: Override<any> | undefined;
+                    }) | undefined;
+                    children?: ReactNode | ((args: {
+                        isOpen: boolean;
+                    }) => ReactNode);
+                    targetElement?: HTMLElement | null | undefined;
+                    triggerType?: import("../popover").TriggerType | undefined;
+                    placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+                    innerRef?: import("react").Ref<HTMLElement> | undefined;
+                    viewportAsBoundary?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+    currentHeaderItem?: SubMenuItem | undefined;
+    onHeaderItemClick: () => void;
+    itemRenderer?: ((item: SubMenuItem, onClick: NonNullable<SubMenuProps['onItemSelect']>) => ReactNode) | undefined;
+    emptyStateRenderer?: ((currentHeaderItem?: SubMenuItem) => ReactNode) | undefined;
+} & import("react").RefAttributes<MenuRef>>;
+export { SubMenu };

package/menu/SubMenu.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenu = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
+//components
+var menu_1 = tslib_1.__importDefault(require("./menu"));
+var menu_item_1 = tslib_1.__importDefault(require("./menu-item"));
+var chevron_right_1 = tslib_1.__importDefault(require("../icon/components/chevron-right"));
+var chevron_left_1 = tslib_1.__importDefault(require("../icon/components/chevron-left"));
+var box_1 = require("../box");
+//helpers
+var overrides_1 = require("../overrides");
+var helpers_1 = require("./helpers");
+//hooks
+var useStickyElement_1 = tslib_1.__importDefault(require("../hooks/useStickyElement"));
+var locale_1 = require("../locale");
+var SubMenu = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b;
+    var _c;
+    var items = _a.items, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, itemRenderer = _a.itemRenderer, emptyStateRenderer = _a.emptyStateRenderer, overrides = _a.overrides, currentHeaderItem = _a.currentHeaderItem, onHeaderItemClick = _a.onHeaderItemClick, props = tslib_1.__rest(_a, ["items", "getItemLabel", "onItemSelect", "itemRenderer", "emptyStateRenderer", "overrides", "currentHeaderItem", "onHeaderItemClick"]);
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, menu_1.default), 2), MenuOverriden = _d[0], menuProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_item_1.default), 2), MenuItemOverriden = _e[0], menuItemProps = _e[1];
+    var HeaderMenuItem = MenuItemOverriden;
+    var locale = (0, locale_1.useLocale)();
+    var _f = (0, useStickyElement_1.default)(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var defaultItemRenderer = function (item, onClick) {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(MenuItemOverriden, tslib_1.__assign({}, (item.startEnhancer ? { startEnhancer: item.startEnhancer } : {}), ((((_a = item.nestedItems) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ? { endEnhancer: (0, jsx_runtime_1.jsx)(chevron_right_1.default, {}) } : {}), menuItemProps, { "$item": item, onClick: function (event) {
+                var _a, _b;
+                onClick(item, event);
+                (_b = (_a = menuItemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            } }, { children: getItemLabel(item) })));
+    };
+    var itemsToRender = items.length
+        ? (0, flatten_1.default)(items.map(function (item) { var _a; return (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(item, onItemSelect)) !== null && _a !== void 0 ? _a : defaultItemRenderer(item, onItemSelect); }))
+        : (_c = emptyStateRenderer === null || emptyStateRenderer === void 0 ? void 0 : emptyStateRenderer(currentHeaderItem)) !== null && _c !== void 0 ? _c : null;
+    var shouldPinHeader = !!(props.virtual && currentHeaderItem !== undefined);
+    return ((0, jsx_runtime_1.jsxs)(MenuOverriden, tslib_1.__assign({ "aria-label": "Menu" }, props, menuProps, { keepFirstItemMounted: shouldPinHeader, ref: ref }, { children: [currentHeaderItem && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { ref: setStickySentinelRef }), (0, jsx_runtime_1.jsx)(HeaderMenuItem, tslib_1.__assign({ startEnhancer: (0, jsx_runtime_1.jsx)(chevron_left_1.default, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[helpers_1.SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
+                            'sticky top-0 w-full z-1 mb-1',
+                            function (_, _a) {
+                                var $highlighted = _a.$highlighted;
+                                return ($highlighted ? '' : 'spr-bg-primary');
+                            },
+                            isSticky ? 'spr-shadow-100' : '',
+                            menuItemProps.className,
+                        ] }, (props.role === 'listbox' ? { role: 'option' } : {}), { onClick: function (event) {
+                            var _a, _b;
+                            onHeaderItemClick();
+                            (_b = (_a = menuItemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                        } }, { children: getItemLabel(currentHeaderItem) }))] })), itemsToRender] })));
+});
+exports.SubMenu = SubMenu;
+SubMenu.displayName = 'SubMenu';

package/menu/helpers.d.ts

@@ -1,19 +1,22 @@
-import { Reducer, TraversalFunction } from './types';
+import type { Reducer, TraversalFunction, SubMenuItem } from './types';
 export declare const nextItem: TraversalFunction;
 export declare const prevItem: TraversalFunction;
 /**
- * Checks if given item can be highlighted
+ * Checks if given item can be highlighted (real menu/listbox rows only — skips sticky sentinels and other chrome).
  */
-export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+export declare const canHighlightItem: (item?: HTMLElement | null) => boolean;
 /**
  * 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
  */
 export declare const getNextItemIndexToHighlight: (highlightedItem: HTMLElement | null, parentContainer: HTMLElement, traversalFunction: TraversalFunction) => HTMLElement | null;
+/** Submenu header row: skipped for initial auto-highlight so the first content item shows the hover/focus background. */
+export declare const SUBMENU_BACK_ROW_ATTR = "data-sw-submenu-back";
 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 declare const findParentAndChildren: (itemId: string | number, items: Array<SubMenuItem>, valueKey: string | number, parentItem?: SubMenuItem) => [Array<SubMenuItem>, SubMenuItem | undefined] | undefined;
 export { getNextHighlightedItem };

package/menu/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.getNextItemIndexToHighlight = exports.canHighlightItem = exports.prevItem = exports.nextItem = void 0;
+exports.getNextHighlightedItem = exports.findParentAndChildren = exports.defaultReducer = exports.getFirstHighlightableElement = exports.SUBMENU_BACK_ROW_ATTR = exports.getNextItemIndexToHighlight = exports.canHighlightItem = exports.prevItem = exports.nextItem = void 0;
 var nextItem = function (highlightedItem, parentContainer) {
     var _a;
     if (highlightedItem) {
@@ -11,10 +11,17 @@ var nextItem = function (highlightedItem, parentContainer) {
 exports.nextItem = nextItem;
 var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
 exports.prevItem = prevItem;
+var HIGHLIGHTABLE_LIST_ITEM_ROLES = new Set(['menuitem', 'menuitemcheckbox', 'menuitemradio', 'option']);
 /**
- * Checks if given item can be highlighted
+ * Checks if given item can be highlighted (real menu/listbox rows only — skips sticky sentinels and other chrome).
  */
-var canHighlightItem = function (item) { return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-disabled')) !== 'true'; };
+var canHighlightItem = function (item) {
+    var _a;
+    if (!item || item.getAttribute('aria-disabled') === 'true')
+        return false;
+    var role = (_a = item.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return role != null && HIGHLIGHTABLE_LIST_ITEM_ROLES.has(role);
+};
 exports.canHighlightItem = canHighlightItem;
 /**
  * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
@@ -35,12 +42,16 @@ var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, tr
     return highlightedItem;
 };
 exports.getNextItemIndexToHighlight = getNextItemIndexToHighlight;
+/** Submenu header row: skipped for initial auto-highlight so the first content item shows the hover/focus background. */
+exports.SUBMENU_BACK_ROW_ATTR = 'data-sw-submenu-back';
 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;
+        var el = childItem;
+        var isSubmenuBackRow = el.hasAttribute(exports.SUBMENU_BACK_ROW_ATTR);
+        if (!firstHighlightableItem && (0, exports.canHighlightItem)(el) && !isSubmenuBackRow) {
+            firstHighlightableItem = el;
         }
         if (childItem.getAttribute('aria-selected') === 'true') {
             firstSelectedItem = childItem;
@@ -84,3 +95,19 @@ var getNextHighlightedItem = function (event, highlightedItem, parentContainer)
 exports.getNextHighlightedItem = getNextHighlightedItem;
 var defaultReducer = function (type, state) { return state; };
 exports.defaultReducer = defaultReducer;
+var findParentAndChildren = function (itemId, items, valueKey, parentItem) {
+    for (var idx = 0; idx < items.length; idx++) {
+        var item = items[idx];
+        if (item[valueKey] === itemId) {
+            return [item.nestedItems || [], parentItem];
+        }
+        if (item.nestedItems) {
+            var returnItems = (0, exports.findParentAndChildren)(itemId, item.nestedItems, valueKey, item);
+            if (returnItems)
+                return returnItems;
+        }
+    }
+    //no items found with the expected itemId
+    return undefined;
+};
+exports.findParentAndChildren = findParentAndChildren;