@multiplatform.one/components 7.10.0 → 7.15.0

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.hydration.spec.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+/**
+ * MPO-279: on touch mobile web the server cannot know the device, so it renders
+ * pointer-sized tabs. Hydration has to reproduce that markup, then adopt the
+ * touch floor; a first client render at touch size is an attribute mismatch
+ * React never patches.
+ */
+import { TestProviders } from "@multiplatform.one/test-utils";
+import { act } from "react";
+import { hydrateRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+const host = vi.hoisted(() => {
+  vi.stubGlobal("matchMedia", () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+  }));
+  return { web: true, touch: false };
+});
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  get isWeb() {
+    return host.web;
+  },
+  get isTouchable() {
+    return !host.web && host.touch;
+  },
+  get isWebTouchable() {
+    return host.web && host.touch;
+  },
+}));
+
+const items = [
+  { value: "address", label: "Address & Contact", content: <>address panel</> },
+  { value: "settings", label: "Settings", content: <>settings panel</> },
+];
+
+function Fixture() {
+  return (
+    <TestProviders>
+      <Tabs items={items} defaultValue="address" />
+    </TestProviders>
+  );
+}
+
+/** Every `_h-` height atom painted inside each tab, in document order. */
+function tabHeights(root: ParentNode): string[][] {
+  return [...root.querySelectorAll('[role="tab"]')].map((tab) =>
+    [tab, ...tab.querySelectorAll("*")].flatMap((node) =>
+      [...node.classList].filter((name) => /^_h-\d/.test(name)),
+    ),
+  );
+}
+
+let container: HTMLDivElement;
+let root: Root | undefined;
+let errors: unknown[];
+
+beforeEach(() => {
+  host.web = true;
+  host.touch = false;
+  errors = [];
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.spyOn(console, "error").mockImplementation((...args) => errors.push(args));
+  container = document.createElement("div");
+  document.body.append(container);
+});
+
+afterEach(async () => {
+  if (root) await act(async () => root?.unmount());
+  root = undefined;
+  container.remove();
+  vi.restoreAllMocks();
+});
+
+async function hydrate() {
+  await act(async () => {
+    root = hydrateRoot(container, <Fixture />, {
+      onRecoverableError: (error) => errors.push(error),
+    });
+  });
+}
+
+const hydrationErrors = () =>
+  errors.filter((error) => /hydration|hydrated|didn't match/i.test(String(error)));
+
+describe("Tabs sizing through hydration (MPO-279)", () => {
+  it("keeps the server's pointer-sized tabs through hydration, then adopts the touch floor", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverTabs = [...container.querySelectorAll('[role="tab"]')];
+    const serverHeights = tabHeights(container);
+    expect(serverHeights.flat()).not.toHaveLength(0);
+
+    host.touch = true;
+    await hydrate();
+
+    expect(hydrationErrors()).toEqual([]);
+    expect([...container.querySelectorAll('[role="tab"]')]).toEqual(serverTabs);
+    const clientHeights = tabHeights(container);
+    expect(clientHeights).not.toEqual(serverHeights);
+    for (const heights of clientHeights) expect(heights).toContain("_h-48px");
+  });
+
+  it("leaves pointer sizing alone on a pointer device", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverHeights = tabHeights(container);
+    await hydrate();
+    expect(hydrationErrors()).toEqual([]);
+    expect(tabHeights(container)).toEqual(serverHeights);
+  });
+
+  it("sizes native tabs to the touch floor on the first render", () => {
+    host.web = false;
+    host.touch = true;
+    container.innerHTML = renderToString(<Fixture />);
+    for (const heights of tabHeights(container)) expect(heights).toContain("_h-48px");
+  });
+});

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

package/src/Tabs/Tabs.measurement.spec.tsx

