@sprinklrjs/spaceweb 14.11.0 → 14.11.3

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -22,8 +22,13 @@ import { useLocale } from '../../locale';
 import { useDocument } from '../../spacewebProvider/DocumentProvider';
 import { HiddenElement } from '../utils/hidden-element';
 import { useSelectIds } from '../SelectIdsContext';
+import { useNumber } from '../../number';
 var Collapsible = function (_a) {
+    var _b;
     var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, className = _a.className;
+    var formattedCount = useNumber({
+        value: (_b = group.count) !== null && _b !== void 0 ? _b : 0,
+    });
     return (_jsxs(Box, __assign({ className: "rounded-inherit" }, { children: [_jsxs(BaseButton, __assign({ tabIndex: -1, disabled: disabled, onClick: function () { return onClick(group.id); }, 
                 // @ts-ignore -- css variable declaration in style props
                 style: { '--sw-padding-block-start': '0.55rem', '--sw-padding-block-end': '0.55rem' }, className: [
@@ -31,7 +36,7 @@ var Collapsible = function (_a) {
                     'pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] pl-2 pr-2.5',
                     'disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
                     className,
-                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [_jsx(Box, __assign({ "$as": "span" }, { children: group.label })), _isNumber(group.count) ? _jsx(Box, __assign({ "$as": "span" }, { children: " (".concat(group.count, ")") })) : null] })), _jsx(ChevronDown, { size: 12, className: "transition-transform duration-200 ml-1 cursor-pointer spr-icon-primary ".concat(expanded ? 'rotate-180' : ''), "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") })] })), _jsx(Collapse, __assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
+                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [_jsx(Box, __assign({ "$as": "span" }, { children: group.label })), _isNumber(group.count) ? _jsx(Box, __assign({ "$as": "span" }, { children: " (".concat(formattedCount, ")") })) : null] })), _jsx(ChevronDown, { size: 12, className: "transition-transform duration-200 ml-1 cursor-pointer spr-icon-primary ".concat(expanded ? 'rotate-180' : ''), "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") })] })), _jsx(Collapse, __assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
 };
 export var CollapsibleSelectMenu = function (_a) {
     var _b, _c, _d, _e;
@@ -73,13 +78,16 @@ export var CollapsibleSelectMenu = function (_a) {
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
     useEffect(function () {
         var keydownHandler = function (event) {
-            var expandedGroupIndex = Math.max(groupConfig.findIndex(function (group) { return group.id === expandedGroupId; }), 0);
-            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted.current)) {
-                setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
+            var expandedGroupIndex = groupConfig.findIndex(function (group) { return group.id === expandedGroupId; });
+            var noGroupExpanded = expandedGroupIndex === -1;
+            if (event.key === 'ArrowDown' && (event.shiftKey || noGroupExpanded || isLastItemHighlighted.current)) {
+                var nextGroupIndex = noGroupExpanded ? 0 : Math.min(expandedGroupIndex + 1, groupConfig.length - 1);
+                setExpandedGroupId(groupConfig[nextGroupIndex].id);
                 event.stopPropagation(); // prevents the menu to move to the second item of the next group
             }
-            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted.current)) {
-                setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].id);
+            else if (event.key === 'ArrowUp' && (event.shiftKey || noGroupExpanded || isFirstItemHighlighted.current)) {
+                var prevGroupIndex = noGroupExpanded ? groupConfig.length - 1 : Math.max(expandedGroupIndex - 1, 0);
+                setExpandedGroupId(groupConfig[prevGroupIndex].id);
             }
         };
         ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', keydownHandler);
@@ -87,6 +95,13 @@ export var CollapsibleSelectMenu = function (_a) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.removeEventListener('keydown', keydownHandler);
         };
     }, [ownerDocument, expandedGroupId, groupConfig, setExpandedGroupId]);
+    // when the NoResults component is rendered, handleOnHighlightedItemChange is not triggered
+    useEffect(function () {
+        if (expandedGroupId && _isEmpty(groupedItems[expandedGroupId])) {
+            isFirstItemHighlighted.current = true;
+            isLastItemHighlighted.current = true;
+        }
+    }, [expandedGroupId, groupedItems]);
     var handleOnHighlightedItemChange = function (item) {
         var _a;
         var nextHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, nextItem);

