@cccsaurora/howler-ui 2.19.0-dev.1151 → 2.19.0-dev.1260

package/components/elements/PluginChip.d.ts

@@ -1,6 +1,6 @@
 import { type ChipProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import { type FC } from 'react';
+import type { FC } from 'react';
 export type PluginChipProps = ChipProps & {
     value: string;
     context: string;

package/components/elements/PluginChip.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import {} from 'react';
 import { usePluginStore } from 'react-pluggable';
 const PluginChip = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();

package/components/elements/PluginTypography.d.ts

@@ -1,10 +1,11 @@
 import { type TypographyProps } from '@mui/material';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    hit?: Hit;
+    obj?: Hit | Event;
 };
 declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
 export default _default;

package/components/elements/PluginTypography.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { memo } from 'react';
 import { usePluginStore } from 'react-pluggable';
-const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
+const PluginTypography = ({ children, value, context, field, obj, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,7 +11,8 @@ const PluginTypography = ({ children, value, context, field, hit, ...props }) =>
             value,
             context,
             field,
-            hit,
+            hit: obj,
+            obj,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

@@ -2,8 +2,11 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userId: string;
-    onChange: (userId: string) => void;
+    userIds: string[];
+    onChange: (userIds: string[]) => void;
     i18nLabel: string;
+    avatarHeight?: number;
+    disabled?: boolean;
+    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,26 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
-    const { users, searchUsers } = useContext(UserListContext);
-    const userIds = useMemo(() => Object.keys(users), [users]);
+    const { users, fetchUsers } = useContext(UserListContext);
+    const allUserIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
-        searchUsers('uname:*');
-    }, [searchUsers]);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
-                            const user = users[_userId];
-                            return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
-                                        display: 'grid',
-                                        gridTemplateColumns: 'auto 1fr',
-                                        gridTemplateRows: 'auto auto',
-                                        gridTemplateAreas: `"profile name"\n"profile email"`,
-                                        columnGap: 1.5
-                                    }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
+        fetchUsers(new Set(userIds));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userIds]);
+    const renderInput = params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" });
+    const renderOption = (props, optionUserId) => {
+        const { key, ...optionProps } = props;
+        const user = users[optionUserId];
+        return (_jsx("li", { ...optionProps, children: _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gridTemplateRows: 'auto auto',
+                    gridTemplateAreas: `"profile name"\n"profile email"`,
+                    columnGap: 1.5
+                }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user?.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user?.name ?? optionUserId }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user?.email ?? '' })] }) }, key));
+    };
+    const sharedAutocompleteProps = {
+        disabled,
+        sx: { minWidth: '300px' },
+        options: allUserIds,
+        renderInput,
+        renderOption
+    };
+    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: multiple ? (_jsx(Autocomplete, { ...sharedAutocompleteProps, multiple: true, value: userIds, onChange: (__, options) => {
+                            onChange(options);
+                        } })) : (_jsx(Autocomplete, { ...sharedAutocompleteProps, value: userIds?.[0] ?? null, onChange: (__, option) => {
+                            onChange(option ? [option] : []);
+                        } })) }) })] }));
 };
 export default UserList;

package/components/elements/UserList.test.d.ts

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

