@cccsaurora/howler-ui 2.16.0-dev.376 → 2.16.0-dev.380

package/components/app/providers/ViewProvider.d.ts

@@ -12,10 +12,11 @@ export interface ViewContextType {
     addView: (v: View) => Promise<View>;
     editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
     removeView: (id: string) => Promise<void>;
-    getCurrentView: (config?: {
+    getCurrentViews: (config?: {
         viewId?: string;
         lazy?: boolean;
-    }) => Promise<View>;
+        ignoreParams?: boolean;
+    }) => Promise<View[]>;
 }
 export declare const ViewContext: import("use-context-selector").Context<ViewContextType>;
 declare const ViewProvider: FC<PropsWithChildren>;

package/components/app/providers/ViewProvider.js

@@ -5,7 +5,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { has, omit } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 export const ViewContext = createContext(null);
@@ -13,8 +13,7 @@ const ViewProvider = ({ children }) => {
     const { dispatchApi } = useMyApi();
     const appUser = useAppUser();
     const [defaultView, setDefaultView] = useMyLocalStorageItem(StorageKey.DEFAULT_VIEW);
-    const location = useLocation();
-    const routeParams = useParams();
+    const [searchParams] = useSearchParams();
     const [views, setViews] = useState({});
     const fetchViews = useCallback(async (ids) => {
         if (!ids) {
@@ -60,18 +59,26 @@ const ViewProvider = ({ children }) => {
             }
         })();
     }, [defaultView, fetchViews, setDefaultView, views]);
