@sprinklrjs/spaceweb 14.11.0 → 14.11.4

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

@@ -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/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/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/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/menu/menu-item.js

@@ -19,12 +19,24 @@ var classNames_1 = tslib_1.__importDefault(require("../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: {
@@ -63,8 +75,17 @@ 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] })));
+    var sharedProps = _a.sharedProps, renderedActions = _a.renderedActions;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__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 ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__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 = {};
@@ -77,19 +98,9 @@ function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     return props;
 }
 function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
-    var renderedActions = (0, react_1.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 (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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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;
@@ -97,7 +108,7 @@ function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, en
             return (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 14, className: "transform -rotate-90" });
         }
         return undefined;
-    }, [ChildMenu, endEnhancer, renderedActions, shouldRenderActions]);
+    }, [ChildMenu, endEnhancer, resolvedItemActions, shouldRenderActions]);
 }
 function useMenuItemInteractionHandlers(onMouseOver, ownRef, setHighlightedItem, setNestedMenuOpen) {
     var onMouseOverRef = (0, useLatest_1.useLatest)(onMouseOver);
@@ -119,12 +130,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 = tslib_1.__rest(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "endEnhancer", "hideInlineActions", "renderAll", "role", "$item"]);
-    var _b = tslib_1.__read((0, react_1.useState)(false), 2), hovered = _b[0], setHovered = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), hovered = _c[0], setHovered = _c[1];
     var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
     var ownRef = (0, react_1.useRef)(null);
     var itemRef = (0, useCombinedRef_1.default)(ref, ownRef);
-    var _c = (0, MenuContext_1.useMenuContext)(), getActionsElement = _c.getActionsElement, highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
+    var _d = (0, MenuContext_1.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';
     (0, react_1.useEffect)(function () {
         var _a, _b;
@@ -132,12 +144,12 @@ var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
     }, [setMenuContainerRef]);
     var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
     var resolvedItemActions = (0, react_1.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 = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(listItemOverrides, overrides); }, [overrides]);
-    var _d = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _d[0], listItemProps = _d[1];
-    var _e = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.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 = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _e[0], listItemProps = _e[1];
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.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 = (0, useUniqueId_1.default)();
     var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, tslib_1.__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 = (0, useCombinedHandler_1.default)(function () { return setHovered(true); }, onMouseEnter);

package/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.11.0",
+  "version": "14.11.4",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -16,9 +16,10 @@
     "clean": "rm -rf dist && rm -f tsconfig.build.tsbuildinfo",
     "test": "jest",
     "test:watch": "jest --watch",
+    "test-a11y": "jest --config jest.a11y.config.js",
     "//": "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 +34,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 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.11.0",
+    "@sprinklrjs/spaceweb-themes": "14.11.4",
     "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.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/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;
@@ -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/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/tag/tag.js

@@ -19,7 +19,7 @@ var locale_1 = require("../locale");
 var useTruncateWithTooltip_1 = require("../truncateWithTooltip/hooks/useTruncateWithTooltip");
 var utils_1 = require("./utils");
 var Tag = (0, react_1.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 = tslib_1.__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 = tslib_1.__rest(props, ["children", "closeable", "closeAriaLabel", "size", "shape", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "appearance", "className", "startEnhancer", "noTooltipOnTruncation"]);
     var _k = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _k.$isFocusVisible, onBlur = _k.onBlur, onFocus = _k.onFocus;
     var theme = (0, style_1.useStyle)().theme;
     var locale = (0, locale_1.useLocale)();
@@ -69,7 +69,7 @@ var Tag = (0, react_1.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: (0, jsx_runtime_1.jsx)(ActionIcon, tslib_1.__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: (0, jsx_runtime_1.jsx)(ActionIcon, tslib_1.__assign({ size: clearableIconSize }, actionIconProps)) })) }))) : null] })));
 });
 Tag.displayName = 'Tag';
 Tag.__standard = 'Component';