@cccsaurora/howler-ui 2.18.0-dev.716 → 2.18.0-dev.723

package/components/elements/ContextMenu.test.js

@@ -1,215 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { omit } from 'lodash-es';
-import { act } from 'react';
-import { vi } from 'vitest';
-// Mock react-router-dom Link
-vi.mock('react-router-dom', () => ({
-    Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
-}));
-// Stub MUI components to simple HTML equivalents
-vi.mock('@mui/material', async () => {
-    const actual = await vi.importActual('@mui/material');
-    return {
-        ...actual,
-        useTheme: () => ({ shape: { borderRadius: 4 } }),
-        Menu: ({ children, open, onClose, ...props }) => open ? (_jsx("div", { role: "menu", onClick: onClose, ...omit(props, ['sx', 'slotProps', 'MenuListProps', 'anchorOrigin', 'anchorEl']), children: children })) : null,
-        MenuItem: ({ children, onClick, disabled, component, to, id, onMouseEnter, onMouseLeave, ...props }) => {
-            const Component = component || 'div';
-            return (_jsx(Component, { role: "menuitem", onClick: onClick, "aria-disabled": disabled, href: to, id: id, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...omit(props, ['sx']), children: children }));
-        },
-        Fade: ({ children, in: inProp }) => (inProp ? _jsx(_Fragment, { children: children }) : null),
-        ListItemIcon: ({ children }) => _jsx("div", { children: children }),
-        ListItemText: ({ children }) => _jsx("div", { children: children }),
-        Divider: () => _jsx("hr", {}),
-        Paper: ({ children, id, ...props }) => (_jsx("div", { id: id, ...omit(props, ['sx', 'elevation']), children: children })),
-        MenuList: ({ children, ...props }) => (_jsx("div", { role: "group", ...omit(props, ['sx', 'dense']), children: children })),
-        Box: ({ children, id, onContextMenu, ...props }) => (_jsx("div", { id: id, onContextMenu: onContextMenu, ...omit(props, ['sx']), children: children }))
-    };
-});
-import ContextMenu, {} from './ContextMenu';
-const renderMenu = (items, opts = {}) => {
-    const { autoOpen = true, onOpen = vi.fn(), onClose = vi.fn() } = opts;
-    const utils = render(_jsx(ContextMenu, { items: items, onOpen: onOpen, onClose: onClose, id: "test-menu", children: _jsx("div", { id: "trigger", children: "trigger" }) }));
-    const openMenu = () => act(() => {
-        fireEvent.contextMenu(screen.getByTestId('trigger'));
-    });
-    if (autoOpen) {
-        openMenu();
-    }
-    return { ...utils, onOpen, onClose, openMenu };
-};
-describe('ContextMenu', () => {
-    describe('Visibility', () => {
-        it('renders nothing before right-click', () => {
-            const { container } = renderMenu([], { autoOpen: false });
-            expect(container.querySelector('[role="menu"]')).toBeNull();
-        });
-        it('renders the menu after right-click', () => {
-            renderMenu([]);
-            expect(screen.getByRole('menu')).toBeInTheDocument();
-        });
-        it('calls onClose when the menu is clicked', () => {
-            const { onClose } = renderMenu([]);
-            fireEvent.click(screen.getByRole('menu'));
-            expect(onClose).toHaveBeenCalledTimes(1);
-        });
-        it('closes on a second right-click (toggle)', () => {
-            const { openMenu } = renderMenu([]);
-            expect(screen.getByRole('menu')).toBeInTheDocument();
-            openMenu();
-            expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-        });
-        it('calls onOpen when right-clicked', () => {
-            const onOpen = vi.fn();
-            renderMenu([], { onOpen });
-            expect(onOpen).toHaveBeenCalledTimes(1);
-        });
-        it('calls onClose when closed via toggle right-click', () => {
-            const onClose = vi.fn();
-            const { openMenu } = renderMenu([], { onClose });
-            openMenu();
-            expect(onClose).toHaveBeenCalledTimes(1);
-        });
-    });
-    describe('Leaf items', () => {
-        it('renders a plain button item', () => {
-            const onClick = vi.fn();
-            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
-            const item = screen.getByRole('menuitem');
-            expect(item).toHaveTextContent('Do something');
-        });
-        it('calls onClick when a plain item is clicked', () => {
-            const onClick = vi.fn();
-            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
-            fireEvent.click(screen.getByRole('menuitem'));
-            expect(onClick).toHaveBeenCalledTimes(1);
-        });
-        it('renders a link item with correct href', () => {
-            renderMenu([{ kind: 'item', id: 'link-1', label: 'Go somewhere', to: '/some/path' }]);
-            const link = screen.getByRole('menuitem');
-            expect(link).toHaveAttribute('href', '/some/path');
-        });
-        it('marks a disabled item with aria-disabled', () => {
-            renderMenu([{ kind: 'item', id: 'action-1', label: 'Disabled', disabled: true }]);
-            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
-        });
-        it('renders an icon alongside the label when provided', () => {
-            renderMenu([{ kind: 'item', id: 'icon-item', label: 'With icon', icon: _jsx("span", { id: "test-icon" }) }]);
-            expect(screen.getByTestId('test-icon')).toBeInTheDocument();
-            expect(screen.getByRole('menuitem')).toHaveTextContent('With icon');
-        });
-    });
-    describe('Dividers', () => {
-        it('renders a divider between items', () => {
-            renderMenu([
-                { kind: 'item', id: 'item-a', label: 'A' },
-                { kind: 'divider', id: 'sep' },
-                { kind: 'item', id: 'item-b', label: 'B' }
-            ]);
-            expect(screen.getByRole('separator')).toBeInTheDocument();
-            expect(screen.getAllByRole('menuitem')).toHaveLength(2);
-        });
-    });
-    describe('Submenu items', () => {
-        const subItems = [
-            { key: 'sub-a', label: 'Sub A', onClick: vi.fn() },
-            { key: 'sub-b', label: 'Sub B', onClick: vi.fn() }
-        ];
-        const submenuEntry = {
-            kind: 'submenu',
-            id: 'my-submenu',
-            label: 'Parent',
-            items: subItems
-        };
-        it('renders the parent submenu item', () => {
-            renderMenu([submenuEntry]);
-            expect(screen.getByText('Parent')).toBeInTheDocument();
-        });
-        it('does not show submenu content before hovering', () => {
-            renderMenu([submenuEntry]);
-            expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
-        });
-        it('shows submenu content on mouse enter', async () => {
-            renderMenu([submenuEntry]);
-            const parent = screen.getByRole('menuitem');
-            act(() => {
-                fireEvent.mouseEnter(parent);
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Sub A')).toBeInTheDocument();
-                expect(screen.getByText('Sub B')).toBeInTheDocument();
-            });
-        });
-        it('hides submenu after mouse leave', async () => {
-            renderMenu([submenuEntry]);
-            const parent = screen.getByRole('menuitem');
-            act(() => {
-                fireEvent.mouseEnter(parent);
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Sub A')).toBeInTheDocument();
-            });
-            act(() => {
-                fireEvent.mouseLeave(parent);
-            });
-            await waitFor(() => {
-                expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
-            });
-        });
-        it('calls the sub-item onClick when a sub-item is clicked', async () => {
-            const onClick = vi.fn();
-            renderMenu([
-                {
-                    kind: 'submenu',
-                    id: 'actions',
-                    label: 'Actions',
-                    items: [{ key: 'do-it', label: 'Do it', onClick }]
-                }
-            ]);
-            const parent = screen.getByRole('menuitem');
-            act(() => {
-                fireEvent.mouseEnter(parent);
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Do it')).toBeInTheDocument();
-            });
-            fireEvent.click(screen.getByText('Do it'));
-            expect(onClick).toHaveBeenCalledTimes(1);
-        });
-        it('marks a disabled submenu parent with aria-disabled', () => {
-            renderMenu([{ ...submenuEntry, disabled: true }]);
-            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
-        });
-        it('does not show expand arrow when submenu is disabled', () => {
-            renderMenu([{ ...submenuEntry, disabled: true }]);
-            // The KeyboardArrowRight icon only renders when !disabled
-            expect(screen.queryByTestId('KeyboardArrowRightIcon')).not.toBeInTheDocument();
-        });
-        it('assigns correct DOM ids to submenu parent and panel', async () => {
-            renderMenu([submenuEntry]);
-            expect(document.getElementById('my-submenu-menu-item')).not.toBeNull();
-            const parent = screen.getByRole('menuitem');
-            act(() => {
-                fireEvent.mouseEnter(parent);
-            });
-            await waitFor(() => {
-                expect(document.getElementById('my-submenu-submenu')).not.toBeNull();
-            });
-        });
-    });
-    describe('Mixed item list', () => {
-        it('renders items in order', () => {
-            renderMenu([
-                { kind: 'item', id: 'first', label: 'First' },
-                { kind: 'divider', id: 'div-1' },
-                { kind: 'submenu', id: 'third', label: 'Third', items: [] },
-                { kind: 'item', id: 'fourth', label: 'Fourth' }
-            ]);
-            const items = screen.getAllByRole('menuitem');
-            expect(items[0]).toHaveTextContent('First');
-            expect(items[1]).toHaveTextContent('Third');
-            expect(items[2]).toHaveTextContent('Fourth');
-        });
-    });
-});

