@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/FloatingPanel/index.tsx

@@ -1,6 +1,12 @@
 import type { ReactNode, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { OVERLAY_BREAKPOINT, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  OVERLAY_ANCHOR_GAP,
+  OVERLAY_BREAKPOINT,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+  ensureKeyboardModalityTracking,
+} from "@multiplatform.one/theme";
 import { isWeb, Sheet, useMedia, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
@@ -92,6 +98,61 @@ export interface FloatingPanelProps {
   triggerA11y?: { label?: string; value?: string; hint?: string };
 }
 
+/** Inner stops a keyboard-open should land on. House Button is a
+ *  `div[role=button][tabindex=0]`, so `[tabindex]` covers it. */
+const PANEL_FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/** LC-71: the panel/sheet frame is not a control. Auto-focus on open must
+ *  not paint a ring on the chrome; the first inner control rings only when
+ *  the open was keyboard-origin. */
+const panelChromeFocus = {
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
+} as const;
+
+function useKeyboardFocusIntoPanel(
+  open: boolean,
+  frameRef: { current: HTMLElement | null },
+  keyboardOpenRef?: { current: boolean },
+) {
+  useEffect(() => {
+    if (!open || !isWeb) return;
+    const focusFirst = () => {
+      const frame = frameRef.current;
+      if (!frame) return;
+      if (!wasKeyboardFocus() && !keyboardOpenRef?.current) return;
+      const active = document.activeElement;
+      if (active instanceof HTMLElement && frame.contains(active) && active !== frame) return;
+      const first = frame.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+      if (!first || first === frame) return;
+      first.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
+    };
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(focusFirst);
+    });
+    const timeout = setTimeout(focusFirst, 0);
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+      clearTimeout(timeout);
+    };
+  }, [open, frameRef, keyboardOpenRef]);
+}
+
+function panelTransformOrigin(placement: string): string {
+  const rtl =
+    isWeb &&
+    typeof document !== "undefined" &&
+    document.documentElement.getAttribute("dir") === "rtl";
+  const atStart = !placement.endsWith("end");
+  const originX = atStart === !rtl ? "left" : "right";
+  const originY = placement.startsWith("top") ? "bottom" : "top";
+  return `${originY} ${originX}`;
+}
+
 // ── FloatingPanel ─────────────────────────────────────────────
 
 // Canonical float↔sheet pivot (theme `layoutBreakpoints.expanded`, DG-LAY-01).