@@ -0,0 +1,186 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Tabs, tabsScrollIntoViewX } from "./index";
+
+const observed = vi.hoisted(() => ({ scroll: null as any, interactions: new Map<string, any>() }));
+
+// The actual component and primitives render. Only public measurement events
+// and the imperative scroll boundary are controlled; this is not browser proof.
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<any>();
+  const React = await import("react");
+  return {
+    ...actual,
+    ScrollView: React.forwardRef((props: any, ref) => {
+      observed.scroll = props;
+      return React.createElement(actual.ScrollView, { ...props, ref });
+    }),
+    styled: (...args: any[]) => {
+      const Component = actual.styled(...args);
+      if (args[0] !== actual.Tabs.Tab) return Component;
+      return React.forwardRef((props: any, ref) => {
+        observed.interactions.set(props.value, props.onInteraction);
+        return React.createElement(Component, { ...props, ref });
+      });
+    },
+  };
+});
+
+const items = Array.from({ length: 6 }, (_, index) => ({
+  value: `tab-${index}`,
+  label: `Tab ${index + 1}`,
+}));
+const last = { x: 500, y: 0, width: 100, height: 40 };
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  observed.scroll = null;
+  observed.interactions.clear();
+  document.documentElement.removeAttribute("dir");
+});
+
+function fixture(mode: "value" | "defaultValue" = "value") {
+  const rendered = renderWithProviders(<Tabs items={items} {...{ [mode]: "tab-5" }} />);
+  expect(screen.getByRole("tab", { name: "Tab 6" })).toHaveAttribute("aria-selected", "true");
+  const host = rendered.container.querySelector('[data-tabs-scroll="true"]') as any;
+  expect(typeof host.scrollTo).toBe("function");
+  const scroll = vi.spyOn(host, "scrollTo").mockImplementation(() => {});
+  const viewport = (width: number) =>
+    act(() => observed.scroll.onLayout({ nativeEvent: { layout: { width } } }));
+  const content = (width: number) => act(() => observed.scroll.onContentSizeChange(width, 40));
+  const active = (layout = last) => act(() => observed.interactions.get("tab-5")("select", layout));
+  const manualScroll = (x: number) =>
+    act(() => observed.scroll.onScroll({ nativeEvent: { contentOffset: { x } } }));
+  return { ...rendered, scroll, viewport, content, active, manualScroll };
+}
+
+describe.each(["value", "defaultValue"] as const)(
+  "Tabs public measurement ordering (%s)",
+  (mode) => {
+    it("reveals initial last tab when metrics arrive before its layout (control)", () => {
+      const tree = fixture(mode);
+      tree.viewport(390);
+      tree.content(600);
+      tree.active();
+      expect(tree.scroll).toHaveBeenCalledWith({ x: 210, animated: true });
+    });
+
+    it("reveals initial last tab when content arrives after its layout", () => {
+      const tree = fixture(mode);
+      tree.viewport(390);
+      tree.active();
+      expect(tree.scroll).not.toHaveBeenCalled();
+      tree.content(600);
+      expect(tree.scroll).toHaveBeenCalled();
+    });
+
+    it("corrects after a viewport shrink with unchanged active-tab bounds", () => {
+      const tree = fixture(mode);
+      tree.viewport(800);
+      tree.content(600);
+      tree.active();
+      expect(tree.scroll).not.toHaveBeenCalled();
+      tree.viewport(390);
+      expect(tree.scroll).toHaveBeenCalled();
+    });
+
+    it("does not force a manual scroll back after the active tab was revealed", () => {
+      const tree = fixture(mode);
+      tree.viewport(390);
+      tree.content(600);
+      tree.active();
+      expect(tree.scroll).toHaveBeenCalledWith({ x: 210, animated: true });
+      tree.scroll.mockClear();
+      tree.manualScroll(0);
+      expect(tree.scroll).not.toHaveBeenCalled();
+    });
+  },
+);
+
+it.each(["value", "defaultValue"] as const)(
+  "reveals after late viewport measurement (%s)",
+  (mode) => {
+    const tree = fixture(mode);
+    tree.content(600);
+    tree.active();
+    expect(tree.scroll).not.toHaveBeenCalled();
+    tree.viewport(390);
+    expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: 210, animated: true });
+  },
+);
+
+it("retries after a hidden viewport becomes usable and ignores identical measurements", () => {
+  const tree = fixture();
+  tree.viewport(0);
+  tree.content(600);
+  tree.active();
+  expect(tree.scroll).not.toHaveBeenCalled();
+  tree.viewport(390);
+  expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: 210, animated: true });
+  tree.manualScroll(210);
+  tree.scroll.mockClear();
+  tree.viewport(390);
+  tree.content(600);
+  tree.active();
+  expect(tree.scroll).not.toHaveBeenCalled();
+  tree.viewport(800);
+  expect(tree.scroll).not.toHaveBeenCalled();
+});
+
+it("rechecks changed content width without fighting subsequent manual scroll", () => {
+  const tree = fixture();
+  tree.viewport(390);
+  tree.content(390);
+  tree.active();
+  expect(tree.scroll).not.toHaveBeenCalled();
+  tree.content(600);
+  expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: 210, animated: true });
+  tree.manualScroll(210);
+  tree.scroll.mockClear();
+  tree.content(620);
+  expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: 230, animated: true });
+  tree.manualScroll(230);
+  tree.scroll.mockClear();
+  tree.manualScroll(0);
+  tree.active();
+  tree.viewport(390);
+  tree.content(620);
+  expect(tree.scroll).not.toHaveBeenCalled();
+  tree.content(650);
+  expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: 242, animated: true });
+});
+
+it("waits for the latest selected tab's layout when dimensions were pending", () => {
+  const tree = fixture();
+  tree.viewport(390);
+  tree.active();
+  tree.rerender(<Tabs items={items} value="tab-0" />);
+  tree.content(600);
+  expect(tree.scroll).not.toHaveBeenCalled();
+  act(() => observed.interactions.get("tab-0")("select", { ...last, x: 0 }));
+  expect(tree.scroll).not.toHaveBeenCalled();
+  expect(screen.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+});
+
+it("uses the negative RTL offset range after delayed dimensions", () => {
+  document.documentElement.setAttribute("dir", "rtl");
+  const tree = fixture();
+  tree.viewport(390);
+  tree.active({ ...last, x: 0 });
+  tree.content(600);
+  expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ x: -210, animated: true });
+  tree.manualScroll(-210);
+  tree.scroll.mockClear();
+  tree.manualScroll(0);
+  expect(tree.scroll).not.toHaveBeenCalled();
+});
+
+it.each([0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
+  "does not scroll with unusable width %s",
+  (width) => {
+    expect(tabsScrollIntoViewX(last, 0, width, 600, "ltr")).toBeUndefined();
+    expect(tabsScrollIntoViewX({ ...last, width }, 0, 390, 600, "ltr")).toBeUndefined();
+  },
+);

package/src/Tabs/Tabs.stories.tsx

@@ -362,3 +362,46 @@ export const EqualSmall: Story = {
     </YStack>
   ),
 };
