@cccsaurora/howler-ui 2.14.0-dev.250 → 2.14.0-dev.255

package/components/routes/hits/search/grid/HitGrid.js

@@ -1,139 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { Add, FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
-import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-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 FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
-import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import HitContextMenu from '../HitContextMenu';
-import HitQuery from '../HitQuery';
-import QuerySettings from '../shared/QuerySettings';
-import ViewLink from '../ViewLink';
-import AddColumnModal from './AddColumnModal';
-import ColumnHeader from './ColumnHeader';
-import HitRow from './HitRow';
-const HitGrid = () => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const { onClick } = useHitSelection();
-    const { getMatchingAnalytic } = useMatchers();
-    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const query = useContextSelector(ParameterContext, ctx => ctx.query);
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
-    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
-    const [analyticIds, setAnalyticIds] = useState({});
-    const columnModalRef = useRef();
-    const [columns, setColumns] = useState([
-        'howler.outline.threat',
-        'howler.outline.target',
-        'howler.outline.indicators',
-        'howler.outline.summary'
-    ]);
-    const [columnWidths, setColumnWidths] = useState({});
-    const [showAddColumn, setShowAddColumn] = useState(false);
-    const resizingCol = useRef();
-    const showSelectBar = useMemo(() => {
-        if (selectedHits.length > 1) {
-            return true;
-        }
-        if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
-            return true;
-        }
-        return false;
-    }, [selected, selectedHits]);
-    useEffect(() => {
-        response?.items.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analyticIds, response]);
-    const onMouseMove = useCallback((event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const [col, element] = resizingCol.current;
-        const rect = element.getBoundingClientRect();
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = rect.width + event.movementX + 'px';
-            el.style.width = rect.width + event.movementX + 'px';
-        });
-    }, []);
-    const onMouseUp = useCallback(() => {
-        const [col, element] = resizingCol.current;
-        setColumnWidths(_widths => ({
-            ..._widths,
-            [col]: element.style.width
-        }));
-        element.style.width = null;
-        element.style.maxWidth = null;
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = null;
-            el.style.width = null;
-        });
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }, [onMouseMove]);
-    const onMouseDown = useCallback((col, event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        resizingCol.current = [col, event.target.parentElement];
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    }, [onMouseMove, onMouseUp]);
-    const onScroll = useCallback((event) => {
-        const target = event.target;
-        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
-            search(query, true);
-        }
-    }, [query, search]);
-    const handleDragEnd = useCallback((event) => {
-        const { active, over } = event;
-        if (active.id !== over.id) {
-            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
-            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
-            setColumns(arrayMove(columns, oldIndex, newIndex));
-        }
-    }, [columns]);
-    const getSelectedId = useCallback((event) => {
-        const target = event.target;
-        const selectedElement = target.closest('[id]');
-        if (!selectedElement) {
-            return;
-        }
-        return selectedElement.id;
-    }, []);
-    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsx(ViewLink, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
-                                    position: 'absolute',
-                                    left: 0,
-                                    right: 0,
-                                    bottom: 0,
-                                    borderBottomLeftRadius: theme.shape.borderRadius,
-                                    borderBottomRightRadius: theme.shape.borderRadius
-                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { '& > *': { flex: 1 } }, children: [_jsx(QuerySettings, {}), response && (_jsx(SearchTotal, { sx: { alignSelf: 'center' }, color: "text.secondary", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { direction: "row", children: [_jsx(FlexOne, {}), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) })] }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns(_columns => [..._columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
-                                                borderRight: 'thin solid',
-                                                borderRightColor: 'divider'
-                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
-};
-export default HitGrid;

package/components/routes/hits/search/grid/HitRow.d.ts

@@ -1,10 +0,0 @@
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-declare const _default: import("react").NamedExoticComponent<{
-    hit: Hit;
-    analyticIds: Record<string, string>;
-    columns: string[];
-    columnWidths: Record<string, string>;
-    collapseMainColumn: boolean;
-    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
-}>;
-export default _default;

package/components/routes/hits/search/grid/HitRow.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { KeyboardArrowUp } from '@mui/icons-material';
-import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
-import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
-import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import { get } from 'lodash-es';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import EnhancedCell from './EnhancedCell';
-const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
-    const theme = useTheme();
-    const { t } = useTranslation();
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const [expandRow, setExpandRow] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: hit.howler.id, onClick: ev => onClick(ev, hit), sx: [
-                    {
-                        transition: theme.transitions.create('background-color'),
-                        '&:hover': {
-                            cursor: 'pointer',
-                            backgroundColor: theme.palette.background.paper
-                        }
-                    },
-                    selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
-                        backgroundColor: lighten(theme.palette.background.paper, 0.15)
-                    },
-                    selected === hit.howler.id && {
-                        backgroundColor: lighten(theme.palette.background.paper, 0.25)
-                    }
-                ], children: [_jsx(TableCell, { sx: {
-                            borderBottom: 'none',
-                            borderRight: 'thin solid',
-                            borderRightColor: 'divider',
-                            '& a': { color: 'text.primary' }
-                        }, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(IconButton, { size: "small", sx: [
-                                        { transform: 'rotate(0)', transition: theme.transitions.create('transform') },
-                                        expandRow && { transform: 'rotate(180deg)' }
-                                    ], onClick: e => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        setExpandRow(_expanded => !_expanded);
-                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler.assignment !== 'unassigned' && _jsx(Assigned, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' }, field: col }, col)))] }, hit.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, hit), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
-};
-export default memo(HitRow);

package/components/routes/hits/search/shared/CustomSpan.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("react").NamedExoticComponent<{}>;
-export default _default;

package/components/routes/hits/search/shared/CustomSpan.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack } from '@mui/material';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import dayjs from 'dayjs';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-const CustomSpan = () => {
-    const { t } = useTranslation();
-    const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? dayjs(ctx.startDate) : null));
-    const setCustomSpan = useContextSelector(ParameterContext, ctx => ctx.setCustomSpan);
-    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : null));
-    useEffect(() => {
-        if (span?.endsWith('custom') && (!startDate || !endDate)) {
-            setCustomSpan(dayjs().subtract(3, 'days').toISOString(), dayjs().toISOString());
-        }
-    }, [endDate, setCustomSpan, span, startDate]);
-    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
-};
-export default memo(CustomSpan);

package/components/routes/hits/search/shared/HitFilter.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("react").NamedExoticComponent<{
-    size?: "small" | "medium";
-}>;
-export default _default;

package/components/routes/hits/search/shared/HitFilter.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Stack, TextField } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-const ACCEPTED_LOOKUPS = [
-    'howler.assessment',
-    'howler.escalation',
-    'howler.analytic',
-    'howler.detection',
-    'event.provider',
-    'organization.name'
-];
-const HitFilter = ({ size }) => {
-    const { t } = useTranslation();
-    const { config } = useContext(ApiConfigContext);
-    const savedFilter = useContextSelector(ParameterContext, ctx => ctx.filter);
-    const setSavedFilter = useContextSelector(ParameterContext, ctx => ctx.setFilter);
-    const [category, setCategory] = useState(ACCEPTED_LOOKUPS[0]);
-    const [filter, setFilter] = useState('');
-    const [customLookups, setCustomLookups] = useState([]);
-    useEffect(() => {
-        if (savedFilter) {
-            const [_category, _filter] = (savedFilter || ':').split(':');
-            if (_category) {
-                setCategory(_category);
-            }
-            if (_filter) {
-                setFilter(_filter);
-            }
-            if (_category && _filter) {
-                setSavedFilter(`${_category}:${_filter}`);
-            }
-        }
-    }, [setSavedFilter, savedFilter]);
-    const onCategoryChange = useCallback(async (_, _category) => {
-        setCategory(_category);
-        setFilter('');
-        setSavedFilter(null);
-        if (!config.lookups[_category]) {
-            const facets = await api.search.facet.hit.post({ query: 'howler.id:*', fields: [_category] });
-            setCustomLookups(Object.keys(facets[_category]));
-        }
-        else {
-            setCustomLookups([]);
-        }
-    }, [config.lookups, setSavedFilter]);
-    const onValueChange = useCallback((_, value) => {
-        setFilter(value);
-        if (value) {
-            const newFilter = `${category}:"${sanitizeLuceneQuery(value)}"`;
-            setSavedFilter(newFilter);
-        }
-        else {
-            setSavedFilter(null);
-        }
-    }, [category, setSavedFilter]);
-    return (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.75 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px' }, size: size ?? 'small', value: category, options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, sx: { minWidth: '150px' }, disabled: !category, size: size ?? 'small', value: filter?.replaceAll('"', '').replaceAll('\\-', '-') || '', options: config.lookups[category] ? config.lookups[category] : customLookups, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValueChange })] }));
-};
-export default memo(HitFilter);

package/components/routes/hits/search/shared/HitSort.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("react").NamedExoticComponent<{
-    size?: "small" | "medium";
-}>;
-export default _default;

package/components/routes/hits/search/shared/HitSort.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, MenuItem, Select, Stack, TextField } from '@mui/material';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import CustomSort from '../CustomSort';
-const CUSTOM = '__custom__';
-const ACCEPTED_SORTS = [
-    'event.created',
-    'howler.assessment',
-    'howler.escalation',
-    'howler.analytic',
-    'howler.detection',
-    'event.provider',
-    'organization.name',
-    CUSTOM
-];
-const HitSort = ({ size = 'small' }) => {
-    const { t } = useTranslation();
-    const location = useLocation();
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
-    const savedSort = useContextSelector(ParameterContext, ctx => ctx.sort);
-    const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
-    const sortEntries = useMemo(() => savedSort.split(',').filter(part => !!part), [savedSort]);
-    /**
-     * The currently selected field when not using custom sorting
-     */
-    const field = useMemo(() => (sortEntries.length === 1 ? sortEntries[0].split(' ')[0] : null), [sortEntries]);
-    /**
-     * The currently selected sorter when not using custom sorting
-     */
-    const sort = useMemo(() => (sortEntries.length === 1 ? sortEntries[0].split(' ')[1] : null), [sortEntries]);
-    /**
-     * Should the custom sorter be shown? Defaults to true if there's more than one sort field, or we're sorting on a field not supported by the default dropdown
-     */
-    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0]?.split(' ')[0])));
-    /**
-     * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
-     */
-    const handleChange = useCallback((value) => {
-        if (value === CUSTOM) {
-            setShowCustomSort(true);
-        }
-        else {
-            setSavedSort(`${value} ${sort}`);
-        }
-    }, [setSavedSort, sort]);
-    useEffect(() => {
-        if (location.search.includes('sort')) {
-            return;
-        }
-        (async () => {
-            const selectedView = await getCurrentView({ lazy: true });
-            if (selectedView?.sort && !location.search.includes('sort')) {
-                setSavedSort(selectedView.sort);
-            }
-        })();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getCurrentView]);
-    return !showCustomSort ? (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.5 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '175px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsxs(Select, { size: size, sx: { minWidth: '150px' }, value: sort, onChange: e => setSavedSort(`${field} ${e.target.value}`), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] })) : (_jsx(CustomSort, {}));
-};
-export default memo(HitSort);

