@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/FloatingPanel/PanelPortal.tsx

@@ -0,0 +1,149 @@
+import type { CSSProperties, FocusEvent, ReactNode } from "react";
+import { useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { TamaguiRoot, useThemeName } from "@tamagui/web";
+import { panelPortalAttribute, registerPanelPortal } from "../shared/panelPortal";
+
+export interface PanelPortalProps {
+  /** The element the panel opened from: the trigger it attaches to. */
+  anchor: HTMLElement | null;
+  children: ReactNode;
+}
+
+const layerRootSelector = '[role="dialog"], [aria-modal="true"]';
+
+const tabbableSelector =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const focusGuardAttribute = "data-fp-focus-guard";
+
+const focusGuardStyle: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  border: 0,
+};
+
+/**
+ * Where a web panel mounts: the nearest modal layer around its trigger, else
+ * the body. Staying inside a dialog keeps that dialog's focus trap and
+ * outside-press test treating the panel as its own content; every scroll
+ * view between the trigger and that layer is escaped either way.
+ */
+export function panelPortalHost(anchor: Element | null): HTMLElement | null {
+  if (typeof document === "undefined") return null;
+  return anchor?.closest<HTMLElement>(layerRootSelector) ?? document.body;
+}
+
+function isTabbable(element: HTMLElement): boolean {
+  if (element.hasAttribute(focusGuardAttribute) || element.tabIndex < 0) return false;
+  if (element.closest("[inert]")) return false;
+  return element.getClientRects().length > 0;
+}
+
+function tabbablesIn(root: Element | null): HTMLElement[] {
+  if (!root) return [];
+  return Array.from(root.querySelectorAll<HTMLElement>(tabbableSelector)).filter(isTabbable);
+}
+
+/** Tab order resumes beside the trigger, not at the end of the portal host. */
+function focusBesideAnchor(anchor: HTMLElement | null, side: "before" | "after") {
+  if (!anchor) return;
+  const inAnchor = tabbablesIn(anchor);
+  if (side === "before" && isTabbable(anchor)) inAnchor.unshift(anchor);
+  const own = side === "before" ? inAnchor[inAnchor.length - 1] : undefined;
+  if (own) {
+    own.focus();
+    return;
+  }
+  const edge =
+    side === "before" ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+  const page = tabbablesIn(document.body).filter((element) => {
+    if (anchor.contains(element) || !(anchor.compareDocumentPosition(element) & edge)) {
+      return false;
+    }
+    const portal = element.closest(`[${panelPortalAttribute}]`);
+    return !portal || portal.contains(anchor);
+  });
+  (side === "before" ? page[page.length - 1] : page[0])?.focus();
+}
+
+/**
+ * Web: renders a floating panel outside every scroll view between its trigger
+ * and the page (MPO-335, LC-90). react-native-web's ScrollView sets
+ * `transform: translateZ(0)`, which makes it the containing block of a
+ * `position: fixed` descendant, so a panel left in place is clipped by the
+ * scroller. The portal carries the trigger's theme across (knobs are React
+ * context and follow on their own). Hidden focus guards keep the panel in Tab
+ * order right after the trigger, where it sat before it moved.
+ */
+export function PanelPortal({ anchor, children }: PanelPortalProps) {
+  const themeName = useThemeName();
+  const portalRef = useRef<HTMLSpanElement | null>(null);
+  const host = panelPortalHost(anchor);
+  const direction = anchor?.closest("[dir]")?.getAttribute("dir") ?? undefined;
+
+  useLayoutEffect(() => {
+    const portal = portalRef.current;
+    if (!portal || !anchor) return;
+    return registerPanelPortal(portal, anchor);
+  }, [anchor, host]);
+
+  if (!host) return null;
+  // Stands where the panel used to be in tab order: right after the trigger.
+  const enterPanel = (event: FocusEvent<HTMLSpanElement>) => {
+    const guard = event.currentTarget;
+    const from = event.relatedTarget;
+    const forward =
+      !(from instanceof Node) ||
+      Boolean(guard.compareDocumentPosition(from) & Node.DOCUMENT_POSITION_PRECEDING);
+    const inside = tabbablesIn(portalRef.current);
+    const target = forward ? inside[0] : inside[inside.length - 1];
+    if (target) target.focus();
+    else focusBesideAnchor(anchor, forward ? "after" : "before");
+  };
+  const portal = createPortal(
+    <span
+      ref={portalRef}
+      {...{ [panelPortalAttribute]: "" }}
+      dir={direction}
+      style={{ display: "contents" }}
+    >
+      <span
+        {...{ [focusGuardAttribute]: "" }}
+        aria-hidden
+        tabIndex={0}
+        style={focusGuardStyle}
+        onFocus={() => focusBesideAnchor(anchor, "before")}
+      />
+      <TamaguiRoot theme={themeName}>{children}</TamaguiRoot>
+      <span
+        {...{ [focusGuardAttribute]: "" }}
+        aria-hidden
+        tabIndex={0}
+        style={focusGuardStyle}
+        onFocus={() => focusBesideAnchor(anchor, "after")}
+      />
+    </span>,
+    host,
+  );
+  return (
+    <>
+      <span
+        {...{ [focusGuardAttribute]: "" }}
+        aria-hidden
+        tabIndex={0}
+        style={focusGuardStyle}
+        onFocus={enterPanel}
+      />
+      {portal}
+    </>
+  );
+}

