@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTableDateFilter/index.tsx

@@ -8,9 +8,8 @@ import {
 } from "@phosphor-icons/react";
 import { formatAbsoluteDate, parseCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState, useMemo } from "react";
-import { Button, DatePicker } from "@multiplatform.one/forms";
+import { Button, DatePicker, FloatingPanel } from "@multiplatform.one/forms";
 import {
-  Popover,
   ScrollView,
   Separator,
   Text,
@@ -311,194 +310,166 @@ export function DataTableDateFilter({
     }
   };
 
-  return (
-    // LC-06: anchored editor — start-aligned to the trigger edge with
-    // collision handling (flip + clamp + resize inside the viewport).
-    <Popover
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      placement="bottom-start"
-      offset={4}
-      stayInFrame
-      allowFlip
-      resize
+  const trigger = (
+    <Button
+      size={knobProps.sizeToken}
+      disabled={disabled}
+      icon={<CalendarIcon size={iconPx} />}
+      justifyContent="flex-start"
+      minWidth={triggerMinWidth}
     >
-      <Popover.Trigger asChild>
-        <Button
-          size={knobProps.sizeToken}
-          disabled={disabled}
-          icon={<CalendarIcon size={iconPx} />}
-          justifyContent="flex-start"
-          minWidth={triggerMinWidth}
-        >
-          <Text
-            flex={1}
-            textAlign="left"
-            // LC-40: while disabled, the placeholder tier ($color10) drops
-            // below AA on the washed chrome — pin to the lowest AA step.
-            color={disabled ? "$color11" : value ? undefined : "$color10"}
-            fontSize="$3"
-            numberOfLines={1}
-          >
-            {getDisplayValue()}
-          </Text>
-          <CaretDownIcon size={iconPx} />
-        </Button>
-      </Popover.Trigger>
-
-      {/* Overlay contract: elevatedSurface + transition-paired enter/exit
-          motion (LC-24) — same fragments as the shared components
-          PopoverContent. The popper resize middleware caps the height to
-          the viewport; the ScrollView keeps every section reachable
-          instead of painting past the frame (LC-10). */}
-      <Popover.Content
-        {...knobProps.elevatedSurface}
-        transition={knobProps.transition}
-        enterStyle={{ opacity: 0, y: -4, scale: 0.97 }}
-        exitStyle={{ opacity: 0, y: -4, scale: 0.97 }}
-        minWidth={popoverMinWidth}
-        padding={0}
-        overflow="hidden"
+      <Text
+        flex={1}
+        textAlign="left"
+        // LC-40: while disabled, the placeholder tier ($color10) drops
+        // below AA on the washed chrome — pin to the lowest AA step.
+        color={disabled ? "$color11" : value ? undefined : "$color10"}
+        fontSize="$3"
+        numberOfLines={1}
       >
-        <Popover.ScrollView minHeight={0}>
-          <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-            <XStack justifyContent="space-between" alignItems="center">
-              <Text {...knobProps.label} fontWeight="400">
-                {t("Date Filter")}
-              </Text>
-              {value && (
-                <Button
-                  size={knobProps.sizeToken}
-                  onPress={handleClear}
-                  icon={<XIcon size={iconPx} />}
-                >
-                  {t("Clear")}
-                </Button>
-              )}
-            </XStack>
+        {getDisplayValue()}
+      </Text>
+      <CaretDownIcon size={iconPx} />
+    </Button>
+  );
 
-            {/* Quick Presets */}
-            {showPresets && (
-              <YStack gap="$2">
-                <Text {...knobProps.label} fontWeight="400">
-                  {t("Quick Filters")}
-                </Text>
-                <ScrollView maxHeight={presetListMaxHeight}>
-                  <YStack gap={PRESET_ROW_GAP_TOKEN}>
-                    {allPresets.map((preset) => (
-                      <Button
-                        key={preset.id}
-                        size={knobProps.sizeToken}
-                        justifyContent="flex-start"
-                        onPress={() => handlePresetSelect(preset)}
-                        {...(activePresetId === preset.id
-                          ? { theme: "accent" as any, backgroundColor: "$background" }
-                          : undefined)}
-                      >
-                        <Text fontSize="$3">{preset.label}</Text>
-                      </Button>
-                    ))}
-                  </YStack>
-                </ScrollView>
-              </YStack>
-            )}
-
-            <Separator />
-
-            {/* Custom Date Selection */}
-            <YStack {...knobProps.gap}>
-              <Text {...knobProps.label} fontWeight="400">
-                {t("Custom Date")}
-              </Text>
-
-              <XStack gap="$2">
-                <Button
-                  flex={1}
-                  size={knobProps.sizeToken}
-                  onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
-                >
-                  {t("Today")}
-                </Button>
-                <Button
-                  flex={1}
-                  size={knobProps.sizeToken}
-                  onPress={() =>
-                    handleCustomDateSelect(
-                      new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
-                      "is",
-                    )
-                  }
-                >
-                  {t("Yesterday")}
-                </Button>
-              </XStack>
-
-              {/* Date Range */}
-              <YStack gap="$2">
-                <Text {...knobProps.label} fontWeight="400">
-                  {t("Date Range")}
-                </Text>
-                <XStack gap="$2">
-                  <Button
-                    flex={1}
-                    size={knobProps.sizeToken}
-                    onPress={() =>
-                      handleDateRangeSelect(
-                        new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-                        new Date().toISOString(),
-                      )
-                    }
-                  >
-                    {t("Last 7 days")}
-                  </Button>
+  return (
+    // LC-06: anchored editor. FloatingPanel attaches flush to the trigger
+    // (MPO-38 cover contract), clamps inside the viewport and becomes a sheet
+    // at 640 and below.
+    <FloatingPanel open={isOpen} onOpenChange={setIsOpen} trigger={trigger} scrollable>
+      <YStack {...knobProps.gapLg} minWidth={popoverMinWidth} data-dismiss-class="compose">
+        <XStack justifyContent="space-between" alignItems="center">
+          <Text {...knobProps.label} fontWeight="400">
+            {t("Date Filter")}
+          </Text>
+          {value && (
+            <Button size={knobProps.sizeToken} onPress={handleClear} icon={<XIcon size={iconPx} />}>
+              {t("Clear")}
+            </Button>
+          )}
+        </XStack>
+
+        {/* Quick Presets */}
+        {showPresets && (
+          <YStack gap="$2">
+            <Text {...knobProps.label} fontWeight="400">
+              {t("Quick Filters")}
+            </Text>
+            <ScrollView maxHeight={presetListMaxHeight}>
+              <YStack gap={PRESET_ROW_GAP_TOKEN}>
+                {allPresets.map((preset) => (
                   <Button
-                    flex={1}
+                    key={preset.id}
                     size={knobProps.sizeToken}
-                    onPress={() =>
-                      handleDateRangeSelect(
-                        new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
-                        new Date().toISOString(),
-                      )
-                    }
+                    justifyContent="flex-start"
+                    onPress={() => handlePresetSelect(preset)}
+                    {...(activePresetId === preset.id
+                      ? { theme: "accent" as any, backgroundColor: "$background" }
+                      : undefined)}
                   >
-                    {t("Last 30 days")}
+                    <Text fontSize="$3">{preset.label}</Text>
                   </Button>
-                </XStack>
+                ))}
               </YStack>
+            </ScrollView>
+          </YStack>
+        )}
 
-              {/* DatePicker-based Custom Range Selection */}
-              <YStack gap="$2">
-                <Text {...knobProps.label} fontWeight="400">
-                  {t("Custom Range")}
-                </Text>
-                <XStack gap="$2">
-                  <View flex={1} data-testid="start-date-picker">
-                    <DatePicker
-                      placeholder={t("Start date")}
-                      label={t("From")}
-                      minDate={minDate}
-                      maxDate={maxDate}
-                      value={pickerRange.start ?? null}
-                      onChange={handleStartDatePick}
-                    />
-                  </View>
-                  <View flex={1} data-testid="end-date-picker">
-                    <DatePicker
-                      placeholder={t("End date")}
-                      label={t("To")}
-                      minDate={minDate}
-                      maxDate={maxDate}
-                      value={pickerRange.end ?? null}
-                      onChange={handleEndDatePick}
-                    />
-                  </View>
-                </XStack>
-              </YStack>
-            </YStack>
+        <Separator />
+
+        {/* Custom Date Selection */}
+        <YStack {...knobProps.gap}>
+          <Text {...knobProps.label} fontWeight="400">
+            {t("Custom Date")}
+          </Text>
+
+          <XStack gap="$2">
+            <Button
+              flex={1}
+              size={knobProps.sizeToken}
+              onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
+            >
+              {t("Today")}
+            </Button>
+            <Button
+              flex={1}
+              size={knobProps.sizeToken}
+              onPress={() =>
+                handleCustomDateSelect(
+                  new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+                  "is",
+                )
+              }
+            >
+              {t("Yesterday")}
+            </Button>
+          </XStack>
+
+          {/* Date Range */}
+          <YStack gap="$2">
+            <Text {...knobProps.label} fontWeight="400">
+              {t("Date Range")}
+            </Text>
+            <XStack gap="$2">
+              <Button
+                flex={1}
+                size={knobProps.sizeToken}
+                onPress={() =>
+                  handleDateRangeSelect(
+                    new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+                    new Date().toISOString(),
+                  )
+                }
+              >
+                {t("Last 7 days")}
+              </Button>
+              <Button
+                flex={1}
+                size={knobProps.sizeToken}
+                onPress={() =>
+                  handleDateRangeSelect(
+                    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+                    new Date().toISOString(),
+                  )
+                }
+              >
+                {t("Last 30 days")}
+              </Button>
+            </XStack>
+          </YStack>
+
+          {/* DatePicker-based Custom Range Selection */}
+          <YStack gap="$2">
+            <Text {...knobProps.label} fontWeight="400">
+              {t("Custom Range")}
+            </Text>
+            <XStack gap="$2">
+              <View flex={1} data-testid="start-date-picker">
+                <DatePicker
+                  placeholder={t("Start date")}
+                  label={t("From")}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  value={pickerRange.start ?? null}
+                  onChange={handleStartDatePick}
+                />
+              </View>
+              <View flex={1} data-testid="end-date-picker">
+                <DatePicker
+                  placeholder={t("End date")}
+                  label={t("To")}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  value={pickerRange.end ?? null}
+                  onChange={handleEndDatePick}
+                />
+              </View>
+            </XStack>
           </YStack>
-        </Popover.ScrollView>
-      </Popover.Content>
-    </Popover>
+        </YStack>
+      </YStack>
+    </FloatingPanel>
   );
 }
 

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { DataTable } from "../DataTable";
@@ -203,16 +203,30 @@ describe("DataTableExport", () => {
   });
 
   it("shows loading state when export is in progress", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 100)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
     );
 
