@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/elements/addons/lists/table/TuiTableLayout.js

@@ -2,7 +2,7 @@ export default class TuiTableLayout {
     tableWidth;
     bodyWidth;
     columns = [];
-    widths;
+    widths = {};
     constructor(tableWidth, bodyWidth, columns) {
         this.tableWidth = tableWidth;
         this.bodyWidth = bodyWidth;

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

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

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

@@ -41,7 +41,7 @@ describe('SearchPagination', () => {
             render(_jsx(SearchPagination, { ...defaultProps, offset: 50 }));
             // offset 50 with limit 25 = page 3
             const page3 = screen.getByText('3');
-            expect(page3.closest('button')).toHaveAttribute('aria-current', 'true');
+            expect(page3.closest('button')).toHaveAttribute('aria-current', 'page');
         });
     });
     describe('interaction', () => {

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

@@ -4,5 +4,5 @@ type SearchTotalProps = TypographyProps & {
     offset: number;
     pageLength: number;
 };
-declare const SearchTotal: ({ total, offset, pageLength, ...typographyProps }: SearchTotalProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchTotal: ({ total, offset, pageLength, ...typographyProps }: SearchTotalProps) => import("react").JSX.Element;
 export default SearchTotal;

package/components/elements/addons/search/phrase/Phrase.d.ts

@@ -1,5 +1,5 @@
 import { type TextFieldProps } from '@mui/material';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { parseEvent } from '@tui/core';
 import { type ReactElement } from 'react';
 import type { PhraseSuggester } from '.';
 import type PhraseLexer from './PhraseLexer';
@@ -15,5 +15,5 @@ export type PhraseProps = Omit<TextFieldProps, 'onChange' | 'onKeyDown' | 'varia
     onChange: (phrase: string) => void;
     onKeyDown?: (event: ReturnType<typeof parseEvent>) => void;
 };
-declare const Phrase: ({ value, variant, suggestions, lexer, suggester, debug, startAdornment, endAdornment, onChange, onKeyDown, ...props }: PhraseProps) => import("react/jsx-runtime").JSX.Element;
+declare const Phrase: ({ value, variant, suggestions, lexer, suggester, debug, startAdornment, endAdornment, onChange, onKeyDown, ...props }: PhraseProps) => import("react").JSX.Element;
 export default Phrase;

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ClickAwayListener, InputAdornment, ListItemText, MenuItem, MenuList, Paper, Popper, TextField } from '@mui/material';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { parseEvent } from '@tui/core';
 import { useEffect, useRef, useState } from 'react';
 import WordLexer from './word/WordLexer';
 import WordSuggestor from './word/WordSuggester';
 const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, suggester, debug, startAdornment, endAdornment, onChange, onKeyDown, ...props }) => {
-    const containerRef = useRef();
-    const inputRef = useRef();
-    const menuRef = useRef();
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const menuRef = useRef(null);
     const lexerRef = useRef(lexer || new WordLexer());
-    const analysisRef = useRef();
+    const analysisRef = useRef(null);
     const suggesterRef = useRef(suggester || new WordSuggestor(suggestions));
     const [optionsOpen, setOptionsOpen] = useState(false);
     const [options, setOptions] = useState(suggestions);
@@ -63,7 +63,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
             onKeyDown(parsedEvent);
         }
     };
