@cccsaurora/howler-ui 2.12.0-dev.48 → 2.12.0-dev.65

package/components/app/providers/DossierProvider.d.ts

@@ -12,4 +12,5 @@ export interface DossierContextType {
 }
 export declare const DossierContext: import("use-context-selector").Context<DossierContextType>;
 declare const DossierProvider: FC<PropsWithChildren>;
+export declare const useDossierContextSelector: <Selected>(selector: (value: DossierContextType) => Selected) => Selected;
 export default DossierProvider;

package/components/app/providers/DossierProvider.js

@@ -3,7 +3,7 @@ import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useEffect, useState } from 'react';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 export const DossierContext = createContext(null);
 const DossierProvider = ({ children }) => {
     const { dispatchApi } = useMyApi();
@@ -76,4 +76,7 @@ const DossierProvider = ({ children }) => {
             getMatchingDossiers
         }, children: children }));
 };
+export const useDossierContextSelector = (selector) => {
+    return useContextSelector(DossierContext, selector);
+};
 export default DossierProvider;

package/components/app/providers/HitProvider.d.ts

@@ -17,4 +17,5 @@ export declare const HitContext: import("use-context-selector").Context<HitProvi
  * Central repository for storing individual hit data across the application. Allows efficient retrieval of hits across componenents.
  */
 declare const HitProvider: FC<PropsWithChildren>;
+export declare const useHitContextSelector: <Selected>(selector: (value: HitProviderType) => Selected) => Selected;
 export default HitProvider;

package/components/app/providers/HitProvider.js

@@ -3,7 +3,7 @@ import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { uniq } from 'lodash-es';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 import { SocketContext } from './SocketProvider';
 export const HitContext = createContext(null);
 /**
@@ -101,4 +101,7 @@ const HitProvider = ({ children }) => {
             loadHits
         }, children: children }));
 };
+export const useHitContextSelector = (selector) => {
+    return useContextSelector(HitContext, selector);
+};
 export default HitProvider;

package/components/app/providers/HitSearchProvider.d.ts

@@ -22,4 +22,5 @@ interface HitSearchProviderType {
 }
 export declare const HitSearchContext: import("use-context-selector").Context<HitSearchProviderType>;
 declare const HitSearchProvider: FC<PropsWithChildren>;
+export declare const useHitSearchContextSelector: <Selected>(selector: (value: HitSearchProviderType) => Selected) => Selected;
 export default HitSearchProvider;

package/components/app/providers/HitSearchProvider.js

@@ -11,6 +11,7 @@ import { isMobile } from 'react-device-detect';
 import { useLocation, useParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { convertCustomDateRangeToLucene, convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
 import { HitContext } from './HitProvider';
@@ -37,7 +38,7 @@ const HitSearchProvider = ({ children }) => {
     const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
     const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
     const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
-    const [displayType, setDisplayType] = useState('list');
+    const [displayType, setDisplayType] = useState(getStored(StorageKey.DISPLAY_TYPE) ?? 'list');
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
     const [response, setResponse] = useState();
@@ -165,4 +166,7 @@ const HitSearchProvider = ({ children }) => {
             setFzfSearch
         }, children: children }));
 };
+export const useHitSearchContextSelector = (selector) => {
+    return useContextSelector(HitSearchContext, selector);
+};
 export default HitSearchProvider;

package/components/app/providers/ParameterProvider.d.ts

@@ -22,4 +22,5 @@ export declare const ParameterContext: import("use-context-selector").Context<Pa
  * Context responsible for tracking updates to query operations in hit and view search.
  */
 declare const ParameterProvider: FC<PropsWithChildren>;
+export declare const useParameterContextSelector: <Selected>(selector: (value: ParameterProviderType) => Selected) => Selected;
 export default ParameterProvider;

package/components/app/providers/ParameterProvider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isEmpty, isNull, isUndefined, omitBy, pickBy } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 export const ParameterContext = createContext(null);
 const DEFAULT_VALUES = {
@@ -177,4 +177,7 @@ const ParameterProvider = ({ children }) => {
             setFilter: useMemo(() => set('filter'), [set])
         }, children: children }));
 };
+export const useParameterContextSelector = (selector) => {
+    return useContextSelector(ParameterContext, selector);
+};
 export default ParameterProvider;

