@multiplatform.one/forms 7.80.0 → 7.81.1

package/src/FloatingPanel/index.native.tsx

@@ -61,10 +61,25 @@
  * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
  * field the way the web float does (LC-105, LC-112), sized by `widthMode`;
  * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
+ *
+ * Pop-up (`popUp`, FZ-8655): a Select's menu face opens the way a macOS pop-up
+ * does, as the web's covering Select does. The rows are measured here, the
+ * caller reports the row that goes on the field, and `placeCheckedOnField`
+ * (shared with the web) places the panel. It's a touch list, so a panel keeps
+ * its box as it scrolls, as a UIMenu does, where a pointer's grows
+ * (`growOnScroll`).
  */
 
-import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import {
+  nativeAnimationConfig,
+  type MotionStop,
+  overlayScrim,
+  sheetGrabber,
+  sheetGrabberZone,
+} from "@multiplatform.one/theme";
 import {
+  type ComponentRef,
   isValidElement,
   type ReactNode,
   useCallback,
@@ -88,15 +103,22 @@ import {
   useWindowDimensions,
   View as RNView,
   type GestureResponderEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import {
   Surface,
-  SurfaceContext,
+  useGlyphColor,
   useResolvedKnobs,
   motionDurationMs,
 } from "@multiplatform.one/theme";
-import { View, YStack } from "tamagui";
+import { getTokenValue, View, YStack } from "tamagui";
+import {
+  placeCheckedOnField,
+  scrollArrowBand,
+  scrollArrowThreshold,
+} from "../shared/checkedOnField";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
@@ -105,12 +127,7 @@ import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
 import { MENU_MIN_WIDTH, resolveCompactFace } from "./compactFace";
 import { echoOffset, type PanelWidth, panelWidthBox, screenBounds } from "./panelWidth";
-import {
-  echoHeaderBox,
-  PanelEchoContext,
-  PanelIconEchoBoxContext,
-  PanelTriggerRadiusContext,
-} from "./echoContext";
+import { PanelEchoContext, PanelSheetContext, PanelTriggerRadiusContext } from "./echoContext";
 import {
   placeAtPoint,
   placeBesideTrigger,
@@ -122,8 +139,7 @@ import {
 import { RegularPanel } from "./RegularPanel";
 import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
-import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
-import { echoInCover, iconCoverRect } from "./coverRect";
+import { iconCoverRect } from "./coverRect";
 import {
   IconButtonGroupSurfaceContext,
   useIconButtonGroupSurface,
@@ -184,7 +200,8 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   coverAlign = "start",
-  iconEcho,
+  iconCover = false,
+  popUp,
   anchorMode,
   panelWidth = "content",
   sheet,
@@ -193,7 +210,6 @@ export function FloatingPanel({
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
-  const triggerSurface = SurfaceContext.useStyledContext();
   const windowZIndex = useOverlayZIndex("sheet");
   // A grouped trigger's capsule is its own: a panel's content never covers it.
   const children = (
@@ -254,7 +270,7 @@ export function FloatingPanel({
   const insideOverlay = useInsideOverlay();
   const asMenu = isContextMenu
     ? compactFace === "menu"
-    : resolveCompactFace(compactFace, insideOverlay) === "menu";
+    : resolveCompactFace(compactFace, insideOverlay) === "menu" || (popUp != null && regular);
   const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
@@ -289,7 +305,7 @@ export function FloatingPanel({
     } else {
       setAnchor({ x: 0, y: 0, width: 0, height: 0 });
     }
-    if (iconEcho && anchorMode !== "attach" && groupSurface) {
+    if (iconCover && anchorMode !== "attach" && groupSurface) {
       setGroup(undefined);
       groupSurface.measure((plate) => {
         if (live) setGroup(plate);
@@ -300,7 +316,7 @@ export function FloatingPanel({
     return () => {
       live = false;
     };
-  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
+  }, [anchored, open, iconCover, anchorMode, groupSurface]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -669,15 +685,11 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              echo={triggerEcho && !iconEcho ? (triggerRow ?? trigger) : null}
+              echo={triggerEcho && !iconCover && !popUp ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
-              iconEcho={
-                iconEcho && anchorMode !== "attach"
-                  ? iconEchoElement(trigger, iconEcho, close, triggerSurface)
-                  : null
-              }
-              iconEchoKind={iconEcho}
-              group={iconEcho && anchorMode !== "attach" ? (group ?? null) : null}
+              popUp={popUp}
+              iconCover={iconCover && anchorMode !== "attach"}
+              group={iconCover && anchorMode !== "attach" ? (group ?? null) : null}
               coverAlign={anchorMode === "attach" ? "start" : coverAlign}
               panelWidth={panelWidth}
               triggerRadius={anchorMode === "attach" ? null : triggerRadius}
@@ -749,7 +761,7 @@ export function FloatingPanel({
                 accessibilityRole="button"
                 accessibilityLabel={t("Close")}
               >
-                <View flex={1} backgroundColor="$shadow6" />
+                <View flex={1} backgroundColor={overlayScrim} />
               </Pressable>
               {/*
             Sheet sits above the absoluteFill backdrop in z-order (later sibling).
@@ -782,19 +794,23 @@ export function FloatingPanel({
                   {...knobProps.elevatedSurface}
                   borderBottomLeftRadius={0}
                   borderBottomRightRadius={0}
+                  // A sheet spans the screen: only its top edge meets the page,
+                  // so no side border gutters a full-width row (FZ-8557).
+                  borderLeftWidth={0}
+                  borderRightWidth={0}
+                  borderBottomWidth={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
+                The grab ZONE, not just the 5pt pill: a 5pt 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.
@@ -803,14 +819,10 @@ export function FloatingPanel({
                     {...panResponder.panHandlers}
                     accessibilityRole="adjustable"
                     accessibilityLabel={t("Drag to resize")}
-                    style={{
-                      alignSelf: "stretch",
-                      alignItems: "center",
-                      paddingTop: 4,
-                      paddingBottom: 12,
-                    }}
+                    testID="floating-panel-grabber"
+                    style={sheetGrabberZone}
                   >
-                    <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
+                    <View {...sheetGrabber} />
                   </RNView>
                   <YStack
                     padding={framePadding}
@@ -819,8 +831,10 @@ export function FloatingPanel({
                     {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
                   >
                     <Surface size="$true">
-                      {header}
-                      {content}
+                      <PanelSheetContext.Provider value>
+                        {header}
+                        {content}
+                      </PanelSheetContext.Provider>
                     </Surface>
                   </YStack>
                 </YStack>
@@ -835,9 +849,9 @@ export function FloatingPanel({
 
 /**
  * The menu over its trigger (LC-112): measured once per open at its natural
- * size, then placed on the trigger's window rect. The first row repeats the
- * trigger in the trigger's own box, and pressing it closes the menu, as the
- * web echo row does.
+ * size, then placed on the trigger's window rect. A field's first row repeats
+ * the trigger in the trigger's own box, and pressing it closes the menu, as
+ * the web echo row does. An icon trigger repeats nothing (Round 45).
  */
 function TriggerMenuPanel({
   anchor,
@@ -845,8 +859,8 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
-  iconEcho = null,
-  iconEchoKind = "menu",
+  popUp,
+  iconCover = false,
   group = null,
   coverAlign,
   panelWidth,
@@ -862,9 +876,10 @@ function TriggerMenuPanel({
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
-  /** LC-112 (FZ-8480): the icon trigger drawn again in its own spot. */
-  iconEcho?: ReactNode;
-  iconEchoKind?: IconEcho;
+  /** LC-112 (FZ-8655): the row that sits on the trigger, a macOS pop-up. */
+  popUp?: FloatingPanelProps["popUp"];
+  /** LC-112 (FZ-8665): an icon trigger, covered at the surface it is seen on. */
+  iconCover?: boolean;
   /** LC-112 (FZ-8550): the glass capsule a grouped trigger sits on. */
   group?: IconButtonGroupPlate | null;
   coverAlign: "start" | "auto";
@@ -877,12 +892,15 @@ function TriggerMenuPanel({
   children: ReactNode;
 }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
+  const glyphColor = useGlyphColor();
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+  const [scrolled, setScrolled] = useState<{ up: boolean; down: boolean } | null>(null);
+  const scrollRef = useRef<ComponentRef<typeof RNScrollView>>(null);
+  const offsetRef = useRef(0);
   // LC-112 (FZ-8480, FZ-8550): an icon trigger's panel covers the surface the
-  // trigger is seen on, its capsule or its press target, and the X keeps the
-  // trigger's own box inside it.
-  const cover = anchor && iconEcho != null ? iconCoverRect(anchor, group) : anchor;
-  const echoCover = anchor && cover && iconEcho != null ? echoInCover(anchor, cover) : null;
+  // trigger is seen on, its capsule or its press target.
+  const cover = anchor && iconCover ? iconCoverRect(anchor, group) : anchor;
   // LC-112 width setting (FZ-8438 r3). `"content"` keeps the iOS pull-down's
   // 250pt floor (FZ-8220), and no panel is narrower than an echoed trigger.
   const room =
@@ -904,8 +922,31 @@ function TriggerMenuPanel({
     echo: echo != null,
     floor: Math.max(MENU_MIN_WIDTH, cover?.width ?? 0),
   });
-  const placement =
-    anchor && cover && size
+  const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  const framePaddingToken = getTokenValue(
+    framePadding as Parameters<typeof getTokenValue>[0],
+    "space",
+  );
+  const framePaddingPx = typeof framePaddingToken === "number" ? framePaddingToken : 0;
+  // LC-112 (FZ-8655): the web's macOS pop-up, from the rows measured here.
+  const band = scrollArrowBand(knobProps.menuRow.minHeight);
+  const fit =
+    anchor && popUp?.row && contentHeight != null
+      ? placeCheckedOnField({
+          fieldTop: anchor.y,
+          fieldBottom: anchor.y + anchor.height,
+          rowTop: popUp.row.top + framePaddingPx,
+          rowHeight: popUp.row.height,
+          contentHeight,
+          boundsTop: bounds.top + borderWidth,
+          boundsBottom: bounds.bottom - borderWidth,
+          band,
+        })
+      : null;
+  const scrollTop = fit?.scrollTop ?? 0;
+  const scrolls = fit != null && contentHeight != null && fit.height < contentHeight;
+  const placed =
+    anchor && cover && size && (!popUp || fit)
       ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: cover,
           width: size.width,
@@ -913,23 +954,54 @@ function TriggerMenuPanel({
           bounds: room,
           rtl: I18nManager.isRTL,
           align: coverAlign,
-          pinned: iconEcho != null,
+          pinned: iconCover,
         })
       : null;
+  const placement =
+    placed && fit
+      ? { ...placed, top: fit.top - borderWidth, maxHeight: fit.height + 2 * borderWidth }
+      : placed;
+  useLayoutEffect(() => {
+    offsetRef.current = scrollTop;
+    if (scrollTop > 0) scrollRef.current?.scrollTo({ y: scrollTop, animated: false });
+  }, [scrollTop]);
+  const atRest = {
+    up: scrolls && scrollTop > scrollArrowThreshold,
+    down:
+      scrolls &&
+      fit != null &&
+      contentHeight != null &&
+      contentHeight - scrollTop - fit.height > scrollArrowThreshold,
+  };
+  const arrows = scrolled ?? atRest;
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (!scrolls) return;
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    offsetRef.current = contentOffset.y;
+    const up = contentOffset.y > scrollArrowThreshold;
+    const down =
+      contentSize.height - contentOffset.y - layoutMeasurement.height > scrollArrowThreshold;
+    setScrolled((prev) => (prev?.up === up && prev?.down === down ? prev : { up, down }));
+  };
+  // A band's tap turns the page, less a row, so nothing goes unseen.
+  const scrollPage = (direction: "up" | "down") => {
+    if (!fit) return;
+    const page = Math.max(band, fit.height - 2 * band - (popUp?.row?.height ?? 0));
+    const next = offsetRef.current + (direction === "up" ? -page : page);
+    scrollRef.current?.scrollTo({ y: Math.max(0, next), animated: true });
+  };
   // LC-112 seamless cover: the menu is its trigger grown open, so it draws the
   // trigger's corner arc at all four corners. A field reports its radius; an
   // icon button with no echo is a circle or capsule, half its short side.
   const half = cover ? Math.min(cover.width, cover.height) / 2 : undefined;
   const radius =
-    group != null && iconEcho != null
+    group != null && iconCover
       ? Math.min(group.radius, half ?? group.radius)
       : triggerRadius != null && half != null
         ? Math.min(triggerRadius, half)
         : coverAlign === "auto" && half
           ? half
           : undefined;
-  const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
-  const echoOverlays = iconEchoOverlays(iconEchoKind, placement?.up ?? false);
   // A panel slid along the screen (a `"screen"` or fixed width, or one pushed
   // back inside the margins) keeps its echo on the trigger.
   const echoShift =
@@ -943,7 +1015,11 @@ function TriggerMenuPanel({
         })
       : 0;
   return (
-    <RNView style={StyleSheet.absoluteFill}>
+    <RNView
+      style={StyleSheet.absoluteFill}
+      testID="floating-panel-menu-layer"
+      accessibilityViewIsModal
+    >
       <Pressable
         style={StyleSheet.absoluteFill}
         onPress={onBackdropPress}
@@ -1013,49 +1089,47 @@ function TriggerMenuPanel({
                 </RNView>
               </Pressable>
             ) : null}
-            {iconEcho != null && anchor && !placement?.up && !echoOverlays ? (
-              <IconEchoBand
-                anchor={anchor}
-                cover={echoCover}
-                shift={echoShift}
-                borderWidth={borderWidth}
-                edge="top"
-              >
-                {iconEcho}
-              </IconEchoBand>
-            ) : null}
             <RNScrollView
+              ref={scrollRef}
               style={{ flexGrow: 0, flexShrink: 1 }}
               keyboardShouldPersistTaps="handled"
-            >
-              <YStack padding={framePadding} gap={frameGap}>
-                <PanelIconEchoBoxContext.Provider
-                  value={
-                    iconEcho != null && anchor && placement && echoOverlays
-                      ? echoHeaderBox({
-                          offset: echoShift,
-                          width: anchor.width,
-                          height: echoCover?.height ?? anchor.height,
-                          panelWidth: placement.width,
-                          rtl: I18nManager.isRTL,
-                        })
-                      : null
+              {...(popUp
+                ? {
+                    contentOffset: { x: 0, y: scrollTop },
+                    scrollEnabled: scrolls,
+                    bounces: scrolls,
+                    onScroll: handleScroll,
+                    scrollEventThrottle: 16,
                   }
-                >
+                : null)}
+            >
+              <RNView
+                testID="floating-panel-menu-content"
+                collapsable={false}
+                onLayout={popUp ? (e) => setContentHeight(e.nativeEvent.layout.height) : undefined}
+              >
+                <YStack padding={framePadding} gap={frameGap}>
                   {children}
-                </PanelIconEchoBoxContext.Provider>
-              </YStack>
+                </YStack>
+              </RNView>
             </RNScrollView>
-            {iconEcho != null && anchor && (placement?.up || echoOverlays) ? (
-              <IconEchoBand
-                anchor={anchor}
-                cover={echoCover}
-                shift={echoShift}
-                borderWidth={borderWidth}
-                edge={echoOverlays ? "overlay" : "bottom"}
-              >
-                {iconEcho}
-              </IconEchoBand>
+            {scrolls ? (
+              <>
+                <ScrollBand
+                  direction="up"
+                  band={band}
+                  visible={arrows.up}
+                  glyphColor={glyphColor}
+                  onPress={scrollPage}
+                />
+                <ScrollBand
+                  direction="down"
+                  band={band}
+                  visible={arrows.down}
+                  glyphColor={glyphColor}
+                  onPress={scrollPage}
+                />
+              </>
             ) : null}
           </YStack>
         </YStack>
@@ -1065,63 +1139,50 @@ function TriggerMenuPanel({
 }
 
 /**
- * The band an icon trigger's echo rides (LC-112, FZ-8480): the trigger's
- * height on the edge the menu shares with it, outside the scroll view so the
- * rows scroll under it, and the button in the trigger's own box, pulled back
- * over the frame's border so it lands exactly where the trigger is.
+ * A pop-up's scroll arrow on native (LC-112, FZ-8655): the web's opaque band in
+ * the panel's own fill, half a menu row at a clipped edge, so a cut row hides
+ * under it. A tap on it stays off the row beneath and turns the page.
  */
-function IconEchoBand({
-  anchor,
-  cover = null,
-  shift,
-  borderWidth,
-  edge,
-  children,
+function ScrollBand({
+  direction,
+  band,
+  visible,
+  glyphColor,
+  onPress,
 }: {
-  anchor: TriggerRect;
-  /** The trigger's offset in, and the height of, a cover larger than it. */
-  cover?: { top: number; height: number } | null;
-  shift: number;
-  borderWidth: number;
-  /** `"overlay"`: an X laid over the content's top corner, taking no height. */
-  edge: "top" | "bottom" | "overlay";
-  children: ReactNode;
+  direction: "up" | "down";
+  band: number;
+  visible: boolean;
+  glyphColor: string;
+  onPress: (direction: "up" | "down") => void;
 }) {
-  const bandHeight = cover?.height ?? anchor.height;
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const Icon = direction === "up" ? CaretUpIcon : CaretDownIcon;
+  if (!visible) return null;
   return (
-    <RNView
-      testID="floating-panel-icon-echo-band"
-      pointerEvents="box-none"
-      style={
-        edge === "overlay"
-          ? {
-              position: "absolute",
-              top: -borderWidth,
-              start: -borderWidth,
-              end: -borderWidth,
-              height: bandHeight,
-              zIndex: 1,
-            }
-          : {
-              height: bandHeight,
-              marginHorizontal: -borderWidth,
-              ...(edge === "top" ? { marginTop: -borderWidth } : { marginBottom: -borderWidth }),
-            }
-      }
+    <Pressable
+      testID={`floating-panel-scroll-${direction}`}
+      onPress={() => onPress(direction)}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{
+        position: "absolute",
+        start: 0,
+        end: 0,
+        height: band,
+        zIndex: 1,
+        ...(direction === "up" ? { top: 0 } : { bottom: 0 }),
+      }}
     >
-      <RNView
-        style={{
-          width: anchor.width,
-          height: anchor.height,
-          marginStart: shift,
-          marginTop: cover?.top ?? 0,
-          alignItems: "flex-start",
-          justifyContent: "flex-start",
-        }}
+      <View
+        flex={1}
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor={knobProps.elevatedSurface.backgroundColor}
       >
-        {children}
-      </RNView>
-    </RNView>
+        <Icon size={knobProps.controlIcon.width} color={glyphColor} />
+      </View>
+    </Pressable>
   );
 }
 
@@ -1159,7 +1220,11 @@ function PointPanel({
       })
     : null;
   return (
-    <RNView style={StyleSheet.absoluteFill}>
+    <RNView
+      style={StyleSheet.absoluteFill}
+      testID="floating-panel-point-layer"
+      accessibilityViewIsModal
+    >
       <Pressable
         style={StyleSheet.absoluteFill}
         onPress={onBackdropPress}