@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.263

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

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Edit, SavedSearch, Close } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Tooltip, IconButton, Stack, Typography, Alert } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { HitSearchContext } from "../../../app/providers/HitSearchProvider.js";
+import { ParameterContext } from "../../../app/providers/ParameterProvider.js";
+import { ViewContext } from "../../../app/providers/ViewProvider.js";
+import { has } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { memo, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+const ViewLink = () => {
+  const { t } = useTranslation();
+  const query = useContextSelector(ParameterContext, (ctx) => ctx.query);
+  const sort = useContextSelector(ParameterContext, (ctx) => ctx.sort);
+  const span = useContextSelector(ParameterContext, (ctx) => ctx.span);
+  const viewId = useContextSelector(HitSearchContext, (ctx) => ctx.viewId);
+  const viewsReady = useContextSelector(ViewContext, (ctx) => has(ctx.views, viewId));
+  const selectedView = useContextSelector(ViewContext, (ctx) => ctx.views[viewId]);
+  const viewUrl = useMemo(() => {
+    if (viewId) {
+      return `/views/${viewId}/edit`;
+    }
+    const keys = [];
+    if (query) {
+      keys.push(`query=${query}`);
+    }
+    if (sort) {
+      keys.push(`sort=${sort}`);
+    }
+    if (span) {
+      keys.push(`span=${span}`);
+    }
+    return keys.length > 0 ? `/views/create?${keys.join("&")}` : "/views/create";
+  }, [query, sort, span, viewId]);
+  const viewButton = useMemo(
+    () => /* @__PURE__ */ jsx(Tooltip, { title: viewId ? t("route.views.edit") : t("route.views.create"), children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        component: Link,
+        disabled: !viewId && !query || (span == null ? void 0 : span.endsWith("custom")),
+        to: viewUrl,
+        children: viewId ? /* @__PURE__ */ jsx(Edit, { fontSize: "small" }) : /* @__PURE__ */ jsx(SavedSearch, {})
+      }
+    ) }),
+    [query, span, t, viewId, viewUrl]
+  );
+  if (!viewId) {
+    return null;
+  }
+  return selectedView ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: selectedView.query, children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: { color: "text.primary" },
+        variant: "body1",
+        component: Link,
+        to: `/views/${selectedView.view_id}/edit`,
+        children: t(selectedView.title)
+      }
+    ) }),
+    viewButton
+  ] }) : viewsReady && /* @__PURE__ */ jsx(
+    Alert,
+    {
+      variant: "outlined",
+      severity: "error",
+      action: /* @__PURE__ */ jsx(IconButton, { size: "small", component: Link, to: "/search", children: /* @__PURE__ */ jsx(Close, { fontSize: "small" }) }),
+      children: t("view.notfound")
+    }
+  );
+};
+const ViewLink$1 = memo(ViewLink);
+export {
+  ViewLink$1 as default
+};

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

@@ -0,0 +1,8 @@
+declare const _default: import('react').NamedExoticComponent<{
+    open: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement;
+    addColumn: (key: string) => void;
+    columns: string[];
+}>;
+export default _default;

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

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Add, Check } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Popover, Stack, Autocomplete, TextField, IconButton, Divider, Grid, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import useMatchers from "../../../../app/hooks/useMatchers.js";
+import { FieldContext } from "../../../../app/providers/FieldProvider.js";
+import { HitSearchContext } from "../../../../app/providers/HitSearchProvider.js";
+import { uniq, has, sortBy } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { memo, useContext, useState, useMemo, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
+  const { t } = useTranslation();
+  const { hitFields } = useContext(FieldContext);
+  const response = useContextSelector(HitSearchContext, (ctx) => ctx.response);
+  const { getMatchingTemplate } = useMatchers();
+  const [columnToAdd, setColumnToAdd] = useState(null);
+  const options = useMemo(() => hitFields.map((field) => field.key), [hitFields]);
+  const [suggestions, setSuggestions] = useState([]);
+  useEffect(() => {
+    (async () => {
+      setSuggestions(
+        uniq(
+          (await Promise.all(
+            ((response == null ? void 0 : response.items) ?? []).map(
+              async (_hit) => {
+                var _a, _b;
+                return (has(_hit, "__template") ? (_a = _hit.__template) == null ? void 0 : _a.keys : (_b = await getMatchingTemplate(_hit)) == null ? void 0 : _b.keys) ?? [];
+              }
+            )
+          )).flat()
+        )
+      );
+    })();
+  }, [getMatchingTemplate, response == null ? void 0 : response.items]);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              sx: { flex: 1 },
+              size: "small",
+              options,
+              value: columnToAdd,
+              renderInput: (params) => /* @__PURE__ */ jsx(TextField, { fullWidth: true, placeholder: t("hit.fields"), ...params }),
+              onChange: (_ev, value) => setColumnToAdd(value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              disabled: !columnToAdd,
+              onClick: () => {
+                addColumn(columnToAdd);
+                setColumnToAdd(null);
+              },
+              children: /* @__PURE__ */ jsx(Add, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }),
+        /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: sortBy(
+          suggestions.map((key) => ({ key, used: columns.includes(key) })),
+          "used"
+        ).map(({ key, used }) => {
+          return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "small",
+              variant: "outlined",
+              color: used ? "success" : "default",
+              label: key,
+              icon: used ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Add, {}),
+              onClick: () => addColumn(key),
+              disabled: used
+            }
+          ) }, key);
+        }) })
+      ] })
+    }
+  );
+};
+const AddColumnModal$1 = memo(AddColumnModal);
+export {
+  AddColumnModal$1 as default
+};

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

