gbs-add-block 1.2.7 → 1.2.8

package/source/components/datagridbeta/export/csv.ts

@@ -0,0 +1,32 @@
+import type { ExportTable } from "./table";
+
+/** Spreadsheet apps execute cells starting with these characters as formulas. */
+const FORMULA_PREFIX = /^[=+\-@\t\r]/;
+
+function escapeField(text: string, isText: boolean, delimiter: string): string {
+  const safe = isText && FORMULA_PREFIX.test(text) ? `'${text}` : text;
+  const needsQuotes =
+    safe.includes(delimiter) || safe.includes('"') || safe.includes("\n") || safe.includes("\r");
+  return needsQuotes ? `"${safe.replace(/"/g, '""')}"` : safe;
+}
+
+function serialize(table: ExportTable, delimiter: string): string {
+  const lines = [table.columns.map((c) => escapeField(c.header, true, delimiter)).join(delimiter)];
+  table.text.forEach((row, r) => {
+    lines.push(
+      row
+        .map((text, c) => escapeField(text, typeof table.values[r][c] === "string", delimiter))
+        .join(delimiter),
+    );
+  });
+  return lines.join("\r\n");
+}
+
+export const toCsv = (table: ExportTable) => serialize(table, ",");
+
+export const toTsv = (table: ExportTable) => serialize(table, "\t");
+
+export function createCsvBlob(table: ExportTable): Blob {
+  // The BOM makes Excel read the file as UTF-8.
+  return new Blob(["", toCsv(table)], { type: "text/csv;charset=utf-8" });
+}

package/source/components/datagridbeta/export/download.ts

@@ -0,0 +1,12 @@
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.rel = "noopener";
+  link.style.display = "none";
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/source/components/datagridbeta/export/pdf.ts