package/components/app/providers/SocketProvider.js

@@ -121,7 +121,7 @@ const SocketProvider = ({ children }) => {
         setRetry(false);
         // Here we go!
         setStatus(Status.CONNECTING);
-        const host = window.location.host.startsWith('localhost') ? 'localhost:5000' : window.location.host;
+        const host = window.location.host;
         const protocol = window.location.protocol.startsWith('http:') ? 'ws' : 'wss';
         const ws = new WebSocket(`${protocol}://${host}/socket/v1/connect`);
         // Add our listeners to the websocket

package/components/app/providers/TemplateProvider.d.ts

@@ -10,4 +10,5 @@ interface TemplateContextType {
 }
 export declare const TemplateContext: import("use-context-selector").Context<TemplateContextType>;
 declare const TemplateProvider: FC<PropsWithChildren>;
+export declare const useTemplateContextSelector: <Selected>(selector: (value: TemplateContextType) => Selected) => Selected;
 export default TemplateProvider;

package/components/app/providers/TemplateProvider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useRef, useState } from 'react';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 const SIX_TAIL_PHISH_DETAILS = [
     'event.start',
     'event.end',
@@ -97,4 +97,7 @@ const TemplateProvider = ({ children }) => {
     }, []);
     return (_jsx(TemplateContext.Provider, { value: { templates, getTemplates, getMatchingTemplate, refresh, loaded }, children: children }));
 };
+export const useTemplateContextSelector = (selector) => {
+    return useContextSelector(TemplateContext, selector);
+};
 export default TemplateProvider;

package/components/app/providers/ViewProvider.d.ts

@@ -15,4 +15,5 @@ export interface ViewContextType {
 }
 export declare const ViewContext: import("use-context-selector").Context<ViewContextType>;
 declare const ViewProvider: FC<PropsWithChildren>;
+export declare const useViewContextSelector: <Selected>(selector: (value: ViewContextType) => Selected) => Selected;
 export default ViewProvider;

package/components/app/providers/ViewProvider.js

@@ -5,7 +5,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 export const ViewContext = createContext(null);
 const ViewProvider = ({ children }) => {
@@ -96,4 +96,7 @@ const ViewProvider = ({ children }) => {
             getCurrentView
         }, children: children }));
 };
+export const useViewContextSelector = (selector) => {
+    return useContextSelector(ViewContext, selector);
+};
 export default ViewProvider;

package/components/elements/PluginTypography.js

@@ -16,6 +16,6 @@ const PluginTypography = ({ children, value, context, ...props }) => {
             return component;
         }
     }
-    return _jsx(Typography, { ...props, children: children });
+    return _jsx(Typography, { ...props, children: children ?? value });
 };
 export default PluginTypography;

package/components/hooks/useHitSelection.d.ts

