@geomak/ui 7.13.0 → 7.14.0

package/dist/index.cjs

@@ -6507,6 +6507,15 @@ function displayValue(v) {
   if (v == null) return "";
   return String(v);
 }
+function colLetter(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 DataGrid({
   columns,
   rows,
@@ -6522,10 +6531,12 @@ function DataGrid({
   overscan = 4,
   rowNumbers = true,
   trailingRows = 0,
+  trailingCols = 0,
   onCellEdit,
   contextMenu = false,
   onInsertRow,
   onDeleteRow,
+  onInsertColumn,
   className = "",
   style,
   emptyState = "No data"
@@ -6542,8 +6553,16 @@ function DataGrid({
   const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
   const colSortable = (c) => c.sortable ?? sortable;
+  const cols = React36.useMemo(() => {
+    if (trailingCols <= 0) return columns;
+    const extra = Array.from({ length: trailingCols }, (_, k) => {
+      const idx = columns.length + k;
+      return { key: `__c${idx}`, label: colLetter(idx), editable: false, sortable: false };
+    });
+    return [...columns, ...extra];
+  }, [columns, trailingCols]);
   const { widths, offsets, totalWidth } = React36.useMemo(() => {
-    const widths2 = columns.map((c) => resolveWidth(c.width));
+    const widths2 = cols.map((c) => resolveWidth(c.width));
     const offsets2 = [];
     let acc = 0;
     for (const w of widths2) {
@@ -6551,7 +6570,7 @@ function DataGrid({
       acc += w;
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
-  }, [columns]);
+  }, [cols]);
   const order = React36.useMemo(() => {
     const idx = rows.map((_, i) => i);
     if (!sort) return idx;
@@ -6580,45 +6599,45 @@ function DataGrid({
   const rowStart = virtualize ? Math.max(0, Math.floor(scroll.top / rowHeight) - overscan) : 0;
   const rowEnd = virtualize ? Math.min(displayRowCount, Math.ceil((scroll.top + bodyH) / rowHeight) + overscan) : displayRowCount;
   let colStart = 0;
-  let colEnd = columns.length;
+  let colEnd = cols.length;
   if (virtualize && viewport.w) {
     const viewLeft = scroll.left;
     const viewRight = scroll.left + (viewport.w - gutter);
     colStart = Math.max(0, offsets.findIndex((o, i) => o + widths[i] > viewLeft));
     if (colStart < 0) colStart = 0;
     colEnd = offsets.findIndex((o) => o > viewRight);
-    colEnd = colEnd === -1 ? columns.length : Math.min(columns.length, colEnd + 1);
+    colEnd = colEnd === -1 ? cols.length : Math.min(cols.length, colEnd + 1);
     colStart = Math.max(0, colStart - overscan);
-    colEnd = Math.min(columns.length, colEnd + overscan);
+    colEnd = Math.min(cols.length, colEnd + overscan);
   }
   const visibleRows = Array.from({ length: Math.max(0, rowEnd - rowStart) }, (_, i) => rowStart + i);
   const visibleCols = Array.from({ length: Math.max(0, colEnd - colStart) }, (_, i) => colStart + i);
   const commit = React36.useCallback(() => {
     if (!editing) return;
-    const col = columns[editing.col];
+    const col = cols[editing.col];
     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, rows.length]);
+  }, [editing, cols, draft, onCellEdit, order, rows.length]);
   const startEdit = (disp, col) => {
-    const c = columns[col];
+    const c = cols[col];
     if (!(c.editable ?? editable)) return;
     setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
-  const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[columns[sel.col].key] ?? "");
+  const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[cols[sel.col].key] ?? "");
   const copyCell = React36.useCallback(async () => {
     if (!selected) return;
     try {
       await navigator.clipboard?.writeText(cellText(selected));
     } catch {
     }
-  }, [selected, rows, columns, order]);
+  }, [selected, rows, cols, order]);
   const cutCell = React36.useCallback(async () => {
     if (!selected) return;
     await copyCell();
-    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: columns[selected.col].key, value: "" });
-  }, [selected, copyCell, onCellEdit, columns, order, rows.length]);
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: "" });
+  }, [selected, copyCell, onCellEdit, cols, order, rows.length]);
   const pasteCell = React36.useCallback(async () => {
     if (!selected) return;
     let text = "";
@@ -6627,9 +6646,16 @@ function DataGrid({
     } catch {
       return;
     }
-    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: columns[selected.col].key, value: text });
-  }, [selected, onCellEdit, columns, order, rows.length]);
+    onCellEdit?.({ row: rowIndexForDisp(selected.disp), column: cols[selected.col].key, value: text });
+  }, [selected, onCellEdit, cols, order, rows.length]);
   const ctxItems = React36.useMemo(() => {
+    if (ctxTarget?.kind === "header") {
+      const ci = ctxTarget.col;
+      return [
+        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci) },
+        { key: "right", value: "Add column to the right", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci + 1) }
+      ];
+    }
     if (ctxTarget?.kind === "row") {
       const ri = rowIndexForDisp(ctxTarget.disp);
       const isData = ctxTarget.disp < rows.length;
@@ -6644,7 +6670,7 @@ function DataGrid({
       { key: "cut", value: "Cut", disabled: !editable, onClick: () => void cutCell() },
       { key: "paste", value: "Paste", disabled: !editable, onClick: () => void pasteCell() }
     ];
-  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, copyCell, cutCell, pasteCell, order]);
+  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, copyCell, cutCell, pasteCell, order]);
   const rowHighlighted = (disp) => hoveredRow === disp || selected?.disp === disp;
   const gridInner = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
     rowNumbers && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6655,7 +6681,7 @@ function DataGrid({
       }
     ),
     visibleCols.map((ci) => {
-      const c = columns[ci];
+      const c = cols[ci];
       const sortDir = sort?.key === c.key ? sort.dir : null;
       const canSort = colSortable(c);
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6664,6 +6690,7 @@ function DataGrid({
           role: "columnheader",
           "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
           onClick: canSort ? () => toggleSort(c.key) : void 0,
+          onContextMenu: contextMenu ? () => setCtxTarget({ kind: "header", col: ci }) : void 0,
           className: cx(
             "flex items-center gap-1 border-b border-r border-border bg-surface px-3 font-medium text-foreground-secondary",
             canSort && "cursor-pointer select-none hover:text-foreground"
@@ -6706,7 +6733,7 @@ function DataGrid({
       const ri = rowIndexForDisp(disp);
       const hi = rowHighlighted(disp);
       return visibleCols.map((ci) => {
-        const c = columns[ci];
+        const c = cols[ci];
         const isEditing = editing?.disp === disp && editing?.col === ci;
         const isSelected = selected?.disp === disp && selected?.col === ci;
         const canEdit = c.editable ?? editable;
@@ -6801,8 +6828,24 @@ function columnLetter(i) {
   } while (n >= 0);
   return s;
 }
+function makeColumns(existing, count) {
+  const used = new Set(existing.map((c) => c.key));
+  const out = [];
+  let n = existing.length;
+  for (let k = 0; k < count; k++) {
+    let key = columnLetter(n);
+    while (used.has(key)) {
+      n++;
+      key = columnLetter(n);
+    }
+    used.add(key);
+    out.push({ key, label: key });
+    n++;
+  }
+  return out;
+}
 function blankSheet(name, cols = 8) {
-  return { name, columns: Array.from({ length: cols }, (_, i) => ({ key: columnLetter(i), label: columnLetter(i) })), rows: [] };
+  return { name, columns: makeColumns([], cols), rows: [] };
 }
 function parseWorkbook(XLSX, bytes) {
   const wb = XLSX.read(bytes, { type: "array" });
@@ -6857,6 +6900,7 @@ function Spreadsheet({
   virtualize = true,
   sortable = true,
   emptyRows = 50,
+  emptyCols = 6,
   allowAddSheet,
   height = 480,
   width,
@@ -6947,6 +6991,33 @@ function Spreadsheet({
       return next;
     });
   }, [active, onChange]);
+  const add10Columns = React36.useCallback(() => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => {
+        if (i !== active) return s;
+        const cols = toColumns(s.columns);
+        return { ...s, columns: [...cols, ...makeColumns(cols, 10)] };
+      });
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
+  const insertColumn = React36.useCallback((index) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => {
+        if (i !== active) return s;
+        const cols = toColumns(s.columns);
+        const at = Math.max(0, Math.min(index, cols.length));
+        const out = [...cols];
+        out.splice(at, 0, makeColumns(cols, 1)[0]);
+        return { ...s, columns: out };
+      });
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange]);
   const insertRow = React36.useCallback((index) => {
     setSheets((prev) => {
       if (!prev) return prev;
@@ -7086,7 +7157,8 @@ function Spreadsheet({
   const sheetItems = [
     { key: "add", label: "Add Sheet", onSelect: addSheet },
     { key: "delete", label: "Delete Sheet", danger: true, disabled: sheets.length <= 1, onSelect: () => deleteSheet(active) },
-    { key: "add100", label: "Add 100 rows", separatorBefore: true, onSelect: add100Rows }
+    { key: "add100", label: "Add 100 rows", separatorBefore: true, onSelect: add100Rows },
+    { key: "add10cols", label: "Add 10 columns", onSelect: add10Columns }
   ];
   const canDeleteSheet = editable && sheets.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height, width, ...style }, children: [
@@ -7115,9 +7187,11 @@ function Spreadsheet({
         sortable,
         virtualize,
         trailingRows: emptyRows,
+        trailingCols: emptyCols,
         contextMenu: true,
         onInsertRow: editable ? insertRow : void 0,
         onDeleteRow: editable ? deleteRow : void 0,
+        onInsertColumn: editable ? insertColumn : void 0,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"