@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/loader/loader.js

@@ -1,29 +1,35 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// libs
 import { forwardRef, useEffect, useState } from 'react';
 import _times from 'lodash/times';
+// component
+import { Typography } from '../typography';
+import { StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot, StyledSpinner, StyledSpinnerStick, } from './styled-component';
+// utils
 import { isTypographyNode } from '../helpers/typography';
+// hooks
 import { useOverrides } from '../overrides';
-import { Typography } from '../typography';
-import { StyledSpinner, StyledSpinnerStick, StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot, } from './styled-component';
-export var DEFAULT_SIZE = 16;
-export var DEFAULT_DELAY = 0;
+import { useLocale } from '../locale';
+// constants
+import { DEFAULT_DELAY, DEFAULT_SIZE } from './constants';
+var LOADER_COMPONENT = {
+    clip: StyledClipLoader,
+    spinner: StyledSpinner,
+    beat: StyledBeatLoader,
+};
 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"]);
+    var _b;
+    var _c = _a.delay, delay = _c === void 0 ? DEFAULT_DELAY : _c, loadingContent = _a.loadingContent, _d = _a.variant, variant = _d === void 0 ? 'beat' : _d, _e = _a.size, size = _e === void 0 ? DEFAULT_SIZE : _e, overrides = _a.overrides, _f = _a.intent, intent = _f === void 0 ? 'default' : _f, className = _a.className, style = _a.style, restProps = __rest(_a, ["delay", "loadingContent", "variant", "size", "overrides", "intent", "className", "style"]);
     // 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, 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];
+    var _g = __read(useState(!delay), 2), visible = _g[0], updateVisibleState = _g[1];
+    var loaderAriaLabel = useLocale().loader.loaderAriaLabel;
+    var LoaderComponent = (_b = LOADER_COMPONENT[variant]) !== null && _b !== void 0 ? _b : StyledClipLoader;
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, Typography), 2), Text = _j[0], textProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _k[0], loaderProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, StyledBeatLoaderBall), 2), BeatLoaderBall = _l[0], beatLoaderBallProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, StyledSpinnerStick), 2), SpinnerStick = _m[0], spinnerStickProps = _m[1];
     useEffect(function () {
         var delayTimer;
         if (delay) {
@@ -36,12 +42,13 @@ var Loader = forwardRef(function (_a, ref) {
         $hasLoadingContent: !!loadingContent,
         $variant: variant,
         $size: size,
+        $intent: intent,
     };
     var content = isTypographyNode(loadingContent)
         ? 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: [_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;
+        : loadingContent && (_jsx(Text, __assign({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent })));
+    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], ref: ref }, { children: [_jsxs(LoaderInternal, __assign({ "aria-label": loaderAriaLabel, role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && (_jsx(_Fragment, { children: _times(3).map(function (index) { return (_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": index + 1 }, beatLoaderBallProps), index)); }) })), variant === 'spinner' && (_jsx(_Fragment, { children: _times(8).map(function (index) { return (_jsx(SpinnerStick, __assign({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }))] })), content] }))) : null;
 });
 Loader.displayName = 'Loader';
+Loader.__standard = 'Component';
 export default Loader;

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

@@ -1,6 +1,8 @@
-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;
+import type { CSSVariablesStyleFn } from '../types';
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledClipLoader: import("../style").StyledComponent;
+export declare const StyledBeatLoader: import("../style").StyledComponent;
+export declare const StyledBeatLoaderBall: import("../style").StyledComponent;
+export declare const spinnerStickVariable: CSSVariablesStyleFn;
+export declare const StyledSpinner: import("../style").StyledComponent;
+export declare const StyledSpinnerStick: import("../style").StyledComponent;

package/esm/loader/styled-component.js

@@ -1,82 +1,30 @@
 import { __assign } from "tslib";
-import { borderColor, borderWidth } from '../helpers/longHandHelpers';
-import { styled } from '../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)',
-        },
-    },
-}); };
-export var StyledRoot = styled('div', 'inline-flex flex-col items-center spr-text-02');
-export var StyledClipLoader = styled('div', 'border-solid rounded-full box-border', borderWidth('3px'), clipAnimationStyles, function (utils, props) {
-    var px2rem = utils.px2rem, theme = utils.theme;
-    var $size = props.$size;
-    return __assign(__assign({ height: px2rem($size), width: px2rem($size) }, borderColor(theme.spr.focus01)), { borderBottomColor: 'transparent' });
-});
-var ballAnimationStyles = function (_, _a) {
-    var $index = _a.$index;
+// components
+import { styled, styledWithCssVariables } from '../style';
+// constants
+import { DEFAULT_SIZE } from './constants';
+// utils
+import { intentColor } from '../helpers/intentHelper';
+var commonCssVariables = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $size = _b.$size;
     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,
-            },
-        },
+        '--sw-height': px2rem($size),
+        '--sw-width': px2rem($size),
     });
 };
-export var StyledBeatLoader = styled('div');
-export var StyledBeatLoaderBall = 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),
-    };
-});
-var spinnerAnimationStyles = function (_, _a) {
+export var StyledRoot = styled('div', 'inline-flex flex-col items-center spr-text-02');
+var clipCssVariable = function (utils, sharedProps) { return (__assign(__assign({}, commonCssVariables(utils, sharedProps)), { '--sw-border-bottom-color': 'transparent', '--sw-border-top-color': intentColor(utils, sharedProps), '--sw-border-right-color': intentColor(utils, sharedProps), '--sw-border-left-color': intentColor(utils, sharedProps) })); };
+export var StyledClipLoader = styledWithCssVariables('div', clipCssVariable, 'border-solid rounded-full box-border animate-clip border-3 h-[--sw-height] w-[--sw-width]', 'border-b-[--sw-border-bottom-color] border-t-[--sw-border-top-color]' +
+    ' border-r-[--sw-border-right-color] border-l-[--sw-border-left-color]');
+export var StyledBeatLoader = styledWithCssVariables('div', commonCssVariables);
+export var StyledBeatLoaderBall = styledWithCssVariables('div', 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;
+    return ($index === 2 ? { '--sw-delay': '0s' } : { '--sw-delay': '0.35s' });
+}, 'rounded-full inline-block forced-colors:border-1 h-[--sw-height] w-[--sw-width] mx-0.5', 'animate-ball delay-[--sw-delay] spr-tooltip-01');
+export var spinnerStickVariable = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var _c = _b.$size, $size = _c === void 0 ? DEFAULT_SIZE : _c, index = _b.$index;
     var radius = $size / 2;
     var stickHeight = radius / 2;
     var stickWidth = radius / 4;
