@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/hits/search/HitBrowser.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, Close, ManageSearch } from '@mui/icons-material';
+import { Box, Card, Checkbox, Collapse, Drawer, Fab, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { HitContext } from 'components/app/providers/HitProvider';
+import HitSearchProvider, { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import ParameterProvider, { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import FlexPort from 'components/elements/addons/layout/FlexPort';
+import HitSummary from 'components/elements/hit/HitSummary';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import ErrorBoundary from 'components/routes/ErrorBoundary';
+import { isNull } from 'lodash-es';
+import moment from 'moment';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import InformationPane from './InformationPane';
+import SearchPane from './SearchPane';
+import HitGrid from './grid/HitGrid';
+// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
+const Wrapper = memo(({ show, showDrawer, children, onClose }) => {
+    return (_jsx(ErrorBoundary, { children: showDrawer ? (_jsx(Drawer, { onClose: onClose, open: show, anchor: "right", PaperProps: { sx: { backgroundImage: 'none', overflow: 'hidden', width: '75vw' } }, children: children })) : (_jsx(FlexPort, { disableOverflow: true, children: children })) }));
+});
+const HitBrowser = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
+    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+    const forceDrawer = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false)[0];
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
+    const setQueryHistory = useContextSelector(HitSearchContext, ctx => ctx?.setQueryHistory);
+    const setQueryList = useMyLocalStorageItem(StorageKey.QUERY_HISTORY, '')[1];
+    const location = useLocation();
+    const routeParams = useParams();
+    const [searchParams] = useSearchParams();
+    const [show, setShow] = useState(!!selected);
+    useEffect(() => setShow(!!selected), [selected]);
+    const showDrawer = useMediaQuery(theme.breakpoints.down(1600)) || forceDrawer || displayType === 'grid';
+    // State that makes up the request
+    const summaryQuery = useMemo(() => {
+        const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
+        let _fullQuery = query;
+        if (bundle) {
+            _fullQuery = `(howler.bundles:${bundle}) AND (${_fullQuery})`;
+        }
+        else if (viewId) {
+            _fullQuery = `(${views.find(_view => _view.view_id === viewId)?.query || 'howler.id:*'}) AND (${_fullQuery})`;
+        }
+        return _fullQuery;
+    }, [location.pathname, query, routeParams.id, views, viewId]);
+    const showSelectBar = useMemo(() => {
+        if (selectedHits.length > 1) {
+            return true;
+        }
+        if (selectedHits.length === 1 && selectedHits[0]?.howler.id !== routeParams.id) {
+            return true;
+        }
+        return false;
+    }, [routeParams.id, selectedHits]);
+    useEffect(() => {
+        const newQuery = searchParams.get('query');
+        if (newQuery) {
+            setQueryHistory(_queryHistory => ({
+                ..._queryHistory,
+                [newQuery]: new Date().toISOString()
+            }));
+        }
+    }, [searchParams, setQueryHistory]);
+    useEffect(() => {
+        setQueryList(JSON.stringify(queryHistory));
+    }, [queryHistory, setQueryList]);
+    useEffect(() => {
+        // On load check to filter out any queries older than one month
+        setQueryHistory(_queryHistory => {
+            const filterQueryTime = moment().subtract(1, 'month').toISOString();
+            return Object.fromEntries(Object.entries(_queryHistory).filter(([_, value]) => value > filterQueryTime));
+        });
+    }, [setQueryHistory]);
+    useEffect(() => {
+        if (location.pathname.startsWith('/views') && !viewsReady) {
+            fetchViews(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.pathname, viewsReady]);
+    const onClose = useCallback(() => {
+        setSelected(null);
+    }, [setSelected]);
+    useEffect(() => {
+        if (selected &&
+            response &&
+            !response.items.some(_hit => _hit.howler.id === selected) &&
+            (!location.pathname.startsWith('/bundles') || routeParams.id !== selected)) {
+            setSelected(null);
+            if (selectedHits.length < 2) {
+                removeHitFromSelection(selected);
+            }
+            return;
+        }
+        if (selected && !selectedHits.some(_hit => _hit?.howler.id === selected)) {
+            addHitToSelection(selected);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [addHitToSelection, location.pathname, removeHitFromSelection, response, routeParams.id, selected, setSelected]);
+    return (_jsxs(Stack, { direction: "row", flex: 1, sx: { overflow: 'hidden' }, children: [_jsxs(Box, { position: "relative", flex: 1, height: "100%", display: "flex", sx: [{ overflow: 'auto' }, displayType === 'list' && !isNull(searchPaneWidth) && { maxWidth: searchPaneWidth }], children: [_jsx(ErrorBoundary, { children: displayType === 'list' ? _jsx(SearchPane, {}) : _jsx(HitGrid, {}) }), _jsx(Collapse, { in: showSelectBar, unmountOnExit: true, sx: {
+                            position: 'absolute',
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            backgroundColor: theme.palette.background.paper,
+                            py: 1,
+                            px: 2
+                        }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Tooltip, { title: t('hit.search.select.all'), children: _jsx(Checkbox, { size: "small", checked: !!response?.items.every(_hit1 => selectedHits.some(_hit2 => _hit1.howler.id === _hit2.howler.id)), onChange: (__, checked) => checked ? response.items.forEach(_hit => addHitToSelection(_hit.howler.id)) : clearSelectedHits() }) }), _jsx(Typography, { children: _jsx(Trans, { i18nKey: "hit.search.selected", values: { size: selectedHits.length } }) }), _jsx(FlexOne, {}), _jsx(Tooltip, { title: t('hit.search.select.clear'), children: _jsx(IconButton, { size: "small", onClick: () => {
+                                            setSelected(null);
+                                            clearSelectedHits();
+                                        }, 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, { query: summaryQuery, response: response }), _jsxs(Card, { variant: "outlined", sx: [
+                            {
+                                zIndex: 100,
+                                overflow: 'visible',
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: '100%',
+                                right: 0,
+                                borderTop: 0,
+                                borderBottom: 0,
+                                transition: theme.transitions.create('left')
+                            },
+                            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',
+                                    right: '100%',
+                                    width: theme.spacing(5),
+                                    top: 0,
+                                    bottom: 0,
+                                    background: `linear-gradient(to right, transparent, ${theme.palette.background.paper})`
+                                } }))] })] }), showDrawer && (_jsx(Fab, { onClick: () => setShow(_show => !_show), color: "primary", sx: {
+                    position: 'fixed',
+                    right: show ? `calc(100% - ${theme.spacing(8)})` : theme.spacing(2),
+                    bottom: showSelectBar ? theme.spacing(6) : theme.spacing(1),
+                    zIndex: 1201,
+                    transition: theme.transitions.create(['right', 'bottom'])
+                }, children: _jsx(ChevronLeft, { sx: { transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' } }) }))] }));
+};
+const HitBrowserProvider = () => {
+    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
+};
+export default HitBrowserProvider;

package/dist/components/routes/hits/search/HitContextMenu.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from 'react';
+interface HitContextMenuProps {
+    getSelectedId: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => string;
+}
+declare const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>>;
+export default HitContextMenu;

package/dist/components/routes/hits/search/HitContextMenu.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Assignment, Edit, HowToVote, KeyboardArrowRight, OpenInNew, QueryStats, SettingsSuggest, Terminal } from '@mui/icons-material';
+import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper } from '@mui/material';
+import api from 'api';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { TOP_ROW, VOTE_OPTIONS } from 'components/elements/hit/actions/SharedComponents';
+import useHitActions from 'components/hooks/useHitActions';
+import useMyApi from 'components/hooks/useMyApi';
+import useMyActionFunctions from 'components/routes/action/useMyActionFunctions';
+import { capitalize, groupBy } from 'lodash-es';
+import howlerPluginStore from 'plugins/store';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+const ORDER = ['assessment', 'vote', 'action'];
+const ICON_MAP = {
+    assessment: _jsx(Assignment, {}),
+    vote: _jsx(HowToVote, {}),
+    action: _jsx(Edit, {})
+};
+const HitContextMenu = ({ children, getSelectedId }) => {
+    const { t } = useTranslation();
+    const analyticContext = useContext(AnalyticContext);
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const { config } = useContext(ApiConfigContext);
+    const pluginStore = usePluginStore();
+    const [id, setId] = useState(null);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const [analytic, setAnalytic] = useState(null);
+    const [anchorEl, setAnchorEl] = useState();
+    const [clickLocation, setClickLocation] = useState([-1, -1]);
+    const [actions, setActions] = useState([]);
+    const [show, setShow] = useState({});
+    const hits = useMemo(() => (selectedHits.some(_hit => _hit.howler.id === hit?.howler.id) ? selectedHits : [hit]), [hit, selectedHits]);
+    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    const onContextMenu = useCallback(async (event) => {
+        if (anchorEl) {
+            event.preventDefault();
+            setAnchorEl(null);
+            return;
+        }
+        event.preventDefault();
+        const _id = getSelectedId(event);
+        setId(_id);
+        const clientRect = event.target.getBoundingClientRect();
+        setClickLocation([event.clientX - clientRect.x, event.clientY - clientRect.y]);
+        setAnchorEl(event.target);
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
+            ?.items;
+        if (_actions) {
+            setActions(_actions);
+        }
+    }, [anchorEl, dispatchApi, getSelectedId]);
+    const rowStatus = useMemo(() => ({
+        assessment: canAssess,
+        vote: canVote
+    }), [canAssess, canVote]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, hits));
+    const entries = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map(assessment => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                    }
+                }))
+            ];
+        }
+        return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
+    }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
+    useEffect(() => {
+        if (!hit) {
+            return;
+        }
+        (async () => {
+            setAnalytic(await analyticContext.getAnalyticFromName(hit.howler.analytic));
+        })();
+    }, [analyticContext, hit]);
+    useEffect(() => {
+        if (!anchorEl) {
+            setClickLocation([-1, -1]);
+            setShow({});
+            setAnalytic(null);
+        }
+    }, [anchorEl]);
+    return (_jsxs(Box, { id: "contextMenu", onContextMenu: onContextMenu, children: [children, _jsxs(Menu, { id: "hit-menu", open: !!anchorEl, anchorEl: anchorEl, onClose: () => setAnchorEl(null), slotProps: {
+                    paper: {
+                        sx: {
+                            transform: `translate(${clickLocation[0]}px, ${clickLocation[1]}px) !important`,
+                            overflow: 'visible !important'
+                        }
+                    }
+                }, MenuListProps: { dense: true, sx: { minWidth: '250px' } }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: () => setAnchorEl(null), children: [_jsxs(MenuItem, { component: Link, to: `/hits/${hit?.howler.id}`, disabled: !hit, children: [_jsx(ListItemIcon, { children: _jsx(OpenInNew, {}) }), _jsx(ListItemText, { children: t('hit.panel.open') })] }), _jsxs(MenuItem, { component: Link, to: `/analytics/${analytic?.analytic_id}`, disabled: !analytic, children: [_jsx(ListItemIcon, { children: _jsx(QueryStats, {}) }), _jsx(ListItemText, { children: t('hit.panel.analytic.open') })] }), _jsx(Divider, {}), entries.map(([type, items]) => (_jsxs(MenuItem, { sx: { position: 'relative' }, onMouseEnter: () => setShow(_show => ({ ..._show, [type]: true })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: false })), disabled: rowStatus[type] === false, children: [_jsx(ListItemIcon, { children: ICON_MAP[type] ?? _jsx(Terminal, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t(`hit.details.actions.${type}`) }), rowStatus[type] !== false && (_jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } })), _jsx(Fade, { in: show[type], unmountOnExit: true, children: _jsx(Paper, { sx: { position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }, elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, children: items.map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: a.i18nKey ? t(a.i18nKey) : capitalize(a.name) }, a.name))) }) }) })] }, type))), _jsxs(MenuItem, { sx: { position: 'relative' }, onMouseEnter: () => setShow(_show => ({ ..._show, actions: true })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: false })), disabled: actions.length < 1, children: [_jsx(ListItemIcon, { children: _jsx(SettingsSuggest, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('route.actions.change') }), actions.length > 0 && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: show.actions, unmountOnExit: true, children: _jsx(Paper, { sx: { position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }, elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, children: actions.map(action => (_jsx(MenuItem, { onClick: () => executeAction(action.action_id, `howler.id:${hit?.howler.id}`), children: _jsx(ListItemText, { children: action.name }) }, action.action_id))) }) }) })] })] })] }));
+};
+export default HitContextMenu;

