@multiplatform.one/components 7.7.3 → 7.7.6

package/src/SheetModal/index.native.tsx

@@ -62,19 +62,6 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  useEffect(() => {
-    if (!open) {
-      setBackdropArmed(false);
-      if (armTimerRef.current) {
-        clearTimeout(armTimerRef.current);
-        armTimerRef.current = null;
-      }
-    }
-    return () => {
-      if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    };
-  }, [open]);
-
   // MPO-64: the sheet ends above the keyboard rather than running under it.
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
@@ -127,11 +114,9 @@ export function SheetModal({
   travelRef.current = travel;
   detentsRef.current = detents;
 
-  useEffect(() => {
-    if (open) return;
-    translateY.setValue(travelRef.current);
-    restRef.current = travelRef.current;
-  }, [open, translateY]);
+  // Async callbacks belong to one committed presentation, never its successor.
+  const presentationRef = useRef(0);
+  const activeRef = useRef(false);
 
   const settleTo = useCallback(
     (toValue: number, velocity = 0) => {
@@ -143,7 +128,10 @@ export function SheetModal({
         stiffness: 320,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        // MPO-256: JS driver. A native-driven Animated node inside a core RN
+        // Modal does not advance on the New Architecture, and the drag path
+        // already writes this value from JS.
+        useNativeDriver: false,
       }).start();
     },
     [translateY],
@@ -151,6 +139,8 @@ export function SheetModal({
 
   const dismiss = useCallback(
     (velocity = 0) => {
+      if (!activeRef.current) return;
+      const presentation = presentationRef.current;
       restRef.current = travelRef.current;
       Animated.spring(translateY, {
         toValue: travelRef.current,
@@ -159,9 +149,9 @@ export function SheetModal({
         stiffness: 400,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start(({ finished }) => {
-        if (finished) close();
+        if (finished && activeRef.current && presentation === presentationRef.current) close();
       });
     },
     [close, translateY],
@@ -207,9 +197,25 @@ export function SheetModal({
     [dismiss, settleTo, translateY],
   );
 
-  const handleModalShow = useCallback(() => {
+  /*
+   * MPO-256 — the entrance runs from an effect on `open` as well as from
+   * `onShow`, whichever gets here first, guarded so the second is a no-op.
+   * Wired to `onShow` ALONE, the sheet stays parked at `travel` for good
+   * whenever that callback does not arrive: one sheet-height below the
+   * screen, every row in the accessibility tree and none of them reachable.
+   */
+  const enteredRef = useRef(false);
+  const enter = useCallback(() => {
+    if (!activeRef.current || enteredRef.current) return;
+    const presentation = presentationRef.current;
+    enteredRef.current = true;
     if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
+    armTimerRef.current = setTimeout(() => {
+      if (activeRef.current && presentation === presentationRef.current) {
+        armTimerRef.current = null;
+        setBackdropArmed(true);
+      }
+    }, 280);
     // MPO-62: the modal fades (backdrop dims IN PLACE); only the panel slides.
     // MPO-71: the sheet is already parked off-screen before the present, so
     // this setValue only normalises the start to exactly `travel` once the
@@ -221,10 +227,37 @@ export function SheetModal({
       toValue: 0,
       duration: 280,
       easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start();
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      if (finished && activeRef.current && presentation === presentationRef.current)
+        translateY.setValue(0);
+    });
   }, [translateY]);
 
+  useEffect(() => {
+    presentationRef.current += 1;
+    activeRef.current = open;
+    if (open) {
+      enter();
+    } else {
+      setBackdropArmed(false);
+      const parked = travelRef.current || 10000;
+      translateY.setValue(parked);
+      restRef.current = parked;
+    }
+    return () => {
+      // Invalidate first: stopping an animation can synchronously finish it.
+      activeRef.current = false;
+      presentationRef.current += 1;
+      enteredRef.current = false;
+      if (armTimerRef.current) {
+        clearTimeout(armTimerRef.current);
+        armTimerRef.current = null;
+      }
+      translateY.stopAnimation();
+    };
+  }, [open, enter, translateY]);
+
   return (
     <Modal
       visible={open}
@@ -232,7 +265,7 @@ export function SheetModal({
       animationType="fade"
       statusBarTranslucent
       onRequestClose={close}
-      onShow={handleModalShow}
+      onShow={enter}
     >
       <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
         <Pressable

package/src/Tabs/Tabs.bandColor.spec.tsx

@@ -0,0 +1,23 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
+  useReadableTextOn: () => "#fff",
+}));
+
+describe("selected tab ink follows its painted surface", () => {
+  it("uses page-surface ink for the band even when contained tint needs white ink", () => {
+    const result = renderWithProviders(
+      <Tabs variant="band" value="one" items={[{ value: "one", label: "Selected" }]} />,
+    );
+    expect(result.getByText("Selected").className).toContain("_col-color");
+  });
+  it("keeps contrasting tint ink for the contained indicator", () => {
+    const result = renderWithProviders(
+      <Tabs variant="contained" value="one" items={[{ value: "one", label: "Selected" }]} />,
+    );
+    expect(result.getByText("Selected").className).not.toContain("_col-color");
+  });
+});

package/src/Tabs/Tabs.native.spec.tsx

@@ -0,0 +1,35 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+// Exercise the native accessibility branch while retaining the test host renderer.
+// Geometry still requires a native runtime; this test asserts role/name/state only.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+describe("native Tabs accessibility contract", () => {
+  it("names each button and exposes selected and disabled states", () => {
+    const result = renderWithProviders(
+      <Tabs
+        variant="band"
+        value="one"
+        items={[
+          { value: "one", label: "One" },
+          { value: "two", label: "Two", disabled: true },
+          { value: "three", label: "Three", accessibilityLabel: "Third destination" },
+        ]}
+      />,
+    );
+    const selected = result.getByRole("button", { name: "One" });
+    expect(selected).toHaveAttribute("aria-selected", "true");
+    const disabled = result.getByRole("button", { name: "Two" });
+    expect(disabled).toHaveAttribute("aria-disabled", "true");
+    const third = result.getByRole("button", { name: "Three" });
+    expect(third).toHaveAttribute("accessibilitylabel", "Third destination");
+    expect(third).toHaveAttribute("aria-selected", "false");
+    expect(selected).toHaveAttribute("accessibilityrole", "button");
+    expect(selected).toHaveAttribute("accessibilitylabel", "One");
+  });
+});

package/src/Tabs/Tabs.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { Text } from "tamagui";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, describe, expect, it, vitest } from "vitest";
@@ -220,6 +220,56 @@ describe("Tabs", () => {
     expect(screen.getByRole("tab", { name: "Three" }).tabIndex).toBe(-1);
   });
 
+  it("navigates the band by keyboard while skipping disabled tabs", async () => {
+    renderWithProviders(
+      <Tabs items={[...items, { value: "four", label: "Four" }]} variant="band" />,
+    );
+    const one = screen.getByRole("tab", { name: "One" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "End" });
+    await waitFor(() => expect(screen.getByRole("tab", { name: "Four" })).toHaveFocus());
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowLeft" });
+    await waitFor(() => expect(screen.getByRole("tab", { name: "Two" })).toHaveFocus());
+    fireEvent.keyDown(document.activeElement!, { key: "Home" });
+    await waitFor(() => expect(one).toHaveFocus());
+  });
+
+  it("keeps manual activation distinct from keyboard focus in a band", async () => {
+    renderWithProviders(<Tabs items={items} variant="band" activationMode="manual" />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "ArrowRight" });
+    await waitFor(() => expect(two).toHaveFocus());
+    expect(two).toHaveAttribute("aria-selected", "false");
+    fireEvent.keyDown(two, { key: "Enter" });
+    expect(two).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("keeps an enabled entry point when the selected tab is disabled", () => {
+    renderWithProviders(<Tabs items={items} value="three" />);
+    const stops = screen.getAllByRole("tab").filter((tab) => tab.tabIndex === 0);
+    expect(stops).toHaveLength(1);
+    expect(stops[0]).toHaveAccessibleName("One");
+  });
+
+  it("renders a flat equal band with named tabs and no scrolling viewport", () => {
+    const { container } = renderWithProviders(<Tabs items={items} variant="band" />);
+    expect(container.querySelector('[data-tabs-distribution="equal"]')).not.toBeNull();
+    expect(container.querySelector('[data-tabs-scroll="true"]')).toBeNull();
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+    expect(container.querySelector("[data-tabs-indicator]")).toBeNull();
+  });
+
+  it("lets equal-band chrome shrink inside each allocated tab without horizontal insets", () => {
+    renderWithProviders(<Tabs items={items} variant="band" />);
+    const chrome = screen.getByRole("tab", { name: "One" }).firstElementChild!;
+    expect(chrome.className).toContain("_fs-1");
+    expect(chrome.className).toContain("_fb-0px");
+    expect(chrome.className).toContain("_pl-0px");
+    expect(chrome.className).toContain("_pr-0px");
+  });
+
   it("ariaLabel overrides the default tablist name", () => {
     renderWithProviders(<Tabs items={items} ariaLabel="Document sections" />);
     expect(screen.getByRole("tablist")).toHaveAttribute("aria-label", "Document sections");

package/src/Tabs/Tabs.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta<typeof Tabs> = {
     },
   },
   argTypes: {
-    variant: { control: "select", options: ["underline", "contained"] },
+    variant: { control: "select", options: ["underline", "contained", "band"] },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     accent: { control: "boolean" },
     error: { control: "boolean" },
@@ -327,3 +327,29 @@ export const CompactAndSize: Story = {
     </YStack>
   ),
 };
+
+export const EqualBand: Story = {
+  render: () => (
+    <YStack width={390} maxWidth="100%">
+      <Tabs
+        variant="band"
+        ariaLabel="Sections"
+        items={[
+          { value: "overview", label: "Overview" },
+          { value: "activity", label: "Activity" },
+          { value: "resources", label: "Resources" },
+          { value: "reports", label: "Reports" },
+          { value: "settings", label: "Settings" },
+        ]}
+      />
+    </YStack>
+  ),
+};
+
+export const IntrinsicHorizontalHost: Story = {
+  render: () => (
+    <ScrollView horizontal width={390}>
+      <Tabs items={baseItems} ariaLabel="Intrinsic tabs" />
+    </ScrollView>
+  ),
+};