@@ -0,0 +1,61 @@
+import type { ExportTable } from "./table";
+
+export interface PrintOptions {
+  title: string;
+  orientation: "portrait" | "landscape";
+  paperSize: "A3" | "A4" | "A5" | "letter" | "legal";
+}
+
+const escapeHtml = (text: string) =>
+  text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+export function buildPrintHtml(table: ExportTable, options: PrintOptions): string {
+  const head = table.columns.map((c) => `<th>${escapeHtml(c.header)}</th>`).join("");
+  const numeric = table.columns.map((c) => c.type === "number");
+  const body = table.text
+    .map(
+      (row) =>
+        `<tr>${row
+          .map((text, i) => `<td${numeric[i] ? ' class="num"' : ""}>${escapeHtml(text)}</td>`)
+          .join("")}</tr>`,
+    )
+    .join("");
+
+  return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(options.title)}</title>
+<style>
+@page { size: ${options.paperSize} ${options.orientation}; margin: 12mm; }
+body { font: 9pt/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: #111; margin: 0; }
+h1 { font-size: 13pt; margin: 0 0 8px; }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #c8c8c8; padding: 3px 6px; text-align: start; vertical-align: top; }
+th { background: #f0f0f0; font-weight: 600; }
+thead { display: table-header-group; }
+tr { break-inside: avoid; }
+td.num { text-align: end; font-variant-numeric: tabular-nums; }
+</style></head><body><h1>${escapeHtml(options.title)}</h1>
+<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></body></html>`;
+}
+
+/**
+ * Opens the browser's print dialog with the table laid out for paper, where
+ * the user picks "Save as PDF". No PDF library is bundled.
+ */
+export function printTable(table: ExportTable, options: PrintOptions): void {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
+
+  const cleanup = () => iframe.remove();
+  iframe.addEventListener("load", () => {
+    const win = iframe.contentWindow;
+    if (!win) return cleanup();
+    win.addEventListener("afterprint", cleanup, { once: true });
+    win.focus();
+    win.print();
+    // Fallback for browsers that never fire afterprint.
+    setTimeout(cleanup, 60_000);
+  }, { once: true });
+
+  iframe.srcdoc = buildPrintHtml(table, options);
+  document.body.append(iframe);
+}

package/source/components/datagridbeta/export/table.ts

@@ -0,0 +1,73 @@
+import type { ColumnType, ExportCellValue, ResolvedColumn } from "../core/types";
+import { formatCellValue, toTime, type Formatters } from "../core/values";
+
+export interface ExportColumn {
+  header: string;
+  width: number;
+  type: ColumnType;
+}
+
+export interface ExportTable {
+  columns: ExportColumn[];
+  /** Typed values, for formats that keep types (XLSX). */
+  values: ExportCellValue[][];
+  /** Display text, for text formats (CSV, PDF, clipboard). */
+  text: string[][];
+}
+
+function typedValue<T>(column: ResolvedColumn<T>, raw: unknown, text: string): ExportCellValue {
+  if (raw === null || raw === undefined) return null;
+  if (column.def.options) return text;
+  if (typeof raw === "number" || typeof raw === "boolean") return raw;
+  if (raw instanceof Date) return raw;
+  if (column.type === "date") {
+    const time = toTime(raw);
+    return time === null ? text : new Date(time);
+  }
+  return text;
+}
+
+export function buildExportTable<T>(
+  rows: readonly T[],
+  items: readonly { column: ResolvedColumn<T>; width: number }[],
+  formatters: Formatters,
+): ExportTable {
+  const values: ExportCellValue[][] = [];
+  const text: string[][] = [];
+
+  for (const row of rows) {
+    const rowValues: ExportCellValue[] = [];
+    const rowText: string[] = [];
+    for (const { column } of items) {
+      const { exportValue } = column.def;
+      if (exportValue) {
+        const value = exportValue(row);
+        rowValues.push(value);
+        rowText.push(
+          value === null || value === undefined
+            ? ""
+            : value instanceof Date
+              ? formatters.date.format(value)
+              : String(value),
+        );
+      } else {
+        const raw = column.getValue(row);
+        const display = formatCellValue(column, raw, row, formatters);
+        rowValues.push(typedValue(column, raw, display));
+        rowText.push(display);
+      }
+    }
+    values.push(rowValues);
+    text.push(rowText);
+  }
+
+  return {
+    columns: items.map(({ column, width }) => ({
+      header: column.header,
+      width,
+      type: column.type,
+    })),
+    values,
+    text,
+  };
+}

package/source/components/datagridbeta/export/xlsx.ts

@@ -0,0 +1,145 @@
+import type { ExportCellValue } from "../core/types";
+import type { ExportTable } from "./table";
+import { createZip } from "./zip";
+
+const XML_HEADER = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+const MAIN_NS = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+const REL_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+const PKG_REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
+
+/** Characters XML 1.0 does not allow at all. */
+const INVALID_XML_CHARS = /[^\t\n\r -퟿-�\u{10000}-\u{10FFFF}]/gu;
+
+const XML_ENTITIES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+};
+
+export const escapeXml = (text: string) =>
+  text.replace(INVALID_XML_CHARS, "").replace(/[&<>"]/g, (c) => XML_ENTITIES[c]);
+
+export function columnName(index: number): string {
+  let n = index + 1;
+  let name = "";
+  while (n > 0) {
+    const remainder = (n - 1) % 26;
+    name = String.fromCharCode(65 + remainder) + name;
+    n = Math.floor((n - 1) / 26);
+  }
+  return name;
+}
+
+/** Excel serial date in local time. */
+function toSerialDate(date: Date): number {
+  return (date.getTime() - date.getTimezoneOffset() * 60_000) / 86_400_000 + 25_569;
+}
+
+// Style indexes into cellXfs below.
+const STYLE_HEADER = 1;
+const STYLE_DATE = 2;
+const STYLE_DATETIME = 3;
+
+function cell(ref: string, value: ExportCellValue, style = 0): string {
+  const s = style ? ` s="${style}"` : "";
+  if (value === null || value === undefined || value === "") return "";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? `<c r="${ref}"${s}><v>${value}</v></c>` : "";
+  }
+  if (typeof value === "boolean") return `<c r="${ref}" t="b"${s}><v>${value ? 1 : 0}</v></c>`;
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return "";
+    const serial = toSerialDate(value);
+    const dateStyle = Number.isInteger(serial) ? STYLE_DATE : STYLE_DATETIME;
+    return `<c r="${ref}" s="${dateStyle}"><v>${serial}</v></c>`;
+  }
+  return `<c r="${ref}" t="inlineStr"${s}><is><t xml:space="preserve">${escapeXml(value)}</t></is></c>`;
+}
+
+const STYLES = `${XML_HEADER}<styleSheet xmlns="${MAIN_NS}">\
+<numFmts count="2"><numFmt numFmtId="164" formatCode="yyyy-mm-dd"/><numFmt numFmtId="165" formatCode="yyyy-mm-dd hh:mm"/></numFmts>\
+<fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts>\
+<fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills>\
+<borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders>\
+<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>\
+<cellXfs count="4"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/>\
+<xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/>\
+<xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/>\
+<xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs>\
+<cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
+
+export function createXlsxBlob(table: ExportTable, sheetName = "Sheet1"): Blob {
+  const encoder = new TextEncoder();
+  const name = sheetName.replace(/[[\]:*?/\\]/g, " ").slice(0, 31) || "Sheet1";
+  const columnCount = Math.max(1, table.columns.length);
+  const lastRef = `${columnName(columnCount - 1)}${table.values.length + 1}`;
+
+  const header =
+    `${XML_HEADER}<worksheet xmlns="${MAIN_NS}">` +
+    `<sheetViews><sheetView workbookViewId="0"><pane ySplit="1" topLeftCell="A2" activePane="bottomLeft" state="frozen"/></sheetView></sheetViews>` +
+    `<cols>${table.columns
+      .map((c, i) => `<col min="${i + 1}" max="${i + 1}" width="${Math.max(8, Math.round(c.width / 7))}" customWidth="1"/>`)
+      .join("")}</cols>` +
+    `<sheetData><row r="1">${table.columns
+      .map((c, i) => cell(`${columnName(i)}1`, c.header, STYLE_HEADER))
+      .join("")}</row>`;
+
+  // Encode in chunks to keep peak memory low on large exports.
+  const chunks: Uint8Array[] = [encoder.encode(header)];
+  const names = table.columns.map((_, i) => columnName(i));
+  const CHUNK_ROWS = 2000;
+  for (let start = 0; start < table.values.length; start += CHUNK_ROWS) {
+    let xml = "";
+    const end = Math.min(table.values.length, start + CHUNK_ROWS);
+    for (let r = start; r < end; r++) {
+      const rowNumber = r + 2;
+      xml += `<row r="${rowNumber}">`;
+      table.values[r].forEach((value, c) => {
+        xml += cell(`${names[c]}${rowNumber}`, value);
+      });
+      xml += "</row>";
+    }
+    chunks.push(encoder.encode(xml));
+  }
+  chunks.push(encoder.encode(`</sheetData><autoFilter ref="A1:${lastRef}"/></worksheet>`));
+
+  const escapedName = escapeXml(name).replace(/'/g, "''");
+  const workbook =
+    `${XML_HEADER}<workbook xmlns="${MAIN_NS}" xmlns:r="${REL_NS}">` +
+    `<sheets><sheet name="${escapeXml(name)}" sheetId="1" r:id="rId1"/></sheets>` +
+    `<definedNames><definedName name="_xlnm._FilterDatabase" localSheetId="0" hidden="1">'${escapedName}'!$A$1:$${columnName(columnCount - 1)}$${table.values.length + 1}</definedName></definedNames>` +
+    `</workbook>`;
+
+  return createZip(
+    [
+      {
+        name: "[Content_Types].xml",
+        content:
+          `${XML_HEADER}<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
+          `<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>` +
+          `<Default Extension="xml" ContentType="application/xml"/>` +
+          `<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>` +
+          `<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>` +
+          `<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>` +
+          `</Types>`,
+      },
+      {
+        name: "_rels/.rels",
+        content: `${XML_HEADER}<Relationships xmlns="${PKG_REL_NS}"><Relationship Id="rId1" Type="${REL_NS}/officeDocument" Target="xl/workbook.xml"/></Relationships>`,
+      },
+      { name: "xl/workbook.xml", content: workbook },
+      {
+        name: "xl/_rels/workbook.xml.rels",
+        content:
+          `${XML_HEADER}<Relationships xmlns="${PKG_REL_NS}">` +
+          `<Relationship Id="rId1" Type="${REL_NS}/worksheet" Target="worksheets/sheet1.xml"/>` +
+          `<Relationship Id="rId2" Type="${REL_NS}/styles" Target="styles.xml"/>` +
+          `</Relationships>`,
+      },
+      { name: "xl/styles.xml", content: STYLES },
+      { name: "xl/worksheets/sheet1.xml", content: chunks },
+    ],
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  );
+}

package/source/components/datagridbeta/export/zip.ts

@@ -0,0 +1,87 @@
+/** Minimal ZIP writer (stored, uncompressed), enough for XLSX packages. */
+
+const CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+
+export function crc32(chunks: readonly Uint8Array[]): number {
+  let crc = 0xffffffff;
+  for (const chunk of chunks) {
+    for (let i = 0; i < chunk.length; i++) {
+      crc = CRC_TABLE[(crc ^ chunk[i]) & 0xff] ^ (crc >>> 8);
+    }
+  }
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+export interface ZipEntry {
+  name: string;
+  /** Content as text, or pre-encoded chunks for large files. */
+  content: string | Uint8Array[];
+}
+
+export function createZip(entries: readonly ZipEntry[], type = "application/zip"): Blob {
+  const encoder = new TextEncoder();
+  const now = new Date();
+  const dosTime = (now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1);
+  const dosDate =
+    ((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate();
+
+  const parts: Uint8Array[] = [];
+  const central: Uint8Array[] = [];
+  let offset = 0;
+
+  for (const entry of entries) {
+    const name = encoder.encode(entry.name);
+    const chunks = typeof entry.content === "string" ? [encoder.encode(entry.content)] : entry.content;
+    const size = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+    const crc = crc32(chunks);
+
+    const local = new DataView(new ArrayBuffer(30));
+    local.setUint32(0, 0x04034b50, true);
+    local.setUint16(4, 20, true);
+    local.setUint16(6, 0x0800, true); // UTF-8 names
+    local.setUint16(8, 0, true); // stored
+    local.setUint16(10, dosTime, true);
+    local.setUint16(12, dosDate, true);
+    local.setUint32(14, crc, true);
+    local.setUint32(18, size, true);
+    local.setUint32(22, size, true);
+    local.setUint16(26, name.length, true);
+    local.setUint16(28, 0, true);
+    parts.push(new Uint8Array(local.buffer), name, ...chunks);
+
+    const header = new DataView(new ArrayBuffer(46));
+    header.setUint32(0, 0x02014b50, true);
+    header.setUint16(4, 20, true);
+    header.setUint16(6, 20, true);
+    header.setUint16(8, 0x0800, true);
+    header.setUint16(10, 0, true);
+    header.setUint16(12, dosTime, true);
+    header.setUint16(14, dosDate, true);
+    header.setUint32(16, crc, true);
+    header.setUint32(20, size, true);
+    header.setUint32(24, size, true);
+    header.setUint16(28, name.length, true);
+    header.setUint32(42, offset, true);
+    central.push(new Uint8Array(header.buffer), name);
+
+    offset += 30 + name.length + size;
+  }
+
+  const centralSize = central.reduce((sum, part) => sum + part.length, 0);
+  const end = new DataView(new ArrayBuffer(22));
+  end.setUint32(0, 0x06054b50, true);
+  end.setUint16(8, entries.length, true);
+  end.setUint16(10, entries.length, true);
+  end.setUint32(12, centralSize, true);
+  end.setUint32(16, offset, true);
+
+  return new Blob([...parts, ...central, new Uint8Array(end.buffer)] as BlobPart[], { type });
+}

package/source/components/datagridbeta/index.ts

@@ -0,0 +1,7 @@
+export { DataGrid } from "./react/DataGrid";
+export type { DataGridProps } from "./react/DataGrid";
+export type { GridSlot } from "./react/context";
+export type { ToolbarOptions } from "./react/Toolbar";
+export { defaultLocaleText } from "./react/locale";
+export type { LocaleText } from "./react/locale";
+export * from "./core";