package/dist/components/routes/hits/search/HitQuery.d.ts

@@ -0,0 +1,9 @@
+export type HitQueryProps = {
+    triggerSearch: (query: string) => void;
+    onChange?: (query: string, isDirty: boolean) => void;
+    searching?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+};
+declare const _default: import("react").NamedExoticComponent<HitQueryProps>;
+export default _default;

package/dist/components/routes/hits/search/HitQuery.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { Height, Search } from '@mui/icons-material';
+import { Badge, Box, Card, Skeleton, Tooltip, alpha, useTheme } from '@mui/material';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import TuiIconButton from 'components/elements/addons/buttons/CustomIconButton';
+import QueryEditor from 'components/routes/advanced/QueryEditor';
+import HistoryIcon from '@mui/icons-material/History';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { sanitizeMultilineLucene } from 'utils/stringUtils';
+const DEFAULT_MULTILINE_HEIGHT = 250;
+const PROMPT_CONTEXT = 'isHitQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
+const HitQuery = ({ searching = false, disabled = false, compact = false, triggerSearch, onChange }) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const savedQuery = useContextSelector(ParameterContext, ctx => ctx.query || 'howler.id:*');
+    const prevQuery = useRef(null);
+    const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('query') || 'howler.id:*');
+    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const [loaded, setLoaded] = useState(false);
+    const [multiline, setMultiline] = useState(false);
+    const [y, setY] = useState(0);
+    const wrapper = useRef();
+    const search = useCallback(() => triggerSearch(sanitizeMultilineLucene(query)), [query, triggerSearch]);
+    const isDirty = useMemo(() => query !== savedQuery, [query, savedQuery]);
+    useEffect(() => {
+        onChange?.(query, isDirty);
+    }, [isDirty, onChange, query]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const executeDisposable = monaco.editor.addEditorAction({
+            id: 'execute-query',
+            label: t('route.advanced.execute.query'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+            run: search
+        });
+        return () => {
+            executeDisposable.dispose();
+        };
+    }, [monaco, t, search]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        let disposable;
+        if (!multiline) {
+            disposable = monaco.editor.addKeybindingRule({
+                command: 'execute-query',
+                keybinding: monaco.KeyCode.Enter,
+                when: PROMPT_CONTEXT
+            });
+        }
+        else {
+            disposable = monaco.editor.addKeybindingRule({
+                command: null,
+                keybinding: monaco.KeyCode.Enter,
+                when: PROMPT_CONTEXT
+            });
+        }
+        return () => {
+            disposable.dispose();
+        };
+    }, [monaco, multiline, search]);
+    const onMouseMove = useCallback((event) => {
+        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const offset = event.clientY - (wrapperRect.top + DEFAULT_MULTILINE_HEIGHT);
+        setY(offset);
+    }, []);
+    useEffect(() => {
+        if (savedQuery && savedQuery !== prevQuery.current) {
+            prevQuery.current = savedQuery;
+            setQuery(prevQuery.current);
+        }
+    }, [savedQuery]);
+    const onMouseUp = useCallback(() => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const onMount = useCallback((ed) => {
+        ed.createContextKey('isHitQuery', true);
+        setLoaded(true);
+    }, []);
+    const options = useMemo(() => ({
+        fontSize: 17,
+        lineHeight: 19,
+        lineNumbers: multiline ? 'on' : 'off',
+        lineDecorationsWidth: multiline ? 8 : 0,
+        lineNumbersMinChars: multiline ? 2 : 0,
+        showFoldingControls: 'never',
+        scrollBeyondLastLine: !multiline,
+        glyphMargin: !multiline,
+        renderLineHighlight: multiline ? 'gutter' : 'none',
+        overviewRulerLanes: multiline ? 1 : 0
+    }), [multiline]);
+    const preppedQuery = useMemo(() => (multiline ? query : query.replaceAll('\n', ' ')), [multiline, query]);
+    return (_jsxs(Card, { ref: wrapper, variant: "outlined", sx: [
+            {
+                width: '100%',
+                height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(7),
+                p: 1,
+                position: 'relative',
+                overflow: 'visible',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                '& .monaco-editor': {
+                    position: 'absolute !important'
+                },
+                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)
+            }
+        ], 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, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? '100%' : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(HistoryIcon, {}) })), _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,
+                    right: 0,
+                    bottom: 0,
+                    height: '10px',
+                    backgroundColor: theme.palette.divider,
+                    cursor: 'row-resize',
+                    zIndex: 1000
+                }, onMouseDown: onMouseDown })), disabled && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    top: 0,
+                    backgroundColor: alpha(theme.palette.background.paper, 0.65),
+                    zIndex: 1000
+                }, onMouseDown: onMouseDown }))] }));
+};
+export default memo(HitQuery);

package/dist/components/routes/hits/search/InformationPane.d.ts

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