@multiplatform.one/forms 7.79.0 → 7.81.0

package/src/FloatingPanel/index.native.tsx

@@ -63,7 +63,7 @@
  * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
  */
 
-import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
+import { nativeAnimationConfig, type MotionStop, overlayScrim } from "@multiplatform.one/theme";
 import {
   isValidElement,
   type ReactNode,
@@ -90,12 +90,7 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import {
-  Surface,
-  SurfaceContext,
-  useResolvedKnobs,
-  motionDurationMs,
-} from "@multiplatform.one/theme";
+import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
@@ -105,12 +100,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 +112,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 +173,7 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   coverAlign = "start",
-  iconEcho,
+  iconCover = false,
   anchorMode,
   panelWidth = "content",
   sheet,
@@ -193,7 +182,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 = (
@@ -289,7 +277,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 +288,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 +657,10 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              echo={triggerEcho && !iconEcho ? (triggerRow ?? trigger) : null}
+              echo={triggerEcho && !iconCover ? (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}
+              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 +732,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).
@@ -819,8 +802,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 +820,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 +830,7 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
-  iconEcho = null,
-  iconEchoKind = "menu",
+  iconCover = false,
   group = null,
   coverAlign,
   panelWidth,
@@ -862,9 +846,8 @@ 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-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";
@@ -879,10 +862,8 @@ function TriggerMenuPanel({
   const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   // 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 =
@@ -913,7 +894,7 @@ function TriggerMenuPanel({
           bounds: room,
           rtl: I18nManager.isRTL,
           align: coverAlign,
-          pinned: iconEcho != null,
+          pinned: iconCover,
         })
       : null;
   // LC-112 seamless cover: the menu is its trigger grown open, so it draws the
@@ -921,7 +902,7 @@ function TriggerMenuPanel({
   // 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)
@@ -929,7 +910,6 @@ function TriggerMenuPanel({
           ? 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 +923,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,50 +997,14 @@ 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
               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
-                  }
-                >
-                  {children}
-                </PanelIconEchoBoxContext.Provider>
+                {children}
               </YStack>
             </RNScrollView>
-            {iconEcho != null && anchor && (placement?.up || echoOverlays) ? (
-              <IconEchoBand
-                anchor={anchor}
-                cover={echoCover}
-                shift={echoShift}
-                borderWidth={borderWidth}
-                edge={echoOverlays ? "overlay" : "bottom"}
-              >
-                {iconEcho}
-              </IconEchoBand>
-            ) : null}
           </YStack>
         </YStack>
       </RNView>
@@ -1064,67 +1012,6 @@ 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.
- */
-function IconEchoBand({
-  anchor,
-  cover = null,
-  shift,
-  borderWidth,
-  edge,
-  children,
-}: {
-  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;
-}) {
-  const bandHeight = cover?.height ?? anchor.height;
-  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 }),
-            }
-      }
-    >
-      <RNView
-        style={{
-          width: anchor.width,
-          height: anchor.height,
-          marginStart: shift,
-          marginTop: cover?.top ?? 0,
-          alignItems: "flex-start",
-          justifyContent: "flex-start",
-        }}
-      >
-        {children}
-      </RNView>
-    </RNView>
-  );
-}
-
 /**
  * The menu at the long-press point: measured once per open at its natural
  * size, then placed by the same rule as the web pointer menu. Later layouts
@@ -1159,7 +1046,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}