@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/FloatingPanel/iconEcho.tsx

@@ -0,0 +1,118 @@
+import { XIcon } from "@phosphor-icons/react";
+import { cloneElement, isValidElement, useState, type ReactElement, type ReactNode } from "react";
+import { SurfaceContext, type SurfaceIntent } from "@multiplatform.one/theme";
+import { useTheme, View } from "tamagui";
+import { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
+import { t } from "../shared/t";
+
+/**
+ * How a panel covering an icon-only trigger shows the pressed button (LC-112,
+ * FZ-8480 Round 37): in its exact spot, turned into an X that closes the
+ * panel, the way iOS morphs a + into an X. `"close"` lays the X over the
+ * content's header row (a panel's title shares the X's line); `"menu"` gives
+ * the X its own band above the rows, which run the panel's full width.
+ */
+export type IconEcho = "close" | "menu";
+
+export const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
+
+const DROPPED_PROPS = [
+  "id",
+  "onLongPress",
+  "onKeyDown",
+  "onContextMenu",
+  "aria-haspopup",
+  "aria-expanded",
+  "aria-controls",
+  "aria-describedby",
+  "tooltip",
+] as const;
+
+/**
+ * An X sits in the panel's corner over the content's header row, the way a
+ * sheet's close button shares the row with its title; a menu's X takes its
+ * own band above the rows. A panel that opened upward always gives the echo
+ * its own band.
+ */
+export function iconEchoOverlays(kind: IconEcho, up: boolean): boolean {
+  return kind === "close" && !up;
+}
+
+/**
+ * The pressed trigger drawn again over its panel as an X: the same element
+ * with the same size and plate and an X for its glyph, a fresh render that
+ * shares none of the consumer's refs. It renders on the trigger's own
+ * surface, so a bar button keeps its bar treatment (on iOS its own Liquid
+ * Glass circle) inside the panel. Pressing it closes the panel, and it reads
+ * "Close". A button (anything with an `icon`) is the control itself; any
+ * other trigger (an avatar) becomes an X in a circle of its size.
+ */
+export function iconEchoElement(
+  trigger: ReactNode,
+  kind: IconEcho,
+  onClose: () => void,
+  surface?: SurfaceIntent,
+): ReactNode {
+  const echo = echoOf(trigger, kind, onClose);
+  if (echo == null || !surface) return echo;
+  return <SurfaceContext.Provider {...surface}>{echo}</SurfaceContext.Provider>;
+}
+
+function echoOf(trigger: ReactNode, _kind: IconEcho, onClose: () => void): ReactNode {
+  if (!isValidElement(trigger)) return null;
+  const props = trigger.props as { icon?: unknown };
+  const label = t("Close");
+  const dropped = Object.fromEntries(DROPPED_PROPS.map((name) => [name, undefined]));
+  if (props.icon != null) {
+    return cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+      ...dropped,
+      ref: null,
+      icon: XIcon,
+      "aria-label": label,
+      onPress: onClose,
+      testID: ICON_ECHO_TEST_ID,
+      "data-testid": ICON_ECHO_TEST_ID,
+    });
+  }
+  return <CircleClose label={label} onClose={onClose} />;
+}
+
+/** The plate an avatar draws by default, so its X keeps the avatar's circle. */
+const avatarPlate = "$selectedBackground";
+
+/** The X's glyph before the circle has measured itself. */
+const circleGlyphFallbackPx = 18;
+
+/** An X in a circle the size of the trigger it replaces (an avatar). */
+function CircleClose({ label, onClose }: { label: string; onClose: () => void }) {
+  const theme = useTheme();
+  const [side, setSide] = useState(0);
+  return (
+    <View
+      role="button"
+      aria-label={label}
+      tabIndex={0}
+      cursor="pointer"
+      width="100%"
+      height="100%"
+      borderRadius={100000}
+      backgroundColor={avatarPlate}
+      alignItems="center"
+      justifyContent="center"
+      pressStyle={{ opacity: 0.6 }}
+      onPress={onClose}
+      onLayout={(event) =>
+        setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height))
+      }
+      testID={ICON_ECHO_TEST_ID}
+      data-testid={ICON_ECHO_TEST_ID}
+    >
+      <XIcon
+        size={side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx}
+        weight="bold"
+        color={theme.selectedColor?.val ?? theme.color?.val}
+        aria-hidden
+      />
+    </View>
+  );
+}

package/src/FloatingPanel/index.native.tsx

