@cccsaurora/howler-ui 2.19.0-cases.863 → 2.19.0-dev.1023

package/components/elements/display/DynamicTabs.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DynamicTabs from './DynamicTabs';
+describe('DynamicTabs', () => {
+    const tabs = [
+        { title: 'Tab One', children: _jsx("div", { children: "Content One" }) },
+        { title: 'Tab Two', children: _jsx("div", { children: "Content Two" }) },
+        { title: 'Tab Three', children: _jsx("div", { children: "Content Three" }) }
+    ];
+    describe('rendering', () => {
+        it('renders all tab labels', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            expect(screen.getByText('Tab One')).toBeInTheDocument();
+            expect(screen.getByText('Tab Two')).toBeInTheDocument();
+            expect(screen.getByText('Tab Three')).toBeInTheDocument();
+        });
+        it('renders the first tab content by default', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            expect(screen.getByText('Content One')).toBeInTheDocument();
+        });
+        it('hides non-active tab panels', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            expect(screen.queryByText('Content Two')).not.toBeInTheDocument();
+            expect(screen.queryByText('Content Three')).not.toBeInTheDocument();
+        });
+        it('renders a tablist with accessible aria-label', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            expect(screen.getByRole('tablist')).toHaveAttribute('aria-label', 'dynamic tabs');
+        });
+        it('renders correct number of tab elements', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            expect(screen.getAllByRole('tab')).toHaveLength(3);
+        });
+    });
+    describe('interaction', () => {
+        it('switches to the second tab on click', async () => {
+            const user = userEvent.setup();
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            await user.click(screen.getByText('Tab Two'));
+            expect(screen.getByText('Content Two')).toBeInTheDocument();
+            expect(screen.queryByText('Content One')).not.toBeInTheDocument();
+        });
+        it('switches to the third tab on click', async () => {
+            const user = userEvent.setup();
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            await user.click(screen.getByText('Tab Three'));
+            expect(screen.getByText('Content Three')).toBeInTheDocument();
+            expect(screen.queryByText('Content One')).not.toBeInTheDocument();
+        });
+        it('can switch back to the first tab after clicking another', async () => {
+            const user = userEvent.setup();
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            await user.click(screen.getByText('Tab Two'));
+            await user.click(screen.getByText('Tab One'));
+            expect(screen.getByText('Content One')).toBeInTheDocument();
+            expect(screen.queryByText('Content Two')).not.toBeInTheDocument();
+        });
+    });
+    describe('accessibility', () => {
+        it('assigns correct aria-controls to tabs', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            const tabElements = screen.getAllByRole('tab');
+            expect(tabElements[0]).toHaveAttribute('aria-controls', 'tabpanel-0');
+            expect(tabElements[1]).toHaveAttribute('aria-controls', 'tabpanel-1');
+            expect(tabElements[2]).toHaveAttribute('aria-controls', 'tabpanel-2');
+        });
+        it('assigns correct ids to tabs', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            const tabElements = screen.getAllByRole('tab');
+            expect(tabElements[0]).toHaveAttribute('id', 'tab-0');
+            expect(tabElements[1]).toHaveAttribute('id', 'tab-1');
+            expect(tabElements[2]).toHaveAttribute('id', 'tab-2');
+        });
+        it('renders tabpanels with correct aria-labelledby', () => {
+            render(_jsx(DynamicTabs, { tabs: tabs }));
+            const panel = screen.getByRole('tabpanel');
+            expect(panel).toHaveAttribute('aria-labelledby', 'tab-0');
+        });
+    });
+    describe('edge cases', () => {
+        it('renders with a single tab', () => {
+            render(_jsx(DynamicTabs, { tabs: [{ title: 'Only Tab', children: _jsx("div", { children: "Only Content" }) }] }));
+            expect(screen.getByText('Only Tab')).toBeInTheDocument();
+            expect(screen.getByText('Only Content')).toBeInTheDocument();
+        });
+        it('renders with empty tabs array', () => {
+            const { container } = render(_jsx(DynamicTabs, { tabs: [] }));
+            expect(container.firstChild).toBeInTheDocument();
+        });
+    });
+});

package/components/elements/display/HowlerAvatar.js

@@ -10,6 +10,7 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
     const { getAvatar } = useContext(AvatarContext);
     const theme = useTheme();
     const [props, setProps] = useState();
