@multiplatform.one/forms 7.72.0 → 7.73.0

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -4,7 +4,8 @@
  * so only inside another overlay, so a sheet never stacks on a sheet.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act } from "@testing-library/react";
+import { act, render } from "@testing-library/react";
+import { PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
@@ -454,3 +455,88 @@ describe("FloatingPanel native menu face panelWidth (LC-112, FZ-8438 r3)", () =>
     expect(open(900).style.width).toBe(`${room}px`);
   });
 });
+
+function EchoMenu({ kind }: { kind: "close" | "menu" }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      iconEcho={kind}
+      coverAlign="auto"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Button icon={PlusIcon} aria-label="Add node" />}
+      triggerA11y={{ label: "Add node" }}
+    >
+      <Text>Add a node</Text>
+    </FloatingPanel>
+  );
+}
+
+const iconEcho = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
+const iconBand = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo-band"]');
+const glyphPath = (node: Element | null) => node?.querySelector("svg path")?.getAttribute("d");
+
+describe("LC-112 icon trigger echo on native (FZ-8480, rv_2607879d3bdaf9bf)", () => {
+  it("draws the + again as an X in the button's own box, at the menu's top trailing corner", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<EchoMenu kind="close" />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+    expect(panel.style.left).toBe(`${trigger.x + trigger.width - MENU_MIN_WIDTH}px`);
+    const band = iconBand() as HTMLElement;
+    expect(band.style.height).toBe("44px");
+    const box = band.firstElementChild as HTMLElement;
+    expect(box.style.width).toBe("44px");
+    expect(box.style.height).toBe("44px");
+    // The box sits where the trigger is: its start offset is the trigger's x
+    // less the menu's left edge.
+    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(
+      `${trigger.x - (trigger.x + trigger.width - MENU_MIN_WIDTH)}px`,
+    );
+    const echoButton = iconEcho() as HTMLElement;
+    expect(echoButton.getAttribute("aria-label")).toBe("Close");
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(echoButton)).toBe(glyphPath(x.container));
+    x.unmount();
+    expect(echo()).toBeNull();
+  });
+
+  it("closes the menu when the echo is pressed", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<EchoMenu kind="close" />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    layout(menu() as HTMLElement, MENU_MIN_WIDTH, 180);
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(iconEcho() as HTMLElement);
+    expect(menu()).toBeNull();
+  });
+
+  it("turns a menu trigger into an X too, and opens up from the button's bottom edge near the bottom", () => {
+    trigger = { x: 20, y: 760, width: 44, height: 44 };
+    const result = renderWithProviders(<EchoMenu kind="menu" />);
+    const live = result.getAllByRole("button", { name: "Add node" })[0]!;
+    tap(live);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 300);
+    expect(parseFloat(panel.style.top) + 300).toBe(trigger.y + trigger.height);
+    const surface = frame() as HTMLElement;
+    const band = iconBand() as HTMLElement;
+    const clip = surface.querySelector('[data-testid="floating-panel-menu-clip"]') as HTMLElement;
+    expect(clip.lastElementChild).toBe(band);
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(iconEcho())).toBe(glyphPath(x.container));
+    x.unmount();
+    expect(glyphPath(iconEcho())).not.toBe(glyphPath(live));
+  });
+});

package/src/FloatingPanel/PanelHeader.tsx

@@ -0,0 +1,26 @@
+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.
+ */
+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)}
+      data-fp-panel-header=""
+      {...rest}
+    >
+      {children}
+    </XStack>
+  );
+}

package/src/FloatingPanel/echoContext.ts

@@ -20,3 +20,48 @@ export const PanelTriggerRadiusContext = createContext<((radius: number) => void
 export function usePanelTriggerRadiusReporter(): ((radius: number) => void) | null {
   return useContext(PanelTriggerRadiusContext);
 }
+
+/**
+ * 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.
+ */
+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 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;
+}

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";
@@ -100,7 +105,12 @@ 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 { PanelEchoContext, PanelTriggerRadiusContext } from "./echoContext";
+import {
+  echoHeaderBox,
+  PanelEchoContext,
+  PanelIconEchoBoxContext,
+  PanelTriggerRadiusContext,
+} from "./echoContext";
 import {
   placeAtPoint,
   placeBesideTrigger,
@@ -112,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
@@ -167,6 +178,7 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   coverAlign = "start",
+  iconEcho,
   anchorMode,
   panelWidth = "content",
   sheet,
@@ -175,6 +187,7 @@ 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");
   const children = (
     <Surface painted={false} elevated>
@@ -634,8 +647,14 @@ 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}
@@ -803,6 +822,8 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
+  iconEcho = null,
+  iconEchoKind = "menu",
   coverAlign,
   panelWidth,
   triggerRadius,
@@ -817,6 +838,9 @@ 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;
@@ -858,6 +882,7 @@ function TriggerMenuPanel({
           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
@@ -871,6 +896,7 @@ 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 =
@@ -954,14 +980,43 @@ function TriggerMenuPanel({
                 </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>
@@ -969,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