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

package/components/elements/membership/types.d.ts

@@ -0,0 +1,7 @@
+export interface Ownership {
+  owner?: string;
+  admins?: string[];
+  members?: string[];
+}
+
+export type MemberItem = [string, 'owner' | 'admins' | 'members'];

package/components/elements/membership/utils.d.ts

@@ -0,0 +1,2 @@
+import type { MemberItem, Ownership } from './types';
+export declare const getAllMembers: (item?: Ownership) => MemberItem[];

package/components/elements/membership/utils.js

@@ -0,0 +1,6 @@
+import { pick } from 'lodash-es';
+export const getAllMembers = (item) => item
+    ? Object.entries(pick(item, ['owner', 'admins', 'members'])).flatMap(([privilege, members]) => Array.isArray(members)
+        ? members.map(member => [member, privilege])
+        : [[members, privilege]])
+    : [];

package/components/elements/record/RecordComments.js

@@ -1,15 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clear, KeyboardArrowDown, Send } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, AvatarGroup, Chip, IconButton, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { omit } from 'lodash-es';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { compareTimestamp, sortByTimestamp } from '@cccsaurora/howler-ui/utils/utils';
 import Comment from '../Comment';
@@ -29,8 +30,8 @@ const RecordComments = ({ record, users }) => {
     const [length, setLength] = useState(0);
     const [analyticId, setAnalyticId] = useState();
     const [analyticComments, setAnalyticComments] = useState([]);
-    const [comments, setComments] = useState(sortByTimestamp(record?.howler?.comment));
-    const input = useRef();
+    const [comments, setComments] = useState(sortByTimestamp(record?.howler?.comment ?? []));
+    const input = useRef(null);
     /**
      * Set the list of typers based on updates from the websocket
      */
@@ -69,8 +70,13 @@ const RecordComments = ({ record, users }) => {
                 throwError: true,
                 logError: false
             });
-            setComments(sortByTimestamp(result.howler.comment));
-            input.current.value = '';
+            if (!result) {
+                return;
+            }
+            setComments(sortByTimestamp(result.howler.comment ?? []));
+            if (input.current) {
+                input.current.value = '';
+            }
             setShowClear(false);
         }
         finally {
@@ -107,7 +113,7 @@ const RecordComments = ({ record, users }) => {
             void onSubmit();
         }
     }, [loading, onSubmit]);
-    const checkLength = useCallback(() => setLength(input.current?.value.length), []);
+    const checkLength = useCallback(() => setLength(input.current?.value.length ?? 0), []);
     const handleDelete = useCallback(async (commentId) => {
         await dispatchApi(api.hit.comments.del(record.howler.id, [commentId]), { throwError: true, showError: true });
         setComments(comments.filter(cmt => cmt.id !== commentId));
@@ -137,11 +143,11 @@ const RecordComments = ({ record, users }) => {
     const handleReact = useCallback(async (commentId, type) => {
         if (type) {
             await dispatchApi(api.hit.comments.react.put(record.howler.id, commentId, type));
-            setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...cmt?.reactions, [user.username]: type } }));
+            setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...cmt.reactions, [user.username]: type } }));
         }
         else {
             await dispatchApi(api.hit.comments.react.del(record.howler.id, commentId));
-            setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...cmt?.reactions, [user.username]: undefined } }));
+            setComments(comments.map(cmt => (cmt.id !== commentId ? cmt : { ...cmt, reactions: omit(cmt.reactions, user.username) })));
         }
     }, [comments, dispatchApi, record?.howler.id, user.username]);
     /**
@@ -170,6 +176,6 @@ const RecordComments = ({ record, users }) => {
                                         : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${record?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
     }, [analyticComments, analyticId, record?.howler.analytic, record?.howler.detection, navigate, t, users]);
     const renderedComments = useMemo(() => comments.map(c => (_jsx(Comment, { comment: c, users: users, handleDelete: () => handleDelete(c.id), handleEdit: value => handleEdit(c.id, value), handleReact: type => handleReact(c.id, type), handleQuote: () => handleQuote(c.value) }, c.id))), [comments, handleDelete, handleEdit, handleQuote, handleReact, users]);
-    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [record && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), record ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
+    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [record && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), record ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
 };
 export default RecordComments;

package/components/elements/record/RecordContextMenu.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 /**
  * Props for the HitContextMenu component
  */