+    const displayId = userId && userId.toLowerCase() !== 'unassigned' ? userId : t('app.drawer.hit.assignment.unassigned.name');
     const stringAvatar = useCallback((name) => {
         return {
             sx: {
@@ -37,7 +38,7 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userId]);
     if (userId) {
-        return (_jsx(Tooltip, { title: userId, children: _jsx(Avatar, { "aria-label": userId, ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
+        return (_jsx(Tooltip, { title: displayId, children: _jsx(Avatar, { "aria-label": displayId, ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
     }
     else {
         return (_jsx(Avatar, { "aria-label": t('unknown'), ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }));

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 });
+const HowlerCard = props => (_jsx(Card, { style: { outline: 'none' }, elevation: props.variant !== 'outlined' ? 4 : 0, ...props }));
 export default memo(HowlerCard);

package/components/elements/display/HowlerCard.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import HowlerCard from './HowlerCard';
+describe('HowlerCard', () => {
+    describe('rendering', () => {
+        it('renders children', () => {
+            render(_jsx(HowlerCard, { children: _jsx("div", { id: "child", children: "content" }) }));
+            expect(screen.getByTestId('child')).toBeInTheDocument();
+        });
+        it('renders as a MUI Card', () => {
+            const { container } = render(_jsx(HowlerCard, {}));
+            expect(container.firstChild).toHaveClass('MuiCard-root');
+        });
+        it('always applies outline: none style', () => {
+            const { container } = render(_jsx(HowlerCard, {}));
+            expect(container.firstChild).toHaveStyle({ outline: 'none' });
+        });
+    });
+    describe('elevation', () => {
+        it('uses elevation 4 when no variant is specified', () => {
+            const { container } = render(_jsx(HowlerCard, {}));
+            expect(container.firstChild).toHaveClass('MuiPaper-elevation4');
+        });
+        it('uses elevation 4 when variant is not outlined', () => {
+            const { container } = render(_jsx(HowlerCard, { variant: "elevation" }));
+            expect(container.firstChild).toHaveClass('MuiPaper-elevation4');
+        });
+        it('uses the outlined variant style (not elevation) when variant is outlined', () => {
+            const { container } = render(_jsx(HowlerCard, { variant: "outlined" }));
+            // MUI renders the outlined variant with MuiPaper-outlined, not an elevation class
+            expect(container.firstChild).toHaveClass('MuiPaper-outlined');
+            expect(container.firstChild).not.toHaveClass('MuiPaper-elevation4');
+        });
+    });
+    describe('prop passthrough', () => {
+        it('passes id to the underlying Card', () => {
+            render(_jsx(HowlerCard, { id: "my-card" }));
+            expect(screen.getByTestId('my-card')).toBeInTheDocument();
+        });
+        it('passes className to the underlying Card', () => {
+            const { container } = render(_jsx(HowlerCard, { className: "custom-class" }));
+            expect(container.firstChild).toHaveClass('custom-class');
+        });
+        it('passes custom sx styles', () => {
+            const { container } = render(_jsx(HowlerCard, { sx: { color: 'red' } }));
+            expect(container.firstChild).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+        });
+        it('allows a custom elevation override', () => {
+            const { container } = render(_jsx(HowlerCard, { elevation: 8 }));
+            // elevation prop spreads after the default, overriding it
+            expect(container.firstChild).toHaveClass('MuiPaper-elevation8');
+        });
+    });
+});

package/components/elements/display/Image.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import Image from './Image';
+describe('Image', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+    });
+    describe('thumbnail rendering', () => {
+        it('renders an img element', () => {
+            const { container } = render(_jsx(Image, { src: "test.png", alt: "a photo" }));
+            expect(container.querySelector('img')).toBeInTheDocument();
+        });
+        it('forwards src and alt to the img element', () => {
+            const { container } = render(_jsx(Image, { src: "test.png", alt: "a photo" }));
+            const img = container.querySelector('img');
+            expect(img).toHaveAttribute('src', 'test.png');
+            expect(img).toHaveAttribute('alt', 'a photo');
+        });
+        it('applies cursor: pointer to the thumbnail', () => {
+            const { container } = render(_jsx(Image, { src: "test.png" }));
+            expect(container.querySelector('img')).toHaveStyle({ cursor: 'pointer' });
+        });
+        it('merges provided style with cursor: pointer', () => {
+            const { container } = render(_jsx(Image, { src: "test.png", style: { opacity: 0.5 } }));
+            const img = container.querySelector('img');
+            expect(img).toHaveStyle({ cursor: 'pointer', opacity: '0.5' });
+        });
+    });
+    describe('modal behaviour', () => {
+        it('does not show the modal initially', () => {
+            render(_jsx(Image, { src: "test.png" }));
+            expect(screen.queryByRole('presentation')).toBeNull();
+        });
+        it('opens the modal when the thumbnail is clicked', async () => {
+            const { container } = render(_jsx(Image, { src: "test.png" }));
+            const thumbnail = container.querySelector('img');
+            await user.click(thumbnail);
+            await waitFor(() => {
+                expect(screen.getByRole('presentation')).toBeInTheDocument();
+            });
+        });
+        it('shows an enlarged image inside the modal', async () => {
+            const { container } = render(_jsx(Image, { src: "test.png" }));
+            const thumbnail = container.querySelector('img');
+            await user.click(thumbnail);
+            await waitFor(() => {
+                // MUI Modal renders into a portal outside container, so query document
+                const images = document.querySelectorAll('img');
+                // thumbnail + modal enlarged copy
+                expect(images).toHaveLength(2);
+                expect(images[1]).toHaveStyle({ maxWidth: '70vw', maxHeight: '70vh' });
+            });
+        });
+        it('closes the modal when the close button is clicked', async () => {
+            const { container } = render(_jsx(Image, { src: "test.png" }));
+            const thumbnail = container.querySelector('img');
+            await user.click(thumbnail);
+            await waitFor(() => expect(screen.getByRole('presentation')).toBeInTheDocument());
+            const closeButton = screen.getByRole('button');
+            await user.click(closeButton);
+            await waitFor(() => {
+                expect(screen.queryByRole('presentation')).toBeNull();
+            });
+        });
+        it('closes the modal via the onClose handler (Escape key)', async () => {
+            const { container } = render(_jsx(Image, { src: "test.png" }));
+            const thumbnail = container.querySelector('img');
+            await user.click(thumbnail);
+            await waitFor(() => expect(screen.getByRole('presentation')).toBeInTheDocument());
+            await user.keyboard('{Escape}');
+            await waitFor(() => {
+                expect(screen.queryByRole('presentation')).toBeNull();
+            });
+        });
+    });
+});

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

@@ -1,4 +1,4 @@
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { SearchResponseState } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import type { TuiListItemOnSelect, TuiListItemRenderer } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import type { FC, ReactNode } from 'react';
 interface ItemManagerProps {
@@ -13,7 +13,7 @@ interface ItemManagerProps {
     onSelect?: TuiListItemOnSelect<unknown>;
     phrase: string;
     renderer: TuiListItemRenderer<unknown>;
-    response: HowlerSearchResponse<unknown>;
+    response: SearchResponseState<unknown>;
     searchAdornment?: ReactNode;
     searching: boolean;
     createPrompt?: string;

package/components/elements/display/ItemManager.js

@@ -24,7 +24,7 @@ const ItemManager = ({ aboveSearch, afterSearch, belowSearch, searchFilters, has
                                             mt: -0.5,
                                             borderBottomLeftRadius: theme.shape.borderRadius,
                                             borderBottomRightRadius: theme.shape.borderRadius
-                                        }) }))] }), afterSearch] }), searchFilters, response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: onPageChange })] })), belowSearch, _jsx(TuiList, { onSelection: onSelect, children: renderer }), onCreate && (_jsxs(Fab, { variant: "extended", size: "large", color: "primary", sx: theme => ({
+                                        }) }))] }), afterSearch] }), searchFilters, response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, removeCount: response.removeCount, onChange: onPageChange })] })), belowSearch, _jsx(TuiList, { onSelection: onSelect, children: renderer }), onCreate && (_jsxs(Fab, { variant: "extended", size: "large", color: "primary", sx: theme => ({
                             textTransform: 'none',
                             position: isNarrow ? 'fixed' : 'absolute',
                             right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,

package/components/elements/display/Markdown.js

@@ -122,8 +122,15 @@ const Markdown = ({ md, components = {}, disableLinks = false }) => {
                 if (props.href.startsWith('#')) {
                     return _jsx("a", { ...props, children: children });
                 }
-                const parsed = new URL(props.href);
-                if (parsed.hostname.endsWith('gc.ca')) {
+                let parsed = null;
+                try {
+                    parsed = new URL(props.href);
+                }
+                catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.warn('error when parsing URL:', e);
+                }
+                if (parsed?.hostname.endsWith('gc.ca')) {
                     return _jsx("a", { ...props, children: children });
                 }
                 return (_jsxs("span", { children: [children, props.href !== children && ` (${props.href})`] }));

package/components/elements/display/Modal.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Modal as MuiModal } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import { has } from 'lodash-es';
 import { useCallback, useContext } from 'react';
 const Modal = () => {
     const { content, setContent, options } = useContext(ModalContext);
@@ -16,7 +15,6 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: has(options, 'height') ? options.height : '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/QueryResultText.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { vi } from 'vitest';
+setupReactRouterMock();
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import QueryResultText from './QueryResultText';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('QueryResultText', () => {
+    afterAll(() => vi.resetModules());
+    describe('rendering', () => {
+        it('renders a Typography element', () => {
+            const { container } = render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(container.querySelector('.MuiTypography-root')).toBeInTheDocument();
+        });
+        it('renders with body2 variant', () => {
+            const { container } = render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveClass('MuiTypography-body2');
+        });
+        it('renders a link element', () => {
+            render(_jsx(QueryResultText, { count: 5, query: "howler.status:open" }), { wrapper: Wrapper });
+            expect(screen.getByRole('link')).toBeInTheDocument();
+        });
+        it('encodes the query in the link href', () => {
+            render(_jsx(QueryResultText, { count: 5, query: "howler.status:open AND howler.id:*" }), { wrapper: Wrapper });
+            const link = screen.getByRole('link');
+            expect(link).toHaveAttribute('href', '/hits?query=howler.status%3Aopen%20AND%20howler.id%3A*');
+        });
+        it('handles special characters in query', () => {
+            render(_jsx(QueryResultText, { count: 1, query: 'howler.detection:"test & value"' }), { wrapper: Wrapper });
+            const link = screen.getByRole('link');
+            expect(link.getAttribute('href')).toContain('/hits?query=');
+            expect(link.getAttribute('href')).toContain(encodeURIComponent('howler.detection:"test & value"'));
+        });
+    });
+    describe('count display', () => {
+        it('displays the count value', () => {
+            render(_jsx(QueryResultText, { count: 42, query: "test" }), { wrapper: Wrapper });
+            expect(screen.getByText(/42/)).toBeInTheDocument();
+        });
+        it('displays zero count', () => {
+            render(_jsx(QueryResultText, { count: 0, query: "test" }), { wrapper: Wrapper });
+            expect(screen.getByText(/0/)).toBeInTheDocument();
+        });
+    });
+});

package/components/elements/display/TextDivider.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import TextDivider from './TextDivider';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('TextDivider', () => {
+    describe('rendering', () => {
+        it('renders without crashing', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with inline-block display style', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ display: 'inline-block' });
+        });
+        it('renders with text-align center', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ textAlign: 'center' });
+        });
+        it('renders with width 100%', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ width: '100%' });
+        });
+        it('renders with position relative', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toHaveStyle({ position: 'relative' });
+        });
+        it('renders a nested div element', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            const outerDiv = container.firstChild;
+            expect(outerDiv.querySelector('div')).toBeInTheDocument();
+        });
+        it('renders the translated divider text', () => {
+            const { container } = render(_jsx(TextDivider, {}), { wrapper: Wrapper });
+            // The divider uses i18n key 'divider', text should be present
+            const innerDiv = container.querySelector('div > div');
+            expect(innerDiv).toBeInTheDocument();
+            expect(innerDiv.textContent).toBeTruthy();
+        });
+    });
+});

