@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/elements/display/QueryResultText.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const QueryResultText = ({ count, query }) => {
+const QueryResultText = ({ count, query, mb = 0.5 }) => {
     const { t } = useTranslation();
     return (_jsxs(Typography, { sx: theme => ({
             color: theme.palette.text.secondary,
             fontSize: '0.9em',
             fontStyle: 'italic',
-            mb: 0.5,
+            mb,
             '& a': { color: theme.palette.text.secondary }
         }), variant: "body2", children: [t('search.total', { count }), " ", _jsx(Link, { to: `/hits?query=${encodeURIComponent(query)}`, children: t('search.open') })] }));
 };

package/components/elements/display/handlebars/helpers.d.ts

@@ -7,9 +7,13 @@ export interface HowlerHelper {
         fr: string;
     };
     async?: boolean;
+    hint?: string;
     callback?: Handlebars.HelperDelegate;
     componentCallback?: (...args: any[]) => ReactElement | Promise<ReactElement>;
 }
+export declare class HowlerHelperError extends Error {
+    constructor(message: string);
+}
 export declare const useHelpers: (opts?: {
     async: boolean;
     components: boolean;

package/components/elements/display/handlebars/helpers.js

@@ -6,12 +6,18 @@ import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { flatten } from 'flat';
 import Handlebars from 'handlebars';
-import { capitalize, get, groupBy, isObject } from 'lodash-es';
+import { capitalize, get, groupBy, isNil, isObject } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { usePluginStore } from 'react-pluggable';
 import ActionButton from '../ActionButton';
 import JSONViewer from '../json/JSONViewer';
+export class HowlerHelperError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'HowlerHelperError';
+    }
+}
 const FETCH_RESULTS = {};
 export const useHelpers = (opts = { async: true, components: true }) => {
     const pluginStore = usePluginStore();
@@ -22,7 +28,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Checks the equality of the string representation of the two arguments.',
                 fr: "Vérifie l'égalité de la représentation en chaîne de caractères des deux arguments."
             },
-            callback: (arg1, arg2) => arg1?.toString() === arg2.toString()
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [arg1, arg2] = args;
+                if (isNil(arg1) || isNil(arg2)) {
+                    throw new HowlerHelperError('Both arguments must be provided.');
+                }
+                return arg1.toString() === arg2.toString();
+            },
+            hint: 'Usage: {{equals arg1 arg2}}'
         },
         {
             keyword: 'and',
@@ -30,7 +44,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Runs the comparison `arg1 && arg2`, and returns the result.',
                 fr: 'Exécute la comparaison `arg1 && arg2`, et retourne le résultat.'
             },
-            callback: (arg1, arg2) => arg1 && arg2
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [arg1, arg2] = args;
+                return arg1 && arg2;
+            },
+            hint: 'Usage: {{and arg1 arg2}}'
         },
         {
             keyword: 'or',
@@ -38,7 +57,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Runs the comparison `arg1 || arg2`, and returns the result.',
                 fr: 'Exécute la comparaison `arg1 || arg2`, et retourne le résultat.'
             },
-            callback: (arg1, arg2) => arg1 || arg2
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [arg1, arg2] = args;
+                return arg1 || arg2;
+            },
+            hint: 'Usage: {{or arg1 arg2}}'
         },
         {
             keyword: 'not',
@@ -46,7 +70,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Runs the comparison `!arg`, and returns the result.',
                 fr: 'Exécute la comparaison `!arg`, et retourne le résultat.'
             },
-            callback: arg => !arg
+            callback: (...args) => {
+                args.pop(); // remove options
+                const arg = args[0];
+                return !arg;
+            },
+            hint: 'Usage: {{not arg}}'
         },
         {
             keyword: 'curly',
@@ -54,7 +83,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Wraps the given argument in curly braces.',
                 fr: "Entoure l'argument donné d'accolades."
             },
-            callback: arg1 => new Handlebars.SafeString(`{{${arg1}}}`)
+            callback: (...args) => {
+                args.pop(); // remove options
+                const arg1 = args[0];
+                return new Handlebars.SafeString(`{{${arg1}}}`);
+            },
+            hint: 'Usage: {{curly arg}}'
         },
         {
             keyword: 'join',
@@ -62,7 +96,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Joins two string arguments with a given string `sep`, or the empty string as a default.',
                 fr: 'Joint deux arguments de chaîne avec une chaîne donnée `sep`, ou la chaîne vide par défaut.'
             },