-interface RecordContextMenuProps {
+export interface RecordContextMenuProps {
     /**
      * Function to extract the hit ID from a mouse event
      */
-    getSelectedId: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => string;
+    getSelectedId: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => string | undefined;
     /**
      * Optional component to wrap the children, defaults to Box
      */

package/components/elements/record/RecordContextMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
@@ -54,8 +54,8 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
     const [id, setId] = useState(null);
     const record = useContextSelector(RecordContext, ctx => ctx.records[id]);
     const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
-    const [analytic, setAnalytic] = useState(null);
-    const [template, setTemplate] = useState(null);
+    const [analytic, setAnalytic] = useState();
+    const [template, setTemplate] = useState();
     const [actions, setActions] = useState([]);
     const records = useMemo(() => selectedRecords.some(_record => _record.howler.id === record?.howler.id)
         ? selectedRecords
@@ -78,6 +78,9 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
      */
     const onOpen = useCallback(async (event) => {
         const _id = getSelectedId(event);
+        if (!_id) {
+            return;
+        }
         setId(_id);
         // TODO: Bumping the number of rows is a temporary fix - we'll need to improve this.
         const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*', rows: 100, sort: 'name asc' }), {
@@ -101,7 +104,10 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
         if (canVote) {
             _actions = [
                 ..._actions,
-                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+                ...VOTE_OPTIONS.map(option => ({
+                    ...option,
+                    actionFunction: () => vote(option.name.toLowerCase())
+                }))
             ];
         }
         if (config.lookups?.['howler.assessment'] && canAssess) {
@@ -263,6 +269,6 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
         return result;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction, showModal, records]);
-    return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(null), items: items, children: children }));
+    return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(undefined), items: items, children: children }));
 };
 export default RecordContextMenu;

package/components/elements/record/RecordContextMenu.test.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import { omit } from 'lodash-es';
@@ -15,13 +16,14 @@ const mockUseAppUser = vi.hoisted(() => vi.fn(() => ({
         roles: ['automation_basic', 'actionrunner_basic']
     }
 })));