package/components/elements/display/TypingIndicator.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render } from '@testing-library/react';
+import TypingIndicator from './TypingIndicator';
+describe('TypingIndicator', () => {
+    describe('rendering', () => {
+        it('renders exactly three circle icons', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // Each Circle icon renders as an <svg> element
+            const svgs = container.querySelectorAll('svg');
+            expect(svgs).toHaveLength(3);
+        });
+        it('renders a root Stack element', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            expect(container.firstChild).toBeInTheDocument();
+        });
+        it('renders with flex row layout', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            // MUI Stack with direction="row" uses flexbox
+            const root = container.firstChild;
+            expect(root).toHaveStyle({ display: 'flex', flexDirection: 'row' });
+        });
+    });
+    describe('accessibility', () => {
+        it('renders the circles as SVG elements', () => {
+            const { container } = render(_jsx(TypingIndicator, {}));
+            const svgs = container.querySelectorAll('svg');
+            svgs.forEach(svg => {
+                expect(svg.tagName.toLowerCase()).toBe('svg');
+            });
+        });
+    });
+});

package/components/elements/display/icons/BundleButton.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const BundleButton: FC<{
+    ids: string[];
+    disabled?: boolean;
+}>;
+export default BundleButton;

package/components/elements/display/icons/BundleButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleButton = ({ ids, disabled = false }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const onClick = useCallback((event) => {
+        if (ids.length === 1) {
+            navigate(`/bundles/${ids[0]}`);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [ids, navigate]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(TuiIconButton, { size: "small", tooltip: t(`hit.panel.bundles.open${ids.length > 1 ? '' : '.prompt'}`), onClick: onClick, disabled: disabled, "aria-disabled": disabled, "aria-haspopup": "true", "aria-controls": anchorEl ? 'bundle-action-menu' : undefined, "aria-expanded": anchorEl ? 'true' : undefined, children: _jsx(AccountTree, {}) }), _jsx(Menu, { id: "bundle-action-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                    dense: true,
+                    'aria-labelledby': `bundle-button`
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, children: ids.map(id => (_jsx(MenuItem, { onClick: () => navigate(`/bundles/${id}`), children: _jsx(ListItemText, { primary: t('hit.panel.bundles.open.prompt'), secondary: _jsx(Typography, { variant: "caption", color: "text.secondary", children: id }) }) }, id))) })] }));
+};
+export default BundleButton;

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -1,5 +1,9 @@
 import type { FC } from 'react';
 declare const ConfirmDeleteModal: FC<{
     onConfirm: () => void;
+    title?: string;
+    description?: string;
+    preferDelete?: boolean;
+    preferCancel?: boolean;
 }>;
 export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmDeleteModal.js

