@multiplatform.one/forms 7.57.0 → 7.58.0

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -0,0 +1,183 @@
+/**
+ * FZ-7830: on native a menu-faced FloatingPanel opens over its trigger (LC-112,
+ * the UIMenu pull-down) instead of as a bottom sheet, and an `auto` panel does
+ * so only inside another overlay, so a sheet never stacks on a sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { OverlayStackProvider } from "../shared/overlayStack";
+import type { CompactFace } from "./compactFace";
+import { FloatingPanel } from "./index.native";
+import { panelViewportPadding } from "./useFloatingPanel";
+
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+      visible ? children : null,
+    useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+  };
+});
+
+let trigger = { x: 20, y: 240, width: 120, height: 44 };
+beforeEach(() => {
+  vi.useFakeTimers();
+  trigger = { x: 20, y: 240, width: 120, height: 44 };
+  // RN-web's measureInWindow reads the node's client rect on a timer.
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    x: trigger.x,
+    y: trigger.y,
+    left: trigger.x,
+    top: trigger.y,
+    width: trigger.width,
+    height: trigger.height,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+function Menu({ face }: { face?: CompactFace }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace={face}
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Text>Stack actions</Text>}
+      triggerA11y={{ label: "Stack actions" }}
+    >
+      <Text>Stop</Text>
+      <Text>Restart</Text>
+    </FloatingPanel>
+  );
+}
+
+/** What a native SheetModal's OverlayWindow puts around its content. */
+function InSheet({ children }: { children: ReactNode }) {
+  return <OverlayStackProvider zIndex={100_000}>{children}</OverlayStackProvider>;
+}
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  // measureInWindow answers on the next tick.
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+/** RN-web parks onLayout on the node for a ResizeObserver happy-dom never fires. */
+function layout(node: Element, width: number, height: number) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, width, height } } });
+  });
+}
+
+const menu = () => document.querySelector<HTMLElement>('[data-testid="floating-panel-menu"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+const echo = () => document.querySelector('[data-testid="floating-panel-menu-echo"]');
+
+describe("FloatingPanel native menu face (FZ-7830)", () => {
+  it("opens the menu face over the trigger at page level, never a sheet", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu();
+    expect(panel).not.toBeNull();
+    expect(sheet()).toBeNull();
+    expect(panel?.style.opacity).toBe("0");
+    layout(panel as HTMLElement, 200, 180);
+    expect(panel?.style.left).toBe("20px");
+    expect(panel?.style.top).toBe("240px");
+    expect(panel?.style.opacity).toBe("1");
+  });
+
+  it("repeats the trigger as the first row, in the trigger's own box", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    expect(row.textContent).toBe("Stack actions");
+    expect(row.style.height).toBe("44px");
+    expect(row.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("closes when the repeated trigger row is pressed", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(echo() as HTMLElement);
+    expect(menu()).toBeNull();
+  });
+
+  it("slides a trailing ⋯ menu back inside the padded window", () => {
+    trigger = { x: 330, y: 240, width: 44, height: 44 };
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    expect(panel.style.left).toBe(`${390 - panelViewportPadding - 200}px`);
+    expect(panel.style.top).toBe("240px");
+  });
+
+  it("slides up from the bottom edge instead of running under it", () => {
+    trigger = { x: 20, y: 800, width: 120, height: 44 };
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    const top = parseFloat(panel.style.top);
+    expect(top + 180).toBeLessThanOrEqual(844 - panelViewportPadding);
+    expect(top).toBeLessThan(800);
+  });
+
+  it("keeps the sheet at page level for the auto face", () => {
+    const result = renderWithProviders(<Menu face="auto" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).not.toBeNull();
+    expect(menu()).toBeNull();
+  });
+
+  it("opens the auto face over the trigger inside another overlay, never a second sheet", () => {
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu face="auto" />
+      </InSheet>,
+    );
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).toBeNull();
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    expect(panel.style.top).toBe("240px");
+  });
+
+  it("leaves a panel without a face as a sheet, even inside an overlay", () => {
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu />
+      </InSheet>,
+    );
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).not.toBeNull();
+    expect(menu()).toBeNull();
+  });
+});

