@geomak/ui 7.13.0 → 7.14.0

package/dist/index.d.cts

@@ -2753,18 +2753,22 @@ interface DataGridProps {
      * `row` index at/after `rows.length` so the consumer can append the row.
      */
     trailingRows?: number;
+    /** Blank, letter-labelled columns rendered after the data columns (spreadsheet slack). Default 0. */
+    trailingCols?: number;
     /** `row` is the index into `rows` (stable across sorting; may equal `rows.length`+ for a blank trailing row). */
     onCellEdit?: (e: {
         row: number;
         column: string;
         value: string;
     }) => void;
-    /** Enable right-click menus: Copy/Cut/Paste on cells, Add/Delete on rows. Default false. */
+    /** Enable right-click menus: Copy/Cut/Paste on cells, Add/Delete on rows, Add column on headers. Default false. */
     contextMenu?: boolean;
     /** Insert a blank row at `index` (from the row right-click menu). */
     onInsertRow?: (index: number) => void;
     /** Delete the row at `index` (from the row right-click menu). */
     onDeleteRow?: (index: number) => void;
+    /** Insert a column at `index` (from the column-header right-click menu). */
+    onInsertColumn?: (index: number) => void;
     className?: string;
     style?: react__default.CSSProperties;
     /** Shown when there are no rows. */
@@ -2781,7 +2785,7 @@ interface DataGridProps {
  * `onCellEdit` on commit. Wrap it with {@link Spreadsheet} for multi-sheet
  * switching, file parsing and export.
  */
-declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, onCellEdit, contextMenu, onInsertRow, onDeleteRow, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
+declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, trailingCols, onCellEdit, contextMenu, onInsertRow, onDeleteRow, onInsertColumn, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
 
 interface Cell {
     value: CellValue;
@@ -2815,6 +2819,8 @@ interface SpreadsheetProps {
     sortable?: boolean;
     /** Blank rows kept below the data (the spreadsheet "slack"). Default 50. */
     emptyRows?: number;
+    /** Blank letter-labelled columns kept to the right of the data. Default 6. */
+    emptyCols?: number;
     /** Show a “+” to add a blank sheet. Defaults to `editable`. */
     allowAddSheet?: boolean;
     /** Overall height. Default 480. */
@@ -2833,7 +2839,7 @@ interface SpreadsheetProps {
  * Exports to multi-sheet `.xlsx`, `.csv` (active sheet, BOM-prefixed) or a
  * paginated table `.pdf` (jsPDF, lazy).
  */
-declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, emptyCols, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.d.ts

@@ -2753,18 +2753,22 @@ interface DataGridProps {
      * `row` index at/after `rows.length` so the consumer can append the row.
      */
     trailingRows?: number;
+    /** Blank, letter-labelled columns rendered after the data columns (spreadsheet slack). Default 0. */
+    trailingCols?: number;
     /** `row` is the index into `rows` (stable across sorting; may equal `rows.length`+ for a blank trailing row). */
     onCellEdit?: (e: {
         row: number;
         column: string;
         value: string;
     }) => void;
-    /** Enable right-click menus: Copy/Cut/Paste on cells, Add/Delete on rows. Default false. */
+    /** Enable right-click menus: Copy/Cut/Paste on cells, Add/Delete on rows, Add column on headers. Default false. */
     contextMenu?: boolean;
     /** Insert a blank row at `index` (from the row right-click menu). */
     onInsertRow?: (index: number) => void;
     /** Delete the row at `index` (from the row right-click menu). */
     onDeleteRow?: (index: number) => void;
+    /** Insert a column at `index` (from the column-header right-click menu). */
+    onInsertColumn?: (index: number) => void;
     className?: string;
     style?: react__default.CSSProperties;
     /** Shown when there are no rows. */
@@ -2781,7 +2785,7 @@ interface DataGridProps {
  * `onCellEdit` on commit. Wrap it with {@link Spreadsheet} for multi-sheet
  * switching, file parsing and export.
  */
-declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, onCellEdit, contextMenu, onInsertRow, onDeleteRow, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
+declare function DataGrid({ columns, rows, rowHeight, headerHeight, height, width, editable, sortable, sort: sortProp, onSortChange, virtualize, overscan, rowNumbers, trailingRows, trailingCols, onCellEdit, contextMenu, onInsertRow, onDeleteRow, onInsertColumn, className, style, emptyState, }: DataGridProps): react_jsx_runtime.JSX.Element;
 
 interface Cell {
     value: CellValue;
@@ -2815,6 +2819,8 @@ interface SpreadsheetProps {
     sortable?: boolean;
     /** Blank rows kept below the data (the spreadsheet "slack"). Default 50. */
     emptyRows?: number;
+    /** Blank letter-labelled columns kept to the right of the data. Default 6. */
+    emptyCols?: number;
     /** Show a “+” to add a blank sheet. Defaults to `editable`. */
     allowAddSheet?: boolean;
     /** Overall height. Default 480. */
@@ -2833,7 +2839,7 @@ interface SpreadsheetProps {
  * Exports to multi-sheet `.xlsx`, `.csv` (active sheet, BOM-prefixed) or a
  * paginated table `.pdf` (jsPDF, lazy).
  */
-declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet({ source, remote, editable, onCellEdit, onChange, export: exportFormats, fileName, virtualize, sortable, emptyRows, emptyCols, allowAddSheet, height, width, className, style, }: SpreadsheetProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.js

@@ -6471,6 +6471,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,
@@ -6486,10 +6495,12 @@ function DataGrid({
   overscan = 4,
   rowNumbers = true,
   trailingRows = 0,
+  trailingCols = 0,
   onCellEdit,
   contextMenu = false,
   onInsertRow,
   onDeleteRow,
+  onInsertColumn,
   className = "",
   style,
   emptyState = "No data"
@@ -6506,8 +6517,16 @@ function DataGrid({
   const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
   const colSortable = (c) => c.sortable ?? sortable;
+  const cols = 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 } = 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) {
@@ -6515,7 +6534,7 @@ function DataGrid({
       acc += w;
     }
     return { widths: widths2, offsets: offsets2, totalWidth: acc };
-  }, [columns]);
+  }, [cols]);
   const order = useMemo(() => {
     const idx = rows.map((_, i) => i);
     if (!sort) return idx;
@@ -6544,45 +6563,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 = 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 = useCallback(async () => {
     if (!selected) return;
     try {
       await navigator.clipboard?.writeText(cellText(selected));
     } catch {
     }
-  }, [selected, rows, columns, order]);
+  }, [selected, rows, cols, order]);
   const cutCell = 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 = useCallback(async () => {
     if (!selected) return;
     let text = "";
@@ -6591,9 +6610,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 = 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;
@@ -6608,7 +6634,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__ */ jsxs("div", { style: { position: "relative", width: gutter + totalWidth + END_PAD, height: headerHeight + totalHeight + END_PAD }, children: [
     rowNumbers && /* @__PURE__ */ jsx(
@@ -6619,7 +6645,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__ */ jsxs(
@@ -6628,6 +6654,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"
@@ -6670,7 +6697,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;
@@ -6765,8 +6792,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" });
@@ -6821,6 +6864,7 @@ function Spreadsheet({
   virtualize = true,
   sortable = true,
   emptyRows = 50,
+  emptyCols = 6,
   allowAddSheet,
   height = 480,
   width,
@@ -6911,6 +6955,33 @@ function Spreadsheet({
       return next;
     });
   }, [active, onChange]);
+  const add10Columns = 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 = 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 = useCallback((index) => {
     setSheets((prev) => {
       if (!prev) return prev;
@@ -7050,7 +7121,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__ */ jsxs("div", { className: cx("flex flex-col overflow-hidden rounded-lg border border-border bg-surface-raised", className), style: { height, width, ...style }, children: [
@@ -7079,9 +7151,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"