@flanksource/clicky-ui 0.2.13 → 0.2.15

package/dist/data/DataTable.cjs

@@ -3,15 +3,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const useSort = require("../hooks/use-sort.cjs");
-const useDensity = require("../hooks/use-density.cjs");
+const densityProvider = require("../hooks/density-provider.cjs");
 const useTheme = require("../hooks/use-theme.cjs");
 const utils = require("../lib/utils.cjs");
 const Modal = require("../overlay/Modal.cjs");
 const FilterBar = require("../components/FilterBar.cjs");
+const filterBarUtils = require("../components/filter-bar-utils.cjs");
+const dataTableUtils = require("./data-table-utils.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 tagUtils = require("./cells/tag-utils.cjs");
 const StatusDot = require("./cells/StatusDot.cjs");
 const statusMapping = require("./cells/status-mapping.cjs");
 const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
@@ -59,7 +63,9 @@ function DataTableInner({
   loadingMessage = "Loading results…",
   loadingRowCount = 8,
   emptyMessage: _emptyMessage = "No data",
+  clientReveal,
   className,
+  scrollContainerClassName,
   autoFilter = false,
   showGlobalFilter = true,
   globalFilter,
@@ -228,12 +234,12 @@ function DataTableInner({
       if (column.kind !== "timestamp") continue;
       const dates = [];
       for (const row of data) {
-        const raw = resolvePath(row, column.key);
-        const parsed = Timestamp.parseTimestamp(raw);
+        const raw = dataTableUtils.resolveColumnValue(row, column);
+        const parsed = timestampFormat.parseTimestamp(raw);
         if (parsed) dates.push(parsed);
       }
-      const dataFormat = Timestamp.chooseTimestampFormat(dates);
-      out[column.key] = Timestamp.modeToFormat(
+      const dataFormat = timestampFormat.chooseTimestampFormat(dates);
+      out[column.key] = timestampFormat.modeToFormat(
         ((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto",
         dataFormat
       );
@@ -298,7 +304,7 @@ function DataTableInner({
       }
       const values = /* @__PURE__ */ new Set();
       for (const record of rows) {
-        for (const token of getFilterTokens(record.row, column)) {
+        for (const token of dataTableUtils.getFilterTokens(record.row, column)) {
           if (token) values.add(token);
         }
       }
@@ -333,7 +339,7 @@ function DataTableInner({
       const columnKey = filter.column.key;
       const current = multiFilters[columnKey] ?? {};
       const handler = (next) => setMultiFilters((state) => updateFilterRecord(state, columnKey, next));
-      out[columnKey] = TagList.tagActionsFromRecord(current, handler);
+      out[columnKey] = tagUtils.tagActionsFromRecord(current, handler);
     }
     return out;
   }, [generatedFilters, multiFilters]);
@@ -461,26 +467,26 @@ function DataTableInner({
   const filteredRows = react.useMemo(() => {
     const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
     const now = /* @__PURE__ */ new Date();
-    const rangeFromDate = timeRangeColumn ? Timestamp.resolveDateMath(timeRangeFilter.from, now) : null;
-    const rangeToDate = timeRangeColumn ? Timestamp.resolveDateMath(timeRangeFilter.to, now) : null;
+    const rangeFromDate = timeRangeColumn ? timestampFormat.resolveDateMath(timeRangeFilter.from, now) : null;
+    const rangeToDate = timeRangeColumn ? timestampFormat.resolveDateMath(timeRangeFilter.to, now) : null;
     const rangeColumnKey = timeRangeColumn == null ? void 0 : timeRangeColumn.key;
     return rows.filter(({ row }) => {
       if (rangeColumnKey && (rangeFromDate || rangeToDate)) {
-        const raw = resolvePath(row, rangeColumnKey);
-        const ts = Timestamp.parseTimestamp(raw);
+        const raw = dataTableUtils.resolvePath(row, rangeColumnKey);
+        const ts = timestampFormat.parseTimestamp(raw);
         if (!ts) return false;
         if (rangeFromDate && ts.getTime() < rangeFromDate.getTime())
           return false;
         if (rangeToDate && ts.getTime() > rangeToDate.getTime()) return false;
       }
       if (globalNeedle) {
-        const haystack = filterableColumns.flatMap((column) => getFilterTokens(row, column)).join(" ").toLowerCase();
+        const haystack = filterableColumns.flatMap((column) => dataTableUtils.getFilterTokens(row, column)).join(" ").toLowerCase();
         if (!haystack.includes(globalNeedle)) {
           return false;
         }
       }
       for (const filter of generatedFilters) {
-        const tokens = getFilterTokens(row, filter.column);
+        const tokens = dataTableUtils.getFilterTokens(row, filter.column);
         if (filter.kind === "text") {
           const needle = (textFilters[filter.column.key] ?? "").trim().toLowerCase();
           if (needle && !tokens.some((token) => token.toLowerCase().includes(needle))) {
@@ -541,6 +547,34 @@ function DataTableInner({
     resolvers: sortResolvers,
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
+  const revealEnabled = !!clientReveal && !pagination;
+  const revealBatchSize = (clientReveal == null ? void 0 : clientReveal.batchSize) ?? 0;
+  const [visibleCount, setVisibleCount] = react.useState(revealBatchSize);
+  const revealObserver = react.useRef(null);
+  react.useEffect(() => {
+    if (revealEnabled) setVisibleCount(revealBatchSize);
+  }, [revealEnabled, revealBatchSize, sorted]);
+  const visibleSorted = revealEnabled ? sorted.slice(0, visibleCount) : sorted;
+  const hasMoreRows = revealEnabled && visibleCount < sorted.length;
+  const revealSentinelRef = react.useCallback(
+    (node) => {
+      if (revealObserver.current) revealObserver.current.disconnect();
+      if (!node || !hasMoreRows) return;
+      revealObserver.current = new IntersectionObserver(
+        (entries) => {
+          var _a;
+          if ((_a = entries[0]) == null ? void 0 : _a.isIntersecting) {
+            setVisibleCount(
+              (current) => Math.min(current + revealBatchSize, sorted.length)
+            );
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      revealObserver.current.observe(node);
+    },
+    [hasMoreRows, revealBatchSize, sorted.length]
+  );
   const startColumnResize = (event, column) => {
     event.preventDefault();
     event.stopPropagation();
@@ -611,7 +645,7 @@ function DataTableInner({
     event.stopPropagation();
     setHeaderFilterMenu(menuStateFromTrigger(event, columnKey));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(useDensity.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(densityProvider.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: utils.cn("flex min-h-0 flex-col gap-3", className),
@@ -636,7 +670,10 @@ function DataTableInner({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "min-h-0 flex-1 overflow-auto rounded-md border border-border",
+            className: utils.cn(
+              "overflow-auto rounded-md border border-border",
+              scrollContainerClassName ?? "min-h-0 flex-1"
+            ),
             "aria-busy": loading || void 0,
             children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -682,7 +719,7 @@ function DataTableInner({
                             HeaderFilterButton,
                             {
                               column,
-                              active: nativeFilterByColumn.has(column.key) ? FilterBar.isFilterBarFilterActive(
+                              active: nativeFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
                                 nativeFilterByColumn.get(column.key)
                               ) : Boolean(
                                 timeRangeFilter.from || timeRangeFilter.to
@@ -719,92 +756,102 @@ function DataTableInner({
                 },
                 column.key
               )) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-                DataTableLoadingRows,
-                {
-                  columns: visibleColumns,
-                  rowCount: loadingRowCount,
-                  message: loadingMessage
-                }
-              ) : sorted.map((record) => {
-                const href = getRowHref == null ? void 0 : getRowHref(record.row);
-                const expanded = expandedRows[record.id] ?? false;
-                const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
-                  columns: effectiveColumns,
-                  visibleColumns,
-                  filterActionsByColumn
-                })) ?? null;
-                const expandable = expandedContent !== null;
-                const expandsInline = expandable && detailStyle === "row";
-                const opensDialog = expandable && detailStyle === "dialog";
-                const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-                const clickable = !!href || rowClickEnabled || expandable;
-                return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "tr",
-                    {
-                      className: utils.cn(
-                        "border-b border-border/60 align-top",
-                        clickable && "cursor-pointer hover:bg-accent/40"
-                      ),
-                      onClick: () => {
-                        if (expandsInline) {
-                          setExpandedRows((current) => ({
-                            ...current,
-                            [record.id]: !current[record.id]
-                          }));
-                        }
-                        if (opensDialog) {
-                          setDetailRow(record);
-                        }
-                        if (rowClickEnabled) {
-                          onRowClick == null ? void 0 : onRowClick(record.row);
-                        }
-                      },
-                      children: visibleColumns.map((column, index) => {
-                        const rawValue = resolvePath(record.row, column.key);
-                        let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
-                        if (column.kind === "tags" && filterActionsByColumn[column.key]) {
-                          content = /* @__PURE__ */ jsxRuntime.jsx(
-                            TagList.TagActionsProvider,
-                            {
-                              value: filterActionsByColumn[column.key],
-                              children: content
-                            }
-                          );
-                        }
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          "td",
-                          {
-                            className: utils.cn(
-                              DATA_TABLE_CELL_DENSITY_CLASS,
-                              alignmentClass(column.align),
-                              column.cellClassName
-                            ),
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              CellContent,
+              /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+                loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DataTableLoadingRows,
+                  {
+                    columns: visibleColumns,
+                    rowCount: loadingRowCount,
+                    message: loadingMessage
+                  }
+                ) : visibleSorted.map((record) => {
+                  const href = getRowHref == null ? void 0 : getRowHref(record.row);
+                  const expanded = expandedRows[record.id] ?? false;
+                  const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
+                    columns: effectiveColumns,
+                    visibleColumns,
+                    filterActionsByColumn
+                  })) ?? null;
+                  const expandable = expandedContent !== null;
+                  const expandsInline = expandable && detailStyle === "row";
+                  const opensDialog = expandable && detailStyle === "dialog";
+                  const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
+                  const clickable = !!href || rowClickEnabled || expandable;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "tr",
+                      {
+                        className: utils.cn(
+                          "border-b border-border/60 align-top",
+                          clickable && "cursor-pointer hover:bg-accent/40"
+                        ),
+                        onClick: () => {
+                          if (expandsInline) {
+                            setExpandedRows((current) => ({
+                              ...current,
+                              [record.id]: !current[record.id]
+                            }));
+                          }
+                          if (opensDialog) {
+                            setDetailRow(record);
+                          }
+                          if (rowClickEnabled) {
+                            onRowClick == null ? void 0 : onRowClick(record.row);
+                          }
+                        },
+                        children: visibleColumns.map((column, index) => {
+                          const rawValue = dataTableUtils.resolveColumnValue(record.row, column);
+                          let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                          if (column.kind === "tags" && filterActionsByColumn[column.key]) {
+                            content = /* @__PURE__ */ jsxRuntime.jsx(
+                              TagList.TagActionsProvider,
                               {
-                                column,
-                                ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
-                                children: href && index === 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: "hover:underline", children: content }) : content
+                                value: filterActionsByColumn[column.key],
+                                children: content
                               }
-                            )
-                          },
-                          column.key
-                        );
-                      })
-                    }
-                  ),
-                  expandsInline && expanded && expandedContent && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "td",
-                    {
-                      colSpan: visibleColumns.length,
-                      className: "bg-muted/40 p-density-3",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent })
-                    }
-                  ) })
-                ] }, record.id);
-              }) })
+                            );
+                          }
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              className: utils.cn(
+                                DATA_TABLE_CELL_DENSITY_CLASS,
+                                alignmentClass(column.align),
+                                column.cellClassName
+                              ),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                CellContent,
+                                {
+                                  column,
+                                  ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
+                                  children: href && index === 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: "hover:underline", children: content }) : content
+                                }
+                              )
+                            },
+                            column.key
+                          );
+                        })
+                      }
+                    ),
+                    expandsInline && expanded && expandedContent && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "td",
+                      {
+                        colSpan: visibleColumns.length,
+                        className: "bg-muted/40 p-density-3",
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent })
+                      }
+                    ) })
+                  ] }, record.id);
+                }),
+                hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    colSpan: visibleColumns.length,
+                    className: "p-density-2 text-center text-xs text-muted-foreground",
+                    children: "Loading more…"
+                  }
+                ) })
+              ] })
             ] })
           }
         ),
