@geomak/ui 7.10.0 → 7.11.0

package/dist/index.cjs

@@ -6503,6 +6503,7 @@ function DataGrid({
   virtualize = true,
   overscan = 4,
   rowNumbers = true,
+  trailingRows = 0,
   onCellEdit,
   className = "",
   style,
@@ -6539,7 +6540,9 @@ function DataGrid({
     if (sortProp === void 0) setInternalSort(next);
     onSortChange?.(next);
   };
-  const totalHeight = rows.length * rowHeight;
+  const displayRowCount = rows.length + Math.max(0, trailingRows);
+  const totalHeight = displayRowCount * rowHeight;
+  const rowIndexForDisp = (disp) => disp < rows.length ? order[disp] : disp;
   React36.useEffect(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -6551,7 +6554,7 @@ function DataGrid({
   }, []);
   const bodyH = (viewport.h || (typeof height === "number" ? height : 480)) - headerHeight;
   const rowStart = virtualize ? Math.max(0, Math.floor(scroll.top / rowHeight) - overscan) : 0;
-  const rowEnd = virtualize ? Math.min(rows.length, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : rows.length;
+  const rowEnd = virtualize ? Math.min(displayRowCount, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : displayRowCount;
   let colStart = 0;
   let colEnd = columns.length;
   if (virtualize && viewport.w) {
@@ -6569,13 +6572,14 @@ function DataGrid({
   const commit = React36.useCallback(() => {
     if (!editing) return;
     const col = columns[editing.col];
-    onCellEdit?.({ row: order[editing.disp], column: col.key, value: draft });
+    const ri = editing.disp < rows.length ? order[editing.disp] : editing.disp;
+    onCellEdit?.({ row: ri, column: col.key, value: draft });
     setEditing(null);
-  }, [editing, columns, draft, onCellEdit, order]);
+  }, [editing, columns, draft, onCellEdit, order, rows.length]);
   const startEdit = (disp, col) => {
     const c = columns[col];
     if (!(c.editable ?? editable)) return;
-    setDraft(displayValue(rows[order[disp]]?.[c.key] ?? ""));
+    setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6638,7 +6642,7 @@ function DataGrid({
             `g-${disp}`
           )),
           visibleRows.map((disp) => {
-            const ri = order[disp];
+            const ri = rowIndexForDisp(disp);
             return visibleCols.map((ci) => {
               const c = columns[ci];
               const isEditing = editing?.disp === disp && editing?.col === ci;
@@ -6681,7 +6685,7 @@ function DataGrid({
             });
           })
         ] }),
-        rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
+        displayRowCount === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-foreground-muted", style: { top: headerHeight }, children: emptyState })
       ]
     }
   );
@@ -6699,6 +6703,18 @@ function cellValue(v) {
   if (v != null && typeof v === "object" && "value" in v) return v.value;
   return v;
 }
+function columnLetter(i) {
+  let s = "";
+  let n = i;
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function blankSheet(name, cols = 8) {
+  return { name, columns: Array.from({ length: cols }, (_, i) => ({ key: columnLetter(i), label: columnLetter(i) })), rows: [] };
+}
 function toPlainRows(sheet, columns) {
   return sheet.rows.map((row) => {
     const out = {};
@@ -6731,11 +6747,14 @@ function Spreadsheet({
   fileName,
   virtualize = true,
   sortable = true,
+  emptyRows = 50,
+  allowAddSheet,
   height = 480,
   width,
   className = "",
   style
 }) {
+  const canAddSheet = allowAddSheet ?? editable;
   const [sheets, setSheets] = React36.useState(Array.isArray(source) ? source : null);
   const [active, setActive] = React36.useState(0);
   const [status, setStatus] = React36.useState(Array.isArray(source) ? "ready" : "loading");
@@ -6795,6 +6814,7 @@ function Spreadsheet({
       if (!prev) return prev;
       const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
       coerced = coerceToCellType(prevValue, value);
@@ -6808,6 +6828,18 @@ function Spreadsheet({
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
   }, [active, onCellEdit, onChange, sheets]);
+  const addSheet = React36.useCallback(() => {
+    setSheets((prev) => {
+      const list = prev ?? [];
+      const used = new Set(list.map((s) => s.name));
+      let n = list.length + 1;
+      while (used.has(`Sheet ${n}`)) n++;
+      const next = [...list, blankSheet(`Sheet ${n}`)];
+      setActive(next.length - 1);
+      onChange?.(next);
+      return next;
+    });
+  }, [onChange]);
   const baseName = React36.useMemo(
     () => (fileName || (typeof source === "object" && "name" in source ? sourceName(source) : null) || "spreadsheet").replace(/\.[^.]+$/, ""),
     [fileName, source]
@@ -6936,28 +6968,45 @@ function Spreadsheet({
         editable,
         sortable,
         virtualize,
+        trailingRows: emptyRows,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"
       },
       active
     ) }),
-    sheets.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex flex-shrink-0 items-center gap-1 overflow-x-auto border-t border-border bg-surface px-2 py-1", children: sheets.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        role: "tab",
-        type: "button",
-        "aria-selected": i === active,
-        onClick: () => setActive(i),
-        className: cx(
-          "flex-shrink-0 rounded-md px-3 py-1 text-xs font-medium transition-colors",
-          "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-          i === active ? "bg-surface-raised text-foreground shadow-sm" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
-        ),
-        children: s.name || `Sheet ${i + 1}`
-      },
-      `${s.name}-${i}`
-    )) })
+    (sheets.length > 1 || canAddSheet) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 border-t border-border bg-surface px-2 py-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": "Sheets", className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: sheets.map((s, i) => {
+        const activeTab = i === active;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            "aria-selected": activeTab,
+            onClick: () => setActive(i),
+            className: cx(
+              "flex-shrink-0 rounded-t-md border-t-2 px-3 py-1 text-xs transition-colors",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              activeTab ? "border-t-accent bg-surface-raised font-semibold text-foreground shadow-sm" : "border-t-transparent font-medium text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+            ),
+            children: s.name || `Sheet ${i + 1}`
+          },
+          `${s.name}-${i}`
+        );
+      }) }),
+      canAddSheet && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: addSheet,
+          title: "Add sheet",
+          "aria-label": "Add sheet",
+          className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) })
+        }
+      )
+    ] })
   ] });
 }
 var DownloadIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v12m0 0 4-4m-4 4-4-4M4 21h16" }) });