package/src/FloatingPanel/compactFace.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { pickerCompactFace, resolveCompactFace, SHORT_LIST_MAX } from "./compactFace";
+
+describe("resolveCompactFace (FZ-7830)", () => {
+  it("keeps the sheet by default, at page level and inside an overlay", () => {
+    expect(resolveCompactFace(undefined, false)).toBe("sheet");
+    expect(resolveCompactFace(undefined, true)).toBe("sheet");
+    expect(resolveCompactFace("sheet", true)).toBe("sheet");
+  });
+
+  it("opens a menu everywhere for the menu face", () => {
+    expect(resolveCompactFace("menu", false)).toBe("menu");
+    expect(resolveCompactFace("menu", true)).toBe("menu");
+  });
+
+  it("opens a menu only inside another overlay for the auto face", () => {
+    expect(resolveCompactFace("auto", false)).toBe("sheet");
+    expect(resolveCompactFace("auto", true)).toBe("menu");
+  });
+});
+
+describe("pickerCompactFace (FZ-7830)", () => {
+  it("opens a short list as a menu at every level", () => {
+    expect(SHORT_LIST_MAX).toBe(7);
+    expect(pickerCompactFace(1)).toBe("menu");
+    expect(pickerCompactFace(7)).toBe("menu");
+    expect(resolveCompactFace(pickerCompactFace(7), false)).toBe("menu");
+  });
+
+  it("keeps a long list's sheet at page level and opens it as a menu inside an overlay", () => {
+    expect(pickerCompactFace(8)).toBe("auto");
+    expect(resolveCompactFace(pickerCompactFace(8), false)).toBe("sheet");
+    expect(resolveCompactFace(pickerCompactFace(8), true)).toBe("menu");
+  });
+
+  it("keeps a searchable list's sheet at page level, however short", () => {
+    expect(pickerCompactFace(3, true)).toBe("auto");
+    expect(resolveCompactFace(pickerCompactFace(3, true), false)).toBe("sheet");
+  });
+});

package/src/FloatingPanel/compactFace.ts

@@ -0,0 +1,32 @@
+/**
+ * What a FloatingPanel becomes where it would otherwise be a bottom sheet:
+ * on native, and on the web at or below OVERLAY_BREAKPOINT.
+ *
+ * - `"sheet"`: the bottom sheet, wherever it opens.
+ * - `"menu"`: a menu over its trigger (LC-112) wherever it opens.
+ * - `"auto"`: the sheet at page level, the menu inside another overlay. A
+ *   sheet over a sheet is the one thing a phone must never show (FZ-7830).
+ */
+export type CompactFace = "sheet" | "menu" | "auto";
+
+export function resolveCompactFace(
+  face: CompactFace | undefined,
+  insideOverlay: boolean,
+): "sheet" | "menu" {
+  if (face === "menu") return "menu";
+  if (face === "auto") return insideOverlay ? "menu" : "sheet";
+  return "sheet";
+}
+
+/** The longest list a picker opens as a menu over its trigger (FZ-7830). */
+export const SHORT_LIST_MAX = 7;
+
+/**
+ * A picker's face (FZ-7830, LC-112): a short list with no search opens as a
+ * menu over its trigger at every level, the iOS 14+ pull-down picker. A long or
+ * searchable list keeps the sheet at page level and opens as a scrolling menu
+ * inside another overlay.
+ */
+export function pickerCompactFace(optionCount: number, searchable = false): CompactFace {
+  return !searchable && optionCount <= SHORT_LIST_MAX ? "menu" : "auto";
+}

package/src/FloatingPanel/index.native.tsx

@@ -44,6 +44,13 @@
  * - Opening a Modal under the same finger can synthesize a backdrop press;
  *   backdrop dismiss is armed a short delay after the present begins.
  *
+ * Menu face (`compactFace`, FZ-7830): instead of the sheet, a menu opens
+ * over the trigger (LC-112), its top start corner on the trigger's, the
+ * trigger echoed as its first row, sliding back inside the safe area where it
+ * would run off screen. DropdownMenu always opens this way (a UIMenu
+ * pull-down); Select opens this way for a short list, and for any list inside
+ * another overlay, so a sheet never stacks on a sheet.
+ *
  * ContextMenu (`openOn="contextmenu"`): long-press opens it. On a window wider
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
@@ -83,12 +90,19 @@ import {
   motionDurationMs,
 } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
-import { useOverlayZIndex } from "../shared/overlayStack";
+import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { placeAtPoint, type PanelBounds, type PanelPoint } from "./pointAnchor";
+import { resolveCompactFace } from "./compactFace";
+import {
+  placeAtPoint,
+  placeOverTrigger,
+  type PanelBounds,
+  type PanelPoint,
+  type TriggerRect,
+} from "./pointAnchor";
 import { panelViewportPadding } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