-            callback: (arg1, arg2, context) => [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '')
+            callback: (...args) => {
+                const context = args.pop();
+                const [arg1, arg2] = args;
+                return [arg1?.toString() ?? '', arg2?.toString() ?? ''].join(context.hash?.sep ?? '');
+            },
+            hint: 'Usage: {{join arg1 arg2 sep=string}}'
         },
         {
             keyword: 'upper',
@@ -70,7 +109,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Returns the uppercase representation of a string argument.',
                 fr: "Retourne la représentation en majuscules d'un argument de chaîne."
             },
-            callback: (val) => val.toLocaleUpperCase()
+            callback: (...args) => {
+                args.pop(); // remove options
+                const val = args[0];
+                if (isNil(val)) {
+                    throw new HowlerHelperError('Upper expects a string argument');
+                }
+                return val.toString().toLocaleUpperCase();
+            },
+            hint: 'Usage: {{upper val}}'
         },
         {
             keyword: 'lower',
@@ -78,7 +125,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Returns the lowercase representation of a string argument.',
                 fr: "Retourne la représentation en minuscules d'un argument de chaîne."
             },
-            callback: (val) => val.toLocaleLowerCase()
+            callback: (...args) => {
+                args.pop(); // remove options
+                const val = args[0];
+                if (isNil(val)) {
+                    throw new HowlerHelperError('Lower expects a string argument');
+                }
+                return val.toString().toLocaleLowerCase();
+            },
+            hint: 'Usage: {{lower val}}'
         },
         {
             keyword: 'fetch',
@@ -87,7 +142,9 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 fr: "Récupère l'URL fournie et retourne la clé donnée (aplatie) de l'objet JSON retourné. Notez que le résultat doit être du JSON !"
             },
             async: true,
-            callback: async (url, key) => {
+            callback: async (...args) => {
+                args.pop(); // remove options
+                const [url, key] = args;
                 try {
                     if (!FETCH_RESULTS[url]) {
                         FETCH_RESULTS[url] = fetch(url).then(res => res.json());
@@ -95,10 +152,11 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                     const json = await FETCH_RESULTS[url];
                     return flatten(json)[key];
                 }
-                catch (e) {
+                catch {
                     return '';
                 }
-            }
+            },
+            hint: 'Usage: {{fetch url key}}'
         },
         {
             keyword: 'howler',
@@ -106,12 +164,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Given a howler hit ID, this helper renders a hit card for that ID.',
                 fr: 'Étant donné un ID de résultat howler, cet assistant affiche une carte de résultat pour cet ID.'
             },
-            componentCallback: id => {
+            componentCallback: (...args) => {
+                args.pop(); // remove options
+                const id = args[0];
                 if (!id) {
                     return _jsx(AppListEmpty, {});
                 }
                 return _jsx(HitCard, { id: id, layout: HitLayout.NORMAL });
-            }
+            },
+            hint: 'Usage: {{howler hitId}}'
         },
         {
             keyword: 'entries',
@@ -119,12 +180,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Given a dict, return an array of {key, value} objects.',
                 fr: "Étant donné un dictionnaire, retourne un tableau d'objets {key, value}."
             },
-            callback: obj => {
+            callback: (...args) => {
+                args.pop(); // remove options
+                const obj = args[0];
                 if (!isObject(obj)) {
                     return new Handlebars.SafeString('Invalid Object.');
                 }
                 return Object.entries(obj).map(([key, value]) => ({ key, value }));
-            }
+            },
+            hint: 'Usage: {{entries obj}}'
         },
         {
             keyword: 'render_json',
@@ -132,12 +196,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Given JSON data, this helper renders a JSON viewer component.',
                 fr: 'Étant donné des données JSON, cet assistant affiche un composant de visualisation JSON.'
             },
-            componentCallback: data => {
+            componentCallback: (...args) => {
+                args.pop(); // remove options
+                const data = args[0];
                 if (!data) {
                     return _jsx(AppListEmpty, {});
                 }
                 return _jsx(JSONViewer, { data: data });
-            }
+            },
+            hint: 'Usage: {{render_json obj}}'
         },
         {
             keyword: 'to_json',
@@ -145,9 +212,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Convert any object into a JSON string.',
                 fr: "Convertit n'importe quel objet en chaîne JSON."
             },