package/src/FloatingPanel/index.native.tsx

@@ -45,7 +45,15 @@
  *   backdrop dismiss is armed a short delay after the present begins.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Animated,
   Easing,
@@ -58,6 +66,7 @@ import {
   useWindowDimensions,
   View as RNView,
 } from "react-native";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { t } from "../shared/t";
@@ -84,8 +93,7 @@ export function useViewportGtSm() {
 }
 
 const sheetMaxHeightRatio = 0.85;
-// Home-indicator / gesture-bar clearance (no react-native-safe-area-context
-// dependency in this package).
+// Home-indicator / gesture-bar clearance.
 const bottomInset = Platform.OS === "ios" ? 24 : 16;
 // Backdrop left visible above the sheet: the scrim has to stay tappable, and a
 // sheet flush with the status bar reads as a page, not a sheet.
@@ -122,6 +130,7 @@ export function FloatingPanel({
   const { 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 [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const close = useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -142,18 +151,18 @@ export function FloatingPanel({
   /*
    * MPO-64. Two numbers, both of which have to know about the keyboard:
    *
-   *   - the sheet may never be taller than the space ABOVE the keyboard, less
-   *     a strip of backdrop so it still reads as a sheet and the scrim stays
-   *     tappable. Without this the frame extends under the keyboard, the last
-   *     row is clipped mid-glyph, and the rounded top edge is drawn over the
-   *     autocomplete suggestion strip.
+   *   - the sheet may never be taller than the space between the status bar
+   *     and the keyboard, less a strip of backdrop so it still reads as a sheet
+   *     and the scrim stays tappable. Without this the frame extends under the
+   *     keyboard, the last row is clipped mid-glyph, and the rounded top edge
+   *     is drawn over the autocomplete suggestion strip.
    *   - the bottom padding is home-indicator clearance. The keyboard already
    *     covers the home indicator, so keeping 24pt there just wastes a row.
    */
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
     minSheetHeight,
-    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - backdropStrip)),
+    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - topInset - backdropStrip)),
   );
   const sheetBottomPadding = keyboardInset > 0 ? 8 : bottomInset;
 
@@ -202,8 +211,59 @@ export function FloatingPanel({
   const presentationRef = useRef(0);
   const activeRef = useRef(false);
 
+  /*
+   * MPO-68: a sheet at rest below full height is LAID OUT at that height.
+   * Translating a full-height frame down pushed its last rows off the screen,
+   * or under the keyboard, while the list still measured the full height, so
+   * they could never be scrolled into view.
+   *
+   * `frameCap` rides the same Animated.View as `translateY`, so the swap
+   * between "full height, translated" and "detent height, at 0" lands in one
+   * commit and the top edge does not move. `restHeightRef` is null at full
+   * height; a gesture always runs uncapped, in `travel` coordinates.
+   */
+  const frameCap = useRef(new Animated.Value(maxHeight)).current;
+  const maxHeightRef = useRef(maxHeight);
+  const restHeightRef = useRef<number | null>(null);
+  // The last uncapped layout, and whether it filled the max height. A capped
+  // frame measures only its cap, so when the keyboard moves the max height
+  // under a resting sheet, its full height is re-derived from these.
+  const naturalRef = useRef(0);
+  const filledRef = useRef(false);
+
+  useLayoutEffect(() => {
+    maxHeightRef.current = maxHeight;
+    const rest = restHeightRef.current;
+    frameCap.setValue(rest === null ? maxHeight : Math.min(maxHeight, rest));
+    if (rest !== null && naturalRef.current > 0) {
+      setMeasuredHeight(filledRef.current ? maxHeight : Math.min(naturalRef.current, maxHeight));
+    }
+  }, [frameCap, maxHeight]);
+
+  const restAt = useCallback(
+    (height: number) => {
+      restHeightRef.current = height;
+      frameCap.setValue(Math.min(maxHeightRef.current, height));
+      restRef.current = 0;
+      translateY.setValue(0);
+    },
+    [frameCap, translateY],
+  );
+
+  const releaseRest = useCallback(() => {
+    const rest = restHeightRef.current;
+    if (rest === null) return;
+    restHeightRef.current = null;
+    const offset = Math.max(0, travelRef.current - Math.min(maxHeightRef.current, rest));
+    frameCap.setValue(maxHeightRef.current);
+    restRef.current = offset;
+    translateY.setValue(offset);
+  }, [frameCap, translateY]);
+
   const settleTo = useCallback(
-    (toValue: number, velocity = 0) => {
+    (height: number, velocity = 0) => {
+      const presentation = presentationRef.current;
+      const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
       Animated.spring(translateY, {
         toValue,
@@ -215,9 +275,12 @@ export function FloatingPanel({
         // JS driver: see the header. A native-driven node inside this Modal
         // does not advance, and the drag already writes the value from JS.
         useNativeDriver: false,
-      }).start();
+      }).start(({ finished }) => {
+        if (!finished || toValue === 0) return;
+        if (activeRef.current && presentation === presentationRef.current) restAt(height);
+      });
     },
-    [translateY],
+    [restAt, translateY],
   );
 
   const dismiss = useCallback(
@@ -245,10 +308,15 @@ export function FloatingPanel({
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dy) > 2,
+        // Lifting a rest cap can scroll the list inside, and a scroll lets
+        // any ancestor ScrollView the finger started under claim the touch,
+        // ending the drag and blurring a focused input on release.
+        onPanResponderTerminationRequest: () => false,
         onPanResponderGrant: () => {
           translateY.stopAnimation((value) => {
             if (typeof value === "number" && Number.isFinite(value)) restRef.current = value;
           });
+          releaseRest();
         },
         onPanResponderMove: (_evt, g) => {
           const next = restRef.current + g.dy;
@@ -277,11 +345,11 @@ export function FloatingPanel({
               best = height;
             }
           }
-          settleTo(t - best, g.vy);
+          settleTo(best, g.vy);
         },
-        onPanResponderTerminate: () => settleTo(restRef.current),
+        onPanResponderTerminate: () => settleTo(travelRef.current - restRef.current),
       }),
-    [dismiss, settleTo, translateY],
+    [dismiss, releaseRest, settleTo, translateY],
   );
 
   // One entrance per present, whichever trigger gets here first: the effect
@@ -321,6 +389,8 @@ export function FloatingPanel({
   useEffect(() => {
     presentationRef.current += 1;
     activeRef.current = open;
+    restHeightRef.current = null;
+    frameCap.setValue(maxHeightRef.current);
     if (open) {
       enter();
     } else {
@@ -340,7 +410,7 @@ export function FloatingPanel({
       }
       translateY.stopAnimation();
     };
-  }, [open, enter, translateY]);
+  }, [open, enter, frameCap, translateY]);
 
   const content = scrollable ? (
     <RNScrollView
@@ -430,19 +500,24 @@ export function FloatingPanel({
             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 && h !== measuredHeight) setMeasuredHeight(h);
+              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,
+              maxHeight: frameCap,
               transform: [{ translateY }],
             }}
           >
@@ -451,9 +526,11 @@ export function FloatingPanel({
               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, flexShrink: 1 } : undefined)}
+              {...(sheetFill ? { height: maxHeight } : undefined)}
               paddingTop="$2"
               paddingBottom={sheetBottomPadding}
               // VoiceOver escape gesture (two-finger Z) dismisses the sheet.