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

package/components/routes/help/HitLabelsDocumentation.js

@@ -5,17 +5,17 @@ import { capitalize } from 'lodash-es';
 import { LABEL_TYPES } from '@cccsaurora/howler-ui/utils/constants';
 const HitLabelsDocumentation = () => {
     const { t } = useTranslation();
-    return (_jsxs(Stack, { children: [_jsx("h1", { children: t('help.hit.labels.title') }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.documentation.labels.name') }), _jsx(TableCell, { children: t('page.documentation.labels.description') }), _jsx(TableCell, { children: t('page.documentation.labels.example') })] }) }), _jsx(TableBody, { children: Object.entries(LABEL_TYPES).map(([label, details]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: capitalize(label) }), _jsx(TableCell, { children: t(`hit.label.category.${label}`).replace(/.+ - /, '') }), _jsx(TableCell, { children: _jsx(Chip, { icon: details?.icon ?? undefined, variant: "filled", size: "small", label: label, sx: [
-                                                {
-                                                    mr: 1,
-                                                    mb: 1
-                                                },
-                                                details?.color && {
-                                                    '&, & svg': {
-                                                        color: theme => theme.palette.getContrastText(details.color) + ' !important'
-                                                    },
-                                                    backgroundColor: details.color
-                                                }
-                                            ] }) })] }, label))) })] }) })] }));
+    return (_jsxs(Stack, { children: [_jsx("h1", { children: t('help.hit.labels.title') }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.documentation.labels.name') }), _jsx(TableCell, { children: t('page.documentation.labels.description') }), _jsx(TableCell, { children: t('page.documentation.labels.example') })] }) }), _jsx(TableBody, { children: Object.entries(LABEL_TYPES).map(([label, details]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: capitalize(label) }), _jsx(TableCell, { children: t(`hit.label.category.${label}`).replace(/.+ - /, '') }), _jsx(TableCell, { children: _jsx(Chip, { icon: details?.icon ?? undefined, variant: "filled", size: "small", label: label, sx: {
+                                                mr: 1,
+                                                mb: 1,
+                                                ...(details?.color
+                                                    ? {
+                                                        '&, & svg': {
+                                                            color: theme => theme.palette.getContrastText(details.color) + ' !important'
+                                                        },
+                                                        backgroundColor: details.color
+                                                    }
+                                                    : {})
+                                            } }) })] }, label))) })] }) })] }));
 };
 export default HitLabelsDocumentation;

package/components/routes/help/HitLinksDocumentation.js

@@ -9,9 +9,9 @@ const HitLinksDocumentation = () => {
     const { i18n } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     const md = useMemo(() => {
-        const appList = config.configuration.ui.apps.map(a => `- \`${a.name.toLowerCase()}\``).join('\n');
+        const appList = config.configuration?.ui.apps.map(a => `- \`${a.name.toLowerCase()}\``).join('\n') ?? [];
         return (i18n.language === 'en' ? LINKS_EN : LINKS_FR).replace('$APP_LIST', appList);
-    }, [config.configuration.ui.apps, i18n.language]);
+    }, [config.configuration, i18n.language]);
     return _jsx(Markdown, { md: md });
 };
 export default HitLinksDocumentation;

package/components/routes/help/HitSchemaDocumentation.js