-            callback: obj => {
+            callback: (...args) => {
+                args.pop(); // remove options
+                const obj = args[0];
                 return new Handlebars.SafeString(JSON.stringify(obj));
-            }
+            },
+            hint: 'Usage: {{to_json obj}}'
         },
         {
             keyword: 'parse_json',
@@ -155,9 +225,20 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Convert a JSON string into an object.',
                 fr: 'Convertit une chaîne JSON en objet.'
             },
-            callback: str => {
-                return JSON.parse(str);
-            }
+            callback: (...args) => {
+                args.pop(); // remove options
+                const str = args[0];
+                if (isNil(str)) {
+                    throw new HowlerHelperError('Parse JSON expects a string argument');
+                }
+                try {
+                    return JSON.parse(str);
+                }
+                catch {
+                    throw new HowlerHelperError('Invalid JSON string');
+                }
+            },
+            hint: 'Usage: {{parse_json str}}'
         },
         {
             keyword: 'get',
@@ -165,14 +246,17 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Returns the given (flattened) key from the provided object.',
                 fr: "Retourne la clé donnée (aplatie) de l'objet fourni."
             },
-            callback: (data, key) => {
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [data, key] = args;
                 try {
                     return get(data, key);
                 }
-                catch (e) {
+                catch {
                     return '';
                 }
-            }
+            },
+            hint: 'Usage: {{get obj key}}'
         },
         {
             keyword: 'includes',
@@ -180,9 +264,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Checks if field is in string',
                 fr: 'Vérifie si le champ est dans la chaîne'
             },
-            callback: (arg1, arg2) => {
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [arg1, arg2] = args;
                 return !!arg2 && !!arg1?.includes(arg2);
-            }
+            },
+            hint: 'Usage: {{includes str substr}}'
         },
         {
             keyword: 'table',
@@ -190,7 +277,9 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Render a table in markdown given an array of cells',
                 fr: "Affiche un tableau en markdown à partir d'un tableau de cellules"
             },
-            componentCallback: (cells) => {
+            componentCallback: (...args) => {
+                args.pop(); // remove options
+                const cells = args[0];
                 const columns = Object.keys(groupBy(cells, 'column'));
                 const rows = groupBy(cells, 'row');
                 return (_jsx(Paper, { sx: { width: '95%', overflowX: 'auto', m: 1 }, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(col => (_jsx(TableCell, { sx: { maxWidth: '150px' }, children: col
@@ -202,7 +291,8 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                                             return _jsx(TableCell, { children: cell?.value ?? 'N/A' }, col + cell?.value);
                                         }) }, rowId));
                                 }) })] }) }));
-            }
+            },
+            hint: 'Usage: {{table cells}}'
         },
         {
             keyword: 'action',
@@ -210,9 +300,12 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: 'Execute a howler action given a specific action ID (from the URL when viewing the action, i.e. yaIKVqiKhWpyCsWdqsE4D)',
                 fr: "Exécute une action howler à partir d'un ID d'action spécifique (de l'URL lors de la visualisation de l'action, par ex. yaIKVqiKhWpyCsWdqsE4D)"
             },