package/components/routes/hits/search/shared/QuerySettings.d.ts

@@ -1,6 +0,0 @@
-import { type SxProps } from '@mui/material';
-declare const _default: import("react").NamedExoticComponent<{
-    verticalSorters?: boolean;
-    boxSx?: SxProps;
-}>;
-export default _default;

package/components/routes/hits/search/shared/QuerySettings.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Stack } from '@mui/material';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import { memo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-import CustomSpan from './CustomSpan';
-import HitFilter from './HitFilter';
-import HitSort from './HitSort';
-import SearchSpan from './SearchSpan';
-const QuerySettings = ({ verticalSorters = false, boxSx }) => {
-    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
-    return (_jsxs(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: [_jsxs(Stack, { direction: verticalSorters ? 'column' : 'row', justifyContent: "space-between", spacing: 1, divider: !verticalSorters && _jsx(Divider, { flexItem: true, orientation: "vertical" }), sx: [
-                    viewId &&
-                        !selectedView && {
-                        opacity: 0.25,
-                        pointerEvents: 'none'
-                    }
-                ], children: [_jsx(HitSort, {}), _jsx(HitFilter, {}), _jsx(SearchSpan, {})] }), _jsx(CustomSpan, {})] }));
-};
-export default memo(QuerySettings);

package/components/routes/hits/search/shared/SearchSpan.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import("react").NamedExoticComponent<{
-    omitCustom?: boolean;
-    size?: "small" | "medium";
-}>;
-export default _default;

package/components/routes/hits/search/shared/SearchSpan.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Autocomplete, TextField } from '@mui/material';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-const DATE_RANGES = [
-    'date.range.1.day',
-    'date.range.3.day',
-    'date.range.1.week',
-    'date.range.1.month',
-    'date.range.all',
-    'date.range.custom'
-];
-const SearchSpan = ({ omitCustom = false, size }) => {
-    const { t } = useTranslation();
-    const location = useLocation();
-    const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
-    useEffect(() => {
-        if (location.search.includes('span')) {
-            return;
-        }
-        (async () => {
-            const viewSpan = (await getCurrentView({ lazy: true }))?.span;
-            if (!viewSpan) {
-                return;
-            }
-            if (viewSpan.includes(':')) {
-                setSpan(convertLuceneToDate(viewSpan));
-            }
-            else {
-                setSpan(viewSpan);
-            }
-        })();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getCurrentView]);
-    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
-};
-export default memo(SearchSpan);

package/components/routes/hits/view/HitViewer.d.ts

@@ -1,7 +0,0 @@
-import type { FC } from 'react';
-export declare enum Orientation {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
-declare const HitViewer: FC;
-export default HitViewer;