@multiplatform.one/forms 7.66.0 → 7.68.0

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

@@ -7,12 +7,14 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act } from "@testing-library/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { Text } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 import { OverlayStackProvider } from "../shared/overlayStack";
-import type { CompactFace } from "./compactFace";
+import { MENU_MIN_WIDTH, type CompactFace } from "./compactFace";
 import { FloatingPanel } from "./index.native";
 import { panelViewportPadding } from "./useFloatingPanel";
 
+const win = vi.hoisted(() => ({ width: 390 }));
+
 vi.mock("react-native-web", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-native")>();
   return {
@@ -20,7 +22,7 @@ vi.mock("react-native-web", async (importOriginal) => {
     ActionSheetIOS: undefined,
     Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
       visible ? children : null,
-    useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+    useWindowDimensions: () => ({ width: win.width, height: 844, scale: 3, fontScale: 1 }),
   };
 });
 
@@ -28,6 +30,7 @@ let trigger = { x: 20, y: 240, width: 120, height: 44 };
 beforeEach(() => {
   vi.useFakeTimers();
   trigger = { x: 20, y: 240, width: 120, height: 44 };
+  win.width = 390;
   // RN-web's measureInWindow reads the node's client rect on a timer.
   vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
     x: trigger.x,
@@ -120,6 +123,16 @@ describe("FloatingPanel native menu face (FZ-7830)", () => {
     expect(row.getAttribute("aria-expanded")).toBe("true");
   });
 
+  it("keeps its shadow: an inner view clips, not the elevated surface (FZ-8116)", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const surface = document.querySelector('[data-testid="floating-panel-menu-surface"]');
+    const clip = document.querySelector('[data-testid="floating-panel-menu-clip"]');
+    expect(surface?.contains(clip)).toBe(true);
+    expect(surface?.className).not.toContain("_ox-hidden");
+    expect(clip?.className).toContain("_ox-hidden");
+  });
+
   it("closes when the repeated trigger row is pressed", () => {
     const result = renderWithProviders(<Menu face="menu" />);
     tap(result.getByRole("button", { name: "Stack actions" }));
@@ -193,3 +206,60 @@ describe("FloatingPanel native menu face (FZ-7830)", () => {
     expect(sheet()).toBeNull();
   });
 });
+
+/** The SHC account menu's shape: an avatar-sized trigger over rows that fill their width. */
+function AccountMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      anchorMode="attach"
+      triggerEcho={false}
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Text>A</Text>}
+      triggerA11y={{ label: "Account" }}
+    >
+      <XStack testID="identity-row" width="100%">
+        <YStack flex={1} minWidth={0}>
+          <Text numberOfLines={1}>Clay Risser</Text>
+          <Text numberOfLines={1}>clayrisser@gmail.com</Text>
+        </YStack>
+      </XStack>
+      <Text>Sign out</Text>
+    </FloatingPanel>
+  );
+}
+
+describe("FloatingPanel native menu face width (FZ-8220)", () => {
+  it("opens rows with no intrinsic width at the platform minimum, not the trigger's 44pt", () => {
+    trigger = { x: 336, y: 52, width: 44, height: 44 };
+    const result = renderWithProviders(<AccountMenu />);
+    tap(result.getByRole("button", { name: "Account" }));
+    const panel = menu() as HTMLElement;
+    expect(MENU_MIN_WIDTH).toBe(250);
+    expect(panel.style.minWidth).toBe(`${MENU_MIN_WIDTH}px`);
+    expect(panel.style.maxWidth).toBe(`${390 - 2 * panelViewportPadding}px`);
+    layout(panel, MENU_MIN_WIDTH, 160);
+    expect(panel.style.left).toBe(`${390 - panelViewportPadding - MENU_MIN_WIDTH}px`);
+    expect(panel.style.top).toBe(`${52 + 44}px`);
+    expect(echo()).toBeNull();
+  });
+
+  it("clamps the minimum to the screen less its margins on a narrow window", () => {
+    win.width = 240;
+    trigger = { x: 186, y: 52, width: 44, height: 44 };
+    const result = renderWithProviders(<AccountMenu />);
+    tap(result.getByRole("button", { name: "Account" }));
+    expect(menu()?.style.minWidth).toBe(`${240 - 2 * panelViewportPadding}px`);
+  });
+
+  it("keeps a trigger wider than the minimum as the floor", () => {
+    trigger = { x: 20, y: 240, width: 320, height: 44 };
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(menu()?.style.minWidth).toBe("320px");
+  });
+});

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

