@multiplatform.one/forms 7.21.0 → 7.22.0

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -0,0 +1,141 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import {
+  contextMenuPoint,
+  placeAtPoint,
+  pointOpensUp,
+  pointPanelLeft,
+  type PanelBounds,
+} from "./pointAnchor";
+
+const bounds: PanelBounds = { top: 10, left: 10, right: 1014, bottom: 758 };
+const gap = OVERLAY_ANCHOR_GAP;
+
+describe("pointPanelLeft", () => {
+  it("puts the panel's start edge on the point when it fits", () => {
+    expect(pointPanelLeft({ x: 300, y: 0 }, 200, bounds)).toEqual({ left: 300, alignEnd: false });
+  });
+
+  it("flips to open toward the start when the end side would overflow", () => {
+    expect(pointPanelLeft({ x: 900, y: 0 }, 200, bounds)).toEqual({ left: 700, alignEnd: true });
+  });
+
+  it("clamps into the bounds when neither side fits", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 310, bottom: 758 };
+    expect(pointPanelLeft({ x: 200, y: 0 }, 250, narrow)).toEqual({ left: 60, alignEnd: false });
+  });
+
+  it("pins to the start bound when the panel is wider than the bounds", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 110, bottom: 758 };
+    expect(pointPanelLeft({ x: 50, y: 0 }, 400, narrow).left).toBe(10);
+  });
+
+  it("opens toward the left from the point in RTL and flips right at the left edge", () => {
+    expect(pointPanelLeft({ x: 600, y: 0 }, 200, bounds, true)).toEqual({
+      left: 400,
+      alignEnd: false,
+    });
+    expect(pointPanelLeft({ x: 100, y: 0 }, 200, bounds, true)).toEqual({
+      left: 100,
+      alignEnd: true,
+    });
+  });
+});
+
+describe("pointOpensUp", () => {
+  it("opens down whenever the panel fits below the point", () => {
+    expect(pointOpensUp({ x: 0, y: 600 }, 150, bounds, gap)).toBe(false);
+  });
+
+  it("flips up when only the space above fits", () => {
+    expect(pointOpensUp({ x: 0, y: 700 }, 150, bounds, gap)).toBe(true);
+  });
+
+  it("takes the roomier side when neither fits", () => {
+    expect(pointOpensUp({ x: 0, y: 300 }, 700, bounds, gap)).toBe(false);
+    expect(pointOpensUp({ x: 0, y: 500 }, 700, bounds, gap)).toBe(true);
+  });
+});
+
+describe("placeAtPoint", () => {
+  it("sits OVERLAY_ANCHOR_GAP below the point, start edge on the point", () => {
+    expect(
+      placeAtPoint({ point: { x: 300, y: 200 }, width: 180, height: 120, bounds, gap }),
+    ).toEqual({
+      left: 300,
+      top: 200 + gap,
+      maxHeight: 758 - (200 + gap),
+      dropup: false,
+      alignEnd: false,
+    });
+  });
+
+  it("flips both ways in the bottom-right corner, bottom edge gap above the point", () => {
+    const placement = placeAtPoint({
+      point: { x: 1000, y: 740 },
+      width: 180,
+      height: 120,
+      bounds,
+      gap,
+    });
+    expect(placement.left).toBe(1000 - 180);
+    expect(placement.top).toBe(740 - gap - 120);
+    expect(placement.dropup).toBe(true);
+    expect(placement.alignEnd).toBe(true);
+  });
+
+  it("caps the height at the chosen side's room, so a tall menu scrolls inside the bounds", () => {
+    const placement = placeAtPoint({
+      point: { x: 300, y: 500 },
+      width: 180,
+      height: 900,
+      bounds,
+      gap,
+    });
+    expect(placement.dropup).toBe(true);
+    expect(placement.maxHeight).toBe(500 - gap - 10);
+    expect(placement.top).toBe(10);
+  });
+});
+
+describe("contextMenuPoint", () => {
+  const reference = {
+    getBoundingClientRect: () => ({ left: 40, right: 240, top: 100, bottom: 144 }),
+  };
+
+  it("takes the pointer's viewport coordinates from a mouse right-click", () => {
+    expect(
+      contextMenuPoint({ clientX: 120, clientY: 130, button: 2, pointerType: "mouse" }, reference),
+    ).toEqual({ x: 120, y: 130 });
+  });
+
+  it("takes the press point from a touch long-press", () => {
+    expect(
+      contextMenuPoint({ clientX: 90, clientY: 110, button: 0, pointerType: "touch" }, reference),
+    ).toEqual({ x: 90, y: 110 });
+  });
+
+  it("takes a right-click's coordinates when the event is a plain MouseEvent", () => {
+    expect(contextMenuPoint({ clientX: 150, clientY: 120, button: 2 }, reference)).toEqual({
+      x: 150,
+      y: 120,
+    });
+  });
+
+  it("anchors a keyboard open (Shift+F10, the Menu key) to the target's bottom start corner", () => {
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference),
+    ).toEqual({ x: 40, y: 144 });
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, reference)).toEqual({
+      x: 40,
+      y: 144,
+    });
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference, true),
+    ).toEqual({ x: 240, y: 144 });
+  });
+
+  it("has no point without a pointer or a reference", () => {
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, null)).toBeNull();
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -0,0 +1,122 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+
+/**
+ * A panel opened at a POINT rather than from a trigger's box: the ContextMenu
+ * gesture (MPO-21 G5). layoutTokens.ts files a pointer-positioned context menu
+ * as a FREE overlay: content-sized, `OVERLAY_ANCHOR_GAP` from its anchor,
+ * flipping at the viewport edges instead of overflowing. The anchor here is a
+ * zero-size box at the point, so "start-aligned to the anchor" puts the
+ * panel's start edge on the pointer's x.
+ */
+export interface PanelPoint {
+  x: number;
+  y: number;
+}
+
+/** The box a panel must stay inside, already inset by padding and safe area. */
+export interface PanelBounds {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export function pointPanelLeft(
+  point: PanelPoint,
+  width: number,
+  bounds: PanelBounds,
+  rtl = false,
+): { left: number; alignEnd: boolean } {
+  const towardEnd = rtl ? point.x - width : point.x;
+  const towardStart = rtl ? point.x : point.x - width;
+  const fits = (left: number) => left >= bounds.left && left + width <= bounds.right;
+  const alignEnd = !fits(towardEnd) && fits(towardStart);
+  const raw = alignEnd ? towardStart : towardEnd;
+  return { left: Math.max(bounds.left, Math.min(raw, bounds.right - width)), alignEnd };
+}
+
+/** Below when it fits, above when only that fits, else the roomier side. */
+export function pointOpensUp(
+  point: PanelPoint,
+  height: number,
+  bounds: PanelBounds,
+  gap: number = OVERLAY_ANCHOR_GAP,
+): boolean {
+  const below = bounds.bottom - (point.y + gap);
+  const above = point.y - gap - bounds.top;
+  if (height <= below) return false;
+  if (height <= above) return true;
+  return above > below;
+}
+
+export interface PointPlacement {
+  left: number;
+  top: number;
+  maxHeight: number;
+  dropup: boolean;
+  alignEnd: boolean;
+}
+
+export function placeAtPoint({
+  point,
+  width,
+  height,
+  bounds,
+  gap = OVERLAY_ANCHOR_GAP,
+  rtl = false,
+}: {
+  point: PanelPoint;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  gap?: number;
+  rtl?: boolean;
+}): PointPlacement {
+  const { left, alignEnd } = pointPanelLeft(point, width, bounds, rtl);
+  const dropup = pointOpensUp(point, height, bounds, gap);
+  const maxHeight = Math.max(
+    0,
+    dropup ? point.y - gap - bounds.top : bounds.bottom - (point.y + gap),
+  );
+  const top = dropup ? point.y - gap - Math.min(height, maxHeight) : point.y + gap;
+  return { left, top, maxHeight, dropup, alignEnd };
+}
+
+export interface ContextMenuEventLike {
+  clientX: number;
+  clientY: number;
+  button?: number;
+  pointerType?: string;
+}
+
+/**
+ * Where a `contextmenu` event asks the menu to open. A mouse right-click or a
+ * touch long-press carries the pointer's viewport coordinates. A keyboard open
+ * (Shift+F10, the Menu key) has no pointer: Chromium sends a PointerEvent with
+ * an empty `pointerType` aimed at the focused element's centre
+ * (`EventHandler::ShowNonLocatedContextMenu`). It opens from the target's
+ * bottom start corner. A plain MouseEvent counts as a pointer only when it is
+ * a right-click or carries coordinates.
+ */
+export function contextMenuPoint(
+  event: ContextMenuEventLike,
+  reference: PointReference | null,
+  rtl = false,
+): PanelPoint | null {
+  const fromPointer =
+    event.pointerType !== undefined
+      ? event.pointerType !== ""
+      : event.button === 2 || event.clientX !== 0 || event.clientY !== 0;
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+  return reference ? referenceCornerPoint(reference, rtl) : null;
+}
+
+export interface PointReference {
+  getBoundingClientRect(): { left: number; right: number; bottom: number };
+}
+
+/** The target's bottom start corner: where a menu with no pointer opens. */
+export function referenceCornerPoint(reference: PointReference, rtl = false): PanelPoint {
+  const rect = reference.getBoundingClientRect();
+  return { x: rtl ? rect.right : rect.left, y: rect.bottom };
+}

package/src/FloatingPanel/useFloatingPanel.ts

@@ -104,6 +104,12 @@ export interface UseFloatingPanelOptions {
    * at the compact space step.
    */
   compact?: boolean;
+  /**
+   * The panel opens at a point, not from the trigger's box (ContextMenu). It
+   * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
+   * value instead of dropping to the trigger's drawn arc.
+   */
+  freeOverlay?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -225,6 +231,7 @@ export function useFloatingPanel({
   widthMode: widthModeProp,
   fitContent,
   compact,
+  freeOverlay = false,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
   const { knobProps } = useResolvedKnobs({ compact });
@@ -295,14 +302,14 @@ export function useFloatingPanel({
   const setupForOpen = useCallback(() => {
     computePlacement();
     if (canUseDom && triggerRef.current) {
-      setMeasuredRadius(measureDrawnRadius(triggerRef.current));
+      setMeasuredRadius(freeOverlay ? null : measureDrawnRadius(triggerRef.current));
     }
     onBeforeOpenRef.current?.();
     if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
     floatingStyleRef.current = {};
     initializingRef.current = true;
     setMounted(true);
-  }, [computePlacement]);
+  }, [computePlacement, freeOverlay]);
 
   // ── Lifecycle effect ──────────────────────────────────────
 

package/types/FloatingPanel/index.d.ts

@@ -112,7 +112,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";
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAsB3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAOzD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG/E,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,cAAc,EACd,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2FAA2F;IAC3F,kBAAkB,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CAClC;AA4GD,wBAAgB,eAAe,YAE9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAWtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAuB3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAezD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG/E,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,cAAc,EACd,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2FAA2F;IAC3F,kBAAkB,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CAClC;AAuHD,wBAAgB,eAAe,YAE9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAWtD"}

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

@@ -43,6 +43,11 @@
  *   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 { FloatingPanelProps } from "./index";
 export { useFloatingPanel, panelAnimationDuration, panelGrowDuration, panelTransition, panelViewportPadding, } from "./useFloatingPanel";

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AA4BH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,uFAAuF;AACvF,wBAAgB,eAAe,YAE9B;AAmBD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,EACV,aAAyB,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAA0B,EAC1B,MAAM,EACN,eAAe,EACf,WAAW,EACX,SAAS,EACT,MAAgB,GACjB,EAAE,kBAAkB,2CA+bpB"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AA+BH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAOlD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,uFAAuF;AACvF,wBAAgB,eAAe,YAE9B;AAmBD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,EACV,aAAyB,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAA0B,EAC1B,MAAM,EACN,eAAe,EACf,WAAW,EACX,SAAS,EACT,MAAgB,GACjB,EAAE,kBAAkB,2CAiepB"}

package/types/FloatingPanel/pointAnchor.d.ts

@@ -0,0 +1,66 @@
+/**
+ * A panel opened at a POINT rather than from a trigger's box: the ContextMenu
+ * gesture (MPO-21 G5). layoutTokens.ts files a pointer-positioned context menu
+ * as a FREE overlay: content-sized, `OVERLAY_ANCHOR_GAP` from its anchor,
+ * flipping at the viewport edges instead of overflowing. The anchor here is a
+ * zero-size box at the point, so "start-aligned to the anchor" puts the
+ * panel's start edge on the pointer's x.
+ */
+export interface PanelPoint {
+    x: number;
+    y: number;
+}
+/** The box a panel must stay inside, already inset by padding and safe area. */
+export interface PanelBounds {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export declare function pointPanelLeft(point: PanelPoint, width: number, bounds: PanelBounds, rtl?: boolean): {
+    left: number;
+    alignEnd: boolean;
+};
+/** Below when it fits, above when only that fits, else the roomier side. */
+export declare function pointOpensUp(point: PanelPoint, height: number, bounds: PanelBounds, gap?: number): boolean;
+export interface PointPlacement {
+    left: number;
+    top: number;
+    maxHeight: number;
+    dropup: boolean;
+    alignEnd: boolean;
+}
+export declare function placeAtPoint({ point, width, height, bounds, gap, rtl, }: {
+    point: PanelPoint;
+    width: number;
+    height: number;
+    bounds: PanelBounds;
+    gap?: number;
+    rtl?: boolean;
+}): PointPlacement;
+export interface ContextMenuEventLike {
+    clientX: number;
+    clientY: number;
+    button?: number;
+    pointerType?: string;
+}
+/**
+ * Where a `contextmenu` event asks the menu to open. A mouse right-click or a
+ * touch long-press carries the pointer's viewport coordinates. A keyboard open
+ * (Shift+F10, the Menu key) has no pointer: Chromium sends a PointerEvent with
+ * an empty `pointerType` aimed at the focused element's centre
+ * (`EventHandler::ShowNonLocatedContextMenu`). It opens from the target's
+ * bottom start corner. A plain MouseEvent counts as a pointer only when it is
+ * a right-click or carries coordinates.
+ */
+export declare function contextMenuPoint(event: ContextMenuEventLike, reference: PointReference | null, rtl?: boolean): PanelPoint | null;
+export interface PointReference {
+    getBoundingClientRect(): {
+        left: number;
+        right: number;
+        bottom: number;
+    };
+}
+/** The target's bottom start corner: where a menu with no pointer opens. */
+export declare function referenceCornerPoint(reference: PointReference, rtl?: boolean): PanelPoint;
+//# sourceMappingURL=pointAnchor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pointAnchor.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/pointAnchor.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,gFAAgF;AAChF,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,EACnB,GAAG,UAAQ,GACV;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAOrC;AAED,4EAA4E;AAC5E,wBAAgB,YAAY,CAC1B,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,WAAW,EACnB,GAAG,GAAE,MAA2B,GAC/B,OAAO,CAMT;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,GAAwB,EACxB,GAAW,GACZ,EAAE;IACD,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CASjB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,oBAAoB,EAC3B,SAAS,EAAE,cAAc,GAAG,IAAI,EAChC,GAAG,UAAQ,GACV,UAAU,GAAG,IAAI,CAOnB;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1E;AAED,4EAA4E;AAC5E,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,UAAQ,GAAG,UAAU,CAGvF"}

package/types/FloatingPanel/useFloatingPanel.d.ts

@@ -65,6 +65,12 @@ export interface UseFloatingPanelOptions {
      * at the compact space step.
      */
     compact?: boolean;
+    /**
+     * The panel opens at a point, not from the trigger's box (ContextMenu). It
+     * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
+     * value instead of dropping to the trigger's drawn arc.
+     */
+    freeOverlay?: boolean;
 }
 /** One place that resolves the deprecated boolean onto the three modes, so
  *  the hook and the component cannot disagree about what a consumer meant. */
@@ -111,5 +117,5 @@ export interface UseFloatingPanelReturn {
  * declared, so the only way to lock it is to feed it real boxes.
  */
 export declare function measureDrawnRadius(el: HTMLElement): number | null;
-export declare function useFloatingPanel({ open, onOpenChange, disabled, onBeforeOpen, repositionRef, scrollBoundaryRef, middleware: middlewareProp, useAutoUpdate: useAutoUpdateProp, wheelGrowRef, widthMode: widthModeProp, fitContent, compact, }: UseFloatingPanelOptions): UseFloatingPanelReturn;
+export declare function useFloatingPanel({ open, onOpenChange, disabled, onBeforeOpen, repositionRef, scrollBoundaryRef, middleware: middlewareProp, useAutoUpdate: useAutoUpdateProp, wheelGrowRef, widthMode: widthModeProp, fitContent, compact, freeOverlay, }: UseFloatingPanelOptions): UseFloatingPanelReturn;
 //# sourceMappingURL=useFloatingPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPanel.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/useFloatingPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAmC,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAIL,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAsBf,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC;;;kEAGkE;AAClE,eAAO,MAAM,iBAAiB,IAAqB,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAClF,eAAO,MAAM,eAAe,2HAA0N,CAAC;AAIvP,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,uEAAuE;IACvE,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;8EAC8E;AAC9E,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,UAAU,EAAE,OAAO,GAAG,SAAS,GAC9B,cAAc,CAGhB;AAID,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC;IACnD,IAAI,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IACrD,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IAEnB,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,iBAAiB,EAAE,SAAS,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjD,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEpC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9C;;;;OAIG;IACH,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;CAC7D;AAwCD;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAQjE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAwB,EACvC,YAAY,EACZ,SAAS,EAAE,aAAa,EACxB,UAAU,EACV,OAAO,GACR,EAAE,uBAAuB,GAAG,sBAAsB,CAiSlD"}
+{"version":3,"file":"useFloatingPanel.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/useFloatingPanel.ts"],"names":[],"mappings":"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"}