package/components/elements/ObjectDetails.d.ts

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

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

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

package/components/elements/case/CaseCard.js

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

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

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

package/components/elements/case/CasePreview.js

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

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

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

package/components/elements/case/StatusIcon.js

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

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

@@ -1,8 +0,0 @@
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import { type FC } from 'react';
-declare const AnalyticLink: FC<{
-    hit: Hit;
-    compressed?: boolean;
-    alignSelf?: string;
-}>;
-export default AnalyticLink;

package/components/elements/hit/elements/AnalyticLink.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-const AnalyticLink = ({ hit, compressed, alignSelf = 'start' }) => {
-    const { getMatchingAnalytic } = useMatchers();
-    const [analyticId, setAnalyticId] = useState();
-    useEffect(() => {
-        if (!hit?.howler.analytic) {
-            return;
-        }
-        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit?.howler.analytic]);
-    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
-                    e.stopPropagation();
-                }, onClick: e => {
-                    e.stopPropagation();
-                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
-};
-export default AnalyticLink;

package/components/elements/hit/related/RelatedRecords.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link as LinkIcon } from '@mui/icons-material';
-import { alpha, Box, Chip, Divider, Stack, useTheme } from '@mui/material';
-import CasePreview from '@cccsaurora/howler-ui/components/elements/case/CasePreview';
-import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
-import ObservablePreview from '@cccsaurora/howler-ui/components/elements/observable/ObservablePreview';
-import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelatedRecords';
-import { identity, uniq } from 'lodash-es';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { isCase, isHit, isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
-import HitPreview from '../HitPreview';
-const RecordLink = ({ to, ariaLabel, children }) => {
-    const theme = useTheme();
-    return (_jsxs(Box, { p: 1, flex: 1, position: "relative", sx: {
-            '& > a': {
-                backgroundColor: 'transparent',
-                transition: theme.transitions.create('background-color', {
-                    duration: theme.transitions.duration.shortest
-                }),
-                '&:hover': {
-                    backgroundColor: alpha('#555', 0.5)
-                }
-            }
-        }, children: [_jsx(Link, { to: to, style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel }), children] }));
-};
-const RelatedRecords = ({ hit }) => {
-    const { t } = useTranslation();
-    const [open, setOpen] = useState(false);
-    const [filter, setFilter] = useState(null);
-    const related = useMemo(() => hit?.howler.related ?? [], [hit?.howler.related]);
-    const records = useRelatedRecords(related, open);
-    return (_jsxs(ChipPopper
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    , { 
-        // eslint-disable-next-line jsx-a11y/anchor-is-valid
-        icon: _jsx(LinkIcon, {}), label: _jsx("span", { style: { cursor: 'pointer' }, children: t('hit.header.related', { count: related.length }) }), slotProps: {
-            chip: { disabled: related.length < 1 },
-            paper: {
-                elevation: 4,
-                onAuxClick: ev => ev.stopPropagation()
-            }
-        }, disablePortal: false, placement: "bottom-end", onToggle: _open => setOpen(_open), children: [_jsx(Stack, { direction: "row", spacing: 1, mb: 1, justifyContent: "end", children: uniq(records.map(record => record.__index))
-                    .filter(identity)
-                    .map(_type => (_jsx(Chip, { color: _type === filter ? 'primary' : 'default', label: _type, onClick: () => setFilter(current => (current === _type ? null : _type)) }, _type))) }), _jsxs(Stack, { maxWidth: "40vw", maxHeight: "70vh", sx: { overflowY: 'auto' }, children: [_jsx(Divider, {}), records
-                        .filter(record => !filter || record.__index === filter)
-                        .map(entry => {
-                        if (isHit(entry)) {
-                            const key = entry.howler.id;
-                            return (_jsx(RecordLink, { to: `/hits/${key}`, ariaLabel: t('hit.header.view.hit', { id: key }), children: _jsx(HitPreview, { hit: entry }) }, key));
-                        }
-                        else if (isCase(entry)) {
-                            const key = entry.case_id;
-                            return (_jsx(RecordLink, { to: `/cases/${key}`, ariaLabel: t('hit.header.view.case', { id: key }), children: _jsx(CasePreview, { case: entry }) }, key));
-                        }
-                        else if (isObservable(entry)) {
-                            const key = entry.howler.id;
-                            return (_jsx(RecordLink, { to: `/observables/${key}`, ariaLabel: t('hit.header.view.observable', { id: key }), children: _jsx(ObservablePreview, { observable: entry }) }, key));
-                        }
-                    })] })] }));
-};
-export default memo(RelatedRecords);

package/components/elements/observable/ObservableCard.d.ts

@@ -1,6 +0,0 @@
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
-declare const _default: import("react").NamedExoticComponent<{
-    id?: string;
-    observable?: Observable;
-}>;
-export default _default;

package/components/elements/observable/ObservableCard.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CardContent, Skeleton } from '@mui/material';
-import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
-import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import { memo, useEffect } from 'react';
-import { useContextSelector } from 'use-context-selector';
-import ObservablePreview from './ObservablePreview';
-const ObservableCard = ({ id, observable: _observable }) => {
-    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
-    const observable = useContextSelector(RecordContext, ctx => _observable ?? ctx.records[id]);
-    useEffect(() => {
-        if (!observable) {
-            getRecord(id);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
-    if (!observable) {
-        return _jsx(Skeleton, { variant: "rounded", height: "200px" });
-    }
-    return (_jsx(HowlerCard, { sx: { position: 'relative' }, children: _jsx(CardContent, { children: _jsx(ObservablePreview, { observable: observable }) }) }));
-};
-export default memo(ObservableCard);

package/components/elements/observable/ObservablePreview.d.ts

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

package/components/elements/observable/ObservablePreview.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OpenInNew } from '@mui/icons-material';
-import { Chip, IconButton, Stack, Typography, useTheme } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-const ObservablePreview = ({ observable }) => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    return (_jsx(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: observable.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: observable.event.kind }), observable.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: observable.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), observable.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", observable.event.type.join(', ')] })), observable.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", observable.event.module] }))] }) }));
-};
-export default memo(ObservablePreview);