package/esm/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -23,7 +23,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
                     autoFocus?: boolean | undefined;
-                    /** Select-all, group-select-all, clear, and creatable rows do not show `getActionsElement` by default. */
                     button?: boolean | undefined;
                     children?: React.ReactNode;
                     disabled?: boolean | undefined;

package/esm/time-range-picker/RangeSelectorContainer.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { RangeSelectorContainerProps } from './types';
+import type { ReactElement } from 'react';
+import type { RangeSelectorContainerProps } from './types';
 declare const RangeSelectorContainer: {
     ({ adapter, timeRangePresets, onChange, onSubmit, timezone: selectedTimezone, value: selectedValue, timeRange: selectedTimeRange, preset: selectedPreset, minDate: _minDate, maxDate: _maxDate, monthsShown, disableTimezone, timezoneOptions, hidePresetSearch, ...props }: RangeSelectorContainerProps): ReactElement;
     displayName: string;

package/esm/time-range-picker/RangeSelectorContainer.js

@@ -13,7 +13,7 @@ import DefaultTimezonePicker from './TimezonePicker';
 import ErrorIcon from '../icon/components/error';
 import { StyledFooter, StyledFooterBeforeEnhancer } from '../date-picker/styled-components';
 import { useLocale } from '../locale';
-import { getRangeError, getSelectedTimeRange, getValidRange, getMinMaxDateInTimezone } from './utils';
+import { getRangeError, getSelectedTimeRange, getValidRange, getMinMaxDateInTimezone, convertDateFromSystemTzToTargetTz, } from './utils';
 import { useOverrides } from '../overrides';
 var getPresetId = function (selectedPreset, selectedValue) {
     if (selectedPreset) {
@@ -74,7 +74,7 @@ var RangeSelectorContainer = function (_a) {
                 dateHelpers: dateHelpers,
                 maxDate: maxDate,
                 minDate: minDate,
-            });
+            }).map(function (time) { return new Date(convertDateFromSystemTzToTargetTz(time, timezone, timezoneOptions)); });
             setPreset(_preset);
             setTimeRange(nextDate);
             onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
@@ -92,7 +92,17 @@ var RangeSelectorContainer = function (_a) {
             setPreset('CUSTOM');
             onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
         }
-    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone, minDate, maxDate]);
+    }, [
+        setTimeRange,
+        dateHelpers,
+        timeRangePresets,
+        onChange,
+        timezone,
+        disableTimezone,
+        minDate,
+        maxDate,
+        timezoneOptions,
+    ]);
     var handleSubmit = useCallback(function () {
         return onSubmit(__assign({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);

package/helpers/colors.d.ts

@@ -16,3 +16,4 @@ export declare function getContrastRatio(color1: string, color2: string): number
 export declare function RgbToHsl({ r, g, b, a }: RGBColor): HSLA;
 export declare function HslToRgb(hsl: HSLA): RGBColor;
 export declare function noAlphaHex(inputHex?: string): string | undefined;
+export declare function normalizeHexWithAlpha<T extends string | undefined>(hex: T, alpha: number | undefined): T;

package/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
+exports.normalizeHexWithAlpha = exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
 var tslib_1 = require("tslib");
 var memoize_1 = tslib_1.__importDefault(require("lodash/memoize"));
 var isValidHex = function (hex) {
@@ -18,19 +18,20 @@ exports.isValidHex = isValidHex;
  * @return {{r, g, b, a}} an object with rgba
  */
 function hexToRgb(_hex) {
-    var hex = _hex.replace(/^#?/, '#');
+    var hex = _hex.replace(/^#?/, '');
     if (!(0, exports.isValidHex)(hex))
         return { r: 0, g: 0, b: 0 };
     var isShortHand = hex.length === 3 || hex.length === 4;
-    var r = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(1, 3), 16);
-    var g = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(3, 5), 16);
-    var b = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(5, 7), 16);
-    var a = parseInt(isShortHand ? hex.substring(4, 5).repeat(2) : hex.substring(7, 9), 16);
+    var r = parseInt(isShortHand ? hex.substring(0, 1).repeat(2) : hex.substring(0, 2), 16);
+    var g = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(2, 4), 16);
+    var b = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(4, 6), 16);
+    var a = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(6, 8), 16);
     return tslib_1.__assign({ r: r, g: g, b: b }, (a < 255 ? { a: a / 255 } : undefined));
 }
 exports.hexToRgb = hexToRgb;
 function RgbToHex(_a) {
     var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // eslint-disable-next-line react-google-translate/no-return-text-nodes -- This isn't a React Element
     return "#".concat(tslib_1.__spreadArray([r, g, b], tslib_1.__read((a < 1 ? [Math.round(a * 255)] : [])), false).map(function (n) { return (Number.isNaN(n) ? 10 : Math.round(Math.min(Math.max(n, 0), 255))).toString(16).padStart(2, '0'); })
         .join(''));
 }
@@ -94,3 +95,12 @@ function noAlphaHex(inputHex) {
     return inputHex;
 }
 exports.noAlphaHex = noAlphaHex;
+function normalizeHexWithAlpha(hex, alpha) {
+    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+        return hex;
+    return (hex +
+        Math.floor(alpha * 255)
+            .toString(16)
+            .padStart(2, '0'));
+}
+exports.normalizeHexWithAlpha = normalizeHexWithAlpha;

package/list/list.d.ts

@@ -6,6 +6,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
 } & {
     children?: React.ReactNode;
     virtual?: boolean | undefined;
+    keepFirstItemMounted?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;

package/list/list.js

@@ -23,8 +23,8 @@ var getCloneElement = function (item, virtualRow, totalCount) {
     });
 };
 var List = React.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? constants_1.DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? constants_1.DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, restProps = tslib_1.__rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className"]);
