@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/DataTable.cjs

@@ -21,8 +21,11 @@ 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 DataTable_grouping = require("./DataTable.grouping.cjs");
 const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
 const UiFilter = require("../icons/components/UiFilter.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiArrowLeft = require("../icons/components/UiArrowLeft.cjs");
 const UiArrowRight = require("../icons/components/UiArrowRight.cjs");
 const UiEyeClosed = require("../icons/components/UiEyeClosed.cjs");
@@ -61,6 +64,7 @@ const TIMESTAMP_RANGE_PRESETS = [
 ];
 function DataTableInner({
   data,
+  error,
   columns: columnsInput,
   loading: loading$1 = false,
   loadingMessage = "Loading results…",
@@ -85,6 +89,10 @@ function DataTableInner({
   pagination,
   getRowId,
   rowSelection,
+  selectionActions,
+  getRowClassName,
+  footer,
+  grouping,
   onRowClick,
   isRowClickable,
   getRowHref,
@@ -318,13 +326,13 @@ function DataTableInner({
       const fitsMulti = options.length >= 2 && options.length <= multiCap;
       if (column.kind === "tags" && fitsMulti) {
         const separator = ((_a = column.tags) == null ? void 0 : _a.separator) ?? "=";
-        const groups = groupTagOptions(options, separator);
-        if (groups.length >= 2) {
+        const groups2 = groupTagOptions(options, separator);
+        if (groups2.length >= 2) {
           return {
             column,
             kind: "nested-multi",
             options,
-            groups
+            groups: groups2
           };
         }
       }
@@ -625,6 +633,74 @@ function DataTableInner({
     selectableVisibleRows,
     selectedRowIDs
   ]);
+  const selectionBar = react.useMemo(() => {
+    if (!rowSelection || !selectionActions) return null;
+    const selected = rows.filter((record) => selectedRowIDs.has(record.id));
+    if (selected.length === 0) return null;
+    return selectionActions({
+      selectedRowIds: selected.map((record) => record.id),
+      selectedRows: selected.map((record) => record.row),
+      clearSelection: () => notifySelection(/* @__PURE__ */ new Set())
+    });
+  }, [notifySelection, rowSelection, rows, selectedRowIDs, selectionActions]);
+  const renderedFooter = error != null ? null : footer !== void 0 ? typeof footer === "function" ? footer({
+    visibleRowCount: sorted.length,
+    totalRowCount: data.length,
+    loading: loading$1
+  }) : footer : pagination ? null : loading$1 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
+  const [collapsedGroups, setCollapsedGroups] = react.useState({});
+  const groups = react.useMemo(() => {
+    if (!grouping) return null;
+    const buckets = DataTable_grouping.groupRecords(
+      visibleSorted,
+      (record) => grouping.getGroupKey(record.row)
+    );
+    const resolved = buckets.map((bucket) => ({
+      key: bucket.key,
+      records: bucket.rows,
+      rows: bucket.rows.map((record) => record.row)
+    }));
+    if (grouping.compareGroups) {
+      resolved.sort((a, b) => grouping.compareGroups(a, b));
+    }
+    return resolved.map((group) => {
+      var _a, _b;
+      return {
+        ...group,
+        label: ((_a = grouping.getGroupLabel) == null ? void 0 : _a.call(grouping, group.key, group.rows)) ?? group.key,
+        meta: (_b = grouping.getGroupMeta) == null ? void 0 : _b.call(grouping, group.key, group.rows),
+        collapsed: collapsedGroups[group.key] ?? DataTable_grouping.isGroupCollapsedByDefault(group, grouping.defaultCollapsed)
+      };
+    });
+  }, [collapsedGroups, grouping, visibleSorted]);
+  const rowStream = react.useMemo(() => {
+    if (!groups) {
+      return visibleSorted.map((record) => ({ kind: "row", record }));
+    }
+    return groups.flatMap((group) => [
+      { kind: "group", group },
+      ...group.collapsed ? [] : group.records.map((record) => ({ kind: "row", record }))
+    ]);
+  }, [groups, visibleSorted]);
+  const toggleGroupSelection = react.useCallback(
+    (records) => {
+      if (!rowSelection) return;
+      const selectable = records.filter(
+        (record) => {
+          var _a;
+          return ((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+        }
+      );
+      const next = new Set(selectedRowIDs);
+      const allSelected = selectable.length > 0 && selectable.every((record) => next.has(record.id));
+      for (const record of selectable) {
+        if (allSelected) next.delete(record.id);
+        else next.add(record.id);
+      }
+      notifySelection(next);
+    },
+    [notifySelection, rowSelection, selectedRowIDs]
+  );
   const revealSentinelRef = react.useCallback(
     (node) => {
       if (revealObserver.current) revealObserver.current.disconnect();
@@ -717,7 +793,7 @@ function DataTableInner({
   return /* @__PURE__ */ jsxRuntime.jsx(densityProvider.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: utils.cn("flex min-h-0 min-w-0 flex-1 flex-col gap-3", className),
+      className: utils.cn("flex min-h-0 min-w-0 flex-1 flex-col gap-1", className),
       "data-density": densityOverride,
       children: [
         showFilterBar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -737,7 +813,7 @@ function DataTableInner({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
-          loading$1 ? /* @__PURE__ */ jsxRuntime.jsx(loading.LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
+          loading$1 && error == null ? /* @__PURE__ */ jsxRuntime.jsx(loading.LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -745,10 +821,10 @@ function DataTableInner({
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border",
                 scrollContainerClassName
               ),
-              "aria-busy": loading$1 || void 0,
+              "aria-busy": loading$1 && error == null || void 0,
               children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max min-w-full table-auto text-left text-sm", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-                  rowSelection ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
+                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
                   visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
                     "col",
                     {
@@ -759,7 +835,7 @@ function DataTableInner({
                   ))
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border text-xs text-muted-foreground", children: [
-                  rowSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx(
                     "th",
                     {
                       className: utils.cn(
@@ -854,7 +930,13 @@ function DataTableInner({
                   ))
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                  loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  error != null ? /* @__PURE__ */ jsxRuntime.jsx(
+                    DataTableErrorRow,
+                    {
+                      colSpan: visibleColumns.length,
+                      error
+                    }
+                  ) : loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                     DataTableLoadingRows,
                     {
                       columns: visibleColumns,
@@ -862,8 +944,43 @@ function DataTableInner({
                       message: loadingMessage,
                       selection: !!rowSelection
                     }
-                  ) : visibleSorted.map((record) => {
+                  ) : rowStream.map((item) => {
                     var _a;
+                    if (item.kind === "group") {
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        DataTableGroupHeaderRow,
+                        {
+                          label: item.group.label,
+                          meta: item.group.meta,
+                          count: item.group.records.length,
+                          colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                          collapsed: item.group.collapsed,
+                          onToggleCollapsed: () => setCollapsedGroups((current) => ({
+                            ...current,
+                            [item.group.key]: !item.group.collapsed
+                          })),
+                          ...rowSelection ? {
+                            selection: {
+                              selectableCount: item.group.records.filter(
+                                (record2) => {
+                                  var _a2;
+                                  return ((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(
+                                    rowSelection,
+                                    record2.row
+                                  )) ?? true;
+                                }
+                              ).length,
+                              selectedCount: item.group.records.filter(
+                                (record2) => selectedRowIDs.has(record2.id)
+                              ).length,
+                              onToggle: () => toggleGroupSelection(item.group.records)
+                            }
+                          } : {}
+                        },
+                        `group:${item.group.key}`
+                      );
+                    }
+                    const record = item.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, {
@@ -885,7 +1002,8 @@ function DataTableInner({
                           className: utils.cn(
                             "relative border-b border-border/60 align-top",
                             clickable && "cursor-pointer hover:bg-accent/40",
-                            selectedRowIDs.has(record.id) && "bg-accent/50"
+                            selectedRowIDs.has(record.id) && "bg-accent/50",
+                            getRowClassName == null ? void 0 : getRowClassName(record.row)
                           ),
                           onClick: () => {
                             if (selectionClickEnabled) toggleRowSelection(record);
@@ -984,7 +1102,7 @@ function DataTableInner({
                       ) })
                     ] }, record.id);
                   }),
-                  hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  error == null && hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "td",
                     {
                       colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
@@ -997,7 +1115,16 @@ function DataTableInner({
             }
           )
         ] }),
-        pagination ? /* @__PURE__ */ jsxRuntime.jsx(
+        error == null && selectionBar ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "data-table-selection-actions",
+            className: "sticky bottom-2 z-10 flex shrink-0 items-center justify-between gap-density-3 rounded-md border border-border bg-card p-density-2 shadow-md",
+            children: selectionBar
+          }
+        ) : null,
+        renderedFooter !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-1 text-xs text-muted-foreground", children: renderedFooter }),
+        error == null && pagination ? /* @__PURE__ */ jsxRuntime.jsx(
           DataTablePaginationFooter,
           {
             pagination,
@@ -1005,7 +1132,7 @@ function DataTableInner({
             loading: loading$1,
             loadingMessage
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-1 text-xs text-muted-foreground", children: loading$1 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}` }),
+        ) : null,
         detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsxRuntime.jsx(
           Modal.Modal,
           {
@@ -1124,6 +1251,57 @@ function DataTablePaginationFooter({
     ] })
   ] });
 }
+function DataTableGroupHeaderRow({
+  label,
+  meta,
+  count,
+  colSpan,
+  collapsed,
+  onToggleCollapsed,
+  selection
+}) {
+  const allSelected = !!selection && selection.selectableCount > 0 && selection.selectedCount === selection.selectableCount;
+  const someSelected = !!selection && selection.selectedCount > 0 && !allSelected;
+  const checkboxRef = react.useRef(null);
+  react.useEffect(() => {
+    if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
+  }, [someSelected]);
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "px-density-2 py-density-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    selection ? /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: checkboxRef,
+        type: "checkbox",
+        "aria-label": `Select group ${typeof label === "string" ? label : count}`,
+        checked: allSelected,
+        disabled: selection.selectableCount === 0,
+        onChange: selection.onToggle,
+        className: "size-3.5 rounded border-border accent-primary"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": !collapsed,
+        onClick: onToggleCollapsed,
+        className: "flex min-w-0 flex-1 items-center gap-1.5 text-left text-xs font-semibold text-foreground hover:text-primary",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
+              className: "shrink-0 text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: count })
+        ]
+      }
+    ),
+    meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: meta }) : null
+  ] }) }) });
+}
 function DataTableLoadingRows({
   columns,
   rowCount,
@@ -1179,6 +1357,19 @@ function DataTableLoadingRows({
     ] }, rowIndex))
   ] });
 }
+function DataTableErrorRow({
+  colSpan,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      colSpan: Math.max(1, colSpan),
+      className: utils.cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-density-3"),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", children: error })
+    }
+  ) });
+}
 function HeaderFilterButton({
   column,
   active,