@multiplatform.one/table 7.11.0 → 7.16.0

package/src/components/DataTableCell/cellModalEditor.spec.tsx

@@ -1,33 +1,17 @@
 /**
- * CellModalEditor design-law tests — the modal is SF-OVERLAY / E-OVERLAY.
- *
- * The house DialogContent owns elevatedSurface + containerRadius + transition
- * (LC-18). A fixed 1px border on Dialog.Content was the recorded GAP; this
- * spec locks the recipe path so it cannot regress to a handwritten frame.
+ * CellModalEditor on web (MPO-221): the tall-field editor is a FloatingPanel
+ * attached to the cell it was opened from, the same primitive the native
+ * variant uses, not a centered Dialog. The panel owns the SF-OVERLAY /
+ * E-OVERLAY surface (elevatedSurface); the staging contract rides on top.
  */
 
 import React from "react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
-const dialogContentProps: Record<string, unknown>[] = [];
-
-vi.mock("@multiplatform.one/components", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
-  return {
-    ...actual,
-    DialogContent: (props: Record<string, unknown>) => {
-      dialogContentProps.push(props);
-      return React.createElement(
-        "div",
-        { "data-testid": "cell-modal-dialog-content" },
-        props.children as React.ReactNode,
-      );
-    },
-  };
-});
-
 vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   FieldDisplay: (props: { field?: string }) =>
@@ -47,36 +31,78 @@ vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
 
 import { CellModalEditor } from "./CellModalEditor";
 
