@cccsaurora/howler-ui 3.1.0-dev.1635 → 3.1.0-dev.1636

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1635",
+  "version": "3.1.0-dev.1636",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/plugins/clue/components/CluePivot.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClueActionsSelector, useClueEnrichSelector } from '@cccsaurora/clue-ui';
 import { Icon } from '@iconify/react';
 import { Settings } from '@mui/icons-material';
@@ -124,8 +124,9 @@ const CluePivot = ({ pivot, hit, compact, variant = 'card', onNavigate }) => {
     if (!actions[pivot.value]) {
         return null;
     }
+    const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { noWrap: true, children: pivot.label[i18n.language] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(IconButton, { size: "small", onClick: e => onClueClick(e, true), children: _jsx(Settings, { fontSize: "small" }) })] }));
     if (variant === 'menu-item') {
-        return (_jsxs(Stack, { component: "button", type: "button", role: "menuitem", onClick: event => {
+        return (_jsx(Stack, { role: "menuitem", onClick: event => {
                 void onClueClick(event);
                 onNavigate?.();
             }, direction: "row", spacing: 1, alignItems: "center", sx: theme => ({
@@ -138,7 +139,7 @@ const CluePivot = ({ pivot, hit, compact, variant = 'card', onNavigate }) => {
                 font: 'inherit',
                 textAlign: 'left',
                 '&:hover': { backgroundColor: theme.palette.action.hover }
-            }), children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { noWrap: true, children: pivot.label[i18n.language] })] }));
+            }), children: children }));
     }
     return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: e => onClueClick(e), sx: [
             theme => ({
@@ -155,6 +156,6 @@ const CluePivot = ({ pivot, hit, compact, variant = 'card', onNavigate }) => {
                     cursor: 'pointer'
                 },
             !compact && { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { children: pivot.label[i18n.language] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(IconButton, { size: "small", onClick: e => onClueClick(e, true), children: _jsx(Settings, { fontSize: "small" }) })] }) }));
+        ], children: _jsx(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: children }) }));
 };
 export default memo(CluePivot);

package/plugins/clue/components/CluePivot.test.js

@@ -67,7 +67,7 @@ describe('CluePivot', () => {
         clueState.guessType.mockReturnValue('indicator');
         showErrorMessage.mockReset();
     });
-    it('renders a menu item and executes the mapped action without opening a window', async () => {
+    it('renders a menu item and executes the mapped action', async () => {
         const user = userEvent.setup();
         const onNavigate = vi.fn();
         render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier, variant: "menu-item", onNavigate: onNavigate }) }));
@@ -77,6 +77,16 @@ describe('CluePivot', () => {
             expect(clueState.executeAction).toHaveBeenCalledWith('enrich', [{ type: 'indicator', value: 'hit-1' }], { note: 'from-pivot' }, { forceMenu: false });
         });
     });
+    it('opens the force menu from the settings control in a menu item', async () => {
+        const user = userEvent.setup();
+        const onNavigate = vi.fn();
+        render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier, variant: "menu-item", onNavigate: onNavigate }) }));
+        await user.click(screen.getByRole('button', { name: '' }));
+        expect(onNavigate).not.toHaveBeenCalled();
+        await waitFor(() => {
+            expect(clueState.executeAction).toHaveBeenCalledWith('enrich', [{ type: 'indicator', value: 'hit-1' }], { note: 'from-pivot' }, { forceMenu: true });
+        });
+    });
     it('passes forceMenu when the settings button is clicked on a card pivot', async () => {
         const user = userEvent.setup();
         render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier, compact: true }) }));