@cccsaurora/howler-ui 3.1.0-dev.1609 → 3.1.0-dev.1617

package/api/dossier/groups.d.ts

@@ -0,0 +1,2 @@
+export declare const uri: () => string;
+export declare const get: (prefix: string) => Promise<string[] | undefined>;

package/api/dossier/groups.js

@@ -0,0 +1,4 @@
+import { hget, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/dossier';
+export const uri = () => joinAllUri(parentUri(), 'groups');
+export const get = (prefix) => hget(uri(), new URLSearchParams({ prefix }));

package/api/dossier/groups.test.d.ts

@@ -0,0 +1 @@
+export {};

package/api/dossier/groups.test.js

@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockHget = vi.hoisted(() => vi.fn());
+vi.mock('api', async () => {
+    const urlJoin = (await import('url-join')).default;
+    return {
+        hget: mockHget,
+        joinAllUri: (...parts) => urlJoin(...parts)
+    };
+});
+vi.mock('api/dossier', () => ({
+    uri: () => '/api/v1/dossier'
+}));
+import { get, uri } from './groups';
+describe('dossier groups API', () => {
+    beforeEach(() => {
+        mockHget.mockReset();
+    });
+    it('builds the groups endpoint URI', () => {
+        expect(uri()).toBe('/api/v1/dossier/groups');
+    });
+    it('requests groups with the prefix query parameter', async () => {
+        mockHget.mockResolvedValue(['network/dns']);
+        await expect(get('network')).resolves.toEqual(['network/dns']);
+        expect(mockHget).toHaveBeenCalledWith('/api/v1/dossier/groups', new URLSearchParams({ prefix: 'network' }));
+    });
+});

package/api/{dossier.d.ts → dossier/index.d.ts}

@@ -1,6 +1,6 @@
 import { hget, type HowlerRefreshParam } from '@cccsaurora/howler-ui/api';
 import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
-import * as hit from './hit';
+import * as groups from './groups';
 export declare const uri: (id?: string) => string;
 export declare const get: {
     (id: string): ReturnType<typeof hget<Dossier>>;
@@ -13,4 +13,4 @@ declare const permission: {
     put: (id: string, data: import("api/utils/createPermissionsApi").PermissionData) => Promise<Dossier | undefined>;
     delete: (id: string, data: import("api/utils/createPermissionsApi").PermissionData) => Promise<Dossier | undefined>;
 };
-export { hit, permission };
+export { groups, permission };

package/api/{dossier.js → dossier/index.js}

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-cycle
 import { hdelete, hget, hpost, hput, joinAllUri, joinUri, uri as parentUri } from '@cccsaurora/howler-ui/api';
 import createPermissionsApi from '@cccsaurora/howler-ui/api/utils/createPermissionsApi';
-import * as hit from './hit';
+import * as groups from './groups';
 export const uri = (id) => {
     return id ? joinAllUri(parentUri(), 'dossier', id) : joinUri(parentUri(), 'dossier');
 };
@@ -18,4 +18,4 @@ export const del = (id, refresh) => {
     return hdelete(uri(id), undefined, undefined, refresh ? new URLSearchParams({ refresh }) : undefined);
 };
 const permission = createPermissionsApi(uri);
-export { hit, permission };
+export { groups, permission };

package/components/elements/display/HowlerCard.d.ts

@@ -1,3 +1,3 @@
 import type { CardProps } from '@mui/material';
-declare const _default: import("react").NamedExoticComponent<CardProps>;
+declare const _default: import("react").NamedExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/components/elements/display/HowlerCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
-import { memo } from 'react';
-const HowlerCard = props => _jsx(Card, { elevation: props.variant !== 'outlined' ? 1 : 0, ...props });
+import { forwardRef, memo } from 'react';
+const HowlerCard = forwardRef((props, ref) => (_jsx(Card, { ref: ref, elevation: props.variant !== 'outlined' ? 1 : 0, ...props })));
 export default memo(HowlerCard);

package/components/elements/hit/HitLinks.js

@@ -1,37 +1,41 @@
-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 { Grid, gridClasses } from '@mui/material';
-import { sortBy, uniqBy } from 'lodash-es';
+import { isEmpty, sortBy, uniqBy } from 'lodash-es';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
-import ResolvePivotUrl from '@cccsaurora/howler-ui/components/elements/hit/ResolvePivotUrl';
-import PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import PivotFolderMenu from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/PivotFolderMenu';
+import PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/PivotLink';
 import RelatedLink from '@cccsaurora/howler-ui/components/elements/hit/related/RelatedLink';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { getDossierPivotKey, pivotForest } from '@cccsaurora/howler-ui/components/routes/dossiers/utils';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 const HitLinks = ({ hit, analytic, dossiers = [] }) => {
     const { i18n } = useTranslation();
+    const [pivotGroupEnabled] = useMyLocalStorageItem(StorageKey.PIVOT_GROUP, true);
     const displayLinks = useMemo(() => uniqBy(hit?.howler?.links ?? [], 'href').slice(0, 3), [hit?.howler?.links]);
-    const displayPivots = useMemo(() => {
-        const flattened = dossiers.flatMap(dossier => (dossier.pivots ?? []).map(pivot => {
-            const pivotUrl = pivot.format === 'link' ? ResolvePivotUrl(pivot, hit) : undefined;
-            return {
-                pivot,
-                dossier,
-                resolvedUrl: pivotUrl || `/dossier/${dossier.dossier_id}`
-            };
-        }));
-        return sortBy(flattened, item => item.pivot.label?.[i18n.language]);
-    }, [dossiers, i18n.language, hit]);
+    // grouped: organize pivots into a forest of groups, each with a single root button
+    const forest = useMemo(() => (pivotGroupEnabled ? pivotForest(dossiers, i18n.language) : []), [pivotGroupEnabled, dossiers, i18n.language]);
+    const rootPivots = useMemo(() => forest.find(node => isEmpty(node.path))?.pivots ?? [], [forest]);
+    // each distinct top-level group is its own tree, represented by a single root button (its own top node)
+    const groups = useMemo(() => forest.filter(node => !isEmpty(node.path)), [forest]);
+    // ungrouped (legacy): a flat, alphabetically sorted list of every pivot, exactly as it was before grouping
+    const flatPivots = useMemo(() => {
+        if (pivotGroupEnabled) {
+            return [];
+        }
+        return sortBy(dossiers.flatMap(dossier => (dossier.pivots ?? []).map(pivot => ({ pivot, dossier }))), item => item.pivot.label?.[i18n.language]);
+    }, [pivotGroupEnabled, dossiers, i18n.language]);
     const hasNotebooks = (analytic?.notebooks?.length ?? 0) > 0;
-    if (displayLinks.length === 0 && displayPivots.length === 0 && !hasNotebooks) {
+    if (displayLinks.length === 0 &&
+        !(pivotGroupEnabled ? rootPivots.length > 0 || groups.length > 0 : flatPivots.length > 0) &&
+        !hasNotebooks) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.root}`]: { display: 'flex' } }, children: [displayLinks
+    return (_jsxs(Grid, { container: true, spacing: 1, pr: 2, sx: { [`& .${gridClasses.root}`]: { display: 'flex' } }, children: [pivotGroupEnabled ? (_jsxs(_Fragment, { children: [groups.map(node => (_jsx(Grid, { children: _jsx(PivotFolderMenu, { node: node, hit: hit }) }, node.path))), rootPivots.map(({ pivot, dossier }) => (_jsx(Grid, { children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, compact: true }) }, getDossierPivotKey(dossier, pivot))))] })) : (flatPivots.map(({ pivot, dossier }) => (_jsx(Grid, { children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, compact: true }) }, getDossierPivotKey(dossier, pivot))))), displayLinks
                 .filter(link => !!link.href)
                 .map(link => {
-                const safeTitle = link.title ?? link.href;
-                return (_jsx(Grid, { children: _jsx(RelatedLink, { compact: true, title: safeTitle, href: link.href, target: "_blank", rel: "noopener noreferrer" }) }, link.href));
-            }), displayPivots.map(({ pivot, dossier, resolvedUrl }) => {
-                return (_jsx(Grid, { children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, resolvedUrl: resolvedUrl, compact: true }) }, `${dossier.dossier_id}-${pivot.value}`));
+                return (_jsx(Grid, { children: _jsx(RelatedLink, { compact: true, icon: link.icon, title: link.title ?? link.href, href: link.href, target: "_blank", rel: "noopener noreferrer" }) }, link.href));
             }), hasNotebooks && (_jsx(Grid, { children: _jsx(HitNotebooks, { analytic: analytic, hit: hit, compact: true }) }))] }));
 };
 export default HitLinks;

package/components/elements/hit/HitLinks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/hit/HitLinks.test.js

@@ -0,0 +1,118 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { act, render, screen } from '@testing-library/react';
+import { setupLocalStorageMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import HitLinks from './HitLinks';
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'en' }, t: (key) => key })
+}));
+vi.mock('components/elements/hit/related/pivots/PivotFolderMenu', () => ({
+    default: ({ node }) => _jsx("span", { children: `group:${node.path}` })
+}));
+const pivotLifecycle = vi.hoisted(() => ({ mounted: vi.fn(), unmounted: vi.fn() }));
+vi.mock('components/elements/hit/related/pivots/PivotLink', async () => {
+    const { useEffect } = await import('react');
+    return {
+        default: ({ pivot }) => {
+            useEffect(() => {
+                pivotLifecycle.mounted(pivot.value);
+                return () => pivotLifecycle.unmounted(pivot.value);
+            }, [pivot.value]);
+            return _jsx("span", { children: `pivot:${pivot.value}` });
+        }
+    };
+});
+vi.mock('components/elements/hit/related/RelatedLink', () => ({
+    default: ({ title, href }) => _jsx("a", { href: href, children: title })
+}));
+const mockLocalStorage = setupLocalStorageMock();
+const pivotGroupStorageKey = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.PIVOT_GROUP}`;
+const setPivotGrouping = async (enabled) => {
+    await act(async () => {
+        mockLocalStorage.setItem(pivotGroupStorageKey, JSON.stringify(enabled));
+        window.dispatchEvent(new StorageEvent('storage', {
+            key: pivotGroupStorageKey,
+            newValue: JSON.stringify(enabled)
+        }));
+    });
+};
+const dossier = {
+    dossier_id: 'dossier-1',
+    pivots: [
+        { value: 'root', label: { en: 'Root' } },
+        { value: 'example', group: 'network', label: { en: 'Example' } },
+        { value: 'example-two', group: 'network', label: { en: 'Example Two' } }
+    ]
+};
+describe('HitLinks pivot grouping', () => {
+    beforeEach(() => {
+        mockLocalStorage.clear();
+        pivotLifecycle.mounted.mockClear();
+        pivotLifecycle.unmounted.mockClear();
+    });
+    it('replaces grouped and flat pivots without accumulating renders', async () => {
+        render(_jsx(_Fragment, { children: _jsx(HitLinks, { dossiers: [dossier] }) }));
+        expect(screen.getByText('group:network')).toBeInTheDocument();
+        expect(screen.getAllByText('pivot:root')).toHaveLength(1);
+        expect(screen.queryByText('pivot:example')).not.toBeInTheDocument();
+        expect(pivotLifecycle.mounted).toHaveBeenCalledWith('root');
+        await setPivotGrouping(false);
+        expect(screen.queryByText('group:network')).not.toBeInTheDocument();
+        expect(screen.getAllByText('pivot:root')).toHaveLength(1);
+        expect(screen.getAllByText('pivot:example')).toHaveLength(1);
+        expect(screen.getAllByText('pivot:example-two')).toHaveLength(1);
+        expect(pivotLifecycle.unmounted).toHaveBeenCalledWith('root');
+        expect(pivotLifecycle.mounted.mock.calls.filter(([value]) => value === 'root')).toHaveLength(2);
+        await setPivotGrouping(true);
+        expect(screen.getByText('group:network')).toBeInTheDocument();
+        expect(screen.getAllByText('pivot:root')).toHaveLength(1);
+        expect(screen.queryByText('pivot:example')).not.toBeInTheDocument();
+        expect(screen.queryByText('pivot:example-two')).not.toBeInTheDocument();
+        await setPivotGrouping(false);
+        expect(screen.queryByText('group:network')).not.toBeInTheDocument();
+        expect(screen.getAllByText('pivot:root')).toHaveLength(1);
+        expect(screen.getAllByText('pivot:example')).toHaveLength(1);
+        expect(screen.getAllByText('pivot:example-two')).toHaveLength(1);
+    });
+    it('does not accumulate pivots that share an action value', async () => {
+        const repeatedValueDossier = {
+            dossier_id: 'dossier-1',
+            pivots: [
+                { value: 'example', group: 'network', label: { en: 'Network Example' } },
+                { value: 'example', group: 'host', label: { en: 'Host Example' } }
+            ]
+        };
+        render(_jsx(HitLinks, { dossiers: [repeatedValueDossier] }));
+        await setPivotGrouping(false);
+        expect(screen.getAllByText('pivot:example')).toHaveLength(2);
+        await setPivotGrouping(true);
+        await setPivotGrouping(false);
+        expect(screen.getAllByText('pivot:example')).toHaveLength(2);
+        await setPivotGrouping(true);
+        await setPivotGrouping(false);
+        expect(screen.getAllByText('pivot:example')).toHaveLength(2);
+    });
+    it('renders at most three unique external links and omits empty hrefs', () => {
+        render(_jsx(HitLinks, { hit: {
+                howler: {
+                    links: [
+                        { href: 'https://one.example', title: 'One' },
+                        { href: 'https://two.example', title: 'Two' },
+                        { href: 'https://three.example', title: 'Three' },
+                        { href: '', title: 'Empty' },
+                        { href: 'https://four.example', title: 'Four' }
+                    ]
+                }
+            } }));
+        expect(screen.getByRole('link', { name: 'One' })).toBeInTheDocument();
+        expect(screen.queryByText('Empty')).not.toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'Two' })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'Three' })).toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Four' })).not.toBeInTheDocument();
+    });
+    it('renders nothing when there are no links, pivots, or notebooks', () => {
+        const { container } = render(_jsx(HitLinks, {}));
+        expect(container).toBeEmptyDOMElement();
+    });
+});