@@ -90,7 +90,12 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
+import {
+  Surface,
+  SurfaceContext,
+  useResolvedKnobs,
+  motionDurationMs,
+} from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
@@ -98,7 +103,14 @@ 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 {
+  echoHeaderBox,
+  PanelEchoContext,
+  PanelIconEchoBoxContext,
+  PanelTriggerRadiusContext,
+} from "./echoContext";
 import {
   placeAtPoint,
   placeBesideTrigger,
@@ -110,6 +122,7 @@ import {
 import { RegularPanel } from "./RegularPanel";
 import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
+import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
 // resolve identically on native (their floating cores are unused on device
@@ -164,13 +177,17 @@ export function FloatingPanel({
   compactFace,
   triggerRow,
   triggerEcho = true,
+  coverAlign = "start",
+  iconEcho,
   anchorMode,
+  panelWidth = "content",
   sheet,
   widthMode,
   fitContent,
 }: 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");
   const children = (
     <Surface painted={false} elevated>
@@ -233,6 +250,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 +612,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>
@@ -623,8 +647,17 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echo={triggerEcho && !iconEcho ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
+              iconEcho={
+                iconEcho && anchorMode !== "attach"
+                  ? iconEchoElement(trigger, iconEcho, close, triggerSurface)
+                  : null
+              }
+              iconEchoKind={iconEcho}
+              coverAlign={anchorMode === "attach" ? "start" : coverAlign}
+              panelWidth={panelWidth}
+              triggerRadius={anchorMode === "attach" ? null : triggerRadius}
               framePadding={framePadding}
               frameGap={frameGap}
               onBackdropPress={handleBackdropPress}
@@ -789,6 +822,11 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
+  iconEcho = null,
+  iconEchoKind = "menu",
+  coverAlign,
+  panelWidth,
+  triggerRadius,
   framePadding,
   frameGap,
   onBackdropPress,
@@ -800,6 +838,12 @@ 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;
+  coverAlign: "start" | "auto";
+  panelWidth: PanelWidth;
+  triggerRadius: number | null;
   framePadding: string;
   frameGap: string | undefined;
   onBackdropPress: () => void;
@@ -808,16 +852,63 @@ 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,
+          pinned: iconEcho != null,
         })
       : 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;
+  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 =
+    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 +928,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,19 +960,63 @@ 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}
+            {iconEcho != null && anchor && !placement?.up && !echoOverlays ? (
+              <IconEchoBand anchor={anchor} shift={echoShift} borderWidth={borderWidth} edge="top">
+                {iconEcho}
+              </IconEchoBand>
+            ) : null}
             <RNScrollView
               style={{ flexGrow: 0, flexShrink: 1 }}
               keyboardShouldPersistTaps="handled"
             >
               <YStack padding={framePadding} gap={frameGap}>
-                {children}
+                <PanelIconEchoBoxContext.Provider
+                  value={
+                    iconEcho != null && anchor && placement && echoOverlays
+                      ? echoHeaderBox({
+                          offset: echoShift,
+                          width: anchor.width,
+                          height: anchor.height,
+                          panelWidth: placement.width,
+                          rtl: I18nManager.isRTL,
+                        })
+                      : null
+                  }
+                >
+                  {children}
+                </PanelIconEchoBoxContext.Provider>
               </YStack>
             </RNScrollView>
+            {iconEcho != null && anchor && (placement?.up || echoOverlays) ? (
+              <IconEchoBand
+                anchor={anchor}
+                shift={echoShift}
+                borderWidth={borderWidth}
+                edge={echoOverlays ? "overlay" : "bottom"}
+              >
+                {iconEcho}
+              </IconEchoBand>
+            ) : null}
           </YStack>
         </YStack>
       </RNView>
@@ -884,6 +1024,62 @@ 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,
+  shift,
+  borderWidth,
+  edge,
+  children,
+}: {
+  anchor: TriggerRect;
+  shift: number;
+  borderWidth: number;
+  /** `"overlay"`: an X laid over the content's top corner, taking no height. */
+  edge: "top" | "bottom" | "overlay";
+  children: ReactNode;
+}) {
+  return (
+    <RNView
+      testID="floating-panel-icon-echo-band"
+      pointerEvents="box-none"
+      style={
+        edge === "overlay"
+          ? {
+              position: "absolute",
+              top: -borderWidth,
+              start: -borderWidth,
+              end: -borderWidth,
+              height: anchor.height,
+              zIndex: 1,
+            }
+          : {
+              height: anchor.height,
+              marginHorizontal: -borderWidth,
+              ...(edge === "top" ? { marginTop: -borderWidth } : { marginBottom: -borderWidth }),
+            }
+      }
+    >
+      <RNView
+        style={{
+          width: anchor.width,
+          height: anchor.height,
+          marginStart: shift,
+          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
@@ -957,3 +1153,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 {}