+
+export const InitialSixthActive: Story = {
+  args: { defaultValue: "section-6", ariaLabel: "Example sections" },
+  render: (args) => {
+    const [wide, setWide] = React.useState(false);
+    const [fullLabels, setFullLabels] = React.useState(true);
+    const [hidden, setHidden] = React.useState(false);
+    const [mount, setMount] = React.useState(0);
+    const items: TabsItem[] = Array.from({ length: 6 }, (_, index) => ({
+      value: `section-${index + 1}`,
+      label: fullLabels ? `Section ${index + 1} overview` : `${index + 1}`,
+      content: (
+        <Panel
+          title={`Section ${index + 1}`}
+          body="The selected section stays visible when the strip is measured or resized."
+        />
+      ),
+    }));
+    return (
+      <YStack gap="$3">
+        <XStack gap="$2" flexWrap="wrap">
+          <Button onPress={() => setWide((value) => !value)}>
+            {wide ? "Set width to 390px" : "Set width to 800px"}
+          </Button>
+          <Button onPress={() => setFullLabels((value) => !value)}>
+            {fullLabels ? "Use short labels" : "Load full labels"}
+          </Button>
+          <Button onPress={() => setHidden((value) => !value)}>
+            {hidden ? "Show strip" : "Hide strip"}
+          </Button>
+          <Button onPress={() => setMount((value) => value + 1)}>Reset to sixth tab</Button>
+        </XStack>
+        <Text color="$color11">
+          Use short labels, then load full labels to change content width. Hide and show the strip
+          to defer usable measurements. Scroll manually after reveal to check that it stays put.
+        </Text>
+        <YStack width={wide ? 800 : 390} maxWidth="100%" display={hidden ? "none" : "flex"}>
+          <Tabs key={mount} {...args} items={items} />
+        </YStack>
+      </YStack>
+    );
+  },
+};

package/src/Tabs/index.tsx

