@cccsaurora/howler-ui 2.12.0-dev.168

package/components/elements/display/icons/SocketBadge.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloudSync } from '@mui/icons-material';
+import { Badge, IconButton, styled, Tooltip } from '@mui/material';
+import { green, red, yellow } from '@mui/material/colors';
+import { SocketContext, Status } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { useContext } from 'react';
+const StyledBadge = styled(Badge)(({ theme }) => ({
+    '& .MuiBadge-badge': {
+        backgroundColor: green[700],
+        color: green[700],
+        boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+        '&::after': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            animation: 'ripple 1.2s infinite ease-in-out',
+            border: '1px solid currentColor',
+            content: '""',
+            zIndex: 1000
+        }
+    },
+    '@keyframes ripple': {
+        '0%': {
+            transform: 'scale(.8)',
+            opacity: 1
+        },
+        '100%': {
+            transform: 'scale(2.4)',
+            opacity: 0
+        }
+    }
+}));
+const TITLES = {
+    [Status.CONNECTING]: i18n.t('live.connecting'),
+    [Status.OPEN]: i18n.t('live.open'),
+    [Status.CLOSING]: i18n.t('live.closing'),
+    [Status.CLOSED]: i18n.t('live.closed')
+};
+const SocketBadge = ({ size = 'inherit' }) => {
+    const { status, reconnect } = useContext(SocketContext);
+    return (_jsx(Tooltip, { title: TITLES[status], children: _jsx(StyledBadge, { overlap: "circular", variant: "dot", anchorOrigin: { horizontal: 'left', vertical: 'top' }, sx: [
+                (status === Status.CONNECTING || status === Status.CLOSING) && {
+                    '& .MuiBadge-badge': { backgroundColor: yellow[600], color: yellow[600] }
+                },
+                status === Status.CLOSED && {
+                    '& .MuiBadge-badge': {
+                        backgroundColor: red[800],
+                        color: red[800],
+                        '&::after': {
+                            animation: 'none'
+                        }
+                    }
+                }
+            ], children: _jsx(IconButton, { size: "small", onClick: reconnect, sx: [status !== Status.CLOSED && { pointerEvents: 'none' }, { pr: 1 }], children: _jsx(CloudSync, { fontSize: size }) }) }) }));
+};
+export default SocketBadge;

package/components/elements/display/json/JSONViewer.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+declare const JSONViewer: FC<{
+    data: object;
+    collapse?: boolean;
+}>;
+export default JSONViewer;

package/components/elements/display/json/JSONViewer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactJson, {} from '@microlink/react-json-view';
+import { Clear } from '@mui/icons-material';
+import { IconButton, Skeleton, Stack } from '@mui/material';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { removeEmpty, searchObject } from '@cccsaurora/howler-ui/utils/utils';
+const THROTTLER = new Throttler(150);
+const JSONViewer = ({ data, collapse = true }) => {
+    const { t } = useTranslation();
+    const { isDark } = useAppTheme();
+    const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
+    const [flat] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON);
+    const [query, setQuery] = useState('');
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        THROTTLER.debounce(() => {
+            const filteredData = removeEmpty(data, compact);
+            const searchedData = searchObject(filteredData, query, flat);
+            setResult(searchedData);
+        });
+    }, [compact, data, flat, query]);
+    const hasError = useMemo(() => {
+        try {
+            new RegExp(query);
+            return false;
+        }
+        catch (e) {
+            return true;
+        }
+    }, [query]);
+    const shouldCollapse = useCallback((field) => {
+        return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;
+    }, []);
+    const renderer = useMemo(() => result && (_jsx(ReactJson, { src: result, theme: isDark ? 'summerfruit' : 'summerfruit:inverted', indentWidth: 2, displayDataTypes: !compact, displayObjectSize: !compact, shouldCollapse: collapse ? shouldCollapse : false, quotesOnKeys: false, style: { flex: 1, overflow: 'auto', height: '100%', fontSize: compact ? 'small' : 'smaller' }, enableClipboard: _data => {
+            if (typeof _data.src === 'string') {
+                navigator.clipboard.writeText(_data.src);
+            }
+            else {
+                navigator.clipboard.writeText(JSON.stringify(_data.src));
+            }
+        }, ...{
+            // Type declaration is wrong - this is a valid prop
+            displayArrayKey: !compact
+        } })), [collapse, compact, isDark, result, shouldCollapse]);
+    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) }), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
+};
+export default JSONViewer;

package/components/elements/display/markdownPlugins/tabs.d.ts

@@ -0,0 +1,3 @@
+import type * as mdast from 'mdast';
+import type { Plugin } from 'unified';
+export declare const codeTabs: Plugin<[], mdast.Root>;

