@multiplatform.one/forms 7.10.0 → 7.15.0

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.

package/src/FloatingPanel/index.tsx

@@ -1,5 +1,12 @@
 import type { ReactNode, RefObject, UIEvent } from "react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import {
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
@@ -7,7 +14,7 @@ import {
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
 } from "@multiplatform.one/theme";
-import { isWeb, Sheet, useMedia, View, YStack } from "tamagui";
+import { isWeb, Sheet, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
@@ -16,6 +23,9 @@ import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFl
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
+import { PanelPortal } from "./PanelPortal";
+
+type PointerOpenEvent = PanelActionEvent & { button?: number; target?: unknown };
 
 export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
@@ -185,6 +195,33 @@ function useKeyboardFocusIntoPanel(
   }, [open, frameRef, keyboardOpenRef]);
 }
 
+/**
+ * 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
+ * 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 {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const cs = getComputedStyle(node);
+    if (cs.display === "contents") continue;
+    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
+    const captures =
+      set(cs.transform, "none") ||
+      set(cs.perspective, "none") ||
+      set(cs.filter, "none") ||
+      set(cs.backdropFilter, "none") ||
+      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;
+  }
+  return 0;
+}
+
 function panelTransformOrigin(placement: string): string {
   const rtl =
     isWeb &&
@@ -208,31 +245,30 @@ const overlayFloatBreakpoint = OVERLAY_BREAKPOINT;
  * re-render on resize). Name kept for API compatibility; "gtSm" reads as
  * "wide enough to float" (≥ OVERLAY_BREAKPOINT), not the dead v4 media key.
  */