@@ -4,7 +4,7 @@ import { Alert, AlertTitle, Box, Chip, IconButton, InputAdornment, Stack, Table,
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { memo, useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import SCHEMA_EN from './markdown/en/schema.md';
@@ -18,6 +18,9 @@ const RowEntry = memo(({ field }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
+    if (!config.indexes) {
+        return;
+    }
     return (_jsxs(TableRow, { children: [_jsx(TableCell, { width: "350", style: { wordBreak: 'break-word' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Typography, { children: field }), config.indexes.hit[field].list && _jsx(Chip, { color: "warning", size: "small", label: t('list') }), config.indexes.hit[field].deprecated && _jsx(Chip, { color: "error", size: "small", label: t('deprecated') })] }) }), _jsx(TableCell, { width: "75", children: _jsx(Typography, { children: config.indexes.hit[`${field}.key_a`] ? 'dict' : config.indexes.hit[field].type }) }), _jsxs(TableCell, { sx: { maxWidth: '500px' }, children: [_jsx(Markdown, { md: config.indexes.hit[field].description ?? t('help.hit.schema.description.missing') }), config.indexes.hit[field].regex && (_jsx("a", { href: `https://regexr.com/?expression=${encodeURIComponent(config.indexes.hit[field].regex)}`, children: _jsx(Typography, { children: t('help.hit.schema.regex') }) })), config.indexes.hit[field].values?.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsxs(Typography, { children: [t('help.hit.schema.values'), ":"] }), _jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: config.indexes.hit[field].values.map(val => (_jsx("code", { style: {
                                         padding: theme.spacing(0.5),
                                         border: 'thin solid',
@@ -54,6 +57,9 @@ const HitSchemaDocumentation = () => {
         if (!phrase) {
             return true;
         }
+        if (!config.indexes) {
+            return false;
+        }
         const _phrase = phrase.toLowerCase();
         if (field.includes(_phrase)) {
             return true;
@@ -63,16 +69,16 @@ const HitSchemaDocumentation = () => {
             return true;
         }
         return false;
-    }, [config.indexes.hit, phrase]);
-    const howlerFields = useMemo(() => Object.keys(config.indexes.hit)
+    }, [config.indexes, phrase]);
+    const howlerFields = useMemo(() => Object.keys(config.indexes?.hit ?? {})
         .filter(field => field.startsWith('howler') && !field.endsWith('key_a'))
-        .filter(filterSearch), [config.indexes.hit, filterSearch]);
-    const assemblylineFields = useMemo(() => Object.keys(config.indexes.hit)
+        .filter(filterSearch), [config.indexes, filterSearch]);
+    const assemblylineFields = useMemo(() => Object.keys(config.indexes?.hit ?? {})
         .filter(field => field.startsWith('assemblyline') && !field.endsWith('key_a'))
-        .filter(filterSearch), [config.indexes.hit, filterSearch]);
-    const ecsFields = useMemo(() => Object.keys(config.indexes.hit)
+        .filter(filterSearch), [config.indexes, filterSearch]);
+    const ecsFields = useMemo(() => Object.keys(config.indexes?.hit ?? {})
         .filter(field => !field.startsWith('howler') && !field.startsWith('assemblyline') && !field.endsWith('key_a'))
-        .filter(filterSearch), [config.indexes.hit, filterSearch]);
+        .filter(filterSearch), [config.indexes, filterSearch]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(Markdown, { md: md }), _jsx(Box, { sx: { py: 2 } }), _jsx(TextField, { fullWidth: true, value: phrase, onChange: onSearchChange, label: t('help.hit.schema.search.prompt'), InputProps: {
                     endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: !phrase, onClick: onClear, children: _jsx(Clear, {}) }) }))
                 } }), howlerFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.howler') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: howlerFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] })), assemblylineFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.assemblyline') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: assemblylineFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] })), ecsFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.ecs') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: ecsFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] }))] }));

package/components/routes/help/NotebookDocumentation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';

package/components/routes/help/OverviewDocumentation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import HandlebarsMarkdown from '@cccsaurora/howler-ui/components/elements/display/HandlebarsMarkdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import ErrorBoundary from '../ErrorBoundary';

package/components/routes/help/RetentionDocumentation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import { useContext, useEffect, useMemo, useState } from 'react';
@@ -32,10 +32,10 @@ const RetentionDocumentation = () => {
             rows: 1,
             fl: 'howler.id'
         })
-            .then(val => setHitId(val.items[0].howler.id));
+            .then(val => setHitId(val?.items[0]?.howler?.id));
     });
     return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: md, components: {
-                duration: (_jsxs("span", { children: [config.configuration.system.retention.limit_amount, " ", config.configuration.system.retention.limit_unit] })),
+                duration: (_jsxs("span", { children: [config.configuration?.system.retention.limit_amount, " ", config.configuration?.system.retention.limit_unit] })),
                 alert: hitId ? _jsx(HitCard, { layout: HitLayout.DENSE, id: hitId }) : _jsx(Skeleton, { variant: "rounded", height: "250px" })
             } }) }));
 };

package/components/routes/help/SearchDocumentation.js

