@multiplatform.one/components 7.11.0 → 7.16.0

package/src/Chip/index.tsx

@@ -1,3 +1,4 @@
+import { pressSlopOutsetProps } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import {
   MIN_PRESS_TARGET,
@@ -5,6 +6,8 @@ import {
   ensureFocusVisibleRing,
   pressTargetHitSlop,
   pressTargetStyle,
+  radiusStopFromToken,
+  resolveRadiusClass,
   sizeRecipeForToken,
   useAccentTintedSurface,
   useReadableTextOn,
@@ -20,7 +23,7 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import type { ColorTokens, GetProps } from "tamagui";
-import { Text, View, styled } from "tamagui";
+import { Text, View, getTokenValue, styled } from "tamagui";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -290,6 +293,18 @@ const DismissRing = styled(View, {
   },
 });
 
+// K12 (LC-54 pitch-limited): wrapped chip rows sit `$2` apart, so each row's
+// press target may reach half that gap before it meets the next row's. The
+// outset stops there rather than at 44; no chip size paints tall enough for
+// the half-gap to overshoot the floor. The slop pseudo-element is placed from
+// the padding box, so the frame's own border width is added back.
+const CHIP_ROW_GAP = "$2";
+
+function chipBodySlop(borderWidth: number): number {
+  const gap = getTokenValue(CHIP_ROW_GAP as Parameters<typeof getTokenValue>[0], "space");
+  return typeof gap === "number" ? Math.floor(gap / 2) + Math.ceil(borderWidth) : 0;
+}
+
 function normalizeIcon(icon: ReactNode, size: number): ReactNode {
   if (icon == null || icon === false) return null;
   if (isValidElement(icon)) {
@@ -333,6 +348,12 @@ export function Chip({
   const RING_INSET = 2;
   const dismissVisual = iconSize + RING_INSET * 2;
   const dismissOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - dismissVisual) / 2));
+  // DG-RAD-02 CIRCULAR-AT-FULL. At full, 1000 paints the same h/2 circle
+  // and stays a token the constraint audit reads as a pill.
+  const dismissStop = radiusStopFromToken(knobProps.borderRadius.borderRadius);
+  let dismissRadius: string | number = knobProps.borderRadius.borderRadius;
+  if (dismissStop === "full") dismissRadius = 1000;
+  else if (dismissStop) dismissRadius = resolveRadiusClass("CIRCULAR-AT-FULL", dismissStop);
 
   let backgroundColor: ColorTokens | "transparent" | string = colors.tint;
   let textColor: ColorTokens | string = colors.text;
@@ -407,6 +428,7 @@ export function Chip({
             role: "button",
             tabIndex: 0,
             ...(selected != null ? { "aria-pressed": isSelected } : undefined),
+            ...pressSlopOutsetProps(chipBodySlop(knobProps.borderRadius.borderWidth), "vertical"),
           }
         : undefined)}
       {...(disabled
@@ -463,7 +485,7 @@ export function Chip({
           aria-label={t("Remove")}
           tabIndex={0}
           className="mp-chip-dismiss"
-          borderRadius={knobProps.pointy ? 0 : 1000}
+          borderRadius={dismissRadius}
           {...pressTargetStyle()}
           marginVertical={-dismissOutset}
           marginHorizontal={-dismissOutset}
@@ -482,7 +504,7 @@ export function Chip({
             }) as unknown as () => void
           }
         >
-          <DismissRing className="mp-chip-dismiss-ring" borderRadius={knobProps.pointy ? 0 : 1000}>
+          <DismissRing className="mp-chip-dismiss-ring" borderRadius={dismissRadius}>
             <XIcon size={iconSize} />
           </DismissRing>
         </DismissButton>

package/src/Heading.native.spec.tsx

@@ -24,7 +24,7 @@
  * rescue is mounted in NEITHER arm; the props channel is the only channel
  * carrying the knob here, which is the channel native has. It does NOT
  * execute the React Native renderer — it is the standing substitute for a
- * simulator capture (`agent-os/standards/testing/falsifiability.md`), not a
+ * simulator capture (`docs/standards/testing/falsifiability.md`), not a
  * replacement for one.
  */
 import { cleanup, screen } from "@testing-library/react";

package/src/ScrollView/ScrollView.native.spec.tsx

@@ -0,0 +1,157 @@
+/**
+ * MPO-368: on native, a consumer onScroll must reach the React Native
+ * ScrollView. These cases run tamagui's NATIVE build (see
+ * ../../tests/nativeTamagui.ts); vitest's usual web build keeps onScroll and
+ * would pass with or without the fix.
+ */
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { act, createElement, createRef } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+const runtime = await vi.hoisted(async () => {
+  const { loadNativeTamagui } = await import("../../tests/nativeTamagui");
+  return loadNativeTamagui();
+});
+
+vi.mock("react-native-web", () => runtime.reactNative);
+vi.mock("tamagui", () => ({ ...runtime.core, ScrollView: runtime.RawScrollView }));
+
+const { ScrollView } = await import("./index.native");
+
+const { TamaguiProvider, createTamagui, createTokens, styled } = runtime.core;
+const previousGlobalConfig = (globalThis as { __tamaguiConfig?: unknown }).__tamaguiConfig;
+const config = createTamagui({
+  tokens: createTokens({ size: {}, space: {}, radius: {}, zIndex: {}, color: {} }),
+  themes: { light: {} },
+  shorthands: {},
+  media: {},
+});
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeAll(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  runtime.resetHosts();
+});
+
+afterAll(() => {
+  (globalThis as { __tamaguiConfig?: unknown }).__tamaguiConfig = previousGlobalConfig;
+});
+
+function render(element: React.ReactElement) {
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  act(() => {
+    root.render(createElement(TamaguiProvider, { config, defaultTheme: "light" }, element));
+  });
+  return runtime.lastHostProps("ScrollView") ?? {};
+}
+
+type AnyScrollView = React.ComponentType<Record<string, unknown>>;
+
+function scrollProps(): Record<string, unknown> {
+  return {
+    testID: "probe",
+    scrollEventThrottle: 32,
+    onScroll: vi.fn(),
+    onContentSizeChange: vi.fn(),
+  };
+}
+
+describe("tamagui native ScrollView (upstream control)", () => {
+  it("lists onScroll in its native skip props", () => {
+    expect(runtime.skipProps.onScroll).toBe(1);
+  });
+
+  it("drops a consumer onScroll before the RN ScrollView while other handlers pass", () => {
+    const props = scrollProps();
+    const host = render(createElement(runtime.RawScrollView as AnyScrollView, props));
+    expect(host.onContentSizeChange).toBe(props.onContentSizeChange);
+    expect(host.onScroll).toBeUndefined();
+  });
+});
+
+describe("components ScrollView on native", () => {
+  it("hands the consumer onScroll to the RN ScrollView", () => {
+    const props = scrollProps();
+    const host = render(createElement(ScrollView as unknown as AnyScrollView, props));
+    expect(host.onScroll).toBe(props.onScroll);
+    expect(host.onContentSizeChange).toBe(props.onContentSizeChange);
+    expect(host.scrollEventThrottle).toBe(32);
+    expect(host.testID).toBe("probe");
+  });
+
+  it("gives the RN ScrollView the same props as tamagui's apart from onScroll", () => {
+    const shared = {
+      flex: 1,
+      minHeight: 0,
+      fullscreen: true,
+      horizontal: true,
+      contentContainerStyle: { paddingVertical: 4 },
+      keyboardShouldPersistTaps: "handled",
+    };
+    const raw = { ...render(createElement(runtime.RawScrollView as AnyScrollView, shared)) };
+    act(() => root.unmount());
+    const house = { ...render(createElement(ScrollView as unknown as AnyScrollView, shared)) };
+    delete house.onScroll;
+    expect(house).toEqual(raw);
+  });
+
+  it("forwards its ref to the RN ScrollView instance", () => {
+    const ref = createRef<unknown>();
+    render(createElement(ScrollView as unknown as AnyScrollView, { ref }));
+    expect(ref.current).toBe(runtime.hostInstance("ScrollView"));
+  });
+
+  it("keeps forwarding onScroll through a styled() extension", () => {
+    const Extended = styled(ScrollView, { name: "Extended" });
+    const props = scrollProps();
+    const host = render(createElement(Extended as unknown as AnyScrollView, props));
+    expect(host.onScroll).toBe(props.onScroll);
+  });
+});
+
+describe("catalog onScroll consumers", () => {
+  it("take the components ScrollView, or route native to the RN ScrollView", () => {
+    const src = join(import.meta.dirname, "..");
+    const offenders = sourceFiles(src)
+      .filter((file) => {
+        const code = readFileSync(file, "utf8");
+        return (
+          /\bonScroll\b/.test(code) &&
+          importsScrollView(code, "tamagui") &&
+          !importsScrollView(code, "react-native")
+        );
+      })
+      .map((file) => relative(src, file));
+    expect(offenders).toEqual([]);
+  });
+});
+
+function sourceFiles(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) out.push(...sourceFiles(path));
+    else if (/\.tsx?$/.test(entry.name) && !/\.(spec|test|stories)\./.test(entry.name)) {
+      out.push(path);
+    }
+  }
+  return out;
+}
+
+function importsScrollView(code: string, from: string): boolean {
+  const re = new RegExp(`import\\s+\\{([^}]*)\\}\\s+from\\s+["']${from}["']`, "g");
+  return [...code.matchAll(re)].some((match) =>
+    match[1]!.split(",").some((part) => /^ScrollView\b/.test(part.trim())),
+  );
+}

package/src/ScrollView/index.native.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+import {
+  ScrollView as RNScrollView,
+  type ScrollViewProps as RNScrollViewProps,
+} from "react-native";
+import { styled, type ScrollView as TamaguiScrollView } from "tamagui";
+
+export type { ScrollViewProps } from "tamagui";
+
+// tamagui 2.7.6 drops every key in helpers/webPropsToSkip.native (onScroll is
+// one) before a non-HOC styled component reaches its host, so its own
+// styled(RN ScrollView) never delivers onScroll (MPO-368). The handler rides
+// past getSplitStyles under another name and is restored at the RN boundary.
+// Drop this file once tamagui forwards onScroll on native; the upstream
+// control in ScrollView.native.spec.tsx fails when it does.
+
+type ScrollHandler = RNScrollViewProps["onScroll"];
+
+const ScrollHost = forwardRef<RNScrollView, RNScrollViewProps & { scrollHandler?: ScrollHandler }>(
+  function ScrollHost({ scrollHandler, ...props }, ref) {
+    return <RNScrollView ref={ref} {...props} onScroll={scrollHandler} />;
+  },
+);
+
+const ScrollFrame = styled(
+  ScrollHost,
+  {
+    name: "ScrollView",
+    scrollEnabled: true,
+    variants: {
+      fullscreen: {
+        true: { position: "absolute", inset: 0 },
+      },
+    } as const,
+  },
+  {
+    accept: {
+      contentContainerStyle: "style",
+    } as const,
+  },
+);
+
+export const ScrollView = ScrollFrame.styleable(function ScrollView({ onScroll, ...props }, ref) {
+  return <ScrollFrame ref={ref} {...props} scrollHandler={onScroll} />;
+}) as unknown as typeof TamaguiScrollView;

package/src/ScrollView/index.tsx

@@ -0,0 +1,2 @@
+export { ScrollView } from "tamagui";
+export type { ScrollViewProps } from "tamagui";

package/src/Separator/index.tsx

@@ -39,9 +39,9 @@
  * specificity `flex: 1` can turn the rule into a viewport-dependent gap
  * (the raw primitive was a `flex: 1` item, exactly that defect).
  *
- * Knob story: no knob channel maps to a 1px rule today. Separator WEIGHT is
- * an ADJUDICATION-CANDIDATE (MPO-21 G10, G0-clay R9) — until adjudicated the
- * thickness is the measured constant, and consumer `{...props}` stay the
+ * Knob story: no knob channel maps to a 1px rule, and none will. Clay ruled
+ * MPO-21 G10-A on 2026-09-26: there is no separator-weight knob, the rule is
+ * 1px and the quiet rule is opacity 0.5. Consumer `{...props}` stay the
  * explicit eject (STD-EJECT-LAST).
  */
 import type { GetProps } from "tamagui";

package/src/SheetModal/SheetModal.detentLayout.spec.tsx

@@ -0,0 +1,173 @@
+/**
+ * MPO-68 / MPO-299: what the native sheet lays out at a settled detent.
+ *
+ * The iOS simulator run on 965825866 dragged a sheet to a lower detent: it
+ * kept its full height and slid it below the screen, or under the keyboard,
+ * so the tail of a list inside it was unreachable.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Animated, PanResponder, type PanResponderCallbacks } from "react-native";
+import { Text } from "tamagui";
+import { resolveSheetDetents } from "./detents";
+import type { SheetModalProps } from "./index";
+import { SheetModal } from "./index.native";
+
+const keyboard = vi.hoisted(() => ({ inset: 0 }));
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+vi.mock("../shared/useKeyboardInset", () => ({ useKeyboardInset: () => keyboard.inset }));
+
+let pan: PanResponderCallbacks;
+let springs: Array<{ toValue: number; done?: (result: { finished: boolean }) => void }>;
+
+beforeEach(() => {
+  keyboard.inset = 0;
+  springs = [];
+  vi.spyOn(PanResponder, "create").mockImplementation((config) => {
+    pan = config;
+    return { panHandlers: {} } as never;
+  });
+  vi.spyOn(Animated, "spring").mockImplementation((_value, config) => ({
+    start: (done) => {
+      springs.push({ toValue: config.toValue as number, done });
+    },
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+  vi.spyOn(Animated, "timing").mockImplementation(() => ({
+    start: (done) => done?.({ finished: true }),
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function px(value: string) {
+  return Number.parseFloat(value);
+}
+
+function open(props: Partial<SheetModalProps> = {}) {
+  const view = renderWithProviders(
+    <SheetModal open onOpenChange={() => {}} scrollable {...props}>
+      <Text>row</Text>
+    </SheetModal>,
+  );
+  const frame = view.getByTestId("sheet-modal-frame");
+  const full = px(frame.style.maxHeight);
+  return { view, frame, full };
+}
+
+/** react-native-web keeps the onLayout handler on the node; call it the way a device layout would. */
+function layout(element: HTMLElement, height: number) {
+  const handler = (element as unknown as Record<string, (event: unknown) => void>)
+    .__reactLayoutHandler;
+  act(() => handler({ nativeEvent: { layout: { x: 0, y: 0, width: 390, height } } }));
+}
+
+function drag(dy: number) {
+  act(() => {
+    pan.onPanResponderGrant?.({} as never, {} as never);
+    pan.onPanResponderMove?.({} as never, { dy } as never);
+    pan.onPanResponderRelease?.({} as never, { dy, vy: 0 } as never);
+  });
+}
+
+function settle() {
+  const last = springs[springs.length - 1];
+  act(() => last.done?.({ finished: true }));
+  return last;
+}
+
+describe("a native sheet at rest on a lower detent", () => {
+  it("is laid out at the detent height, not slid down at full height", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    expect(lower).toBeLessThan(full);
+    drag(full - lower);
+    expect(settle().toValue).toBe(full - lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("gives a filled body the detent as its definite height", () => {
+    const { frame, full } = open({ fill: true });
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.height)).toBe(lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+  });
+
+  it("ends above the keyboard when the keyboard is up", () => {
+    keyboard.inset = 300;
+    const { frame, full } = open();
+    expect(frame.parentElement?.style.paddingBottom).toBe("300px");
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("grows back to full height under a still top edge when a drag picks it up", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(full);
+    expect(frame.style.transform).toContain(`translateY(${full - lower}px)`);
+    act(() => pan.onPanResponderRelease?.({} as never, { dy: -(full - lower), vy: 0 } as never));
+    expect(settle().toValue).toBe(0);
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+
+  it("keeps its top edge when the keyboard moved the max height under it", () => {
+    const { view, frame, full } = open();
+    layout(frame, full);
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    keyboard.inset = 300;
+    view.rerender(
+      <SheetModal open onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>,
+    );
+    const lifted = 844 - 300 - 48;
+    expect(px(frame.style.maxHeight)).toBe(Math.min(lifted, lower));
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(lifted);
+    expect(frame.style.transform).toContain(`translateY(${lifted - lower}px)`);
+  });
+
+  it("keeps the drag when a scroll inside the sheet asks for the touch", () => {
+    open();
+    expect(pan.onPanResponderTerminationRequest?.({} as never, {} as never)).toBe(false);
+  });
+
+  it("forgets the rest height when the sheet closes and opens again", () => {
+    const { view, frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    const sheet = (next: boolean) => (
+      <SheetModal open={next} onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>
+    );
+    view.rerender(sheet(false));
+    view.rerender(sheet(true));
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+});

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();
+  }
+});