package/components/elements/display/markdownPlugins/tabs.js

@@ -0,0 +1,70 @@
+import { visit } from 'unist-util-visit';
+//this plugins aims to bring docusaurus tabs functionality to base react-markdown.
+//will expose a code tabs elements which can be later rendered with a custom component
+const findTabs = (index, parent) => {
+    const { children } = parent;
+    const tabs = [];
+    while (index++ < children.length) {
+        const child = children[index];
+        if (child && child.type === 'code') {
+            const metaString = `${child.lang ?? ''} ${child.meta ?? ''}`.trim();
+            if (!metaString)
+                break;
+            const [tabtitle] = metaString.match(/(?<=tab=("|'))(.*?)(?=("|'))/) ?? [''];
+            if (!tabtitle) {
+                // eslint-disable-next-line no-console
+                console.warn('Failed to parse tab title.');
+                break;
+            }
+            tabs.push({ title: tabtitle, lang: child.lang, value: child.value });
+        }
+        else {
+            break;
+        }
+    }
+    return tabs;
+};
+export const codeTabs = () => {
+    return (tree, file) => {
+        visit(tree, 'code', (node, index, parent) => {
+            const metaString = `${node.lang ?? ''} ${node.meta ?? ''}`.trim();
+            if (!metaString) {
+                return;
+            }
+            const [tab] = metaString.match(/(?<=tab=("|'))(.*?)(?=("|'))/) ?? [''];
+            if (!tab && metaString.includes('tab=')) {
+                file.message('Invalid tab title', node, 'remark-code-title');
+                return;
+            }
+            if (!tab) {
+                return;
+            }
+            const tabs = [{ title: tab, lang: node.lang, value: node.value }, ...findTabs(index, parent)];
+            if (tabs.length > 1) {
+                const tabsNode = {
+                    type: 'code',
+                    lang: 'tabs',
+                    value: JSON.stringify(tabs)
+                };
+                parent.children.splice(index, tabs.length, tabsNode);
+                return index + tabs.length - 1;
+            }
+            else {
+                const titleNode = {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            'data-remark-code-title': true,
+                            'data-language': node.lang
+                        }
+                    },
+                    children: [{ type: 'text', value: tab }]
+                };
+                parent.children.splice(index, 0, titleNode);
+                /* Skips this node (title) and the next node (code) */
+                return index + 2;
+            }
+        });
+    };
+};

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const ConfirmDeleteModal: FC<{
+    onConfirm: () => void;
+}>;
+export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmDeleteModal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+const ConfirmDeleteModal = ({ onConfirm }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const handleConfirm = useCallback(() => {
+        onConfirm();
+        close();
+    }, [close, onConfirm]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.confirm.delete.title') }), _jsx(Typography, { children: t('modal.confirm.delete.description') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmNotebookModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const ConfirmNotebookModal: FC<{
+    onConfirm: () => void;
+}>;
+export default ConfirmNotebookModal;

package/components/elements/display/modals/ConfirmNotebookModal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+const ConfirmNotebookModal = ({ onConfirm }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const handleConfirm = useCallback(() => {
+        onConfirm();
+        close();
+    }, [close, onConfirm]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: 'Overwrite existing notebook?' }), _jsx(Typography, { children: t('hit.notebook.confirm.dialog') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ConfirmNotebookModal;

package/components/elements/display/modals/CreateActionModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const CreateActionModal: FC<{
+    onSubmit: (rationale: string) => void;
+}>;
+export default CreateActionModal;

package/components/elements/display/modals/CreateActionModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const CreateActionModal = ({ onSubmit }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const { showInfoMessage } = useMySnackbar();
+    const [actionName, setActionName] = useState('');
+    const handleSubmit = useCallback(() => {
+        if (actionName) {
+            onSubmit(actionName);
+            close();
+        }
+        else {
+            showInfoMessage(t('modal.action.empty'));
+        }
+    }, [actionName, onSubmit, close, showInfoMessage, t]);
+    const handleKeydown = useCallback((e) => {
+        const parsedEvent = parseEvent(e);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            handleSubmit();
+        }
+        else if (parsedEvent.isEscape) {
+            close();
+        }
+    }, [close, handleSubmit]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.action.title') }), _jsx(Typography, { children: t('modal.action.description') }), _jsx(TextField, { label: t('modal.action.label'), value: actionName, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: true, fullWidth: true, onChange: e => setActionName(e.target.value), onKeyDown: handleKeydown }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { disabled: !actionName, variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+};
+export default CreateActionModal;

package/components/elements/display/modals/LoginErrorModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const LoginErrorModal: FC<{
+    error: Error;
+}>;
+export default LoginErrorModal;

package/components/elements/display/modals/LoginErrorModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Error } from '@mui/icons-material';
+import { Button, Divider, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const LoginErrorModal = ({ error }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [_jsx("img", { src: "/images/doggie.png", alt: "" }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Error, { color: "error" }), _jsx(Typography, { variant: "h5", children: t('user.error.modal.header') })] }), _jsx(Divider, { orientation: "horizontal", sx: { mt: 1, mb: 1 } }), _jsx(Typography, { variant: "body1", children: t('user.error.modal.body') }), _jsx(Typography, { variant: "body1", sx: { mt: 1 }, children: t('user.error.modal.details') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: error.toString() }), _jsx(Stack, { direction: "row", justifyContent: "end", sx: { pt: 1 }, children: _jsx(Button, { onClick: () => window.location.reload(), children: t('user.error.modal.reload') }) })] })] }));
+};
+export default LoginErrorModal;