-vi.mock('commons/components/app/hooks/useAppUser', () => ({
-    useAppUser: mockUseAppUser
-}));
-// Mock react-router-dom
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return { ...actual, useAppUser: mockUseAppUser };
+});
+// Mock react-router
 const mockNavigate = vi.fn();
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         useNavigate: () => mockNavigate,
@@ -566,6 +568,9 @@ describe('HitContextMenu', () => {
             await waitFor(() => {
                 expect(screen.getByRole('menu')).toBeInTheDocument();
             });
+            await waitFor(() => {
+                expect(screen.getByText('Exclude By')).toBeInTheDocument();
+            });
             act(() => {
                 const excludesMenuItem = screen.getByText('Exclude By');
                 fireEvent.mouseEnter(excludesMenuItem);
@@ -692,6 +697,9 @@ describe('HitContextMenu', () => {
             await waitFor(() => {
                 expect(screen.getByRole('menu')).toBeInTheDocument();
             });
+            await waitFor(() => {
+                expect(screen.getByText('Include By')).toBeInTheDocument();
+            });
             act(() => {
                 const includesMenuItem = screen.getByText('Include By');
                 fireEvent.mouseEnter(includesMenuItem);

package/components/elements/record/RecordRelated.js

@@ -5,7 +5,7 @@ import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelated
 import { groupBy } from 'lodash-es';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import CaseCard from '../case/CaseCard';
 import HitCard from '../hit/HitCard';
@@ -29,6 +29,6 @@ const RecordRelated = ({ record }) => {
     if (!record) {
         return null;
     }
-    return (_jsxs(Box, { sx: { borderTop: `thin solid ${theme.palette.divider}`, height: '100%', flex: 1, mr: 2, pb: 2 }, children: [_jsxs(Tabs, { value: currentTab, onChange: (_, v) => setActiveTab(v), variant: "scrollable", scrollButtons: "auto", children: [hasLinks && _jsx(Tab, { value: "links", label: t('hit.related.tab.links') }), groups.hit?.length > 0 && _jsx(Tab, { value: "hit", label: t('hit.related.tab.hit') }), groups.case?.length > 0 && _jsx(Tab, { value: "case", label: t('hit.related.tab.case') }), groups.event?.length > 0 && _jsx(Tab, { value: "event", label: t('hit.related.tab.event') })] }), currentTab === 'links' && (_jsx(Box, { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 1, pt: 1, children: record.howler.links.map(l => (_jsx(RelatedLink, { ...l }, l.title + l.href))) })), currentTab === 'hit' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isHit).map(h => (_jsx(Link, { to: `/hits/${h.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(HitCard, { id: h.howler.id, layout: HitLayout.NORMAL }) }, h.howler.id))) })), currentTab === 'case' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isCase).map(c => (_jsx(Link, { to: `/cases/${c.case_id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(CaseCard, { case: c }) }, c.case_id))) })), currentTab === 'event' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isEvent).map(o => (_jsx(Link, { to: `/events/${o.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(EventCard, { event: o }) }, o.howler.id))) }))] }));
+    return (_jsxs(Box, { sx: { borderTop: `thin solid ${theme.palette.divider}`, height: '100%', flex: 1, mr: 2, pb: 2 }, children: [_jsxs(Tabs, { value: currentTab, onChange: (_, v) => setActiveTab(v), variant: "scrollable", scrollButtons: "auto", children: [hasLinks && _jsx(Tab, { value: "links", label: t('hit.related.tab.links') }), groups.hit?.length > 0 && _jsx(Tab, { value: "hit", label: t('hit.related.tab.hit') }), groups.case?.length > 0 && _jsx(Tab, { value: "case", label: t('hit.related.tab.case') }), groups.event?.length > 0 && _jsx(Tab, { value: "event", label: t('hit.related.tab.event') })] }), currentTab === 'links' && (_jsx(Box, { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 1, pt: 1, children: record.howler.links?.map(l => (_jsx(RelatedLink, { ...l, title: l.title, href: l.href }, (l.title ?? '') + (l.href ?? '')))) })), currentTab === 'hit' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isHit).map(h => (_jsx(Link, { to: `/hits/${h.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(HitCard, { id: h.howler.id, layout: HitLayout.NORMAL }) }, h.howler.id))) })), currentTab === 'case' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isCase).map(c => (_jsx(Link, { to: `/cases/${c.case_id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(CaseCard, { case: c }) }, c.case_id))) })), currentTab === 'event' && (_jsx(Stack, { spacing: 1, pt: 1, children: records.filter(isEvent).map(o => (_jsx(Link, { to: `/events/${o.howler.id}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(EventCard, { event: o }) }, o.howler.id))) }))] }));
 };
 export default RecordRelated;

package/components/elements/search/FuzzySearchBar.js

@@ -18,7 +18,7 @@ const FuzzySearchBar = ({ onSearch, loading = false }) => {
     const handleSearch = useCallback(() => {
         if (query.trim()) {
             setQuery(query.trim());
-            onSearch(query.trim(), indexes);
+            onSearch(query.trim(), indexes ?? ['hit']);
         }
     }, [query, setQuery, onSearch, indexes]);
     const handleKeyDown = useCallback((e) => {

package/components/elements/view/LayoutToggle.d.ts

@@ -4,5 +4,5 @@ declare const LayoutToggle: ({ displayType, setDisplayType, size, allowNullValue
     setDisplayType: (type: HowlerViewLayoutType) => void;
     size?: 'small' | 'medium' | 'large';
     allowNullValue?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default LayoutToggle;

package/components/elements/view/ViewTitle.js

@@ -21,15 +21,14 @@ export const ViewTitle = ({ title, type, query, sort, span, indexes, settings })
         if (!indexes || indexes.length === 0) {
             return '';
         }
-        else
-            return `(${indexes.join(', ')})`;
+        return `(${indexes.join(', ')})`;
     }, [indexes]);
     return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
+                        }[type] ?? _jsx("span", {}) }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
                             list: _jsx(List, { fontSize: "small" }),
                             grid: _jsx(TableChart, { fontSize: "small" })
-                        }[settings.display] })), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
+                        }[settings.display] ?? _jsx("span", {}) })), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
 };

package/components/hooks/useHitActions.d.ts

