@multiplatform.one/forms 7.71.0 → 7.72.0

package/src/FloatingPanel/echoContext.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react";
+
+/**
+ * LC-112 seamless cover (FZ-8438): true while a field is drawn as the echo row
+ * of the panel covering it. The field keeps its geometry and drops its own
+ * border, fill and shadow, so the panel's edge and surface are the only ones.
+ */
+export const PanelEchoContext = createContext(false);
+
+export function useInPanelEcho(): boolean {
+  return useContext(PanelEchoContext);
+}
+
+/**
+ * Native has no computed style to read, so a trigger's frame reports the
+ * radius it draws and a covering panel repeats it at all four corners.
+ */
+export const PanelTriggerRadiusContext = createContext<((radius: number) => void) | null>(null);
+
+export function usePanelTriggerRadiusReporter(): ((radius: number) => void) | null {
+  return useContext(PanelTriggerRadiusContext);
+}

package/src/FloatingPanel/index.native.tsx

@@ -98,7 +98,9 @@ import { t } from "../shared/t";
 import { overlaySizeClass } from "../shared/overlaySizeClass";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { menuMinWidth, resolveCompactFace } from "./compactFace";
+import { MENU_MIN_WIDTH, resolveCompactFace } from "./compactFace";
+import { echoOffset, type PanelWidth, panelWidthBox, screenBounds } from "./panelWidth";
+import { PanelEchoContext, PanelTriggerRadiusContext } from "./echoContext";
 import {
   placeAtPoint,
   placeBesideTrigger,
@@ -164,7 +166,9 @@ export function FloatingPanel({
   compactFace,
   triggerRow,
   triggerEcho = true,
+  coverAlign = "start",
   anchorMode,
+  panelWidth = "content",
   sheet,
   widthMode,
   fitContent,
@@ -233,6 +237,11 @@ export function FloatingPanel({
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
+  const [triggerRadius, setTriggerRadius] = useState<number | null>(null);
+  const reportTriggerRadius = useCallback(
+    (radius: number) => setTriggerRadius((prev) => (prev === radius ? prev : radius)),
+    [],
+  );
   // The trigger's window rect, read each time the menu opens: it may have
   // moved (a scrolled sheet) since the last open.
   useLayoutEffect(() => {
@@ -590,7 +599,9 @@ export function FloatingPanel({
             collapsable={false}
             style={{ width: triggerSizing === "content" ? undefined : "100%" }}
           >
-            <TriggerWithTrailingAction trigger={trigger} triggerEnd={triggerEnd} />
+            <PanelTriggerRadiusContext.Provider value={reportTriggerRadius}>
+              <TriggerWithTrailingAction trigger={trigger} triggerEnd={triggerEnd} />
+            </PanelTriggerRadiusContext.Provider>
           </RNView>
         </Pressable>
         <TrailingActionOverlay>{triggerEnd}</TrailingActionOverlay>
@@ -625,6 +636,9 @@ export function FloatingPanel({
               }}
               echo={triggerEcho ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
+              coverAlign={anchorMode === "attach" ? "start" : coverAlign}
+              panelWidth={panelWidth}
+              triggerRadius={anchorMode === "attach" ? null : triggerRadius}
               framePadding={framePadding}
               frameGap={frameGap}
               onBackdropPress={handleBackdropPress}
@@ -789,6 +803,9 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
+  coverAlign,
+  panelWidth,
+  triggerRadius,
   framePadding,
   frameGap,
   onBackdropPress,
@@ -800,6 +817,9 @@ function TriggerMenuPanel({
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
+  coverAlign: "start" | "auto";
+  panelWidth: PanelWidth;
+  triggerRadius: number | null;
   framePadding: string;
   frameGap: string | undefined;
   onBackdropPress: () => void;
@@ -808,16 +828,61 @@ function TriggerMenuPanel({
 }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  // 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 =
+    panelWidth === "screen" && anchor
+      ? {
+          ...bounds,
+          ...screenBounds({
+            triggerLeft: anchor.x,
+            triggerRight: anchor.x + anchor.width,
+            boundsLeft: bounds.left,
+            boundsRight: bounds.right,
+            rtl: I18nManager.isRTL,
+          }),
+        }
+      : bounds;
+  const widthBox = panelWidthBox(panelWidth, {
+    trigger: anchor?.width ?? 0,
+    available: room.right - room.left,
+    echo: echo != null,
+    floor: Math.max(MENU_MIN_WIDTH, anchor?.width ?? 0),
+  });
   const placement =
     anchor && size
       ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: anchor,
           width: size.width,
           height: size.height,
-          bounds,
+          bounds: room,
           rtl: I18nManager.isRTL,
+          align: coverAlign,
         })
       : null;
+  // 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 = anchor ? Math.min(anchor.width, anchor.height) / 2 : undefined;
+  const radius =
+    triggerRadius != null && half != null
+      ? Math.min(triggerRadius, half)
+      : coverAlign === "auto" && half
+        ? half
+        : undefined;
+  const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  // 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 =
+    anchor && placement
+      ? echoOffset({
+          triggerLeft: anchor.x,
+          triggerRight: anchor.x + anchor.width,
+          panelLeft: placement.left,
+          panelWidth: placement.width,
+          rtl: I18nManager.isRTL,
+        })
+      : 0;
   return (
     <RNView style={StyleSheet.absoluteFill}>
       <Pressable
@@ -837,25 +902,30 @@ function TriggerMenuPanel({
           position: "absolute",
           left: placement?.left ?? bounds.left,
           top: placement?.top ?? bounds.top,
-          minWidth: menuMinWidth(anchor?.width ?? 0, bounds.right - bounds.left),
-          maxWidth: bounds.right - bounds.left,
+          ...widthBox,
           maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
           opacity: placement ? 1 : 0,
         }}
       >
+        {/* FZ-8414: the shadow rides this unclipped frame; iOS drops the
+            shadow of a layer that also clips, and in dark the menu melted
+            into the page. The clip lives on the inner stack. */}
         <YStack
           testID="floating-panel-menu-surface"
           {...knobProps.elevatedSurface}
+          {...(radius != null ? { borderRadius: radius } : undefined)}
           flexShrink={1}
           minHeight={0}
           onAccessibilityEscape={onClose}
         >
           <YStack
             testID="floating-panel-menu-clip"
-            borderRadius={knobProps.elevatedSurface.borderRadius}
-            overflow="hidden"
             flexShrink={1}
             minHeight={0}
+            overflow="hidden"
+            {...(radius != null
+              ? { borderRadius: Math.max(0, radius - borderWidth) }
+              : { borderRadius: knobProps.elevatedSurface.borderRadius })}
           >
             {echo != null && anchor && anchor.height > 0 ? (
               <Pressable
@@ -864,9 +934,24 @@ function TriggerMenuPanel({
                 accessibilityRole="button"
                 {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
                 aria-expanded
-                style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+                // The frame's border is inside the anchor box: pull the echo
+                // back over it so its content lands where the trigger's did.
+                // Exactly the trigger's box at the start edge: a menu wider than
+                // its trigger (the 250pt pull-down floor) must not stretch the
+                // echo and re-centre a pill's label (FZ-8438).
+                style={{
+                  height: anchor.height,
+                  width: anchor.width,
+                  alignSelf: "flex-start",
+                  margin: -borderWidth,
+                  marginStart: echoShift - borderWidth,
+                  marginBottom: 0,
+                  justifyContent: "center",
+                }}
               >
-                <RNView pointerEvents="none">{echo}</RNView>
+                <RNView pointerEvents="none">
+                  <PanelEchoContext.Provider value>{echo}</PanelEchoContext.Provider>
+                </RNView>
               </Pressable>
             ) : null}
             <RNScrollView
@@ -957,3 +1042,15 @@ function PointPanel({
     </RNView>
   );
 }
+
+/** Web only: native echoes the trigger inside its own menu face. */
+export function TriggerEchoRow(_props: { [key: string]: unknown }): null {
+  return null;
+}
+
+/** Web only: native draws its echo in place, so there is nothing to move. */
+export function placeEchoOverTrigger(
+  _panelElement: unknown,
+  _geometry: unknown,
+  _options?: { stretch?: boolean },
+): void {}