@flanksource/clicky-ui 0.3.27 → 0.3.29

package/dist/data/DataTable.js

@@ -24,6 +24,7 @@ import { StatusDot } from "./cells/StatusDot.js";
 import { normalizeStatus } from "./cells/status-mapping.js";
 import { dataTableGroupLabel, dataTableGroupKey, groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
 import { DataTableGroupingControls } from "./DataTableGroupingControls.js";
+import { SelectionActionBar } from "./SelectionActionBar.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
 import { UiChevronRight } from "../icons/components/UiChevronRight.js";
@@ -66,6 +67,18 @@ const TIMESTAMP_RANGE_PRESETS = [
   { label: "Last 7 days", from: "now-7d", to: "now" },
   { label: "Last 30 days", from: "now-30d", to: "now" }
 ];
+function isSinglePage(pagination, visibleRowCount) {
+  if (!pagination) return true;
+  if (pagination.cursor) {
+    return pagination.cursor.current === void 0 && pagination.cursor.next === void 0;
+  }
+  if (pagination.page !== 0) return false;
+  if (pagination.hasMore != null) return !pagination.hasMore;
+  if (pagination.total != null && pagination.totalRelation !== "gte") {
+    return pagination.total <= pagination.pageSize;
+  }
+  return visibleRowCount < pagination.pageSize;
+}
 function assertDataTableGroupingProps({
   grouping,
   groupingModes,
@@ -137,6 +150,7 @@ function DataTableInner({
   getRowId,
   rowSelection,
   selectionActions,
+  selectionBar: selectionBarPlacement = "toolbar",
   getRowClassName,
   footer,
   grouping,
@@ -549,10 +563,16 @@ function DataTableInner({
         continue;
       }
       const server = column.filterKey ? serverFilterByKey.get(column.filterKey) : void 0;
-      if (server && server !== serverTimeRangeFilter) bound.set(column.key, server);
+      if (server && server !== serverTimeRangeFilter)
+        bound.set(column.key, server);
     }
     return bound;
-  }, [effectiveColumns, nativeFilters, serverFilterByKey, serverTimeRangeFilter]);
+  }, [
+    effectiveColumns,
+    nativeFilters,
+    serverFilterByKey,
+    serverTimeRangeFilter
+  ]);
   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)
   );