@@ -90,30 +38,20 @@ var spinnerStyles = function (utils, props) {
     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)"),
+        '--sw-top': px2rem(radius + yOffset - stickHeightOffset),
+        '--sw-left-directional': px2rem(radius + xOffset - stickWidthOffset),
+        '--sw-transform': "rotate(".concat(angle + 90, "deg)"),
+        '--sw-height': px2rem($size / 4),
+        '--sw-width': px2rem($size / 8),
+        '--sw-delay': "".concat(index * 125, "ms"),
     };
 };
-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',
-    };
-});
+export var StyledSpinner = styledWithCssVariables('div', commonCssVariables, 'h-[--sw-height] w-[--sw-width] relative');
+export var StyledSpinnerStick = styledWithCssVariables('div', spinnerStickVariable, function (_a, _b) {
+    var deprecatedAIThemeEnabled = _a.deprecatedAIThemeEnabled;
+    var $intent = _b.$intent;
+    if ($intent === 'ai') {
+        return deprecatedAIThemeEnabled ? 'ai-ui-01' : 'ai-ui-04';
+    }
+    return 'spr-tooltip-01';
+}, 'forced-colors:border-1 rounded-16 absolute h-[--sw-height] w-[--sw-width] animate-stick', 'delay-[--sw-delay] top-[--sw-top] left-[--sw-left-directional] st-trans-[--sw-transform]');

package/esm/loader/types.d.ts

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

package/esm/locale/context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Locale } from './types';
-declare type DeepPartial<T> = {
+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>;

package/esm/locale/context.js

@@ -1,17 +1,17 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
-import _merge from 'lodash/merge';
+import { useContext, useMemo } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+import _merge from '../helpers/deepMerge';
 import { DEFAULT_LOCALE } from './en_US';
 // TODO: will be changed to `undefined` when MeetWrapper is implemented.
-export var localeContext = createContext(DEFAULT_LOCALE);
-localeContext.displayName = 'LocaleContext';
+export var localeContext = createSingletonContext(DEFAULT_LOCALE, 'LocaleContext');
 export var LocaleConsumer = localeContext.Consumer;
 export var useLocale = function () { return useContext(localeContext); };
 export var LocaleProvider = function (props) {
     var Provider = localeContext.Provider;
     var outerLocale = useLocale();
     var value = useMemo(function () { return _merge({}, DEFAULT_LOCALE, outerLocale, props.locale); }, [props.locale, outerLocale]);
-    return _jsx(Provider, __assign({ value: value }, { children: props.children }), void 0);
+    return _jsx(Provider, __assign({ value: value }, { children: props.children }));
 };
 LocaleProvider.displayName = 'LocaleProvider';

package/esm/locale/en_US.js

@@ -4,32 +4,61 @@ export var 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',
@@ -58,6 +87,7 @@ export var DEFAULT_LOCALE = {
         headerLabel: 'Date Range',
         timezoneLabel: 'Timezone',
         cancelBtnLabel: 'Cancel',
+        clearBtnLabel: 'Clear',
         saveBtnLabel: 'Save',
         timeSelectStartLabel: 'Start Time',
         timeSelectEndLabel: 'End Time',
@@ -70,10 +100,15 @@ export var 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',
@@ -81,13 +116,19 @@ 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.',
+        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',
@@ -104,5 +145,12 @@ export var DEFAULT_LOCALE = {
     search: {
         searchPlaceholder: 'Search',
     },
+    accordion: {
+        collapse: 'Collapse',
+        expand: 'Expand',
+    },
+    loader: {
+        loaderAriaLabel: 'Loading',
+    },
     langCode: 'en-US',
 };

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

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconButton } from '../button';
+var ActionsIconButton = forwardRef(function (props, ref) { return (_jsx(IconButton, __assign({ ref: ref, tabIndex: -1, size: "small" }, props))); });
+ActionsIconButton.displayName = 'ActionsIconButton';
+ActionsIconButton.__standard = 'Component';
+export default ActionsIconButton;

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

@@ -1,11 +1,12 @@
-import { createContext, useContext } from 'react';
-var MenuContext = createContext({
+import { useContext } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+var MenuContext = createSingletonContext({
     highlightedItem: null,
     setHighlightedItem: function () { return null; },
     setMenuContainerRef: function () { return null; },
     nestedMenuOpen: false,
     listItemFocusVisible: false,
     setNestedMenuOpen: function () { return null; },
-});
+}, 'MenuContext');
 export var MenuProvider = MenuContext.Provider;
 export var useMenuContext = function () { return useContext(MenuContext); };

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