@@ -1,13 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpandMore } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Card, Chip, emphasize, Stack, styled, Tab, Table, TableBody, TableCell, TableHead, TableRow, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useAppBar, useAppLayout, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter, useAppBar, useAppLayout, useAppUser } from '@tui/core';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import { memo, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import HelpTabs from './components/HelpTabs';
 const TableRoot = styled('div')(({ theme }) => ({
     '& .MuiTable-root': {
@@ -104,8 +103,11 @@ const SearchDocumentation = () => {
     const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
     useScrollRestoration();
     const indexes = useMemo(() => {
-        return config?.indexes || [];
+        return config?.indexes;
     }, [config]);
+    if (!indexes) {
+        return;
+    }
     return (_jsx(PageCenterRoot, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsx(HelpTabs, { value: location.hash || '#overview', children: TOC_CONFIGS.flatMap(value => [
                         _jsx(Tab, { href: `#${value.id}`, label: _jsx(Typography, { variant: "caption", children: t(value.id) }), value: `#${value.id}` }, value.id),
                         ...(!useHorizontal && value.subItems ? value.subItems : []).map(subItem => (!subItem.is_admin || user.is_admin) && (_jsx(Tab, { sx: { '& > span': { pl: 1 } }, href: `#${subItem.id}`, label: _jsx(Typography, { variant: "caption", children: t(subItem.id) }), value: `#${subItem.id}` }, subItem.id)))

package/components/routes/help/TemplateDocumentation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { Card, CardContent, Stack } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
@@ -50,7 +50,7 @@ const TemplateDocumentation = () => {
         });
         return markdown
             .split('\n===SPLIT===\n')
-            .map(section => modifyDocumentation(section, howlerPluginStore, pluginStore));
+            .map((section) => modifyDocumentation(section, howlerPluginStore, pluginStore));
     }, [i18n.language, pluginStore]);
     return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(HitOutline, { hit: alert, template: {
                                 ...TEMPLATE,

package/components/routes/help/ViewDocumentation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { Search } from '@mui/icons-material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';

package/components/routes/help/markdown/en/views.md.js

@@ -1 +1 @@
-export default "# Views\n\nViews are a feature in Howler that allows users to create custom, default queries through which they can organize and triage hits. In this document, we will outline how to create and interact with views.\n\n## Using a View\n\nYou can use views by navigating to the view manager under [Manage > Views](/views). Clicking on any view will open it in the search page. Here, you can also use the `search` icon to open the view in the search page. You can also edit views that belong to you, and mark them as favourites. This will show them in the `t(route.views.saved)` dropdown in the sidebar. In the top right, you can also choose your \"`t(route.views.manager.default)`\", that will be selected by default when opening the alerts page.\n\n## Creating Views\n\nIn order to create a view, you can use the create view page, located [here](/views/create). This page allows you to modifer your view, specify a `t(hit.search.sort.fields)` and `t(hit.search.span)`, and save the view with a particular name. You can mark a view as global or personal, depending on who you want to be able to see and use the view.\n"
+export default "# Views\n\nViews are a feature in Howler that allows users to create custom, default queries through which they can organize and triage hits. In this document, we will outline how to create and interact with views.\n\n## Using a View\n\nYou can use views by navigating to the view manager under [Manage > Views](/views). Clicking on any view will open it in the search page. Here, you can also use the `search` icon to open the view in the search page. You can also edit views that belong to you or that have been shared with you, and mark them as favourites. This will show them in the `t(route.views.saved)` dropdown in the sidebar. In the top right, you can also choose your \"`t(route.views.manager.default)`\", that will be selected by default when opening the alerts page.\n\n## Creating Views\n\nIn order to create a view, you can use the create view page, located [here](/views/create). This page allows you to modifer your view, specify a `t(hit.search.sort.fields)` and `t(hit.search.span)`, and save the view with a particular name. You can mark a view as global or personal, depending on who you want to be able to see and use the view.\n"

package/components/routes/help/markdown/fr/views.md.js

@@ -1 +1 @@
-export default "# Vues\n\nLes vues sont une fonctionnalit\u00e9 de Howler qui permet aux utilisateurs de cr\u00e9er des requ\u00eates personnalis\u00e9es par d\u00e9faut \u00e0 travers lesquelles ils peuvent organiser et trier les hits. Dans ce document, nous d\u00e9crirons comment cr\u00e9er et interagir avec des vues.\n\n## Utilisation d'une vue\n\nVous pouvez utiliser les vues en acc\u00e9dant au gestionnaire de vues sous [Manage > Views](/views). En cliquant sur une vue, vous l'ouvrirez dans la page de recherche. Vous pouvez \u00e9galement utiliser l'ic\u00f4ne `recherche` pour ouvrir la vue dans la page de recherche. Vous pouvez \u00e9galement modifier les vues qui vous appartiennent et les marquer comme favorites. Cela les affichera dans le menu d\u00e9roulant `t(route.views.saved)` dans la barre lat\u00e9rale. En haut \u00e0 droite, vous pouvez \u00e9galement choisir votre `t(route.views.manager.default)`, qui sera s\u00e9lectionn\u00e9 par d\u00e9faut lors de l'ouverture de la page d'alertes.\n\n## Cr\u00e9er des vues\n\nPour cr\u00e9er une vue, vous pouvez utiliser la page de cr\u00e9ation de vue, situ\u00e9e [ici](/views/create). Cette page vous permet de modifier votre vue, de sp\u00e9cifier un `t(hit.search.sort.fields)` et un `t(hit.search.span)`, et de sauvegarder la vue avec un nom particulier. Vous pouvez marquer une vue comme globale ou personnelle, en fonction des personnes que vous souhaitez voir et utiliser.\n"
+export default "# Vues\n\nLes vues sont une fonctionnalit\u00e9 de Howler qui permet aux utilisateurs de cr\u00e9er des requ\u00eates personnalis\u00e9es par d\u00e9faut \u00e0 travers lesquelles ils peuvent organiser et trier les hits. Dans ce document, nous d\u00e9crirons comment cr\u00e9er et interagir avec des vues.\n\n## Utilisation d'une vue\n\nVous pouvez utiliser les vues en acc\u00e9dant au gestionnaire de vues sous [Manage > Views](/views). En cliquant sur une vue, vous l'ouvrirez dans la page de recherche. Vous pouvez \u00e9galement utiliser l'ic\u00f4ne `recherche` pour ouvrir la vue dans la page de recherche. Vous pouvez \u00e9galement modifier les vues qui vous appartiennent ou qui ont \u00e9t\u00e9 partag\u00e9es avec vous, et les marquer comme favorites. Cela les affichera dans le menu d\u00e9roulant `t(route.views.saved)` dans la barre lat\u00e9rale. En haut \u00e0 droite, vous pouvez \u00e9galement choisir votre `t(route.views.manager.default)`, qui sera s\u00e9lectionn\u00e9 par d\u00e9faut lors de l'ouverture de la page d'alertes.\n\n## Cr\u00e9er des vues\n\nPour cr\u00e9er une vue, vous pouvez utiliser la page de cr\u00e9ation de vue, situ\u00e9e [ici](/views/create). Cette page vous permet de modifier votre vue, de sp\u00e9cifier un `t(hit.search.sort.fields)` et un `t(hit.search.span)`, et de sauvegarder la vue avec un nom particulier. Vous pouvez marquer une vue comme globale ou personnelle, en fonction des personnes que vous souhaitez voir et utiliser.\n"

package/components/routes/hits/search/InformationPane.js

@@ -30,7 +30,7 @@ import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList'
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
 import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
@@ -71,7 +71,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     }, [getRecord, selected]);
     useEffect(() => {
         if (selected) {
-            setAnalytic(null);
+            setAnalytic(undefined);
             setDossiers(null);
             setHasOverview(false);
         }
@@ -119,12 +119,12 @@ const InformationPane = ({ onClose, selected: _selected }) => {
             return;
         }
         const defaultContent = {
-            details: () => (_jsx(Box, { pr: 2, children: _jsx(ObjectDetails, { obj: record }) })),
-            comments: () => _jsx(RecordComments, { record: record, users: users }),
-            raw: () => _jsx(JSONViewer, { data: !loading && record, hideSearch: true, filter: filter }),
-            data: () => (_jsx(JSONViewer, { data: !loading && record?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
-            related: () => _jsx(RecordRelated, { record: record }),
-            worklog: () => _jsx(RecordWorklog, { record: !loading && record, users: users })
+            details: () => (_jsx(Box, { pr: 2, children: _jsx(ObjectDetails, { obj: record ?? {} }) })),
+            comments: () => (record ? _jsx(RecordComments, { record: record, users: users }) : _jsx(_Fragment, {})),
+            raw: () => _jsx(JSONViewer, { data: !loading && record ? record : {}, hideSearch: true, filter: filter }),
+            data: () => (_jsx(JSONViewer, { data: !loading ? (record?.howler?.data?.map(entry => tryParse(entry)) ?? []) : [], collapse: false, hideSearch: true, filter: filter })),
+            related: () => (record ? _jsx(RecordRelated, { record: record }) : _jsx(_Fragment, {})),
+            worklog: () => (record && !loading ? _jsx(RecordWorklog, { record: record, users: users }) : _jsx(_Fragment, {}))
         };
         if (!isHit(record)) {
             return defaultContent[tab]?.();

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

@@ -26,6 +26,6 @@ const QuerySettings = ({ boxSx }) => {
         await fetchViews();
         addView('');
     };
-    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, sx: theme => ({ ml: `${theme.spacing(-1)} !important`, mt: `${theme.spacing(-1)} !important` }), children: [_jsx(Grid, { item: true, children: _jsx(IndexPicker, {}) }), _jsx(Grid, { item: true, children: _jsx(HitSort, {}) }), _jsx(Grid, { item: true, children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { item: true, children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { item: true, children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
+    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { children: _jsx(IndexPicker, {}) }), _jsx(Grid, { children: _jsx(HitSort, {}) }), _jsx(Grid, { children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
 };
 export default memo(QuerySettings);

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

@@ -270,7 +270,8 @@ describe('QuerySettings', () => {
             mockParameterContext.filters = ['filter1', 'filter2'];
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
-            const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
+            const gridContainer = container.querySelector('[class*="MuiGrid-container"]');
+            const gridItems = gridContainer?.children ?? [];
             // IndexPicker + HitSort + SearchSpan + 1 view + 2 filters = 5 items
             expect(gridItems.length).toBe(6);
         });
@@ -278,7 +279,8 @@ describe('QuerySettings', () => {
             mockParameterContext.filters = ['filter1'];
             mockParameterContext.views = ['view-1', 'view-2', 'view-3'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
-            const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
+            const gridContainer = container.querySelector('[class*="MuiGrid-container"]');
+            const gridItems = gridContainer?.children ?? [];
             // IndexPicker + HitSort + SearchSpan + 3 views + 1 filter = 6 items
             expect(gridItems.length).toBe(7);
         });
@@ -508,7 +510,8 @@ describe('QuerySettings', () => {
             mockParameterContext.filters = ['filter1'];
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
-            const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
+            const gridContainer = container.querySelector('[class*="MuiGrid-container"]');
+            const gridItems = gridContainer?.children ?? [];
             // Order: IndexPicker, HitSort, SearchSpan, ViewLink(s), HitFilter(s)
             expect(gridItems[0]).toContainElement(screen.getByTestId('index-picker'));
             expect(gridItems[1]).toContainElement(screen.getByTestId('hit-sort'));
@@ -543,7 +546,8 @@ describe('QuerySettings', () => {
             mockParameterContext.views = ['view-1', 'view-2'];
             mockParameterContext.filters = ['filter1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
-            const gridItems = Array.from(container.querySelectorAll('[class*="MuiGrid-item"]'));
+            const gridContainer = container.querySelector('[class*="MuiGrid-container"]');
+            const gridItems = Array.from(gridContainer?.children ?? []);
             const viewLink0Index = gridItems.findIndex(item => item.querySelector('#view-link-0'));
             const viewLink1Index = gridItems.findIndex(item => item.querySelector('#view-link-1'));
             const filterIndex = gridItems.findIndex(item => item.querySelector('#hit-filter-0'));

package/components/routes/hits/search/RecordBrowser.js

@@ -14,7 +14,7 @@ import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary
 import { isNull } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import InformationPane from './InformationPane';
@@ -92,7 +92,7 @@ const HitBrowser = () => {
                                         }, children: _jsx(Close, {}) }) }), _jsx(Tooltip, { title: t('hit.search.select.view'), children: _jsx(IconButton, { size: "small", onClick: () => {
                                             setOffset(0);
                                             setQuery(`howler.id:(${selectedHits.map(hit => hit.howler.id).join(' OR ')})`);
-                                        }, children: _jsx(ManageSearch, {}) }) })] }) })] }), _jsxs(Wrapper, { show: show, showDrawer: showDrawer, onClose: () => setShow(false), children: [_jsx(HitSummary, { response: response }), _jsxs(Card, { variant: "outlined", sx: [
+                                        }, children: _jsx(ManageSearch, {}) }) })] }) })] }), _jsxs(Wrapper, { show: show, showDrawer: showDrawer, onClose: () => setShow(false), children: [_jsx(HitSummary, { response: response ?? undefined }), _jsxs(Card, { variant: "outlined", sx: [
                             {
                                 zIndex: 100,
                                 overflow: 'visible',
@@ -105,13 +105,16 @@ const HitBrowser = () => {
                                 borderBottom: 0,
                                 transition: theme.transitions.create('left')
                             },
-                            selected && {
-                                left: theme.spacing(5)
-                            },
-                            location.pathname.startsWith('/bundles') &&
-                                routeParams.id && {
-                                left: 0
-                            }
+                            selected
+                                ? {
+                                    left: theme.spacing(5)
+                                }
+                                : {},
+                            location.pathname.startsWith('/bundles') && routeParams.id
+                                ? {
+                                    left: 0
+                                }
+                                : {}
                         ], children: [_jsx(InformationPane, { onClose: onClose }), selected && !(location.pathname.startsWith('/bundles') && routeParams.id) && (_jsx(Box, { onClick: onClose, sx: {
                                     cursor: 'pointer',
                                     position: 'absolute',

package/components/routes/hits/search/RecordQuery.js

@@ -8,7 +8,7 @@ import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryE
 import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeMultilineLucene } from '@cccsaurora/howler-ui/utils/stringUtils';
@@ -26,7 +26,7 @@ const RecordQuery = ({ searching = false, disabled = false, compact = false, tri
     const [loaded, setLoaded] = useState(false);
     const [multiline, setMultiline] = useState(false);
     const [y, setY] = useState(0);
-    const wrapper = useRef();
+    const wrapper = useRef(null);
     const search = useCallback(() => triggerSearch(sanitizeMultilineLucene(query)), [query, triggerSearch]);
     const isDirty = useMemo(() => query !== savedQuery, [query, savedQuery]);
     useEffect(() => {
@@ -121,14 +121,17 @@ const RecordQuery = ({ searching = false, disabled = false, compact = false, tri
                 },
                 transition: theme.transitions.create('border-color')
             },
-            isDirty &&
-                new URLSearchParams(location.search).has('query') && {
-                borderColor: 'warning.main'
-            },
-            compact && {
-                p: 0.5,
-                height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
-            }
+            isDirty && new URLSearchParams(location.search).has('query')
+                ? {
+                    borderColor: 'warning.main'
+                }
+                : {},
+            compact
+                ? {
+                    p: 0.5,
+                    height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
+                }
+                : {}
         ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { id: "hit-query", query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? `${DEFAULT_MULTILINE_HEIGHT - 30}px` : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: () => setQuery(DEFAULT_QUERY), sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.clear'), children: _jsx(Clear, { sx: { fontSize: '20px' } }) }) }), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
                     position: 'absolute',
                     left: 0,

package/components/routes/hits/search/SearchPane.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ErrorOutline } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { AppListEmpty, PageCenter } from '@tui/core';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
@@ -92,7 +91,7 @@ const SearchPane = () => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
         if (!selectedElement) {
-            return;
+            return '';
         }
         return selectedElement.id;
     }, []);

package/components/routes/hits/search/ViewLink.js

@@ -8,7 +8,7 @@ import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/View
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 const ViewLink = ({ id, viewId }) => {
     const { t } = useTranslation();
@@ -27,7 +27,7 @@ const ViewLink = ({ id, viewId }) => {
     useEffect(() => {
         setLoading(true);
         void getCurrentViews({ views: [viewId], ignoreParams: true })
-            .then(result => setView(result[0]))
+            .then(result => setView(result[0] ?? null))
             .finally(() => setLoading(false));
     }, [getCurrentViews, viewId]);
     const viewUrl = useMemo(() => {
@@ -46,7 +46,7 @@ const ViewLink = ({ id, viewId }) => {
         }
         return keys.length > 0 ? `/views/create?${keys.join('&')}` : '/views/create';
     }, [query, sort, span, view]);
-    const options = useMemo(() => Object.values(views).filter(_view => !!_view && !currentViews?.includes(_view.view_id)), [currentViews, views]);
+    const options = useMemo(() => Object.values(views).filter((_view) => !!_view && !currentViews?.includes(_view.view_id)), [currentViews, views]);
     if (loading) {
         return _jsx(Chip, { icon: _jsx(CircularProgress, { size: 12 }) });
     }
@@ -61,6 +61,6 @@ const ViewLink = ({ id, viewId }) => {
                 readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) })
-            }[view.type] }), label: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), view.settings?.display === 'grid' && displayType !== 'grid' && (_jsx(Tooltip, { title: t('view.display.grid.inactive_warning'), children: _jsx(Warning, { fontSize: "small", color: "warning" }) }))] }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
+            }[view.type] ?? _jsx("span", {}) }), label: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), view.settings?.display === 'grid' && displayType !== 'grid' && (_jsx(Tooltip, { title: t('view.display.grid.inactive_warning'), children: _jsx(Warning, { fontSize: "small", color: "warning" }) }))] }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
 };
 export default memo(ViewLink);

package/components/routes/hits/search/ViewLink.test.js

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

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

@@ -59,6 +59,6 @@ const RecordGrid = () => {
                                 bottom: 0,
                                 borderBottomLeftRadius: theme.shape.borderRadius,
                                 borderBottomRightRadius: theme.shape.borderRadius
-                            } }))] }) }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) })] }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsx(RecordTable, { query: query, items: response?.items, refreshItems: search, ContextMenu: RecordContextMenu, contextMenuProps: { Component: TableBody, getSelectedId: getSelectedId }, onItemClick: onClick }), (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') })] }) }))] })] }));
+                            } }))] }) }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) })] }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsx(RecordTable, { query: query, items: response?.items, refreshItems: search, ContextMenu: RecordContextMenu, contextMenuProps: { Component: TableBody, getSelectedId }, onItemClick: onClick }), (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 RecordGrid;

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

@@ -7,12 +7,13 @@ import { uniqBy } from 'lodash-es';
 import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 const CustomSort = () => {
     const { t } = useTranslation();
     const [field, setField] = useState('');
     const [sort, setSort] = useState('');
     const { hitFields, getHitFields } = useContext(FieldContext);
-    const sortEntries = useContextSelector(ParameterContext, ctx => ctx.sort?.split(','));
+    const sortEntries = useContextSelector(ParameterContext, ctx => ctx.sort?.split(',') ?? []);
     const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
     const sortFields = useMemo(() => sortEntries.map(entry => entry.split(' ').slice(0, 2)), [sortEntries]);
     useEffect(() => {
@@ -30,7 +31,7 @@ const CustomSort = () => {
         setSavedSort(uniqBy([...sortEntries, `${field} ${sort}`], entry => entry.replace(/ .+/, '')).join(','));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field]);
-    return (_jsxs(Stack, { spacing: 1, maxWidth: "450px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '225px' }, size: "small", value: field, options: hitFields.map(_field => _field.key), getOptionDisabled: option => sortEntries.map(entry => entry.replace(/ .+/, '')).includes(option), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => setField(value), disableClearable: true }), _jsxs(Select, { size: "small", sx: { minWidth: '150px' }, value: sort, onChange: e => setSort(e.target.value), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] }), _jsx(Grid, { container: true, spacing: 1, sx: theme => ({ marginLeft: `${theme.spacing(-1)} !important` }), children: sortFields.map(([key, direction]) => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: key, icon: direction === 'asc' ? _jsx(ArrowUpward, {}) : _jsx(ArrowDownward, {}), deleteIcon: _jsx(Cancel, {}), onClick: () => setSavedSort(sortEntries
+    return (_jsxs(Stack, { spacing: 1, maxWidth: "450px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '225px' }, size: "small", value: field, options: hitFields.map(_field => _field.key).filter(notNil), getOptionDisabled: option => sortEntries.map(entry => entry.replace(/ .+/, '')).includes(option), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => setField(value), disableClearable: true }), _jsxs(Select, { size: "small", sx: { minWidth: '150px' }, value: sort, onChange: e => setSort(e.target.value), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] }), _jsx(Grid, { container: true, spacing: 1, sx: theme => ({ marginLeft: `${theme.spacing(-1)} !important` }), children: sortFields.map(([key, direction]) => (_jsx(Grid, { children: _jsx(Chip, { variant: "outlined", label: key, icon: direction === 'asc' ? _jsx(ArrowUpward, {}) : _jsx(ArrowDownward, {}), deleteIcon: _jsx(Cancel, {}), onClick: () => setSavedSort(sortEntries
                             .map(entry => entry?.replace(`${key} ${direction}`, `${key} ${direction === 'asc' ? 'desc' : 'asc'}`))
                             .join(',')), onDelete: () => setSavedSort(sortEntries.filter(entry => entry && entry.split(' ')[0] != key).join(',')) }) }, key))) })] }));
 };

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

