@cccsaurora/howler-ui 2.19.0-dev.1099 → 2.19.0-dev.1148

package/components/elements/addons/layout/vsbox/VSBoxContent.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import VSBoxContent from './VSBoxContent';
+describe('VSBoxContent', () => {
+    it('renders children inside a div with data-vsbox-content attribute', () => {
+        render(_jsx(VSBoxContent, { children: _jsx("span", { children: "hello" }) }));
+        const el = document.querySelector('[data-vsbox-content]');
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute('data-vsbox-content', 'true');
+    });
+    it('renders children correctly', () => {
+        render(_jsx(VSBoxContent, { children: _jsx("span", { id: "child", children: "content" }) }));
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+    it('passes additional MUI Box props through', () => {
+        const { container } = render(_jsx(VSBoxContent, { sx: { display: 'flex' }, children: _jsx("span", { children: "content" }) }));
+        expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders multiple children', () => {
+        render(_jsxs(VSBoxContent, { children: [_jsx("span", { id: "a", children: "A" }), _jsx("span", { id: "b", children: "B" })] }));
+        expect(screen.getByTestId('a')).toBeInTheDocument();
+        expect(screen.getByTestId('b')).toBeInTheDocument();
+    });
+});

package/components/elements/addons/search/phrase/WordLexer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/addons/search/phrase/WordLexer.test.js

@@ -0,0 +1,55 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import WordLexer from './word/WordLexer';
+describe('WordLexer', () => {
+    const lexer = new WordLexer();
+    describe('parse', () => {
+        it('parses a single word', () => {
+            const result = lexer.parse('hello');
+            expect(result.tokens).toHaveLength(2); // word + eop
+            expect(result.tokens[0].type).toBe('word');
+            expect(result.tokens[0].value).toBe('hello');
+        });
+        it('parses two words separated by a space', () => {
+            const result = lexer.parse('hello world');
+            const nonEop = result.tokens.filter(t => t.type !== 'eop');
+            expect(nonEop.some(t => t.type === 'word' && t.value === 'hello')).toBe(true);
+            expect(nonEop.some(t => t.type === 'word' && t.value === 'world')).toBe(true);
+        });
+        it('always ends with an eop token', () => {
+            const result = lexer.parse('foo bar');
+            const last = result.tokens[result.tokens.length - 1];
+            expect(last.type).toBe('eop');
+            expect(last.value).toBe('');
+        });
+        it('returns an eop-only token list for empty input', () => {
+            const result = lexer.parse('');
+            expect(result.tokens).toHaveLength(1);
+            expect(result.tokens[0].type).toBe('eop');
+        });
+        it('sets cursor correctly', () => {
+            const result = lexer.parse('hello', 3);
+            expect(result.cursor).toBe(3);
+        });
+        it('sets current token for cursor in the middle of a word', () => {
+            const result = lexer.parse('hello', 3);
+            expect(result.current?.type).toBe('word');
+        });
+        it('provides suggest token for current cursor position', () => {
+            const result = lexer.parse('hello world', 7);
+            expect(result.suggest).toBeDefined();
+            expect(result.suggest.token).toBeDefined();
+        });
+        it('sets startIndex/endIndex correctly on word tokens', () => {
+            const result = lexer.parse('hi');
+            const wordToken = result.tokens.find(t => t.type === 'word');
+            expect(wordToken.startIndex).toBe(0);
+            expect(wordToken.endIndex).toBe(1);
+        });
+        it('whitespace tokens have correct type', () => {
+            const result = lexer.parse('a b');
+            const wsToken = result.tokens.find(t => t.type === 'whitespace');
+            expect(wsToken).toBeDefined();
+        });
+    });
+});

package/components/elements/hit/HitContextMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{routes/hits/search → elements/hit}/grid/ColumnHeader.d.ts

@@ -1,7 +1,8 @@
 import { type FC, type SetStateAction } from 'react';
 declare const ColumnHeader: FC<{
-    width: string;
+    width: number;
     col: string;
+    colSource?: string[];
     setColumns: (val: SetStateAction<string[]>) => void;
     onMouseDown: (col: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }>;

package/components/{routes/hits/search → elements/hit}/grid/ColumnHeader.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DragIndicator, Remove } from '@mui/icons-material';
+import { DragIndicator, JoinFull, Remove } from '@mui/icons-material';
 import { Box, IconButton, Stack, TableCell, Tooltip, useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { useContext } from 'react';
-const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
+const ColumnHeader = ({ col, width, colSource, setColumns, onMouseDown }) => {
     const theme = useTheme();
     const { config } = useContext(ApiConfigContext);
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
@@ -15,7 +15,7 @@ const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
             borderRightColor: 'divider',
             py: 0.5,
             position: 'relative'
-        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, !!width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
+        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, !!width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), colSource?.length > 1 && (_jsx(Tooltip, { title: colSource.join(', '), children: _jsx(JoinFull, { fontSize: "small" }) })), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
                         position: 'absolute',
                         top: theme.spacing(0.75),
                         bottom: theme.spacing(0.75),

package/components/{routes/hits/search → elements/hit}/grid/HitRow.d.ts

@@ -3,7 +3,7 @@ declare const _default: import("react").NamedExoticComponent<{
     hit: Hit;
     analyticIds: Record<string, string>;
     columns: string[];
-    columnWidths: Record<string, string>;
+    columnWidths: Record<string, number>;
     collapseMainColumn: boolean;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 }>;

package/components/elements/hit/grid/HitTable.d.ts

@@ -0,0 +1,12 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+import React, { type PropsWithChildren } from 'react';
+declare const HitTable: ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }: {
+    query: string;
+    items?: WithMetadata<Hit>[];
+    refreshItems?: (query: string, append?: boolean) => void;
+    ContextMenu?: React.FC<PropsWithChildren<object>>;
+    contextMenuProps?: object;
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, hit: Hit) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HitTable;

package/components/elements/hit/grid/HitTable.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { FormatIndentDecrease, FormatIndentIncrease, Search } from '@mui/icons-material';
+import { IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
+import ColumnHeader from '@cccsaurora/howler-ui/components/elements/hit/grid/ColumnHeader';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import HitRow from './HitRow';
+const HitTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }) => {
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const { getMatchingAnalytic } = useMatchers();
+    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
+    const [analyticIds, setAnalyticIds] = useState({});
+    const { columns, columnWidths, columnSources, setColumnWidth, setColumns, isReady } = useContext(GridColumnsContext);
+    const resizingCol = useRef();
+    useEffect(() => {
+        items?.forEach(hit => {
+            if (!analyticIds[hit.howler.analytic]) {
+                getMatchingAnalytic(hit).then(_analytic => {
+                    if (_analytic) {
+                        setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id }));
+                    }
+                });
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analyticIds, items]);
+    const onMouseMove = useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { col, width } = resizingCol.current;
+        const newWidth = width + event.movementX;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = newWidth + 'px';
+            el.style.width = newWidth + 'px';
+        });
+        resizingCol.current.width = newWidth;
+    }, []);
+    const onMouseUp = useCallback(() => {
+        const { col, width, element } = resizingCol.current;
+        if (isReady) {
+            setColumnWidth(col, Math.round(width));
+        }
+        element.style.width = null;
+        element.style.maxWidth = null;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = null;
+            el.style.width = null;
+        });
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, setColumnWidth, isReady]);
+    const onMouseDown = useCallback((col, event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target.parentElement;
+        const rect = element.getBoundingClientRect();
+        resizingCol.current = { col, width: rect.width, element };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
+            if (isReady) {
+                setColumns(arrayMove(columns, oldIndex, newIndex));
+            }
+        }
+    }, [columns, setColumns, isReady]);
+    const tableContent = (_jsxs(_Fragment, { children: [items?.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onItemClick ? onItemClick : (_ev, _hit) => null }, hit.howler.id))), refreshItems && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => refreshItems(query, true), children: _jsx(Search, {}) }) }) }) }))] }));
+    return (_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
+                                borderRight: 'thin solid',
+                                borderRightColor: 'divider'
+                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], colSource: columnSources[col], onMouseDown: onMouseDown, setColumns: isReady ? setColumns : () => null }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), ContextMenu ? (_jsx(ContextMenu, { ...contextMenuProps, children: tableContent })) : (_jsx(TableBody, { children: tableContent }))] }));
+};
+export default HitTable;