@@ -3,13 +3,15 @@ import { Button, Stack, Typography } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const ConfirmDeleteModal = ({ onConfirm }) => {
+const ConfirmDeleteModal = ({ onConfirm, title, description, preferDelete, preferCancel }) => {
     const { t } = useTranslation();
     const { close } = useContext(ModalContext);
     const handleConfirm = useCallback(() => {
         onConfirm();
         close();
     }, [close, onConfirm]);
-    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.confirm.delete.title') }), _jsx(Typography, { children: t('modal.confirm.delete.description') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+    const modalTitle = title ?? t('modal.confirm.delete.title');
+    const modalDesc = description ?? t('modal.confirm.delete.description');
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: modalTitle }), _jsx(Typography, { children: modalDesc }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: preferCancel ? 'contained' : 'outlined', onClick: close, children: t('button.cancel') }), _jsx(Button, { variant: preferDelete ? 'contained' : 'outlined', onClick: handleConfirm, children: t('button.delete') })] })] }));
 };
 export default ConfirmDeleteModal;

package/components/elements/hit/HitActions.js

@@ -3,9 +3,9 @@ import { MoreHoriz } from '@mui/icons-material';
 import { Box, CircularProgress, Divider, FormControl, FormControlLabel, FormLabel, IconButton, Menu, Radio, RadioGroup, Stack, Switch, useMediaQuery } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import { useMyLocalStorageProvider } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -30,8 +30,8 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
-    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
-    const nextHit = useContextSelector(RecordSearchContext, ctx => {
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const nextHit = useContextSelector(HitSearchContext, ctx => {
         if (!ctx?.response || !selected) {
             return null;
         }

package/components/elements/hit/HitBanner.d.ts

@@ -3,7 +3,6 @@ import { type FC } from 'react';
 import { HitLayout } from './HitLayout';
 type HitBannerProps = {
     hit: Hit;
-    lazy?: boolean;
     layout?: HitLayout;
     showAssigned?: boolean;
     useListener?: boolean;