@sprinklrjs/spaceweb 14.11.3 → 14.11.4

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,10 +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 pointer-events-none', 'group-hover:visible group-hover:pointer-events-auto', 'group-focus-within:visible group-focus-within:pointer-events-auto', 
-        // Use visibility (not opacity) so alwaysVisible children can override with `visible`.
-        sharedProps.$highlighted ? 'visible pointer-events-auto' : 'invisible'), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions.map(function (action) { return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: action.props.alwaysVisible ? 'visible opacity-100 pointer-events-auto' : undefined }, { children: action }), action.key)); }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
+    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 = {};
@@ -78,28 +97,10 @@ function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     }
     return props;
 }
-function flattenActionElements(actions) {
-    return React.Children.toArray(actions).flatMap(function (node) {
-        if (React.isValidElement(node)) {
-            return node.type === React.Fragment ? flattenActionElements(node.props.children) : [node];
-        }
-        return [];
-    });
-}
 function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
-    var renderedActions = (0, react_1.useMemo)(function () {
-        return shouldRenderActions
-            ? flattenActionElements(resolvedItemActions).map(function (action, index) {
-                var _a;
-                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 !== null && renderedActions !== void 0 ? 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;
@@ -107,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);
@@ -129,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;
@@ -142,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;

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.3",
+  "version": "14.11.4",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -16,6 +16,7 @@
     "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": "tsc",
@@ -99,7 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.11.3",
+    "@sprinklrjs/spaceweb-themes": "14.11.4",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

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/SelectMenuItem.d.ts

@@ -64,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';

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