@@ -0,0 +1,193 @@
+/**
+ * FZ-8116 (LC-266): the window's size class picks the native FloatingPanel's
+ * form. At regular width (an iPad, a wide Android window) a picker opens over
+ * its field the way the web float does; at compact width (iPhone, Slide Over)
+ * it keeps the bottom sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { FloatingPanel } from "./index.native";
+import type { FloatingPanelProps } from "./index";
+import { regularFillHeight } from "./regularPlacement";
+import { panelViewportPadding } from "./useFloatingPanel";
+
+const screen = vi.hoisted(() => ({ width: 820, height: 1180 }));
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+      visible ? children : null,
+    useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+  };
+});
+
+let field = { x: 40, y: 300, width: 360, height: 44 };
+beforeEach(() => {
+  vi.useFakeTimers();
+  field = { x: 40, y: 300, width: 360, height: 44 };
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    x: field.x,
+    y: field.y,
+    left: field.x,
+    top: field.y,
+    width: field.width,
+    height: field.height,
+    right: field.x + field.width,
+    bottom: field.y + field.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  screen.width = 820;
+  screen.height = 1180;
+});
+
+function Picker(props: Partial<FloatingPanelProps>) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      trigger={<Text>Colour</Text>}
+      triggerA11y={{ label: "Colour" }}
+      {...props}
+    >
+      <Text>Red</Text>
+      <Text>Green</Text>
+    </FloatingPanel>
+  );
+}
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+function layout(node: Element, width: number, height: number) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, width, height } } });
+  });
+}
+
+const regular = () => document.querySelector<HTMLElement>('[data-testid="floating-panel-regular"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+const echo = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-regular-echo"]');
+const scroll = () => document.querySelector('[data-testid="floating-panel-regular-scroll"]');
+
+function open(props: Partial<FloatingPanelProps> = {}) {
+  const result = renderWithProviders(<Picker {...props} />);
+  tap(result.getByRole("button", { name: "Colour" }));
+  return result;
+}
+
+describe("FloatingPanel native at regular width (FZ-8116)", () => {
+  it("opens over its field on an iPad-wide window, not as a bottom sheet", () => {
+    open();
+    const panel = regular();
+    expect(panel).not.toBeNull();
+    expect(sheet()).toBeNull();
+    expect(panel?.style.opacity).toBe("0");
+    layout(panel as HTMLElement, 240, 200);
+    expect(panel?.style.left).toBe("40px");
+    expect(panel?.style.top).toBe("300px");
+    expect(panel?.style.opacity).toBe("1");
+  });
+
+  it("keeps its shadow: an inner view clips, not the elevated surface", () => {
+    open();
+    const surface = document.querySelector('[data-testid="floating-panel-regular-surface"]');
+    const clip = document.querySelector('[data-testid="floating-panel-regular-clip"]');
+    expect(surface?.contains(clip)).toBe(true);
+    expect(surface?.className).not.toContain("_ox-hidden");
+    expect(clip?.className).toContain("_ox-hidden");
+  });
+
+  it("is at least the field's width by default", () => {
+    open();
+    expect(regular()?.style.minWidth).toBe("360px");
+  });
+
+  it("is the field's width exactly for match-trigger", () => {
+    open({ widthMode: "match-trigger" });
+    expect(regular()?.style.width).toBe("360px");
+  });
+
+  it("hugs its content for fit-content, from the field's start edge", () => {
+    open({ widthMode: "fit-content" });
+    const panel = regular() as HTMLElement;
+    expect(panel.style.minWidth).toBe("");
+    expect(panel.style.width).toBe("");
+    layout(panel, 300, 320);
+    expect(panel.style.left).toBe("40px");
+  });
+
+  it("echoes the field as its first row, and pressing it closes the panel", () => {
+    open();
+    const row = echo() as HTMLElement;
+    expect(row.textContent).toBe("Colour");
+    expect(row.style.height).toBe("44px");
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(row);
+    expect(regular()).toBeNull();
+  });
+
+  it("slides up inside the padded window when the field sits near the bottom", () => {
+    field = { x: 40, y: 1080, width: 360, height: 44 };
+    open();
+    const panel = regular() as HTMLElement;
+    layout(panel, 360, 300);
+    const top = parseFloat(panel.style.top);
+    expect(top + 300).toBeLessThanOrEqual(1180 - panelViewportPadding);
+  });
+
+  it("gives a gesture editor no scrollport (LC-83)", () => {
+    open();
+    expect(scroll()).toBeNull();
+  });
+
+  it("scrolls a scrollable list", () => {
+    open({ scrollable: true });
+    expect(scroll()).not.toBeNull();
+  });
+
+  it("opens a search list (sheetFill) at a definite height", () => {
+    open({ scrollable: true, sheetFill: true });
+    expect(regular()?.style.height).toBe(`${regularFillHeight}px`);
+  });
+
+  it("keeps the bottom sheet when the caller forces it", () => {
+    open({ sheet: true });
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+
+  it.each([
+    ["an iPhone", 390, 844],
+    ["iPad Slide Over", 320, 1180],
+  ])("keeps the bottom sheet on %s", (_name, width, height) => {
+    screen.width = width;
+    screen.height = height;
+    open();
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+});

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset, Paragraph, H4, Text } from "@multiplatform.one/theme";
-import { ScrollView, Separator, View, XStack, YStack } from "tamagui";
+import { Preset, Paragraph, Text } from "@multiplatform.one/theme";
+import { ScrollView, View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "@multiplatform.one/components";
 import { FloatingPanel } from "./index";
 import { Button } from "../Button";
 import { Select } from "../fields/Select";
@@ -38,13 +39,11 @@ export const Basic: Story = {
           trigger={<Button>{open ? "Panel is open" : "Click to open panel"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Panel Content</H4>
+            <OverlayHeader title="Panel Content" onClose={() => setOpen(false)} />
             <Paragraph>
               Opens over its trigger: the top edge sits on the trigger's top edge and the trigger is
               the first row. Escape or an outside click dismisses and returns focus.
             </Paragraph>
-            <Separator />
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -185,9 +184,8 @@ export const ForceSheet: Story = {
           trigger={<Button>{open ? "Sheet open" : "Click for Sheet (forced)"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Forced Sheet</H4>
+            <OverlayHeader title="Forced Sheet" onClose={() => setOpen(false)} />
             <Paragraph>This panel always uses Sheet, even on large screens.</Paragraph>
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -224,13 +222,11 @@ function ScrollClipPair({ where }: { where: string }) {
         trigger={<Button>{`FloatingPanel (${where})`}</Button>}
       >
         <YStack gap="$3" data-testid={`scroll-clip-panel-${where}`}>
-          <H4>Panel {where}</H4>
+          <OverlayHeader title={`Panel ${where}`} onClose={() => setOpen(false)} />
           <Paragraph>
             This body is taller than the space left in the scroll view, so a clipped panel loses its
             lower half.
           </Paragraph>
-          <Separator />
-          <Button onPress={() => setOpen(false)}>Close</Button>
         </YStack>
       </FloatingPanel>
     </YStack>

package/src/FloatingPanel/RegularPanel.tsx

@@ -0,0 +1,159 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ReactNode, useState } from "react";
+import {
+  I18nManager,
+  Pressable,
+  ScrollView as RNScrollView,
+  StyleSheet,
+  View as RNView,
+} from "react-native";
+import { YStack } from "tamagui";
+import { t } from "../shared/t";
+import type { PanelBounds, TriggerRect } from "./pointAnchor";
+import { placeRegularPanel, regularFillHeight } from "./regularPlacement";
+import type { PanelWidthMode } from "./useFloatingPanel";
+
+/**
+ * A FloatingPanel at regular width (FZ-8116): over its field instead of a
+ * bottom sheet. Measured once per open at its natural size, then placed on
+ * the field's window rect. The field is echoed as the first row, as the web
+ * float's named close row is, and pressing it closes the panel.
+ *
+ * Only a `scrollable` panel gets a scrollport: a gesture editor (ColorPicker,
+ * DatePicker) must take its own drags (LC-83).
+ */
+export function RegularPanel({
+  anchor,
+  bounds,
+  widthMode,
+  echo,
+  echoLabel,
+  header,
+  scrollable,
+  fill,
+  scrollViewProps,
+  framePadding,
+  frameGap,
+  onBackdropPress,
+  onClose,
+  children,
+}: {
+  anchor: TriggerRect | null;
+  bounds: PanelBounds;
+  widthMode: PanelWidthMode;
+  echo: ReactNode;
+  echoLabel?: string;
+  header?: ReactNode;
+  scrollable: boolean;
+  fill: boolean;
+  scrollViewProps?: Record<string, unknown>;
+  framePadding: string;
+  frameGap: string | undefined;
+  onBackdropPress: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const room = Math.max(0, bounds.bottom - bounds.top);
+  const fillHeight = fill ? Math.min(regularFillHeight, room) : undefined;
+  const placement =
+    anchor && size
+      ? placeRegularPanel({
+          trigger: anchor,
+          width: size.width,
+          height: fillHeight ?? size.height,
+          bounds,
+          widthMode,
+          rtl: I18nManager.isRTL,
+        })
+      : null;
+  const widthStyle =
+    widthMode === "match-trigger"
+      ? { width: anchor?.width }
+      : widthMode === "at-least-trigger"
+        ? { minWidth: anchor?.width ?? 0 }
+        : undefined;
+  const echoRow =
+    echo != null && anchor && anchor.height > 0 ? (
+      <Pressable
+        testID="floating-panel-regular-echo"
+        onPress={onClose}
+        accessibilityRole="button"
+        {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+        aria-expanded
+        style={{ height: anchor.height, justifyContent: "center" }}
+      >
+        <RNView pointerEvents="none">{echo}</RNView>
+      </Pressable>
+    ) : null;
+  return (
+    <RNView style={StyleSheet.absoluteFill}>
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onBackdropPress}
+        accessibilityRole="button"
+        accessibilityLabel={t("Close")}
+      />
+      <RNView
+        testID="floating-panel-regular"
+        onLayout={(e) => {
+          if (size) return;
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) setSize({ width, height });
+        }}
+        style={{
+          position: "absolute",
+          left: placement?.left ?? bounds.left,
+          top: placement?.top ?? bounds.top,
+          ...widthStyle,
+          maxWidth: bounds.right - bounds.left,
+          maxHeight: placement?.maxHeight ?? room,
+          ...(fillHeight ? { height: Math.min(fillHeight, placement?.maxHeight ?? room) } : null),
+          opacity: placement ? 1 : 0,
+        }}
+      >
+        <YStack
+          testID="floating-panel-regular-surface"
+          {...knobProps.elevatedSurface}
+          flexShrink={1}
+          minHeight={0}
+          {...(fill ? { flex: 1 } : undefined)}
+          onAccessibilityEscape={onClose}
+        >
+          <YStack
+            testID="floating-panel-regular-clip"
+            borderRadius={knobProps.elevatedSurface.borderRadius}
+            overflow="hidden"
+            flexShrink={1}
+            minHeight={0}
+            {...(fill ? { flex: 1 } : undefined)}
+          >
+            {echoRow}
+            <YStack
+              padding={framePadding}
+              gap={frameGap}
+              flexShrink={1}
+              minHeight={0}
+              {...(fill ? { flex: 1 } : undefined)}
+            >
+              {header}
+              {scrollable ? (
+                <RNScrollView
+                  testID="floating-panel-regular-scroll"
+                  style={fill ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 }}
+                  keyboardShouldPersistTaps="handled"
+                  {...(scrollViewProps as object)}
+                >
+                  {children}
+                </RNScrollView>
+              ) : (
+                children
+              )}
+            </YStack>
+          </YStack>
+        </YStack>
+      </RNView>
+    </RNView>
+  );
+}

