@multiplatform.one/components 7.10.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
@@ -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/layouts/tags.tsx

@@ -20,6 +20,7 @@ import {
   XStack,
   YStack,
   isWeb,
+  type InputProps,
   type YStackProps,
 } from "tamagui";
 import {
@@ -622,7 +623,7 @@ export function Tags({
           // sat off the chips' optical line.
           fontSize={chipTextSize(chipSize)}
           color={componentColors.text.primary}
-          placeholderTextColor={knobProps.textAccentColor as any}
+          placeholderTextColor={knobProps.textAccentColor as InputProps["placeholderTextColor"]}
           autoComplete="off"
           role="combobox"
           aria-autocomplete="list"

package/src/views/TreeView.reveal.spec.tsx

@@ -27,6 +27,13 @@ describe("TreeView public expansion contract", () => {
     expectTypeOf<TreeViewProps["revealRequest"]>().toEqualTypeOf<
       { id: string; requestId: number } | undefined
     >();
+    expectTypeOf<TreeViewProps["onRevealComplete"]>().toEqualTypeOf<
+      ((request: { id: string; requestId: number }) => void) | undefined
+    >();
+    expectTypeOf<TreeViewProps["initialScrollOffset"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<TreeViewProps["onScrollOffsetChange"]>().toEqualTypeOf<
+      ((offset: number) => void) | undefined
+    >();
     expectTypeOf<TreeViewProps["expandedIds"]>().toEqualTypeOf<string[] | undefined>();
     expectTypeOf<TreeViewProps["onExpandedIdsChange"]>().toEqualTypeOf<
       ((ids: string[]) => void) | undefined

package/src/views/TreeView.reveal.stories.tsx

@@ -36,6 +36,10 @@ function RevealFixture(args: TreeViewProps) {
   const [expandedIds, setExpandedIds] = useState<string[]>(["other"]);
   const [selectedId, setSelectedId] = useState<string>();
   const [revealRequest, setRevealRequest] = useState<TreeViewProps["revealRequest"]>();
+  const [completion, setCompletion] = useState<{
+    request: NonNullable<TreeViewProps["revealRequest"]>;
+    count: number;
+  }>();
   const [deferExpansion, setDeferExpansion] = useState(false);
   const [pendingExpansion, setPendingExpansion] = useState<string[]>();
   const [hidden, setHidden] = useState(false);
@@ -77,6 +81,11 @@ function RevealFixture(args: TreeViewProps) {
       <Text>
         Target: {revealRequest?.id ?? "none"}. Expanded: {expandedIds.join(", ")}
       </Text>
+      <Text>
+        Measured completion:{" "}
+        {completion ? `${completion.request.id} (${completion.request.requestId})` : "none"}.
+        Callback count: {completion?.count ?? 0}
+      </Text>
       <YStack display={hidden ? "none" : "flex"}>
         <TreeView
           {...args}
@@ -88,6 +97,10 @@ function RevealFixture(args: TreeViewProps) {
           }}
           selectedId={selectedId}
           revealRequest={revealRequest}
+          onRevealComplete={(request) => {
+            setCompletion((previous) => ({ request, count: (previous?.count ?? 0) + 1 }));
+            args.onRevealComplete?.(request);
+          }}
           onNodeSelect={(node) => setSelectedId(node.id)}
           renderNode={(node) => {
             const index = Number(node.id.replace("item-", ""));
@@ -113,3 +126,124 @@ export const ControlledReveal: Story = {
   name: "Controlled reveal with 500 variable-height items",
   render: (args) => <RevealFixture {...args} />,
 };
+
+function RetainedScrollFixture(args: TreeViewProps) {
+  const [mounted, setMounted] = useState(true);
+  const [generation, setGeneration] = useState(0);
+  const [nodes, setNodes] = useState(folders);
+  const [hidden, setHidden] = useState(false);
+  const [taller, setTaller] = useState(false);
+  const [savedOffset, setSavedOffset] = useState<number>();
+  const [observations, setObservations] = useState(0);
+  const [expandedIds, setExpandedIds] = useState(["folders", "archive", "other"]);
+  const [revealRequest, setRevealRequest] = useState<TreeViewProps["revealRequest"]>();
+  const [completion, setCompletion] = useState<string>();
+  const sequence = useRef(0);
+  const revealLast = () => setRevealRequest({ id: "item-499", requestId: ++sequence.current });
+  return (
+    <YStack gap="$3" width="100%" maxWidth={700}>
+      <Text>
+        Scroll manually, unmount, then mount. The observed offset and expansion survive outside the
+        tree. Remount with delayed data or a hidden host to check deferred restoration.
+      </Text>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={() => setMounted((value) => !value)}>
+          {mounted ? "Unmount tree" : "Mount tree"}
+        </Button>
+        <Button
+          onPress={() => {
+            setNodes([]);
+            setMounted(true);
+            setGeneration((value) => value + 1);
+          }}
+        >
+          Remount without data
+        </Button>
+        <Button onPress={() => setNodes(folders)}>Deliver data</Button>
+        <Button
+          onPress={() => {
+            setHidden(true);
+            setMounted(true);
+            setGeneration((value) => value + 1);
+          }}
+        >
+          Remount hidden
+        </Button>
+        <Button onPress={() => setHidden((value) => !value)}>
+          {hidden ? "Show tree" : "Hide tree"}
+        </Button>
+      </XStack>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={revealLast}>Reveal last item</Button>
+        <Button
+          onPress={() => {
+            revealLast();
+            setMounted(true);
+            setGeneration((value) => value + 1);
+          }}
+        >
+          Remount with reveal
+        </Button>
+        <Button onPress={() => setTaller((value) => !value)}>
+          {taller ? "Use configured height" : "Double viewport height"}
+        </Button>
+      </XStack>
+      <Text>
+        Retained observed offset: {savedOffset ?? "none"}. Observations: {observations}.
+      </Text>
+      <Text>
+        Initial fallback: {args.initialScrollOffset ?? "none"}. Mounted: {String(mounted)}.
+      </Text>
+      <Text>
+        Pending reveal: {revealRequest?.requestId ?? "none"}. Measured completion:{" "}
+        {completion ?? "none"}.
+      </Text>
+      <YStack display={hidden ? "none" : "flex"}>
+        {mounted && (
+          <TreeView
+            {...args}
+            key={generation}
+            nodes={nodes}
+            height={taller ? (args.height ?? 240) * 2 : args.height}
+            expandedIds={expandedIds}
+            onExpandedIdsChange={setExpandedIds}
+            initialScrollOffset={savedOffset ?? args.initialScrollOffset}
+            onScrollOffsetChange={(offset) => {
+              setSavedOffset(offset);
+              setObservations((value) => value + 1);
+              args.onScrollOffsetChange?.(offset);
+            }}
+            revealRequest={revealRequest}
+            onRevealComplete={(request) => {
+              setCompletion(`${request.id} (${request.requestId})`);
+              setRevealRequest((pending) =>
+                pending?.requestId === request.requestId ? undefined : pending,
+              );
+              args.onRevealComplete?.(request);
+            }}
+            renderNode={(node) => {
+              const index = Number(node.id.replace("item-", ""));
+              return (
+                <YStack
+                  minHeight={Number.isFinite(index) && index % 2 ? 80 : 32}
+                  justifyContent="center"
+                >
+                  <Text>{node.label}</Text>
+                  {Number.isFinite(index) && index % 2 === 1 && (
+                    <Text fontSize="$2">Additional detail</Text>
+                  )}
+                </YStack>
+              );
+            }}
+          />
+        )}
+      </YStack>
+    </YStack>
+  );
+}
+
+export const RetainedScroll: Story = {
+  name: "Retained scroll across unmount and delayed layout",
+  args: { initialScrollOffset: 640.5, ariaLabel: "Retained scroll fixture" },
+  render: (args) => <RetainedScrollFixture {...args} />,
+};