@@ -7,7 +7,7 @@ declare const useHitActions: (_hits: Hit | Hit[]) => {
     canAssess: boolean;
     loading: boolean;
     manage: (transition: string) => Promise<void>;
-    assess: (assessment: string, skipRationale?: boolean, providedRationale?: any) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean, providedRationale?: string | null) => Promise<void>;
     vote: (v: string) => Promise<void>;
     selectedVote: string;
 };

package/components/hooks/useHitActions.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
@@ -35,17 +35,17 @@ const useHitActions = (_hits) => {
     const [loading, setLoading] = useState(false);
     const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
     const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
-    const canAssess = useMemo(() => hits.every(hit => !(['on-hold', 'resolved'].includes(hit?.howler.status) && hit?.howler.assignment === user.username)), [hits, user.username]);
+    const canAssess = useMemo(() => hits.every(hit => !(['on-hold', 'resolved'].includes(hit?.howler.status ?? '') && hit?.howler.assignment === user.username)), [hits, user.username]);
     const selectedVote = useMemo(() => {
         if (hits.length !== 1) {
             return '';
         }
         const hit = hits[0];
-        return hit?.howler.votes.benign.includes(user.email)
+        return hit?.howler.votes?.benign?.includes(user.email)
             ? 'benign'
-            : hit?.howler.votes.malicious.includes(user.email)
+            : hit?.howler.votes?.malicious?.includes(user.email)
                 ? 'malicious'
-                : hit?.howler.votes.obscure.includes(user.email)
+                : hit?.howler.votes?.obscure?.includes(user.email)
                     ? 'obscure'
                     : '';
     }, [hits, user.email]);
@@ -72,12 +72,14 @@ const useHitActions = (_hits) => {
             setLoading(true);
             try {
                 await Promise.all(hits.map(async (hit) => {
-                    const _vote = () => api.hit.transition.post(hit?.howler.id, { transition: 'vote', data: { vote: v, email: user.email } });
+                    const _vote = () => api.hit.transition.post(hit.howler.id, { transition: 'vote', data: { vote: v, email: user.email } });
                     const updatedHit = await dispatchApi(_vote(), {
                         onConflict: async () => {
-                            await api.hit.get(hit?.howler.id);
+                            await api.hit.get(hit.howler.id);
                             const newResult = await _vote();
-                            updateHit(newResult);
+                            if (newResult) {
+                                updateHit(newResult);
+                            }
                         }
                     });
                     if (updatedHit) {
@@ -102,13 +104,19 @@ const useHitActions = (_hits) => {
             if (assessment !== hit?.howler.assessment) {
                 setLoading(true);
                 try {
-                    const update = () => api.hit.transition.post(hit?.howler.id, { transition: 'assess', data: { assessment, rationale } });
+                    const update = () => api.hit.transition.post(hit.howler.id, { transition: 'assess', data: { assessment, rationale } });
                     const updatedHit = await dispatchApi(update(), {
                         onConflict: async () => {
-                            const updatedData = await api.hit.get(hit?.howler.id);
+                            const updatedData = await api.hit.get(hit.howler.id);
+                            if (!updatedData) {
+                                showWarningMessage(t('hit.actions.conflict.assess'));
+                                return;
+                            }
                             if (!updatedData.howler.assessment) {
                                 const result = await update();
-                                updateHit(result);
+                                if (result) {
+                                    updateHit(result);
+                                }
                             }
                             else {
                                 updateHit(updatedData);
@@ -134,11 +142,13 @@ const useHitActions = (_hits) => {
                 data.assignee = await onAssign();
             }
             await Promise.all(hits.map(async (hit) => {
-                const update = () => api.hit.transition.post(hit?.howler.id, { transition, data });
+                const update = () => api.hit.transition.post(hit.howler.id, { transition, data });
                 const updatedHit = await dispatchApi(update(), {
                     onConflict: async () => {
-                        const updatedData = await api.hit.get(hit?.howler.id);
-                        updateHit(updatedData);
+                        const updatedData = await api.hit.get(hit.howler.id);
+                        if (updatedData) {
+                            updateHit(updatedData);
+                        }
                         showWarningMessage(t('hit.actions.conflict.manage'));
                     }
                 });
@@ -159,7 +169,7 @@ const useHitActions = (_hits) => {
     const availableTransitions = useMemo(() => MANAGE_OPTIONS.filter(option => {
         const name = option.name.toLowerCase();
         // Is this option one that is valid for the current state?
-        return hits.every(hit => config.config.lookups?.transitions[hit?.howler.status]?.includes(name) &&
+        return hits.every(hit => config.config.lookups?.transitions[hit.howler.status]?.includes(name) &&
             // If we are assigning or voting, the hit can't be assigned to the current user
             ((name !== 'assign_to_me' && name !== 'vote') || hit?.howler.assignment !== user.username) &&
             // If we are running any of these actions, the current user must be assigned the hit

package/components/hooks/useLocalStorage.d.ts

@@ -1,5 +1,5 @@
 declare const useLocalStorage: (prefix?: string) => {
-    get: <T>(key: string) => T;
+    get: <T>(key: string) => T | null;
     set: (key: string, value: any) => void;
     remove: (key: string, withPrefix?: boolean) => void;
     has: (key: string) => boolean;

package/components/hooks/useLocalStorage.js

@@ -7,7 +7,7 @@ const useLocalStorage = (prefix) => {
     // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
     const get = useCallback((key) => {
         try {
-            return JSON.parse(localStorage.getItem(_buildKey(key)));
+            return JSON.parse(localStorage.getItem(_buildKey(key)) ?? 'null');
         }
         catch {
             return null;

package/components/hooks/useLocalStorageItem.d.ts

@@ -1,3 +1,13 @@
+export type LocalStorageItemResult<T> = [T, (value: T | undefined) => void, () => void];
+export type NonNullish = object | string | number | bigint | boolean | symbol;
+type WidenStringLiteral<T extends string> = T extends `${infer Underlying}` ? (Underlying extends T ? string : T) : T;
+type WidenNumberLiteral<T extends number> = `${T}` extends `${infer Underlying extends number}` ? Underlying extends T ? number : T : T;
+export type WidenLiteral<T> = T extends string ? WidenStringLiteral<T> : T extends number ? WidenNumberLiteral<T> : T extends boolean ? boolean : T extends bigint ? bigint : T;
+type UseLocalStorageItem = {
+    <T extends string | number | boolean | bigint>(key: string, initialValue: T): LocalStorageItemResult<WidenLiteral<T>>;
+    <T extends NonNullish>(key: string, initialValue: T): LocalStorageItemResult<T>;
+    <T>(key: string, initialValue?: T): LocalStorageItemResult<T | undefined>;
+};
 /**
  * This hooks backs the typical 'useState' hook with local storage.
  *
@@ -14,5 +24,5 @@
  * @param initialValue - local storage initialization value.
  * @returns a stateful value, a function to update it, and a function to remove it.
  */
-declare const useLocalStorageItem: <T>(key: string, initialValue?: T) => [T, (value: T) => void, () => void];
+declare const useLocalStorageItem: UseLocalStorageItem;
 export default useLocalStorageItem;

package/components/hooks/useLocalStorageItem.js

@@ -1,5 +1,6 @@
 import useLocalStorage from '@cccsaurora/howler-ui/components/hooks/useLocalStorage';
 import { useEffect, useMemo, useState } from 'react';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 // Module-level subscriber map for same-page cross-component synchronization.
 // Maps each storage key to the set of React state setters currently subscribed to it.
 const SUBSCRIBERS = new Map();
@@ -24,9 +25,9 @@ const notify = (key, value) => {
  */
 const useLocalStorageItem = (key, initialValue) => {
     const { get, set, has, remove } = useLocalStorage();
-    const [value, setValue] = useState(get(key) ?? initialValue);
+    const [value, setValue] = useState(get(key) ?? initialValue ?? undefined);
     useEffect(() => {
-        if (initialValue !== null && initialValue !== undefined && !has(key)) {
+        if (notNil(initialValue) && !has(key)) {
             set(key, initialValue);
         }
     }, [key, initialValue, has, set]);
@@ -47,9 +48,10 @@ const useLocalStorageItem = (key, initialValue) => {
     // React to cross-tab storage changes via the native 'storage' event.
     useEffect(() => {
         const handler = (event) => {
-            if (event.key !== key)
+            if (event.key !== key) {
                 return;
-            const next = event.newValue !== null ? JSON.parse(event.newValue) : initialValue;
+            }
+            const next = (event.newValue !== null ? JSON.parse(event.newValue) : initialValue) ?? null;
             notify(key, next);
         };
         window.addEventListener('storage', handler);
@@ -59,7 +61,7 @@ const useLocalStorageItem = (key, initialValue) => {
         value,
         (newValue, save = true) => {
             if (save) {
-                if (newValue !== undefined) {
+                if (notNil(newValue)) {
                     set(key, newValue);
                 }
                 else {

package/components/hooks/useLocalStorageItem.test.js

@@ -4,6 +4,29 @@ import { act, renderHook } from '@testing-library/react';
 import { setupLocalStorageMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { vi } from 'vitest';
 import useLocalStorageItem from './useLocalStorageItem';
+var TestLayout;
+(function (TestLayout) {
+    TestLayout["NORMAL"] = "normal";
+    TestLayout["DENSE"] = "dense";
+})(TestLayout || (TestLayout = {}));
+var TestPriority;
+(function (TestPriority) {
+    TestPriority[TestPriority["LOW"] = 1] = "LOW";
+    TestPriority[TestPriority["HIGH"] = 2] = "HIGH";
+})(TestPriority || (TestPriority = {}));
+const TypeCheckedUsage = () => {
+    const [layout, setLayout] = useLocalStorageItem('layout', TestLayout.NORMAL);
+    const [pageCount, setPageCount] = useLocalStorageItem('page-count', 25);
+    const [priority, setPriority] = useLocalStorageItem('priority', TestPriority.LOW);
+    const typedLayout = layout;
+    const typedPageCount = pageCount;
+    const typedPriority = priority;
+    setLayout(TestLayout.DENSE);
+    setPageCount(50);
+    setPriority(TestPriority.HIGH);
+    return [typedLayout, typedPageCount, typedPriority];
+};
+void TypeCheckedUsage;
 const mockLocalStorage = setupLocalStorageMock();
 beforeEach(() => {
     mockLocalStorage.clear();

package/components/hooks/useMyAccessibility.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { AppAccessibilityPreferences } from '@tui/a11y';
+export type MyAccessibilityType = {
+    features: ReactNode[];
+    preferences: AppAccessibilityPreferences;
+};
+export declare const useMyAccessibility: () => MyAccessibilityType;

package/components/hooks/useMyAccessibility.js

@@ -0,0 +1,21 @@
+// Add/remove accessibility buttons from this list to have them in the app
+// Each button should use the AccessibilityButton component provided in order to be properly formatted/added
+const accessibilityFeatures = [];
+// Modify web accessibility preferences to manage the default features
+const accessibilityPreferences = {
+    enableAccessibility: true,
+    enableAnimation: true,
+    enableCursor: true,
+    enableLineHeight: true,
+    enableTextAlignment: true,
+    enableTextSize: true,
+    enableTextSpacing: true,
+    enableTooltipLeaveDelay: true
+};
+// Export the preferences and accessibility features you want shown/active in the application
+export const useMyAccessibility = () => {
+    return {
+        features: accessibilityFeatures,
+        preferences: accessibilityPreferences
+    };
+};

package/components/hooks/useMyApi.d.ts

@@ -5,6 +5,6 @@ export type DispatchApiConfig = {
     onConflict?: () => Promise<void>;
 };
 declare const useMyApi: () => {
-    dispatchApi: <R>(apiCall: Promise<R>, config?: DispatchApiConfig) => Promise<R>;
+    dispatchApi: <R>(apiCall: Promise<R>, config?: DispatchApiConfig) => Promise<R | undefined>;
 };
 export default useMyApi;

package/components/hooks/useMyApi.js

@@ -4,7 +4,7 @@ const DEFAULT_CONFIG = {
     throwError: true,
     logError: false,
     showError: true,
-    onConflict: null
+    onConflict: undefined
 };
 const useMyApi = () => {
     const { showErrorMessage } = useMySnackbar();
@@ -19,8 +19,8 @@ const useMyApi = () => {
         catch (error) {
             if (error instanceof Error) {
                 if (onConflict && [409, 412].includes(error.cause?.api_status_code)) {
-                    onConflict();
-                    return null;
+                    void onConflict();
+                    return;
                 }
                 if (showError) {
                     showErrorMessage(error.message);
@@ -33,7 +33,7 @@ const useMyApi = () => {
                     throw error;
                 }
             }
-            return null;
+            return;
         }
     }, [showErrorMessage]);
     return useMemo(() => ({