@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/data/DataTable.cjs

@@ -13,11 +13,13 @@ const modalStack = require("../overlay/modalStack.cjs");
 const FilterBar = require("../components/FilterBar.cjs");
 const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const dataTableUtils = require("./data-table-utils.cjs");
+const dataTableServerFilters = require("./data-table-server-filters.cjs");
 const Icon = require("./Icon.cjs");
 const SortableHeader = require("./SortableHeader.cjs");
 const Timestamp = require("./cells/Timestamp.cjs");
 const timestampFormat = require("./cells/timestamp-format.cjs");
 const TagList = require("./cells/TagList.cjs");
+const CellFilterActions = require("./cells/CellFilterActions.cjs");
 const tagUtils = require("./cells/tag-utils.cjs");
 const StatusDot = require("./cells/StatusDot.cjs");
 const statusMapping = require("./cells/status-mapping.cjs");
@@ -69,12 +71,13 @@ function DataTableInner({
   loading: loading$1 = false,
   loadingMessage = "Loading results…",
   loadingRowCount = 8,
-  emptyMessage: _emptyMessage = "No data",
+  emptyMessage = "No data",
   clientReveal,
   className,
   scrollContainerClassName,
   autoFilter = false,
-  showGlobalFilter = true,
+  showGlobalFilter,
+  manualFilter = false,
   globalFilter,
   onGlobalFilterChange,
   globalFilterPlaceholder = "Search all columns…",
@@ -86,6 +89,8 @@ function DataTableInner({
   externalSearch,
   externalTimeRange,
   externalFilters,
+  cellFilters,
+  onCellFilterChange,
   pagination,
   getRowId,
   rowSelection,
@@ -284,14 +289,14 @@ function DataTableInner({
   const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl || hasMenuActions;
   const densityOverride = densityControlled ? density : localDensityOverride;
   const timeRangeColumn = react.useMemo(() => {
-    if (filterBarProps == null ? void 0 : filterBarProps.timeRange) return null;
+    if (manualFilter || externalTimeRange || (filterBarProps == null ? void 0 : filterBarProps.timeRange)) return null;
     return effectiveColumns.find(
       (column) => {
         var _a;
         return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
       }
     ) ?? null;
-  }, [effectiveColumns, filterBarProps == null ? void 0 : filterBarProps.timeRange]);
+  }, [effectiveColumns, externalTimeRange, filterBarProps == null ? void 0 : filterBarProps.timeRange, manualFilter]);
   const filterableColumns = react.useMemo(
     () => effectiveColumns.filter((column) => {
       if (column.filterable === false) return false;
@@ -430,10 +435,23 @@ function DataTableInner({
     }),
     [generatedFilters, multiFilters, numberFilters, textFilters]
   );
-  const nativeFilterByColumn = react.useMemo(
-    () => new Map(nativeFilters.map((filter) => [filter.key, filter])),
-    [nativeFilters]
+  const serverFilterByKey = react.useMemo(
+    () => new Map((externalFilters ?? []).map((filter) => [filter.key, filter])),
+    [externalFilters]
   );
+  const headerFilterByColumn = react.useMemo(() => {
+    const bound = /* @__PURE__ */ new Map();
+    for (const column of effectiveColumns) {
+      const native = nativeFilters.find((filter) => filter.key === column.key);
+      if (native) {
+        bound.set(column.key, native);
+        continue;
+      }
+      const server = column.filterKey ? serverFilterByKey.get(column.filterKey) : void 0;
+      if (server) bound.set(column.key, server);
+    }
+    return bound;
+  }, [effectiveColumns, nativeFilters, serverFilterByKey]);
   const hasCustomFilterBarContent = Boolean(
     (filterBarProps == null ? void 0 : filterBarProps.leading) || (filterBarProps == null ? void 0 : filterBarProps.children) || (filterBarProps == null ? void 0 : filterBarProps.trailing) || (filterBarProps == null ? void 0 : filterBarProps.timeRange) || (filterBarProps == null ? void 0 : filterBarProps.dateRange)
   );
@@ -460,7 +478,15 @@ function DataTableInner({
     }
     return next;
   }, [timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
-  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0) || !!autoTimeRange || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
+  const resolvedShowGlobalFilter = showGlobalFilter ?? autoFilter;
+  dataTableServerFilters.assertDataTableFilterProps({
+    autoFilter,
+    manualFilter,
+    showGlobalFilter: resolvedShowGlobalFilter,
+    globalFilterControlled: globalFilter !== void 0 || onGlobalFilterChange !== void 0,
+    hasExternalSearch: externalSearch !== void 0
+  });
+  const showFilterBar = resolvedShowGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
@@ -474,8 +500,9 @@ function DataTableInner({
       }
     )
   ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
-  const showHeaderFilterControls = showHeaderFilters && (autoFilter || !!autoTimeRange);
+  const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!autoTimeRange);
   const filteredRows = react.useMemo(() => {
+    if (manualFilter) return rows;
     const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
     const now = /* @__PURE__ */ new Date();
     const rangeFromDate = timeRangeColumn ? timestampFormat.resolveDateMath(timeRangeFilter.from, now) : null;
@@ -536,6 +563,7 @@ function DataTableInner({
     effectiveGlobalFilter,
     filterableColumns,
     generatedFilters,
+    manualFilter,
     multiFilters,
     numberFilters,
     rows,
@@ -562,6 +590,7 @@ function DataTableInner({
     ...onSortChange ? { onSortChange } : {},
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
+  const pageLocalSort = !!pagination && !onSortChange;
   const revealEnabled = !!clientReveal && !pagination;
   const revealBatchSize = (clientReveal == null ? void 0 : clientReveal.batchSize) ?? 0;
   const [visibleCount, setVisibleCount] = react.useState(revealBatchSize);
@@ -800,7 +829,7 @@ function DataTableInner({
           FilterBar.FilterBar,
           {
             ...filterBarProps,
-            ...externalSearch ? { search: externalSearch } : autoFilter && showGlobalFilter ? {
+            ...externalSearch ? { search: externalSearch } : resolvedShowGlobalFilter ? {
               search: {
                 value: effectiveGlobalFilter,
                 onChange: setEffectiveGlobalFilter,
@@ -818,7 +847,7 @@ function DataTableInner({
             "div",
             {
               className: utils.cn(
-                "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border",
+                "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border bg-background",
                 scrollContainerClassName
               ),
               "aria-busy": loading$1 && error == null || void 0,
@@ -877,7 +906,15 @@ function DataTableInner({
                               resizableColumns && column.resizable !== false && "pr-2"
                             ),
                             children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.label }) : /* @__PURE__ */ jsxRuntime.jsx(
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: column.sortable === false || pageLocalSort ? /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  ...pageLocalSort && column.sortable !== false ? {
+                                    title: "Sorting is served by the query while this table is paged by the server"
+                                  } : {},
+                                  children: column.label
+                                }
+                              ) : /* @__PURE__ */ jsxRuntime.jsx(
                                 SortableHeader.SortableHeader,
                                 {
                                   active: (sort == null ? void 0 : sort.key) === column.key,
@@ -887,12 +924,12 @@ function DataTableInner({
                                   children: column.label
                                 }
                               ) }),
-                              showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
+                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
                                 HeaderFilterButton,
                                 {
                                   column,
-                                  active: nativeFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
-                                    nativeFilterByColumn.get(column.key)
+                                  active: headerFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
+                                    headerFilterByColumn.get(column.key)
                                   ) : Boolean(
                                     timeRangeFilter.from || timeRangeFilter.to
                                   ),
@@ -944,7 +981,14 @@ function DataTableInner({
                       message: loadingMessage,
                       selection: !!rowSelection
                     }
-                  ) : rowStream.map((item) => {
+                  ) : filteredRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                      className: "px-4 py-10 text-center text-sm text-muted-foreground",
+                      children: emptyMessage
+                    }
+                  ) }) : rowStream.map((item) => {
                     var _a;
                     if (item.kind === "group") {
                       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1045,11 +1089,40 @@ function DataTableInner({
                               }
                             ) : null,
                             visibleColumns.map((column, index) => {
+                              var _a2;
                               const rawValue = dataTableUtils.resolveColumnValue(
                                 record.row,
                                 column
                               );
                               let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                              const serverFilterValue = resolveServerFilterValue(
+                                rawValue,
+                                record.row,
+                                column
+                              );
+                              const serverFilterDisplayValue = resolveCellFilterDisplayValue(
+                                rawValue,
+                                record.row,
+                                column
+                              );
+                              const hasCellFilterActions = !!column.filterKey && !!onCellFilterChange && serverFilterValue !== void 0;
+                              if (column.filterKey && onCellFilterChange && serverFilterValue !== void 0) {
+                                const filterKey = column.filterKey;
+                                content = /* @__PURE__ */ jsxRuntime.jsx(
+                                  CellFilterActions.CellFilterActions,
+                                  {
+                                    value: serverFilterValue,
+                                    ...serverFilterDisplayValue !== void 0 ? { displayValue: serverFilterDisplayValue } : {},
+                                    mode: (_a2 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a2[serverFilterValue],
+                                    onChange: (mode) => onCellFilterChange({
+                                      key: filterKey,
+                                      value: serverFilterValue,
+                                      mode
+                                    }),
+                                    children: content
+                                  }
+                                );
+                              }
                               if (column.kind === "tags" && filterActionsByColumn[column.key]) {
                                 content = /* @__PURE__ */ jsxRuntime.jsx(
                                   TagList.TagActionsProvider,
@@ -1077,10 +1150,14 @@ function DataTableInner({
                                         // overlay stretches across the whole (relative)
                                         // row: right/middle-click give native "open in
                                         // new tab", plain left-click routes client-side.
+                                        // The overlay paints over the cell, so a cell
+                                        // with filter actions lifts them above it —
+                                        // otherwise the link swallows the hover that
+                                        // reveals the include/exclude buttons.
                                         renderLink({
                                           to: href,
                                           className: "hover:underline after:absolute after:inset-0 after:content-['']",
-                                          children: content
+                                          children: hasCellFilterActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
                                         })
                                       ) : content
                                     }
@@ -1172,7 +1249,7 @@ function DataTableInner({
         headerFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(
           HeaderFilterMenu,
           {
-            filter: nativeFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
+            filter: headerFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
             ...autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === headerFilterMenu.columnKey ? { timeRange: autoTimeRange } : {},
             anchor: headerFilterMenu,
             onClose: () => setHeaderFilterMenu(null)
@@ -1182,28 +1259,81 @@ function DataTableInner({
     }
   ) });
 }
+function resolveServerFilterValue(rawValue, row, column) {
+  const value = column.serverFilterValue ? column.serverFilterValue(rawValue, row) : rawValue;
+  switch (typeof value) {
+    case "string":
+      return value || void 0;
+    case "number":
+    case "boolean":
+      return String(value);
+    default:
+      return void 0;
+  }
+}
+function resolveCellFilterDisplayValue(rawValue, row, column) {
+  const value = column.serverFilterLabel ? column.serverFilterLabel(rawValue, row) : rawValue;
+  switch (typeof value) {
+    case "string":
+      return value || void 0;
+    case "number":
+    case "boolean":
+      return String(value);
+    default:
+      return void 0;
+  }
+}
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50, 100, 200];
+function useCursorTrail(cursor) {
+  const [trail, setTrail] = react.useState([]);
+  const current = cursor == null ? void 0 : cursor.current;
+  const index = current == null ? 0 : Math.max(trail.indexOf(current) + 1, 1);
+  return {
+    page: index,
+    push: (next) => setTrail((previous) => [...previous.slice(0, index), next]),
+    previous: () => index <= 1 ? void 0 : trail[index - 2]
+  };
+}
 function DataTablePaginationFooter({
   pagination,
   visibleRowCount,
   loading: loading2,
   loadingMessage
 }) {
-  const { page, pageSize, total, onPageChange, onPageSizeChange } = pagination;
+  const { page, pageSize, total, totalRelation, cursor, onPageChange, onPageSizeChange } = pagination;
   const options = Array.from(
     /* @__PURE__ */ new Set([
       ...pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS,
       pageSize
     ])
   ).sort((a, b) => a - b);
-  const safePage = Math.max(0, page);
-  const totalPages = total != null && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
+  const trail = useCursorTrail(cursor);
+  const safePage = cursor ? trail.page : Math.max(0, page);
+  const approximate = totalRelation === "gte";
+  const totalPages = total != null && pageSize > 0 && !approximate && !cursor ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
   const atFirst = safePage === 0;
-  const atLast = totalPages != null ? safePage >= totalPages - 1 : visibleRowCount < pageSize;
+  const atLast = cursor ? cursor.next == null : pagination.hasMore != null ? !pagination.hasMore : totalPages != null ? safePage >= totalPages - 1 : visibleRowCount < pageSize;
   const hasVisibleRows = visibleRowCount > 0;
   const rangeStart = total === 0 || !hasVisibleRows ? 0 : safePage * pageSize + 1;
-  const rangeEnd = total != null && hasVisibleRows ? Math.min(total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
-  const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
+  const rangeEnd = total != null && hasVisibleRows ? Math.min(approximate ? Infinity : total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
+  const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${approximate ? `~${total}+` : total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
+  const steppable = cursor != null || onPageChange != null;
+  const goPrevious = () => {
+    if (!cursor) {
+      onPageChange == null ? void 0 : onPageChange(Math.max(0, safePage - 1));
+      return;
+    }
+    cursor.onCursorChange(trail.previous());
+  };
+  const goNext = () => {
+    if (!cursor) {
+      onPageChange == null ? void 0 : onPageChange(safePage + 1);
+      return;
+    }
+    if (cursor.next == null) return;
+    trail.push(cursor.next);
+    cursor.onCursorChange(cursor.next);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 shrink-0 flex-row items-stretch gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", children: loading2 ? loadingMessage : rangeLabel }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap  items-center gap-2 sm:gap-3", children: [
@@ -1219,35 +1349,37 @@ function DataTablePaginationFooter({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-20 text-center", children: [
-        "Page ",
-        safePage + 1,
-        totalPages != null ? ` of ${totalPages}` : ""
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-label": "Previous page",
-          title: "Previous page",
-          disabled: atFirst,
-          onClick: () => onPageChange(Math.max(0, safePage - 1)),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowLeft.UiArrowLeft })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-label": "Next page",
-          title: "Next page",
-          disabled: atLast,
-          onClick: () => onPageChange(safePage + 1),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowRight.UiArrowRight })
-        }
-      )
+      steppable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-20 text-center", children: [
+          "Page ",
+          safePage + 1,
+          totalPages != null ? ` of ${totalPages}` : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-label": "Previous page",
+            title: "Previous page",
+            disabled: atFirst,
+            onClick: goPrevious,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowLeft.UiArrowLeft })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-label": "Next page",
+            title: "Next page",
+            disabled: atLast,
+            onClick: goNext,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowRight.UiArrowRight })
+          }
+        )
+      ] }) : null
     ] })
   ] });
 }