package/components/elements/UserList.test.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId ?? 'none'}`, children: userId ?? 'none' })
+}));
+import UserList from './UserList';
+const mockFetchUsers = vi.fn();
+const defaultUsers = {
+    analystA: {
+        username: 'analystA',
+        name: 'Alice Analyst',
+        email: 'alice@example.com'
+    },
+    analystB: {
+        username: 'analystB',
+        name: 'Bob Analyst',
+        email: 'bob@example.com'
+    },
+    analystC: {
+        username: 'analystC',
+        name: 'Chris Analyst',
+        email: 'chris@example.com'
+    }
+};
+const createWrapper = (users) => {
+    const Wrapper = ({ children }) => (_jsx(UserListContext.Provider, { value: {
+            users,
+            fetchUsers: mockFetchUsers,
+            searchUsers: vi.fn()
+        }, children: children }));
+    return Wrapper;
+};
+describe('UserList', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('fetches users on mount and whenever userIds change', async () => {
+        const onChange = vi.fn();
+        const { rerender } = render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        await waitFor(() => {
+            expect(mockFetchUsers).toHaveBeenCalledWith(new Set(['analystA']));
+        });
+        rerender(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA', 'analystB'], onChange: onChange }));
+        await waitFor(() => {
+            expect(mockFetchUsers).toHaveBeenCalledWith(new Set(['analystA', 'analystB']));
+        });
+    });
+    it('opens the popover and selects a user in single mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        const listbox = await screen.findByRole('listbox');
+        await user.click(within(listbox).getByText('Bob Analyst'));
+        expect(onChange).toHaveBeenCalledWith(['analystB']);
+    });
+    it('renders deduplicated avatars and appends selection in multiple mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA', 'analystA'], onChange: onChange, multiple: true }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        expect(screen.getAllByText('analystA')).toHaveLength(1);
+        const addButton = screen.getByRole('button');
+        await user.click(addButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        const listbox = await screen.findByRole('listbox');
+        await user.click(within(listbox).getByText('Bob Analyst'));
+        expect(onChange).toHaveBeenCalledWith(expect.arrayContaining(['analystA', 'analystB']));
+    });
+    it('does not open popover when disabled', async () => {
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, disabled: true }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+    it('emits an empty list when single-select value is cleared', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        await screen.findByRole('combobox', { name: 'user.list.label' });
+        const clearButton = await screen.findByLabelText(/clear/i);
+        await user.click(clearButton);
+        expect(onChange).toHaveBeenCalledWith([]);
+    });
+    it('renders and opens with empty users context without crashing', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper({})
+        });
+        expect(screen.getByText('analystA')).toBeInTheDocument();
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+    });
+});

package/components/elements/addons/lists/TuiListElement.d.ts

@@ -1,4 +1,4 @@
-import { type TuiListItem, type TuiListItemOnSelect, type TuiListItemRenderer } from '.';
+import type { TuiListItem, TuiListItemOnSelect, TuiListItemRenderer } from '.';
 type TuiListElementProps<T> = {
     position: number;
     item: TuiListItem<T>;

package/components/elements/addons/lists/TuiListElement.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useRef } from 'react';
-import {} from '.';
 import VSBoxElement from '../layout/vsbox/VSBoxElement';
 const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
     const elementEl = useRef();

package/components/elements/addons/search/SearchTotal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { Trans } from 'react-i18next';
 const SearchTotal = ({ total, offset, pageLength, ...typographyProps }) => {
-    return (_jsx(Typography, { ...typographyProps, children: total <= 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
+    return (_jsx(Typography, { ...typographyProps, children: total < 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
                 total: total
             } })) : (_jsx(Trans, { i18nKey: "search.result.showing", values: {
                 total: total,

package/components/elements/addons/search/SearchTotal.test.js

@@ -15,9 +15,9 @@ describe('SearchTotal', () => {
             render(_jsx(SearchTotal, { total: 0, offset: 0, pageLength: 0 }), { wrapper: Wrapper });
             expect(screen.getByText('No results')).toBeInTheDocument();
         });
-        it('renders "No results" text when total is 1', () => {
+        it('renders "Showing 1 to 1 of 1 results" text when total is 1', () => {
             render(_jsx(SearchTotal, { total: 1, offset: 0, pageLength: 1 }), { wrapper: Wrapper });
-            expect(screen.getByText('No results')).toBeInTheDocument();
+            expect(screen.getByText('Showing 1 to 1 of 1 results')).toBeInTheDocument();
         });
         it('renders range text when total is greater than 1', () => {
             render(_jsx(SearchTotal, { total: 50, offset: 0, pageLength: 25 }), { wrapper: Wrapper });

package/components/elements/addons/search/phrase/Phrase.js

@@ -80,7 +80,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
                         onSelectCapture: _onSelectCapture,
                         startAdornment: startAdornment && _jsx(InputAdornment, { position: "start", children: startAdornment }),
                         endAdornment: endAdornment && _jsx(InputAdornment, { position: "end", children: endAdornment })
-                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 2, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
+                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 1, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
                                 '&:focus': {
                                     outline: 'none'
                                 }

package/components/elements/case/CaseCard.d.ts

@@ -0,0 +1,12 @@
+import { type CardProps } from '@mui/material';
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseCard: FC<{
+    case?: Case;
+    caseId?: string;
+    className?: string;
+    slotProps?: {
+        card?: CardProps;
+    };
+}>;
+export default CaseCard;

package/components/elements/case/CaseCard.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckCircleOutline, HourglassBottom, RadioButtonUnchecked, UpdateOutlined } from '@mui/icons-material';
+import { Chip, Divider, Grid, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import StatusIcon from '@cccsaurora/howler-ui/components/elements/case/StatusIcon';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import PluginChip from '@cccsaurora/howler-ui/components/elements/PluginChip';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { countBy } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+import HowlerCard from '../display/HowlerCard';
+const STATUS_COLORS = {
+    resolved: 'success'
+};
+const CaseCard = ({ case: providedCase, caseId, className, slotProps }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
+        }
+    }, [caseId, dispatchApi]);
+    if (!_case) {
+        return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
+    }
+    return (_jsx(HowlerCard, { ...slotProps?.card, sx: [
+            { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main },
+            ...(Array.isArray(slotProps?.card?.sx) ? slotProps.card.sx : slotProps?.card?.sx ? [slotProps.card.sx] : [])
+        ], className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", children: _case.title }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 0.5, sx: { ml: `${theme.spacing(-0.5)} !important`, mt: `${theme.spacing(0.5)} !important` }, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
+                                        .filter(task => !task.complete)
+                                        .map(task => (_jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: task.summary }, task.id)))] })] }))] }) }) }, _case.case_id));
+};
+export default CaseCard;

package/components/elements/case/CasePreview.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+type PreviewProps = {
+    case: Case;
+};
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
+export default _default;

package/components/elements/case/CasePreview.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleOutline, HourglassBottom, RadioButtonUnchecked, UpdateOutlined } from '@mui/icons-material';
+import { Chip, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import dayjs from 'dayjs';
+import { countBy } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+import HowlerAvatar from '../display/HowlerAvatar';
+import StatusIcon from './StatusIcon';
+const CasePreview = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const taskCounts = countBy(_case.tasks, task => task.complete);
+    return (_jsxs(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: _case.title }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] })] }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, alignItems: "end", children: [_case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_case.participants?.length > 0 && (_jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: participant }, participant))) })), _jsx(Chip, { color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${taskCounts.true ?? 0} ${t('complete')}` }), _jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: `${taskCounts.false ?? 0} ${t('incomplete')}` })] })] }));
+};
+export default memo(CasePreview);

