@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTableExport/index.native.js

@@ -5,11 +5,26 @@ 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.native.js";
 import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
 function DataTableExport(props) {
-  var _ref, _props_data, _props_columns;
+  var _props_data, _props_columns;
   var ctx = useDataTableState();
-  var data = (_ref = (_props_data = props.data) !== null && _props_data !== void 0 ? _props_data : ctx === null || ctx === void 0 ? void 0 : ctx.computed.filteredData) !== null && _ref !== void 0 ? _ref : [];
+  var data = (_props_data = props.data) !== null && _props_data !== void 0 ? _props_data : ctx ? getViewLeafRows(ctx.table) : [];
   var columns = (_props_columns = props.columns) !== null && _props_columns !== void 0 ? _props_columns : ctx ? extractColumnsFromTable(ctx.table) : [];
   var {
     filename = "export",
@@ -61,6 +76,7 @@ function DataTableExport(props) {
     knobProps
   } = useResolvedKnobs();
   var [isExporting, setIsExporting] = useState(null);
+  var [exportError, setExportError] = useState(null);
   var [exportOptions, setExportOptions] = useState({
     includeHeaders: true,
     filename
@@ -68,6 +84,7 @@ function DataTableExport(props) {
   var handleExport = async function handleExport2(format) {
     if (disabled || isExporting) return;
     setIsExporting(format.id);
+    setExportError(null);
     try {
       var _exportOptions_includeHeaders;
       var options = {
@@ -86,6 +103,7 @@ function DataTableExport(props) {
       }
     } catch (error) {
       console.error("Export failed:", error);
+      setExportError(_instanceof(error, Error) ? error.message : String(error));
     } finally {
       setIsExporting(null);
     }
@@ -93,10 +111,16 @@ function DataTableExport(props) {
   var handlePrint = async function handlePrint2() {
     if (disabled || isExporting) return;
     setIsExporting("print");
+    setExportError(null);
     try {
-      await printTable(data, columns);
+      var selected = exportOptions.selectedColumns;
+      var printColumns = selected ? columns.filter(function (col) {
+        return selected.includes(col.accessorKey || col.id || "");
+      }) : columns;
+      await printTable(data, printColumns);
     } catch (error) {
       console.error("Print failed:", error);
+      setExportError(_instanceof(error, Error) ? error.message : String(error));
     } finally {
       setIsExporting(null);
     }
@@ -104,6 +128,7 @@ function DataTableExport(props) {
   return /* @__PURE__ */_jsxs(XStack, {
     gap: "$2",
     alignItems: "center",
+    flexWrap: "wrap",
     children: [/* Quick Export Buttons */
     exportFormats.filter(function (format) {
       return format.enabled;
@@ -140,12 +165,21 @@ function DataTableExport(props) {
       disabled,
       isExporting,
       columns
+    }),
+    /* Export/print failures were previously swallowed into console.error;
+    surface them inline like form field errors (role=alert). */
+    exportError != null && /* @__PURE__ */_jsx(Text, {
+      role: "alert",
+      "aria-live": "polite",
+      fontSize: "$3",
+      color: "$red11",
+      children: exportError
     })]
   });
 }
 function extractColumnsFromTable(table) {
   try {
-    return table.getAllColumns().map(function (col) {
+    return table.getVisibleLeafColumns().map(function (col) {
       return {
         id: col.id,
         accessorKey: col.id,
@@ -182,156 +216,175 @@ function ExportOptionsPopover(param) {
       header: col.header || col.accessorKey || col.id || ""
     };
   });
-  return /* @__PURE__ */_jsxs(Popover, {
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(Button, {
-        size: knobProps.sizeToken,
-        chromeless: true,
-        icon: /* @__PURE__ */_jsx(GearIcon, {
-          size: 16
-        }),
-        disabled,
-        "aria-label": "Export options",
-        children: "Options"
-      })
-    }), /* @__PURE__ */_jsx(Popover.Content, {
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      enterStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      exitStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      minWidth: popoverMinWidth,
-      children: /* @__PURE__ */_jsxs(YStack, {
-        ...knobProps.panelPadding,
-        gap: "$4",
-        children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: "$5",
-          fontWeight: "600",
-          children: "Export Options"
-        }), /* Filename */
-        /* @__PURE__ */_jsxs(YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */_jsx(Text, {
-            fontSize: "$3",
-            fontWeight: "500",
-            children: "Filename"
-          }), /* @__PURE__ */_jsx(Input, {
-            value: exportOptions.filename || "",
-            onChangeText: function onChangeText(text) {
-              return onOptionsChange({
-                ...exportOptions,
-                filename: text
-              });
-            },
-            placeholder: "Enter filename"
-          })]
-        }), /* Include Headers */
-        /* @__PURE__ */_jsx(Checkbox, {
-          label: "Include headers",
-          checked: (_exportOptions_includeHeaders = exportOptions.includeHeaders) !== null && _exportOptions_includeHeaders !== void 0 ? _exportOptions_includeHeaders : true,
-          onCheckedChange: function onCheckedChange(checked) {
-            return onOptionsChange({
-              ...exportOptions,
-              includeHeaders: checked
-            });
-          }
-        }), /* Column Selection */
-        /* @__PURE__ */_jsxs(YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */_jsxs(Text, {
-            fontSize: "$3",
-            fontWeight: "500",
-            children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
-          }), /* @__PURE__ */_jsx(ScrollView, {
-            maxHeight: 200,
-            children: /* @__PURE__ */_jsx(YStack, {
-              gap: "$1",
-              children: availableColumns.map(function (col) {
-                return /* @__PURE__ */_jsx(Checkbox, {
-                  label: col.header,
-                  checked: selectedColumns.has(col.key),
-                  onCheckedChange: function onCheckedChange(checked) {
-                    var newSelected = new Set(selectedColumns);
-                    if (checked) {
-                      newSelected.add(col.key);
-                    } else {
-                      newSelected.delete(col.key);
-                    }
-                    setSelectedColumns(newSelected);
-                    onOptionsChange({
-                      ...exportOptions,
-                      selectedColumns: Array.from(newSelected)
-                    });
-                  }
-                }, col.key);
-              })
-            })
-          })]
-        }), /* @__PURE__ */_jsx(Separator, {}), /* Export Formats */
-        /* @__PURE__ */_jsxs(YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */_jsx(Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Export Formats"
-          }), exportFormats.map(function (format) {
-            return /* @__PURE__ */_jsxs(Button, {
+  return (
+    // 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).
+    /* @__PURE__ */
+    _jsxs(Popover, {
+      stayInFrame: true,
+      allowFlip: true,
+      resize: true,
+      children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */_jsx(Button, {
+          size: knobProps.sizeToken,
+          chromeless: true,
+          icon: /* @__PURE__ */_jsx(GearIcon, {
+            size: 16
+          }),
+          disabled,
+          "aria-label": "Export options",
+          children: "Options"
+        })
+      }), /* @__PURE__ */_jsx(Popover.Content, {
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        exitStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        minWidth: popoverMinWidth,
+        padding: 0,
+        overflow: "hidden",
+        children: (
+        /* The popper resize middleware caps the height to the viewport; the
+        ScrollView keeps every section reachable (same pattern as
+        DataTableDateFilter). */
+        /* @__PURE__ */
+        _jsx(Popover.ScrollView, {
+          minHeight: 0,
+          children: /* @__PURE__ */_jsxs(YStack, {
+            ...knobProps.panelPadding,
+            gap: "$4",
+            children: [/* @__PURE__ */_jsx(Text, {
+              fontSize: "$5",
+              fontWeight: "600",
+              children: "Export Options"
+            }), /* Filename */
+            /* @__PURE__ */_jsxs(YStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */_jsx(Text, {
+                fontSize: "$3",
+                fontWeight: "500",
+                children: "Filename"
+              }), /* @__PURE__ */_jsx(Input, {
+                value: exportOptions.filename || "",
+                onChangeText: function onChangeText(text) {
+                  return onOptionsChange({
+                    ...exportOptions,
+                    filename: text
+                  });
+                },
+                placeholder: "Enter filename"
+              })]
+            }), /* Include Headers */
+            /* @__PURE__ */_jsx(Checkbox, {
+              label: "Include headers",
+              checked: (_exportOptions_includeHeaders = exportOptions.includeHeaders) !== null && _exportOptions_includeHeaders !== void 0 ? _exportOptions_includeHeaders : true,
+              onCheckedChange: function onCheckedChange(checked) {
+                return onOptionsChange({
+                  ...exportOptions,
+                  includeHeaders: checked
+                });
+              }
+            }), /* Column Selection */
+            /* @__PURE__ */_jsxs(YStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */_jsxs(Text, {
+                fontSize: "$3",
+                fontWeight: "500",
+                children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
+              }), /* @__PURE__ */_jsx(ScrollView, {
+                maxHeight: 200,
+                children: /* @__PURE__ */_jsx(YStack, {
+                  gap: "$1",
+                  children: availableColumns.map(function (col) {
+                    return /* @__PURE__ */_jsx(Checkbox, {
+                      label: col.header,
+                      checked: selectedColumns.has(col.key),
+                      onCheckedChange: function onCheckedChange(checked) {
+                        var newSelected = new Set(selectedColumns);
+                        if (checked) {
+                          newSelected.add(col.key);
+                        } else {
+                          newSelected.delete(col.key);
+                        }
+                        setSelectedColumns(newSelected);
+                        onOptionsChange({
+                          ...exportOptions,
+                          selectedColumns: Array.from(newSelected)
+                        });
+                      }
+                    }, col.key);
+                  })
+                })
+              })]
+            }), /* @__PURE__ */_jsx(Separator, {}), /* Export Formats */
+            /* @__PURE__ */_jsxs(YStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */_jsx(Text, {
+                fontSize: "$4",
+                fontWeight: "500",
+                children: "Export Formats"
+              }), exportFormats.map(function (format) {
+                return /* @__PURE__ */_jsxs(Button, {
+                  size: knobProps.sizeToken,
+                  chromeless: true,
+                  justifyContent: "flex-start",
+                  disabled: disabled || isExporting === format.id || !format.enabled,
+                  onPress: function onPress() {
+                    return onExport(format);
+                  },
+                  icon: format.icon,
+                  children: [/* @__PURE__ */_jsxs(YStack, {
+                    gap: "$1",
+                    children: [/* @__PURE__ */_jsx(Text, {
+                      fontSize: "$3",
+                      fontWeight: "500",
+                      children: format.label
+                    }), /* @__PURE__ */_jsx(Text, {
+                      fontSize: "$2",
+                      color: "$color10",
+                      children: format.description
+                    })]
+                  }), isExporting === format.id && /* @__PURE__ */_jsx(Text, {
+                    fontSize: "$2",
+                    color: "$accentColor",
+                    marginInlineStart: "auto",
+                    children: "..."
+                  })]
+                }, format.id);
+              })]
+            }), /* @__PURE__ */_jsx(Separator, {}), /* Print */
+            /* @__PURE__ */_jsxs(Button, {
               size: knobProps.sizeToken,
               chromeless: true,
               justifyContent: "flex-start",
-              disabled: disabled || isExporting === format.id || !format.enabled,
-              onPress: function onPress() {
-                return onExport(format);
-              },
-              icon: format.icon,
-              children: [/* @__PURE__ */_jsxs(YStack, {
-                gap: "$1",
-                children: [/* @__PURE__ */_jsx(Text, {
-                  fontSize: "$3",
-                  fontWeight: "500",
-                  children: format.label
-                }), /* @__PURE__ */_jsx(Text, {
-                  fontSize: "$2",
-                  color: "$color10",
-                  children: format.description
-                })]
-              }), isExporting === format.id && /* @__PURE__ */_jsx(Text, {
+              disabled: disabled || isExporting === "print",
+              onPress: onPrint,
+              icon: /* @__PURE__ */_jsx(PrinterIcon, {
+                size: 16
+              }),
+              children: ["Print Table", isExporting === "print" && /* @__PURE__ */_jsx(Text, {
                 fontSize: "$2",
                 color: "$accentColor",
-                marginLeft: "auto",
+                marginInlineStart: "auto",
                 children: "..."
               })]
-            }, format.id);
-          })]
-        }), /* @__PURE__ */_jsx(Separator, {}), /* Print */
-        /* @__PURE__ */_jsxs(Button, {
-          size: knobProps.sizeToken,
-          chromeless: true,
-          justifyContent: "flex-start",
-          disabled: disabled || isExporting === "print",
-          onPress: onPrint,
-          icon: /* @__PURE__ */_jsx(PrinterIcon, {
-            size: 16
-          }),
-          children: ["Print Table", isExporting === "print" && /* @__PURE__ */_jsx(Text, {
-            fontSize: "$2",
-            color: "$accentColor",
-            marginLeft: "auto",
-            children: "..."
-          })]
-        })]
-      })
-    })]
-  });
+            })]
+          })
+        }))
+      })]
+    })
+  );
 }
 async function defaultExport(data, columns, options) {
   var {
@@ -354,6 +407,25 @@ async function defaultExport(data, columns, options) {
       throw new Error(`Unsupported export format: ${format}`);
   }
 }
+function toExportValue(value) {
+  if (value == null) return "";
+  if (_instanceof(value, Date)) return value.toISOString();
+  if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch (unused) {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function escapeCsvField(value) {
+  return /[",\n\r]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+function guardCsvInjection(raw, value) {
+  if (typeof raw === "string" && /^[=+\-@\t]/.test(value)) return `'${value}`;
+  return value;
+}
 async function exportAsCSV(data, columns, options) {
   var {
     includeHeaders = true,
@@ -362,7 +434,7 @@ async function exportAsCSV(data, columns, options) {
   var csvContent = "";
   if (includeHeaders) {
     var headers = columns.map(function (col) {
-      return col.header || col.accessorKey || "";
+      return escapeCsvField(String(col.header || col.accessorKey || ""));
     }).join(",");
     csvContent += `${headers}
 `;
@@ -370,21 +442,8 @@ async function exportAsCSV(data, columns, options) {
   data.forEach(function (row) {
     var values = columns.map(function (col) {
       var key = col.accessorKey || col.id || "";
-      var value = row[key];
-      if (col.cell) {
-        try {
-          value = col.cell({
-            getValue: function getValue() {
-              return value;
-            },
-            row: {
-              original: row
-            }
-          });
-        } catch (unused) {}
-      }
-      var stringValue = String(value || "");
-      return stringValue.includes(",") || stringValue.includes('"') ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
+      var raw = row[key];
+      return escapeCsvField(guardCsvInjection(raw, toExportValue(raw)));
     });
     csvContent += `${values.join(",")}
 `;
@@ -414,62 +473,104 @@ async function exportAsPDF(_data, _columns, _options) {
 }
 async function printTable(data, columns) {
   var printWindow = window.open("", "_blank");
-  if (!printWindow) return;
-  var 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(function (col) {
-    return `<th>${col.header || col.accessorKey || ""}</th>`;
-  }).join("")}
-          </tr>
-        </thead>
-        <tbody>
-          ${data.map(function (row) {
-    return `
-            <tr>
-              ${columns.map(function (col) {
-      var key = col.accessorKey || col.id || "";
-      var value = row[key];
-      if (col.cell) {
+  if (!printWindow) {
+    throw new Error("Print window was blocked. Allow popups for this site and try again.");
+  }
+  var doc = printWindow.document;
+  doc.title = "Table Export";
+  var 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);
+  var heading = doc.createElement("h1");
+  heading.textContent = "Data Export";
+  doc.body.appendChild(heading);
+  var tableEl = doc.createElement("table");
+  var thead = doc.createElement("thead");
+  var headRow = doc.createElement("tr");
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var col = _step.value;
+      var th = doc.createElement("th");
+      th.textContent = String(col.header || col.accessorKey || "");
+      headRow.appendChild(th);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  thead.appendChild(headRow);
+  tableEl.appendChild(thead);
+  var tbody = doc.createElement("tbody");
+  var _iteratorNormalCompletion1 = true,
+    _didIteratorError1 = false,
+    _iteratorError1 = void 0;
+  try {
+    for (var _iterator1 = data[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+      var row = _step1.value;
+      var tr = doc.createElement("tr");
+      var _iteratorNormalCompletion2 = true,
+        _didIteratorError2 = false,
+        _iteratorError2 = void 0;
+      try {
+        for (var _iterator2 = columns[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var col1 = _step2.value;
+          var key = col1.accessorKey || col1.id || "";
+          var td = doc.createElement("td");
+          td.textContent = toExportValue(row[key]);
+          tr.appendChild(td);
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
         try {
-          value = col.cell({
-            getValue: function getValue() {
-              return value;
-            },
-            row: {
-              original: row
-            }
-          });
-        } catch (unused) {}
+          if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
       }
-      return `<td>${String(value || "")}</td>`;
-    }).join("")}
-            </tr>
-          `;
-  }).join("")}
-        </tbody>
-      </table>
-    </body>
-    </html>
-  `;
-  printWindow.document.write(htmlContent);
-  printWindow.document.close();
+      tbody.appendChild(tr);
+    }
+  } catch (err) {
+    _didIteratorError1 = true;
+    _iteratorError1 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+        _iterator1.return();
+      }
+    } finally {
+      if (_didIteratorError1) {
+        throw _iteratorError1;
+      }
+    }
+  }
+  tableEl.appendChild(tbody);
+  doc.body.appendChild(tableEl);
   printWindow.print();
 }
 function downloadFile(content, filename, mimeType) {