@multiplatform.one/components 7.10.0 → 7.15.0

package/src/SheetModal/SheetModal.stories.tsx

@@ -1,6 +1,15 @@
-import { Button } from "@multiplatform.one/forms";
+import {
+  Paragraph as FixtureText,
+  ScrollView,
+  SheetModal as PublicSheetModal,
+  XStack,
+  YStack as FixtureStack,
+  type TamaguiElement,
+} from "@multiplatform.one/components";
+import { Button, Input } from "@multiplatform.one/forms";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { Platform, useWindowDimensions, type LayoutChangeEvent } from "react-native";
 import { Paragraph, SizableText, YStack } from "tamagui";
 import { ActionBar } from "../actions/ActionBar";
 import { SheetModal } from "./index";
@@ -107,3 +116,267 @@ export const OpenOnMount: Story = {
   name: "Open",
   render: () => <Harness startOpen />,
 };
+
+type Bounds = { x: number; y: number; width: number; height: number };
+type Reading<T> = T | "unmeasured" | "unavailable" | "invalid";
+type FixtureMode = "subject" | "control-240";
+type FixtureReadings = {
+  frameLayout: Reading<Bounds>;
+  toolbarLayout: Reading<Bounds>;
+  viewportLayout: Reading<Bounds>;
+  scrollLayout: Reading<Bounds>;
+  frameWindow: Reading<Bounds>;
+  viewportWindow: Reading<Bounds>;
+  scrollWindow: Reading<Bounds>;
+  tailWindow: Reading<Bounds>;
+  content: Reading<{ width: number; height: number }>;
+  offset: Reading<{ x: number; y: number }>;
+  sampleWindow: ReturnType<typeof useWindowDimensions> | "unmeasured";
+  sample: number;
+  tailPresses: number;
+};
+
+function emptyReadings(): FixtureReadings {
+  return {
+    frameLayout: "unmeasured",
+    toolbarLayout: "unmeasured",
+    viewportLayout: "unmeasured",
+    scrollLayout: "unmeasured",
+    frameWindow: "unmeasured",
+    viewportWindow: "unmeasured",
+    scrollWindow: "unmeasured",
+    tailWindow: "unmeasured",
+    content: "unmeasured",
+    offset: "unmeasured",
+    sampleWindow: "unmeasured",
+    sample: 0,
+    tailPresses: 0,
+  };
+}
+
+function bounds(x: number, y: number, width: number, height: number): Reading<Bounds> {
+  return [x, y, width, height].every(Number.isFinite) && width >= 0 && height >= 0
+    ? { x, y, width, height }
+    : "invalid";
+}
+
+function OwnedBodyFixture({ measured }: { measured: boolean }) {
+  const window = useWindowDimensions();
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<FixtureMode>("subject");
+  const [fill, setFill] = useState(false);
+  const [readings, setReadings] = useState(emptyReadings);
+  const active = useRef(false);
+  const generation = useRef(0);
+  const sample = useRef(0);
+  const frameRef = useRef<TamaguiElement>(null);
+  const viewportRef = useRef<TamaguiElement>(null);
+  const scrollRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
+  const tailRef = useRef<TamaguiElement>(null);
+  const presentation = generation.current;
+  const kind = measured ? "measured" : "scroll";
+
+  function present(nextMode: FixtureMode, nextFill = false) {
+    generation.current += 1;
+    sample.current = 0;
+    active.current = true;
+    setMode(nextMode);
+    setFill(nextFill);
+    setReadings(emptyReadings());
+    setOpen(true);
+  }
+
+  function close() {
+    active.current = false;
+    setOpen(false);
+  }
+
+  function record(patch: Partial<FixtureReadings>) {
+    if (!active.current || generation.current !== presentation) return;
+    setReadings((previous) => {
+      const next = { ...previous, ...patch };
+      return JSON.stringify(next) === JSON.stringify(previous) ? previous : next;
+    });
+  }
+
+  function onLayout(key: "frameLayout" | "toolbarLayout" | "viewportLayout" | "scrollLayout") {
+    return ({ nativeEvent: { layout } }: LayoutChangeEvent) =>
+      record({ [key]: bounds(layout.x, layout.y, layout.width, layout.height) });
+  }
+
+  function measureBounds() {
+    const currentSample = ++sample.current;
+    record({
+      sample: currentSample,
+      frameWindow: "unmeasured",
+      viewportWindow: "unmeasured",
+      scrollWindow: "unmeasured",
+      tailWindow: "unmeasured",
+      sampleWindow: { ...window },
+    });
+    for (const [key, node] of [
+      ["frameWindow", frameRef.current],
+      ["viewportWindow", viewportRef.current],
+      ["scrollWindow", scrollRef.current?.getNativeScrollRef?.()],
+      ["tailWindow", tailRef.current],
+    ] as const) {
+      if (!node || typeof node.measureInWindow !== "function") {
+        record({ [key]: "unavailable" });
+        continue;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        if (sample.current === currentSample) record({ [key]: bounds(x, y, width, height) });
+      });
+    }
+  }
+
+  const viewport = readings.viewportLayout;
+  const showRows = !measured || (typeof viewport === "object" && viewport.height > 0);
+  const height = (value: Reading<Bounds>) => (typeof value === "object" ? value.height : value);
+  const diagnostics = {
+    kind,
+    mode,
+    fill,
+    open,
+    presentation,
+    platform: Platform.OS,
+    window,
+    sheetFrameWindow: "unavailable: SheetModal has no public frame ref",
+    ...readings,
+  };
+
+  return (
+    <FixtureStack gap="$3" padding="$3">
+      <FixtureText>{measured ? "Owned measured viewport" : "Owned ScrollView"}</FixtureText>
+      <Button onPress={() => present("subject")}>Open flex subject</Button>
+      <Button onPress={() => present("subject", true)}>Open flex subject (fill)</Button>
+      <Button onPress={() => present("control-240")}>Open 240pt control</Button>
+      <FixtureText>
+        Measure after the sheet settles. Close it to read the captured bounds below. Repeat after
+        dragging, scrolling, rotating or using the keyboard. A declared size is not a measurement.
+      </FixtureText>
+      <FixtureText testID="owned-sheet-readings" selectable>
+        {JSON.stringify(diagnostics, null, 2)}
+      </FixtureText>
+      <PublicSheetModal
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) close();
+        }}
+        snapPoint={88}
+        scrollable={false}
+        fill={fill}
+        header={
+          <FixtureStack gap="$1" flexShrink={0}>
+            <FixtureText numberOfLines={1}>
+              {kind} / {mode} / fill {fill ? "on" : "off"}
+            </FixtureText>
+            <FixtureText numberOfLines={1}>
+              Body {height(readings.frameLayout)} / toolbar {height(readings.toolbarLayout)} /
+              viewport {height(viewport)}
+            </FixtureText>
+            <FixtureText numberOfLines={1}>
+              Offset {typeof readings.offset === "object" ? readings.offset.y : readings.offset} /
+              tail presses {readings.tailPresses}
+            </FixtureText>
+            <XStack gap="$2">
+              <Button flex={1} onPress={measureBounds}>
+                Measure bounds
+              </Button>
+              <Button flex={1} onPress={close}>
+                Close fixture
+              </Button>
+            </XStack>
+          </FixtureStack>
+        }
+      >
+        <FixtureStack
+          key={presentation}
+          ref={frameRef}
+          testID="owned-sheet-frame"
+          collapsable={false}
+          minHeight={0}
+          minWidth={0}
+          {...(mode === "control-240" ? { height: 240, flexGrow: 0, flexShrink: 0 } : { flex: 1 })}
+          onLayout={onLayout("frameLayout")}
+        >
+          <FixtureStack
+            testID="owned-sheet-toolbar"
+            collapsable={false}
+            flexShrink={0}
+            onLayout={onLayout("toolbarLayout")}
+          >
+            <FixtureText>Records toolbar</FixtureText>
+          </FixtureStack>
+          <FixtureStack
+            ref={viewportRef}
+            testID="owned-sheet-viewport"
+            collapsable={false}
+            flex={1}
+            minHeight={0}
+            minWidth={0}
+            onLayout={onLayout("viewportLayout")}
+          >
+            {showRows && (
+              <ScrollView
+                ref={scrollRef}
+                testID="owned-sheet-scroll"
+                flex={1}
+                minHeight={0}
+                keyboardShouldPersistTaps="handled"
+                scrollEventThrottle={32}
+                onLayout={onLayout("scrollLayout")}
+                onContentSizeChange={(width, height) =>
+                  record({
+                    content:
+                      [width, height].every(Number.isFinite) && width >= 0 && height >= 0
+                        ? { width, height }
+                        : "invalid",
+                  })
+                }
+                onScroll={({ nativeEvent: { contentOffset } }) =>
+                  record({
+                    offset: [contentOffset.x, contentOffset.y].every(Number.isFinite)
+                      ? { x: contentOffset.x, y: contentOffset.y }
+                      : "invalid",
+                  })
+                }
+              >
+                <FixtureStack gap="$2">
+                  <Input label="Keyboard probe" placeholder="Generic text only" />
+                  {Array.from({ length: 60 }, (_, index) => (
+                    <FixtureStack key={index} gap="$1" paddingVertical="$2">
+                      <FixtureText>Record {index + 1}</FixtureText>
+                      {Array.from({ length: 1 + (index % 4) }, (_, line) => (
+                        <FixtureText key={line}>
+                          Generic detail {line + 1} for this record.
+                        </FixtureText>
+                      ))}
+                    </FixtureStack>
+                  ))}
+                  <FixtureStack ref={tailRef} testID="owned-sheet-tail" collapsable={false}>
+                    <Button onPress={() => record({ tailPresses: readings.tailPresses + 1 })}>
+                      Activate Record 60
+                    </Button>
+                  </FixtureStack>
+                </FixtureStack>
+              </ScrollView>
+            )}
+          </FixtureStack>
+        </FixtureStack>
+      </PublicSheetModal>
+    </FixtureStack>
+  );
+}
+
+export const OwnedMeasuredViewport: Story = {
+  name: "Owned measured viewport",
+  argTypes: { snapPoint: { control: false }, scrollable: { control: false } },
+  render: () => <OwnedBodyFixture measured />,
+};
+
+export const OwnedScrollView: Story = {
+  name: "Owned ScrollView",
+  argTypes: { snapPoint: { control: false }, scrollable: { control: false } },
+  render: () => <OwnedBodyFixture measured={false} />,
+};