package/components/elements/hit/related/RelatedIcon.js

@@ -22,6 +22,7 @@ const RelatedIcon = ({ icon, title, href, compact = false }) => {
     if (avatarImage) {
         return (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: avatarImage, sx: [
                 theme => ({
+                    alignSelf: 'start',
                     width: theme.spacing(compact ? 4 : 6),
                     height: theme.spacing(compact ? 4 : 6),
                     '& img': {
@@ -31,6 +32,6 @@ const RelatedIcon = ({ icon, title, href, compact = false }) => {
                 !avatarImage && { backgroundColor: 'transparent' }
             ], children: avatarImage }));
     }
-    return _jsx(Icon, { fontSize: "1.5rem", icon: icon });
+    return _jsx(Icon, { style: { alignSelf: 'start' }, fontSize: "1.5rem", icon: icon });
 };
 export default RelatedIcon;

package/components/elements/hit/related/RelatedIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/hit/related/RelatedIcon.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import RelatedIcon from './RelatedIcon';
+const theme = vi.hoisted(() => ({ isDark: false }));
+vi.mock('@iconify/react', () => ({
+    Icon: ({ icon, fontSize }) => (_jsx("span", { id: "icon", "data-icon": icon, "data-font-size": fontSize }))
+}));
+vi.mock('@tui/core', () => ({
+    useAppTheme: () => theme
+}));
+const renderWithConfig = (children, config = {}) => {
+    return render(_jsx(ApiConfigContext.Provider, { value: { config, setConfig: vi.fn(), loaded: true }, children: children }));
+};
+describe('RelatedIcon', () => {
+    beforeEach(() => {
+        theme.isDark = false;
+    });
+    it('renders nothing when no icon is provided', () => {
+        const { container } = renderWithConfig(_jsx(RelatedIcon, { title: "Example" }));
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('renders a configured application image case-insensitively', () => {
+        renderWithConfig(_jsx(RelatedIcon, { icon: "cLuE", title: "Clue" }), {
+            configuration: {
+                ui: {
+                    apps: [
+                        {
+                            name: 'Clue',
+                            img_l: 'https://example.test/clue-light.png',
+                            img_d: 'https://example.test/clue-dark.png',
+                            alt: 'Clue',
+                            route: '/clue',
+                            classification: 'U'
+                        }
+                    ]
+                }
+            }
+        });
+        expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.test/clue-light.png');
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'Clue');
+    });
+    it('uses the dark configured application image when the app theme is dark', () => {
+        theme.isDark = true;
+        renderWithConfig(_jsx(RelatedIcon, { icon: "Clue", title: "Clue" }), {
+            configuration: {
+                ui: {
+                    apps: [
+                        {
+                            name: 'Clue',
+                            img_l: 'https://example.test/clue-light.png',
+                            img_d: 'https://example.test/clue-dark.png',
+                            alt: 'Clue',
+                            route: '/clue',
+                            classification: 'U'
+                        }
+                    ]
+                }
+            }
+        });
+        expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.test/clue-dark.png');
+    });
+    it('renders a direct HTTP icon as an avatar image', () => {
+        renderWithConfig(_jsx(RelatedIcon, { icon: "http://example.test/icon.svg", href: "https://example.test" }));
+        expect(screen.getByRole('img')).toHaveAttribute('src', 'http://example.test/icon.svg');
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'https://example.test');
+    });
+    it('uses the title as the image alt text when no href is provided', () => {
+        renderWithConfig(_jsx(RelatedIcon, { icon: "https://example.test/icon.svg", title: "Example", compact: true }));
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'Example');
+        expect(screen.getByRole('img').parentElement).toHaveStyle({ width: '32px', height: '32px' });
+    });
+    it('renders an Iconify icon when no image can be resolved', () => {
+        renderWithConfig(_jsx(RelatedIcon, { icon: "mdi:link-variant" }));
+        expect(screen.getByTestId('icon')).toHaveAttribute('data-icon', 'mdi:link-variant');
+        expect(screen.getByTestId('icon')).toHaveAttribute('data-font-size', '1.5rem');
+    });
+});

package/components/elements/hit/related/RelatedLink.d.ts

@@ -7,5 +7,10 @@ declare const RelatedLink: React.FC<PropsWithChildren<{
     target?: string;
     rel?: string;
     tooltip?: React.ReactNode;
+    dense?: boolean;
+    secondary?: React.ReactNode;
+    action?: React.ReactNode;
+    menuItem?: boolean;
+    onNavigate?: () => void;
 }>>;
 export default RelatedLink;

package/components/elements/hit/related/RelatedLink.js

@@ -1,18 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Tooltip, Typography } from '@mui/material';
+import { ListItemText, Stack, Tooltip, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import RelatedLinkTooltip from '@cccsaurora/howler-ui/components/elements/hit/RelatedLinkTooltip';
 import React, {} from 'react';
-import { Link } from 'react-router';
 import RelatedIcon from './RelatedIcon';
-const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip, children }) => {
+const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip, dense = false, secondary, action, menuItem, onNavigate, children }) => {
     const safeTitle = title ?? href ?? '';
+    if (dense) {
+        return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { width: '100%' }, children: [_jsxs(Stack, { component: "a", href: href, target: target, rel: rel, role: menuItem ? 'menuitem' : undefined, onClick: onNavigate, direction: "row", spacing: 1, alignItems: "center", sx: theme => ({
+                        color: 'text.primary',
+                        flex: 1,
+                        minWidth: 0,
+                        p: 0.5,
+                        borderRadius: 1,
+                        textDecoration: 'none',
+                        display: 'flex',
+                        alignItems: 'center',
+                        transition: theme.transitions.create(['background-color']),
+                        '&:hover': { backgroundColor: 'action.hover', '& .pivot-title': { textDecoration: 'underline' } }
+                    }), children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: true }), _jsx(ListItemText, { primary: _jsx(Typography, { noWrap: true, className: "pivot-title", children: safeTitle }), secondary: secondary, secondaryTypographyProps: { component: 'div', noWrap: true } })] }), action] }));
+    }
     const tooltipContent = tooltip ?? _jsx(RelatedLinkTooltip, { title: safeTitle, href: href ?? '' });