package/components/elements/view/LayoutToggle.d.ts

@@ -0,0 +1,8 @@
+export type HowlerViewLayoutType = 'list' | 'grid' | null;
+declare const LayoutToggle: ({ displayType, setDisplayType, size, allowNullValue }: {
+    displayType: HowlerViewLayoutType;
+    setDisplayType: (type: HowlerViewLayoutType) => void;
+    size?: "small" | "medium" | "large";
+    allowNullValue?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LayoutToggle;

package/components/elements/view/LayoutToggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List, TableChart } from '@mui/icons-material';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+const LayoutToggle = ({ displayType, setDisplayType, size, allowNullValue = false }) => {
+    return (_jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => {
+            if (!value && !allowNullValue) {
+                return;
+            }
+            setDisplayType(value);
+        }, size: size ?? 'small', children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, { fontSize: size ?? 'medium' }) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, { fontSize: size ?? 'medium' }) })] }));
+};
+export default LayoutToggle;

package/components/elements/view/ViewTitle.d.ts

@@ -5,6 +5,9 @@ interface ViewTitleProps {
     query?: string;
     sort?: string;
     span?: string;
+    settings?: {
+        display?: string;
+    };
 }
 export declare const ViewTitle: FC<ViewTitleProps>;
 export {};

package/components/elements/view/ViewTitle.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownward, ArrowUpward, Language, Lock, Person } from '@mui/icons-material';
+import { ArrowDownward, ArrowUpward, Language, List, Lock, Person, TableChart } from '@mui/icons-material';
 import { Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-export const ViewTitle = ({ title, type, query, sort, span }) => {
+export const ViewTitle = ({ title, type, query, sort, span, settings }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -21,5 +21,8 @@ export const ViewTitle = ({ title, type, query, sort, span }) => {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
+                        }[type] }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
+                            list: _jsx(List, { fontSize: "small" }),
+                            grid: _jsx(TableChart, { fontSize: "small" })
+                        }[settings.display] })), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
 };