@@ -0,0 +1,8 @@
+import { FC, 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,70 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useSortable } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@dnd-kit+sortable@8.0.0_@dnd-kit+core@6.3.1_react-dom@18.3.1_react@18.3.1__react@18.3.1__react@18.3.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@dnd-kit+utilities@3.2.2_react@18.3.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { Remove, DragIndicator } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, TableCell, Stack, Tooltip, IconButton, Box } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { ApiConfigContext } from "../../../../app/providers/ApiConfigProvider.js";
+import FlexOne from "../../../../elements/addons/layout/FlexOne.js";
+import { useContext } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
+  const theme = useTheme();
+  const { config } = useContext(ApiConfigContext);
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      ref: setNodeRef,
+      sx: {
+        borderRight: "thin solid",
+        borderRightColor: "divider",
+        py: 0.5,
+        position: "relative"
+      },
+      style: { transform: CSS.Translate.toString(transform), transition },
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          className: `col-${col.replaceAll(".", "-")}`,
+          direction: "row",
+          spacing: 1,
+          alignItems: "center",
+          sx: [{ minWidth: "220px" }, !!width ? { width, maxWidth: width } : { maxWidth: "300px" }],
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { title: config.indexes.hit[col].description, children: /* @__PURE__ */ jsx("span", { children: col }) }),
+            /* @__PURE__ */ jsx(FlexOne, {}),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                sx: { fontSize: "1rem" },
+                onClick: () => setColumns((_columns) => _columns.filter((_col) => _col !== col)),
+                children: /* @__PURE__ */ jsx(Remove, { fontSize: "inherit" })
+              }
+            ),
+            /* @__PURE__ */ jsx(DragIndicator, { fontSize: "small", sx: { cursor: "grab" }, ...attributes, ...listeners }),
+            /* @__PURE__ */ 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 {
+  ColumnHeader as default
+};

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

@@ -0,0 +1,8 @@
+import { SxProps } from '@mui/material';
+declare const _default: import('react').NamedExoticComponent<{
+    value: string;
+    sx?: SxProps;
+    className: string;
+    field: string;
+}>;
+export default _default;

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