@@ -1,7 +1,6 @@
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type React from 'react';
-declare const useHitSelection: (response?: HowlerSearchResponse<Hit>) => {
+declare const useHitSelection: () => {
     lastSelected: string;
     setLastSelected: React.Dispatch<React.SetStateAction<string>>;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;

package/components/hooks/useHitSelection.js

@@ -1,14 +1,16 @@
 import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 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 useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const useHitSelection = (response) => {
+const useHitSelection = () => {
     const navigate = useNavigate();
     const { setItems } = useAppBreadcrumbs();
     const { routes } = useMySitemap();
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
     const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
@@ -65,11 +67,10 @@ const useHitSelection = (response) => {
         lastSelected,
         navigate,
         removeHitFromSelection,
-        response?.items,
+        response,
         routes,
         selectedHits,
         setItems,
-        setLastSelected,
         setSelected
     ]);
     return { lastSelected, setLastSelected, onClick };

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

@@ -118,7 +118,7 @@ const HitBrowser = () => {
         }
         // 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: {
+    return (_jsxs(Stack, { direction: "row", flex: 1, sx: { overflow: 'hidden' }, children: [_jsxs(Box, { position: "relative", flex: 1.15, 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,

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

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

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

@@ -22,7 +22,7 @@ const ICON_MAP = {
     vote: _jsx(HowToVote, {}),
     action: _jsx(Edit, {})
 };
-const HitContextMenu = ({ children, getSelectedId }) => {
+const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
     const { t } = useTranslation();
     const analyticContext = useContext(AnalyticContext);
     const { dispatchApi } = useMyApi();
@@ -104,7 +104,7 @@ const HitContextMenu = ({ children, getSelectedId }) => {
             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: {
+    return (_jsxs(Component, { 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`,

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

@@ -94,7 +94,7 @@ const SearchPane = () => {
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const { onClick } = useHitSelection(response);
+    const { onClick } = useHitSelection();
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
     const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check } from '@mui/icons-material';
-import { Autocomplete, Chip, Divider, Grid, Popover, Stack, TextField } from '@mui/material';
+import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { sortBy, uniq } from 'lodash-es';
-import { memo, useContext, useMemo } from 'react';
+import { memo, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
@@ -13,9 +13,13 @@ const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
     const { hitFields } = useContext(FieldContext);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const [columnToAdd, setColumnToAdd] = useState(null);
     const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
     const suggestions = useMemo(() => uniq((response?.items ?? []).flatMap(_hit => getMatchingTemplate(_hit)?.keys ?? [])), [getMatchingTemplate, response?.items]);
-    return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsx(Autocomplete, { options: options, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }) }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {
+    return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
+                                addColumn(columnToAdd);
+                                setColumnToAdd(null);
+                            }, children: _jsx(Add, {}) })] }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {
                         return (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: used ? 'success' : 'default', label: key, icon: used ? _jsx(Check, {}) : _jsx(Add, {}), onClick: () => addColumn(key), disabled: used }) }, key));
                     }) })] }) }));
 };

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

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

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

@@ -0,0 +1,30 @@
+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 { 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 theme = useTheme();
+    const { config } = useContext(ApiConfigContext);
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
+    return (_jsx(TableCell, { ref: setNodeRef, sx: {
+            borderRight: 'thin solid',
+            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: {
+                        position: 'absolute',
+                        top: theme.spacing(0.75),
+                        bottom: theme.spacing(0.75),
+                        right: -3,
+                        width: '5px',
+                        borderRight: 'thin solid',
+                        borderLeft: 'thin solid',
+                        borderColor: 'divider',
+                        cursor: 'col-resize'
+                    }, onMouseDown: e => onMouseDown(col, e) })] }) }));
+};
+export default ColumnHeader;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import { Stack, TableCell } from '@mui/material';
+import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const EnhancedCell = ({ value: rawValue, sx = {}, className }) => {
+    const { t } = useTranslation();
+    if (!rawValue) {
+        return _jsx(TableCell, { style: { borderBottom: 'none' }, children: t('none') });
+    }
+    const values = (Array.isArray(rawValue) ? rawValue : [rawValue]).filter(_value => !!_value);
+    return (_jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
+                { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
+                ...(Array.isArray(sx) ? sx : [sx])
+            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, children: value }, value + index))) }) }));
+};
+export default memo(EnhancedCell);

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Add, FormatIndentDecrease, FormatIndentIncrease, Info, List, Remove, Search, TableChart } from '@mui/icons-material';
-import { Box, IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useTheme } from '@mui/material';
+import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { Add, FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
+import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-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';
@@ -11,24 +12,28 @@ import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/Fle
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
 import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
+import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import HitContextMenu from '../HitContextMenu';
 import HitQuery from '../HitQuery';
 import QuerySettings from '../shared/QuerySettings';
 import ViewLink from '../ViewLink';
 import AddColumnModal from './AddColumnModal';
+import ColumnHeader from './ColumnHeader';
 import HitRow from './HitRow';
 const HitGrid = () => {
     const { t } = useTranslation();
-    const { config } = useContext(ApiConfigContext);
     const { getIdFromName } = useContext(AnalyticContext);
     const routeParams = useParams();
     const location = useLocation();
     const theme = useTheme();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const { onClick } = useHitSelection();
     const search = useContextSelector(HitSearchContext, ctx => ctx.search);
     const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
     const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
@@ -92,6 +97,8 @@ const HitGrid = () => {
         window.removeEventListener('mouseup', onMouseUp);
     }, [onMouseMove]);
     const onMouseDown = useCallback((col, event) => {
+        event.stopPropagation();
+        event.preventDefault();
         resizingCol.current = [col, event.target.parentElement];
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);
@@ -102,6 +109,22 @@ const HitGrid = () => {
             search(query, true);
         }
     }, [query, search]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
+            setColumns(arrayMove(columns, oldIndex, newIndex));
+        }
+    }, [columns]);
+    const getSelectedId = useCallback((event) => {
+        const target = event.target;
+        const selectedElement = target.closest('[id]');
+        if (!selectedElement) {
+            return;
+        }
+        return selectedElement.id;
+    }, []);
     return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsx(ViewLink, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
                                     position: 'absolute',
                                     left: 0,
@@ -109,29 +132,9 @@ const HitGrid = () => {
                                     bottom: 0,
                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                     borderBottomRightRadius: theme.shape.borderRadius
-                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { '& > *': { flex: 1 } }, children: [_jsx(QuerySettings, {}), response && _jsx(SearchTotal, { offset: response.offset, pageLength: response.rows, total: response.total }), _jsxs(Stack, { direction: "row", children: [_jsx(FlexOne, {}), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) })] }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns(_columns => [..._columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
+                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { '& > *': { flex: 1 } }, children: [_jsx(QuerySettings, {}), response && (_jsx(SearchTotal, { sx: { alignSelf: 'center' }, color: "text.secondary", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { direction: "row", children: [_jsx(FlexOne, {}), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) })] }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns(_columns => [..._columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
                                                 borderRight: 'thin solid',
                                                 borderRightColor: 'divider'
-                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), columns.map(col => (_jsx(TableCell, { sx: {
-                                                borderRight: 'thin solid',
-                                                borderRightColor: 'divider',
-                                                py: 0.5,
-                                                position: 'relative'
-                                            }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [
-                                                    { minWidth: '150px' },
-                                                    !!columnWidths[col]
-                                                        ? { width: columnWidths[col], maxWidth: columnWidths[col] }
-                                                        : { 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(Box, { sx: {
-                                                            position: 'absolute',
-                                                            top: theme.spacing(0.75),
-                                                            bottom: theme.spacing(0.75),
-                                                            right: -3,
-                                                            width: '5px',
-                                                            borderRight: 'thin solid',
-                                                            borderLeft: 'thin solid',
-                                                            borderColor: 'divider',
-                                                            cursor: 'col-resize'
-                                                        }, onMouseDown: e => onMouseDown(col, e) })] }) }, col))), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(TableBody, { children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
+                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
 };
 export default HitGrid;

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

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

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

@@ -2,26 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
 import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { get } from 'lodash-es';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import EnhancedCell from './EnchancedCell';
-const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn }) => {
+import EnhancedCell from './EnhancedCell';
+const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const { onClick } = useHitSelection(response);
     const [expandRow, setExpandRow] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: hit.howler.id, onClick: ev => onClick(ev, hit), sx: [
                     {
@@ -49,6 +45,6 @@ const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn })
                                         e.preventDefault();
                                         e.stopPropagation();
                                         setExpandRow(_expanded => !_expanded);
-                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler.assignment !== 'unassigned' && _jsx(Assigned, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '150px', maxWidth: '300px' } }, col))), _jsx(TableCell, { style: { borderBottom: 'none' } })] }, hit.howler.id), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, onClick: ev => onClick(ev, hit), children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
+                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler.assignment !== 'unassigned' && _jsx(Assigned, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' } }, col)))] }, hit.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, hit), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
 };
 export default memo(HitRow);

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

@@ -35,6 +35,6 @@ const SearchSpan = ({ omitCustom = false, size }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedView]);
-    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '150px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
+    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
 };
 export default memo(SearchSpan);

package/components/routes/settings/LocalSection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-literals */
-import { ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { List, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
 import { MenuItem, Select, Stack, TableCell, TableRow, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -18,8 +18,9 @@ const LocalSection = () => {
     const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
     const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, 'list');
     const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
     const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
-    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
 };
 export default LocalSection;

package/locales/en/translation.json

@@ -372,6 +372,10 @@
     "page.settings.local.flatten.json.description": "Instead of showing the object structure of the JSON, show it as flattened keys.",
     "page.settings.local.details.drawer": "Always use drawer in Hit Search",
     "page.settings.local.details.drawer.description": "Instead of switching between a divided view and the drawer on different screen sizes, this setting forces Howler to always use the drawer.",
+    "page.settings.local.hits.display_type": "Default display type for results",
+    "page.settings.local.hits.display_type.description": "This setting allows you to decide whether to use the list or grid view by default when searching.",
+    "page.settings.local.hits.display_type.list": "List",
+    "page.settings.local.hits.display_type.grid": "Grid",
     "page.settings.local.hits.layout": "Change Layout",
     "page.settings.local.hits.layout.description": "This setting allows you to decide how much padding and spacing, as well as font size and element size, we use when rendering the UI. The denser the UI, the more data can be viewed.",
     "page.settings.local.hits.layout.dense": "Dense",

package/locales/fr/translation.json

@@ -373,6 +373,10 @@
     "page.settings.local.flatten.json.description": "Au lieu d'afficher la structure d'objet du JSON, affichez-la sous forme de clés aplaties",
     "page.settings.local.details.drawer": "Toujours utiliser le tiroir dans la recherche du hit",
     "page.settings.local.details.drawer.description": "Au lieu de basculer entre une vue divisée et le tiroir en fonction de la taille de l'écran, ce paramètre oblige Howler à toujours utiliser le tiroir.",
+    "page.settings.local.hits.display_type": "Type d'affichage par défaut pour les résultats",
+    "page.settings.local.hits.display_type.description": "Ce paramètre vous permet de choisir entre l'affichage sous forme de liste ou de grille par défaut lors d'une recherche.",
+    "page.settings.local.hits.display_type.list": "Liste",
+    "page.settings.local.hits.display_type.grid": "Grille",
     "page.settings.local.hits.layout": "Change Layout",
     "page.settings.local.hits.layout.description": "Ce paramètre vous permet de décider de la quantité de rembourrage et d'espacement, ainsi que de la taille de la police et de la taille de l'élément, que nous utilisons lors du rendu de l'interface utilisateur. Plus l'interface est dense, plus il est possible d'afficher de données.",
     "page.settings.local.hits.layout.dense": "Dense",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.12.0-dev.48",
+  "version": "2.12.0-dev.65",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/utils/constants.d.ts

@@ -55,7 +55,8 @@ export declare enum StorageKey {
     SEARCH_PANE_WIDTH = "search_pane_width",
     GRID_COLLAPSE_COLUMN = "grid_collapse_column",
     QUERY_HISTORY = "query_history",
-    LOGIN_NONCE = "login_nonce"
+    LOGIN_NONCE = "login_nonce",
+    DISPLAY_TYPE = "display_type"
 }
 export declare const MOCK_SEARCH_QUERY_STORE = "howler.ui.mock_search_query_store";
 export declare const MOCK_FAVOURITES_STORE = "howler.ui.mock_favourite_store";

package/utils/constants.js

@@ -61,6 +61,7 @@ export var StorageKey;
     StorageKey["GRID_COLLAPSE_COLUMN"] = "grid_collapse_column";
     StorageKey["QUERY_HISTORY"] = "query_history";
     StorageKey["LOGIN_NONCE"] = "login_nonce";
+    StorageKey["DISPLAY_TYPE"] = "display_type";
 })(StorageKey || (StorageKey = {}));
 export const MOCK_SEARCH_QUERY_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_SEARCH_QUERY_STORE}`;
 export const MOCK_FAVOURITES_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_FAVOURITES_STORE}`;

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/no-array-index-key */
-import { Stack, TableCell, Tooltip } from '@mui/material';
-import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-const EnhancedCell = ({ value: rawValue, sx = {}, className }) => {
-    const { t } = useTranslation();
-    if (!rawValue) {
-        return _jsx(TableCell, { style: { borderBottom: 'none' }, children: t('none') });
-    }
-    const values = (Array.isArray(rawValue) ? rawValue : [rawValue]).filter(_value => !!_value);
-    return (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 0.5, children: values.map((value, index) => (_jsx("span", { children: value }, value + index))) }), children: _jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
-                    { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
-                    ...(Array.isArray(sx) ? sx : [sx])
-                ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, children: value }, value + index))) }) }) }));
-};
-export default memo(EnhancedCell);