package/components/hooks/useMyTheme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/hooks/useMyTheme.test.js

@@ -0,0 +1,35 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import useMyTheme from './useMyTheme';
+describe('useMyTheme', () => {
+    it('returns a theme configuration object', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current).toBeDefined();
+        expect(typeof result.current).toBe('object');
+    });
+    it('contains a dark palette entry', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette?.dark).toBeDefined();
+    });
+    it('contains a light palette entry', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette?.light).toBeDefined();
+    });
+    it('returns the same reference on re-render (stable return value)', () => {
+        const { result, rerender } = renderHook(() => useMyTheme());
+        const first = result.current;
+        rerender();
+        expect(result.current).toBe(first);
+    });
+    it('dark palette includes primary and secondary colours', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette.dark.primary).toHaveProperty('main');
+        expect(result.current.palette.dark.secondary).toHaveProperty('main');
+    });
+    it('light palette includes primary and secondary colours', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette.light.primary).toHaveProperty('main');
+        expect(result.current.palette.light.secondary).toHaveProperty('main');
+    });
+});

package/components/routes/advanced/eqlTokenProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/advanced/eqlTokenProvider.test.js

@@ -0,0 +1,34 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import TOKEN_PROVIDER from './eqlTokenProvider';
+describe('EQL token provider', () => {
+    it('exports a non-null object', () => {
+        expect(TOKEN_PROVIDER).toBeDefined();
+        expect(TOKEN_PROVIDER).not.toBeNull();
+        expect(typeof TOKEN_PROVIDER).toBe('object');
+    });
+    it('has a "root" tokenizer entry', () => {
+        expect(TOKEN_PROVIDER.tokenizer).toBeDefined();
+        expect(TOKEN_PROVIDER.tokenizer.root).toBeDefined();
+        expect(Array.isArray(TOKEN_PROVIDER.tokenizer.root)).toBe(true);
+    });
+    it('uses "invalid" as the defaultToken', () => {
+        expect(TOKEN_PROVIDER.defaultToken).toBe('invalid');
+    });
+    it('defines the expected EQL keywords', () => {
+        const kws = TOKEN_PROVIDER.keywords;
+        expect(kws).toContain('where');
+        expect(kws).toContain('not');
+        expect(kws).toContain('in');
+        expect(kws).toContain('head');
+        expect(kws).toContain('tail');
+    });
+    it('defines boolean operators', () => {
+        const booleans = TOKEN_PROVIDER.booleans;
+        expect(booleans).toContain('and');
+        expect(booleans).toContain('or');
+    });
+    it('has includeLF set to true', () => {
+        expect(TOKEN_PROVIDER.includeLF).toBe(true);
+    });
+});

