@proteos/ui 0.46.0 → 0.47.0

package/dist/index.cjs

@@ -1265,7 +1265,14 @@ function Checkbox({ children, className, ...props }) {
     {
       ...props,
       className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "group inline-flex items-center gap-2.5 cursor-pointer",
+        // `relative` so RAC's visually-hidden <input> — which is absolutely
+        // positioned and is the element that actually receives focus — is
+        // laid out against THIS checkbox. Without a positioned ancestor here
+        // it resolves against a far-away container, ends up outside any
+        // scroll clipping, and focusing it makes the browser scroll a
+        // container the user cannot scroll back (the roles permission
+        // matrix, where toggling a row threw the page off-screen).
+        "group relative inline-flex items-center gap-2.5 cursor-pointer",
         "font-sans text-[14px] text-ink-2 select-none",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
@@ -2614,6 +2621,7 @@ function useInfiniteScrollSentinel({
   return ref;
 }
 var DEFAULT_ROW_HEIGHT = 32;
+var SELECTION_COLUMN_ID = "__select__";
 function DataTable({
   query,
   columns,
@@ -2638,6 +2646,9 @@ function DataTable({
   extraRows,
   bodyBefore,
   bodyAfter,
+  selectionMode = "none",
+  selectedIds,
+  onSelectionChange,
   columnBorders = false
 }) {
   const rows = react.useMemo(() => {
@@ -2648,19 +2659,112 @@ function DataTable({
     if (startExtras.length === 0 && endExtras.length === 0) return dataRows;
     return [...startExtras, ...dataRows, ...endExtras];
   }, [query.data, extraRows]);
+  const resolveRowId = react.useMemo(
+    () => getRowId ?? ((row, index) => {
+      const r = row;
+      if (typeof r.id === "string" || typeof r.id === "number") return String(r.id);
+      if (typeof r.slug === "string") return r.slug;
+      return String(index);
+    }),
+    [getRowId]
+  );
+  const selectionEnabled = selectionMode === "multiple";
+  const selected = react.useMemo(() => selectedIds ?? /* @__PURE__ */ new Set(), [selectedIds]);
+  const loadedIds = react.useMemo(
+    () => selectionEnabled ? rows.map((row, index) => resolveRowId(row, index)) : [],
+    [selectionEnabled, rows, resolveRowId]
+  );
+  const lastToggledIndexRef = react.useRef(null);
+  const toggleRow = (id, index, isRange) => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    const anchor = lastToggledIndexRef.current;
+    if (isRange && anchor !== null) {
+      const [from, to] = anchor <= index ? [anchor, index] : [index, anchor];
+      for (let i = from; i <= to; i += 1) {
+        const rangeId = loadedIds[i];
+        if (rangeId !== void 0) next.add(rangeId);
+      }
+    } else if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    lastToggledIndexRef.current = index;
+    onSelectionChange(next);
+  };
+  const loadedSelectedCount = loadedIds.reduce((count, id) => count + (selected.has(id) ? 1 : 0), 0);
+  const allLoadedSelected = loadedIds.length > 0 && loadedSelectedCount === loadedIds.length;
+  const toggleAllLoaded = () => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    if (allLoadedSelected) {
+      for (const id of loadedIds) next.delete(id);
+    } else {
+      for (const id of loadedIds) next.add(id);
+    }
+    lastToggledIndexRef.current = null;
+    onSelectionChange(next);
+  };
+  const rangeModifierRef = react.useRef(false);
+  const selectionColumn = react.useMemo(
+    () => ({
+      id: SELECTION_COLUMN_ID,
+      size: 36,
+      enableSorting: false,
+      meta: { align: "center", sticky: "left", cellClassName: "px-0 justify-center" },
+      header: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          "aria-label": allLoadedSelected ? "Deselect all rows" : "Select all rows",
+          isSelected: allLoadedSelected,
+          isIndeterminate: loadedSelectedCount > 0 && !allLoadedSelected,
+          isDisabled: loadedIds.length === 0,
+          onChange: toggleAllLoaded
+        }
+      ) }),
+      cell: ({ row }) => (
+        // Stop the click here: selecting a row must never also open it.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-flex items-center justify-center w-full",
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => {
+              event.stopPropagation();
+              rangeModifierRef.current = event.shiftKey;
+            },
+            onPointerDownCapture: (event) => {
+              rangeModifierRef.current = event.shiftKey;
+            },
+            role: "presentation",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                "aria-label": `Select row ${row.index + 1}`,
+                isSelected: selected.has(row.id),
+                onChange: () => toggleRow(row.id, row.index, rangeModifierRef.current)
+              }
+            )
+          }
+        )
+      )
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: handlers read the latest selection via closure recreated on these inputs
+    [selected, loadedIds, allLoadedSelected, loadedSelectedCount]
+  );
+  const tableColumns = react.useMemo(
+    () => selectionEnabled ? [selectionColumn, ...columns] : columns,
+    [selectionEnabled, selectionColumn, columns]
+  );
   const table = reactTable.useReactTable({
     data: rows,
-    columns,
+    columns: tableColumns,
     state: { sorting: sorting ?? [] },
     ...onSortingChange ? { onSortingChange } : {},
     manualSorting: true,
     getCoreRowModel: reactTable.getCoreRowModel(),
-    getRowId: getRowId ? (row, index) => getRowId(row, index) : (row, index) => {
-      const r = row;
-      if (typeof r.id === "string" || typeof r.id === "number") return String(r.id);
-      if (typeof r.slug === "string") return r.slug;
-      return String(index);
-    }
+    getRowId: (row, index) => resolveRowId(row, index)
   });
   const tableRows = table.getRowModel().rows;
   const tableRowCount = tableRows.length;
@@ -2692,8 +2796,8 @@ function DataTable({
     enabled: !!query.hasNextPage
   });
   const totalColumnWidth = react.useMemo(
-    () => columns.reduce((sum, c) => sum + (c.size ?? 140), 0),
-    [columns]
+    () => tableColumns.reduce((sum, c) => sum + (c.size ?? 140), 0),
+    [tableColumns]
   );
   const columnsRef = react.useRef(columns);
   columnsRef.current = columns;
@@ -7714,6 +7818,7 @@ exports.RecordFilterChips = RecordFilterChips;
 exports.RecordFilterEditor = RecordFilterEditor;
 exports.RenderChipItemProvider = RenderChipItemProvider;
 exports.RenderValueInputProvider = RenderValueInputProvider;
+exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Separator = Separator;