@geomak/ui 7.14.0 → 7.16.0

package/dist/index.cjs

@@ -6537,6 +6537,7 @@ function DataGrid({
   onInsertRow,
   onDeleteRow,
   onInsertColumn,
+  onHeaderEdit,
   className = "",
   style,
   emptyState = "No data"
@@ -6549,6 +6550,8 @@ function DataGrid({
   const [ctxTarget, setCtxTarget] = React36.useState(null);
   const [editing, setEditing] = React36.useState(null);
   const [draft, setDraft] = React36.useState("");
+  const [editingHeader, setEditingHeader] = React36.useState(null);
+  const [headerDraft, setHeaderDraft] = React36.useState("");
   const [internalSort, setInternalSort] = React36.useState(null);
   const sort = sortProp !== void 0 ? sortProp : internalSort;
   const gutter = rowNumbers ? GUTTER : 0;
@@ -6625,6 +6628,17 @@ function DataGrid({
     setDraft(displayValue(rows[rowIndexForDisp(disp)]?.[c.key] ?? ""));
     setEditing({ disp, col });
   };
+  const startHeaderEdit = (col) => {
+    if (!onHeaderEdit) return;
+    const c = cols[col];
+    setHeaderDraft(typeof c.label === "string" ? c.label : String(c.key));
+    setEditingHeader(col);
+  };
+  const commitHeader = () => {
+    if (editingHeader == null) return;
+    onHeaderEdit?.(editingHeader, headerDraft);
+    setEditingHeader(null);
+  };
   const cellText = (sel) => displayValue(rows[rowIndexForDisp(sel.disp)]?.[cols[sel.col].key] ?? "");
   const copyCell = React36.useCallback(async () => {
     if (!selected) return;
@@ -6652,7 +6666,8 @@ function DataGrid({
     if (ctxTarget?.kind === "header") {
       const ci = ctxTarget.col;
       return [
-        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci) },
+        { key: "rename", value: "Rename column", disabled: !onHeaderEdit, onClick: () => startHeaderEdit(ci) },
+        { key: "left", value: "Add column to the left", disabled: !onInsertColumn, separatorBefore: true, onClick: () => onInsertColumn?.(ci) },
         { key: "right", value: "Add column to the right", disabled: !onInsertColumn, onClick: () => onInsertColumn?.(ci + 1) }
       ];
     }
@@ -6670,7 +6685,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, onInsertColumn, copyCell, cutCell, pasteCell, order]);
+  }, [ctxTarget, rows.length, editable, onInsertRow, onDeleteRow, onInsertColumn, onHeaderEdit, 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(
@@ -6684,16 +6699,20 @@ function DataGrid({
       const c = cols[ci];
       const sortDir = sort?.key === c.key ? sort.dir : null;
       const canSort = colSortable(c);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const renamable = !!onHeaderEdit;
+      const isEditingHeader = editingHeader === ci;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           role: "columnheader",
           "aria-sort": sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
-          onClick: canSort ? () => toggleSort(c.key) : void 0,
+          onClick: canSort && !renamable ? () => toggleSort(c.key) : void 0,
+          onDoubleClick: renamable ? () => startHeaderEdit(ci) : 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"
+            canSort && !renamable && "cursor-pointer select-none hover:text-foreground",
+            renamable && "cursor-default select-none"
           ),
           style: {
             position: "absolute",
@@ -6704,10 +6723,27 @@ function DataGrid({
             zIndex: 2,
             justifyContent: c.align === "right" ? "flex-end" : c.align === "center" ? "center" : "flex-start"
           },
-          children: [
+          children: isEditingHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: headerDraft,
+              onChange: (e) => setHeaderDraft(e.target.value),
+              onBlur: commitHeader,
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") commitHeader();
+                else if (e.key === "Escape") setEditingHeader(null);
+              },
+              className: "h-full w-full bg-transparent font-medium text-foreground outline-none"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: c.label ?? c.key }),
-            canSort && /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir })
-          ]
+            canSort && (renamable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: "Sort", onClick: (e) => {
+              e.stopPropagation();
+              toggleSort(c.key);
+            }, className: "flex-shrink-0 rounded hover:text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }) }) : /* @__PURE__ */ jsxRuntime.jsx(SortCaret, { dir: sortDir }))
+          ] })
         },
         `h-${c.key}`
       );