package/components/routes/advanced/luceneTokenProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/advanced/luceneTokenProvider.test.js

@@ -0,0 +1,34 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import TOKEN_PROVIDER from './luceneTokenProvider';
+describe('Lucene token provider', () => {
+    it('exports a non-null object', () => {
+        expect(TOKEN_PROVIDER).toBeDefined();
+        expect(TOKEN_PROVIDER).not.toBeNull();
+        expect(typeof TOKEN_PROVIDER).toBe('object');
+    });
+    it('has a "root" tokenizer entry', () => {
+        expect(TOKEN_PROVIDER.tokenizer).toBeDefined();
+        expect(TOKEN_PROVIDER.tokenizer.root).toBeDefined();
+        expect(Array.isArray(TOKEN_PROVIDER.tokenizer.root)).toBe(true);
+    });
+    it('defines the expected operators', () => {
+        const ops = TOKEN_PROVIDER.operators;
+        expect(ops).toContain('-');
+        expect(ops).toContain('&&');
+        expect(ops).toContain('||');
+        expect(ops).toContain(':');
+    });
+    it('defines the expected keywords (AND, OR, NOT)', () => {
+        const kws = TOKEN_PROVIDER.keywords;
+        expect(kws).toContain('AND');
+        expect(kws).toContain('OR');
+        expect(kws).toContain('NOT');
+    });
+    it('uses "default" as the defaultToken', () => {
+        expect(TOKEN_PROVIDER.defaultToken).toBe('default');
+    });
+    it('includes a string tokenizer state for quoted values', () => {
+        expect(TOKEN_PROVIDER.tokenizer).toHaveProperty('string');
+    });
+});

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

@@ -1,6 +1,7 @@
 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 GridColumnsProvider from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import HitSearchProvider, { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import ParameterProvider, { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
@@ -128,6 +129,6 @@ const HitBrowser = () => {
                 }, children: _jsx(ChevronLeft, { sx: { transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' } }) }))] }));
 };
 const HitBrowserProvider = () => {
-    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
+    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(GridColumnsProvider, { children: _jsx(HitBrowser, {}) }) }) }));
 };
 export default HitBrowserProvider;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
-import { Box, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { ErrorOutline } from '@mui/icons-material';
+import { 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';
@@ -17,21 +17,20 @@ import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import BundleParentMenu from './BundleParentMenu';
 import { BundleScroller } from './BundleScroller';
-import HitContextMenu from './HitContextMenu';
 import HitQuery from './HitQuery';
-import LayoutSettings from './LayoutSettings';
 import QuerySettings from './QuerySettings';
+import SearchActionMenu from './shared/SearchActionMenu';
 const Item = memo(({ hit, onClick }) => {
     const theme = useTheme();
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
@@ -80,7 +79,6 @@ const Item = memo(({ hit, onClick }) => {
 const SearchPane = () => {
     const { t } = useTranslation();
     const location = useLocation();
-    const navigate = useNavigate();
     const routeParams = useParams();
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
@@ -117,7 +115,7 @@ const SearchPane = () => {
                                             ], onClick: () => {
                                                 clearSelectedHits(bundleHit.howler.id);
                                                 setSelected(bundleHit.howler.id);
-                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
+                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), _jsx(SearchActionMenu, { query: query })] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,

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

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll } from '@mui/icons-material';
+import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll, Warning } from '@mui/icons-material';
 import { Autocomplete, Chip, CircularProgress, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
@@ -21,6 +21,7 @@ const ViewLink = ({ id, viewId }) => {
     const removeView = useContextSelector(ParameterContext, ctx => ctx.removeView);
     const setParamView = useContextSelector(ParameterContext, ctx => ctx.setView);
     const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
     const [loading, setLoading] = useState(true);
     const [view, setView] = useState(null);
     useEffect(() => {
@@ -60,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: _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) }) }), 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] }), 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);