@@ -590,7 +610,12 @@ function DataTableInner({
       return { key: timeRangeColumn.key, range: autoTimeRange };
     }
     return null;
-  }, [autoTimeRange, rangeCapableColumn, serverTimeRangeFilter, timeRangeColumn]);
+  }, [
+    autoTimeRange,
+    rangeCapableColumn,
+    serverTimeRangeFilter,
+    timeRangeColumn
+  ]);
   const barTimeRange = externalTimeRange ?? (columnTimeRange == null ? void 0 : columnTimeRange.range) ?? null;
   const barFilters = useMemo(() => {
     const external = (externalFilters ?? []).filter(
@@ -699,7 +724,7 @@ function DataTableInner({
     ...onSortChange ? { onSortChange } : {},
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
-  const pageLocalSort = !!pagination && !onSortChange;
+  const pageLocalSort = !!pagination && !onSortChange && !(isSinglePage(pagination, data.length) && !(infinite == null ? void 0 : infinite.hasMore));
   const revealEnabled = !!clientReveal && !pagination && !infinite;
   const revealBatchSize = (clientReveal == null ? void 0 : clientReveal.batchSize) ?? 0;
   const [visibleCount, setVisibleCount] = useState(revealBatchSize);
@@ -726,12 +751,29 @@ function DataTableInner({
     ),
     [rowSelection, visibleSorted]
   );
-  const selectedVisibleCount = selectableVisibleRows.filter(
-    (record) => selectedRowIDs.has(record.id)
-  ).length;
+  const selectAllPages = rowSelection == null ? void 0 : rowSelection.selectAllPages;
+  const selectAllScopes = useMemo(
+    () => ((selectAllPages == null ? void 0 : selectAllPages.scopes) ?? []).flatMap((scope) => {
+      const total = scope.total ?? (pagination == null ? void 0 : pagination.total);
+      return total != null ? [{ ...scope, total }] : [];
+    }),
+    [pagination == null ? void 0 : pagination.total, selectAllPages == null ? void 0 : selectAllPages.scopes]
+  );
+  const selectedScope = (selectAllPages == null ? void 0 : selectAllPages.selectedScopeId) ? selectAllScopes.find(
+    (scope) => scope.id === selectAllPages.selectedScopeId
+  ) : void 0;
+  if ((selectAllPages == null ? void 0 : selectAllPages.selectedScopeId) && !selectedScope) {
+    throw new Error(
+      `Selected table scope ${selectAllPages.selectedScopeId} is not present in selectAllPages.scopes`
+    );
+  }
+  const selectedVisibleCount = selectedScope ? selectableVisibleRows.length : selectableVisibleRows.filter((record) => selectedRowIDs.has(record.id)).length;
   const allVisibleSelected = selectableVisibleRows.length > 0 && selectedVisibleCount === selectableVisibleRows.length;
-  const someVisibleSelected = selectedVisibleCount > 0 && !allVisibleSelected;
+  const someVisibleSelected = !selectedScope && selectedVisibleCount > 0 && !allVisibleSelected;
   const selectAllRef = useRef(null);
+  const widestScope = selectAllScopes[selectAllScopes.length - 1];
+  const nextScope = allVisibleSelected && !selectedScope ? selectAllScopes.find((scope) => scope.total > selectedRowIDs.size) : void 0;
+  const showSelectionScope = !!widestScope && (!!selectedScope || selectedRowIDs.size > 0);
   useEffect(() => {
     if (selectAllRef.current) {
       selectAllRef.current.indeterminate = someVisibleSelected;
@@ -750,17 +792,17 @@ function DataTableInner({
   const toggleRowSelection = useCallback(
     (record) => {
       var _a2;
-      if (!rowSelection) return;
+      if (!rowSelection || selectedScope) return;
       if (((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) === false) return;
       const next = new Set(selectedRowIDs);
       if (next.has(record.id)) next.delete(record.id);
       else next.add(record.id);
       notifySelection(next);
     },
-    [notifySelection, rowSelection, selectedRowIDs]
+    [notifySelection, rowSelection, selectedRowIDs, selectedScope]
   );
   const toggleVisibleSelection = useCallback(() => {
-    if (!rowSelection) return;
+    if (!rowSelection || selectedScope) return;
     const next = new Set(selectedRowIDs);
     if (allVisibleSelected) {
       for (const record of selectableVisibleRows) next.delete(record.id);
@@ -773,18 +815,52 @@ function DataTableInner({
     notifySelection,
     rowSelection,
     selectableVisibleRows,
-    selectedRowIDs
+    selectedRowIDs,
+    selectedScope
   ]);
-  const selectionBar = 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),
+  const selectionContext = useMemo(() => {
+    if (!rowSelection || !selectedScope && selectedRowIDs.size === 0)
+      return null;
+    return {
+      // The ids are the caller's, not the page's. A cross-page selection covers
+      // rows this table never fetched, and an action about to say what it will
+      // touch needs all of them; `selectedRows` is only the ones on hand.
+      // Filtering the ids down to loaded rows instead would make the whole
+      // cluster vanish at the moment the selection got big enough to matter.
+      selectedRowIds: Array.from(selectedRowIDs),
+      selectedRows: selectedScope ? selectableVisibleRows.map((record) => record.row) : rows.filter((record) => selectedRowIDs.has(record.id)).map((record) => record.row),
+      ...selectedScope ? {
+        selectedScope: {
+          id: selectedScope.id,
+          total: selectedScope.total
+        }
+      } : {},
       clearSelection: () => notifySelection(/* @__PURE__ */ new Set())
-    });
-  }, [notifySelection, rowSelection, rows, selectedRowIDs, selectionActions]);
+    };
+  }, [
+    notifySelection,
+    rowSelection,
+    rows,
+    selectableVisibleRows,
+    selectedRowIDs,
+    selectedScope
+  ]);
+  const selectionBar = useMemo(() => {
+    if (!selectionContext || typeof selectionActions !== "function")
+      return null;
+    return selectionActions(selectionContext);
+  }, [selectionActions, selectionContext]);
+  const descriptorSelectionActions = Array.isArray(selectionActions) ? selectionActions : null;
+  const selectionTakeover = error == null && selectionBarPlacement === "takeover" && !!selectionContext && !!descriptorSelectionActions;
+  const selectionCluster = selectionContext && descriptorSelectionActions ? /* @__PURE__ */ jsx(
+    SelectionActionBar,
+    {
+      actions: descriptorSelectionActions,
+      context: selectionContext,
+      showCount: !showSelectionScope,
+      className: "flex flex-wrap items-center gap-density-2"
+    }
+  ) : selectionBar;
   const renderedFooter = error != null ? null : footer !== void 0 ? typeof footer === "function" ? footer({
     visibleRowCount: sorted.length,
     totalRowCount: data.length,
@@ -826,7 +902,28 @@ function DataTableInner({
       [collapseStateKey]: { all: collapsed, groups: {} }
     }));
   };
-  const filterBarTrailing = (filterBarProps == null ? void 0 : filterBarProps.trailing) || groupingModes || showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const selectionToolbar = !selectionTakeover && error == null && (showSelectionScope || selectionCluster) ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "data-table-selection-actions",
+      className: "flex flex-wrap items-center gap-density-2",
+      children: [
+        showSelectionScope && widestScope ? /* @__PURE__ */ jsx(
+          SelectionScopeNotice,
+          {
+            noun: (selectAllPages == null ? void 0 : selectAllPages.noun) ?? "rows",
+            ...(selectAllPages == null ? void 0 : selectAllPages.loading) ? { loading: true } : {},
+            total: widestScope.total,
+            selectedCount: (selectedScope == null ? void 0 : selectedScope.total) ?? selectedRowIDs.size,
+            ...nextScope ? { nextScope } : {},
+            onClear: () => notifySelection(/* @__PURE__ */ new Set())
+          }
+        ) : null,
+        selectionCluster
+      ]
+    }
+  ) : null;
+  const tableControls = (filterBarProps == null ? void 0 : filterBarProps.trailing) || groupingModes || showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
     filterBarProps == null ? void 0 : filterBarProps.trailing,
     groupingModes ? /* @__PURE__ */ jsx(
       DataTableGroupingControls,
@@ -851,6 +948,40 @@ function DataTableInner({
       }
     ) : null
   ] }) : void 0;
+  const filterBarTrailing = selectionToolbar || tableControls ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectionToolbar,
+    tableControls
+  ] }) : void 0;
+  const selectionBarNode = selectionTakeover ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "data-table-selection-actions",
+      className: "flex min-w-0 flex-1 flex-wrap items-center gap-density-2",
+      children: [
+        showSelectionScope && widestScope ? /* @__PURE__ */ jsx(
+          SelectionScopeNotice,
+          {
+            noun: (selectAllPages == null ? void 0 : selectAllPages.noun) ?? "rows",
+            ...(selectAllPages == null ? void 0 : selectAllPages.loading) ? { loading: true } : {},
+            total: widestScope.total,
+            selectedCount: (selectedScope == null ? void 0 : selectedScope.total) ?? selectedRowIDs.size,
+            ...nextScope ? { nextScope } : {},
+            onClear: () => notifySelection(/* @__PURE__ */ new Set())
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          SelectionActionBar,
+          {
+            actions: descriptorSelectionActions,
+            context: selectionContext,
+            showCount: !showSelectionScope,
+            className: "flex flex-wrap items-center gap-density-2"
+          }
+        ),
+        tableControls ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-2", children: tableControls }) : null
+      ]
+    }
+  ) : null;
   const rowStream = useMemo(() => {
     if (!groups) {
       return visibleSorted.map((record) => ({ kind: "row", record }));
@@ -862,7 +993,7 @@ function DataTableInner({
   }, [groups, visibleSorted]);
   const toggleGroupSelection = useCallback(
     (records) => {
-      if (!rowSelection) return;
+      if (!rowSelection || selectedScope) return;
       const selectable = records.filter(
         (record) => {
           var _a2;
@@ -877,7 +1008,7 @@ function DataTableInner({
       }
       notifySelection(next);
     },
-    [notifySelection, rowSelection, selectedRowIDs]
+    [notifySelection, rowSelection, selectedRowIDs, selectedScope]
   );
   const revealSentinelRef = useCallback(
     (node) => {
@@ -983,10 +1114,11 @@ function DataTableInner({
       className: cn("flex min-h-0 min-w-0 flex-1 flex-col gap-1", className),
       "data-density": densityOverride,
       children: [
-        showFilterBar && /* @__PURE__ */ jsx(
+        (showFilterBar || selectionToolbar || selectionBarNode) && /* @__PURE__ */ jsx(
           FilterBar,
           {
             ...filterBarProps,
+            ...selectionBarNode ? { overlay: selectionBarNode } : {},
             ...externalSearch ? { search: externalSearch } : resolvedShowGlobalFilter ? {
               search: {
                 value: effectiveGlobalFilter,
@@ -1000,7 +1132,13 @@ function DataTableInner({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
-          loading && error == null ? /* @__PURE__ */ jsx(LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
+          loading && error == null ? /* @__PURE__ */ jsx(
+            LoadingBar,
+            {
+              "data-testid": "data-table-loading-bar",
+              className: "rounded-t-md"
+            }
+          ) : null,
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -1037,7 +1175,7 @@ function DataTableInner({
                           type: "checkbox",
                           "aria-label": "Select all visible rows",
                           checked: allVisibleSelected,
-                          disabled: selectableVisibleRows.length === 0,
+                          disabled: !!selectedScope || selectableVisibleRows.length === 0,
                           onChange: toggleVisibleSelection,
                           className: "size-3.5 rounded border-border accent-primary"
                         }
@@ -1184,9 +1322,24 @@ function DataTableInner({
                                   )) ?? true;
                                 }
                               ).length,
-                              selectedCount: item.group.records.filter(
-                                (record2) => selectedRowIDs.has(record2.id)
+                              selectedCount: selectedScope ? item.group.records.filter(
+                                (record2) => {
+                                  var _a3;
+                                  return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
+                                    rowSelection,
+                                    record2.row
+                                  )) ?? true;
+                                }
+                              ).length : item.group.records.filter(
+                                (record2) => {
+                                  var _a3;
+                                  return (((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
+                                    rowSelection,
+                                    record2.row
+                                  )) ?? true) && selectedRowIDs.has(record2.id);
+                                }
                               ).length,
+                              disabled: !!selectedScope,
                               onToggle: () => toggleGroupSelection(item.group.records)
                             }
                           } : {}
@@ -1207,8 +1360,19 @@ function DataTableInner({
                     const opensDialog = expandable && detailStyle === "dialog";
                     const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
                     const rowSelectable = ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
-                    const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable;
+                    const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable && !selectedScope;
                     const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
+                    const activateRow = () => {
+                      if (selectionClickEnabled) toggleRowSelection(record);
+                      if (expandsInline) {
+                        setExpandedRows((current) => ({
+                          ...current,
+                          [record.id]: !current[record.id]
+                        }));
+                      }
+                      if (opensDialog) setDetailRow(record);
+                      if (rowClickEnabled) onRowClick == null ? void 0 : onRowClick(record.row);
+                    };
                     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
                       /* @__PURE__ */ jsxs(
                         "tr",
@@ -1216,24 +1380,19 @@ function DataTableInner({
                           className: cn(
                             "relative border-b border-border/60 align-top",
                             clickable && "cursor-pointer hover:bg-accent/40",
-                            selectedRowIDs.has(record.id) && "bg-accent/50",
+                            clickable && !href && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                            (selectedScope && rowSelectable || selectedRowIDs.has(record.id)) && "bg-accent/50",
                             getRowClassName == null ? void 0 : getRowClassName(record.row)
                           ),
-                          onClick: () => {
-                            if (selectionClickEnabled)
-                              toggleRowSelection(record);
-                            if (expandsInline) {
-                              setExpandedRows((current) => ({
-                                ...current,
-                                [record.id]: !current[record.id]
-                              }));
-                            }
-                            if (opensDialog) {
-                              setDetailRow(record);
-                            }
-                            if (rowClickEnabled) {
-                              onRowClick == null ? void 0 : onRowClick(record.row);
-                            }
+                          tabIndex: clickable && !href ? 0 : void 0,
+                          onClick: activateRow,
+                          onKeyDown: (event) => {
+                            if (href || event.target !== event.currentTarget)
+                              return;
+                            if (event.key !== "Enter" && event.key !== " ")
+                              return;
+                            event.preventDefault();
+                            activateRow();
                           },
                           children: [
                             rowSelection ? /* @__PURE__ */ jsx(
@@ -1251,8 +1410,8 @@ function DataTableInner({
                                   {
                                     type: "checkbox",
                                     "aria-label": `Select row ${record.id}`,
-                                    checked: selectedRowIDs.has(record.id),
-                                    disabled: !rowSelectable,
+                                    checked: !!selectedScope && rowSelectable || selectedRowIDs.has(record.id),
+                                    disabled: !!selectedScope || !rowSelectable,
                                     onChange: () => toggleRowSelection(record),
                                     className: "size-3.5 rounded border-border accent-primary"
                                   }
@@ -1360,14 +1519,6 @@ function DataTableInner({
             }
           )
         ] }),
-        error == null && selectionBar ? /* @__PURE__ */ 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__ */ jsx("div", { className: "shrink-0 px-1 text-xs text-muted-foreground", children: renderedFooter }),
         error == null && pagination ? /* @__PURE__ */ jsx(
           DataTablePaginationFooter,
@@ -1461,12 +1612,59 @@ function useCursorTrail(cursor) {
     previous: () => index <= 1 ? void 0 : trail[index - 2]
   };
 }
+function SelectionScopeNotice({
+  noun,
+  loading,
+  total,
+  selectedCount,
+  nextScope,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "data-testid": "data-table-selection-scope",
+      className: "flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: selectedCount >= total ? `All ${total.toLocaleString()} ${noun} selected.` : `${selectedCount.toLocaleString()} of ${total.toLocaleString()} ${noun} selected.` }),
+        nextScope ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded-md border border-border bg-background px-2 py-0.5 font-medium text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            disabled: loading,
+            onClick: nextScope.onSelectAll,
+            children: loading ? "Selecting…" : nextScope.label ?? `Select all ${nextScope.total.toLocaleString()} ${noun}`
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded-md border border-border bg-background px-2 py-0.5 font-medium text-foreground hover:bg-accent",
+            onClick: onClear,
+            children: "Clear selection"
+          }
+        )
+      ]
+    }
+  );
+}
 function DataTablePaginationFooter({
   pagination,
   visibleRowCount,
   infinite = false
 }) {
-  const { page, pageSize, total, totalRelation, cursor, 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,
@@ -1577,7 +1775,7 @@ function DataTableGroupHeaderRow({
         type: "checkbox",
         "aria-label": `Select group ${typeof label === "string" ? label : count}`,
         checked: allSelected,
-        disabled: selection.selectableCount === 0,
+        disabled: selection.disabled || selection.selectableCount === 0,
         onChange: selection.onToggle,
         className: "size-3.5 rounded border-border accent-primary"
       }