package/components/elements/case/StatusIcon.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const StatusIcon: FC<{
+    status: string;
+}>;
+export default StatusIcon;

package/components/elements/case/StatusIcon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check, HourglassBottom, Pause, Troubleshoot } from '@mui/icons-material';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const StatusIcon = ({ status }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t(`page.cases.status.${status}`), children: {
+            'in-progress': _jsx(HourglassBottom, { color: "warning" }),
+            'on-hold': _jsx(Pause, { color: "disabled" }),
+            resolved: _jsx(Check, { color: "success" })
+        }[status] ?? _jsx(Troubleshoot, { color: "primary" }) }));
+};
+export default StatusIcon;

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

@@ -15,8 +15,8 @@ interface ChipPopperProps {
     onToggle?: (show: boolean) => void;
     onDelete?: (event?: any) => void;
     toggleOnDelete?: boolean;
-    closeOnClick?: boolean;
     disablePortal?: boolean;
+    closeOnClick?: boolean;
 }
 declare const _default: import("react").NamedExoticComponent<ChipPopperProps>;
 export default _default;

package/components/elements/display/ChipPopper.js

@@ -1,9 +1,9 @@
 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';
+import { memo, useState } from 'react';
 const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = 'bottom-start', onToggle, onDelete, toggleOnDelete = false, closeOnClick = false, disablePortal = true, slotProps = {} }) => {
     const [show, setShow] = useState(false);
-    const anchorEl = useRef(null);
+    const [anchorEl, setAnchorEl] = useState(null);
     const handleToggle = (newShow) => {
         setShow(newShow);
         onToggle?.(newShow);
@@ -11,7 +11,8 @@ const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = '
     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: [
+                    e.preventDefault();
+                }, onDelete: onDelete ?? (toggleOnDelete ? () => handleToggle(!show) : null), ref: setAnchorEl, sx: [
                     theme => ({
                         position: 'relative',
                         zIndex: 1,
@@ -19,8 +20,8 @@ const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = '
                     }),
                     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: disablePortal, open: true, sx: {
-                    minWidth: Math.max(typeof minWidth === 'number' ? minWidth : parseInt(minWidth?.replace('px', '')) || 0, anchorEl.current?.clientWidth || 0),
+                ], ...(slotProps.chip ?? {}) }), _jsx(Popper, { placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, open: !!anchorEl, sx: {
+                    minWidth: Math.max(typeof minWidth === 'number' ? minWidth : parseInt(minWidth?.replace('px', '')) || 0, anchorEl?.clientWidth || 0),
                     zIndex: 1000
                 }, children: _jsx(Collapse, { in: show, unmountOnExit: true, onClick: () => {
                         if (closeOnClick) {

package/components/elements/display/Classification.js

@@ -16,7 +16,7 @@ const Classification = () => {
             return config.c12nDef?.RESTRICTED ?? 'Unknown';
         }
     }, [config.c12nDef?.RESTRICTED, isSm]);
-    const color = useMemo(() => config.c12nDef?.levels_styles_map?.[label.replace(/\/\/.+/, '')]?.color ?? 'default', [config.c12nDef?.levels_styles_map, label]);
+    const color = useMemo(() => (config.c12nDef?.levels_styles_map?.[label.replace(/\/\/.+/, '')]?.color ?? 'default'), [config.c12nDef?.levels_styles_map, label]);
     return _jsx(Chip, { label: t(label), color: color, sx: { mr: 1, fontSize: '.9rem', p: 2, textTransform: 'uppercase' } });
 };
 export default Classification;

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

@@ -0,0 +1,14 @@
+import type { ChipOwnProps } from '@mui/material';
+import React from 'react';
+import { type FormatProp } from '@cccsaurora/howler-ui/utils/classificationParser';
+interface EnrichedChipProps {
+    classification: string;
+    format?: FormatProp;
+    isMobile?: boolean;
+}
+declare const _default: React.NamedExoticComponent<EnrichedChipProps & ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "icon" | "label" | "size" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "avatar" | "variant" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    component?: React.ElementType;
+}>;
+export default _default;

package/components/elements/display/ClassificationChip.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Tooltip } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import React, { memo, useContext, useMemo } from 'react';
+import { getParts, normalizedClassification } from '@cccsaurora/howler-ui/utils/classificationParser';
+const THEME_TYPES = ['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning'];
+const ClassificationChip = React.memo(({ classification, format = 'short', isMobile = true, ...otherProps }) => {
+    const { config } = useContext(ApiConfigContext);
+    const parts = useMemo(() => {
+        if (!config.c12nDef) {
+            return null;
+        }
+        return getParts(classification, config.c12nDef, format, isMobile);
+    }, [classification, config.c12nDef, format, isMobile]);
+    const normalized = useMemo(() => {
+        if (!config.c12nDef || !parts) {
+            return classification;
+        }
+        return normalizedClassification(parts, config.c12nDef, format, isMobile);
+    }, [classification, config.c12nDef, format, isMobile, parts]);
+    const chipProps = useMemo(() => {
+        const definedColor = config.c12nDef?.levels_styles_map[config.c12nDef?.levels_map[parts.lvlIdx]]?.color;
+        if (THEME_TYPES.includes(definedColor)) {
+            return { color: definedColor };
+        }
+        if (definedColor) {
+            return { sx: { color: definedColor } };
+        }
+        return { color: 'default' };
+    }, [config.c12nDef?.levels_map, config.c12nDef?.levels_styles_map, parts.lvlIdx]);
+    return (_jsx(Tooltip, { title: classification, children: _jsx(Chip, { variant: otherProps.variant || 'outlined', label: normalized, ...chipProps, ...otherProps, sx: [
+                ...(Array.isArray(chipProps.sx) ? chipProps.sx : [chipProps.sx]),
+                ...(Array.isArray(otherProps.sx) ? otherProps.sx : [otherProps.sx])
+            ] }) }));
+});
+export default memo(ClassificationChip);

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

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

@@ -12,25 +12,21 @@ describe('HowlerCard', () => {
             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', () => {
+        it('uses elevation when no variant is specified', () => {
             const { container } = render(_jsx(HowlerCard, {}));
-            expect(container.firstChild).toHaveClass('MuiPaper-elevation4');
+            expect(container.firstChild).toHaveClass('MuiPaper-elevation');
         });
-        it('uses elevation 4 when variant is not outlined', () => {
+        it('uses elevation when variant is not outlined', () => {
             const { container } = render(_jsx(HowlerCard, { variant: "elevation" }));
-            expect(container.firstChild).toHaveClass('MuiPaper-elevation4');
+            expect(container.firstChild).toHaveClass('MuiPaper-elevation');
         });
         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');
+            expect(container.firstChild).not.toHaveClass('MuiPaper-elevation');
         });
     });
     describe('prop passthrough', () => {

package/components/elements/display/ItemManager.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Fab, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ const ItemManager = ({ aboveSearch, afterSearch, belowSearch, searchFilters, has
                                             sx: {
                                                 pr: 1
                                             }
-                                        }, startAdornment: _jsx(Tooltip, { title: t(searchPrompt), children: _jsx(IconButton, { onClick: () => onSearch(), children: _jsx(Search, {}) }) }), endAdornment: _jsx(_Fragment, { children: searchAdornment }) }), searching && (_jsx(LinearProgress, { sx: theme => ({
+                                        }, endAdornment: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Tooltip, { title: t(searchPrompt), children: _jsx(IconButton, { onClick: () => onSearch(), children: _jsx(Search, {}) }) }), searchAdornment] }) }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                             mt: -0.5,
                                             borderBottomLeftRadius: theme.shape.borderRadius,
                                             borderBottomRightRadius: theme.shape.borderRadius

package/components/elements/display/Modal.js

@@ -1,6 +1,7 @@
 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);
@@ -15,6 +16,7 @@ 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.d.ts

@@ -2,5 +2,6 @@ import type { FC } from 'react';
 declare const QueryResultText: FC<{
     count: number;
     query: string;
+    mb?: number;
 }>;
 export default QueryResultText;