@@ -0,0 +1,50 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { TableCell, Stack } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import PluginTypography from "../../../../elements/PluginTypography.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const EnhancedCell = ({
+  value: rawValue,
+  sx = {},
+  className,
+  field
+}) => {
+  const { t } = useTranslation();
+  if (!rawValue) {
+    return /* @__PURE__ */ jsx(TableCell, { style: { borderBottom: "none" }, children: t("none") });
+  }
+  const values = (Array.isArray(rawValue) ? rawValue : [rawValue]).filter((_value) => !!_value);
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      sx: { borderBottom: "none", borderRight: "thin solid", borderRightColor: "divider", fontSize: "0.8rem" },
+      children: /* @__PURE__ */ jsx(
+        Stack,
+        {
+          direction: "row",
+          className,
+          spacing: 0.5,
+          sx: [
+            { display: "flex", justifyContent: "start", width: "100%", overflow: "hidden" },
+            ...Array.isArray(sx) ? sx : [sx]
+          ],
+          children: values.map((value, index) => /* @__PURE__ */ jsx(
+            PluginTypography,
+            {
+              context: "table",
+              sx: { fontSize: "inherit", textOverflow: "ellipsis" },
+              value,
+              field,
+              children: value
+            },
+            value + index
+          ))
+        }
+      )
+    }
+  );
+};
+const EnhancedCell$1 = memo(EnhancedCell);
+export {
+  EnhancedCell$1 as default
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const HitGrid: FC;
+export default HitGrid;

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

@@ -0,0 +1,274 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, pointerWithin } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@dnd-kit+core@6.3.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@dnd-kit/core/dist/core.esm.js";
+import { sortableKeyboardCoordinates, arrayMove, SortableContext } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@dnd-kit+sortable@8.0.0_@dnd-kit+core@6.3.1_react-dom@18.3.1_react@18.3.1__react@18.3.1__react@18.3.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { List, TableChart, Add, FormatIndentIncrease, FormatIndentDecrease, Search, Info } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, Stack, Typography, LinearProgress, ToggleButtonGroup, ToggleButton, IconButton, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import useMatchers from "../../../../app/hooks/useMatchers.js";
+import { HitContext } from "../../../../app/providers/HitProvider.js";
+import { HitSearchContext } from "../../../../app/providers/HitSearchProvider.js";
+import { ParameterContext } from "../../../../app/providers/ParameterProvider.js";
+import { ViewContext } from "../../../../app/providers/ViewProvider.js";
+import FlexOne from "../../../../elements/addons/layout/FlexOne.js";
+import SearchTotal from "../../../../elements/addons/search/SearchTotal.js";
+import DevelopmentBanner from "../../../../elements/display/features/DevelopmentBanner.js";
+import DevelopmentIcon from "../../../../elements/display/features/DevelopmentIcon.js";
+import useHitSelection from "../../../../hooks/useHitSelection.js";
+import { useMyLocalStorageItem } from "../../../../hooks/useMyLocalStorage.js";
+import { useState, useRef, useMemo, useEffect, useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+import { StorageKey } from "../../../../../utils/constants.js";
+import HitContextMenu from "../HitContextMenu.js";
+import HitQuery from "../HitQuery.js";
+import QuerySettings from "../shared/QuerySettings.js";
+import ViewLink from "../ViewLink.js";
+import AddColumnModal from "./AddColumnModal.js";
+import ColumnHeader from "./ColumnHeader.js";
+import HitRow from "./HitRow.js";
+const HitGrid = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const { onClick } = useHitSelection();
+  const { getMatchingAnalytic } = useMatchers();
+  const search = useContextSelector(HitSearchContext, (ctx) => ctx.search);
+  const displayType = useContextSelector(HitSearchContext, (ctx) => ctx.displayType);
+  const setDisplayType = useContextSelector(HitSearchContext, (ctx) => ctx.setDisplayType);
+  const response = useContextSelector(HitSearchContext, (ctx) => ctx.response);
+  const searching = useContextSelector(HitSearchContext, (ctx) => ctx.searching);
+  const viewId = useContextSelector(HitSearchContext, (ctx) => ctx.viewId);
+  const selectedHits = useContextSelector(HitContext, (ctx) => ctx.selectedHits);
+  const query = useContextSelector(ParameterContext, (ctx) => ctx.query);
+  const selected = useContextSelector(ParameterContext, (ctx) => ctx.selected);
+  const selectedView = useContextSelector(ViewContext, (ctx) => ctx.views[viewId]);
+  const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
+  const [analyticIds, setAnalyticIds] = useState({});
+  const columnModalRef = useRef();
+  const [columns, setColumns] = useState([
+    "howler.outline.threat",
+    "howler.outline.target",
+    "howler.outline.indicators",
+    "howler.outline.summary"
+  ]);
+  const [columnWidths, setColumnWidths] = useState({});
+  const [showAddColumn, setShowAddColumn] = useState(false);
+  const resizingCol = useRef();
+  const showSelectBar = useMemo(() => {
+    var _a;
+    if (selectedHits.length > 1) {
+      return true;
+    }
+    if (selectedHits.length === 1 && selected && ((_a = selectedHits[0]) == null ? void 0 : _a.howler.id) !== selected) {
+      return true;
+    }
+    return false;
+  }, [selected, selectedHits]);
+  useEffect(() => {
+    response == null ? void 0 : response.items.forEach((hit) => {
+      if (!analyticIds[hit.howler.analytic]) {
+        getMatchingAnalytic(hit).then(
+          (_analytic) => setAnalyticIds((_analyticIds) => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id }))
+        );
+      }
+    });
+  }, [analyticIds, response]);
+  const onMouseMove = useCallback((event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const [col, element] = resizingCol.current;
+    const rect = element.getBoundingClientRect();
+    document.querySelectorAll(`.col-${col.replaceAll(".", "-")}`).forEach((el) => {
+      el.style.maxWidth = rect.width + event.movementX + "px";
+      el.style.width = rect.width + event.movementX + "px";
+    });
+  }, []);
+  const onMouseUp = useCallback(() => {
+    const [col, element] = resizingCol.current;
+    setColumnWidths((_widths) => ({
+      ..._widths,
+      [col]: element.style.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]);
+  const onMouseDown = useCallback(
+    (col, event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      resizingCol.current = [col, event.target.parentElement];
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    },
+    [onMouseMove, onMouseUp]
+  );
+  const onScroll = useCallback(
+    (event) => {
+      const target = event.target;
+      if (target.scrollHeight - target.scrollTop === target.clientHeight) {
+        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 /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: 1,
+      p: 2,
+      width: "100%",
+      sx: { overflow: "hidden", height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` },
+      children: [
+        /* @__PURE__ */ jsx(DevelopmentBanner, {}),
+        /* @__PURE__ */ jsx(ViewLink, {}),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: { color: "text.secondary", fontSize: "0.9em", fontStyle: "italic", mb: 0.5, textAlign: "left" },
+              variant: "body2",
+              children: t("hit.search.prompt")
+            }
+          ),
+          /* @__PURE__ */ jsx(DevelopmentIcon, {})
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+          /* @__PURE__ */ jsxs(Stack, { position: "relative", flex: 1, children: [
+            /* @__PURE__ */ jsx(HitQuery, { disabled: viewId && !selectedView, searching, triggerSearch: search, compact: true }),
+            searching && /* @__PURE__ */ jsx(
+              LinearProgress,
+              {
+                sx: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  borderBottomLeftRadius: theme.shape.borderRadius,
+                  borderBottomRightRadius: theme.shape.borderRadius
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [
+            /* @__PURE__ */ jsx(ToggleButton, { value: "list", children: /* @__PURE__ */ jsx(List, {}) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "grid", children: /* @__PURE__ */ jsx(TableChart, {}) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { "& > *": { flex: 1 } }, children: [
+          /* @__PURE__ */ jsx(QuerySettings, {}),
+          response && /* @__PURE__ */ jsx(
+            SearchTotal,
+            {
+              sx: { alignSelf: "center" },
+              color: "text.secondary",
+              offset: response.offset,
+              pageLength: response.rows,
+              total: response.total
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+            /* @__PURE__ */ jsx(FlexOne, {}),
+            /* @__PURE__ */ jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: /* @__PURE__ */ jsx(Add, { fontSize: "small" }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            AddColumnModal,
+            {
+              anchorEl: columnModalRef.current,
+              open: showAddColumn,
+              onClose: () => setShowAddColumn(false),
+              columns,
+              addColumn: (key) => setColumns((_columns) => [..._columns, key])
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            component: Paper,
+            spacing: 1,
+            width: "100%",
+            height: "100%",
+            sx: { overflow: "auto", flex: 1 },
+            onScroll,
+            children: [
+              /* @__PURE__ */ jsxs(Table, { sx: { "& td,th": { px: 1, py: 0.25, whiteSpace: "nowrap" } }, children: [
+                /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                  /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      sx: {
+                        borderRight: "thin solid",
+                        borderRightColor: "divider"
+                      },
+                      children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? /* @__PURE__ */ jsx(FormatIndentIncrease, { fontSize: "small" }) : /* @__PURE__ */ jsx(FormatIndentDecrease, { fontSize: "small" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: columns, children: columns.map((col) => /* @__PURE__ */ jsx(
+                    ColumnHeader,
+                    {
+                      col,
+                      width: columnWidths[col],
+                      onMouseDown,
+                      setColumns
+                    },
+                    col
+                  )) }) }),
+                  /* @__PURE__ */ jsx(TableCell, { sx: { width: "100%" } })
+                ] }) }),
+                /* @__PURE__ */ jsxs(HitContextMenu, { Component: TableBody, getSelectedId, children: [
+                  response == null ? void 0 : response.items.map((hit) => /* @__PURE__ */ jsx(
+                    HitRow,
+                    {
+                      hit,
+                      analyticIds,
+                      columns,
+                      columnWidths,
+                      collapseMainColumn,
+                      onClick
+                    },
+                    hit.howler.id
+                  )),
+                  /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + 2, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: /* @__PURE__ */ jsx(IconButton, { onClick: () => search(query, true), children: /* @__PURE__ */ jsx(Search, {}) }) }) }) })
+                ] })
+              ] }),
+              ((response == null ? void 0 : response.total) ?? 0) < 1 && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: /* @__PURE__ */ jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [
+                /* @__PURE__ */ jsx(Info, { fontSize: "inherit", sx: { color: "text.secondary", mr: 1 } }),
+                /* @__PURE__ */ jsx("span", { children: t("app.list.empty") })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HitGrid as default
+};

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

@@ -0,0 +1,10 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import('react').NamedExoticComponent<{
+    hit: Hit;
+    analyticIds: Record<string, string>;
+    columns: string[];
+    columnWidths: Record<string, string>;
+    collapseMainColumn: boolean;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+}>;
+export default _default;