-    var _f = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? constants_1.DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? constants_1.DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = tslib_1.__rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _g[0], rootProps = _g[1];
     var parentRef = React.useRef(null);
     var combinedRef = (0, useCombinedRef_1.default)(parentRef, forwardedRef);
     var childrenArr = React.Children.toArray(children);
@@ -35,6 +35,7 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         estimateSize: function () { return estimateItemSize; },
         overscan: overscanCount,
         measureElement: utils_1.measureElement,
+        rangeExtractor: keepFirstItemMounted ? utils_1.customRangeExtractor : react_virtual_1.defaultRangeExtractor,
     });
     React.useEffect(function () {
         if (!autoScrollToSelectedItem) {

package/list/types.d.ts

@@ -1,7 +1,7 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { Override } from '../overrides/types';
-import { SpacewebComponentProps } from '../types';
-import { StatefulTooltipProps } from '../tooltip';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { Override } from '../overrides/types';
+import type { SpacewebComponentProps } from '../types';
+import type { StatefulTooltipProps } from '../tooltip';
 export type AlignItems = 'start' | 'center';
 export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export type ListItemSharedProps = {
@@ -36,6 +36,10 @@ export type ListItemProps = SpacewebComponentProps & {
 export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
     virtual?: boolean;
+    /**
+     * Forces the first item to stay mounted even when out of overscan range in virtualized list
+     */
+    keepFirstItemMounted?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };

package/list/utils.d.ts

@@ -1,2 +1,6 @@
-import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+import type { measureElement as measureElementType, Range } from '@tanstack/react-virtual';
 export declare const measureElement: typeof measureElementType;
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export declare const customRangeExtractor: (range: Range) => number[];

package/list/utils.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureElement = void 0;
+exports.customRangeExtractor = exports.measureElement = void 0;
+var tslib_1 = require("tslib");
+var react_virtual_1 = require("@tanstack/react-virtual");
 var parseMeasurement = function (str) { return parseFloat(str) || 0; };
 // by default react-virtual uses getBoundingClientRect to calculate dimensions.
 // overriding it to use height + margin, so that we do not have to wrap each ListItem with another element
@@ -12,3 +14,17 @@ var measureElement = function (element, instance) {
     return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
 };
 exports.measureElement = measureElement;
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+var customRangeExtractor = function (range) {
+    var defaultIndices = (0, react_virtual_1.defaultRangeExtractor)(range);
+    // Find the actual start index of the range including overscan
+    var virtualRangeStart = Math.max(range.startIndex - range.overscan, 0);
+    // If the first item is already in the virtual range, return the default indices.
+    if (virtualRangeStart === 0)
+        return defaultIndices;
+    // Otherwise, prepend the first item to the default indices.
+    return tslib_1.__spreadArray([0], tslib_1.__read(defaultIndices), false);
+};
+exports.customRangeExtractor = customRangeExtractor;

package/menu/ActionsIconButton.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import { type IconButtonProps } from '../button';
-export type ActionsIconButtonProps = IconButtonProps;
-declare const ActionsIconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+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/StatefulSubMenu.d.ts

@@ -31,6 +31,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
                 } & {
                     children?: ReactNode;
                     virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
                     overrides?: {
                         Root?: Override<Record<string, any>> | undefined;
                     } | undefined;

package/menu/SubMenu.d.ts

@@ -32,6 +32,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
                 } & {
                     children?: ReactNode;
                     virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
                     overrides?: {
                         Root?: Override<Record<string, any>> | undefined;
                     } | undefined;

package/menu/SubMenu.js

@@ -37,7 +37,8 @@ var SubMenu = (0, react_1.forwardRef)(function (_a, ref) {
     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;
-    return ((0, jsx_runtime_1.jsxs)(MenuOverriden, tslib_1.__assign({ "aria-label": "Menu" }, props, menuProps, { 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: [
+    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;

package/menu/menu-item.js

@@ -64,7 +64,9 @@ var ACTION_CONTAINER_HANDLER_PROPS = {
 };
 function MenuActionContainer(_a) {
     var sharedProps = _a.sharedProps, endEnhancer = _a.endEnhancer, renderedActions = _a.renderedActions;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: (0, classNames_1.default)('flex items-center gap-1 opacity-0 pointer-events-none', 'group-hover:opacity-100 group-hover:pointer-events-auto', 'group-focus-within:opacity-100 group-focus-within:pointer-events-auto', sharedProps.$highlighted ? 'opacity-100 pointer-events-auto' : ''), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions, typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: (0, classNames_1.default)('flex items-center gap-1 pointer-events-none', 'group-hover:visible group-hover:pointer-events-auto', 'group-focus-within:visible group-focus-within:pointer-events-auto', 
+        // Use visibility (not opacity) so alwaysVisible children can override with `visible`.
+        sharedProps.$highlighted ? 'visible pointer-events-auto' : 'invisible'), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions.map(function (action) { return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: action.props.alwaysVisible ? 'visible opacity-100 pointer-events-auto' : undefined }, { children: action }), action.key)); }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
 }
 function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     var props = {};
@@ -76,20 +78,28 @@ function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     }
     return props;
 }
+function flattenActionElements(actions) {
+    return React.Children.toArray(actions).flatMap(function (node) {
+        if (React.isValidElement(node)) {
+            return node.type === React.Fragment ? flattenActionElements(node.props.children) : [node];
+        }
+        return [];
+    });
+}
 function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
     var renderedActions = (0, react_1.useMemo)(function () {
         return shouldRenderActions
-            ? React.Children.map(resolvedItemActions, function (action, index) {
+            ? flattenActionElements(resolvedItemActions).map(function (action, index) {
                 var _a;
-                if (!React.isValidElement(action))
-                    return action;
-                return React.cloneElement(action, { key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index) });
+                return React.cloneElement(action, {
+                    key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index),
+                });
             })
             : null;
     }, [resolvedItemActions, shouldRenderActions]);
     return (0, react_1.useMemo)(function () {
         if (shouldRenderActions) {
-            return function (sharedProps) { return ((0, jsx_runtime_1.jsx)(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions })); };
+            return function (sharedProps) { return ((0, jsx_runtime_1.jsx)(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions !== null && renderedActions !== void 0 ? renderedActions : [] })); };
         }
         if (endEnhancer)
             return endEnhancer;

package/menu/menu.d.ts

@@ -14,6 +14,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
         } & {
             children?: import("react").ReactNode;
             virtual?: boolean | undefined;
+            keepFirstItemMounted?: boolean | undefined;
             overrides?: {
                 Root?: import("../overrides").Override<Record<string, any>> | undefined;
             } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.11.0",
+  "version": "14.11.3",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -18,7 +18,7 @@
     "test:watch": "jest --watch",
     "//": "COLLECT_COVERAGE needs to be true to include VRT in the tests run during coverage",
     "test:coverage": "COLLECT_COVERAGE=true jest --coverage",
-    "tsc": "../../scripts/tsbuild.sh",
+    "tsc": "tsc",
     "validateCoverageReport": "ts-node ./scripts/validateCoverageReport.ts"
   },
   "author": "",
@@ -33,7 +33,7 @@
     "@types/react-color": "^3.0.12",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
-    "any-date-parser": "2.2.0",
+    "any-date-parser": "2.2.3",
     "body-scroll-lock": "3.1.5",
     "card-validator": "^6.2.0",
     "class-variance-authority": "^0.7.0",
@@ -99,7 +99,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.11.0",
+    "@sprinklrjs/spaceweb-themes": "14.11.3",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/progress/circular/CircularProgress.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { CircularProgressProps } from './types';
+import type { ReactElement } from 'react';
+import type { CircularProgressProps } from './types';
 declare const CircularProgress: {
-    ({ intent, infinite, label, backgroundColor, value, className, style, color, size, thickness, overrides, }: CircularProgressProps): ReactElement;
+    ({ intent, infinite, label, backgroundColor, value, className, style, color, size, thickness, overrides, ...restProps }: CircularProgressProps): ReactElement;
     __standard: string;
 };
 export default CircularProgress;

package/progress/circular/CircularProgress.js

@@ -8,7 +8,7 @@ var styled_component_1 = require("./styled-component");
 var style_1 = require("../../style");
 var helper_1 = require("../helper");
 var CircularProgress = function (_a) {
-    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, style = _a.style, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides;
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, style = _a.style, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides, restProps = tslib_1.__rest(_a, ["intent", "infinite", "label", "backgroundColor", "value", "className", "style", "color", "size", "thickness", "overrides"]);
     var strokeWidth = (styled_component_1.VIEWBOX_SIZE / size) * thickness;
     var _g = (0, style_1.useStyle)(), px2rem = _g.px2rem, theme = _g.theme;
     var sharedProps = tslib_1.__assign(tslib_1.__assign({}, (0, helpers_1.add$props)({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
@@ -19,7 +19,7 @@ var CircularProgress = function (_a) {
     var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _m[0], progressProps = _m[1];
     var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _o[0], labelContainerProps = _o[1];
     var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _p[0], labelProps = _p[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { style: [
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, restProps, rootProps, { style: [
             {
                 '--sw-height': px2rem(size),
                 '--sw-width': px2rem(size),

package/progress/linear/LinearProgress.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement, PropsWithChildren } from 'react';
-import { LinearProgressProps } from './types';
+import type { ReactElement, PropsWithChildren } from 'react';
+import type { LinearProgressProps } from './types';
 declare const LinearProgress: {
-    ({ intent, value, backgroundColor, color, label, style, className, infinite, overrides, children, }: PropsWithChildren<LinearProgressProps>): ReactElement;
+    ({ intent, value, backgroundColor, color, label, style, className, infinite, overrides, children, ...restProps }: PropsWithChildren<LinearProgressProps>): ReactElement;
     __standard: string;
 };
 export default LinearProgress;

package/progress/linear/LinearProgress.js

@@ -8,14 +8,14 @@ var styled_component_1 = require("./styled-component");
 var helper_1 = require("../helper");
 var style_1 = require("../../style");
 var LinearProgress = function (_a) {
-    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, backgroundColor = _a.backgroundColor, color = _a.color, label = _a.label, style = _a.style, className = _a.className, _d = _a.infinite, infinite = _d === void 0 ? false : _d, overrides = _a.overrides, children = _a.children;
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, backgroundColor = _a.backgroundColor, color = _a.color, label = _a.label, style = _a.style, className = _a.className, _d = _a.infinite, infinite = _d === void 0 ? false : _d, overrides = _a.overrides, children = _a.children, restProps = tslib_1.__rest(_a, ["intent", "value", "backgroundColor", "color", "label", "style", "className", "infinite", "overrides", "children"]);
     var sharedProps = tslib_1.__assign(tslib_1.__assign({}, (0, helpers_1.add$props)({ intent: intent, value: value, backgroundColor: backgroundColor, color: color, infinite: infinite })), { $withLabel: !!label });
     var theme = (0, style_1.useStyle)().theme;
     var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, styled_component_1.StyledBar), 2), Bar = _f[0], barProps = _f[1];
     var _g = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _g[0], progressProps = _g[1];
     var _h = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _h[0], labelProps = _h[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "linear-progress", role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(0, jsx_runtime_1.jsx)(Bar, tslib_1.__assign({ "data-testid": "track" }, sharedProps, barProps, { style: [{ '--sw-bg-color': backgroundColor || theme.spr.tag02 }, barProps === null || barProps === void 0 ? void 0 : barProps.style] }, { children: children || ((0, jsx_runtime_1.jsx)(Progress, tslib_1.__assign({ "data-testid": "filled-track" }, sharedProps, progressProps, { style: [
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "linear-progress", role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, 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] }, { children: [(0, jsx_runtime_1.jsx)(Bar, tslib_1.__assign({ "data-testid": "track" }, sharedProps, barProps, { style: [{ '--sw-bg-color': backgroundColor || theme.spr.tag02 }, barProps === null || barProps === void 0 ? void 0 : barProps.style] }, { children: children || ((0, jsx_runtime_1.jsx)(Progress, tslib_1.__assign({ "data-testid": "filled-track" }, sharedProps, progressProps, { style: [
                         tslib_1.__assign({ '--sw-bg-color': color || (0, helper_1.getIntentColor)(intent, theme) }, (!infinite ? { '--sw-width': "".concat(value, "%") } : {})),
                         progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
                     ] }))) })), label ? ((0, jsx_runtime_1.jsx)(Label, tslib_1.__assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }))) : null] })));

package/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -25,8 +25,13 @@ var locale_1 = require("../../locale");
 var DocumentProvider_1 = require("../../spacewebProvider/DocumentProvider");
 var hidden_element_1 = require("../utils/hidden-element");
 var SelectIdsContext_1 = require("../SelectIdsContext");
+var number_1 = require("../../number");
 var Collapsible = function (_a) {
+    var _b;
     var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, className = _a.className;
+    var formattedCount = (0, number_1.useNumber)({
+        value: (_b = group.count) !== null && _b !== void 0 ? _b : 0,
+    });
     return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "rounded-inherit" }, { children: [(0, jsx_runtime_1.jsxs)(base_button_1.BaseButton, tslib_1.__assign({ tabIndex: -1, disabled: disabled, onClick: function () { return onClick(group.id); }, 
                 // @ts-ignore -- css variable declaration in style props
                 style: { '--sw-padding-block-start': '0.55rem', '--sw-padding-block-end': '0.55rem' }, className: [
@@ -34,7 +39,7 @@ var Collapsible = function (_a) {
                     'pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] pl-2 pr-2.5',
                     'disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
                     className,
-                ], type: "button" }, { children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, tslib_1.__assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: group.label })), (0, isNumber_1.default)(group.count) ? (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: " (".concat(group.count, ")") })) : null] })), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 12, className: "transition-transform duration-200 ml-1 cursor-pointer spr-icon-primary ".concat(expanded ? 'rotate-180' : ''), "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") })] })), (0, jsx_runtime_1.jsx)(collapse_1.Collapse, tslib_1.__assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
+                ], type: "button" }, { children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, tslib_1.__assign({ className: "block text-left", variant: "body-sm", weight: "bold", maxLines: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: group.label })), (0, isNumber_1.default)(group.count) ? (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, { children: " (".concat(formattedCount, ")") })) : null] })), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 12, className: "transition-transform duration-200 ml-1 cursor-pointer spr-icon-primary ".concat(expanded ? 'rotate-180' : ''), "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") })] })), (0, jsx_runtime_1.jsx)(collapse_1.Collapse, tslib_1.__assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }))] })));
 };
 var CollapsibleSelectMenu = function (_a) {
     var _b, _c, _d, _e;
@@ -76,13 +81,16 @@ var CollapsibleSelectMenu = function (_a) {
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
     (0, react_1.useEffect)(function () {
         var keydownHandler = function (event) {
-            var expandedGroupIndex = Math.max(groupConfig.findIndex(function (group) { return group.id === expandedGroupId; }), 0);
-            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted.current)) {
-                setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
+            var expandedGroupIndex = groupConfig.findIndex(function (group) { return group.id === expandedGroupId; });
+            var noGroupExpanded = expandedGroupIndex === -1;
+            if (event.key === 'ArrowDown' && (event.shiftKey || noGroupExpanded || isLastItemHighlighted.current)) {
+                var nextGroupIndex = noGroupExpanded ? 0 : Math.min(expandedGroupIndex + 1, groupConfig.length - 1);
+                setExpandedGroupId(groupConfig[nextGroupIndex].id);
                 event.stopPropagation(); // prevents the menu to move to the second item of the next group
             }
-            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted.current)) {
-                setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].id);
+            else if (event.key === 'ArrowUp' && (event.shiftKey || noGroupExpanded || isFirstItemHighlighted.current)) {
+                var prevGroupIndex = noGroupExpanded ? groupConfig.length - 1 : Math.max(expandedGroupIndex - 1, 0);
+                setExpandedGroupId(groupConfig[prevGroupIndex].id);
             }
         };
         ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', keydownHandler);