-    const getCurrentView = useCallback(async ({ viewId, lazy = false } = {}) => {
-        if (!viewId) {
-            viewId = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
+    const getCurrentViews = useCallback(async ({ viewId, lazy = false, ignoreParams = false } = {}) => {
+        const currentViews = ignoreParams ? [] : searchParams.getAll('view');
+        if (viewId && !currentViews.includes(viewId)) {
+            currentViews.push(viewId);
         }
-        if (!viewId) {
-            return null;
-        }
-        if (!has(views, viewId) && !lazy) {
-            return (await fetchViews([viewId]))[0];
+        if (currentViews.length < 1) {
+            return [];
         }
-        return views[viewId];
-    }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
+        const results = [];
+        const missing = [];
+        currentViews.forEach(_view => {
+            if (has(views, _view)) {
+                results.push(views[_view]);
+            }
+            else if (!lazy) {
+                missing.push(_view);
+            }
+        });
+        return [...results, ...(await fetchViews(missing))];
+    }, [fetchViews, searchParams, views]);
     const editView = useCallback(async (id, partialView) => {
         const result = await dispatchApi(api.view.put(id, partialView));
         setViews(_views => ({
@@ -118,7 +125,7 @@ const ViewProvider = ({ children }) => {
             removeView,
             defaultView,
             setDefaultView,
-            getCurrentView
+            getCurrentViews
         }, children: children }));
 };
 export const useViewContextSelector = (selector) => {

package/components/app/providers/ViewProvider.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { hget, hpost, hput } from '@cccsaurora/howler-ui/api';
-import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
+import { setupLocalStorageMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { MOCK_RESPONSES } from '@cccsaurora/howler-ui/tests/server-handlers';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -9,23 +9,17 @@ import ViewProvider, { ViewContext } from './ViewProvider';
 let mockUser = {
     favourite_views: ['favourited_view_id']
 };
+setupReactRouterMock();
+const mockLocalStorage = setupLocalStorageMock();
+import { useSearchParams } from 'react-router-dom';
+vi.mocked(useSearchParams).mockReturnValue([new URLSearchParams('?view=searched_view_id')]);
 vi.mock('api', { spy: true });
-vi.mock('react-router-dom', () => ({
-    useLocation: vi.fn(() => ({ pathname: '/views/searched_view_id' })),
-    useParams: vi.fn(() => ({ id: 'searched_view_id' }))
-}));
 vi.mock('commons/components/app/hooks', () => ({
     useAppUser: () => ({
         user: mockUser,
         setUser: _user => (mockUser = _user)
     })
 }));
-const mockLocalStorage = new MockLocalStorage();
-// Replace localStorage in global scope
-Object.defineProperty(window, 'localStorage', {
-    value: mockLocalStorage,
-    writable: true
-});
 const Wrapper = ({ children }) => {
     return _jsx(ViewProvider, { children: children });
 };
@@ -35,7 +29,7 @@ beforeEach(() => {
 describe('ViewContext', () => {
     it('should fetch the defaultView on initialization', async () => {
         mockLocalStorage.setItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.DEFAULT_VIEW}`, JSON.stringify('searched_view_id'));
-        let hook = await act(async () => renderHook(() => useContextSelector(ViewContext, ctx => ctx.views), { wrapper: Wrapper }));
+        const hook = renderHook(() => useContextSelector(ViewContext, ctx => ctx.views), { wrapper: Wrapper });
         await waitFor(() => expect(hook.result.current.searched_view_id).not.toBeFalsy());
         expect(hook.result.current.searched_view_id).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
     });
@@ -73,16 +67,16 @@ describe('ViewContext', () => {
         }));
         hook.rerender();
         expect(hook.result.current.views[result.view_id]).toEqual(result);
-        await act(async () => hook.result.current.removeView(result.view_id));
+        await act(async () => {
+            await hook.result.current.removeView(result.view_id);
+        });
         hook.rerender();
         expect(hook.result.current.views[result.view_id]).toBeFalsy();
     });
     describe('fetchViews', () => {
         let hook;
-        beforeEach(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.fetchViews), { wrapper: Wrapper });
-            });
+        beforeEach(() => {
+            hook = renderHook(() => useContextSelector(ViewContext, ctx => ctx.fetchViews), { wrapper: Wrapper });
             vi.mocked(hpost).mockClear();
             vi.mocked(hget).mockClear();
         });
@@ -127,32 +121,28 @@ describe('ViewContext', () => {
             expect(hpost).toHaveBeenCalledOnce();
         });
     });
-    describe('getCurrentView', () => {
+    describe('getCurrentViews', () => {
         let hook;
         beforeEach(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentView), { wrapper: Wrapper });
-            });
+            hook = renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentViews), { wrapper: Wrapper });
         });
         it('should allow the user to fetch their current view based on the location', async () => {
             // lazy load should return nothing
-            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
+            await expect(hook.result.current({ lazy: true })).resolves.toEqual([]);
             const result = await act(async () => hook.result.current());
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+            expect(result).toEqual([MOCK_RESPONSES['/api/v1/search/view'].items[0]]);
         });
         it('should allow the user to fetch their current view based on the view ID', async () => {
             // lazy load should return nothing
-            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
+            await expect(hook.result.current({ lazy: true })).resolves.toEqual([]);
             const result = await act(async () => hook.result.current({ viewId: 'searched_view_id' }));
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+            expect(result).toEqual([MOCK_RESPONSES['/api/v1/search/view'].items[0]]);
         });
     });
     describe('editView', () => {
         let hook;
-        beforeAll(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.editView), { wrapper: Wrapper });
-            });
+        beforeAll(() => {
+            hook = renderHook(() => useContextSelector(ViewContext, ctx => ctx.editView), { wrapper: Wrapper });
         });
         beforeEach(() => {
             vi.mocked(hput).mockClear();

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

@@ -0,0 +1,21 @@
+import type { ChipProps, PaperProps, SxProps } from '@mui/material';
+import type { ReactElement, ReactNode } from 'react';
+interface ChipPopperProps {
+    icon?: ReactElement;
+    deleteIcon?: ReactElement;
+    label?: ReactNode;
+    children: ReactNode;
+    slotProps?: {
+        chip?: Partial<ChipProps>;
+        paper?: PaperProps;
+    };
+    paperSx?: SxProps;
+    minWidth?: string | number;
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    onToggle?: (show: boolean) => void;
+    onDelete?: (event?: any) => void;
+    toggleOnDelete?: boolean;
+    closeOnClick?: boolean;
+}
+declare const _default: import("react").NamedExoticComponent<ChipPopperProps>;
+export default _default;

package/components/elements/display/ChipPopper.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, ClickAwayListener, Collapse, Paper, Popper } from '@mui/material';
+import { memo, useRef, useState } from 'react';
+const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = 'bottom-start', onToggle, onDelete, toggleOnDelete = false, closeOnClick = false, slotProps = {} }) => {
+    const [show, setShow] = useState(false);
+    const anchorEl = useRef(null);
+    const handleToggle = (newShow) => {
+        setShow(newShow);
+        onToggle?.(newShow);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Chip, { icon: icon, deleteIcon: deleteIcon, label: label, onClick: e => {
+                    handleToggle(!show);
+                    e.stopPropagation();
+                }, onDelete: onDelete ?? (toggleOnDelete ? () => handleToggle(!show) : null), ref: anchorEl, sx: [
+                    theme => ({
+                        position: 'relative',
+                        zIndex: 1,
+                        transition: theme.transitions.create(['border-bottom-left-radius', 'border-bottom-right-radius'])
+                    }),
+                    show && { borderBottomLeftRadius: '0', borderBottomRightRadius: '0' },
+                    ...(Array.isArray(slotProps.chip?.sx) ? slotProps.chip.sx : [slotProps.chip?.sx])
+                ], ...(slotProps.chip ?? {}) }), _jsx(Popper, { placement: placement, anchorEl: anchorEl.current, disablePortal: true, open: true, sx: {
+                    minWidth: Math.max(typeof minWidth === 'number' ? minWidth : parseInt(minWidth?.replace('px', '')) || 0, anchorEl.current?.clientWidth || 0),
+                    zIndex: 1
+                }, children: _jsx(Collapse, { in: show, unmountOnExit: true, onClick: () => {
+                        if (closeOnClick) {
+                            handleToggle(false);
+                        }
+                    }, children: _jsx(ClickAwayListener, { onClickAway: () => {
+                            handleToggle(false);
+                        }, children: _jsx(Paper, { sx: [
+                                { borderTopLeftRadius: 0, borderTopRightRadius: 0, px: 1, py: 2 },
+                                ...(Array.isArray(slotProps.paper?.sx) ? slotProps.paper.sx : [slotProps.paper?.sx])
+                            ], ...(slotProps.paper ?? {}), children: children }) }) }) })] }));
+};
+export default memo(ChipPopper);

package/components/elements/display/ChipPopper.test.d.ts

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

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

@@ -0,0 +1,309 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { Info } from '@mui/icons-material';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { vi } from 'vitest';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+import ChipPopper from './ChipPopper';
+describe('ChipPopper', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('Rendering', () => {
+        it('should render chip with icon and label', () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, { id: "chip-icon" }), label: "Test Label", children: _jsx("div", { children: "Content" }) }));
+            expect(screen.getByTestId('chip-icon')).toBeInTheDocument();
+            expect(screen.getByText('Test Label')).toBeInTheDocument();
+        });
+        it('should render chip with complex label', () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: _jsxs("div", { children: [_jsx("span", { children: "Complex" }), " ", _jsx("strong", { children: "Label" })] }), children: _jsx("div", { children: "Content" }) }));
+            expect(screen.getByText('Complex')).toBeInTheDocument();
+            expect(screen.getByText('Label')).toBeInTheDocument();
+        });
+        it('should not show popper content initially', () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { id: "popper-content", children: "Content" }) }));
+            // Content should not be visible initially
+            expect(screen.queryByTestId('popper-content')).toBeNull();
+        });
+    });
+    describe('Toggle Behavior', () => {
+        it('should show popper content when chip is clicked', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { id: "popper-content", children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('popper-content')).toBeVisible();
+            });
+        });
+        it('should hide popper content when chip is clicked again', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { id: "popper-content", children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            // Open
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('popper-content')).toBeVisible();
+            });
+            // Close
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.queryByTestId('popper-content')).toBeNull();
+            });
+        });
+        it('should call onToggle callback when toggled', async () => {
+            const onToggle = vi.fn();
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            expect(onToggle).toHaveBeenCalledWith(true);
+            await user.click(chip);
+            expect(onToggle).toHaveBeenCalledWith(false);
+            expect(onToggle).toHaveBeenCalledTimes(2);
+        });
+        it('should stop event propagation when chip is clicked', async () => {
+            const parentClickHandler = vi.fn();
+            render(_jsx("div", { onClick: parentClickHandler, children: _jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            expect(parentClickHandler).not.toHaveBeenCalled();
+        });
+    });
+    describe('Click Away Behavior', () => {
+        it('should close popper when clicking away', async () => {
+            render(_jsxs("div", { children: [_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { id: "popper-content", children: "Content" }) }), _jsx("button", { id: "outside-button", children: "Outside" })] }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('popper-content')).toBeVisible();
+            });
+            // Click outside
+            const outsideButton = screen.getByTestId('outside-button');
+            await user.click(outsideButton);
+            await waitFor(() => {
+                expect(screen.queryByTestId('popper-content')).toBeNull();
+            });
+        });
+        it('should call onToggle when clicking away', async () => {
+            const onToggle = vi.fn();
+            render(_jsxs("div", { children: [_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", onToggle: onToggle, children: _jsx("div", { children: "Content" }) }), _jsx("button", { id: "outside-button", children: "Outside" })] }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            expect(onToggle).toHaveBeenCalledWith(true);
+            onToggle.mockClear();
+            // Click outside
+            const outsideButton = screen.getByTestId('outside-button');
+            await user.click(outsideButton);
+            expect(onToggle).toHaveBeenCalledWith(false);
+        });
+    });
+    describe('Props Customization', () => {
+        it('should apply custom chip props', () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    chip: {
+                        color: 'primary',
+                        variant: 'outlined',
+                        id: 'custom-chip'
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByTestId('custom-chip');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+            expect(chip).toHaveClass('MuiChip-outlined');
+        });
+        it('should apply custom chip sx prop', () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    chip: {
+                        sx: { backgroundColor: 'red' }
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = container.querySelector('.MuiChip-root');
+            expect(window.getComputedStyle(chip).getPropertyValue('background-color')).toBe('rgb(255, 0, 0)');
+        });
+        it('should apply custom paper props', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    paper: {
+                        elevation: 8,
+                        id: 'custom-paper'
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const paper = screen.getByTestId('custom-paper');
+                expect(paper).toBeInTheDocument();
+                expect(paper).toHaveClass('MuiPaper-elevation8');
+            });
+        });
+        it('should apply custom paper sx prop', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    paper: {
+                        sx: { backgroundColor: 'blue' }
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const paper = container.querySelector('.MuiPaper-root');
+                expect(window.getComputedStyle(paper).getPropertyValue('background-color')).toBe('rgb(0, 0, 255)');
+            });
+        });
+        it('should use custom placement', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", placement: "bottom-end", children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const popper = container.querySelector('[data-popper-placement]');
+                expect(popper).toHaveAttribute('data-popper-placement', 'bottom-end');
+            });
+        });
+        it('should use custom minWidth when provided', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", minWidth: "500px", children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const popper = container.querySelector('.MuiPopper-root');
+                expect(popper).toHaveStyle({ minWidth: '500px' });
+            });
+        });
+        it('should default to chip width when minWidth not provided', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const popper = container.querySelector('.MuiPopper-root');
+                expect(popper).toBeInTheDocument();
+            });
+        });
+    });
+    describe('Styling', () => {
+        it('should apply border radius transition styles to chip', () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }));
+            const chip = container.querySelector('.MuiChip-root');
+            expect(chip).toHaveStyle({ position: 'relative', zIndex: '1' });
+        });
+        it('should apply rounded corner styles when popper is closed', () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }));
+            const chip = container.querySelector('.MuiChip-root');
+            // Should have all corners rounded when closed
+            expect(chip).not.toHaveStyle({
+                borderBottomLeftRadius: '0',
+                borderBottomRightRadius: '0'
+            });
+        });
+        it('should remove bottom border radius when popper is open', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(chip).toHaveStyle({
+                    borderBottomLeftRadius: '0',
+                    borderBottomRightRadius: '0'
+                });
+            });
+        });
+        it('should apply top border radius 0 to paper', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const paper = container.querySelector('.MuiPaper-root');
+                expect(paper).toHaveStyle({
+                    borderTopLeftRadius: '0',
+                    borderTopRightRadius: '0'
+                });
+            });
+        });
+    });
+    describe('Children Rendering', () => {
+        it('should render children content inside popper', async () => {
+            render(_jsxs(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: [_jsx("div", { id: "child-1", children: "Child 1" }), _jsx("div", { id: "child-2", children: "Child 2" })] }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('child-1')).toBeVisible();
+                expect(screen.getByTestId('child-2')).toBeVisible();
+            });
+        });
+        it('should render complex children components', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsxs("div", { children: [_jsx("input", { id: "test-input", type: "text" }), _jsx("button", { id: "test-button", children: "Click me" })] }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('test-input')).toBeVisible();
+                expect(screen.getByTestId('test-button')).toBeVisible();
+            });
+        });
+        it('should allow interaction with children', async () => {
+            const buttonClick = vi.fn();
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("button", { id: "child-button", onClick: buttonClick, children: "Click me" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('child-button')).toBeVisible();
+            });
+            const button = screen.getByTestId('child-button');
+            await user.click(button);
+            expect(buttonClick).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle rapid toggling', async () => {
+            const onToggle = vi.fn();
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", onToggle: onToggle, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            // Rapidly toggle multiple times
+            await user.click(chip);
+            await user.click(chip);
+            await user.click(chip);
+            await user.click(chip);
+            expect(onToggle).toHaveBeenCalledTimes(4);
+            expect(onToggle).toHaveBeenNthCalledWith(1, true);
+            expect(onToggle).toHaveBeenNthCalledWith(2, false);
+            expect(onToggle).toHaveBeenNthCalledWith(3, true);
+            expect(onToggle).toHaveBeenNthCalledWith(4, false);
+        });
+        it('should work without onToggle callback', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: _jsx("div", { id: "content", children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            // Should not throw error
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByTestId('content')).toBeVisible();
+            });
+        });
+        it('should handle empty children', async () => {
+            render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", children: null }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            // Should not throw error
+            await waitFor(() => {
+                const paper = document.querySelector('.MuiPaper-root');
+                expect(paper).toBeInTheDocument();
+            });
+        });
+        it('should handle array sx props in chip slotProps', () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    chip: {
+                        sx: [{ backgroundColor: 'red' }, { color: 'white !important' }]
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = container.querySelector('.MuiChip-root');
+            expect(window.getComputedStyle(chip).getPropertyValue('color')).toBe('rgb(255, 255, 255)');
+            expect(window.getComputedStyle(chip).getPropertyValue('background-color')).toBe('rgb(255, 0, 0)');
+        });
+        it('should handle array sx props in paper slotProps', async () => {
+            const { container } = render(_jsx(ChipPopper, { icon: _jsx(Info, {}), label: "Test", slotProps: {
+                    paper: {
+                        sx: [{ backgroundColor: 'blue !important' }, { padding: '20px' }]
+                    }
+                }, children: _jsx("div", { children: "Content" }) }));
+            const chip = screen.getByText('Test').closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                const paper = container.querySelector('.MuiPaper-root');
+                expect(paper).toHaveStyle({ backgroundColor: 'blue !important', padding: '20px' });
+            });
+        });
+    });
+});

package/components/elements/hit/HitActions.js

@@ -27,7 +27,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     const { values, set } = useMyLocalStorageProvider();
     const pluginStore = usePluginStore();
     const { getMatchingAnalytic } = useMatchers();
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
     const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
@@ -67,7 +67,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
                     actionFunction: async () => {
                         if (!loading) {
                             await assess(assessment, analytic?.triage_settings?.skip_rationale);
-                            if ((await getCurrentView())?.settings?.advance_on_triage && nextHit) {
+                            if ((await getCurrentViews())[0]?.settings?.advance_on_triage && nextHit) {
                                 clearSelectedHits(nextHit.howler.id);
                                 setSelected?.(nextHit.howler.id);
                             }
@@ -86,7 +86,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
         canVote,
         clearSelectedHits,
         config.lookups,
-        getCurrentView,
+        getCurrentViews,
         loading,
         nextHit,
         setSelected,

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

@@ -2,7 +2,6 @@ import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const _default: import("react").NamedExoticComponent<{
-    query: string;
     response?: HowlerSearchResponse<WithMetadata<Hit>>;
     execute?: boolean;
     onStart?: () => void;