+function subscribeViewport(listener: () => void) {
+  if (!isWeb || typeof window === "undefined") return () => {};
+  window.addEventListener("resize", listener);
+  return () => window.removeEventListener("resize", listener);
+}
+
+function viewportSnapshot() {
+  return isWeb && typeof window !== "undefined" && window.innerWidth > overlayFloatBreakpoint;
+}
+
+const serverViewportSnapshot = () => false;
+
 export function useViewportGtSm() {
-  const [wideEnoughToFloat, setWideEnoughToFloat] = useState(() =>
-    isWeb && typeof window !== "undefined" ? window.innerWidth > overlayFloatBreakpoint : false,
-  );
-  useEffect(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    const handler = () => setWideEnoughToFloat(window.innerWidth > overlayFloatBreakpoint);
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
-  }, []);
-  return wideEnoughToFloat;
+  return useSyncExternalStore(subscribeViewport, viewportSnapshot, serverViewportSnapshot);
 }
 
 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: sheet on native and below medium (viewport
-  // < 640). Floating from `$sm` up. Use viewport on client so we update on
-  // resize; `media.sm` (v5 minWidth 640 — `gtSm` died with the v5 media
-  // map, MPO-13 C4) for SSR when window is unavailable.
-  const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : media.sm === true;
-  const shouldUseSheet = props.sheet ?? (!isWeb || !effectiveGtSm);
+  // 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);
 
   if (shouldUseSheet) return <FloatingPanelSheet {...props} />;
   return <FloatingPanelWeb {...props} />;
@@ -240,6 +276,26 @@ export function FloatingPanel(props: FloatingPanelProps) {
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
 
+/**
+ * A closed tamagui Sheet keeps its children mounted and parks the frame
+ * below the viewport, so state inside survives a reopen. Parked, the frame
+ * must leave the accessibility tree and the Tab order (MPO-359).
+ */
+function useParkedFrameInert(open: boolean, frameRef: RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    if (!isWeb) return;
+    const frame = frameRef.current;
+    if (!frame || typeof frame.setAttribute !== "function") return;
+    if (open) {
+      frame.removeAttribute("inert");
+      frame.removeAttribute("aria-hidden");
+    } else {
+      frame.setAttribute("inert", "");
+      frame.setAttribute("aria-hidden", "true");
+    }
+  }, [open, frameRef]);
+}
+
 function FloatingPanelSheet({
   open,
   onOpenChange,
@@ -274,6 +330,7 @@ function FloatingPanelSheet({
   // DG-A11Y-04 / Axiom 7: Sheet has no focus scope — move focus into the
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
+  useParkedFrameInert(open, sheetFrameRef);
   useSheetModalFocus(open, sheetFrameRef, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open, sheetFrameRef);
 
@@ -472,13 +529,14 @@ 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 cached = overlayStyleRef.current;
-      if (!cached || cached.top !== top || cached.maxHeight !== height) {
-        dropdownElement.style.top = `${top}px`;
+      if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+        dropdownElement.style.top = `${cssTop}px`;
         dropdownElement.style.maxHeight = `${height}px`;
         dropdownElement.style.height = "";
-        overlayStyleRef.current = { top, maxHeight: height };
+        overlayStyleRef.current = { top: cssTop, maxHeight: height };
         void dropdownElement.offsetHeight;
       }
 
@@ -545,12 +603,13 @@ function FloatingPanelWeb({
       }
     }
 
+    const cssTop = top - fixedContainingBlockTop(dropdownElement);
     const cached = overlayStyleRef.current;
-    if (!cached || cached.top !== top || cached.maxHeight !== height) {
-      dropdownElement.style.top = `${top}px`;
+    if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+      dropdownElement.style.top = `${cssTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyleRef.current = { top, maxHeight: height };
+      overlayStyleRef.current = { top: cssTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
@@ -698,6 +757,24 @@ function FloatingPanelWeb({
     [disabled, onOpenChange],
   );
 
+  // useClick's mousedown opener calls preventDefault, so a pointer open never
+  // focuses the trigger the way a pressed button is focused. The render that
+  // opens the panel then captures whatever held focus before, often <body> or
+  // another trigger, and Escape returns there (LC-48). Focus the pressed
+  // control first so the capture is the trigger, as for a keyboard open.
+  const focusTriggerOnPointerOpen = (event: PointerOpenEvent) => {
+    if (open || disabled || isContextMenu || event.button !== 0 || !isWeb) return;
+    const reference = panel.triggerRef.current;
+    if (!reference) return;
+    const target = event.target instanceof Element ? event.target : null;
+    const pressed = target?.closest<HTMLElement>(PANEL_FOCUSABLE);
+    const focusable =
+      pressed && reference.contains(pressed)
+        ? pressed
+        : reference.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+    focusable?.focus({ preventScroll: true, focusVisible: false } as FocusOptions);
+  };
+
   const referenceProps = getReferenceProps({
     ref: panel.setReferenceRef,
     onClickCapture: openFromSynthesizedClick,
@@ -709,7 +786,9 @@ function FloatingPanelWeb({
     const handler = referenceProps[name];
     if (typeof handler === "function") {
       referenceProps[name] = (event: PanelActionEvent) => {
-        if (!isNestedPanelAction(event)) handler(event);
+        if (isNestedPanelAction(event)) return;
+        if (name === "onMouseDown") focusTriggerOnPointerOpen(event as PointerOpenEvent);
+        handler(event);
       };
     }
   }
@@ -732,67 +811,74 @@ function FloatingPanelWeb({
       </View>
 
       {panel.mounted && (
-        <YStack
-          {...getFloatingProps({
-            ref: panel.refs.setFloating,
-            style: {
-              ...elevatedSurfaceStyle,
-              position: panel.strategy,
-              top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-              left: panel.x ?? 0,
-              scrollbarWidth: "none" as any,
-              zIndex: zIndex.dropdown,
-              overflow: "auto",
-              ...panel.floatingStyleRef.current,
-              ...(overlayStyleRef.current ? { maxHeight: overlayStyleRef.current.maxHeight } : {}),
-              opacity: panel.visible ? 1 : 0,
-              transform: panel.visible ? "scale(1)" : "scale(0.96)",
-              transition: webTransition,
-              transformOrigin: panelTransformOrigin(panel.placement),
-            },
-            onScroll: handleScroll,
-            onTransitionEnd: (event) => {
-              if (
-                event.target === event.currentTarget &&
-                (event.propertyName === "height" || event.propertyName === "max-height")
-              ) {
-                panel.updateArrows(event.currentTarget);
-              }
-            },
-          })}
-          data-testid="floating-panel-viewport"
-          data-fp-panel=""
-          {...panelChromeFocus}
-          pointerEvents={panel.visible ? "auto" : "none"}
-          {...elevatedSurfaceProps}
-          // Complete elevatedSurface fragment above is the ONLY surface source
-          // (SF-OVERLAY "including border and elevation", Round 2 docket).
-          // The one layered exception is anatomy, not surface: the dropdown
-          // radius clamp (same shape as Card's containerRadius over
-          // elevatedSurface) keeps list rows unclipped at large radius knobs.
-          borderRadius={panel.dropdownRadius}
-          paddingVertical={0}
-        >
-          <ScrollArrow
-            direction="up"
-            scrollRef={panel.refs.floating}
-            visible={panel.arrowUp}
-            arrowScrollDirRef={panel.arrowScrollDirRef}
-          />
-          <View
-            ref={contentRef as any}
-            {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
-            {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+        <PanelPortal anchor={panel.triggerRef.current}>
+          <YStack
+            {...getFloatingProps({
+              ref: panel.refs.setFloating,
+              style: {
+                ...elevatedSurfaceStyle,
+                position: panel.strategy,
+                top: overlayStyleRef.current?.top ?? panel.y ?? 0,
+                left: panel.x ?? 0,
+                scrollbarWidth: "none" as any,
+                zIndex: zIndex.dropdown,
+                overflow: "auto",
+                ...panel.floatingStyleRef.current,
+                ...(overlayStyleRef.current
+                  ? { maxHeight: overlayStyleRef.current.maxHeight }
+                  : {}),
+                opacity: panel.visible ? 1 : 0,
+                // `none`, not scale(1): any transform makes this panel the
+                // containing block of a nested panel's `position: fixed`, which
+                // then positions against this box and is clipped by its scroll.
+                transform: panel.visible ? "none" : "scale(0.96)",
+                transition: webTransition,
+                transformOrigin: panelTransformOrigin(panel.placement),
+              },
+              onScroll: handleScroll,
+              onTransitionEnd: (event) => {
+                if (
+                  event.target === event.currentTarget &&
+                  (event.propertyName === "height" || event.propertyName === "max-height")
+                ) {
+                  panel.updateArrows(event.currentTarget);
+                }
+              },
+            })}
+            data-testid="floating-panel-viewport"
+            data-fp-panel=""
+            {...panelChromeFocus}
+            pointerEvents={panel.visible ? "auto" : "none"}
+            {...elevatedSurfaceProps}
+            // Complete elevatedSurface fragment above is the ONLY surface source
+            // (SF-OVERLAY "including border and elevation", Round 2 docket).
+            // The one layered exception is anatomy, not surface: the dropdown
+            // radius clamp (same shape as Card's containerRadius over
+            // elevatedSurface) keeps list rows unclipped at large radius knobs.
+            borderRadius={panel.dropdownRadius}
+            paddingVertical={0}
           >
-            {children}
-          </View>
-          <ScrollArrow
-            direction="down"
-            scrollRef={panel.refs.floating}
-            visible={panel.arrowDown}
-            arrowScrollDirRef={panel.arrowScrollDirRef}
-          />
-        </YStack>
+            <ScrollArrow
+              direction="up"
+              scrollRef={panel.refs.floating}
+              visible={panel.arrowUp}
+              arrowScrollDirRef={panel.arrowScrollDirRef}
+            />
+            <View
+              ref={contentRef as any}
+              {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
+              {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+            >
+              {children}
+            </View>
+            <ScrollArrow
+              direction="down"
+              scrollRef={panel.refs.floating}
+              visible={panel.arrowDown}
+              arrowScrollDirRef={panel.arrowScrollDirRef}
+            />
+          </YStack>
+        </PanelPortal>
       )}
     </>
   );