@@ -90,6 +98,13 @@ var CollapsibleSelectMenu = function (_a) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.removeEventListener('keydown', keydownHandler);
         };
     }, [ownerDocument, expandedGroupId, groupConfig, setExpandedGroupId]);
+    // when the NoResults component is rendered, handleOnHighlightedItemChange is not triggered
+    (0, react_1.useEffect)(function () {
+        if (expandedGroupId && (0, isEmpty_1.default)(groupedItems[expandedGroupId])) {
+            isFirstItemHighlighted.current = true;
+            isLastItemHighlighted.current = true;
+        }
+    }, [expandedGroupId, groupedItems]);
     var handleOnHighlightedItemChange = function (item) {
         var _a;
         var nextHighlightableElement = (0, helpers_1.getNextItemIndexToHighlight)(item !== null && item !== void 0 ? item : null, menuRef.current, helpers_1.nextItem);

package/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -23,7 +23,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
                     autoFocus?: boolean | undefined;
-                    /** Select-all, group-select-all, clear, and creatable rows do not show `getActionsElement` by default. */
                     button?: boolean | undefined;
                     children?: React.ReactNode;
                     disabled?: boolean | undefined;

package/time-range-picker/RangeSelectorContainer.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { RangeSelectorContainerProps } from './types';
+import type { ReactElement } from 'react';
+import type { RangeSelectorContainerProps } from './types';
 declare const RangeSelectorContainer: {
     ({ adapter, timeRangePresets, onChange, onSubmit, timezone: selectedTimezone, value: selectedValue, timeRange: selectedTimeRange, preset: selectedPreset, minDate: _minDate, maxDate: _maxDate, monthsShown, disableTimezone, timezoneOptions, hidePresetSearch, ...props }: RangeSelectorContainerProps): ReactElement;
     displayName: string;

package/time-range-picker/RangeSelectorContainer.js

@@ -76,7 +76,7 @@ var RangeSelectorContainer = function (_a) {
                 dateHelpers: dateHelpers,
                 maxDate: maxDate,
                 minDate: minDate,
-            });
+            }).map(function (time) { return new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(time, timezone, timezoneOptions)); });
             setPreset(_preset);
             setTimeRange(nextDate);
             onChange === null || onChange === void 0 ? void 0 : onChange(tslib_1.__assign({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
@@ -94,7 +94,17 @@ var RangeSelectorContainer = function (_a) {
             setPreset('CUSTOM');
             onChange === null || onChange === void 0 ? void 0 : onChange(tslib_1.__assign({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
         }
-    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone, minDate, maxDate]);
+    }, [
+        setTimeRange,
+        dateHelpers,
+        timeRangePresets,
+        onChange,
+        timezone,
+        disableTimezone,
+        minDate,
+        maxDate,
+        timezoneOptions,
+    ]);
     var handleSubmit = (0, react_1.useCallback)(function () {
         return onSubmit(tslib_1.__assign({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);