@multiplatform.one/components 7.8.0 → 7.11.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/index.native.tsx

@@ -40,6 +40,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,6 +56,7 @@ export function SheetModal({
   header,
   snapPoint,
   scrollable,
+  fill = false,
 }: SheetModalProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -281,22 +290,28 @@ export function SheetModal({
             const h = Math.round(e.nativeEvent.layout.height);
             if (h > 0 && 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,
+            // The cap is already keyboard- and window-aware; fill only asks
+            // for it as a definite height rather than an upper bound.
+            ...(fill ? { height: maxHeight } : null),
             transform: [{ translateY }],
           }}
         >
           <YStack
+            testID="sheet-modal-surface"
             {...knobProps.surface}
             {...knobProps.borderRadius}
             borderBottomLeftRadius={0}
             borderBottomRightRadius={0}
             elevation={knobProps.elevation}
             maxHeight={maxHeight}
+            {...(fill ? { ...fillSlot, flexShrink: 1 } : null)}
             paddingTop="$2"
             paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
             overflow="hidden"
@@ -316,11 +331,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 +351,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>

package/src/SheetModal/index.tsx

@@ -25,6 +25,13 @@ export interface SheetModalProps {
   snapPoint?: number;
   /** Wrap children in the sheet's scroll container. */
   scrollable?: boolean;
+  /**
+   * Opt the body into the sheet's remaining height instead of sizing it to
+   * its content. A consumer-owned viewport (a virtualized list, a measured
+   * workspace) cannot bootstrap from an intrinsic host: it reports zero and
+   * then mounts nothing. Off by default, so existing sheets are unchanged.
+   */
+  fill?: boolean;
 }
 
 const FOCUSABLE =
@@ -32,6 +39,14 @@ const FOCUSABLE =
 
 const IN_DIALOG_REGION = { inDialogRegion: true } as const;
 
+/*
+ * MPO-299 fill: the web frame already has a definite height from the Sheet's
+ * percent snap point, so fill only opens the body chain inside it. A flex
+ * basis on the frame itself would replace that height, not extend it.
+ */
+const fillSlot = { flex: 1, minHeight: 0 } as const;
+const nonShrinking = { flexShrink: 0 } as const;
+
 /** LC-71: the sheet frame is not a control. Auto-focus must not paint a ring. */
 const frameRingReset = {
   outlineWidth: 0,
@@ -140,6 +155,7 @@ export function SheetModal({
   header,
   snapPoint = 60,
   scrollable,
+  fill = false,
 }: SheetModalProps) {
   const { knobProps } = useResolvedKnobs();
   const transition = knobProps.transition;
@@ -190,9 +206,30 @@ export function SheetModal({
         {...frameRingReset}
       >
         <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
-          {header ? <View id={titleId}>{header}</View> : null}
-          {scrollable ? <Sheet.ScrollView>{children}</Sheet.ScrollView> : children}
-          <View style={{ height: "env(safe-area-inset-bottom)" }} />
+          {header ? (
+            <View id={titleId} {...(fill ? nonShrinking : null)}>
+              {header}
+            </View>
+          ) : null}
+          {fill ? (
+            <View testID="sheet-modal-body" {...fillSlot}>
+              {scrollable ? (
+                <Sheet.ScrollView testID="sheet-modal-scroll" {...fillSlot}>
+                  {children}
+                </Sheet.ScrollView>
+              ) : (
+                children
+              )}
+            </View>
+          ) : scrollable ? (
+            <Sheet.ScrollView testID="sheet-modal-scroll">{children}</Sheet.ScrollView>
+          ) : (
+            children
+          )}
+          <View
+            style={{ height: "env(safe-area-inset-bottom)" }}
+            {...(fill ? nonShrinking : null)}
+          />
         </DialogRegionContext.Provider>
       </SheetFrame>
     </Sheet>

package/src/Tabs/Tabs.lifecycle.spec.tsx

@@ -0,0 +1,123 @@
+import { act, cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+const observed = vi.hoisted(() => ({ scroll: null as any }));
+vi.mock("tamagui", async (original) => {
+  const actual = await original<any>();
+  const React = await import("react");
+  return {
+    ...actual,
+    ScrollView: React.forwardRef((props: any, ref) => {
+      observed.scroll = props;
+      return React.createElement(actual.ScrollView, { ...props, ref });
+    }),
+  };
+});
+const observers: ControlledResizeObserver[] = [];
+class ControlledResizeObserver {
+  elements = new Set<Element>();
+  constructor(readonly callback: ResizeObserverCallback) {
+    observers.push(this);
+  }
+  observe(element: Element) {
+    this.elements.add(element);
+  }
+  unobserve(element: Element) {
+    this.elements.delete(element);
+  }
+  disconnect() {
+    this.elements.clear();
+  }
+}
+let precedingGrowth = 0;
+const items = Array.from({ length: 6 }, (_, index) => ({
+  value: `tab-${index}`,
+  label: `Tab ${index + 1}`,
+}));
+function indexFor(element: HTMLElement) {
+  if (element.getAttribute("role") !== "tab") return -1;
+  return Number(element.textContent?.match(/Tab (\d)/)?.[1] ?? 0) - 1;
+}
+beforeEach(() => {
+  precedingGrowth = 0;
+  observers.length = 0;
+  vi.stubGlobal("ResizeObserver", ControlledResizeObserver);
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      const index = indexFor(this);
+      return index < 0 ? 0 : 100 + (index === 0 ? precedingGrowth : 0);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return indexFor(this) < 0 ? 0 : 40;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetLeft", "get").mockImplementation(
+    function (this: HTMLElement) {
+      const index = indexFor(this);
+      return index < 0 ? 0 : index * 100 + (index > 0 ? precedingGrowth : 0);
+    },
+  );
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+function measured() {
+  const tree = renderWithProviders(<Tabs items={items} value="tab-5" />);
+  const host = tree.container.querySelector('[data-tabs-scroll="true"]') as any;
+  const scroll = vi.spyOn(host, "scrollTo").mockImplementation(() => {});
+  act(() => observed.scroll.onLayout({ nativeEvent: { layout: { width: 390 } } }));
+  act(() => observed.scroll.onContentSizeChange(600, 40));
+  expect(scroll).toHaveBeenCalledExactlyOnceWith({ x: 210, animated: true });
+  act(() => observed.scroll.onScroll({ nativeEvent: { contentOffset: { x: 210 } } }));
+  scroll.mockClear();
+  return { ...tree, scroll };
+}
+it("uses the primitive's real initial measurement and selection effect", () => {
+  measured();
+});
+it("refreshes selected position after a preceding label grows without resizing the selected trigger", () => {
+  const tree = measured();
+  precedingGrowth = 100;
+  tree.rerender(
+    <Tabs
+      value="tab-5"
+      items={items.map((item, index) =>
+        index === 0 ? { ...item, label: "Tab 1 with loaded details" } : item,
+      )}
+    />,
+  );
+  const first = screen.getByRole("tab", { name: "Tab 1 with loaded details" });
+  act(() => {
+    for (const observer of observers) {
+      if (observer.elements.has(first))
+        observer.callback(
+          [
+            {
+              target: first,
+              contentRect: first.getBoundingClientRect(),
+              borderBoxSize: [],
+              contentBoxSize: [],
+              devicePixelContentBoxSize: [],
+            },
+          ],
+          observer as unknown as ResizeObserver,
+        );
+    }
+    observed.scroll.onContentSizeChange(700, 40);
+  });
+  const selected = screen.getByRole("tab", { name: "Tab 6" });
+  expect(selected.offsetLeft).toBe(600);
+  const lastRequest = tree.scroll.mock.calls.at(-1)?.[0] as { x: number } | undefined;
+  expect(lastRequest?.x).toBeGreaterThanOrEqual(selected.offsetLeft + selected.offsetWidth - 390);
+  expect(lastRequest!.x).toBeLessThanOrEqual(selected.offsetLeft);
+  tree.scroll.mockClear();
+  act(() => observed.scroll.onScroll({ nativeEvent: { contentOffset: { x: 0 } } }));
+  act(() => observed.scroll.onContentSizeChange(700, 40));
+  expect(tree.scroll).not.toHaveBeenCalled();
+});