@multiplatform.one/components 7.8.0 → 7.11.0

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

@@ -174,6 +174,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 +374,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 +403,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);
@@ -576,7 +607,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
@@ -645,12 +676,12 @@ function TabsRoot({
                 fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}
                 color={
                   isDisabled
-                    ? componentColors.text.muted
+                    ? disabledState.textKnobProps.color
                     : isActive
                       ? variant === "contained" && onSelectedTint
                         ? onSelectedTint
                         : componentColors.text.primary
-                      : componentColors.text.secondary
+                      : knobProps.textAccentColor
                 }
               >
                 {wrapBareTextChildren(item.label, (label) => label)}
@@ -716,12 +747,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}

package/src/Toast/Toast.spec.tsx

@@ -1,15 +1,19 @@
 import { fireEvent, screen, act, cleanup } from "@testing-library/react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Button, SizableText, Theme, useTheme, YStack } from "tamagui";
+import { Button, SizableText, TamaguiProvider, useTheme, YStack } from "tamagui";
 import {
   __resetDevWarnSeen,
   aaTextContrastRatio,
-  contrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
   normalizeToHex,
   Preset,
-  relativeLuminance,
   useAccentOnSurface,
 } from "@multiplatform.one/theme";
 import { Toast, ToastViewport, useToast, nativeToastA11y, nativeToastControlA11y } from "./index";
@@ -514,35 +518,91 @@ function tokenVal(theme: ReturnType<typeof useTheme>, key: string): string {
   return typeof raw === "string" ? raw : "";
 }
 
