@multiplatform.one/forms 7.45.0 → 7.46.0

package/src/FloatingPanel/FloatingPanel.coverTrigger.spec.tsx

@@ -0,0 +1,184 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState } from "react";
+import { Preset, defaultPreset, heroPreset, boldPreset } from "@multiplatform.one/theme";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+
+const triggerBounds = {
+  x: 80,
+  y: 240,
+  top: 240,
+  bottom: 280,
+  left: 80,
+  right: 200,
+  width: 120,
+  height: 40,
+};
+
+function measure(bounds = triggerBounds, panelWidth = 240, panelHeight = 180) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference")) return { ...bounds, toJSON: () => ({}) };
+      return original.call(this);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelWidth : 0;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelHeight : 0;
+    },
+  );
+}
+
+function Harness({ scrollable }: { scrollable?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      scrollable={scrollable}
+      trigger={
+        <Button aria-label="Timeline filters">
+          <span aria-hidden="true">◇</span>Filters
+        </Button>
+      }
+    >
+      <Button>Assigned to me</Button>
+      <Button>All entries</Button>
+    </FloatingPanel>
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.documentElement.removeAttribute("dir");
+});
+
+describe("LC-112 exact cover-trigger placement", () => {
+  it("keeps an explicitly scrollable panel anchored when a full action row fits", async () => {
+    measure(triggerBounds, 240, 2000);
+    const result = renderWithProviders(<Harness scrollable />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    expect(panel.style.top).toBe("240px");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.position).toBe("sticky");
+  });
+  it("keeps a menu floating when its visible trigger sits flush with the viewport", async () => {
+    measure({ ...triggerBounds, x: 0, left: 0, right: 120, y: 0, top: 0, bottom: 40 });
+    const result = renderWithProviders(<Harness />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(panel.style.top).toBe("0px");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+  for (const [name, preset] of Object.entries({
+    Default: defaultPreset,
+    Hero: heroPreset,
+    Bold: boldPreset,
+  })) {
+    for (const theme of ["light", "dark"] as const) {
+      it(`preserves the measured trigger row in ${name} ${theme}`, async () => {
+        measure();
+        const result = renderWithProviders(
+          <Preset overrides={preset.knobs} theme={theme}>
+            <Harness />
+          </Preset>,
+        );
+        fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+        const panel = await result.findByTestId("floating-panel-viewport");
+        const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+        expect(echo.style.width).toBe("120px");
+        expect(echo.style.height).toBe("40px");
+        expect(echo.getAttribute("aria-expanded")).toBe("true");
+        expect(echo.querySelector("[id]")).toBeNull();
+      });
+    }
+  }
+
+  it("keeps the measured first row over its trigger, exposes its name, and closes on activation", async () => {
+    measure();
+    const result = renderWithProviders(<Harness />);
+    const trigger = result.getByRole("button", { name: "Timeline filters" });
+    fireEvent.click(trigger, { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    await waitFor(() => expect(panel.style.top).toBe("240px"));
+    expect(panel.style.left).toBe("80px");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.width).toBe("120px");
+    expect(echo.style.height).toBe("40px");
+    expect(echo.textContent).toContain("◇");
+    await waitFor(() =>
+      expect(document.activeElement).toBe(result.getByRole("button", { name: "Assigned to me" })),
+    );
+    fireEvent.click(echo);
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+  });
+
+  it("uses a bottom sheet at the bottom edge instead of moving the first row upward", async () => {
+    measure({ ...triggerBounds, y: 730, top: 730, bottom: 770 });
+    const result = renderWithProviders(<Harness />);
+    const trigger = result.getByRole("button", { name: "Timeline filters" });
+    trigger.focus();
+    const parentChildren = trigger.closest("[data-fp-reference]")?.parentElement?.children.length;
+    fireEvent.click(trigger, { detail: 0 });
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+    expect(result.getByRole("button", { name: "Assigned to me" })).toBeTruthy();
+    expect(result.getByRole("button", { name: "Timeline filters" })).toBe(trigger);
+    expect(trigger.closest("[data-fp-reference]")?.parentElement?.children.length).toBe(
+      parentChildren,
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("closes the collision sheet on Escape while the trigger's tooltip is open", async () => {
+    measure({ ...triggerBounds, y: 730, top: 730, bottom: 770 });
+    const tooltipEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") event.stopPropagation();
+    };
+    document.addEventListener("keydown", tooltipEscape);
+    try {
+      const result = renderWithProviders(<Harness />);
+      const trigger = result.getByRole("button", { name: "Timeline filters" });
+      fireEvent.click(trigger, { detail: 0 });
+      await result.findByTestId("floating-panel-sheet");
+      fireEvent.keyDown(trigger, { key: "Escape" });
+      await waitFor(() => expect(result.queryByTestId("floating-panel-sheet")).toBeNull());
+    } finally {
+      document.removeEventListener("keydown", tooltipEscape);
+    }
+  });
+
+  it("uses a bottom sheet for horizontal collisions instead of shifting the trigger row", async () => {
+    measure({ ...triggerBounds, x: 900, left: 900, right: 1020 });
+    const result = renderWithProviders(<Harness />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+  });
+
+  it("aligns the trigger row at the logical start edge in RTL", async () => {
+    document.documentElement.dir = "rtl";
+    measure({ ...triggerBounds, x: 400, left: 400, right: 520 });
+    const result = renderWithProviders(<Harness />);
+    (result.container.querySelector("[data-fp-reference]") as HTMLElement).style.direction = "rtl";
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    await waitFor(() => expect(panel.style.left).toBe("280px"));
+    expect(panel.style.transformOrigin).toBe("top right");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.alignSelf).toBe("flex-start");
+    expect(panel.dir).toBe("rtl");
+  });
+});

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -4,7 +4,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { useState, type ReactNode } from "react";
 import { Text } from "tamagui";
 import { Button } from "../Button";
-import { FloatingPanel, panelViewportPadding } from "./index";
+import { FloatingPanel } from "./index";
 
 /**
  * The trigger contract, and why every case fires a REAL press rather than
@@ -436,9 +436,7 @@ describe("FloatingPanel nesting (MPO-221)", () => {
     await waitFor(() => expect(floatingViewport()).not.toBeNull());
     const viewport = floatingViewport() as HTMLElement;
     expect(scroller.contains(viewport)).toBe(false);
-    // jsdom puts everything at viewport y 0, so the panel pins to the
-    // viewport padding, now in viewport coordinates with no scroller offset.
-    await waitFor(() => expect(viewport.style.top).toBe(`${panelViewportPadding}px`));
+    await waitFor(() => expect(viewport.style.top).toBe("0px"));
   });
 
   it("offsets its top by a transformed dialog it stays inside", async () => {
@@ -459,7 +457,7 @@ describe("FloatingPanel nesting (MPO-221)", () => {
     expect(dialog.contains(viewport)).toBe(true);
     // Laid out against the dialog, whose content is scrolled 40px, its css
     // top must be 40px lower to land at the same viewport y.
-    await waitFor(() => expect(viewport.style.top).toBe(`${panelViewportPadding + 40}px`));
+    await waitFor(() => expect(viewport.style.top).toBe("40px"));
   });
 });
 

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -52,6 +52,32 @@ export const Basic: Story = {
   },
 };
 
+export const CoverTriggerEdges: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <YStack
+        height="100%"
+        minHeight="$20"
+        padding="$4"
+        justifyContent="flex-end"
+        alignItems="flex-end"
+      >
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          anchorMode="cover-trigger"
+          triggerSizing="content"
+          trigger={<Button>Edge menu</Button>}
+        >
+          <Button onPress={() => setOpen(false)}>First action</Button>
+          <Button onPress={() => setOpen(false)}>Second action</Button>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
 export const ScrollableContent: Story = {
   render: () => {
     const [open, setOpen] = useState(false);