package/components/elements/display/modals/RationaleModal.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const RationaleModal: FC<{
+    onSubmit: (rationale: string) => void;
+}>;
+export default RationaleModal;

package/components/elements/display/modals/RationaleModal.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const RationaleModal = ({ onSubmit }) => {
+    const { t } = useTranslation();
+    const { close } = useContext(ModalContext);
+    const [rationale, setRationale] = useState('');
+    const handleSubmit = useCallback(() => {
+        onSubmit(rationale);
+        close();
+    }, [onSubmit, rationale, close]);
+    const handleKeydown = useCallback(e => {
+        const parsedEvent = parseEvent(e);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            handleSubmit();
+        }
+        else if (parsedEvent.isEscape) {
+            close();
+        }
+    }, [close, handleSubmit]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rationale.title') }), _jsx(Typography, { children: t('modal.rationale.description') }), _jsx(TextField, { label: t('modal.rationale.label'), value: rationale, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: true, fullWidth: true, multiline: true, maxRows: 6, onChange: e => setRationale(e.target.value), onKeyDown: handleKeydown }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+};
+export default RationaleModal;

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

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    hit: Hit;
+    orientation?: "horizontal" | "vertical";
+}>;
+export default _default;

package/components/elements/hit/HitActions.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHoriz } from '@mui/icons-material';
+import { Box, CircularProgress, Divider, FormControl, FormControlLabel, FormLabel, IconButton, Menu, Radio, RadioGroup, Stack, Switch, useMediaQuery } from '@mui/material';
+import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import { useMyLocalStorageProvider } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import json2mq from 'json2mq';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { isMobile } from 'react-device-detect';
+import { Trans } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useContextSelector } from 'use-context-selector';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { HitShortcuts } from './HitShortcuts';
+import ButtonActions from './actions/ButtonActions';
+import DropdownActions from './actions/DropdownActions';
+import { ASSESSMENT_KEYBINDS, TOP_ROW, VOTE_OPTIONS } from './actions/SharedComponents';
+const THROTTLER = new Throttler(250);
+const HitActions = ({ hit, orientation = 'horizontal' }) => {
+    const { config } = useContext(ApiConfigContext);
+    const { values, set } = useMyLocalStorageProvider();
+    const pluginStore = usePluginStore();
+    const { getAnalyticFromName } = useContext(AnalyticContext);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
+    const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const nextHit = useContextSelector(HitSearchContext, ctx => {
+        if (!ctx?.response || !selected) {
+            return null;
+        }
+        return ctx.response.items[(ctx.response.items.findIndex(_hit => _hit.howler.id === selected) ?? -1) + 1] ?? null;
+    });
+    const { availableTransitions, canVote, canAssess, loading, assess, vote, selectedVote } = useHitActions([hit]);
+    const [openSetting, setOpenSetting] = useState(null);
+    const [analytic, setAnalytic] = useState(null);
+    const shortcuts = useMemo(() => isMobile
+        ? HitShortcuts.NO_SHORTCUTS
+        : (values[StorageKey.HIT_SHORTCUTS] ?? HitShortcuts.SHORTCUTS_HINT), [values]);
+    const forceDropdown = useMemo(() => values[StorageKey.FORCE_DROPDOWN] ?? false, [values]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, [hit]));
+    const actions = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map((assessment, index) => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        if (!loading) {
+                            await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                            if (getCurrentView()?.settings?.advance_on_triage && nextHit) {
+                                clearSelectedHits(nextHit.howler.id);
+                                setSelected?.(nextHit.howler.id);
+                            }
+                        }
+                    },
+                    key: ASSESSMENT_KEYBINDS[index]
+                }))
+            ];
+        }
+        return _actions;
+    }, [
+        analytic,
+        assess,
+        availableTransitions,
+        canAssess,
+        canVote,
+        clearSelectedHits,
+        config.lookups,
+        getCurrentView,
+        loading,
+        nextHit,
+        setSelected,
+        vote,
+        pluginActions
+    ]);
+    const keyboardDownHandler = useCallback((event) => {
+        THROTTLER.debounce(() => {
+            const currentElement = document.activeElement.tagName;
+            if (shortcuts !== HitShortcuts.NO_SHORTCUTS &&
+                event.key.toUpperCase() in actions &&
+                !event.ctrlKey &&
+                currentElement !== 'INPUT') {
+                actions[event.key.toUpperCase()]();
+            }
+        });
+    }, [actions, shortcuts]);
+    useEffect(() => {
+        if (!isMobile) {
+            window.addEventListener('keydown', keyboardDownHandler);
+            return () => window.removeEventListener('keydown', keyboardDownHandler);
+        }
+    }, [keyboardDownHandler]);
+    useEffect(() => {
+        (async () => {
+            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit.howler.analytic]);
+    const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);
+    const handleCloseSetting = useCallback(() => setOpenSetting(null), []);
+    const onShortcutChange = useCallback((__, s) => set(StorageKey.HIT_SHORTCUTS, s), [set]);
+    const onDropdownChange = useCallback((__, checked) => set(StorageKey.FORCE_DROPDOWN, checked), [set]);
+    const showButton = useMediaQuery(
+    // Only show the buttons when there's sufficient space
+    // TODO: Could probably make this fancier and maybe remove the react device detect dependency, but this is fine for now
+    json2mq([
+        {
+            minWidth: 1800
+        }
+    ]));
+    const showDropdown = isMobile || !showButton;
+    return (_jsxs(Stack, { direction: "row", alignItems: "stretch", children: [showDropdown || forceDropdown ? (_jsx(DropdownActions, { currentAssessment: hit?.howler.assessment, currentStatus: hit?.howler.status, currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation })) : (_jsx(ButtonActions, { currentVote: selectedVote, actions: actions, loading: loading, orientation: orientation, shortcuts: shortcuts })), (!showDropdown || !isMobile) && (_jsxs(Box, { sx: [
+                    {
+                        flex: 1,
+                        alignSelf: 'start',
+                        display: 'flex',
+                        justifyContent: 'end',
+                        alignItems: 'center',
+                        p: 1
+                    },
+                    (showDropdown || forceDropdown) && { flexDirection: 'column-reverse', justifyContent: 'center' },
+                    !showDropdown &&
+                        !forceDropdown && {
+                        position: 'absolute',
+                        top: 0,
+                        right: 0
+                    }
+                ], children: [_jsx(CircularProgress, { size: 24, sx: theme => ({
+                            // Sneaky trick: +true === 1, +false === 0. Love you, javascript <3
+                            opacity: +loading,
+                            transition: `${theme.transitions.duration.standard}ms`
+                        }) }), !showDropdown && (_jsx(IconButton, { size: "small", onClick: handleOpenSetting, children: _jsx(MoreHoriz, {}) })), _jsx(Menu, { anchorEl: openSetting, open: !!openSetting, onClose: handleCloseSetting, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+                            paper: {
+                                sx: {
+                                    '& ul': {
+                                        p: 2,
+                                        display: 'flex',
+                                        flexDirection: 'column'
+                                    }
+                                }
+                            }
+                        }, children: _jsxs(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Trans, { i18nKey: "hit.details.shortcuts" }) }), _jsxs(RadioGroup, { value: shortcuts, name: "radio-buttons-group", onChange: onShortcutChange, children: [_jsx(FormControlLabel, { value: HitShortcuts.SHORTCUTS_HINT, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts_hints" }) }), _jsx(FormControlLabel, { value: HitShortcuts.SHORTCUTS, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts" }) }), _jsx(FormControlLabel, { value: HitShortcuts.NO_SHORTCUTS, control: _jsx(Radio, {}), label: _jsx(Trans, { i18nKey: "hit.search.keyboard.no_shortcuts" }) })] })] }), _jsxs(FormControl, { sx: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(FormLabel, { sx: { mr: 1 }, children: _jsx(Trans, { i18nKey: "hit.details.forceDropdown" }) }), _jsx(Switch, { checked: forceDropdown, onChange: onDropdownChange })] })] }) })] }))] }));
+};
+export default memo(HitActions);

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

@@ -0,0 +1,15 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+import { HitLayout } from './HitLayout';
+type HitBannerProps = {
+    hit: Hit;
+    layout?: HitLayout;
+    showAssigned?: boolean;
+    useListener?: boolean;
+};
+export interface StatusProps<T extends Hit = Hit> {
+    hit: T;
+    layout: HitLayout;
+}
+declare const HitBanner: FC<HitBannerProps>;
+export default HitBanner;