@multiplatform.one/forms 7.84.2 → 7.84.3

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

@@ -4,7 +4,9 @@ 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 type { CompactFace } from "./compactFace";
 import { FloatingPanel } from "./index";
+import { panelViewportPadding } from "./useFloatingPanel";
 
 const triggerBounds = {
   x: 80,
@@ -37,7 +39,7 @@ function measure(bounds = triggerBounds, panelWidth = 240, panelHeight = 180) {
   );
 }
 
-function Harness({ scrollable }: { scrollable?: boolean }) {
+function Harness({ scrollable, compactFace }: { scrollable?: boolean; compactFace?: CompactFace }) {
   const [open, setOpen] = useState(false);
   return (
     <FloatingPanel
@@ -45,6 +47,7 @@ function Harness({ scrollable }: { scrollable?: boolean }) {
       onOpenChange={setOpen}
       anchorMode="cover-trigger"
       scrollable={scrollable}
+      compactFace={compactFace}
       trigger={
         <Button aria-label="Timeline filters">
           <span aria-hidden="true">◇</span>Filters
@@ -57,9 +60,23 @@ function Harness({ scrollable }: { scrollable?: boolean }) {
   );
 }
 
+function viewport(width: number, height: number) {
+  for (const [key, value] of [
+    ["innerWidth", width],
+    ["innerHeight", height],
+  ] as const) {
+    Object.defineProperty(window, key, { configurable: true, writable: true, value });
+  }
+}
+
+const desktop = { width: 1280, height: 800 };
+const phone = { width: 390, height: 844 };
+const initial = { width: window.innerWidth, height: window.innerHeight };
+
 afterEach(() => {
   vi.restoreAllMocks();
   document.documentElement.removeAttribute("dir");
+  viewport(initial.width, initial.height);
 });
 
 describe("LC-112 exact cover-trigger placement", () => {
@@ -124,11 +141,31 @@ describe("LC-112 exact cover-trigger placement", () => {
     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 });
+  it("slides back on screen at the bottom edge on a desktop-width page, never a sheet (LC-139, FZ-9053)", async () => {
+    viewport(desktop.width, desktop.height);
+    measure({ ...triggerBounds, y: 760, top: 760, bottom: 800 });
     const result = renderWithProviders(<Harness />);
     const trigger = result.getByRole("button", { name: "Timeline filters" });
     trigger.focus();
+    fireEvent.click(trigger, { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() => expect(parseFloat(panel.style.top)).toBeLessThan(760));
+    expect(parseFloat(panel.style.top) + 180).toBeLessThanOrEqual(
+      desktop.height - panelViewportPadding,
+    );
+    expect(result.getByRole("button", { name: "Assigned to me" })).toBeTruthy();
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("keeps the collision sheet at phone width (LC-139)", async () => {
+    viewport(phone.width, phone.height);
+    measure({ ...triggerBounds, y: 800, top: 800, bottom: 840 });
+    const result = renderWithProviders(<Harness compactFace="menu" />);
+    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");
@@ -143,13 +180,14 @@ describe("LC-112 exact cover-trigger placement", () => {
   });
 
   it("closes the collision sheet on Escape while the trigger's tooltip is open", async () => {
-    measure({ ...triggerBounds, y: 730, top: 730, bottom: 770 });
+    viewport(phone.width, phone.height);
+    measure({ ...triggerBounds, y: 800, top: 800, bottom: 840 });
     const tooltipEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") event.stopPropagation();
     };
     document.addEventListener("keydown", tooltipEscape);
     try {
-      const result = renderWithProviders(<Harness />);
+      const result = renderWithProviders(<Harness compactFace="menu" />);
       const trigger = result.getByRole("button", { name: "Timeline filters" });
       fireEvent.click(trigger, { detail: 0 });
       await result.findByTestId("floating-panel-sheet");
@@ -160,12 +198,18 @@ describe("LC-112 exact cover-trigger placement", () => {
     }
   });
 
-  it("uses a bottom sheet for horizontal collisions instead of shifting the trigger row", async () => {
-    measure({ ...triggerBounds, x: 900, left: 900, right: 1020 });
+  it("slides back inside the end edge on a desktop-width page, never a sheet (LC-139, FZ-9053)", async () => {
+    viewport(desktop.width, desktop.height);
+    measure({ ...triggerBounds, x: 1150, left: 1150, right: 1270 });
     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();
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() =>
+      expect(parseFloat(panel.style.left) + 240).toBeLessThanOrEqual(
+        desktop.width - panelViewportPadding,
+      ),
+    );
   });
 
   it("aligns the trigger row at the logical start edge in RTL", async () => {

package/src/FloatingPanel/FloatingPanel.seamlessCover.spec.tsx

@@ -13,6 +13,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { Text } from "tamagui";
 import { Button } from "../Button";
 import { FloatingPanel } from "./index";
+import { panelViewportPadding } from "./useFloatingPanel";
 
 type Rect = { x: number; y: number; width: number; height: number };
 
@@ -238,12 +239,16 @@ describe("LC-112 icon trigger: the menu opens on its button (rv_d86cc201997dffd4
     expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
   });
 
-  it("never end-aligns a custom first row (triggerEcho off, coverAlign start): it collides to the sheet", async () => {
+  it("never end-aligns a custom first row (triggerEcho off, coverAlign start): on a desktop-width page it slides back inside the end edge, never a sheet (LC-139, FZ-9053)", async () => {
     const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
     const button = { x: viewportWidth - 16 - 44, y: 12, width: 44, height: 44 };
     measure(button, 200);
     const result = renderWithProviders(<IconPanel align="start" />);
     fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
-    expect(await result.findByTestId("floating-panel-sheet")).toBeTruthy();
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+    expect(parseFloat(panel.style.left)).toBe(viewportWidth - panelViewportPadding - 200);
+    expect(parseFloat(panel.style.left)).not.toBe(button.x + button.width - 200);
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
   });
 });

package/src/FloatingPanel/index.tsx

@@ -236,7 +236,8 @@ export interface FloatingPanelProps {
    * COVER-TRIGGER (LC-105): the panel's top edge sits on the trigger's TOP
    * edge instead of attaching below it, so the trigger becomes the panel's
    * first row by default. Set triggerEcho=false for a custom first row. The panel scales from
-   * the trigger's top start corner. Viewport collisions use the bottom sheet.
+   * the trigger's top start corner. A viewport collision slides the panel back on screen;
+   * only a phone-width page takes the bottom sheet (LC-139).
    * Enabled by default. Web float only; the native and narrow-web sheet is unchanged.
    */
   cover?: boolean;
@@ -582,8 +583,10 @@ export function FloatingPanel(props: FloatingPanelProps) {
     ),
   };
 
+  const clampCollisions = viewportGtSm || (compactMenu && insideOverlay);
+
   if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
-  return <FloatingPanelWeb {...panelProps} clampCollisions={compactMenu && insideOverlay} />;
+  return <FloatingPanelWeb {...panelProps} clampCollisions={clampCollisions} />;
 }
 
 // ── Sheet (mobile / native / forced) ──────────────────────────

package/types/FloatingPanel/index.d.ts

@@ -175,7 +175,8 @@ export interface FloatingPanelProps {
      * COVER-TRIGGER (LC-105): the panel's top edge sits on the trigger's TOP
      * edge instead of attaching below it, so the trigger becomes the panel's
      * first row by default. Set triggerEcho=false for a custom first row. The panel scales from
-     * the trigger's top start corner. Viewport collisions use the bottom sheet.
+     * the trigger's top start corner. A viewport collision slides the panel back on screen;
+     * only a phone-width page takes the bottom sheet (LC-139).
      * Enabled by default. Web float only; the native and narrow-web sheet is unchanged.
      */
     cover?: boolean;

package/types/FloatingPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.tsx"],"names":[],"mappings":"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"}