-    return (_jsx(Tooltip, { title: tooltipContent, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => href && window.open(href, target), sx: [
+    return (_jsx(Tooltip, { title: tooltipContent, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', sx: [
                     theme => ({
-                        cursor: 'pointer',
                         backgroundColor: 'transparent',
                         transition: theme.transitions.create(['border-color']),
+                        display: 'flex',
+                        alignItems: 'center',
                         '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
                         '& > div': {
                             height: '100%'
@@ -20,6 +34,9 @@ const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip,
                         '& a': { textDecoration: 'none', color: 'text.primary' }
                     }),
                     !compact && { border: 'thin solid', borderColor: 'transparent' }
-                ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href ?? '#', target: target, rel: rel, onClick: e => e.stopPropagation(), children: safeTitle })] }) }, href) }) }));
+                ], children: _jsxs(Stack, { component: "a", href: href, target: target, rel: rel, onClick: onNavigate, direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", sx: {
+                        color: 'text.primary',
+                        textDecoration: 'none'
+                    }, children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { children: safeTitle })] }) }) }) }));
 };
 export default RelatedLink;

package/components/elements/hit/related/RelatedLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/hit/related/RelatedLink.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import RelatedLink from './RelatedLink';
+describe('RelatedLink', () => {
+    it('renders dense links as native links without opening them through the card handler', async () => {
+        const user = userEvent.setup();
+        const open = vi.spyOn(window, 'open').mockReturnValue(null);
+        render(_jsx(RelatedLink, { title: "Example", href: "https://example.test/pivot", target: "_blank", rel: "noopener noreferrer", dense: true, children: _jsx("span", { children: "Icon" }) }));
+        const link = screen.getByRole('link', { name: /example/i });
+        expect(link).toHaveAttribute('href', 'https://example.test/pivot');
+        expect(link).toHaveAttribute('target', '_blank');
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+        await user.click(link);
+        expect(open).not.toHaveBeenCalled();
+        open.mockRestore();
+    });
+    it('renders dense secondary content and a trailing action outside the link', () => {
+        render(_jsx(RelatedLink, { title: "Example", href: "https://example.test/pivot", dense: true, secondary: _jsx("span", { children: "Details" }), action: _jsx("button", { type: "button", children: "Settings" }) }));
+        expect(screen.getByText('Details')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Settings' }).closest('a')).toBeNull();
+    });
+    it('renders regular links as a single keyboard-accessible link', () => {
+        render(_jsx(MemoryRouter, { children: _jsx(RelatedLink, { title: "Example", href: "https://example.test/pivot", target: "_blank", rel: "noopener noreferrer", children: _jsx("span", { children: "Icon" }) }) }));
+        const link = screen.getByRole('link', { name: /example/i });
+        expect(link).toHaveAttribute('href', 'https://example.test/pivot');
+        expect(link.closest('.MuiCard-root')).not.toBeNull();
+    });
+});

package/components/elements/hit/related/pivots/PivotFlyout.d.ts

@@ -0,0 +1,25 @@
+import { type PopperProps } from '@mui/material';
+import type { FC, ReactNode } from 'react';
+/** Props for the floating menu container used by pivot navigation. */
+interface PivotFlyoutProps {
+    /** Element that anchors the flyout position. */
+    anchorEl: HTMLElement | null;
+    /** Whether to focus the first menu item when the flyout opens. */
+    focusOnOpen: boolean;
+    /** Menu content rendered inside the flyout. */
+    children: ReactNode;
+    /** DOM id assigned to the flyout menu container. */
+    id: string;
+    /** Position of the flyout relative to its anchor. */
+    placement?: PopperProps['placement'];
+    /** Closes the flyout. */
+    onClose: () => void;
+    /** Handles pointer entry into the flyout. */
+    onMouseEnter: () => void;
+    /** Handles pointer exit from the flyout. */
+    onMouseLeave: () => void;
+    /** Whether the flyout is visible. */
+    open: boolean;
+}
+declare const PivotFlyout: FC<PivotFlyoutProps>;
+export default PivotFlyout;

package/components/elements/hit/related/pivots/PivotFlyout.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClickAwayListener, Paper, Popper } from '@mui/material';
+import { useEffect, useRef } from 'react';
+const PivotFlyout = ({ anchorEl, focusOnOpen, children, id, placement, onClose, onMouseEnter, onMouseLeave, open }) => {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (open && focusOnOpen) {
+            menuRef.current?.querySelector('[role="menuitem"]')?.focus();
+        }
+    }, [focusOnOpen, open]);
+    useEffect(() => {
+        if (!open && document.activeElement && menuRef.current?.contains(document.activeElement)) {
+            anchorEl?.focus();
+        }
+    }, [anchorEl, open]);
+    const onKeyDown = (event) => {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+    };
+    return (_jsx(Popper, { open: open, anchorEl: anchorEl, placement: placement ?? 'right-start', keepMounted: false, sx: { zIndex: theme => theme.zIndex.modal + 1 }, children: _jsx(ClickAwayListener, { onClickAway: () => onClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: _jsx(Paper, { elevation: 4, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onKeyDown: onKeyDown, children: _jsx("div", { id: id, ref: menuRef, children: children }) }) }) }));
+};
+export default PivotFlyout;