@@ -1041,8 +1088,8 @@ function HeaderFilterMenu({
               {
                 type: "button",
                 className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
-                onClick: () => FilterBar.clearFilterBarFilter(filter),
-                disabled: !FilterBar.isFilterBarFilterActive(filter),
+                onClick: () => filterBarUtils.clearFilterBarFilter(filter),
+                disabled: !filterBarUtils.isFilterBarFilterActive(filter),
                 children: "Clear all"
               }
             ),
@@ -1395,27 +1442,11 @@ function CellContent({
   );
 }
 function getSortValue(row, column) {
-  const rawValue = resolvePath(row, column.key);
+  const rawValue = dataTableUtils.resolveColumnValue(row, column);
   return column.sortValue ? column.sortValue(rawValue, row) : rawValue;
 }
-function getFilterCandidate(row, column) {
-  const rawValue = resolvePath(row, column.key);
-  return column.filterValue ? column.filterValue(rawValue, row) : rawValue;
-}
-function getFilterTokens(row, column) {
-  return normalizeTokens(getFilterCandidate(row, column));
-}
 function getFilterNumbers(row, column) {
-  return normalizeNumbers(getFilterCandidate(row, column));
-}
-function normalizeTokens(value) {
-  if (Array.isArray(value)) {
-    return value.flatMap((item) => normalizeTokens(item)).filter(Boolean);
-  }
-  if (value == null) return [];
-  if (typeof value === "object") return [JSON.stringify(value)];
-  const token = String(value).trim();
-  return token ? [token] : [];
+  return normalizeNumbers(dataTableUtils.getFilterCandidate(row, column));
 }
 function normalizeNumbers(value) {
   if (Array.isArray(value)) {
@@ -1491,14 +1522,6 @@ function pruneFilterState(state, filters, kind, isEmpty) {
     )
   );
 }
-function resolvePath(obj, path) {
-  return path.split(".").reduce((current, key) => {
-    if (current && typeof current === "object") {
-      return current[key];
-    }
-    return void 0;
-  }, obj);
-}
 function formatCell(value) {
   if (value == null || value === "") {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
@@ -1510,7 +1533,7 @@ function formatCell(value) {
 function groupTagOptions(options, separator) {
   const byKey = /* @__PURE__ */ new Map();
   for (const option of options) {
-    const { key } = TagList.splitTagToken(option.value, separator);
+    const { key } = tagUtils.splitTagToken(option.value, separator);
     const list = byKey.get(key) ?? [];
     list.push(option);
     byKey.set(key, list);
@@ -1525,10 +1548,10 @@ function groupTagOptions(options, separator) {
     options: groupOptions
   }));
 }
-function applyKindDefaults(column, timestampFormat) {
+function applyKindDefaults(column, timestampFormat$1) {
   if (!column.kind) return column;
   if (column.kind === "timestamp") {
-    const format = timestampFormat ?? "iso";
+    const format = timestampFormat$1 ?? "iso";
     return {
       ...column,
       render: column.render ?? ((value) => {
@@ -1544,10 +1567,10 @@ function applyKindDefaults(column, timestampFormat) {
       }),
       sortValue: column.sortValue ?? ((value) => {
         var _a;
-        return ((_a = Timestamp.parseTimestamp(value)) == null ? void 0 : _a.getTime()) ?? null;
+        return ((_a = timestampFormat.parseTimestamp(value)) == null ? void 0 : _a.getTime()) ?? null;
       }),
       filterValue: column.filterValue ?? ((value) => {
-        const parsed = Timestamp.parseTimestamp(value);
+        const parsed = timestampFormat.parseTimestamp(value);
         return parsed ? parsed.toISOString() : "";
       })
     };
@@ -1560,12 +1583,12 @@ function applyKindDefaults(column, timestampFormat) {
       render: column.render ?? ((value) => /* @__PURE__ */ jsxRuntime.jsx(
         TagList.TagList,
         {
-          tags: TagList.normalizeTags(value, separator),
+          tags: tagUtils.normalizeTags(value, separator),
           maxVisible: (opts == null ? void 0 : opts.maxVisible) ?? 3
         }
       )),
-      filterValue: column.filterValue ?? ((value) => TagList.tagFilterTokens(value, separator)),
-      sortValue: column.sortValue ?? ((value) => TagList.tagFilterTokens(value, separator).length)
+      filterValue: column.filterValue ?? ((value) => tagUtils.tagFilterTokens(value, separator)),
+      sortValue: column.sortValue ?? ((value) => tagUtils.tagFilterTokens(value, separator).length)
     };
   }
   if (column.kind === "status") {
@@ -1597,12 +1620,9 @@ function applyKindDefaults(column, timestampFormat) {
   }
   return column;
 }
-function prettifyKey(key) {
-  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()).trim();
-}
 function labelText(column) {
   if (typeof column.label === "string") return column.label;
-  return prettifyKey(column.key.split(".").at(-1) ?? column.key);
+  return dataTableUtils.prettifyKey(column.key.split(".").at(-1) ?? column.key);
 }
 function isColumnHideable(column) {
   return column.hideable !== false;
@@ -1797,7 +1817,7 @@ function clampColumnWidth(column, width) {
 }
 function getNumericFilterBounds(rows, column) {
   const values = rows.flatMap(
-    (record) => collectFilterValues(getFilterCandidate(record.row, column))
+    (record) => collectFilterValues(dataTableUtils.getFilterCandidate(record.row, column))
   );
   const populated = values.filter(hasFilterValue);
   const numericValues = populated.map((value) => parseNumberInput(value)).filter((value) => value != null);
@@ -1866,19 +1886,6 @@ function cellContentClassName(column, width) {
     return utils.cn(base, "min-w-0 whitespace-nowrap", !resized && "max-w-[16rem]");
   return utils.cn(base, "min-w-0", !resized && "max-w-[18rem]");
 }
-function inferColumns(data) {
-  if (data.length === 0) return [];
-  const keys = /* @__PURE__ */ new Set();
-  for (const row of data.slice(0, 20)) {
-    Object.keys(row).filter((key) => !key.startsWith("_")).forEach((key) => keys.add(key));
-  }
-  return Array.from(keys).map((key) => ({
-    key,
-    label: prettifyKey(key),
-    sortable: true,
-    filterable: true
-  }));
-}
 function DataTable({
   theme: themeProp = "system",
   onThemeChange,
@@ -1972,6 +1979,4 @@ function FullscreenButton({
   );
 }
 exports.DataTable = DataTable;
-exports.getFilterTokens = getFilterTokens;
-exports.inferColumns = inferColumns;
 //# sourceMappingURL=DataTable.cjs.map