-            componentCallback: (actionId, hitId, context) => {
+            componentCallback: (...args) => {
+                const context = args.pop(); // remove options
+                const [actionId, hitId] = args;
                 return _jsx(ActionButton, { actionId: actionId, hitId: hitId, ...(context.hash ?? {}) });
-            }
+            },
+            hint: 'Usage: {{action actionId hitId}}'
         },
         {
             keyword: 'replace',
@@ -220,9 +313,15 @@ export const useHelpers = (opts = { async: true, components: true }) => {
                 en: '',
                 fr: ''
             },
-            callback: (str, searchValue, replaceValue) => {
-                return str.replaceAll(searchValue ?? '', replaceValue ?? '');
-            }
+            callback: (...args) => {
+                args.pop(); // remove options
+                const [str, searchValue, replaceValue] = args;
+                if (isNil(str) || isNil(searchValue) || isNil(replaceValue)) {
+                    throw new HowlerHelperError('Replace expects three arguments');
+                }
+                return str.toString().replaceAll(searchValue ?? '', replaceValue ?? '');
+            },
+            hint: 'Usage: {{replace str searchValue replaceValue}}'
         },
         ...howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.helpers`))
     ].filter((entry) => (opts.async || !entry.async) && (opts.components || !entry.componentCallback)), [opts.async, opts.components, pluginStore]);

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

@@ -32,10 +32,10 @@ const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     }, []);
     const renderer = useMemo(() => result && (_jsx(ReactJson, { src: result, theme: isDark ? 'summerfruit' : 'summerfruit:inverted', indentWidth: 2, displayDataTypes: !compact, displayObjectSize: !compact, shouldCollapse: collapse ? shouldCollapse : false, quotesOnKeys: false, style: { flex: 1, overflow: 'auto', height: '100%', fontSize: compact ? 'small' : 'smaller' }, enableClipboard: _data => {
             if (typeof _data.src === 'string') {
-                navigator.clipboard.writeText(_data.src);
+                void navigator.clipboard.writeText(_data.src);
             }
             else {
-                navigator.clipboard.writeText(JSON.stringify(_data.src));
+                void navigator.clipboard.writeText(JSON.stringify(_data.src));
             }
         }, ...{
             // Type declaration is wrong - this is a valid prop

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Button, CircularProgress, ListItemText, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
@@ -70,7 +70,7 @@ const RationaleModal = ({ hits, onSubmit }) => {
         return rationales.map(_rationale => ({ rationale: _rationale, type: 'preset' }));
     }, [hits, getMatchingAnalytic]);
     useEffect(() => {
-        (async () => {
+        void (async () => {
             setLoading(true);
             try {
                 const options = await Promise.all([

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

@@ -404,7 +404,7 @@ describe('RationaleModal', () => {
             render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
             const specialText = 'Test <>&"\'{}[]()';
             const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
-            await user.type(input, specialText.replace(/([{\[])/g, '$1$1'));
+            await user.type(input, specialText.replace(/([{[])/g, '$1$1'));
             const submitButton = screen.getByText(i18n.t('submit'));
             await user.click(submitButton);
             expect(mockOnSubmit).toHaveBeenCalledWith(specialText);

package/components/elements/event/EventCard.d.ts

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

package/components/elements/event/EventCard.js

@@ -0,0 +1,22 @@
+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 EventPreview from './EventPreview';
+const EventCard = ({ id, event: _event }) => {
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const event = useContextSelector(RecordContext, ctx => _event ?? ctx.records[id]);
+    useEffect(() => {
+        if (!event) {
+            void getRecord(id);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    if (!event) {
+        return _jsx(Skeleton, { variant: "rounded", height: "200px" });
+    }
+    return (_jsx(HowlerCard, { sx: { position: 'relative' }, children: _jsx(CardContent, { children: _jsx(EventPreview, { event: event }) }) }));
+};
+export default memo(EventCard);

package/components/elements/event/EventPreview.d.ts

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

package/components/elements/event/EventPreview.js

@@ -0,0 +1,12 @@
+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 EventPreview = ({ event }) => {
+    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: event.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: event.event.kind }), event.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: event.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), event.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", event.event.type.join(', ')] })), event.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", event.event.module] }))] }) }));
+};
+export default memo(EventPreview);

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

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

package/components/elements/hit/HitActions.js

@@ -3,9 +3,9 @@ import { MoreHoriz } from '@mui/icons-material';
 import { Box, CircularProgress, Divider, FormControl, FormControlLabel, FormLabel, IconButton, Menu, Radio, RadioGroup, Stack, Switch, useMediaQuery } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import { useMyLocalStorageProvider } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -30,8 +30,8 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
     const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx?.setSelected);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
-    const nextHit = useContextSelector(HitSearchContext, ctx => {
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
+    const nextHit = useContextSelector(RecordSearchContext, ctx => {
         if (!ctx?.response || !selected) {
             return null;
         }
@@ -111,7 +111,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
         }
     }, [keyboardDownHandler]);
     useEffect(() => {
-        getMatchingAnalytic(hit).then(setAnalytic);
+        void getMatchingAnalytic(hit).then(setAnalytic);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
     const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);

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

@@ -3,6 +3,7 @@ import { type FC } from 'react';
 import { HitLayout } from './HitLayout';
 type HitBannerProps = {
     hit: Hit;
+    lazy?: boolean;
     layout?: HitLayout;
     showAssigned?: boolean;
     useListener?: boolean;