@@ -112,6 +173,9 @@ export function useViewportGtSm() {
 }
 
 export function FloatingPanel(props: FloatingPanelProps) {
+  // LC-71: install modality tracking during render so the Enter that opens
+  // the panel is already classified as keyboard-origin when focus moves in.
+  if (isWeb) ensureKeyboardModalityTracking();
   const media = useMedia();
   const viewportGtSm = useViewportGtSm();
   // When sheet is undefined: use sheet on native and sm (viewport ≤860px). Floating on desktop.
@@ -157,19 +221,43 @@ function FloatingPanelSheet({
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
   useSheetModalFocus(open, sheetFrameRef);
+  useKeyboardFocusIntoPanel(open, sheetFrameRef);
 
   const framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
   const frameGap = contentPadding === "none" ? undefined : knobProps.gapLg.gap;
 
+  // `trigger` is a SLOT: this wrapper is what opens the sheet, so the press has
+  // to travel from the slot's content out to here. Tamagui's press wrapper
+  // calls `e.stopPropagation()` on any component carrying its own
+  // `onPress`/`onClick` (`@tamagui/web` `createComponent`, the `onPress`
+  // branch), so a PRESSABLE trigger — a Button — swallowed the click and the
+  // sheet never opened, by pointer OR by keyboard. Capture runs before any
+  // descendant handler, and also catches the click Button synthesizes for
+  // Enter/Space (LC-50). Web-only: capture is a DOM concept, and the native
+  // half owns the gesture outright (index.native.tsx puts the trigger subtree
+  // behind `pointerEvents="none"` so nothing in it can claim the responder).
+  //
+  // Both openers below are `true`, never `!open`. React installs its capture
+  // and bubble root listeners separately, so a discrete click flushes the
+  // capture update BEFORE the bubble handler reads `open`, and a toggle there
+  // shut the sheet it had just opened. Nothing is lost: the sheet is modal, so
+  // its overlay covers the trigger and the toggle could only ever have run
+  // with `open === false`.
+  const openFromTrigger = () => handleOpenChange(true);
+  const triggerActivation = isWeb
+    ? ({ onClickCapture: openFromTrigger } as Record<string, unknown>)
+    : undefined;
+
   return (
     <>
       <View flexDirection="row" alignItems="center" width="100%">
         <View
           flex={1}
           minWidth={0}
-          onPress={() => handleOpenChange(!open)}
+          onPress={openFromTrigger}
           cursor={disabled ? "not-allowed" : "pointer"}
           opacity={disabled ? 0.5 : 1}
+          {...triggerActivation}
         >
           {trigger}
         </View>
@@ -199,6 +287,10 @@ function FloatingPanelSheet({
           // just omits `ref`, hence the cast. tabIndex -1 makes the frame a
           // programmatic focus target without joining the tab order.
           {...({ ref: sheetFrameRef, tabIndex: -1 } as Record<string, unknown>)}
+          {...knobProps.elevatedSurface}
+          borderBottomLeftRadius={0}
+          borderBottomRightRadius={0}
+          {...panelChromeFocus}
           padding={framePadding}
           gap={frameGap}
         >
@@ -236,6 +328,7 @@ function FloatingPanelWeb({
   const growUpOnlyRef = useRef(false);
   const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
+  const keyboardOpenRef = useRef(false);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
@@ -262,6 +355,10 @@ function FloatingPanelWeb({
   // inside it, focus falls to <body>. Return it to the pre-open element
   // (the trigger's focusable). Deliberate focus moves elsewhere are kept.
   useReturnFocusOnClose(open);
+  useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
+  useEffect(() => {
+    if (!open) keyboardOpenRef.current = false;
+  }, [open]);
 
   const repositionOverlay = useCallback(() => {
     const dropdownElement = panel.refs.floating.current;
@@ -286,14 +383,18 @@ function FloatingPanelWeb({
     const liveTransition = panel.knobProps.transition ? panelTransition : "none";
 
     const isDropup = panel.placement.startsWith("top");
+    const gap = OVERLAY_ANCHOR_GAP;
+    // Anchor beside the trigger (Radix / Apple / Fluent), never covering it.
+    const belowTop = triggerBounds.bottom + gap;
+    const aboveBottom = triggerBounds.top - gap;
 
     if (isFill) {
       const available = isDropup
-        ? triggerBounds.bottom - panelViewportPadding
-        : viewportHeight - triggerBounds.top - panelViewportPadding;
-      let height = Math.min(totalContentHeight, available);
-      height = Math.max(120, height);
-      const top = isDropup ? triggerBounds.bottom - height : triggerBounds.top;
+        ? aboveBottom - panelViewportPadding
+        : viewportHeight - belowTop - panelViewportPadding;
+      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 cached = overlayStyleRef.current;
       if (!cached || cached.top !== top || cached.maxHeight !== height) {
@@ -318,7 +419,7 @@ function FloatingPanelWeb({
       return;
     }
 
-    const idealTop = isDropup ? triggerBounds.bottom - totalContentHeight : triggerBounds.top;
+    const idealTop = isDropup ? aboveBottom - totalContentHeight : belowTop;
     const idealBottom = idealTop + totalContentHeight;
     const pinnedTop = Math.max(panelViewportPadding, idealTop);
     const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
@@ -448,10 +549,37 @@ function FloatingPanelWeb({
   // animation=none → no CSS tween (same contract as knobProps.transition === undefined)
   const webTransition = panel.knobProps.transition ? panelTransition : "none";
 
+  // Same slot problem as the sheet branch, but only half of it lands here. The
+  // POINTER path survives, because `useClick(..., { event: "mousedown" })`
+  // listens on mousedown and Tamagui only stops the click. The KEYBOARD path
+  // did not: activation arrives as the click Button synthesizes for Enter/Space
+  // (LC-50), which is swallowed at the Button, while floating-ui's own keydown
+  // handler stands down on a button target expecting exactly that click.
+  //
+  // Gated to SYNTHESIZED clicks. A real pointer click must keep falling through
+  // to floating-ui's mousedown toggle, or pressing an open panel's trigger
+  // would re-open what the mousedown just closed. `detail` is the
+  // discriminator, measured rather than assumed
+  // (`p-results/trigger-slot/detail.json`): a pointer click carries the click
+  // count, `element.click()` and native keyboard activation carry 0.
+  const openFromSynthesizedClick = useCallback(
+    (event: { detail: number }) => {
+      if (disabled || event.detail !== 0) return;
+      // detail 0 is keyboard/programmatic activation (LC-50). Count it as
+      // keyboard-origin so the first inner control rings (LC-71).
+      keyboardOpenRef.current = true;
+      onOpenChange(true);
+    },
+    [disabled, onOpenChange],
+  );
+
   return (
     <>
       <View
-        {...getReferenceProps({ ref: panel.setReferenceRef })}
+        {...getReferenceProps({
+          ref: panel.setReferenceRef,
+          onClickCapture: openFromSynthesizedClick,
+        })}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
       >
@@ -474,12 +602,12 @@ function FloatingPanelWeb({
               opacity: panel.visible ? 1 : 0,
               transform: panel.visible ? "scale(1)" : "scale(0.96)",
               transition: webTransition,
-              transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+              transformOrigin: panelTransformOrigin(panel.placement),
             },
             onScroll: handleScroll,
           })}
           data-testid="floating-panel-viewport"
-          outlineWidth={0}
+          {...panelChromeFocus}
           pointerEvents={panel.visible ? "auto" : "none"}
           {...panel.knobProps.elevatedSurface}
           // Complete elevatedSurface fragment above is the ONLY surface source

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -0,0 +1,59 @@
+/**
+ * OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): anchored listbox panels match
+ * the trigger width EXACTLY — no oversize fudge. These specs pin the size
+ * middleware's min-width so a regression back to `width + 8` (which broke
+ * flush start-alignment via shift() and let trigger decorations ghost around
+ * the panel) fails loudly.
+ */
+import { waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { useFloatingPanel } from "./useFloatingPanel";
+
+function Harness({ open, fitContent }: { open: boolean; fitContent?: boolean }) {
+  const panel = useFloatingPanel({
+    open,
+    onOpenChange: () => {},
+    useAutoUpdate: false,
+    fitContent,
+  });
+  return (
+    <>
+      <div data-testid="anchor-trigger" ref={panel.setReferenceRef} />
+      {panel.mounted && <div data-testid="anchor-floating" ref={panel.refs.setFloating} />}
+    </>
+  );
+}
+
+function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number; height: number }) {
+  el.getBoundingClientRect = () =>
+    ({
+      ...rect,
+      top: rect.y,
+      left: rect.x,
+      right: rect.x + rect.width,
+      bottom: rect.y + rect.height,
+      toJSON: () => ({}),
+    }) as DOMRect;
+}
+
+describe("useFloatingPanel width matching", () => {
+  it("sets the panel min-width to the trigger width exactly", async () => {
+    const result = renderWithProviders(<Harness open={false} />);
+    mockRect(result.getByTestId("anchor-trigger"), { x: 16, y: 16, width: 240, height: 44 });
+    result.rerender(<Harness open />);
+    await waitFor(() => {
+      expect(result.getByTestId("anchor-floating").style.minWidth).toBe("240px");
+    });
+  });
+
+  it("leaves width alone for fitContent panels", async () => {
+    const result = renderWithProviders(<Harness open={false} fitContent />);
+    mockRect(result.getByTestId("anchor-trigger"), { x: 16, y: 16, width: 240, height: 44 });
+    result.rerender(<Harness open fitContent />);
+    await waitFor(() => {
+      expect(result.getByTestId("anchor-floating")).toBeTruthy();
+    });
+    expect(result.getByTestId("anchor-floating").style.minWidth).toBe("");
+  });
+});

package/src/FloatingPanel/useFloatingPanel.ts

@@ -1,6 +1,6 @@
 import type { Middleware, Placement } from "@floating-ui/react";
 import { autoUpdate, offset, shift, size, useFloating } from "@floating-ui/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { OVERLAY_ANCHOR_GAP, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   type Dispatch,
   type RefObject,
@@ -18,9 +18,25 @@ import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingLis
 // native (unused there, but it must not crash).
 const canUseDom = typeof window !== "undefined" && typeof window.addEventListener === "function";
 
+/**
+ * Snap a floating-ui coordinate to the device pixel grid. A fractional
+ * overlay origin (e.g. after shift() near a viewport edge) draws its border
+ * on a half-lit pixel row that reads as a doubled/ghosted edge next to the
+ * trigger's crisp border (OVERLAY_ANCHOR_GAP rule: overlay borders must
+ * coincide with the surfaces they align to by construction).
+ */
+function roundToDevicePixel(value: number): number {
+  const dpr = canUseDom ? window.devicePixelRatio || 1 : 1;
+  return Math.round(value * dpr) / dpr;
+}
+
 export const panelAnimationDuration = 180;
 export const panelGrowDuration = 200;
 export const panelViewportPadding = 10;
+/** Gap between trigger and panel (Radix / Apple popover offset). Restored
+ * after the 2026-08-14 merge dropped it while its importers survived —
+ * aliased to the house overlay gap so there is one source (Axiom 5). */
+export const panelAnchorOffset = OVERLAY_ANCHOR_GAP;
 export const panelTransition = `opacity ${panelAnimationDuration}ms ease-out, transform ${panelAnimationDuration}ms ease-out, top ${panelGrowDuration}ms ease-out, max-height ${panelGrowDuration}ms ease-out, height ${panelGrowDuration}ms ease-out`;
 
 // ── Options ───────────────────────────────────────────────────
@@ -82,13 +98,34 @@ export interface UseFloatingPanelReturn {
   setReferenceRef: (node: HTMLElement | null) => void;
   setMounted: Dispatch<SetStateAction<boolean>>;
 
-  dropdownRadius: string | 0;
+  /**
+   * Panel corner radius: the trigger's measured drawn radius (px) once open
+   * — arcs must coincide with the trigger at the shared corner region — or
+   * the clamped radius token before measurement / off-DOM.
+   */
+  dropdownRadius: string | number;
   hasBorder: boolean;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
 }
 
 // ── Hook ──────────────────────────────────────────────────────
 
+/**
+ * OVERLAY_ANCHOR_GAP rule — radius equality: a panel that aligns to (or
+ * covers) its trigger must draw the SAME corner arc as the trigger at the
+ * shared corner region. Token equality is not enough — CSS shrinks
+ * over-large radii to fit the box, so a `full` ($12 → 50px) trigger draws
+ * ~22px arcs on a 44px-high field while a token-styled panel would draw its
+ * own, different arc. Measure the trigger's effective (drawn) radius
+ * instead and hand that px value to the panel.
+ */
+function measureDrawnRadius(el: HTMLElement): number | null {
+  const raw = parseFloat(getComputedStyle(el).borderTopLeftRadius);
+  if (!Number.isFinite(raw)) return null;
+  const rect = el.getBoundingClientRect();
+  return Math.min(raw, rect.height / 2, rect.width / 2);
+}
+
 export function useFloatingPanel({
   open,
   onOpenChange,
@@ -103,7 +140,12 @@ export function useFloatingPanel({
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const { knobProps } = useResolvedKnobs();
   const hasBorder = knobProps.borderRadius.borderWidth > 0;
-  const dropdownRadius = clampDropdownRadius(knobProps.borderRadius.borderRadius);
+  // Radius equality (see measureDrawnRadius): once the trigger has been
+  // measured on open, the panel wears the trigger's drawn radius in px so
+  // the arcs coincide at the shared corner region; the clamped token is
+  // only the pre-measurement / non-DOM fallback.
+  const [measuredRadius, setMeasuredRadius] = useState<number | null>(null);
+  const dropdownRadius = measuredRadius ?? clampDropdownRadius(knobProps.borderRadius.borderRadius);
 
   // ── State ─────────────────────────────────────────────────
 
@@ -152,6 +194,9 @@ export function useFloatingPanel({
 
   const setupForOpen = useCallback(() => {
     computePlacement();
+    if (canUseDom && triggerRef.current) {
+      setMeasuredRadius(measureDrawnRadius(triggerRef.current));
+    }
     onBeforeOpenRef.current?.();
     if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
     floatingStyleRef.current = {};
@@ -187,7 +232,7 @@ export function useFloatingPanel({
   // ── Floating UI setup ─────────────────────────────────────
 
   const defaultMiddleware: Middleware[] = [
-    offset({ mainAxis: 4 }),
+    offset({ mainAxis: OVERLAY_ANCHOR_GAP }),
     // Horizontal collision handling: panels anchored near the right viewport
     // edge (e.g. a ColorPicker in the last table column) shift back into view
     // instead of clipping. Vertical placement is handled by computePlacement.
@@ -202,7 +247,13 @@ export function useFloatingPanel({
               },
               elements,
             }) {
-              const minWidth = width + 8;
+              // OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): anchored
+              // listboxes match the trigger width EXACTLY. Any oversize here
+              // both breaks the flush start-alignment (a wider panel near the
+              // viewport edge gets shift()ed off the trigger's x) and lets
+              // trigger decorations peek around the panel as ghosted edges.
+              // Content may still grow the panel wider (min-width only).
+              const minWidth = width;
               Object.assign(floatingStyleRef.current, { minWidth });
               elements.floating.style.minWidth = `${minWidth}px`;
             },
@@ -329,8 +380,8 @@ export function useFloatingPanel({
   return {
     context,
     refs,
-    x,
-    y,
+    x: roundToDevicePixel(x),
+    y: roundToDevicePixel(y),
     strategy,
     update,
     mounted,