@multiplatform.one/table 7.11.0 → 7.15.0

package/src/components/DataTableExport/index.tsx

@@ -8,8 +8,8 @@ import {
 import { downloadBlob } from "@multiplatform.one/platform";
 import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
-import { Button, Checkbox, Input } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, XStack, YStack, isWeb } from "tamagui";
+import { Button, Checkbox, FloatingPanel, Input } from "@multiplatform.one/forms";
+import { ScrollView, Separator, Text, XStack, YStack, isWeb } from "tamagui";
 import type { DataTableField } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { getViewLeafRows } from "../../utils/viewData";
@@ -213,7 +213,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       </Button>
 
       {/* Advanced Export Options */}
-      <ExportOptionsPopover
+      <ExportOptionsPanel
         exportFormats={exportFormats}
         exportOptions={exportOptions}
         onOptionsChange={setExportOptions}
@@ -252,9 +252,9 @@ function extractColumnsFromTable(table: any): ExportColumn[] {
   }
 }
 
-// Export Options Popover
+// Export Options Panel
 
-interface ExportOptionsPopoverProps {
+interface ExportOptionsPanelProps {
   exportFormats: ExportFormat[];
   exportOptions: Partial<ExportOptions>;
   onOptionsChange: (options: Partial<ExportOptions>) => void;
@@ -265,7 +265,7 @@ interface ExportOptionsPopoverProps {
   columns: ExportColumn[];
 }
 
-function ExportOptionsPopover({
+function ExportOptionsPanel({
   exportFormats,
   exportOptions,
   onOptionsChange,
@@ -274,11 +274,12 @@ function ExportOptionsPopover({
   disabled,
   isExporting,
   columns,
-}: ExportOptionsPopoverProps) {
+}: ExportOptionsPanelProps) {
   const { knobProps } = useResolvedKnobs();
   const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const sz = knobProps.sizeToken;
   const popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [open, setOpen] = useState(false);
   const [selectedColumns, setSelectedColumns] = useState<Set<string>>(
     new Set(columns.map((col) => col.accessorKey || col.id || "")),
   );
@@ -288,157 +289,149 @@ function ExportOptionsPopover({
     header: col.header || col.accessorKey || col.id || "",
   }));
 
-  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).
-    <Popover stayInFrame allowFlip resize>
-      <Popover.Trigger asChild>
-        <Button
-          size={knobProps.sizeToken}
-          chromeless
-          icon={<GearIcon size={iconPx} />}
-          disabled={disabled}
-          aria-label="Export options"
-        >
-          Options
-        </Button>
-      </Popover.Trigger>
-
-      <Popover.Content
-        {...knobProps.elevatedSurface}
-        transition={knobProps.transition}
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
-        minWidth={popoverMinWidth}
-        padding={0}
-        overflow="hidden"
-      >
-        {/* 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 {...knobProps.label} fontWeight="400">
-              Export Options
-            </Text>
-
-            {/* Filename */}
-            <YStack gap="$2">
-              <Text {...knobProps.label} fontWeight="400">
-                Filename
-              </Text>
-              <Input
-                value={exportOptions.filename || ""}
-                onChangeText={(text) =>
-                  onOptionsChange({
-                    ...exportOptions,
-                    filename: text,
-                  })
-                }
-                placeholder="Enter filename"
-              />
-            </YStack>
+  const trigger = (
+    <Button
+      size={knobProps.sizeToken}
+      chromeless
+      icon={<GearIcon size={iconPx} />}
+      disabled={disabled}
+      aria-label="Export options"
+    >
+      Options
+    </Button>
+  );
 
-            {/* Include Headers */}
-            <Checkbox
-              label="Include headers"
-              checked={exportOptions.includeHeaders ?? true}
-              onCheckedChange={(checked) =>
-                onOptionsChange({
-                  ...exportOptions,
-                  includeHeaders: checked as boolean,
-                })
-              }
-            />
-
-            {/* Column Selection */}
-            <YStack gap="$2">
-              <Text {...knobProps.label} fontWeight="400">
-                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>
+  return (
+    // LC-06/LC-10: the option list is taller than most viewports. FloatingPanel
+    // clamps it inside the viewport and scrolls, so the Export Formats and
+    // Print rows below the fold stay reachable.
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      trigger={trigger}
+      triggerSizing="content"
+      disabled={disabled}
+      scrollable
+    >
+      <YStack gap="$4" minWidth={popoverMinWidth} data-dismiss-class="compose">
+        <Text {...knobProps.label} fontWeight="400">
+          Export Options
+        </Text>
 
-            <Separator />
-
-            {/* Export Formats */}
-            <YStack gap="$2">
-              <Text {...knobProps.label} fontWeight="400">
-                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}
-                >
-                  <YStack gap="$1">
-                    <Text {...knobProps.label} fontWeight="400">
-                      {format.label}
-                    </Text>
-                    <Text fontSize="$2" color="$color10">
-                      {format.description}
-                    </Text>
-                  </YStack>
-                  {isExporting === format.id && (
-                    <Text fontSize="$2" color="$accentColor" marginInlineStart="auto">
-                      ...
-                    </Text>
-                  )}
-                </Button>
+        {/* Filename */}
+        <YStack gap="$2">
+          <Text {...knobProps.label} fontWeight="400">
+            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,
+              includeHeaders: checked as boolean,
+            })
+          }
+        />
+
+        {/* Column Selection */}
+        <YStack gap="$2">
+          <Text {...knobProps.label} fontWeight="400">
+            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 />
+        <Separator />
 
-            {/* Print */}
+        {/* Export Formats */}
+        <YStack gap="$2">
+          <Text {...knobProps.label} fontWeight="400">
+            Export Formats
+          </Text>
+          {exportFormats.map((format) => (
             <Button
+              key={format.id}
               size={knobProps.sizeToken}
               chromeless
               justifyContent="flex-start"
-              disabled={disabled || isExporting === "print"}
-              onPress={onPrint}
-              icon={<PrinterIcon size={iconPx} />}
+              disabled={disabled || isExporting === format.id || !format.enabled}
+              onPress={() => onExport(format)}
+              icon={format.icon}
             >
-              Print Table
-              {isExporting === "print" && (
+              <YStack gap="$1">
+                <Text {...knobProps.label} fontWeight="400">
+                  {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>
-        </Popover.ScrollView>
-      </Popover.Content>
-    </Popover>
+          ))}
+        </YStack>
+
+        <Separator />
+
+        {/* Print */}
+        <Button
+          size={knobProps.sizeToken}
+          chromeless
+          justifyContent="flex-start"
+          disabled={disabled || isExporting === "print"}
+          onPress={onPrint}
+          icon={<PrinterIcon size={iconPx} />}
+        >
+          Print Table
+          {isExporting === "print" && (
+            <Text fontSize="$2" color="$accentColor" marginInlineStart="auto">
+              ...
+            </Text>
+          )}
+        </Button>
+      </YStack>
+    </FloatingPanel>
   );
 }