@multiplatform.one/forms 7.21.0 → 7.22.0

package/src/FloatingPanel/index.native.tsx

@@ -43,9 +43,15 @@
  *   and the sheet never appears. Fields should not also toggle open on native.
  * - Opening a Modal under the same finger can synthesize a backdrop press;
  *   backdrop dismiss is armed a short delay after the present begins.
+ *
+ * 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,
+ * as web does at ≤640.
  */
 
 import {
+  type ReactNode,
   useCallback,
   useContext,
   useEffect,
@@ -57,6 +63,7 @@ import {
 import {
   Animated,
   Easing,
+  I18nManager,
   Modal,
   PanResponder,
   Platform,
@@ -65,13 +72,16 @@ import {
   StyleSheet,
   useWindowDimensions,
   View as RNView,
+  type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { Surface, useResolvedKnobs } from "@multiplatform.one/theme";
+import { OVERLAY_BREAKPOINT, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
+import { placeAtPoint, type PanelBounds, type PanelPoint } from "./pointAnchor";
+import { panelViewportPadding } from "./useFloatingPanel";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
 // resolve identically on native (their floating cores are unused on device
@@ -127,20 +137,31 @@ export function FloatingPanel({
   openOn = "press",
 }: FloatingPanelProps) {
   const { knobProps } = useResolvedKnobs();
-  const { height: windowHeight } = useWindowDimensions();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   // MPO-64: the sheet must end ABOVE the keyboard, not run under it.
   const keyboardInset = useKeyboardInset();
-  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
+  const safeArea = useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets;
+  const topInset = safeArea?.top ?? 0;
+  const [pressPoint, setPressPoint] = useState<PanelPoint | null>(null);
   const [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
   const handleTriggerPress = useCallback(() => {
     if (!disabled) onOpenChange(!open);
   }, [disabled, onOpenChange, open]);
-  const handleTriggerLongPress = useCallback(() => {
-    if (!disabled) onOpenChange(true);
-  }, [disabled, onOpenChange]);
+  const handleTriggerLongPress = useCallback(
+    (event?: GestureResponderEvent) => {
+      if (disabled) return;
+      const { pageX, pageY } = event?.nativeEvent ?? {};
+      setPressPoint(
+        typeof pageX === "number" && typeof pageY === "number" ? { x: pageX, y: pageY } : null,
+      );
+      onOpenChange(true);
+    },
+    [disabled, onOpenChange],
+  );
   const isContextMenu = openOn === "contextmenu";
+  const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -480,96 +501,193 @@ export function FloatingPanel({
           onNativeShow?.();
         }}
       >
-        {/*
+        {atPoint && pressPoint ? (
+          <PointPanel
+            key={`${pressPoint.x},${pressPoint.y}`}
+            point={pressPoint}
+            bounds={{
+              top: topInset + panelViewportPadding,
+              left: (safeArea?.left ?? 0) + panelViewportPadding,
+              right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+              bottom:
+                windowHeight -
+                Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                panelViewportPadding,
+            }}
+            framePadding={framePadding}
+            frameGap={frameGap}
+            onBackdropPress={handleBackdropPress}
+            onEscape={close}
+          >
+            {header}
+            {children}
+          </PointPanel>
+        ) : (
+          /*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the
           latter pads the container while the sheet keeps its own fixed height,
           so the sheet overflows off the TOP instead of shrinking (MPO-64).
-        */}
-        <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
-          <Pressable
-            style={StyleSheet.absoluteFill}
-            onPress={handleBackdropPress}
-            accessibilityRole="button"
-            accessibilityLabel={t("Close")}
-          >
-            <View flex={1} backgroundColor="$shadow6" />
-          </Pressable>
-          {/*
+        */
+          <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
+            <Pressable
+              style={StyleSheet.absoluteFill}
+              onPress={handleBackdropPress}
+              accessibilityRole="button"
+              accessibilityLabel={t("Close")}
+            >
+              <View flex={1} backgroundColor="$shadow6" />
+            </Pressable>
+            {/*
             Sheet sits above the absoluteFill backdrop in z-order (later sibling).
             Do NOT claim the responder on a wrapper here — that steals presses
             from option rows / calendar days and blocks commit.
           */}
-          <Animated.View
-            testID="floating-panel-sheet"
-            onLayout={(e) => {
-              // Travel distance for a dismiss, and the basis for the detents.
-              // A content-sized picker is shorter than maxHeight, and sliding
-              // it by maxHeight would overshoot into a visible lag.
-              if (restHeightRef.current !== null) return;
-              const h = Math.round(e.nativeEvent.layout.height);
-              if (h <= 0) return;
-              naturalRef.current = h;
-              filledRef.current = h >= maxHeightRef.current - 1;
-              if (h !== measuredHeight) setMeasuredHeight(h);
-            }}
-            style={{
-              // MPO-64: a flex child defaults to flexShrink 0, so without this
-              // the sheet cannot give way to the keyboard at all.
-              flexShrink: 1,
-              minHeight: 0,
-              maxHeight: frameCap,
-              transform: [{ translateY }],
-            }}
-          >
-            <YStack
-              {...knobProps.elevatedSurface}
-              borderBottomLeftRadius={0}
-              borderBottomRightRadius={0}
-              maxHeight={maxHeight}
-              flexShrink={1}
-              minHeight={0}
-              // sheetFill opens at full sheet height (flexShrink keeps the
-              // keyboard from pushing the top of the sheet off-screen).
-              {...(sheetFill ? { height: maxHeight } : undefined)}
-              paddingTop="$2"
-              paddingBottom={sheetBottomPadding}
-              // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
-              onAccessibilityEscape={close}
+            <Animated.View
+              testID="floating-panel-sheet"
+              onLayout={(e) => {
+                // Travel distance for a dismiss, and the basis for the detents.
+                // A content-sized picker is shorter than maxHeight, and sliding
+                // it by maxHeight would overshoot into a visible lag.
+                if (restHeightRef.current !== null) return;
+                const h = Math.round(e.nativeEvent.layout.height);
+                if (h <= 0) return;
+                naturalRef.current = h;
+                filledRef.current = h >= maxHeightRef.current - 1;
+                if (h !== measuredHeight) setMeasuredHeight(h);
+              }}
+              style={{
+                // MPO-64: a flex child defaults to flexShrink 0, so without this
+                // the sheet cannot give way to the keyboard at all.
+                flexShrink: 1,
+                minHeight: 0,
+                maxHeight: frameCap,
+                transform: [{ translateY }],
+              }}
             >
-              {/*
+              <YStack
+                {...knobProps.elevatedSurface}
+                borderBottomLeftRadius={0}
+                borderBottomRightRadius={0}
+                maxHeight={maxHeight}
+                flexShrink={1}
+                minHeight={0}
+                // sheetFill opens at full sheet height (flexShrink keeps the
+                // keyboard from pushing the top of the sheet off-screen).
+                {...(sheetFill ? { height: maxHeight } : undefined)}
+                paddingTop="$2"
+                paddingBottom={sheetBottomPadding}
+                // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
+                onAccessibilityEscape={close}
+              >
+                {/*
                 The grab ZONE, not just the 4pt pill: a 4pt tall target is
                 unhittable. The gesture lives here rather than on the whole
                 sheet so it never fights the ScrollView inside it, which is the
                 same division iOS uses.
               */}
-              <RNView
-                {...panResponder.panHandlers}
-                accessibilityRole="adjustable"
-                accessibilityLabel={t("Drag to resize")}
-                style={{
-                  alignSelf: "stretch",
-                  alignItems: "center",
-                  paddingTop: 4,
-                  paddingBottom: 12,
-                }}
-              >
-                <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
-              </RNView>
-              <YStack
-                padding={framePadding}
-                gap={frameGap}
-                flexShrink={1}
-                {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
-              >
-                <Surface size="md">
-                  {header}
-                  {content}
-                </Surface>
+                <RNView
+                  {...panResponder.panHandlers}
+                  accessibilityRole="adjustable"
+                  accessibilityLabel={t("Drag to resize")}
+                  style={{
+                    alignSelf: "stretch",
+                    alignItems: "center",
+                    paddingTop: 4,
+                    paddingBottom: 12,
+                  }}
+                >
+                  <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
+                </RNView>
+                <YStack
+                  padding={framePadding}
+                  gap={frameGap}
+                  flexShrink={1}
+                  {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
+                >
+                  <Surface size="md">
+                    {header}
+                    {content}
+                  </Surface>
+                </YStack>
               </YStack>
-            </YStack>
-          </Animated.View>
-        </RNView>
+            </Animated.View>
+          </RNView>
+        )}
       </Modal>
     </>
   );
 }
+
+/**
+ * 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
+ * are its own capped height and must not re-decide the side it opened on.
+ */
+function PointPanel({
+  point,
+  bounds,
+  framePadding,
+  frameGap,
+  onBackdropPress,
+  onEscape,
+  children,
+}: {
+  point: PanelPoint;
+  bounds: PanelBounds;
+  framePadding: string;
+  frameGap: string | undefined;
+  onBackdropPress: () => void;
+  onEscape: () => void;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const placement = size
+    ? placeAtPoint({
+        point,
+        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-point"
+        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,
+          maxWidth: bounds.right - bounds.left,
+          maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
+          opacity: placement ? 1 : 0,
+        }}
+      >
+        <YStack
+          {...knobProps.elevatedSurface}
+          padding={framePadding}
+          gap={frameGap}
+          flexShrink={1}
+          minHeight={0}
+          onAccessibilityEscape={onEscape}
+        >
+          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
+            {children}
+          </RNScrollView>
+        </YStack>
+      </RNView>
+    </RNView>
+  );
+}

package/src/FloatingPanel/index.tsx

@@ -8,6 +8,7 @@ import {
   useSyncExternalStore,
 } from "react";
 import {
+  OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
   useResolvedKnobs,
@@ -24,6 +25,14 @@ import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
+import {
+  contextMenuPoint,
+  pointOpensUp,
+  pointPanelLeft,
+  referenceCornerPoint,
+  type ContextMenuEventLike,
+  type PanelPoint,
+} from "./pointAnchor";
 
 type PointerOpenEvent = PanelActionEvent & { button?: number; target?: unknown };
 
@@ -152,7 +161,10 @@ export interface FloatingPanelProps {
    * How the trigger opens the panel. `"press"` (default) is click/tap.
    * `"contextmenu"` is the ContextMenu gesture: web `contextmenu` (right-click
    * / Shift+F10), native long-press. Primary click does not open. Same overlay
-   * stack — not a second positioning engine.
+   * stack — not a second positioning engine. The floating panel opens AT the
+   * gesture's point as a free overlay (`OVERLAY_ANCHOR_GAP` from it, flipping
+   * at the viewport edges); a keyboard open has no point and opens from the
+   * trigger's bottom start corner.
    */
   openOn?: "press" | "contextmenu";
 }
@@ -202,15 +214,15 @@ function useKeyboardFocusIntoPanel(
 }
 
 /**
- * Viewport y of the box a `position: fixed` panel is laid out against. The
- * top math above is in viewport coordinates, which is only right while that
+ * Viewport origin of the box a `position: fixed` panel is laid out against.
+ * The top/left math is in viewport coordinates, which is only right while that
  * box is the viewport. An ancestor with a transform, filter, perspective,
  * paint containment or container query becomes the containing block instead.
  * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
  * transformed dialog still lays out against that dialog. A `display: contents`
  * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
  */
-function fixedContainingBlockTop(element: HTMLElement): number {
+function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
   for (let node = element.parentElement; node; node = node.parentElement) {
     const cs = getComputedStyle(node);
     if (cs.display === "contents") continue;
@@ -223,16 +235,27 @@ function fixedContainingBlockTop(element: HTMLElement): number {
       set(cs.containerType, "normal") ||
       /transform|perspective|filter/.test(cs.willChange) ||
       /paint|layout|strict|content/.test(cs.contain);
-    if (captures) return node.getBoundingClientRect().top + node.clientTop - node.scrollTop;
+    if (captures) {
+      const rect = node.getBoundingClientRect();
+      return {
+        top: rect.top + node.clientTop - node.scrollTop,
+        left: rect.left + node.clientLeft - node.scrollLeft,
+      };
+    }
   }
-  return 0;
+  return { top: 0, left: 0 };
 }
 
-function panelTransformOrigin(placement: string): string {
-  const rtl =
+function isRtl(): boolean {
+  return (
     isWeb &&
     typeof document !== "undefined" &&
-    document.documentElement.getAttribute("dir") === "rtl";
+    document.documentElement.getAttribute("dir") === "rtl"
+  );
+}
+
+function panelTransformOrigin(placement: string): string {
+  const rtl = isRtl();
   const atStart = !placement.endsWith("end");
   const originX = atStart === !rtl ? "left" : "right";
   const originY = placement.startsWith("top") ? "bottom" : "top";
@@ -457,7 +480,8 @@ function FloatingPanelWeb({
   openOn = "press",
 }: FloatingPanelProps) {
   const isFill = sizing === "fill";
-  const overlayStyleRef = useRef<{ top: number; maxHeight: number } | null>(null);
+  const isContextMenu = openOn === "contextmenu";
+  const overlayStyleRef = useRef<{ top: number; left?: number; maxHeight: number } | null>(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
   const grownRef = useRef(false);
@@ -466,27 +490,33 @@ function FloatingPanelWeb({
   const lastScrollTopRef = useRef(0);
   const keyboardOpenRef = useRef(false);
   const contentRef = useRef<HTMLElement | null>(null);
+  const anchorPointRef = useRef<PanelPoint | null>(null);
+  const pointPlacementRef = useRef<{ dropup: boolean; alignEnd: boolean } | null>(null);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
+  const resetPosition = () => {
+    overlayStyleRef.current = null;
+    pinnedTopRef.current = 0;
+    pinnedHeightRef.current = 0;
+    grownRef.current = false;
+    growUpOnlyRef.current = false;
+    growDownOnlyRef.current = false;
+    lastScrollTopRef.current = 0;
+    pointPlacementRef.current = null;
+  };
+
   const panel = useFloatingPanel({
     open,
     onOpenChange,
     disabled,
     repositionRef: repositionFnRef,
     wheelGrowRef: isFill ? undefined : grownRef,
-    widthMode,
+    widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
     fitContent,
     compact,
-    onBeforeOpen: () => {
-      overlayStyleRef.current = null;
-      pinnedTopRef.current = 0;
-      pinnedHeightRef.current = 0;
-      grownRef.current = false;
-      growUpOnlyRef.current = false;
-      growDownOnlyRef.current = false;
-      lastScrollTopRef.current = 0;
-    },
+    freeOverlay: isContextMenu,
+    onBeforeOpen: resetPosition,
   });
 
   // DG-A11Y-04 / Axiom 7: floating-ui useDismiss has no focus manager — when
@@ -496,7 +526,9 @@ function FloatingPanelWeb({
   useReturnFocusOnClose(open, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
   useEffect(() => {
-    if (!open) keyboardOpenRef.current = false;
+    if (open) return;
+    keyboardOpenRef.current = false;
+    anchorPointRef.current = null;
   }, [open]);
 
   const repositionOverlay = useCallback(() => {
@@ -511,7 +543,10 @@ function FloatingPanelWeb({
       dropdownElement.scrollTop = 0;
     }
 
-    const triggerBounds = trig.getBoundingClientRect();
+    const point = isContextMenu
+      ? (anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()))
+      : null;
+    const triggerBounds = point ? { top: point.y, bottom: point.y } : trig.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const cs = getComputedStyle(dropdownElement);
     const borderTopWidth = parseFloat(cs.borderTopWidth) || 0;
@@ -520,13 +555,39 @@ function FloatingPanelWeb({
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
     const liveTransition = panel.knobProps.transition ? panelTransition : "none";
-
-    const isDropup = panel.placement.startsWith("top");
+    const containingBlock = fixedContainingBlockOrigin(dropdownElement);
+
+    let isDropup = panel.placement.startsWith("top");
+    let cssLeft: number | undefined;
+    if (point) {
+      const bounds = {
+        top: panelViewportPadding,
+        left: panelViewportPadding,
+        right: (document.documentElement.clientWidth || window.innerWidth) - panelViewportPadding,
+        bottom: viewportHeight - panelViewportPadding,
+      };
+      // Measured at the viewport's left edge: a fixed box near the right edge
+      // shrinks to the room left of it, and that is not the menu's width.
+      // offsetWidth, not the client rect: the opening frame is scaled 0.96.
+      dropdownElement.style.left = `${-containingBlock.left}px`;
+      const width = dropdownElement.offsetWidth;
+      const { left, alignEnd } = pointPanelLeft(point, width, bounds, isRtl());
+      cssLeft = left - containingBlock.left;
+      dropdownElement.style.left = `${cssLeft}px`;
+      pointPlacementRef.current = {
+        dropup:
+          pointPlacementRef.current?.dropup ??
+          pointOpensUp(point, totalContentHeight, bounds, OVERLAY_ANCHOR_GAP),
+        alignEnd,
+      };
+      isDropup = pointPlacementRef.current.dropup;
+    }
     // Cover ruling (MPO-38): the panel ATTACHES to the trigger it was opened
     // from. `OVERLAY_ATTACH_GAP` is 0, so the panel's top edge coincides with
     // the trigger's bottom edge (and its bottom with the trigger's top when
-    // dropping up) instead of floating 4px clear of it.
-    const gap = OVERLAY_ATTACH_GAP;
+    // dropping up) instead of floating 4px clear of it. A context menu opened
+    // at a point is a FREE overlay and keeps `OVERLAY_ANCHOR_GAP` from it.
+    const gap = point ? OVERLAY_ANCHOR_GAP : OVERLAY_ATTACH_GAP;
     const belowTop = triggerBounds.bottom + gap;
     const aboveBottom = triggerBounds.top - gap;
 
@@ -537,14 +598,19 @@ function FloatingPanelWeb({
       let height = Math.min(totalContentHeight, Math.max(0, available));
       height = Math.max(Math.min(120, Math.max(0, available)), height);
       const top = isDropup ? aboveBottom - height : belowTop;
-      const cssTop = top - fixedContainingBlockTop(dropdownElement);
+      const cssTop = top - containingBlock.top;
 
       const cached = overlayStyleRef.current;
-      if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+      if (
+        !cached ||
+        cached.top !== cssTop ||
+        cached.left !== cssLeft ||
+        cached.maxHeight !== height
+      ) {
         dropdownElement.style.top = `${cssTop}px`;
         dropdownElement.style.maxHeight = `${height}px`;
         dropdownElement.style.height = "";
-        overlayStyleRef.current = { top: cssTop, maxHeight: height };
+        overlayStyleRef.current = { top: cssTop, left: cssLeft, maxHeight: height };
         void dropdownElement.offsetHeight;
       }
 
@@ -611,13 +677,18 @@ function FloatingPanelWeb({
       }
     }
 
-    const cssTop = top - fixedContainingBlockTop(dropdownElement);
+    const cssTop = top - containingBlock.top;
     const cached = overlayStyleRef.current;
-    if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+    if (
+      !cached ||
+      cached.top !== cssTop ||
+      cached.left !== cssLeft ||
+      cached.maxHeight !== height
+    ) {
       dropdownElement.style.top = `${cssTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyleRef.current = { top: cssTop, maxHeight: height };
+      overlayStyleRef.current = { top: cssTop, left: cssLeft, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
@@ -634,6 +705,7 @@ function FloatingPanelWeb({
     });
   }, [
     isFill,
+    isContextMenu,
     panel.placement,
     panel.refs,
     panel.triggerRef,
@@ -643,7 +715,6 @@ function FloatingPanelWeb({
 
   repositionFnRef.current = repositionOverlay;
 
-  const isContextMenu = openOn === "contextmenu";
   const click = useClick(panel.context, {
     event: "mousedown",
     enabled: !isContextMenu,
@@ -756,14 +827,27 @@ function FloatingPanelWeb({
     [disabled, isContextMenu, onOpenChange],
   );
 
-  const openFromContextMenu = useCallback(
-    (event: { preventDefault: () => void }) => {
-      event.preventDefault();
-      if (disabled) return;
-      onOpenChange(true);
+  const openFromContextMenu = (
+    event: ContextMenuEventLike & {
+      preventDefault: () => void;
+      nativeEvent?: ContextMenuEventLike;
     },
-    [disabled, onOpenChange],
-  );
+  ) => {
+    event.preventDefault();
+    if (disabled) return;
+    anchorPointRef.current = contextMenuPoint(
+      event.nativeEvent ?? event,
+      panel.triggerRef.current,
+      isRtl(),
+    );
+    if (!open) {
+      onOpenChange(true);
+      return;
+    }
+    resetPosition();
+    panel.initializingRef.current = true;
+    repositionOverlay();
+  };
 
   // useClick's mousedown opener calls preventDefault, so a pointer open never
   // focuses the trigger the way a pressed button is focused. The render that
@@ -827,7 +911,7 @@ function FloatingPanelWeb({
                 ...elevatedSurfaceStyle,
                 position: panel.strategy,
                 top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-                left: panel.x ?? 0,
+                left: overlayStyleRef.current?.left ?? panel.x ?? 0,
                 scrollbarWidth: "none" as any,
                 zIndex: zIndex.dropdown,
                 overflow: "auto",
@@ -841,7 +925,11 @@ function FloatingPanelWeb({
                 // then positions against this box and is clipped by its scroll.
                 transform: panel.visible ? "none" : "scale(0.96)",
                 transition: webTransition,
-                transformOrigin: panelTransformOrigin(panel.placement),
+                transformOrigin: panelTransformOrigin(
+                  pointPlacementRef.current
+                    ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
+                    : panel.placement,
+                ),
               },
               onScroll: handleScroll,
               onTransitionEnd: (event) => {