@@ -6944,12 +6980,21 @@ function Spreadsheet({
   const sheet = sheets?.[active];
   const columns = React36.useMemo(() => sheet ? toColumns(sheet.columns) : [], [sheet]);
   const plainRows = React36.useMemo(() => sheet ? toPlainRows(sheet, columns) : [], [sheet, columns]);
+  const displayColumns = React36.useMemo(
+    () => [...columns, ...makeColumns(columns, Math.max(0, emptyCols)).map((c) => ({ ...c, sortable: false }))],
+    [columns, emptyCols]
+  );
+  const isSlackKey = (key) => !columns.some((c) => c.key === key);
   const handleCellEdit = React36.useCallback(({ row, column, value }) => {
     let coerced = value;
     setSheets((prev) => {
       if (!prev) return prev;
-      const next = prev.map((s, i) => i === active ? { ...s, rows: s.rows.map((r) => ({ ...r })) } : s);
+      const next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns), rows: s.rows.map((r) => ({ ...r })) } : s);
       const target = next[active];
+      if (isSlackKey(column)) {
+        const j = displayColumns.findIndex((c) => c.key === column);
+        if (j >= 0) target.columns = displayColumns.slice(0, j + 1).map((c) => ({ key: c.key, label: c.label }));
+      }
       while (target.rows.length <= row) target.rows.push({});
       const existing = target.rows[row]?.[column];
       const prevValue = cellValue(existing);
@@ -6963,7 +7008,22 @@ function Spreadsheet({
       return next;
     });
     onCellEdit?.({ sheet: sheets?.[active]?.name ?? "", row, column, value: coerced });
-  }, [active, onCellEdit, onChange, sheets]);
+  }, [active, onCellEdit, onChange, sheets, displayColumns, columns]);
+  const renameColumn = React36.useCallback((index, label) => {
+    setSheets((prev) => {
+      if (!prev) return prev;
+      const next = prev.map((s, i) => i === active ? { ...s, columns: toColumns(s.columns) } : s);
+      const target = next[active];
+      let tcols = target.columns;
+      if (index >= tcols.length) {
+        tcols = displayColumns.slice(0, index + 1).map((c) => ({ key: c.key, label: c.label }));
+        target.columns = tcols;
+      }
+      if (tcols[index]) tcols[index] = { ...tcols[index], label };
+      onChange?.(next);
+      return next;
+    });
+  }, [active, onChange, displayColumns]);
   const addSheet = React36.useCallback(() => {
     setSheets((prev) => {
       const list = prev ?? [];
@@ -7181,17 +7241,17 @@ function Spreadsheet({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       DataGrid,
       {
-        columns,
+        columns: displayColumns,
         rows: plainRows,
         editable,
         sortable,
         virtualize,
         trailingRows: emptyRows,
-        trailingCols: emptyCols,
         contextMenu: true,
         onInsertRow: editable ? insertRow : void 0,
         onDeleteRow: editable ? deleteRow : void 0,
         onInsertColumn: editable ? insertColumn : void 0,
+        onHeaderEdit: editable ? renameColumn : void 0,
         onCellEdit: handleCellEdit,
         height: "100%",
         className: "!rounded-none !border-0"
@@ -11121,6 +11181,153 @@ function useJwt(token) {
   const isValid = decoded.payload != null && !isExpired;
   return { payload: decoded.payload, header: decoded.header, expiresAt, isExpired, isValid, raw: token ?? null };
 }
+var INVALID_WS_CHARS = /[:\\/?\*[\]]/g;
+function sanitizeName(name) {
+  return name.replace(INVALID_WS_CHARS, "_").slice(0, 31) || "Sheet";
+}
+var xlsxPromise2 = null;
+var loadXlsx2 = () => xlsxPromise2 ??= import('xlsx');
+function useExcel() {
+  const [isExporting, setIsExporting] = React36.useState(false);
+  const exportSheets = React36.useCallback(async (sheets, options = {}) => {
+    const { fileName = "export", onSave } = options;
+    setIsExporting(true);
+    try {
+      const XLSX = await loadXlsx2();
+      const wb = XLSX.utils.book_new();
+      for (const sheet of sheets) {
+        let headers;
+        if (sheet.columns) {
+          headers = sheet.columns;
+        } else {
+          const seen = /* @__PURE__ */ new Set();
+          for (const row of sheet.rows) {
+            if (!Array.isArray(row)) {
+              for (const k of Object.keys(row)) seen.add(k);
+            }
+          }
+          headers = Array.from(seen);
+        }
+        const aoa = [];
+        if (headers.length > 0) aoa.push(headers);
+        for (const row of sheet.rows) {
+          if (Array.isArray(row)) {
+            aoa.push(row);
+          } else {
+            aoa.push(headers.map((h) => row[h] ?? null));
+          }
+        }
+        const ws = XLSX.utils.aoa_to_sheet(aoa);
+        if (headers.length > 0) {
+          for (let ci = 0; ci < headers.length; ci++) {
+            const addr = XLSX.utils.encode_cell({ r: 0, c: ci });
+            if (ws[addr]) ws[addr].s = { font: { bold: true } };
+          }
+        }
+        const colWidths = headers.map((h) => Math.min(h.length, 40));
+        for (const row of aoa.slice(1)) {
+          row.forEach((cell, ci) => {
+            const len = cell == null ? 0 : String(cell).length;
+            if (len > (colWidths[ci] ?? 0)) colWidths[ci] = Math.min(len, 40);
+          });
+        }
+        ws["!cols"] = colWidths.map((w) => ({ wch: w + 2 }));
+        XLSX.utils.book_append_sheet(wb, ws, sanitizeName(sheet.name));
+      }
+      const out = XLSX.write(wb, { bookType: "xlsx", type: "array" });
+      const blob = new Blob([out], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+      const name = `${fileName}.xlsx`;
+      if (onSave) {
+        await onSave(blob, name);
+      } else {
+        downloadBlob(blob, name);
+      }
+    } finally {
+      setIsExporting(false);
+    }
+  }, []);
+  const readWorkbook = React36.useCallback(async (source) => {
+    const XLSX = await loadXlsx2();
+    let bytes;
+    if (source instanceof Uint8Array) {
+      bytes = source;
+    } else if (source instanceof ArrayBuffer) {
+      bytes = new Uint8Array(source);
+    } else {
+      bytes = new Uint8Array(await source.arrayBuffer());
+    }
+    const wb = XLSX.read(bytes, { type: "array" });
+    return wb.SheetNames.map((name) => {
+      const ws = wb.Sheets[name];
+      const aoa = XLSX.utils.sheet_to_json(ws, { header: 1, blankrows: false, defval: null });
+      if (aoa.length === 0) return { name, rows: [] };
+      const headerRow = aoa[0] ?? [];
+      const headers = headerRow.map(
+        (h, i) => h != null && String(h).length ? String(h) : `col_${i}`
+      );
+      const rows = aoa.slice(1).map((row) => {
+        const rec = {};
+        headers.forEach((h, i) => {
+          rec[h] = row[i] ?? null;
+        });
+        return rec;
+      });
+      return { name, rows };
+    });
+  }, []);
+  return { exportSheets, readWorkbook, isExporting };
+}
+var jspdfPromise2 = null;
+var loadJspdf2 = () => jspdfPromise2 ??= import('jspdf');
+function usePdf() {
+  const [isExporting, setIsExporting] = React36.useState(false);
+  const exportCanvases = React36.useCallback(async (pages, options = {}) => {
+    const { fileName = "report", onSave, orientation = "landscape" } = options;
+    const validPages = pages.filter((p) => p.canvas.width !== 0 && p.canvas.height !== 0);
+    if (validPages.length === 0) return;
+    setIsExporting(true);
+    try {
+      const { jsPDF } = await loadJspdf2();
+      const pdf = new jsPDF({ orientation, unit: "px", compress: true });
+      const pageW = pdf.internal.pageSize.getWidth();
+      const pageH = pdf.internal.pageSize.getHeight();
+      const TITLE_H = 28;
+      for (let i = 0; i < validPages.length; i++) {
+        const { canvas, title } = validPages[i];
+        if (i > 0) pdf.addPage();
+        let contentY = 0;
+        const contentH = title ? pageH - TITLE_H : pageH;
+        if (title) {
+          pdf.setFontSize(12);
+          pdf.setFont("helvetica", "bold");
+          pdf.text(title, pageW / 2, TITLE_H / 2 + 6, { align: "center" });
+          contentY = TITLE_H;
+        }
+        const scale = Math.min(pageW / canvas.width, contentH / canvas.height);
+        const w = canvas.width * scale;
+        const h = canvas.height * scale;
+        const x = (pageW - w) / 2;
+        const y = contentY + (contentH - h) / 2;
+        pdf.addImage(canvas.toDataURL("image/png", 1), "PNG", x, y, w, h);
+      }
+      const blob = pdf.output("blob");
+      const name = `${fileName}.pdf`;
+      if (onSave) {
+        await onSave(blob, name);
+      } else {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = name;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    } finally {
+      setIsExporting(false);
+    }
+  }, []);
+  return { exportCanvases, isExporting };
+}
 var GRADIENT = "radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%)";
 function Jumbotron({
   eyebrow,
@@ -11808,6 +12015,7 @@ exports.runFieldRules = runFieldRules;
 exports.scorePassword = scorePassword;
 exports.useBreakpoint = useBreakpoint;
 exports.useCart = useCart;
+exports.useExcel = useExcel;
 exports.useFieldArray = useFieldArray;
 exports.useForm = useForm;
 exports.useFormField = useFormField;
@@ -11816,5 +12024,6 @@ exports.useJwt = useJwt;
 exports.useLocalStorage = useLocalStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useNotification = useNotification;
+exports.usePdf = usePdf;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map