package/components/elements/hit/related/pivots/PivotFlyoutContent.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { PivotFlyoutContentProps } from './types';
+declare const PivotFlyoutContent: FC<PivotFlyoutContentProps>;
+export default PivotFlyoutContent;

package/components/elements/hit/related/pivots/PivotFlyoutContent.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { MenuItem, MenuList } from '@mui/material';
+import PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/PivotLink';
+import { getDossierPivotKey } from '@cccsaurora/howler-ui/components/routes/dossiers/utils';
+import { useId, useState } from 'react';
+import PivotFlyout from './PivotFlyout';
+import { useHoverMenu } from './utils';
+const PivotSubMenuItem = ({ node, hit, onClose, onMenuEnter, onNavigate, onOpen, open }) => {
+    const { isOpen, shouldFocusMenu, openMenu, cancelClose, scheduleClose, closeMenu } = useHoverMenu();
+    const [rowElement, setRowElement] = useState(null);
+    const menuId = useId();
+    const openSubmenu = (focusMenu = false) => {
+        onOpen();
+        openMenu(focusMenu);
+    };
+    const closeSubmenu = () => {
+        closeMenu();
+        onClose();
+        rowElement?.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            closeSubmenu();
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            openSubmenu(true);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { ref: setRowElement, "aria-haspopup": "menu", "aria-controls": isOpen && open ? menuId : undefined, "aria-expanded": isOpen && open, onMouseEnter: () => openSubmenu(), onMouseLeave: () => scheduleClose(), onClick: event => openSubmenu(event.detail === 0), onKeyDown: onKeyDown, sx: { justifyContent: 'space-between', gap: 2 }, children: [node.path, _jsx(KeyboardArrowRight, { fontSize: "small" })] }), _jsx(PivotFlyout, { id: menuId, anchorEl: rowElement, focusOnOpen: shouldFocusMenu, open: isOpen && open, onClose: closeSubmenu, onMouseEnter: () => {
+                    cancelClose();
+                    onMenuEnter?.();
+                }, onMouseLeave: () => scheduleClose(), children: _jsx(PivotFlyoutContent, { pivots: node.pivots ?? [], groups: node.children ?? [], hit: hit, onMenuEnter: cancelClose, onNavigate: onNavigate }) })] }));
+};
+const PivotFlyoutContent = ({ pivots, groups, hit, onMenuEnter, onNavigate }) => {
+    const [openGroup, setOpenGroup] = useState();
+    return (_jsxs(MenuList, { disablePadding: true, children: [groups.map(group => (_jsx(PivotSubMenuItem, { node: group, hit: hit, open: openGroup === group.path, onOpen: () => setOpenGroup(group.path), onClose: () => setOpenGroup(undefined), onMenuEnter: onMenuEnter, onNavigate: onNavigate }, group.path))), pivots.map(({ pivot, dossier }) => (_jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, variant: "menu-item", onNavigate: onNavigate }, getDossierPivotKey(dossier, pivot))))] }));
+};
+export default PivotFlyoutContent;