-describe("CellModalEditor — overlay recipes", () => {
-  it("opens DialogContent without a fixed 1px border (SF-OVERLAY recipe path)", async () => {
-    dialogContentProps.length = 0;
-    renderWithProviders(
-      <CellModalEditor
-        field="textarea"
-        value="hello"
-        onCommit={vi.fn()}
-        title="Edit text"
-        label="Notes"
-      >
-        {(draft, onDraftChange) =>
-          React.createElement("textarea", {
-            "data-testid": "draft-editor",
-            value: draft,
-            onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-              onDraftChange(event.target.value),
-          })
-        }
-      </CellModalEditor>,
-    );
+const panel = () =>
+  document.querySelector('[data-testid="floating-panel-viewport"]') as HTMLElement | null;
 
-    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
-    await waitFor(() => expect(screen.getByTestId("cell-modal-dialog-content")).toBeTruthy());
+function renderEditor(onCommit = vi.fn()) {
+  const utils = renderWithProviders(
+    <CellModalEditor
+      field="textarea"
+      value="hello"
+      onCommit={onCommit}
+      title="Edit text"
+      label="Notes"
+    >
+      {(draft, onDraftChange) =>
+        React.createElement("textarea", {
+          "data-testid": "draft-editor",
+          value: draft,
+          onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+            onDraftChange(event.target.value),
+        })
+      }
+    </CellModalEditor>,
+  );
+  return { ...utils, onCommit };
+}
 
-    const frame = dialogContentProps.at(-1);
-    expect(frame).toBeTruthy();
-    expect(frame?.borderWidth).toBeUndefined();
-    expect(frame?.borderColor).toBeUndefined();
+describe("CellModalEditor on web — FloatingPanel, not a Dialog (MPO-221)", () => {
+  it("opens the editor inside the FloatingPanel viewport", async () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    expect(panel()!.contains(screen.getByTestId("draft-editor"))).toBe(true);
+    expect(panel()!.textContent).toContain("Edit text");
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
     expect(screen.getByRole("button", { name: "Cancel" })).not.toBeDisabled();
     expect(screen.getByRole("button", { name: "Done" })).toBeTruthy();
   });
+
+  it("anchors to the cell trigger: the panel's reference wraps the cell face", async () => {
+    renderEditor();
+    const face = screen.getByTestId("mock-FieldDisplay");
+    expect(face.closest("[data-fp-reference]")).not.toBeNull();
+    fireEvent.click(face);
+    await waitFor(() => expect(panel()).not.toBeNull());
+    expect(panel()!.style.position).toBe("fixed");
+  });
+
+  it("an outside click commits the draft (LC-21)", async () => {
+    const { onCommit } = renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    fireEvent.change(screen.getByTestId("draft-editor"), { target: { value: "changed" } });
+    fireEvent.click(document.body);
+    await waitFor(() => expect(panel()).toBeNull());
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(onCommit).toHaveBeenCalledWith("changed");
+  });
+
+  it("Escape discards the draft", async () => {
+    const { onCommit } = renderEditor();
+    fireEvent.click(screen.getByTestId("mock-FieldDisplay"));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    const editor = screen.getByTestId("draft-editor");
+    fireEvent.change(editor, { target: { value: "changed" } });
+    fireEvent.keyDown(editor, { key: "Escape" });
+    await waitFor(() => expect(panel()).toBeNull());
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("the web source no longer mounts a Tamagui Dialog", () => {
+    const source = readFileSync(join(__dirname, "CellModalEditor.tsx"), "utf8");
+    expect(source).not.toMatch(/\bDialog\b.*from "tamagui"/);
+    expect(source).not.toMatch(/DialogContent|DialogOverlay/);
+    expect(source).toMatch(/<FloatingPanel/);
+  });
 });

package/src/components/DataTableCell/dataTableCell.spec.tsx

@@ -19,10 +19,11 @@ import { describe, expect, it, vi } from "vitest";
 // ── Mock form components ──────────────────────────────────────
 
 function createMock(name: string) {
-  const Comp = React.forwardRef((_props: any, ref: any) =>
+  const Comp = React.forwardRef((props: any, ref: any) =>
     React.createElement("div", {
       "data-testid": `mock-${name}`,
       "data-component": name,
+      "data-currency": props.currency,
       ref,
     }),
   );
@@ -187,6 +188,17 @@ describe("DataTableCell field type parity", () => {
     expectNotRendered(container, "Input");
   });
 
+  it("a currency stepper cell hands the currency to Stepper (MPO-221)", () => {
+    const { container } = renderCell({
+      field: "stepper",
+      value: 42,
+      fieldProps: { currency: "USD" },
+    });
+    expect(
+      container.querySelector('[data-component="Stepper"]')?.getAttribute("data-currency"),
+    ).toBe("USD");
+  });
+
   it("rating renders Rating, not custom star icons", () => {
     const { container } = renderCell({
       field: "rating",
@@ -217,10 +229,15 @@ describe("DataTableCell field type parity", () => {
     expect(display?.getAttribute("data-field")).toBe(fieldType);
     // Editor is not mounted until the cell is clicked
     expectNotRendered(baseElement, editorName);
-    // Clicking the cell opens the modal containing the real editor
+    // Clicking the cell opens the panel containing the real editor. The
+    // panel renders inline (no portal), so the cell FACE is the trigger
+    // subtree and the editor lives in the panel content beside it.
     fireEvent.click(display!);
     await waitFor(() => expectRendered(baseElement, editorName));
-    return { container, baseElement };
+    const face = container.querySelector('[data-testid="floating-panel-trigger"]') as HTMLElement;
+    const panel = container.querySelector('[data-testid="floating-panel-content"]') as HTMLElement;
+    expectRendered(panel, editorName);
+    return { container, baseElement, face, panel };
   }
 
   it("fileupload renders FileUpload, not custom FileUploadCell", async () => {
@@ -234,14 +251,14 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("signature renders Signature, not status text", async () => {
-    const { container } = await expectModalEditor(
+    const { face } = await expectModalEditor(
       { field: "signature", value: "" },
       "signature",
       "Signature",
     );
     // Old implementation showed "Not signed" / "Sign" in the cell
-    expect(container.textContent).not.toContain("Not signed");
-    expect(container.textContent).not.toContain("Sign");
+    expect(face.textContent).not.toContain("Not signed");
+    expect(face.textContent).not.toContain("Sign");
   });
 
   it("geolocation renders Geolocation, not two plain Inputs", async () => {
@@ -271,16 +288,16 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("barcode routes through the modal editor (LC-06), never inline in the cell", async () => {
-    const { container, baseElement } = await expectModalEditor(
+    const { face, panel } = await expectModalEditor(
       { field: "barcode", value: "SKU-001234" },
       "barcode",
       "Barcode",
     );
     // The full editor (with its camera scanner surface) must not mount inline
-    // in the cell — only inside the modal after click.
-    expectNotRendered(container, "Barcode");
-    // The modal also carries the large scannable preview.
-    expectRendered(baseElement, "BarcodePreview");
+    // in the cell face — only inside the panel after click.
+    expectNotRendered(face, "Barcode");
+    // The panel also carries the large scannable preview.
+    expectRendered(panel, "BarcodePreview");
   });
 
   it("custom render receives the cell's honest state as the render context (D-18.4)", () => {
@@ -372,13 +389,13 @@ describe("DataTableCell field type parity", () => {
   });
 
   it("textarea routes through the modal editor (LC-06), never inline in the cell", async () => {
-    const { container, baseElement } = await expectModalEditor(
+    const { face, panel } = await expectModalEditor(
       { field: "textarea", value: "line one\nline two" },
       "textarea",
       "TextArea",
     );
-    expectNotRendered(container, "TextArea");
-    expectRendered(baseElement, "TextArea");
+    expectNotRendered(face, "TextArea");
+    expectRendered(panel, "TextArea");
   });
 
   it("cell chrome carries the LC-71 composite ring class (keyboard-only, not mouse-within)", () => {

package/src/components/DataTableCell/index.tsx

@@ -46,6 +46,7 @@ import {
   ColorPicker,
   // Read-only display variants
   FieldDisplay,
+  containsAcrossPanels,
 } from "@multiplatform.one/forms";
 import { CellModalEditor } from "./CellModalEditor";
 import { CellOptionsEditor } from "./CellOptionsEditor";
@@ -380,6 +381,7 @@ export function DataTableCell({
                 max={max}
                 step={step ?? 1}
                 precision={precision ?? 0}
+                currency={currency}
                 disabled={disabled}
                 readOnly={readOnly}
                 placeholder={placeholder || "0"}
@@ -1167,8 +1169,7 @@ function DraftFieldEditor({
       if (event.key === "Escape") cancelDraft();
     };
     const handleDocPointerDown = (event: PointerEvent) => {
-      const node = containerRef.current;
-      if (node && event.target instanceof Node && node.contains(event.target)) return;
+      if (containsAcrossPanels(containerRef.current, event.target)) return;
       setSessionActive(false);
       commitDraft();
     };

package/src/components/DataTableDateFilter/DataTableDateFilter.spec.tsx

@@ -156,12 +156,15 @@ describe("DataTableDateFilter - DatePicker integration", () => {
   /**
    * Open the picker behind `placeholder` and click a day in its calendar.
    * A just-closed picker panel lingers mounted (with live handlers!) until
-   * its close timer fires, so first wait until no panel is mounted — then
-   * the day query can safely be global (forms DatePicker spec pattern).
+   * its close timer fires, so first wait until the filter's own panel is the
+   * only one mounted — then the day query can safely be global (forms
+   * DatePicker spec pattern). Panels portal to the page (MPO-335), so a
+   * picker panel is a sibling of the filter panel, not inside it.
    */
+  const panels = '[data-testid="floating-panel-viewport"]';
   const pickDay = async (placeholder: string, day: number) => {
     await waitFor(() => {
-      expect(document.querySelectorAll('[data-testid="floating-panel-viewport"]').length).toBe(0);
+      expect(document.querySelectorAll(panels).length).toBe(1);
     });
     fireEvent.click(screen.getByPlaceholderText(placeholder));
     await waitFor(() => {

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>
   );
 }