@sprinklrjs/spaceweb 14.11.0 → 14.11.4

package/esm/list/list.js

@@ -1,12 +1,12 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { useOverrides } from '../overrides';
 import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
 import { LIST_MIN_WIDTH, StyledList } from './styled-component';
 import { Box } from '../box';
-import { measureElement } from './utils';
+import { customRangeExtractor, measureElement } from './utils';
 import { DEFAULT_LIST_ITEM_HEIGHT, DEFAULT_OVER_SCAN_COUNT } from './constants';
 import { useStyle } from '../style';
 var getCloneElement = function (item, virtualRow, totalCount) {
@@ -21,8 +21,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 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className"]);
-    var _f = __read(useOverrides(overrides.Root, 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 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? 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 = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
+    var _g = __read(useOverrides(overrides.Root, StyledList), 2), Root = _g[0], rootProps = _g[1];
     var parentRef = React.useRef(null);
     var combinedRef = useCombinedRef(parentRef, forwardedRef);
     var childrenArr = React.Children.toArray(children);
@@ -33,6 +33,7 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         estimateSize: function () { return estimateItemSize; },
         overscan: overscanCount,
         measureElement: measureElement,
+        rangeExtractor: keepFirstItemMounted ? customRangeExtractor : defaultRangeExtractor,
     });
     React.useEffect(function () {
         if (!autoScrollToSelectedItem) {

package/esm/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/esm/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/esm/list/utils.js

@@ -1,3 +1,5 @@
+import { __read, __spreadArray } from "tslib";
+import { defaultRangeExtractor } from '@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
@@ -8,3 +10,16 @@ export var measureElement = function (element, instance) {
     var boundingRect = element.getBoundingClientRect();
     return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
 };
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export var customRangeExtractor = function (range) {
+    var defaultIndices = 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 __spreadArray([0], __read(defaultIndices), false);
+};

package/esm/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/esm/menu/StatefulSubMenu.d.ts

@@ -19,7 +19,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
     onItemSelect?: ((item: SubMenuItem, event?: MouseEvent) => void) | undefined;
     overrides?: {
         Menu?: Override<Omit<import("../list").ListProps, "overrides"> & {
-            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem> | undefined;
             disableNavigationOnMount?: boolean | undefined;
             focusWhenNavigationEnabled?: boolean | undefined;
             keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
@@ -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/esm/menu/SubMenu.d.ts

@@ -20,7 +20,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
     onItemSelect: (item: SubMenuItem, event?: MouseEvent) => void;
     overrides?: {
         Menu?: Override<Omit<import("../list").ListProps, "overrides"> & {
-            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+            getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem> | undefined;
             disableNavigationOnMount?: boolean | undefined;
             focusWhenNavigationEnabled?: boolean | undefined;
             keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
@@ -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/esm/menu/SubMenu.js

@@ -34,7 +34,8 @@ var SubMenu = forwardRef(function (_a, ref) {
     var itemsToRender = items.length
         ? _flatten(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 (_jsxs(MenuOverriden, __assign({ "aria-label": "Menu" }, props, menuProps, { ref: ref }, { children: [currentHeaderItem && (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), _jsx(HeaderMenuItem, __assign({ startEnhancer: _jsx(ChevronLeft, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
+    var shouldPinHeader = !!(props.virtual && currentHeaderItem !== undefined);
+    return (_jsxs(MenuOverriden, __assign({ "aria-label": "Menu" }, props, menuProps, { keepFirstItemMounted: shouldPinHeader, ref: ref }, { children: [currentHeaderItem && (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), _jsx(HeaderMenuItem, __assign({ startEnhancer: _jsx(ChevronLeft, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
                             'sticky top-0 w-full z-1 mb-1',
                             function (_, _a) {
                                 var $highlighted = _a.$highlighted;

package/esm/menu/index.d.ts

@@ -4,5 +4,5 @@ export { default as ActionsIconButton, type ActionsIconButtonProps } from './Act
 export { default as NestedMenuProvider } from './nested-menu-context';
 export { SubMenu, type SubMenuProps } from './SubMenu';
 export { StatefulSubMenu, type StatefulSubMenuProps } from './StatefulSubMenu';
-export type { MenuItemProps, ContextValue, MenuProps, MenuRef, SubMenuItem, MenuItemActions, MenuItemActionsParams, MenuActionItem, } from './types';
+export type { MenuItemProps, ContextValue, MenuProps, MenuRef, SubMenuItem, MenuItemActions, MenuItemActionsParams, MenuItemActionsConfig, MenuActionItem, } from './types';
 export { default as useStatefulSubMenu } from './useStatefulSubmenu';

package/esm/menu/menu-item.js

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 import { Box } from '../box';
@@ -17,12 +17,24 @@ import cx from '../classNames';
 function resolveMenuActions(getActionsElement, item) {
     if (!getActionsElement)
         return null;
+    var menuActions;
     if (typeof getActionsElement === 'function') {
         if (item == null)
             return null;
-        return getActionsElement({ item: item });
+        menuActions = getActionsElement({ item: item });
     }
-    return getActionsElement;
+    else {
+        menuActions = getActionsElement;
+    }
+    return menuActions.filter(function (action) {
+        // If array item is null | undefined
+        if (!action)
+            return false;
+        // If action object in array as no actionEl
+        if ('actionEl' in action && !action.actionEl)
+            return false;
+        return true;
+    });
 }
 var listItemOverrides = {
     ListItem: {
@@ -61,8 +73,17 @@ var ACTION_CONTAINER_HANDLER_PROPS = {
     },
 };
 function MenuActionContainer(_a) {
-    var sharedProps = _a.sharedProps, endEnhancer = _a.endEnhancer, renderedActions = _a.renderedActions;
-    return (_jsxs(Box, __assign({ className: cx('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] })));
+    var sharedProps = _a.sharedProps, renderedActions = _a.renderedActions;
+    return (_jsx(Box, __assign({ className: ['flex items-center', sharedProps.$highlighted ? 'pointer-events-auto' : 'pointer-events-none'], "data-menu-action-container": "true" }, ACTION_CONTAINER_HANDLER_PROPS, { children: renderedActions.map(function (action, index) {
+            var _a;
+            var _b = 'actionEl' in action ? action : { actionEl: action, alwaysVisible: false }, actionEl = _b.actionEl, alwaysVisible = _b.alwaysVisible;
+            return (_jsx(Box, __assign({ 
+                // Only show actions that are always visible or whose parent item is highlighted
+                className: [
+                    index === 0 ? 'ml-0' : 'ml-1',
+                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 ml-0',
+                ] }, { children: React.cloneElement(actionEl, { tabIndex: -1 }) }), (_a = actionEl.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index)));
+        }) })));
 }
 function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     var props = {};
@@ -75,19 +96,9 @@ function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     return props;
 }
 function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
-    var renderedActions = useMemo(function () {
-        return shouldRenderActions
-            ? React.Children.map(resolvedItemActions, 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) });
-            })
-            : null;
-    }, [resolvedItemActions, shouldRenderActions]);
     return useMemo(function () {
         if (shouldRenderActions) {
-            return function (sharedProps) { return (_jsx(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions })); };
+            return function (sharedProps) { return (_jsxs(_Fragment, { children: [_jsx(MenuActionContainer, { sharedProps: sharedProps, renderedActions: resolvedItemActions !== null && resolvedItemActions !== void 0 ? resolvedItemActions : [] }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })); };
         }
         if (endEnhancer)
             return endEnhancer;
@@ -95,7 +106,7 @@ function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, en
             return _jsx(ChevronDown, { size: 14, className: "transform -rotate-90" });
         }
         return undefined;
-    }, [ChildMenu, endEnhancer, renderedActions, shouldRenderActions]);
+    }, [ChildMenu, endEnhancer, resolvedItemActions, shouldRenderActions]);
 }
 function useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen) {
     var onMouseOverRef = useLatest(onMouseOver);
@@ -117,12 +128,13 @@ function useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem,
     return { handleMouseOver: handleMouseOver, handleMouseMove: handleMouseMove, resetMenu: resetMenu, closeNestedMenu: closeNestedMenu };
 }
 var MenuItem = React.forwardRef(function MenuItem(_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, endEnhancer = _a.endEnhancer, hideInlineActions = _a.hideInlineActions, renderAll = _a.renderAll, explicitRole = _a.role, $item = _a.$item, restProps = __rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "endEnhancer", "hideInlineActions", "renderAll", "role", "$item"]);
-    var _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[1];
+    var _c = __read(useState(false), 2), hovered = _c[0], setHovered = _c[1];
     var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
     var ownRef = useRef(null);
     var itemRef = useCombinedRefs(ref, ownRef);
-    var _c = useMenuContext(), getActionsElement = _c.getActionsElement, highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
+    var _d = useMenuContext(), getActionsElement = _d.getActionsElement, highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, setMenuContainerRef = _d.setMenuContainerRef, listItemFocusVisible = _d.listItemFocusVisible, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
     var itemRole = explicitRole !== null && explicitRole !== void 0 ? explicitRole : 'menuitem';
     useEffect(function () {
         var _a, _b;
@@ -130,12 +142,12 @@ var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
     }, [setMenuContainerRef]);
     var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
     var resolvedItemActions = useMemo(function () { return resolveMenuActions(getActionsElement, $item); }, [getActionsElement, $item]);
-    var shouldRenderActions = Boolean(resolvedItemActions) && !ChildMenu && !hideInlineActions;
+    var shouldRenderActions = ((_b = resolvedItemActions === null || resolvedItemActions === void 0 ? void 0 : resolvedItemActions.length) !== null && _b !== void 0 ? _b : 0) > 0 && !ChildMenu && !hideInlineActions;
     var resolvedEndEnhancer = useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu);
     var mergedOverrides = useMemo(function () { return mergeOverrides(listItemOverrides, overrides); }, [overrides]);
-    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 _f = useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen), handleMouseOver = _f.handleMouseOver, handleMouseMove = _f.handleMouseMove, resetMenu = _f.resetMenu, closeNestedMenu = _f.closeNestedMenu;
+    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 _g = useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen), handleMouseOver = _g.handleMouseOver, handleMouseMove = _g.handleMouseMove, resetMenu = _g.resetMenu, closeNestedMenu = _g.closeNestedMenu;
     var id = useUniqueId();
     var listItem = (_jsx(ListItemOverride, __assign({ id: id.toString(), ref: itemRef, role: itemRole, selected: selected, "data-haschildmenu": Boolean(ChildMenu), "data-hasactions": shouldRenderActions, highlighted: isItemHighlighted, "$outlined": isItemHighlighted && listItemFocusVisible, endEnhancer: resolvedEndEnhancer, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "$item": $item }, buildListItemAriaProps(itemRole, selected, ChildMenu), restProps, { onMouseOver: handleMouseOver, onMouseMove: handleMouseMove }, listItemProps)));
     var handleMouseEnter = useCombinedHandler(function () { return setHovered(true); }, onMouseEnter);

package/esm/menu/menu.d.ts

@@ -2,7 +2,7 @@
 import type { MenuRef } from './types';
 import type { ClassName, Styles } from '../types';
 declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("../list").ListProps, "overrides"> & {
-    getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem>;
+    getActionsElement?: import("./types").MenuItemActions<import("./types").MenuActionItem> | undefined;
     disableNavigationOnMount?: boolean | undefined;
     focusWhenNavigationEnabled?: boolean | undefined;
     keyboardFocusRestoreTarget?: HTMLElement | null | undefined;
@@ -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/esm/menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, MutableRefObject, ReactElement, ReactNode, SetStateAction } from 'react';
+import type { Dispatch, MutableRefObject, ReactElement, SetStateAction } from 'react';
 import type { ListItemProps, ListItemSharedProps, ListProps } from '../list';
 import type { Override } from '../overrides';
 import type { PopoverProps } from '../popover';
@@ -32,7 +32,15 @@ export type MenuItemActionsParams<TItem extends MenuActionItem = MenuActionItem>
  * Inline row actions: a static node for every row, or `({ item }) => …` for per-row actions
  * (permissions, conditional buttons, etc.). Function form requires `$item` on {@link MenuItem}.
  */
-export type MenuItemActions<TItem extends MenuActionItem = MenuActionItem> = ReactNode | ((params: MenuItemActionsParams<TItem>) => ReactNode);
+export type MenuItemActionsConfig = (ReactElement | null | undefined | {
+    actionEl: ReactElement | null | undefined;
+    alwaysVisible?: boolean;
+})[];
+export type ResolvedMenuItemActionsConfig = (ReactElement | {
+    actionEl: ReactElement;
+    alwaysVisible?: boolean;
+})[];
+export type MenuItemActions<TItem extends MenuActionItem = MenuActionItem> = MenuItemActionsConfig | ((params: MenuItemActionsParams<TItem>) => MenuItemActionsConfig);
 export type MenuProps = Omit<ListProps, 'overrides'> & {
     /**
      * Action buttons rendered for each MenuItem (skips submenu items). Pass `({ item }) => …` to vary actions per row.

package/esm/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/esm/progress/circular/CircularProgress.js

@@ -1,4 +1,4 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { add$props } from '../../helpers';
 import { useOverrides } from '../../overrides';
@@ -6,7 +6,7 @@ import { StyledBar, StyledBarContainer, StyledLabel, StyledLabelContainer, Style
 import { useStyle } from '../../style';
 import { getIntentColor } from '../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 = __rest(_a, ["intent", "infinite", "label", "backgroundColor", "value", "className", "style", "color", "size", "thickness", "overrides"]);
     var strokeWidth = (VIEWBOX_SIZE / size) * thickness;
     var _g = useStyle(), px2rem = _g.px2rem, theme = _g.theme;
     var sharedProps = __assign(__assign({}, add$props({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
@@ -17,7 +17,7 @@ var CircularProgress = function (_a) {
     var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _m[0], progressProps = _m[1];
     var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _o[0], labelContainerProps = _o[1];
     var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _p[0], labelProps = _p[1];
-    return (_jsxs(Root, __assign({ role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { style: [
+    return (_jsxs(Root, __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/esm/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/esm/progress/linear/LinearProgress.js

@@ -1,4 +1,4 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { add$props } from '../../helpers';
 import { useOverrides } from '../../overrides';
@@ -6,14 +6,14 @@ import { StyledBar, StyledLabel, StyledProgress, StyledRoot } from './styled-com
 import { getIntentColor } from '../helper';
 import { useStyle } from '../../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 = __rest(_a, ["intent", "value", "backgroundColor", "color", "label", "style", "className", "infinite", "overrides", "children"]);
     var sharedProps = __assign(__assign({}, add$props({ intent: intent, value: value, backgroundColor: backgroundColor, color: color, infinite: infinite })), { $withLabel: !!label });
     var theme = useStyle().theme;
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, StyledBar), 2), Bar = _f[0], barProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _g[0], progressProps = _g[1];
     var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _h[0], labelProps = _h[1];
-    return (_jsxs(Root, __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: [_jsx(Bar, __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 || (_jsx(Progress, __assign({ "data-testid": "filled-track" }, sharedProps, progressProps, { style: [
+    return (_jsxs(Root, __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: [_jsx(Bar, __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 || (_jsx(Progress, __assign({ "data-testid": "filled-track" }, sharedProps, progressProps, { style: [
                         __assign({ '--sw-bg-color': color || getIntentColor(intent, theme) }, (!infinite ? { '--sw-width': "".concat(value, "%") } : {})),
                         progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
                     ] }))) })), label ? (_jsx(Label, __assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }))) : null] })));

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

@@ -114,7 +114,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     virtual?: boolean | undefined;
     overscanCount?: number | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     inputElement?: HTMLInputElement | null | undefined;
 } & {
     $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;

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;
@@ -65,8 +64,10 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
         Checkbox?: Override<Omit<{
             'aria-describedby'?: string | undefined;
             'aria-errormessage'?: string | undefined;
+            'aria-hidden'?: boolean | "false" | "true" | undefined;
             ariaLabel?: string | undefined;
             'aria-label'?: string | undefined;
+            tabIndex?: number | undefined;
             children?: React.ReactNode;
             containsInteractiveElement?: boolean | undefined;
             overrides?: import("../../checkbox").CheckboxOverrides | undefined;

package/esm/tag/tag.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 declare const Tag: import("react").ForwardRefExoticComponent<Omit<{
     closeable?: boolean | undefined;
+    closeAriaLabel?: string | undefined;
     isFocused?: boolean | undefined;
     isHovered?: boolean | undefined;
     children?: import("react").ReactNode;

package/esm/tag/tag.js

@@ -17,7 +17,7 @@ import { useLocale } from '../locale';
 import { useTruncateWithTooltip } from '../truncateWithTooltip/hooks/useTruncateWithTooltip';
 import { getActionIconButtonOverrides, getDefaultTagSize, getTagSizeTheme, getTextFromChildren } from './utils';
 var Tag = forwardRef(function (props, ref) {
-    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.shape, shape = _b === void 0 ? 'default' : _b, _c = props.isFocused, isFocused = _c === void 0 ? false : _c, _d = props.isHovered, isHovered = _d === void 0 ? false : _d, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _e = props.onClick, onClick = _e === void 0 ? null : _e, _f = props.onKeyDown, onKeyDown = _f === void 0 ? null : _f, overrides = props.overrides, title = props.title, _g = props.variant, variant = _g === void 0 ? 'light' : _g, _h = props.intent, intent = _h === void 0 ? 'default' : _h, _j = props.appearance, appearance = _j === void 0 ? 'gray' : _j, className = props.className, startEnhancer = props.startEnhancer, noTooltipOnTruncation = props.noTooltipOnTruncation, restProps = __rest(props, ["children", "closeable", "size", "shape", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "appearance", "className", "startEnhancer", "noTooltipOnTruncation"]);
+    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, closeAriaLabel = props.closeAriaLabel, _size = props.size, _b = props.shape, shape = _b === void 0 ? 'default' : _b, _c = props.isFocused, isFocused = _c === void 0 ? false : _c, _d = props.isHovered, isHovered = _d === void 0 ? false : _d, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _e = props.onClick, onClick = _e === void 0 ? null : _e, _f = props.onKeyDown, onKeyDown = _f === void 0 ? null : _f, overrides = props.overrides, title = props.title, _g = props.variant, variant = _g === void 0 ? 'light' : _g, _h = props.intent, intent = _h === void 0 ? 'default' : _h, _j = props.appearance, appearance = _j === void 0 ? 'gray' : _j, className = props.className, startEnhancer = props.startEnhancer, noTooltipOnTruncation = props.noTooltipOnTruncation, restProps = __rest(props, ["children", "closeable", "closeAriaLabel", "size", "shape", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "appearance", "className", "startEnhancer", "noTooltipOnTruncation"]);
     var _k = useFocusVisible(), $isFocusVisible = _k.$isFocusVisible, onBlur = _k.onBlur, onFocus = _k.onFocus;
     var theme = useStyle().theme;
     var locale = useLocale();
@@ -67,7 +67,7 @@ var Tag = forwardRef(function (props, ref) {
                         actionIconButtonOverrides,
                     ], style: {
                         '--sw-color': theme.spr.iconTertiary,
-                    }, "aria-label": locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: _jsx(ActionIcon, __assign({ size: clearableIconSize }, actionIconProps)) })) }))) : null] })));
+                    }, "aria-label": closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: _jsx(ActionIcon, __assign({ size: clearableIconSize }, actionIconProps)) })) }))) : null] })));
 });
 Tag.displayName = 'Tag';
 Tag.__standard = 'Component';

package/esm/tag/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { AvatarProps } from '../avatar';
-import { Override } from '../overrides';
-import { ClassName, SpacewebComponentProps } from '../types';
+import type * as React from 'react';
+import type { AvatarProps } from '../avatar';
+import type { Override } from '../overrides';
+import type { ClassName, SpacewebComponentProps } from '../types';
 export type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
 export type Appearance = 'gray' | 'white' | 'outline';
 export type Variant = 'solid' | 'light';
@@ -16,6 +16,7 @@ export type TagOverrides = {
 };
 export type TagProps = SpacewebComponentProps<{
     closeable?: boolean;
+    closeAriaLabel?: string;
     isFocused?: boolean;
     isHovered?: boolean;
     children?: React.ReactNode;

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;