@multiplatform.one/forms 7.80.0 → 7.81.0

package/src/FloatingPanel/PanelHeader.tsx

@@ -1,22 +1,14 @@
 import { XStack, type XStackProps } from "tamagui";
-import { usePanelIconEchoBox } from "./echoContext";
 
-/**
- * A floating panel's header row (LC-112, FZ-8480 Round 37). Over an
- * icon-trigger panel whose X shares the header's row, it takes the X's
- * height and centres its content on the X's line, keeping clear of the X;
- * anywhere else it is the panel's padded top row.
- */
+/** A floating panel's title row: the panel's padded top row (LC-112). */
 export function PanelHeader({ children, ...rest }: XStackProps) {
-  const echo = usePanelIconEchoBox();
   return (
     <XStack
       alignItems="center"
       gap="$2"
-      paddingLeft={echo?.left || "$4"}
-      paddingRight={echo?.right || "$4"}
-      paddingTop={echo ? 0 : "$4"}
-      {...(echo ? { minHeight: echo.height } : undefined)}
+      paddingLeft="$4"
+      paddingRight="$4"
+      paddingTop="$4"
       data-fp-panel-header=""
       {...rest}
     >

package/src/FloatingPanel/coverRect.ts

@@ -5,8 +5,8 @@ import type { TriggerRect } from "./pointAnchor";
  * The 44pt box an icon trigger is pressed in, centred on the trigger
  * (LC-176). A trigger drawn smaller than its target (a 32pt avatar) is
  * covered at its target, so the panel's row-icon column, which centres on
- * a 44pt start inset, runs through the trigger's centre and the X drawn on
- * it (FZ-8480 GAP). A trigger at least that big is its own box.
+ * a 44pt start inset, runs through the trigger's centre (FZ-8480 GAP). A
+ * trigger at least that big is its own box.
  */
 export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): TriggerRect {
   const width = Math.max(trigger.width, min);
@@ -27,16 +27,3 @@ export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): T
 export function iconCoverRect(trigger: TriggerRect, group: TriggerRect | null): TriggerRect {
   return group ?? pressTargetRect(trigger);
 }
-
-/**
- * Where the trigger sits inside the surface its panel covers: the X box's
- * offset from the cover's top, and the band's height. Null when the cover is
- * the trigger itself.
- */
-export function echoInCover(
-  trigger: TriggerRect,
-  cover: TriggerRect,
-): { top: number; height: number } | null {
-  if (cover.y === trigger.y && cover.height === trigger.height) return null;
-  return { top: trigger.y - cover.y, height: cover.height };
-}

package/src/FloatingPanel/echoContext.ts

@@ -22,46 +22,12 @@ export function usePanelTriggerRadiusReporter(): ((radius: number) => void) | nu
 }
 
 /**
- * The X a panel lays over its content's header row (LC-112, FZ-8480 Round
- * 37): its height, and how far the header keeps clear of it on each side.
- * A panel header sits on the X's line and never runs under it.
+ * True inside a panel's sheet face (a phone's bottom sheet, web or native). A
+ * sheet isn't laid over its trigger, so LC-112's echo row has nothing to
+ * cover: a picker titles the sheet instead, per HIG (FZ-8557, Round 40).
  */
-export interface PanelIconEchoBox {
-  height: number;
-  left: number;
-  right: number;
-}
-
-export const PanelIconEchoBoxContext = createContext<PanelIconEchoBox | null>(null);
-
-export function usePanelIconEchoBox(): PanelIconEchoBox | null {
-  return useContext(PanelIconEchoBoxContext);
-}
-
-/**
- * The header's clearance around an X `offset` in from the panel's start edge:
- * the X's side keeps clear of it, the other side keeps none of its own.
- */
-export function echoHeaderBox({
-  offset,
-  width,
-  height,
-  panelWidth,
-  rtl = false,
-}: {
-  offset: number;
-  width: number;
-  height: number;
-  panelWidth: number;
-  rtl?: boolean;
-}): PanelIconEchoBox {
-  const atStart = offset + width / 2 < panelWidth / 2;
-  const start = atStart ? Math.max(0, offset + width) : 0;
-  const end = atStart ? 0 : Math.max(0, panelWidth - offset);
-  return { height, left: rtl ? end : start, right: rtl ? start : end };
-}
+export const PanelSheetContext = createContext(false);
 
-export function sameEchoBox(a: PanelIconEchoBox | null, b: PanelIconEchoBox | null): boolean {
-  if (a == null || b == null) return a === b;
-  return a.height === b.height && a.left === b.left && a.right === b.right;
+export function useInPanelSheet(): boolean {
+  return useContext(PanelSheetContext);
 }

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}