@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableExport/index.tsx

@@ -10,6 +10,7 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { Button, Checkbox, Input } from "@multiplatform.one/forms";
 import { Popover, ScrollView, Separator, Text, XStack, YStack } from "tamagui";
+import { getViewLeafRows } from "../../utils/viewData";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export interface ExportOptions {
@@ -54,8 +55,11 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
   // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
 
-  // Resolve values: explicit props override context values
-  const data = props.data ?? (ctx?.computed.filteredData as T[]) ?? [];
+  // Resolve values: explicit props override context values.
+  // Context data is the CURRENT VIEW: filtered + sorted rows (the raw
+  // computed.filteredData is the pre-sort model, which exported rows in
+  // insertion order regardless of the visible sort).
+  const data = props.data ?? (ctx ? getViewLeafRows<T>(ctx.table) : []);
   const columns = props.columns ?? (ctx ? extractColumnsFromTable(ctx.table) : []);
 
   const {
@@ -104,6 +108,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
 
   const { knobProps } = useResolvedKnobs();
   const [isExporting, setIsExporting] = useState<string | null>(null);
+  const [exportError, setExportError] = useState<string | null>(null);
   const [exportOptions, setExportOptions] = useState<Partial<ExportOptions>>({
     includeHeaders: true,
     filename: filename,
@@ -113,6 +118,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
     if (disabled || isExporting) return;
 
     setIsExporting(format.id);
+    setExportError(null);
 
     try {
       const options: ExportOptions = {
@@ -133,6 +139,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       }
     } catch (error) {
       console.error("Export failed:", error);
+      setExportError(error instanceof Error ? error.message : String(error));
     } finally {
       setIsExporting(null);
     }
@@ -142,17 +149,24 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
     if (disabled || isExporting) return;
 
     setIsExporting("print");
+    setExportError(null);
     try {
-      await printTable(data, columns);
+      // Honor the same column selection the file exports use.
+      const selected = exportOptions.selectedColumns;
+      const printColumns = selected
+        ? columns.filter((col) => selected.includes(col.accessorKey || col.id || ""))
+        : columns;
+      await printTable(data, printColumns);
     } catch (error) {
       console.error("Print failed:", error);
+      setExportError(error instanceof Error ? error.message : String(error));
     } finally {
       setIsExporting(null);
     }
   };
 
   return (
-    <XStack gap="$2" alignItems="center">
+    <XStack gap="$2" alignItems="center" flexWrap="wrap">
       {/* Quick Export Buttons */}
       {exportFormats
         .filter((format) => format.enabled)
@@ -194,16 +208,26 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
         isExporting={isExporting}
         columns={columns}
       />
+
+      {/* Export/print failures were previously swallowed into console.error;
+          surface them inline like form field errors (role=alert). */}
+      {exportError != null && (
+        <Text role="alert" aria-live="polite" fontSize="$3" color="$red11">
+          {exportError}
+        </Text>
+      )}
     </XStack>
   );
 }
 
-// Extract column metadata from TanStack Table instance for context fallback
+// Extract column metadata from TanStack Table instance for context fallback.
+// Visible leaf columns only, in display order — hidden columns are excluded
+// from the export and column reordering/pinning is honored.
 function extractColumnsFromTable(
   table: any,
 ): Array<{ accessorKey?: string; header?: string; id?: string }> {
   try {
-    return table.getAllColumns().map((col: any) => ({
+    return table.getVisibleLeafColumns().map((col: any) => ({
       id: col.id,
       accessorKey: col.id,
       header: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id,
@@ -254,7 +278,10 @@ function ExportOptionsPopover({
   }));
 
   return (
-    <Popover>
+    // LC-06/LC-10: collision handling — without stayInFrame/resize the tall
+    // option list painted past the viewport and the Export Formats / Print
+    // rows below the fold were unreachable (no scroll, no clamp).
+    <Popover stayInFrame allowFlip resize>
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
@@ -274,125 +301,132 @@ function ExportOptionsPopover({
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}
+        padding={0}
+        overflow="hidden"
       >
-        <YStack {...knobProps.panelPadding} gap="$4">
-          <Text fontSize="$5" fontWeight="600">
-            Export Options
-          </Text>
-
-          {/* Filename */}
-          <YStack gap="$2">
-            <Text fontSize="$3" fontWeight="500">
-              Filename
+        {/* The popper resize middleware caps the height to the viewport; the
+            ScrollView keeps every section reachable (same pattern as
+            DataTableDateFilter). */}
+        <Popover.ScrollView minHeight={0}>
+          <YStack {...knobProps.panelPadding} gap="$4">
+            <Text fontSize="$5" fontWeight="600">
+              Export Options
             </Text>
-            <Input
-              value={exportOptions.filename || ""}
-              onChangeText={(text) =>
+
+            {/* Filename */}
+            <YStack gap="$2">
+              <Text fontSize="$3" fontWeight="500">
+                Filename
+              </Text>
+              <Input
+                value={exportOptions.filename || ""}
+                onChangeText={(text) =>
+                  onOptionsChange({
+                    ...exportOptions,
+                    filename: text,
+                  })
+                }
+                placeholder="Enter filename"
+              />
+            </YStack>
+
+            {/* Include Headers */}
+            <Checkbox
+              label="Include headers"
+              checked={exportOptions.includeHeaders ?? true}
+              onCheckedChange={(checked) =>
                 onOptionsChange({
                   ...exportOptions,
-                  filename: text,
+                  includeHeaders: checked as boolean,
                 })
               }
-              placeholder="Enter filename"
             />
-          </YStack>
 
-          {/* Include Headers */}
-          <Checkbox
-            label="Include headers"
-            checked={exportOptions.includeHeaders ?? true}
-            onCheckedChange={(checked) =>
-              onOptionsChange({
-                ...exportOptions,
-                includeHeaders: checked as boolean,
-              })
-            }
-          />
-
-          {/* Column Selection */}
-          <YStack gap="$2">
-            <Text fontSize="$3" fontWeight="500">
-              Select Columns ({selectedColumns.size} of {availableColumns.length})
-            </Text>
-            <ScrollView maxHeight={200}>
-              <YStack gap="$1">
-                {availableColumns.map((col) => (
-                  <Checkbox
-                    key={col.key}
-                    label={col.header}
-                    checked={selectedColumns.has(col.key)}
-                    onCheckedChange={(checked) => {
-                      const newSelected = new Set(selectedColumns);
-                      if (checked) {
-                        newSelected.add(col.key);
-                      } else {
-                        newSelected.delete(col.key);
-                      }
-                      setSelectedColumns(newSelected);
-                      onOptionsChange({
-                        ...exportOptions,
-                        selectedColumns: Array.from(newSelected),
-                      });
-                    }}
-                  />
-                ))}
-              </YStack>
-            </ScrollView>
-          </YStack>
-
-          <Separator />
-
-          {/* Export Formats */}
-          <YStack gap="$2">
-            <Text fontSize="$4" fontWeight="500">
-              Export Formats
-            </Text>
-            {exportFormats.map((format) => (
-              <Button
-                key={format.id}
-                size={knobProps.sizeToken}
-                chromeless
-                justifyContent="flex-start"
-                disabled={disabled || isExporting === format.id || !format.enabled}
-                onPress={() => onExport(format)}
-                icon={format.icon}
-              >
+            {/* Column Selection */}
+            <YStack gap="$2">
+              <Text fontSize="$3" fontWeight="500">
+                Select Columns ({selectedColumns.size} of {availableColumns.length})
+              </Text>
+              <ScrollView maxHeight={200}>
                 <YStack gap="$1">
-                  <Text fontSize="$3" fontWeight="500">
-                    {format.label}
-                  </Text>
-                  <Text fontSize="$2" color="$color10">
-                    {format.description}
-                  </Text>
+                  {availableColumns.map((col) => (
+                    <Checkbox
+                      key={col.key}
+                      label={col.header}
+                      checked={selectedColumns.has(col.key)}
+                      onCheckedChange={(checked) => {
+                        const newSelected = new Set(selectedColumns);
+                        if (checked) {
+                          newSelected.add(col.key);
+                        } else {
+                          newSelected.delete(col.key);
+                        }
+                        setSelectedColumns(newSelected);
+                        onOptionsChange({
+                          ...exportOptions,
+                          selectedColumns: Array.from(newSelected),
+                        });
+                      }}
+                    />
+                  ))}
                 </YStack>
-                {isExporting === format.id && (
-                  <Text fontSize="$2" color="$accentColor" marginLeft="auto">
-                    ...
-                  </Text>
-                )}
-              </Button>
-            ))}
-          </YStack>
+              </ScrollView>
+            </YStack>
 
-          <Separator />
+            <Separator />
 
-          {/* Print */}
-          <Button
-            size={knobProps.sizeToken}
-            chromeless
-            justifyContent="flex-start"
-            disabled={disabled || isExporting === "print"}
-            onPress={onPrint}
-            icon={<PrinterIcon size={16} />}
-          >
-            Print Table
-            {isExporting === "print" && (
-              <Text fontSize="$2" color="$accentColor" marginLeft="auto">
-                ...
+            {/* Export Formats */}
+            <YStack gap="$2">
+              <Text fontSize="$4" fontWeight="500">
+                Export Formats
               </Text>
-            )}
-          </Button>
-        </YStack>
+              {exportFormats.map((format) => (
+                <Button
+                  key={format.id}
+                  size={knobProps.sizeToken}
+                  chromeless
+                  justifyContent="flex-start"
+                  disabled={disabled || isExporting === format.id || !format.enabled}
+                  onPress={() => onExport(format)}
+                  icon={format.icon}
+                >
+                  <YStack gap="$1">
+                    <Text fontSize="$3" fontWeight="500">
+                      {format.label}
+                    </Text>
+                    <Text fontSize="$2" color="$color10">
+                      {format.description}
+                    </Text>
+                  </YStack>
+                  {isExporting === format.id && (
+                    <Text fontSize="$2" color="$accentColor" marginInlineStart="auto">
+                      ...
+                    </Text>
+                  )}
+                </Button>
+              ))}
+            </YStack>
+
+            <Separator />
+
+            {/* Print */}
+            <Button
+              size={knobProps.sizeToken}
+              chromeless
+              justifyContent="flex-start"
+              disabled={disabled || isExporting === "print"}
+              onPress={onPrint}
+              icon={<PrinterIcon size={16} />}
+            >
+              Print Table
+              {isExporting === "print" && (
+                <Text fontSize="$2" color="$accentColor" marginInlineStart="auto">
+                  ...
+                </Text>
+              )}
+            </Button>
+          </YStack>
+        </Popover.ScrollView>
       </Popover.Content>
     </Popover>
   );
@@ -431,6 +465,41 @@ async function defaultExport<T>(
   }
 }
 
+/**
+ * Serialize a raw cell value for export. Nullish → empty string, but falsy
+ * values like 0 and false survive (String(value || "") used to blank them).
+ * Dates become ISO strings and plain objects JSON so nothing ever exports
+ * as "[object Object]".
+ */
+function toExportValue(value: any): string {
+  if (value == null) return "";
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+/** Quote a CSV field when it contains a delimiter, quote, or line break. */
+function escapeCsvField(value: string): string {
+  return /[",\n\r]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+
+/**
+ * CSV/formula-injection guard (OWASP): string cells beginning with =, +, -, @
+ * or tab get a leading apostrophe so spreadsheet apps treat them as text
+ * instead of evaluating them. Only raw string values are guarded — genuine
+ * numbers (e.g. -42) keep their sign and export unchanged.
+ */
+function guardCsvInjection(raw: any, value: string): string {
+  if (typeof raw === "string" && /^[=+\-@\t]/.test(value)) return `'${value}`;
+  return value;
+}
+
 // CSV Export
 async function exportAsCSV<T>(
   data: T[],
@@ -446,9 +515,11 @@ async function exportAsCSV<T>(
 
   let csvContent = "";
 
-  // Headers
+  // Headers (escaped like data fields — a comma in a header must not split it)
   if (includeHeaders) {
-    const headers = columns.map((col) => col.header || col.accessorKey || "").join(",");
+    const headers = columns
+      .map((col) => escapeCsvField(String(col.header || col.accessorKey || "")))
+      .join(",");
     csvContent += `${headers}\n`;
   }
 
@@ -456,22 +527,11 @@ async function exportAsCSV<T>(
   data.forEach((row) => {
     const values = columns.map((col) => {
       const key = col.accessorKey || col.id || "";
-      let value = (row as any)[key];
-
-      // Handle cell renderer
-      if (col.cell) {
-        try {
-          value = col.cell({ getValue: () => value, row: { original: row } });
-        } catch {
-          // Fallback to raw value
-        }
-      }
-
-      // Escape CSV values
-      const stringValue = String(value || "");
-      return stringValue.includes(",") || stringValue.includes('"')
-        ? `"${stringValue.replace(/"/g, '""')}"`
-        : stringValue;
+      // Export the raw accessor value. Cell renderers return JSX (which
+      // stringifies to "[object Object]") and bake presentation into the data,
+      // so they are intentionally NOT invoked here.
+      const raw = (row as any)[key];
+      return escapeCsvField(guardCsvInjection(raw, toExportValue(raw)));
     });
     csvContent += `${values.join(",")}\n`;
   });
@@ -554,7 +614,9 @@ async function exportAsPDF<T>(
   );
 }
 
-// Print functionality
+// Print functionality. Built with DOM nodes + textContent (never HTML string
+// interpolation) so cell values containing markup cannot inject into the
+// print document (XSS via `<img onerror>`-style data).
 async function printTable<T>(
   data: T[],
   columns: Array<{
@@ -565,62 +627,55 @@ async function printTable<T>(
   }>,
 ): Promise<void> {
   const printWindow = window.open("", "_blank");
-  if (!printWindow) return;
-
-  const htmlContent = `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <title>Table Export</title>
-      <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        table { width: 100%; border-collapse: collapse; }
-        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-        th { background-color: #f2f2f2; font-weight: bold; }
-        tr:nth-child(even) { background-color: #f9f9f9; }
-        @media print { body { margin: 0; } }
-      </style>
-    </head>
-    <body>
-      <h1>Data Export</h1>
-      <table>
-        <thead>
-          <tr>
-            ${columns.map((col) => `<th>${col.header || col.accessorKey || ""}</th>`).join("")}
-          </tr>
-        </thead>
-        <tbody>
-          ${data
-            .map(
-              (row) => `
-            <tr>
-              ${columns
-                .map((col) => {
-                  const key = col.accessorKey || col.id || "";
-                  let value = (row as any)[key];
-                  if (col.cell) {
-                    try {
-                      value = col.cell({
-                        getValue: () => value,
-                        row: { original: row },
-                      });
-                    } catch {}
-                  }
-                  return `<td>${String(value || "")}</td>`;
-                })
-                .join("")}
-            </tr>
-          `,
-            )
-            .join("")}
-        </tbody>
-      </table>
-    </body>
-    </html>
+  if (!printWindow) {
+    throw new Error("Print window was blocked. Allow popups for this site and try again.");
+  }
+
+  const doc = printWindow.document;
+  doc.title = "Table Export";
+
+  const style = doc.createElement("style");
+  style.textContent = `
+    body { font-family: Arial, sans-serif; margin: 20px; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+    th { background-color: #f2f2f2; font-weight: bold; }
+    tr:nth-child(even) { background-color: #f9f9f9; }
+    @media print { body { margin: 0; } }
   `;
+  doc.head.appendChild(style);
+
+  const heading = doc.createElement("h1");
+  heading.textContent = "Data Export";
+  doc.body.appendChild(heading);
+
+  const tableEl = doc.createElement("table");
+  const thead = doc.createElement("thead");
+  const headRow = doc.createElement("tr");
+  for (const col of columns) {
+    const th = doc.createElement("th");
+    th.textContent = String(col.header || col.accessorKey || "");
+    headRow.appendChild(th);
+  }
+  thead.appendChild(headRow);
+  tableEl.appendChild(thead);
+
+  const tbody = doc.createElement("tbody");
+  for (const row of data) {
+    const tr = doc.createElement("tr");
+    for (const col of columns) {
+      const key = col.accessorKey || col.id || "";
+      const td = doc.createElement("td");
+      // Same raw-value derivation as the CSV export — cell renderers return
+      // JSX and must not reach the document.
+      td.textContent = toExportValue((row as any)[key]);
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  tableEl.appendChild(tbody);
+  doc.body.appendChild(tableEl);
 
-  printWindow.document.write(htmlContent);
-  printWindow.document.close();
   printWindow.print();
 }