package/src/FloatingPanel/compactFace.spec.ts

@@ -1,5 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { pickerCompactFace, resolveCompactFace, SHORT_LIST_MAX } from "./compactFace";
+import {
+  MENU_MIN_WIDTH,
+  menuMinWidth,
+  pickerCompactFace,
+  resolveCompactFace,
+  SHORT_LIST_MAX,
+} from "./compactFace";
 
 describe("resolveCompactFace (FZ-7830)", () => {
   it("keeps the sheet by default, at page level and inside an overlay", () => {
@@ -38,3 +44,20 @@ describe("pickerCompactFace (FZ-7830)", () => {
     expect(resolveCompactFace(pickerCompactFace(3, true), false)).toBe("sheet");
   });
 });
+
+describe("menuMinWidth (FZ-8220)", () => {
+  it("never opens a menu narrower than the platform floor", () => {
+    expect(menuMinWidth(44, 370)).toBe(MENU_MIN_WIDTH);
+    expect(menuMinWidth(0, 370)).toBe(MENU_MIN_WIDTH);
+  });
+
+  it("keeps a wider trigger's width", () => {
+    expect(menuMinWidth(320, 370)).toBe(320);
+  });
+
+  it("clamps to the room between the screen's margins", () => {
+    expect(menuMinWidth(44, 220)).toBe(220);
+    expect(menuMinWidth(400, 370)).toBe(370);
+    expect(menuMinWidth(44, -5)).toBe(0);
+  });
+});

package/src/FloatingPanel/compactFace.ts

@@ -30,3 +30,19 @@ export const SHORT_LIST_MAX = 7;
 export function pickerCompactFace(optionCount: number, searchable = false): CompactFace {
   return !searchable && optionCount <= SHORT_LIST_MAX ? "menu" : "auto";
 }
+
+/**
+ * The narrowest a menu-faced panel opens on native (FZ-8220): the iOS
+ * pull-down's floor, inside Material's 112–280 menu range. A menu's rows
+ * fill their width and have none of their own, so without a floor the panel
+ * took its trigger's width and an avatar's 44pt squeezed the text away.
+ */
+export const MENU_MIN_WIDTH = 250;
+
+/**
+ * A menu face's minimum width: at least its trigger and the platform floor,
+ * never wider than the room between the screen's margins.
+ */
+export function menuMinWidth(triggerWidth: number, availableWidth: number): number {
+  return Math.max(0, Math.min(Math.max(triggerWidth, MENU_MIN_WIDTH), availableWidth));
+}

package/src/FloatingPanel/containingBlock.ts

@@ -0,0 +1,32 @@
+/**
+ * Viewport origin of the box a `position: fixed` panel is laid out against.
+ * The top/left math is in viewport coordinates, which is only right while that
+ * box is the viewport. An ancestor with a transform, filter, perspective,
+ * paint containment or container query becomes the containing block instead.
+ * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
+ * transformed dialog still lays out against that dialog. A `display: contents`
+ * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
+ */
+export function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const cs = getComputedStyle(node);
+    if (cs.display === "contents") continue;
+    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
+    const captures =
+      set(cs.transform, "none") ||
+      set(cs.perspective, "none") ||
+      set(cs.filter, "none") ||
+      set(cs.backdropFilter, "none") ||
+      set(cs.containerType, "normal") ||
+      /transform|perspective|filter/.test(cs.willChange) ||
+      /paint|layout|strict|content/.test(cs.contain);
+    if (captures) {
+      const rect = node.getBoundingClientRect();
+      return {
+        top: rect.top + node.clientTop - node.scrollTop,
+        left: rect.left + node.clientLeft - node.scrollLeft,
+      };
+    }
+  }
+  return { top: 0, left: 0 };
+}