@flanksource/clicky-ui 0.3.15 → 0.3.16

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");
@@ -85,6 +88,10 @@ function DataTableInner({
   pagination,
   getRowId,
   rowSelection,
+  selectionActions,
+  getRowClassName,
+  footer,
+  grouping,
   onRowClick,
   isRowClickable,
   getRowHref,
@@ -318,13 +325,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 +632,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 = 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();
@@ -862,8 +937,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 +995,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);
@@ -997,6 +1108,15 @@ function DataTableInner({
             }
           )
         ] }),
+        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 }),
         pagination ? /* @__PURE__ */ jsxRuntime.jsx(
           DataTablePaginationFooter,
           {
@@ -1005,7 +1125,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 +1244,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,