package/components/elements/hit/related/pivots/PivotFlyoutContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/hit/related/pivots/PivotFlyoutContent.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import PivotFlyoutContent from './PivotFlyoutContent';
+vi.mock('components/elements/hit/related/pivots/PivotLink', () => ({
+    default: ({ pivot, onNavigate }) => (_jsx("button", { type: "button", role: "menuitem", onClick: onNavigate, children: pivot.label?.en }))
+}));
+const dossier = { dossier_id: 'dossier-1' };
+const pivot = (value, label) => ({
+    format: 'link',
+    value,
+    label: { en: label, fr: label }
+});
+describe('PivotFlyoutContent', () => {
+    it('opens and closes a nested group with keyboard navigation', async () => {
+        const user = userEvent.setup();
+        const groups = [
+            {
+                path: 'network',
+                pivots: [{ pivot: pivot('dns', 'DNS'), dossier }],
+                children: []
+            }
+        ];
+        render(_jsx(PivotFlyoutContent, { pivots: [], groups: groups }));
+        const group = screen.getByRole('menuitem', { name: 'network' });
+        await user.click(group);
+        expect(group).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByRole('menuitem', { name: 'DNS' })).toBeInTheDocument();
+        await user.keyboard('{ArrowLeft}');
+        expect(group).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByRole('menuitem', { name: 'DNS' })).not.toBeInTheDocument();
+    });
+    it('calls onNavigate when a pivot is selected', async () => {
+        const user = userEvent.setup();
+        const onNavigate = vi.fn();
+        render(_jsx(PivotFlyoutContent, { pivots: [{ pivot: pivot('root', 'Root'), dossier }], groups: [], onNavigate: onNavigate }));
+        await user.click(screen.getByRole('menuitem', { name: 'Root' }));
+        expect(onNavigate).toHaveBeenCalledOnce();
+    });
+});

package/components/elements/hit/related/pivots/PivotFolderMenu.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { PivotFolderMenuProps } from './types';
+declare const PivotFolderMenu: FC<PivotFolderMenuProps>;
+export default PivotFolderMenu;