@@ -37,6 +37,7 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   type GroupPosition,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
@@ -174,6 +175,14 @@ export function tabsScrollIntoViewX(
   direction: TabsDirection,
   pad = 32,
 ): number | undefined {
+  if (
+    ![layout.x, layout.width, layout.height, offset, viewport, content].every(Number.isFinite) ||
+    layout.width <= 0 ||
+    layout.height <= 0 ||
+    viewport <= 0 ||
+    content <= 0
+  )
+    return undefined;
   const range = Math.max(content - viewport, 0);
   if (range <= 0) return undefined;
   const minScrollLeft = direction === "rtl" ? -range : 0;
@@ -366,23 +375,28 @@ function TabsRoot({
   };
 
   // Active tab layout (relative to the list) for the sliding indicator
-  const [activeLayout, setActiveLayout] = React.useState<TabLayout | null>(null);
-  const handleInteraction = (type: string, layout: TabLayout | null) => {
-    if (type !== "select" || !layout) return;
+  const [activeLayout, setActiveLayout] = React.useState<(TabLayout & { value: string }) | null>(
+    null,
+  );
+  const handleInteraction = (tabValue: string, type: string, layout: TabLayout | null) => {
+    if (type !== "select" || !layout || tabValue !== currentValue) return;
     setActiveLayout((prev) =>
       prev &&
+      prev.value === tabValue &&
       prev.x === layout.x &&
       prev.y === layout.y &&
       prev.width === layout.width &&
       prev.height === layout.height
         ? prev
-        : layout,
+        : { ...layout, value: tabValue },
     );
   };
 
   // Overflow tracking for edge fades + keep-active-visible scrolling
   const scrollRef = React.useRef<ScrollView>(null);
+  const tabRefs = React.useRef(new Map<string, HTMLElement>());
   const scrollMetrics = React.useRef({ offset: 0, viewport: 0, content: 0 });
+  const [sizeRevision, setSizeRevision] = React.useState(0);
   const [fades, setFades] = React.useState({ left: false, right: false });
   const updateFades = () => {
     const { offset, viewport, content } = scrollMetrics.current;
@@ -390,20 +404,38 @@ function TabsRoot({
     setFades((prev) => (prev.left === next.left && prev.right === next.right ? prev : next));
   };
 
+  const updateScrollSize = (dimension: "viewport" | "content", size: number) => {
+    if (!Object.is(scrollMetrics.current[dimension], size)) {
+      scrollMetrics.current[dimension] = size;
+      if (isWeb) {
+        const selected = tabRefs.current.get(currentValue);
+        if (selected && selected.offsetWidth > 0 && selected.offsetHeight > 0) {
+          handleInteraction(currentValue, "select", {
+            x: selected.offsetLeft,
+            y: selected.offsetTop,
+            width: selected.offsetWidth,
+            height: selected.offsetHeight,
+          });
+        }
+      }
+      setSizeRevision((current) => current + 1);
+    }
+    updateFades();
+  };
+
   // Scroll the newly active tab into view when it is clipped
   React.useEffect(() => {
-    if (!activeLayout) return;
+    if (!activeLayout || activeLayout.value !== currentValue) return;
     const { offset, viewport, content } = scrollMetrics.current;
     const target = tabsScrollIntoViewX(activeLayout, offset, viewport, content, direction);
-    if (target !== undefined) {
+    if (target !== undefined && Math.abs(target - offset) >= 1) {
       scrollRef.current?.scrollTo({ x: target, animated: true });
     }
-  }, [activeLayout, direction]);
+  }, [activeLayout, currentValue, direction, sizeRevision]);
 
   const isUnderline = variant === "underline";
   const isBand = variant === "band";
   const equalDistribution = isBand || distribution === "equal";
-  const tabRefs = React.useRef(new Map<string, HTMLElement>());
   const onTabKeyDown = (event: React.KeyboardEvent, value: string) => {
     if (!["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
     const enabled = items.filter((item) => !disabled && !item.disabled);
@@ -461,7 +493,7 @@ function TabsRoot({
             x={activeLayout.x}
             width={activeLayout.width}
             data-tabs-indicator="underline"
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       ) : (
@@ -477,7 +509,7 @@ function TabsRoot({
             {...(knobProps.elevation !== undefined
               ? { elevation: knobProps.elevation }
               : undefined)}
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       )
@@ -576,7 +608,7 @@ function TabsRoot({
                   accessibilityState: { selected: isActive, disabled: Boolean(isDisabled) },
                 })}
             hitSlop={tabHitSlop}
-            onInteraction={handleInteraction}
+            onInteraction={(type, layout) => handleInteraction(item.value, type, layout)}
             cursor={isDisabled ? "not-allowed" : "pointer"}
             backgroundColor={
               isBand
@@ -716,12 +748,10 @@ function TabsRoot({
               updateFades();
             }}
             onLayout={(e) => {
-              scrollMetrics.current.viewport = e.nativeEvent.layout.width;
-              updateFades();
+              updateScrollSize("viewport", e.nativeEvent.layout.width);
             }}
             onContentSizeChange={(w) => {
-              scrollMetrics.current.content = w;
-              updateFades();
+              updateScrollSize("content", w);
             }}
           >
             {tabList}