-    fireEvent.click(screen.getByText("CSV"));
-    expect(screen.getByText("...")).toBeInTheDocument();
+    const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
+    try {
+      fireEvent.click(exportButton);
+      expect(screen.getByText("...")).toBeInTheDocument();
+      expect(exportButton).toHaveAttribute("aria-disabled", "true");
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("disables buttons when disabled prop is true", () => {
@@ -599,9 +613,12 @@ describe("DataTableExport", () => {
   });
 
   it("prevents multiple simultaneous exports", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 200)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
@@ -609,13 +626,22 @@ describe("DataTableExport", () => {
 
     // Click export twice quickly - button shows "..." when loading
     const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
-    fireEvent.click(exportButton);
-    fireEvent.click(exportButton);
+    try {
+      fireEvent.click(exportButton);
+      fireEvent.click(exportButton);
 
-    // Should only call once
-    await waitFor(() => {
-      expect(mockOnExport).toHaveBeenCalledTimes(1);
-    });
+      // Should only call once
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalledTimes(1);
+      });
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("surfaces an inline error when Blob URLs are unavailable", async () => {
@@ -629,9 +655,7 @@ describe("DataTableExport", () => {
       renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
       fireEvent.click(screen.getByRole("button", { name: /Export as CSV/i }));
       await waitFor(() => {
-        expect(screen.getByRole("alert").textContent).toMatch(
-          /not available on this platform/i,
-        );
+        expect(screen.getByRole("alert").textContent).toMatch(/not available on this platform/i);
       });
       expect(mockCreateObjectURL).not.toHaveBeenCalled();
     } finally {