-function ContrastProbe({ intent }: { intent: "accent" | "success" | "warning" | "error" }) {
-  const onSurface = useAccentOnSurface();
-  const theme = useTheme();
-  const paper = tokenVal(theme, "background") || tokenVal(theme, "color1");
-  const color11 = tokenVal(theme, "color11");
-  const fg =
-    intent === "accent"
-      ? onSurface.startsWith("$")
-        ? tokenVal(theme, onSurface.slice(1)) || onSurface
-        : onSurface
-      : color11;
+const TOAST_INTENTS = ["accent", "success", "warning", "error"] as const;
+const CONTRAST_SCHEMES = ["light", "dark"] as const;
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+/**
+ * The HOUSE config, not the stock one `renderWithProviders` mounts. The
+ * intent sub-themes the Toast wraps in (`light_warning`, ...) exist only
+ * there; under stock the wrap falls back to the base ramp and the arm
+ * certifies a pair the product never paints.
+ */
+function ContrastScheme({
+  scheme,
+  children,
+}: {
+  scheme: (typeof CONTRAST_SCHEMES)[number];
+  children: ReactNode;
+}) {
   return (
-    <>
-      <span data-testid="contrast-probe" data-fg={fg} data-bg={paper} />
-      <Toast
-        title="Archived"
-        intent={intent}
-        action={{ label: ACTION, onPress: () => {} }}
-        onDismiss={() => {}}
-      />
-    </>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{children}</YStack>
+    </TamaguiProvider>
   );
 }
 
-function measuredRatio(fg: string, bg: string): number {
-  const f = normalizeToHex(fg);
-  const b = normalizeToHex(bg);
-  if (!f || !b) return Number.NaN;
-  return contrastRatio(relativeLuminance(f), relativeLuminance(b));
+/**
+ * Accent toasts stay on the BASE theme and take their ink from
+ * `useAccentOnSurface()` -- a picked value, not a token the label can name in
+ * a class. Stamp it from inside the theme the Toast mounts in.
+ */
+function AccentInkProbe() {
+  const onSurface = useAccentOnSurface();
+  const theme = useTheme();
+  const ink = onSurface.startsWith("$")
+    ? tokenVal(theme, onSurface.slice(1)) || onSurface
+    : onSurface;
+  return <span data-testid="accent-ink" data-fg={ink} />;
+}
+
+/**
+ * The RESTING atom for a prefix. Tamagui spells state atoms `_o-0hover-1` /
+ * `_bg-0active-color5`, so a bare prefix read picks up hover paint and
+ * certifies a surface nobody rests on.
+ */
+function restAtom(node: Element, prefix: string): string | undefined {
+  for (const cls of Array.from(node.classList)) {
+    if (!cls.startsWith(prefix)) continue;
+    const value = cls.slice(prefix.length);
+    if (/^\d*(hover|active|focus|press|disabled)/.test(value)) continue;
+    return value;
+  }
+  return undefined;
+}
+
+/** `_o-0--9` is Tamagui's atom for 0.9; no resting atom means no rest dim. */
+function restOpacity(node: Element): number {
+  const atom = restAtom(node, "_o-");
+  if (atom === undefined) return 1;
+  const value = Number(atom.replaceAll("--", "."));
+  return Number.isFinite(value) ? value : 1;
+}
+
+/**
+ * The ink as PAINTED. An opacity on the press target multiplies the label
+ * toward the fill under it, so the token pair is not what a reader sees:
+ * MPO-128's warning action measures 4.66:1 as tokens and 3.88:1 as pixels.
+ */
+function paintedInk(ink: string, ground: string, alpha: number): string {
+  const f = normalizeToHex(ink);
+  const b = normalizeToHex(ground);
+  if (!f || !b) return ink;
+  if (alpha >= 1) return f;
+  const channel = (offset: number) =>
+    Math.round(
+      Number.parseInt(f.slice(offset, offset + 2), 16) * alpha +
+        Number.parseInt(b.slice(offset, offset + 2), 16) * (1 - alpha),
+    )
+      .toString(16)
+      .padStart(2, "0");
+  return `#${channel(1)}${channel(3)}${channel(5)}`;
 }
 
 describe("Toast overlay shadow (standalone === viewport)", () => {
@@ -694,28 +754,40 @@ describe("Toast action label weight and contrast (TEXT NODE)", () => {
     expect(screen.getByTestId("toast").contains(textNode)).toBe(true);
   });
 
-  it.each(["accent", "success", "warning", "error"] as const)(
-    "%s action label clears 4.5:1 vs its pill in light and dark",
+  it.each(TOAST_INTENTS)(
+    "%s action label clears the AA floor AS PAINTED, in light and dark",
     (intent) => {
-      for (const scheme of ["light", "dark"] as const) {
+      for (const scheme of CONTRAST_SCHEMES) {
         renderWithProviders(
-          <Theme name={scheme}>
-            <ContrastProbe intent={intent} />
-          </Theme>,
-        );
-        const probe = screen.getByTestId("contrast-probe");
-        const fg = probe.getAttribute("data-fg") ?? "";
-        const bg = probe.getAttribute("data-bg") ?? "";
-        const label = screen.getByText(ACTION);
-        const pill = label.parentElement as HTMLElement;
-        const labelColor = (label as HTMLElement).style.color;
-        const pillBg = (pill as HTMLElement).style.backgroundColor;
-        const fromProbe = measuredRatio(fg, bg);
-        const fromNodes = measuredRatio(labelColor || fg, pillBg || bg);
-        const ratio = Number.isFinite(fromNodes) ? fromNodes : fromProbe;
-        expect(ratio, `${scheme} ${intent} ${fg} on ${bg}`).toBeGreaterThanOrEqual(
-          aaTextContrastRatio,
+          <ContrastScheme scheme={scheme}>
+            <AccentInkProbe />
+            <Toast
+              title="Archived"
+              intent={intent}
+              action={{ label: ACTION, onPress: () => {} }}
+              onDismiss={() => {}}
+            />
+          </ContrastScheme>,
         );
+        // Non-accent intents ride their hue sub-theme; accent stays on base.
+        const theme = houseThemes[intent === "accent" ? scheme : `${scheme}_${intent}`];
+        const groundToken = restAtom(screen.getByTestId("toast"), "_bg-");
+        const inkToken = restAtom(screen.getByText(ACTION), "_col-");
+        const ground = theme?.[groundToken ?? ""] ?? "";
+        const ink =
+          intent === "accent"
+            ? (screen.getByTestId("accent-ink").getAttribute("data-fg") ?? "")
+            : (theme?.[inkToken ?? ""] ?? "");
+        const where = `${scheme} ${intent}: ${inkToken ?? "?"} on ${groundToken ?? "?"}`;
+        expect(ground, `${where} -- the toast frame paints no resting fill`).toBeTruthy();
+        expect(ink, `${where} -- the action label emits no resting ink`).toBeTruthy();
+        const alpha = restOpacity(screen.getByLabelText(ACTION));
+        const report = measureContrast({
+          foreground: paintedInk(ink, ground, alpha),
+          background: ground,
+          label: `${where} at rest opacity ${alpha}`,
+        });
+        expect(report.ratio, report.label).toBeGreaterThanOrEqual(aaTextContrastRatio);
         cleanup();
       }
     },

package/src/Toast/index.tsx

@@ -283,12 +283,14 @@ const ToastActionTarget = styled(View, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
-  opacity: 0.9,
+  // No REST dim. The label is $color11 — the lowest AA-safe step of the hue —
+  // sitting straight on the toast fill, so it carries no headroom for a
+  // multiplier: 0.9 composited every light intent under 4.5 (MPO-128). Hover
+  // and press read off the pill's own fill instead.
   outlineWidth: 0,
-  hoverStyle: { opacity: 1 },
   pressStyle: { opacity: 0.95 },
   focusStyle: { outlineWidth: 0 },
-  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
 });
 
 const ToastActionPill = styled(View, {