@cccsaurora/howler-ui 2.19.0-dev.989 → 2.19.0

package/components/elements/addons/lists/table/index.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { TuiListItemProps } from '..';
-export declare const MATCHERS: readonly ["like", "in", "is", ">=", "<=", "="];
+export declare const MATCHERS: readonly ['like', 'in', 'is', '>=', '<=', '='];
 export type TuiSearchMatcher = (typeof MATCHERS)[number];
 export type TuiTableColumn = {
     column: string;

package/components/elements/addons/search/SearchPagination.d.ts

@@ -3,7 +3,8 @@ type SearchPaginationProps = Omit<PaginationProps, 'onChange'> & {
     limit: number;
     offset: number;
     total: number;
+    removeCount?: number;
     onChange: (nextOffset: number) => void;
 };
-declare const SearchPagination: ({ limit, offset, total, onChange, ...paginationProps }: SearchPaginationProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchPagination: ({ limit, offset, total, removeCount, onChange, ...paginationProps }: SearchPaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchPagination;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pagination } from '@mui/material';
 import { useCallback } from 'react';
-const SearchPagination = ({ limit, offset, total, onChange, ...paginationProps }) => {
+const SearchPagination = ({ limit, offset, total, removeCount, onChange, ...paginationProps }) => {
     const onPageChange = useCallback((_event, nextPage) => {
         onChange(nextPage === 1 ? 0 : (nextPage - 1) * limit);
     }, [limit, onChange]);
-    const count = Math.ceil(total / limit);
-    const page = Math.floor((offset + 1) / limit) + 1;
-    return limit && total && limit < total ? (_jsx(Pagination, { count: count, page: page, onChange: onPageChange, ...paginationProps })) : null;
+    const count = Math.ceil((total + (removeCount ?? 0)) / limit);
+    const page = Math.floor((offset + 1 + (removeCount ?? 0)) / limit) + 1;
+    return limit && total && count > 1 ? (_jsx(Pagination, { count: count, page: page, onChange: onPageChange, ...paginationProps })) : null;
 };
 export default SearchPagination;

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 });
@@ -38,7 +38,9 @@ describe('SearchTotal', () => {
             expect(container.firstChild).toHaveClass('custom');
         });
         it('passes variant to Typography', () => {
-            const { container } = render(_jsx(SearchTotal, { total: 10, offset: 0, pageLength: 10, variant: "caption" }), { wrapper: Wrapper });
+            const { container } = render(_jsx(SearchTotal, { total: 10, offset: 0, pageLength: 10, variant: "caption" }), {
+                wrapper: Wrapper
+            });
             expect(container.firstChild).toHaveClass('MuiTypography-caption');
         });
     });

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/addons/search/phrase/WordLexer.test.d.ts

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

package/components/elements/addons/search/phrase/WordLexer.test.js