@@ -21,6 +21,14 @@ const CustomSpan = () => {
             setCustomSpan(dayjs.min(_startDate, _endDate).toISOString(), dayjs.max(_startDate, _endDate).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'), maxDateTime: 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, minDateTime: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
+    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'), maxDateTime: endDate ?? undefined, onChange: (newStartDate) => {
+                        if (newStartDate && endDate) {
+                            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 ?? dayjs().subtract(1, 'day'), minDateTime: startDate ?? undefined, onChange: (newEndDate) => {
+                        if (startDate && newEndDate) {
+                            setCustomSpan(startDate.toISOString(), newEndDate.toISOString());
+                        }
+                    }, ampm: false, disableFuture: true })] }) })) : null;
 };
 export default memo(CustomSpan);

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

@@ -45,12 +45,15 @@ const HitFilter = ({ size, id, value }) => {
     const onCategoryChange = useCallback(async (_, _category) => {
         setCategory(_category);
         setFilter(null);
-        if (!config.lookups[_category]) {
+        if (!_category) {
+            return;
+        }
+        if (!config.lookups?.[_category]) {
             setLoading(true);
             const facets = await dispatchApi(api.search.facet.hit.post({ query: 'howler.id:*', fields: [_category], rows: 100 }), {
                 throwError: false
             });
-            setCustomLookups(Object.keys((facets ?? {})[_category]));
+            setCustomLookups(Object.keys((facets ?? {})[_category] ?? {}));
             setLoading(false);
         }
         else {
@@ -67,6 +70,8 @@ const HitFilter = ({ size, id, value }) => {
         }
     }, [category, id, setSavedFilter]);
     const filterValue = filter?.replaceAll('"', '').replaceAll('\\-', '-') || '';
-    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: category && _jsx(Typography, { variant: "body2", children: `${category}:${filterValue || '*'}` }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: value?.endsWith('*') ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(Autocomplete, { fullWidth: true, 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, disabled: !category, loading: loading, 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 })] }) }));
+    const configuredLookup = category && category in (config.lookups ?? {}) ? config.lookups?.[category] : undefined;
+    const lookupOptions = Array.isArray(configuredLookup) ? configuredLookup : customLookups;
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: category && _jsx(Typography, { variant: "body2", children: `${category}:${filterValue || '*'}` }), minWidth: "250px", onDelete: () => removeSavedFilter(value), slotProps: { chip: { size: 'small', color: value?.endsWith('*') ? 'warning' : 'default' } }, children: _jsxs(Stack, { spacing: 1, sx: { minWidth: '225px' }, children: [_jsx(Autocomplete, { fullWidth: true, 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, disabled: !category, loading: loading, size: size ?? 'small', value: filter?.replaceAll('"', '').replaceAll('\\-', '-') || '', options: [...lookupOptions, '*'], renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValueChange })] }) }));
 };
 export default memo(HitFilter);