-    const _onSelectCapture = event => {
+    const _onSelectCapture = (event) => {
         if (optionsOpen) {
             _suggest(event.target.value);
         }
@@ -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: 1, 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 === true && (analysisRef.current?.tokens?.length ?? 0) > 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/PhraseConsumer.d.ts

@@ -1,7 +1,7 @@
 import type { PhraseToken } from '.';
 import type PhraseLexer from './PhraseLexer';
 export default abstract class PhraseConsumer<L extends PhraseLexer> {
-    protected _buffer: any[];
+    protected _buffer: string[];
     reset(): void;
     init(buffer: string[], _lexer?: L): void;
     append(next: string, _lexer?: L): void;
@@ -9,5 +9,5 @@ export default abstract class PhraseConsumer<L extends PhraseLexer> {
     endsWithAny(...values: string[]): boolean;
     test(regex: RegExp): boolean;
     abstract lock(lexer: L): boolean;
-    abstract consume(lexer: L): PhraseToken;
+    abstract consume(lexer: L): PhraseToken | null;
 }

package/components/elements/addons/search/phrase/PhraseLexer.d.ts

@@ -10,7 +10,7 @@ export default abstract class PhraseLexer {
     private _endIndex;
     private find;
     parse(phrase: string, cursor?: number): PhraseAnalysis;
-    lock(): PhraseConsumer<PhraseLexer>;
+    lock(): PhraseConsumer<PhraseLexer> | undefined;
     buffer(): string[];
     bufferValue(): string;
     start(): number;

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

@@ -1,15 +1,15 @@
 export default class PhraseLexer {
-    _phrase = null;
-    _buffer = null;
-    _tokens = null;
-    _consumers = null;
+    _phrase = '';
+    _buffer = [];
+    _tokens = [];
+    _consumers = [];
     _consumer = null;
     _startIndex = 0;
     _endIndex = -1;
     find(cursor, tokens) {
         const index = tokens.findIndex(t => t.startIndex <= cursor && cursor <= t.endIndex);
         const token = tokens.at(index);
-        return { index, token };
+        return { index, token: token };
     }
     parse(phrase, cursor = 0) {
         this._phrase = phrase;
@@ -29,7 +29,7 @@ export default class PhraseLexer {
             let newLock = false;
             // Try to find a consumer to lock on.
             if (!this._consumer) {
-                this._consumer = this.lock();
+                this._consumer = this.lock() ?? null;
                 if (this._consumer) {
                     newLock = true;
                     // console.log('new lock...');

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

@@ -1,4 +1,5 @@
 /// <reference types="vitest" />
+// @ts-nocheck
 import { describe, expect, it } from 'vitest';
 import WordLexer from './word/WordLexer';
 describe('WordLexer', () => {

package/components/elements/addons/search/phrase/index.d.ts

@@ -27,7 +27,7 @@ export type PhraseSuggestorValue = {
 };
 export declare class PhraseBuffer {
     constructor(type?: string);
-    private type;
+    private type?;
     private startIndex;
     private endIndex;
     private buffer;
@@ -36,5 +36,5 @@ export declare class PhraseBuffer {
     value(): string;
     start(index?: number): number;
     end(index?: number): number;
-    token(): PhraseToken;
+    token(): PhraseToken | null;
 }

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

@@ -1,3 +1,4 @@
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 export class PhraseBuffer {
     constructor(type) {
         this.type = type;
@@ -21,13 +22,13 @@ export class PhraseBuffer {
         return this.buffer.join('');
     }
     start(index) {
-        if (index !== undefined) {
+        if (notNil(index)) {
             this.startIndex = index;
         }
         return this.startIndex;
     }
     end(index) {
-        if (index !== undefined) {
+        if (notNil(index)) {
             this.endIndex = index;
         }
         return this.endIndex;

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.d.ts

@@ -3,5 +3,5 @@ import PhraseConsumer from '../../PhraseConsumer';
 import type PhraseLexer from '../../PhraseLexer';
 export default class WhitespaceConsumer extends PhraseConsumer<PhraseLexer> {
     lock(lexer: PhraseLexer): boolean;
-    consume(lexer: PhraseLexer): PhraseToken;
+    consume(lexer: PhraseLexer): PhraseToken | null;
 }

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.js

@@ -1,7 +1,7 @@
 import PhraseConsumer from '../../PhraseConsumer';
 export default class WhitespaceConsumer extends PhraseConsumer {
     lock(lexer) {
-        return lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== ' ';
+        return !!lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== ' ';
     }
     consume(lexer) {
         if (lexer.ahead(1) !== ' ') {

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.d.ts

@@ -3,5 +3,5 @@ import PhraseConsumer from '../../PhraseConsumer';
 import type PhraseLexer from '../../PhraseLexer';
 export default class WordConsumer extends PhraseConsumer<PhraseLexer> {
     lock(lexer: PhraseLexer): boolean;
-    consume(lexer: PhraseLexer): PhraseToken;
+    consume(lexer: PhraseLexer): PhraseToken | null;
 }

package/components/elements/case/CaseCard.js

@@ -27,17 +27,23 @@ const CaseCard = ({ case: providedCase, caseId, className, slotProps }) => {
     }, [providedCase]);
     useEffect(() => {
         if (caseId) {
-            void dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
+            void dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(result => {
+                if (result) {
+                    setCase(result);
+                }
+            });
         }
     }, [caseId, dispatchApi]);
     if (!_case) {
         return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
     }
+    const statusColor = STATUS_COLORS[_case.status];
     return (_jsx(HowlerCard, { ...slotProps?.card, sx: [
-            { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main },
+            { p: 1, mb: 1, borderColor: statusColor ? theme.palette[statusColor].main : undefined },
             ...(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)
+        ], 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) > 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, { children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), (_case.targets?.length ?? 0) > 0 &&
+                                ((_case.indicators?.length ?? 0) > 0 || (_case.threats?.length ?? 0) > 0) && (_jsx(Grid, { children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), (_case.indicators?.length ?? 0) > 0 && (_case.threats?.length ?? 0) > 0 && (_jsx(Grid, { children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), (_case.tasks?.length ?? 0) > 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.js

@@ -12,6 +12,6 @@ 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')}` })] })] }));
+    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) > 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/display/ActionButton.js

@@ -11,7 +11,9 @@ const ActionButton = ({ actionId, hitId, label, ...otherProps }) => {
     const { executeAction } = useMyActionFunctions();
     const [action, setAction] = useState(null);
     useEffect(() => {
-        void 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] ?? null);
+        });
     }, [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.js

@@ -12,7 +12,7 @@ const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = '
                     handleToggle(!show);
                     e.stopPropagation();
                     e.preventDefault();
-                }, onDelete: onDelete ?? (toggleOnDelete ? () => handleToggle(!show) : null), ref: setAnchorEl, sx: [
+                }, onDelete: onDelete ?? (toggleOnDelete ? () => handleToggle(!show) : undefined), ref: setAnchorEl, sx: [
                     theme => ({
                         position: 'relative',
                         zIndex: 1,

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { Info } from '@mui/icons-material';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';

package/components/elements/display/Classification.js

@@ -4,19 +4,20 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 const Classification = () => {
-    const { config } = useContext(ApiConfigContext);
+    const { config, loaded } = useContext(ApiConfigContext);
     const { t } = useTranslation();
     const theme = useTheme();
     const isSm = useMediaQuery(theme.breakpoints.down('md'));
+    const c12nDef = loaded ? config.c12nDef : null;
     const label = useMemo(() => {
         if (isSm) {
-            return config.c12nDef?.RESTRICTED?.replace(/[a-z]/g, '').replace(/ /g, '') ?? '???';
+            return c12nDef?.RESTRICTED?.replace(/[a-z]/g, '').replace(/ /g, '') ?? '???';
         }
         else {
-            return config.c12nDef?.RESTRICTED ?? 'Unknown';
+            return 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]);
+    }, [c12nDef?.RESTRICTED, isSm]);
+    const color = useMemo(() => (c12nDef?.levels_styles_map?.[label.replace(/\/\/.+/, '')]?.color ?? 'default'), [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

@@ -6,9 +6,7 @@ interface EnrichedChipProps {
     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;
+declare const _default: React.NamedExoticComponent<EnrichedChipProps & ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "avatar" | "children" | "className" | "classes" | "clickable" | "color" | "deleteIcon" | "disabled" | "icon" | "label" | "onDelete" | "size" | "skipFocusWhenDisabled" | "slotProps" | "slots" | "style" | "sx" | "tabIndex" | "variant"> & {
+    component?: React.ElementType | undefined;
 }>;
 export default _default;

package/components/elements/display/ClassificationChip.js

@@ -19,15 +19,17 @@ const ClassificationChip = React.memo(({ classification, format = 'short', isMob
         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)) {
+        const definedColor = parts
+            ? config.c12nDef?.levels_styles_map[config.c12nDef?.levels_map[parts.lvlIdx]]?.color
+            : undefined;
+        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]);
+    }, [config.c12nDef?.levels_map, config.c12nDef?.levels_styles_map, parts]);
     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])

package/components/elements/display/DocumentationButton.js

@@ -3,7 +3,7 @@ import { Help } from '@mui/icons-material';
 import { IconButton, Tooltip } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 const DocumentationButton = () => {
     const { t } = useTranslation();
     const location = useLocation();

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

@@ -5,7 +5,7 @@ vi.mock('react-i18next', () => ({
 }));
 // Hoist the mutable location object so the mock factory can reference it
 const mockLocation = vi.hoisted(() => ({ pathname: '/' }));
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
     const { forwardRef } = await import('react');
     return {
         useLocation: () => ({ ...mockLocation }),

package/components/elements/display/HandlebarsMarkdown.js

@@ -105,10 +105,10 @@ ${err.hint ? `<br/><span style="color: gray; font-family: monospace;">${err.hint
                 setRendered(`
 <h2 style="color: red">${t('markdown.error')}</h2>
 
-**\`${err.toString()}\`**
+**\`${err instanceof Error ? err.toString() : String(err)}\`**
 
 <code style="font-size: 0.8rem"><pre>
-${err.stack}
+${err instanceof Error ? err.stack : ''}
 </pre></code>
         `);
             }

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

@@ -1,6 +1,7 @@
 import type { AvatarProps } from '@mui/material';
 type HowlerAvatarProps = AvatarProps & {
     userId: string;
+    label?: string;
 };
 declare const _default: import("react").NamedExoticComponent<HowlerAvatarProps>;
 export default _default;

package/components/elements/display/HowlerAvatar.js

@@ -5,12 +5,13 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nameToInitials } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-const HowlerAvatar = ({ userId, ...avatarProps }) => {
+const HowlerAvatar = ({ userId, label: _label, ...avatarProps }) => {
     const { t } = useTranslation();
     const { getAvatar } = useContext(AvatarContext);
     const theme = useTheme();
     const [props, setProps] = useState();
-    const displayId = userId && userId.toLowerCase() !== 'unassigned' ? userId : t('app.drawer.hit.assignment.unassigned.name');
+    const label = _label ||
+        (userId && userId.toLowerCase() !== 'unassigned' ? userId : t('app.drawer.hit.assignment.unassigned.name'));
     const stringAvatar = useCallback((name) => {
         return {
             sx: {
@@ -31,14 +32,14 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
                 // eslint-disable-next-line no-console
                 console.debug(e);
                 setProps({
-                    src: null
+                    src: undefined
                 });
             });
         }
         // 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: label, children: _jsx(Avatar, { "aria-label": label, ...avatarProps, ...props, sx: { ...avatarProps?.sx, ...props?.sx } }) }));
     }
     else {
         return (_jsx(Avatar, { "aria-label": t('unknown'), ...avatarProps, ...props, sx: { ...avatarProps?.sx, ...props?.sx } }));

package/components/elements/display/HowlerAvatarHeader.js

@@ -6,7 +6,7 @@ const AvatarContainer = styled(Grid)(({ theme }) => ({
 }));
 const HowlerAvatarHeader = ({ user }) => {
     const theme = useTheme();
-    return (_jsx(AvatarContainer, { item: true, sm: 12, md: 2, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(Grid, { item: true, children: _jsx(HowlerAvatar, { userId: user?.username, sx: {
+    return (_jsx(AvatarContainer, { size: { sm: 12, md: 2 }, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(Grid, { children: _jsx(HowlerAvatar, { userId: user?.username, sx: {
                             width: theme.spacing(16),
                             height: theme.spacing(16),
                             [theme.breakpoints.down('sm')]: {
@@ -14,6 +14,6 @@ const HowlerAvatarHeader = ({ user }) => {
                                 height: theme.spacing(24)
                             },
                             margin: '0 1rem'
-                        } }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { textAlign: "center", children: user?.name ?? '' }) })] }) }));
+                        } }) }), _jsx(Grid, { size: 12, children: _jsx(Typography, { textAlign: "center", children: user?.name ?? '' }) })] }) }));
 };
 export default HowlerAvatarHeader;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import Image from './Image';

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

@@ -1,7 +1,7 @@
 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 {
+import type { ReactNode } from 'react';
+interface ItemManagerProps<T = unknown> {
     aboveSearch?: ReactNode;
     afterSearch?: ReactNode;
     belowSearch?: ReactNode;
@@ -10,10 +10,10 @@ interface ItemManagerProps {
     onPageChange: (nextOffset: number) => void;
     onSearch: () => void;
     onCreate?: () => void;
-    onSelect?: TuiListItemOnSelect<unknown>;
+    onSelect?: TuiListItemOnSelect<T>;
     phrase: string;
-    renderer: TuiListItemRenderer<unknown>;
-    response: SearchResponseState<unknown>;
+    renderer: TuiListItemRenderer<T>;
+    response?: SearchResponseState<T>;
     searchAdornment?: ReactNode;
     searching: boolean;
     createPrompt?: string;
@@ -21,5 +21,5 @@ interface ItemManagerProps {
     setPhrase: (value: string) => void;
     createIcon?: ReactNode;
 }
-declare const ItemManager: FC<ItemManagerProps>;
+declare const ItemManager: <T = unknown>({ aboveSearch, afterSearch, belowSearch, searchFilters, hasError, onPageChange, onSearch, onSelect, onCreate, phrase, renderer, response, searchAdornment, searching, createPrompt, searchPrompt, setPhrase, createIcon }: ItemManagerProps<T>) => import("react").JSX.Element;
 export default ItemManager;

package/components/elements/display/ItemManager.js

@@ -1,6 +1,6 @@
 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 { PageCenter } from '@tui/core';
 import { useTranslation } from 'react-i18next';
 import { Add, Search } from '@mui/icons-material';
 import { TuiList } from '@cccsaurora/howler-ui/components/elements/addons/lists';

package/components/elements/display/Markdown.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppTheme } from '@tui/core';
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { Alert, Box, darken, lighten, Paper, Table, TableCell, TableContainer, TableHead, TableRow, useTheme } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import mermaid from 'mermaid';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeRaw from 'rehype-raw';
@@ -25,7 +25,10 @@ const customComponents = (type, children) => {
         return _jsx(Notebook, { ipynb: child });
     }
     else if (type === 'tabs') {
-        return (_jsx(DynamicTabs, { tabs: JSON.parse(child).map(t => ({ title: t.title, children: customComponents(t.lang, t.value) })) }));
+        return (_jsx(DynamicTabs, { tabs: JSON.parse(child).map(t => ({
+                title: t.title,
+                children: customComponents(t.lang, t.value)
+            })) }));
     }
     else {
         return _jsx("code", { children: child });
@@ -57,6 +60,9 @@ const Markdown = ({ md, components = {}, disableLinks = false }) => {
     });
     return (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, codeTabs], rehypePlugins: [rehypeRaw], urlTransform: (value) => value, components: {
             code({ node, className, children, ...props }) {
+                if (!node) {
+                    return (_jsx("code", { className: className, ...props, children: children }));
+                }
                 if (node.children?.length === 1 && node.children[0].type === 'text') {
                     if (node.children[0].value.startsWith('t(')) {
                         return _jsx("span", { children: t(node.children[0].value.replace(/t\((.+)\)/, '$1')) });

package/components/elements/display/Modal.js

@@ -14,9 +14,9 @@ const Modal = () => {
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
-                maxWidth: options.maxWidth || '1200px',
-                maxHeight: options.maxHeight || '400px',
-                height: has(options, 'height') ? options.height : 'auto',
+                maxWidth: options?.maxWidth || '1200px',
+                maxHeight: options?.maxHeight || '400px',
+                height: has(options, 'height') ? options?.height : 'auto',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/QueryResultText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const QueryResultText = ({ count, query, mb = 0.5 }) => {
     const { t } = useTranslation();
     return (_jsxs(Typography, { sx: theme => ({

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { render } from '@testing-library/react';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';

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

@@ -1,2 +1,2 @@
-declare const TypingIndicator: () => import("react/jsx-runtime").JSX.Element;
+declare const TypingIndicator: () => import("react").JSX.Element;
 export default TypingIndicator;

package/components/elements/display/UserPageWrapper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { Grid, Stack } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import HowlerAvatarHeader from './HowlerAvatarHeader';
-const UserPageWrapper = ({ user, children }) => (_jsx(PageCenter, { textAlign: "left", mt: 6, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(HowlerAvatarHeader, { user: user }), _jsx(Grid, { item: true, sm: 12, md: 9, children: _jsx(Stack, { direction: "column", spacing: 2, children: children }) })] }) }));
+const UserPageWrapper = ({ user, children }) => (_jsx(PageCenter, { textAlign: "left", mt: 6, children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [_jsx(HowlerAvatarHeader, { user: user }), _jsx(Grid, { size: { sm: 12, md: 9 }, children: _jsx(Stack, { direction: "column", spacing: 2, children: children }) })] }) }));
 export default UserPageWrapper;

package/components/elements/display/handlebars/helpers.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppListEmpty } from '@tui/core';
 /* eslint-disable no-console */
 import { Paper, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { flatten } from 'flat';