package/src/SheetModal/SheetModal.touch.spec.tsx

@@ -0,0 +1,63 @@
+/**
+ * MPO-299: an owned ScrollView inside the native sheet never scrolled on
+ * the iOS simulator, while the same swipe scrolled the Combobox sheet.
+ *
+ * On native, tamagui turns a press or focus-visible pseudo into a JS
+ * responder claim (`onStartShouldSetResponder` returning true). A surface
+ * holding that claim takes every touch that starts on plain content inside
+ * it, and a responder ancestor stops the ScrollView's own pan.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal } from "./index.native";
+
+const stacks = vi.hoisted(() => new Map<string, Record<string, unknown>>());
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+}));
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("tamagui")>();
+  const React = await import("react");
+  const YStack = React.forwardRef((props: Record<string, unknown>, ref) => {
+    if (typeof props.testID === "string") stacks.set(props.testID, props);
+    return React.createElement(actual.YStack as never, { ...props, ref });
+  });
+  return { ...actual, YStack };
+});
+
+afterEach(() => {
+  cleanup();
+  stacks.clear();
+});
+
+const claimsResponder = [
+  "pressStyle",
+  "focusStyle",
+  "focusVisibleStyle",
+  "onPress",
+  "onPressIn",
+  "onPressOut",
+  "onLongPress",
+];
+
+it("keeps every native sheet stack out of the touch responder", () => {
+  for (const fill of [false, true]) {
+    renderWithProviders(
+      <SheetModal open onOpenChange={() => {}} fill={fill} scrollable>
+        <Text>row</Text>
+      </SheetModal>,
+    );
+    for (const id of ["sheet-modal-surface", "sheet-modal-content"]) {
+      const stack = stacks.get(id);
+      expect(stack, id).toBeDefined();
+      for (const key of claimsResponder) expect(stack, `${id} ${key}`).not.toHaveProperty(key);
+    }
+    cleanup();
+    stacks.clear();
+  }
+});

package/src/SheetModal/index.native.tsx

@@ -10,7 +10,15 @@
  * height with a large-detent cap. LC-71: the frame is not a control.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Animated,
   Easing,
@@ -23,6 +31,7 @@ import {
   View as RNView,
   useWindowDimensions,
 } from "react-native";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
@@ -40,6 +49,14 @@ const backdropStrip = 48;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
 const IN_DIALOG_REGION = { inDialogRegion: true } as const;
+/*
+ * MPO-299 fill: an owned viewport bootstraps from zero unless EVERY link
+ * between the capped frame and the body gives way at once — frame height,
+ * surface, padded stack, body slot. Opening only the outer one keeps the
+ * measured-zero failure, so these are applied together or not at all.
+ */
+const fillSlot = { flex: 1, minHeight: 0 } as const;
+const nonShrinking = { flexShrink: 0 } as const;
 
 export function SheetModal({
   open,
@@ -48,11 +65,13 @@ export function SheetModal({
   header,
   snapPoint,
   scrollable,
+  fill = false,
 }: SheetModalProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const { height: windowHeight } = useWindowDimensions();
   const keyboardInset = useKeyboardInset();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
   const [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -62,11 +81,12 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  // MPO-64: the sheet ends above the keyboard rather than running under it.
+  // MPO-64: the sheet ends above the keyboard rather than running under it,
+  // and below the status bar with a strip of backdrop still showing.
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
     minSheetHeight,
-    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - backdropStrip)),
+    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - topInset - backdropStrip)),
   );
 
   /*
@@ -118,8 +138,59 @@ export function SheetModal({
   const presentationRef = useRef(0);
   const activeRef = useRef(false);
 
+  /*
+   * MPO-68 / MPO-299: a sheet at rest below full height is LAID OUT at that
+   * height. Translating a full-height frame down pushed its bottom off the
+   * screen, or under the keyboard, and the scroll owner inside still measured
+   * the full height, so the tail could never be scrolled into view.
+   *
+   * `frameCap` rides the same Animated.View as `translateY`, so the swap
+   * between "full height, translated" and "detent height, at 0" lands in one
+   * commit and the top edge does not move. `restHeightRef` is null at full
+   * height; a gesture always runs uncapped, in `travel` coordinates.
+   */
+  const frameCap = useRef(new Animated.Value(maxHeight)).current;
+  const maxHeightRef = useRef(maxHeight);
+  const restHeightRef = useRef<number | null>(null);
+  // The last uncapped layout, and whether it filled the max height. A capped
+  // frame measures only its cap, so when the keyboard moves the max height
+  // under a resting sheet, its full height is re-derived from these.
+  const naturalRef = useRef(0);
+  const filledRef = useRef(false);
+
+  useLayoutEffect(() => {
+    maxHeightRef.current = maxHeight;
+    const rest = restHeightRef.current;
+    frameCap.setValue(rest === null ? maxHeight : Math.min(maxHeight, rest));
+    if (rest !== null && naturalRef.current > 0) {
+      setMeasuredHeight(filledRef.current ? maxHeight : Math.min(naturalRef.current, maxHeight));
+    }
+  }, [frameCap, maxHeight]);
+
+  const restAt = useCallback(
+    (height: number) => {
+      restHeightRef.current = height;
+      frameCap.setValue(Math.min(maxHeightRef.current, height));
+      restRef.current = 0;
+      translateY.setValue(0);
+    },
+    [frameCap, translateY],
+  );
+
+  const releaseRest = useCallback(() => {
+    const rest = restHeightRef.current;
+    if (rest === null) return;
+    restHeightRef.current = null;
+    const offset = Math.max(0, travelRef.current - Math.min(maxHeightRef.current, rest));
+    frameCap.setValue(maxHeightRef.current);
+    restRef.current = offset;
+    translateY.setValue(offset);
+  }, [frameCap, translateY]);
+
   const settleTo = useCallback(
-    (toValue: number, velocity = 0) => {
+    (height: number, velocity = 0) => {
+      const presentation = presentationRef.current;
+      const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
       Animated.spring(translateY, {
         toValue,
@@ -132,9 +203,12 @@ export function SheetModal({
         // Modal does not advance on the New Architecture, and the drag path
         // already writes this value from JS.
         useNativeDriver: false,
-      }).start();
+      }).start(({ finished }) => {
+        if (!finished || toValue === 0) return;
+        if (activeRef.current && presentation === presentationRef.current) restAt(height);
+      });
     },
-    [translateY],
+    [restAt, translateY],
   );
 
   const dismiss = useCallback(
@@ -162,10 +236,15 @@ export function SheetModal({
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dy) > 2,
+        // Lifting a rest cap can scroll the list inside, and a scroll lets
+        // any ancestor ScrollView the finger started under claim the touch,
+        // ending the drag and blurring a focused input on release.
+        onPanResponderTerminationRequest: () => false,
         onPanResponderGrant: () => {
           translateY.stopAnimation((value) => {
             if (typeof value === "number" && Number.isFinite(value)) restRef.current = value;
           });
+          releaseRest();
         },
         onPanResponderMove: (_evt, g) => {
           const next = restRef.current + g.dy;
@@ -190,11 +269,11 @@ export function SheetModal({
               best = height;
             }
           }
-          settleTo(tvl - best, g.vy);
+          settleTo(best, g.vy);
         },
-        onPanResponderTerminate: () => settleTo(restRef.current),
+        onPanResponderTerminate: () => settleTo(travelRef.current - restRef.current),
       }),
-    [dismiss, settleTo, translateY],
+    [dismiss, releaseRest, settleTo, translateY],
   );
 
   /*
@@ -237,6 +316,8 @@ export function SheetModal({
   useEffect(() => {
     presentationRef.current += 1;
     activeRef.current = open;
+    restHeightRef.current = null;
+    frameCap.setValue(maxHeightRef.current);
     if (open) {
       enter();
     } else {
@@ -256,7 +337,7 @@ export function SheetModal({
       }
       translateY.stopAnimation();
     };
-  }, [open, enter, translateY]);
+  }, [open, enter, frameCap, translateY]);
 
   return (
     <Modal
@@ -278,31 +359,43 @@ export function SheetModal({
         </Pressable>
         <Animated.View
           onLayout={(e) => {
+            if (restHeightRef.current !== null) return;
             const h = Math.round(e.nativeEvent.layout.height);
-            if (h > 0 && h !== measuredHeight) setMeasuredHeight(h);
+            if (h <= 0) return;
+            naturalRef.current = h;
+            filledRef.current = h >= maxHeightRef.current - 1;
+            if (h !== measuredHeight) setMeasuredHeight(h);
           }}
+          testID="sheet-modal-frame"
           style={{
             // MPO-64: flex children default to flexShrink 0, so without this
             // the sheet cannot give way to the keyboard.
             flexShrink: 1,
             minHeight: 0,
-            maxHeight,
+            maxHeight: frameCap,
+            // The cap is already keyboard- and window-aware; fill only asks
+            // for it as a definite height rather than an upper bound.
+            ...(fill ? { height: frameCap } : null),
             transform: [{ translateY }],
           }}
         >
           <YStack
+            testID="sheet-modal-surface"
             {...knobProps.surface}
             {...knobProps.borderRadius}
             borderBottomLeftRadius={0}
             borderBottomRightRadius={0}
             elevation={knobProps.elevation}
             maxHeight={maxHeight}
+            flexShrink={1}
+            minHeight={0}
+            {...(fill ? fillSlot : null)}
             paddingTop="$2"
             paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
             overflow="hidden"
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={{ outlineWidth: 0 }}
+            // No focus or press pseudo on this surface: on native tamagui
+            // turns one into a touch-responder claim, and a responder here
+            // takes every drag from the ScrollView inside (MPO-299).
             accessibilityViewIsModal
             onAccessibilityEscape={close}
           >
@@ -316,11 +409,13 @@ export function SheetModal({
               {...panResponder.panHandlers}
               accessibilityRole="adjustable"
               accessibilityLabel={t("Drag to resize")}
+              testID="sheet-modal-grabber"
               style={{
                 alignSelf: "stretch",
                 alignItems: "center",
                 paddingTop: 3,
                 paddingBottom: 11,
+                ...(fill ? nonShrinking : null),
               }}
             >
               <View
@@ -334,17 +429,44 @@ export function SheetModal({
             </RNView>
             <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
               <YStack
+                testID="sheet-modal-content"
                 padding={knobProps.panelPadding.padding}
                 gap={knobProps.gap.gap}
                 flexShrink={1}
+                {...(fill ? fillSlot : null)}
               >
-                {header}
-                {scrollable ? (
-                  <RNScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
-                    {children}
-                  </RNScrollView>
+                {fill ? (
+                  <>
+                    {header ? <RNView style={nonShrinking}>{header}</RNView> : null}
+                    <RNView testID="sheet-modal-body" style={fillSlot}>
+                      {scrollable ? (
+                        <RNScrollView
+                          testID="sheet-modal-scroll"
+                          style={fillSlot}
+                          keyboardShouldPersistTaps="handled"
+                        >
+                          {children}
+                        </RNScrollView>
+                      ) : (
+                        children
+                      )}
+                    </RNView>
+                  </>
                 ) : (
-                  children
+                  <>
+                    {header}
+                    {scrollable ? (
+                      <RNScrollView
+                        testID="sheet-modal-scroll"
+                        style={{ flexGrow: 0 }}
+                        keyboardShouldPersistTaps="handled"
+                      >
+                        {children}
+                      </RNScrollView>
+                    ) : (
+                      children
+                    )}
+                  </>
                 )}
               </YStack>
             </DialogRegionContext.Provider>