@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/esm/list/types.d.ts

@@ -1,6 +1,7 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
+import { StatefulTooltipProps } from '../tooltip';
 export declare type AlignItems = 'start' | 'center';
 export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export declare type ListItemSharedProps = {
@@ -26,9 +27,11 @@ export declare type ListItemProps = SpacewebComponentProps & {
         EndEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
         Root?: Override<ListItemSharedProps & Record<string, any>>;
         StartEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+        StatefulTooltip?: Override<ListItemSharedProps & Record<string, any>>;
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: StatefulTooltipProps['content'];
 };
 export declare type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
@@ -39,6 +42,7 @@ export declare type ListProps = SpacewebComponentProps & {
     scrollElement?: HTMLElement | null;
     overscanCount?: number;
     estimateItemSize?: number;
+    autoScrollToSelectedItem?: boolean;
     $showFocusOutline?: boolean;
 };
 export declare type ListItemTextProps = {

package/esm/loader/loader.d.ts

@@ -2,5 +2,7 @@
 import { LoaderProps } from './types';
 export declare const DEFAULT_SIZE = 16;
 export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/esm/loader/loader.js

@@ -1,20 +1,29 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from 'react';
+import _times from 'lodash/times';
 import { isTypographyNode } from '../helpers/typography';
 import { useOverrides } from '../overrides';
 import { Typography } from '../typography';
-import { StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot } from './styled-component';
+import { StyledSpinner, StyledSpinnerStick, StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot, } from './styled-component';
 export var DEFAULT_SIZE = 16;
 export var DEFAULT_DELAY = 0;
 var Loader = forwardRef(function (_a, ref) {
     var _b = _a.delay, delay = _b === void 0 ? DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = __rest(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
     // should be visible from start if delay is 0
     var _e = __read(useState(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var LoaderComponent;
+    if (variant === 'beat')
+        LoaderComponent = StyledBeatLoader;
+    else if (variant === 'clip')
+        LoaderComponent = StyledClipLoader;
+    else
+        LoaderComponent = StyledSpinner;
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _f[0], rootProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? StyledBeatLoader : StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
     var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
     useEffect(function () {
         var delayTimer;
         if (delay) {
@@ -32,7 +41,7 @@ var Loader = forwardRef(function (_a, ref) {
         ? loadingContent
         : loadingContent && (_jsx(Text, __assign({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
     // todo: aria-label localization
-    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsx(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsxs(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && (_jsx(_Fragment, { children: _times(8).map(function (index) { return (_jsx(SpinnerStick, __assign({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
 });
 Loader.displayName = 'Loader';
 export default Loader;

package/esm/loader/styled-component.d.ts

@@ -2,3 +2,5 @@ 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;
+export declare const StyledSpinner: import("../style/styled").StyledComponent;
+export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;

package/esm/loader/styled-component.js

@@ -56,3 +56,64 @@ export var StyledBeatLoaderBall = styled('div', 'spr-tooltip-01 rounded-full inl
         marginRight: px2rem(2),
     };
 });
+var spinnerAnimationStyles = function (_, _a) {
+    var $index = _a.$index;
+    return ({
+        animationDuration: '1000ms',
+        animationDelay: "".concat($index * 125, "ms"),
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'step-start',
+        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+        animationName: {
+            '10%': {
+                opacity: 0.125,
+            },
+            '100%': {
+                opacity: 1,
+            },
+        },
+    });
+};
+var spinnerStyles = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, index = props.$index;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    var stickHeightOffset = stickHeight / 2;
+    var stickWidthOffset = stickWidth / 2;
+    // Adjust the baseRadius to be the radius minus the stick width
+    var baseRadius = radius - stickWidth;
+    // Calculate the angle in degrees
+    var angle = (index - 1) * 45;
+    // Calculate the x and y offsets based on the adjusted baseRadius
+    var yOffset = Math.sin((Math.PI * angle) / 180) * baseRadius;
+    var xOffset = Math.cos((Math.PI * angle) / 180) * baseRadius;
+    return {
+        top: px2rem(radius + yOffset - stickHeightOffset),
+        left: px2rem(radius + xOffset - stickWidthOffset),
+        transform: "rotate(".concat(angle + 90, "deg)"),
+    };
+};
+export var StyledSpinner = styled('div', function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    return {
+        height: px2rem($size),
+        width: px2rem($size),
+        position: 'relative',
+    };
+});
+export var StyledSpinnerStick = styled('div', 'box-border spr-tooltip-01', spinnerStyles, spinnerAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    return {
+        height: px2rem(stickHeight),
+        width: px2rem(stickWidth),
+        borderRadius: px2rem(16),
+        position: 'absolute',
+    };
+});

package/esm/loader/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Variant = 'clip' | 'beat';
+export declare type Variant = 'clip' | 'beat' | 'spinner';
 export declare type SharedProps = {
     $variant: Variant;
     $hasLoadingContent: boolean;
@@ -19,5 +19,6 @@ export declare type LoaderProps = {
         Text?: Override<SharedProps & Record<string, any>>;
         Loader?: Override<SharedProps & Record<string, any>>;
         BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
+        SpinnerStick?: Override<SharedProps & Record<string, any>>;
     };
 };

package/esm/locale/context.d.ts

@@ -10,7 +10,7 @@ export declare const LocaleProvider: {
     (props: {
         children?: React.ReactNode;
         locale?: DeepPartial<Locale>;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/locale/en_US.js

@@ -1,7 +1,22 @@
 export var DEFAULT_LOCALE = {
+    colorPicker: {
+        resetButtonLabel: 'Reset Color',
+        colorLibraryLabel: 'Color Library',
+        solidColorLabel: 'Solid Color',
+        gradientColorLabel: 'Gradient Color',
+        selectColorLabel: 'Select Color',
+    },
     select: {
         noResultsMsg: 'No Results',
         selectAllLabel: 'Select All',
+        hideButtonAriaLabel: 'Hide',
+        create: 'Create',
+        selectPlaceholder: 'Select...',
+        clearOptionLabel: 'Unassign',
+        selectedValuesPrefix: 'Selected ${values}',
+        item: 'item',
+        items: 'items',
+        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.',
     },
     asyncSelect: {
         searchingText: 'Searching',
@@ -12,9 +27,22 @@ export var DEFAULT_LOCALE = {
         dateInputStartLabel: 'Start Date',
         timePickerEndLabel: 'End Time',
         dateInputEndLabel: 'End Date',
+        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',
     },
     timeRangePicker: {
         today: 'Today',
@@ -59,6 +87,8 @@ export var DEFAULT_LOCALE = {
         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',
@@ -66,7 +96,7 @@ export var 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.',
     },
     banner: {
         toggleButtonShowLabel: 'Show',
@@ -74,4 +104,24 @@ export var DEFAULT_LOCALE = {
         toggleButtonShowAriaLabel: 'Show Alerts',
         toggleButtonHideAriaLabel: 'Hide Alerts',
     },
+    input: {
+        clearAriaLabel: 'Clear Value',
+    },
+    modal: {
+        closeAriaLabel: 'Close Modal',
+    },
+    snackbar: {
+        closeAriaLabel: 'Hide Snackbar',
+    },
+    tag: {
+        closeAriaLabel: 'Remove Tag',
+    },
+    search: {
+        searchPlaceholder: 'Search',
+    },
+    accordion: {
+        collapse: 'Collapse',
+        expand: 'Expand',
+    },
+    langCode: 'en-US',
 };

package/esm/locale/types.d.ts

@@ -1,11 +1,13 @@
-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';
-import { BannerLocale } from '../banner';
+import type { TimeRangePickerLocale } from '../time-range-picker/locale';
+import type { SelectLocale } from '../select/locale';
+import type { AsyncSelectLocale } from '../asyncSelect/locale';
+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 = {
     select: SelectLocale;
+    colorPicker: ColorPickerLocale;
     asyncSelect: AsyncSelectLocale;
     datePicker: DatePickerLocale;
     timeRangePicker: TimeRangePickerLocale;
@@ -15,9 +17,30 @@ export declare type Locale = {
         dateInputStartLabel: string;
         timePickerEndLabel: string;
         dateInputEndLabel: string;
+        calendarButtonAriaLabel: string;
     };
     menu: {
-        nestedMenuItemAriaLabel: string;
+        nestedMenuItemAriaDescription: string;
     };
     banner: BannerLocale;
+    input: {
+        clearAriaLabel: string;
+    };
+    modal: {
+        closeAriaLabel: string;
+    };
+    snackbar: {
+        closeAriaLabel: string;
+    };
+    tag: {
+        closeAriaLabel: string;
+    };
+    search: {
+        searchPlaceholder: string;
+    };
+    accordion: {
+        collapse: string;
+        expand: string;
+    };
+    langCode: string;
 };

package/esm/menu/MenuContext.d.ts

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

package/esm/menu/MenuContext.js

@@ -4,6 +4,7 @@ var MenuContext = createContext({
     setHighlightedItem: function () { return null; },
     setMenuContainerRef: function () { return null; },
     nestedMenuOpen: false,
+    listItemFocusVisible: false,
     setNestedMenuOpen: function () { return null; },
 });
 export var MenuProvider = MenuContext.Provider;

package/esm/menu/helpers.d.ts

@@ -1,8 +1,15 @@
-import { Reducer } from './types';
+import { Reducer, TraversalFunction } from './types';
+export declare const nextItem: TraversalFunction;
+export declare const prevItem: TraversalFunction;
 /**
  * Checks if given item can be highlighted
  */
 export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => 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;
 export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
     firstHighlightableItem: HTMLElement | null;
     firstSelectedItem: HTMLElement | null;

package/esm/menu/helpers.js

@@ -1,11 +1,11 @@
-var nextItem = function (highlightedItem, parentContainer) {
+export 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;
+    return parentContainer === null || parentContainer === void 0 ? void 0 : 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); };
+export 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
  */
@@ -14,7 +14,7 @@ export var canHighlightItem = function (item) { return (item === null || item ==
  * 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) {
+export var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, traversalFunction) {
     var previousItem = highlightedItem, nextHighlightableItem = traversalFunction(highlightedItem, parentContainer);
     while (previousItem !== nextHighlightableItem) {
         if (!canHighlightItem(nextHighlightableItem)) {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
     getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
@@ -17,17 +17,19 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             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;
+            onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => 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;
+                StatefulTooltip?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
-        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+        Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
             overrides?: ({
                 Body?: import("../overrides").Override<any> | undefined;
                 Arrow?: import("../overrides").Override<any> | undefined;
@@ -42,6 +44,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             triggerType?: import("../popover").TriggerType | undefined;
             placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
             innerRef?: React.Ref<HTMLElement> | undefined;
+            viewportAsBoundary?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;

package/esm/menu/menu-item.js

@@ -14,19 +14,24 @@ import { Popover } from '../popover';
 import { useLocale } from '../locale';
 import { canHighlightItem } from './helpers';
 import { useMenuContext } from './MenuContext';
+import cx from '../classNames';
 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 getStyle = _a.getStyle, theme = _a.theme;
+                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected, $outlined = _b.$outlined;
                         var hoverBackgroundColor = getComponentTheme(theme, 'list').hoverBackgroundColor;
-                        return {
+                        return getStyle(cx({ 'outline-01': $outlined }), {
                             backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
                             cursor: $disabled ? 'not-allowed' : 'pointer',
-                        };
+                        }, $outlined
+                            ? {
+                                outlineOffset: '-2px',
+                            }
+                            : {});
                     },
                 },
             },
@@ -34,13 +39,12 @@ var listItemOverrides = {
     },
 };
 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 _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[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 _c = useMenuContext(), highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
     var locale = useLocale();
     useEffect(function () {
         var _a, _b;
@@ -48,8 +52,8 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     }, [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 _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, ListItem), 2), ListItemOverride = _d[0], listItemProps = _d[1];
+    var _e = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverOverride = _e[0], popoverProps = _e[1];
     var onMouseOverRef = useLatest(onMouseOver);
     var handleMouseOver = useCallback(function (e) {
         var _a;
@@ -61,7 +65,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     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 listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-description": ChildMenu ? locale.menu.nestedMenuItemAriaDescription : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, "$outlined": isItemHighlighted && listItemFocusVisible, 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
@@ -74,7 +78,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     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));
+    return (_jsx(PopoverOverride, __assign({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", 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

@@ -17,6 +17,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
             scrollElement?: HTMLElement | null | undefined;
             overscanCount?: number | undefined;
             estimateItemSize?: number | undefined;
+            autoScrollToSelectedItem?: boolean | undefined;
             $showFocusOutline?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
@@ -26,5 +27,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
     resetMenuOnMouseLeave?: boolean | undefined;
     reducer?: import("./types").Reducer | undefined;
     captureScroll?: boolean | undefined;
+    selectOnTab?: boolean | undefined;
 } & import("react").RefAttributes<MenuRef>>>;
 export default _default;

package/esm/menu/menu.js

@@ -1,7 +1,7 @@
 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 { forwardRef, memo, useImperativeHandle, useMemo, useState, Children } from 'react';
+import { List, DEFAULT_OVER_SCAN_COUNT } from '../list';
 import { useOverrides } from '../overrides';
 import useScrollCapture from '../hooks/useScrollCapture';
 import useCombinedRefs from '../hooks/useCombinedRef';
@@ -9,20 +9,21 @@ 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, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? defaultReducer : _f, captureScroll = _a.captureScroll, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
-    var _g = __read(useState(null), 2), listRef = _g[0], setListRef = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _h[0], listProps = _h[1];
-    var _j = __read(useState(null), 2), listItemsContainer = _j[0], setListItemsContainer = _j[1];
-    var _k = useStatefulMenu({
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, _e = _a.overscanCount, overscanCount = _e === void 0 ? DEFAULT_OVER_SCAN_COUNT : _e, _f = _a.scrollElement, scrollElement = _f === void 0 ? null : _f, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _g = _a.reducer, reducer = _g === void 0 ? defaultReducer : _g, captureScroll = _a.captureScroll, _h = _a.selectOnTab, selectOnTab = _h === void 0 ? false : _h, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab"]);
+    var _j = __read(useState(null), 2), listRef = _j[0], setListRef = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _k[0], listProps = _k[1];
+    var _l = __read(useState(null), 2), listItemsContainer = _l[0], setListItemsContainer = _l[1];
+    var _m = useStatefulMenu({
         disableNavigationOnMount: disableNavigationOnMount,
         disableAutoHighlight: disableAutoHighlight,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
         onHighlightedItemChange: onHighlightedItemChange,
         listItemsContainerRef: listItemsContainer,
         reducer: reducer,
-    }), turnOnKeyboardNavigation = _k.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _k.turnOffKeyboardNavigation, highlightedItem = _k.highlightedItem, setHighlightedItem = _k.setHighlightedItem, nestedMenuOpen = _k.nestedMenuOpen, setNestedMenuOpen = _k.setNestedMenuOpen;
+        selectOnTab: selectOnTab,
+        children: children,
+    }), turnOnKeyboardNavigation = _m.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _m.turnOffKeyboardNavigation, highlightedItem = _m.highlightedItem, setHighlightedItem = _m.setHighlightedItem, nestedMenuOpen = _m.nestedMenuOpen, listItemFocusVisible = _m.listItemFocusVisible, setNestedMenuOpen = _m.setNestedMenuOpen;
     var setScrollTarget = useScrollCapture({ enabled: captureScroll });
     var setListCombinedRef = useCombinedRefs(setListRef, setScrollTarget);
     var menuContextValue = useMemo(function () { return ({
@@ -30,8 +31,9 @@ var Menu = forwardRef(function (_a, ref) {
         setHighlightedItem: setHighlightedItem,
         setMenuContainerRef: setListItemsContainer,
         nestedMenuOpen: nestedMenuOpen,
+        listItemFocusVisible: listItemFocusVisible,
         setNestedMenuOpen: setNestedMenuOpen,
-    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, setNestedMenuOpen]);
+    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, listItemFocusVisible, setNestedMenuOpen]);
     useItemContainerEventHandlers({
         listItemsContainer: listItemsContainer,
         resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
@@ -48,9 +50,10 @@ var Menu = forwardRef(function (_a, ref) {
         }
         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", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
+    var childrenArr = Children.toArray(children);
+    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize, 
+            // useKeyboardNavigation will handle scrolling to selected-item if no. of items are less then overscanCount
+            autoScrollToSelectedItem: childrenArr.length >= 2 * overscanCount }, restProps, listProps, { children: children }), void 0) }), void 0));
 });
 Menu.displayName = 'Menu';
 export default memo(Menu);

package/esm/menu/types.d.ts

@@ -48,6 +48,7 @@ export declare type MenuProps = Omit<ListProps, 'overrides'> & {
     resetMenuOnMouseLeave?: boolean;
     reducer?: Reducer;
     captureScroll?: boolean;
+    selectOnTab?: boolean;
 };
 declare type MenuActions = {
     turnOnKeyboardNavigation?: () => void;

package/esm/menu/useKeyboardNavigation.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { Reducer } from './types';
 declare type Params = {
     /**
@@ -9,15 +9,18 @@ declare type Params = {
     disableNavigationOnMount?: boolean;
     disableAutoHighlight?: boolean;
     reducer: Reducer;
+    selectOnTab?: boolean;
+    children?: ReactNode;
 };
 declare type NavigationUtils = {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     turnOnKeyboardNavigation: () => void;
     turnOffKeyboardNavigation: () => void;
+    listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
-declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, }: Params) => NavigationUtils;
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, selectOnTab, children, }: Params) => NavigationUtils;
 export default useKeyboardNavigation;