@@ -142,11 +156,18 @@ export function FloatingPanel({
   triggerA11y,
   sheetFill,
   openOn = "press",
+  compactFace,
+  triggerRow,
+  triggerEcho = true,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
   const windowZIndex = useOverlayZIndex("sheet");
-  const children = <Surface painted={false}>{panelChildren}</Surface>;
+  const children = (
+    <Surface painted={false} elevated>
+      {panelChildren}
+    </Surface>
+  );
   const slideTransition = knobProps.motion.slide.transition;
   const enterDuration = motionDurationMs(slideTransition);
   const scrimDuration = motionDurationMs(knobProps.motion.scrim.transition);
@@ -181,6 +202,34 @@ export function FloatingPanel({
   );
   const isContextMenu = openOn === "contextmenu";
   const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
+  const insideOverlay = useInsideOverlay();
+  const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const triggerRef = useRef<RNView | null>(null);
+  const [anchor, setAnchor] = useState<TriggerRect | null>(null);
+  // The trigger's window rect, read each time the menu opens: it may have
+  // moved (a scrolled sheet) since the last open.
+  useLayoutEffect(() => {
+    if (!asMenu || !open) {
+      setAnchor(null);
+      return;
+    }
+    const node = triggerRef.current as
+      | (RNView & {
+          measureInWindow?: (cb: (x: number, y: number, w: number, h: number) => void) => void;
+        })
+      | null;
+    let live = true;
+    if (typeof node?.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => {
+        if (live) setAnchor({ x, y, width, height });
+      });
+    } else {
+      setAnchor({ x: 0, y: 0, width: 0, height: 0 });
+    }
+    return () => {
+      live = false;
+    };
+  }, [asMenu, open]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -473,6 +522,8 @@ export function FloatingPanel({
   return (
     <>
       <RNView
+        ref={triggerRef}
+        collapsable={false}
         style={{
           flexDirection: "row",
           alignItems: "center",
@@ -526,7 +577,29 @@ export function FloatingPanel({
         }}
       >
         <OverlayWindow zIndex={windowZIndex}>
-          {atPoint && pressPoint ? (
+          {asMenu ? (
+            <TriggerMenuPanel
+              anchor={anchor}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echoLabel={triggerA11y?.label}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onClose={close}
+            >
+              {header}
+              {children}
+            </TriggerMenuPanel>
+          ) : atPoint && pressPoint ? (
             <PointPanel
               key={`${pressPoint.x},${pressPoint.y}`}
               point={pressPoint}
@@ -644,6 +717,100 @@ export function FloatingPanel({
   );
 }
 
+/**
+ * The menu over its trigger (LC-112): measured once per open at its natural
+ * size, then placed on the trigger's window rect. The first row repeats the
+ * trigger in the trigger's own box, and pressing it closes the menu, as the
+ * web echo row does.
+ */
+function TriggerMenuPanel({
+  anchor,
+  bounds,
+  echo,
+  echoLabel,
+  framePadding,
+  frameGap,
+  onBackdropPress,
+  onClose,
+  children,
+}: {
+  anchor: TriggerRect | null;
+  bounds: PanelBounds;
+  echo: ReactNode;
+  echoLabel?: string;
+  framePadding: string;
+  frameGap: string | undefined;
+  onBackdropPress: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const placement =
+    anchor && size
+      ? placeOverTrigger({
+          trigger: anchor,
+          width: size.width,
+          height: size.height,
+          bounds,
+          rtl: I18nManager.isRTL,
+        })
+      : null;
+  return (
+    <RNView style={StyleSheet.absoluteFill}>
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onBackdropPress}
+        accessibilityRole="button"
+        accessibilityLabel={t("Close")}
+      />
+      <RNView
+        testID="floating-panel-menu"
+        onLayout={(e) => {
+          if (size) return;
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) setSize({ width, height });
+        }}
+        style={{
+          position: "absolute",
+          left: placement?.left ?? bounds.left,
+          top: placement?.top ?? bounds.top,
+          minWidth: anchor?.width ?? 0,
+          maxWidth: bounds.right - bounds.left,
+          maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
+          opacity: placement ? 1 : 0,
+        }}
+      >
+        <YStack
+          {...knobProps.elevatedSurface}
+          flexShrink={1}
+          minHeight={0}
+          overflow="hidden"
+          onAccessibilityEscape={onClose}
+        >
+          {echo != null && anchor && anchor.height > 0 ? (
+            <Pressable
+              testID="floating-panel-menu-echo"
+              onPress={onClose}
+              accessibilityRole="button"
+              {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+              aria-expanded
+              style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+            >
+              <RNView pointerEvents="none">{echo}</RNView>
+            </Pressable>
+          ) : null}
+          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
+            <YStack padding={framePadding} gap={frameGap}>
+              {children}
+            </YStack>
+          </RNScrollView>
+        </YStack>
+      </RNView>
+    </RNView>
+  );
+}
+
 /**
  * The menu at the long-press point: measured once per open at its natural
  * size, then placed by the same rule as the web pointer menu. Later layouts

package/src/FloatingPanel/index.tsx

@@ -28,11 +28,13 @@ import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManage
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
-import { OverlayStackProvider, useOverlayZIndex } from "../shared/overlayStack";
+import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
+import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
 import {
   contextMenuPoint,
+  placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
   referenceCornerPoint,
@@ -99,6 +101,15 @@ export interface FloatingPanelProps {
    * OVERLAY_BREAKPOINT), floating panel from `$sm` up.
    */
   sheet?: boolean;
+  /**
+   * What the panel becomes where it would be a bottom sheet (native, and web
+   * at or below 640). `"sheet"` (default) keeps the sheet; `"menu"` opens a
+   * menu over the trigger; `"auto"` keeps the sheet at page level and opens
+   * the menu inside another overlay, so a sheet never stacks on a sheet
+   * (FZ-7830). A menu inside an overlay slides back on screen instead of
+   * taking LC-139's collision sheet. An explicit `sheet` wins on the web.
+   */
+  compactFace?: CompactFace;
   /**
    * Sizing mode for the web floating panel.
    * - `"grow"` (default): opens from the trigger to the nearest viewport
@@ -435,19 +446,25 @@ export function FloatingPanel(props: FloatingPanelProps) {
   // the panel is already classified as keyboard-origin when focus moves in.
   if (isWeb) ensureKeyboardModalityTracking();
   const viewportGtSm = useViewportGtSm();
+  const insideOverlay = useInsideOverlay();
+  const compactMenu = resolveCompactFace(props.compactFace, insideOverlay) === "menu";
   // SSR and the hydration render use the same sheet structure. The viewport
   // snapshot switches to floating after hydration when the browser is wide.
-  const shouldUseSheet = props.sheet ?? (!isWeb || !viewportGtSm);
+  const shouldUseSheet = props.sheet ?? (!isWeb || (!viewportGtSm && !compactMenu));
   // The panel floats over the page: its content never sits on a painted
   // ancestor, so a Card inside it paints as top-level.
   const panelProps = {
     ...props,
     cover: props.anchorMode ? props.anchorMode === "cover-trigger" : props.cover,
-    children: <Surface painted={false}>{props.children}</Surface>,
+    children: (
+      <Surface painted={false} elevated>
+        {props.children}
+      </Surface>
+    ),
   };
 
   if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
-  return <FloatingPanelWeb {...panelProps} />;
+  return <FloatingPanelWeb {...panelProps} clampCollisions={compactMenu && insideOverlay} />;
 }
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
@@ -644,8 +661,9 @@ function FloatingPanelWeb({
   triggerEcho = true,
   triggerRow,
   anchorRect,
+  clampCollisions = false,
   ...sheetProps
-}: FloatingPanelProps) {
+}: FloatingPanelProps & { clampCollisions?: boolean }) {
   const panelZIndex = useOverlayZIndex("dropdown");
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
@@ -783,6 +801,8 @@ function FloatingPanelWeb({
             measured.height + firstActionHeight + bodyPadding + totalBorderWidth,
           )
         : totalContentHeight;
+      let placedTop = measured.top;
+      let placedLeft = left;
       if (
         measured.width > 0 &&
         measured.height > 0 &&
@@ -793,13 +813,36 @@ function FloatingPanelWeb({
           measured.top + Math.max(neededHeight, measured.height) >
             viewportBottom - panelViewportPadding)
       ) {
-        dropdownElement.style.visibility = "hidden";
-        setCollisionSheet(true);
-        return;
+        if (!clampCollisions) {
+          dropdownElement.style.visibility = "hidden";
+          setCollisionSheet(true);
+          return;
+        }
+        // FZ-7830: inside another overlay the collision sheet would stack a
+        // sheet on a sheet, so the menu slides back on screen instead.
+        const placed = placeOverTrigger({
+          trigger: {
+            x: measured.left,
+            y: measured.top,
+            width: measured.width,
+            height: measured.height,
+          },
+          width,
+          height: neededHeight,
+          bounds: {
+            top: viewportTop + panelViewportPadding,
+            left: viewportLeft + panelViewportPadding,
+            right: viewportRight - panelViewportPadding,
+            bottom: viewportBottom - panelViewportPadding,
+          },
+          rtl,
+        });
+        placedTop = placed.top;
+        placedLeft = placed.left;
       }
-      const top = measured.top - containingBlock.top;
-      const cssLeft = left - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - measured.top);
+      const top = placedTop - containingBlock.top;
+      const cssLeft = placedLeft - containingBlock.left;
+      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top}px`;
       dropdownElement.style.left = `${cssLeft}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
@@ -966,6 +1009,7 @@ function FloatingPanelWeb({
     isContextMenu,
     cover,
     anchorRect,
+    clampCollisions,
     sheetProps.scrollable,
     panel.placement,
     panel.refs,