@@ -0,0 +1,55 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import WordLexer from './word/WordLexer';
+describe('WordLexer', () => {
+    const lexer = new WordLexer();
+    describe('parse', () => {
+        it('parses a single word', () => {
+            const result = lexer.parse('hello');
+            expect(result.tokens).toHaveLength(2); // word + eop
+            expect(result.tokens[0].type).toBe('word');
+            expect(result.tokens[0].value).toBe('hello');
+        });
+        it('parses two words separated by a space', () => {
+            const result = lexer.parse('hello world');
+            const nonEop = result.tokens.filter(t => t.type !== 'eop');
+            expect(nonEop.some(t => t.type === 'word' && t.value === 'hello')).toBe(true);
+            expect(nonEop.some(t => t.type === 'word' && t.value === 'world')).toBe(true);
+        });
+        it('always ends with an eop token', () => {
+            const result = lexer.parse('foo bar');
+            const last = result.tokens[result.tokens.length - 1];
+            expect(last.type).toBe('eop');
+            expect(last.value).toBe('');
+        });
+        it('returns an eop-only token list for empty input', () => {
+            const result = lexer.parse('');
+            expect(result.tokens).toHaveLength(1);
+            expect(result.tokens[0].type).toBe('eop');
+        });
+        it('sets cursor correctly', () => {
+            const result = lexer.parse('hello', 3);
+            expect(result.cursor).toBe(3);
+        });
+        it('sets current token for cursor in the middle of a word', () => {
+            const result = lexer.parse('hello', 3);
+            expect(result.current?.type).toBe('word');
+        });
+        it('provides suggest token for current cursor position', () => {
+            const result = lexer.parse('hello world', 7);
+            expect(result.suggest).toBeDefined();
+            expect(result.suggest.token).toBeDefined();
+        });
+        it('sets startIndex/endIndex correctly on word tokens', () => {
+            const result = lexer.parse('hi');
+            const wordToken = result.tokens.find(t => t.type === 'word');
+            expect(wordToken.startIndex).toBe(0);
+            expect(wordToken.endIndex).toBe(1);
+        });
+        it('whitespace tokens have correct type', () => {
+            const result = lexer.parse('a b');
+            const wsToken = result.tokens.find(t => t.type === 'whitespace');
+            expect(wsToken).toBeDefined();
+        });
+    });
+});

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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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) {
+            void 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/ActionButton.js

@@ -11,7 +11,7 @@ const ActionButton = ({ actionId, hitId, label, ...otherProps }) => {
     const { executeAction } = useMyActionFunctions();
     const [action, setAction] = useState(null);
     useEffect(() => {
-        dispatchApi(api.search.action.post({ query: `action_id:${actionId}`, rows: 1 })).then(result => setAction(result.items[0]));
+        void dispatchApi(api.search.action.post({ query: `action_id:${actionId}`, rows: 1 })).then(result => setAction(result.items[0]));
     }, [actionId, dispatchApi]);
     if (!actionId || !hitId) {
         return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: t('markdown.error') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: t('markdown.actionbutton.error') })] }));

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 { Fragment as _Fragment, jsx as _jsx, 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>;
+}, "avatar" | "children" | "className" | "classes" | "clickable" | "color" | "deleteIcon" | "disabled" | "icon" | "label" | "onDelete" | "size" | "skipFocusWhenDisabled" | "style" | "sx" | "tabIndex" | "variant"> & {
+    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/HandlebarsMarkdown.js

@@ -7,7 +7,17 @@ import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { hashCode } from '@cccsaurora/howler-ui/utils/utils';
 import Markdown, {} from '../display/Markdown';
-import { useHelpers } from './handlebars/helpers';
+import { HowlerHelperError, useHelpers } from './handlebars/helpers';
+class HowlerHandlebarsRenderError extends Error {
+    helper;
+    hint;
+    constructor(message, helper, hint) {
+        super(Handlebars.escapeExpression(message));
+        this.name = 'HowlerHandlebarsRenderError';
+        this.helper = Handlebars.escapeExpression(helper);
+        this.hint = hint ? Handlebars.escapeExpression(hint) : undefined;
+    }
+}
 const THROTTLER = new Throttler(500);
 const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
     const { t } = useTranslation();
@@ -40,7 +50,7 @@ const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
                     if (!mdComponents[id]) {
                         const result = helper.componentCallback(...args);
                         if (result instanceof Promise) {
-                            result.then(_result => setMdComponents(_components => ({ ..._components, [id]: _result })));
+                            void result.then(_result => setMdComponents(_components => ({ ..._components, [id]: _result })));
                         }
                         else {
                             setMdComponents(_components => ({ ..._components, [id]: result }));
@@ -48,12 +58,29 @@ const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
                     }
                     return new Handlebars.SafeString(`\`${id}\``);
                 }
-                return helper.callback(...args);
+                try {
+                    const result = helper.callback(...args);
+                    return result instanceof Promise
+                        ? result.catch(err => {
+                            if (err instanceof HowlerHelperError) {
+                                throw new HowlerHandlebarsRenderError(err.message, helper.keyword, helper.hint);
+                            }
+                            throw err;
+                        })
+                        : result;
+                }
+                catch (err) {
+                    if (err instanceof HowlerHelperError) {
+                        throw new HowlerHandlebarsRenderError(err.message, helper.keyword, helper.hint);
+                    }
+                    throw err;
+                }
             });
         });
     }, [handlebars, helpers, mdComponents]);
     useEffect(() => {
         THROTTLER.debounce(async () => {
+            // Types are a bit muddled here due to the async helpers
             const compiled = handlebars.compile(md || '');
             try {
                 setRendered(await compiled(object));
@@ -65,6 +92,14 @@ const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
                     setRendered(await compiled(object));
                     return;
                 }
+                if (err instanceof HowlerHandlebarsRenderError) {
+                    setRendered(`
+<h2 style="color: red">${t('markdown.error')}</h2>
+<span style="color: red; font-weight: bold; font-family: monospace;">Invalid Usage [${err.helper}]: ${err.message}</span>
+${err.hint ? `<br/><span style="color: gray; font-family: monospace;">${err.hint}</span>` : ''}
+          `);
+                    return;
+                }
                 // eslint-disable-next-line no-console
                 console.error(err);
                 setRendered(`

package/components/elements/display/HowlerAvatar.js

@@ -38,10 +38,10 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userId]);
     if (userId) {
-        return (_jsx(Tooltip, { title: displayId, children: _jsx(Avatar, { "aria-label": displayId, ...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 || {}) } }));
+        return (_jsx(Avatar, { "aria-label": t('unknown'), ...avatarProps, ...props, sx: { ...avatarProps?.sx, ...props?.sx } }));
     }
 };
 export default memo(HowlerAvatar);

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/Image.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Close } from '@mui/icons-material';
 import { Box, IconButton, lighten, Modal } from '@mui/material';
 import { useState } from 'react';
 const Image = props => {
     const [showModal, setShowModal] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx("img", { ...props, style: { ...(props.style ?? {}), cursor: 'pointer' }, onClick: () => setShowModal(true) }), _jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: _jsxs(Box, { sx: {
+    return (_jsxs(_Fragment, { children: [_jsx("img", { ...props, style: { ...props.style, cursor: 'pointer' }, onClick: () => setShowModal(true) }), _jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: _jsxs(Box, { sx: {
                         width: '100%',
                         height: '100%',
                         display: 'flex',
@@ -18,6 +18,6 @@ const Image = props => {
                                 '&:hover': {
                                     backgroundColor: lighten(theme.palette.background.paper, 0.1)
                                 }
-                            }), children: _jsx(Close, {}) }), _jsx("img", { ...props, style: { ...(props.style ?? {}), maxWidth: '70vw', maxHeight: '70vh' } })] }) })] }));
+                            }), children: _jsx(Close, {}) }), _jsx("img", { ...props, style: { ...props.style, maxWidth: '70vw', maxHeight: '70vh' } })] }) })] }));
 };
 export default Image;

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

@@ -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,11 +20,11 @@ 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
-                                        }) }))] }), 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

@@ -53,7 +53,7 @@ const Markdown = ({ md, components = {}, disableLinks = false }) => {
         });
     }, [isDark, theme]);
     useEffect(() => {
-        mermaid.run();
+        void mermaid.run();
     });
     return (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, codeTabs], rehypePlugins: [rehypeRaw], urlTransform: (value) => value, components: {
             code({ node, className, children, ...props }) {
@@ -76,7 +76,7 @@ const Markdown = ({ md, components = {}, disableLinks = false }) => {
                     try {
                         return _jsx(JSONViewer, { data: JSON.parse(node.children[0].value) });
                     }
-                    catch (e) {
+                    catch {
                         return _jsx("code", { style: { color: 'red' }, children: t('markdown.json.invalid') });
                     }
                 }

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;