@multiplatform.one/components 7.8.0 → 7.11.0

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

@@ -0,0 +1,174 @@
+import type { TreeViewProps as PublicTreeViewProps } from "@multiplatform.one/components";
+import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
+
+const nodes: TreeNode[] = [
+  {
+    id: "folders",
+    label: "Folders",
+    children: [
+      {
+        id: "archive",
+        label: "Archive",
+        children: [{ id: "item", label: "Item" }],
+      },
+    ],
+  },
+  { id: "other", label: "Other", children: [{ id: "other-item", label: "Other item" }] },
+];
+
+afterEach(cleanup);
+
+describe("TreeView public expansion contract", () => {
+  it("exposes the agreed reveal request through TreeViewProps", () => {
+    expectTypeOf<PublicTreeViewProps>().toEqualTypeOf<TreeViewProps>();
+    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
+    >();
+  });
+
+  it("waits for controlled expansion to be accepted, overriding initial defaults", () => {
+    const change = vi.fn();
+    const toggle = vi.fn();
+    const props = {
+      nodes,
+      expandedIds: [],
+      defaultExpandedIds: ["folders"],
+      expandByDefault: true,
+      onExpandedIdsChange: change,
+      onNodeToggle: toggle,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} />);
+    expect(screen.queryByText("Archive")).toBeNull();
+    fireEvent.click(screen.getByText("Folders"));
+    expect(change).toHaveBeenCalledExactlyOnceWith(["folders"]);
+    expect(toggle).toHaveBeenCalledExactlyOnceWith(nodes[0]);
+    expect(screen.queryByText("Archive")).toBeNull();
+    rerender(<TreeView {...props} expandedIds={["folders"]} />);
+    expect(screen.getByText("Archive")).toBeInTheDocument();
+    expect(change).toHaveBeenCalledTimes(1);
+    rerender(<TreeView {...props} expandedIds={[]} />);
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps uncontrolled toggles and their new notification working", () => {
+    const change = vi.fn();
+    renderWithProviders(<TreeView nodes={nodes} onExpandedIdsChange={change} />);
+    fireEvent.click(screen.getByText("Folders"));
+    expect(screen.getByText("Archive")).toBeInTheDocument();
+    expect(change).toHaveBeenNthCalledWith(1, ["folders"]);
+    fireEvent.click(screen.getByText("Folders"));
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenNthCalledWith(2, []);
+  });
+
+  it("does not expand or select when only selectedId changes", async () => {
+    const change = vi.fn();
+    const select = vi.fn();
+    const { rerender } = renderWithProviders(
+      <TreeView nodes={nodes} onExpandedIdsChange={change} onNodeSelect={select} />,
+    );
+    rerender(
+      <TreeView
+        nodes={nodes}
+        selectedId="item"
+        onExpandedIdsChange={change}
+        onNodeSelect={select}
+      />,
+    );
+    await act(async () => {});
+    expect(screen.queryByText("Item")).toBeNull();
+    expect(change).not.toHaveBeenCalled();
+    expect(select).not.toHaveBeenCalled();
+  });
+});
+
+describe("TreeView reveal expansion", () => {
+  it("merges only ancestors, waits for acceptance, and leaves selection and focus alone", async () => {
+    const change = vi.fn();
+    const select = vi.fn();
+    const toggle = vi.fn();
+    const props = {
+      nodes,
+      expandedIds: ["other"],
+      selectedId: "item",
+      revealRequest: { id: "item", requestId: 1 },
+      onExpandedIdsChange: change,
+      onNodeSelect: select,
+      onNodeToggle: toggle,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} />);
+    await waitFor(() =>
+      expect(change).toHaveBeenCalledExactlyOnceWith(["other", "folders", "archive"]),
+    );
+    expect(screen.queryByText("Item")).toBeNull();
+    rerender(<TreeView {...props} expandedIds={["other"]} />);
+    await act(async () => {});
+    expect(change).toHaveBeenCalledTimes(1);
+    rerender(<TreeView {...props} expandedIds={["other", "folders", "archive"]} />);
+    expect(screen.getByText("Item").closest('[role="treeitem"]')).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("Other item")).toBeInTheDocument();
+    expect(select).not.toHaveBeenCalled();
+    expect(toggle).not.toHaveBeenCalled();
+    expect(screen.getByRole("tree")).not.toHaveFocus();
+  });
+
+  it("retains a request through missing data and expands after data arrives", async () => {
+    const change = vi.fn();
+    const props = {
+      revealRequest: { id: "item", requestId: 2 },
+      onExpandedIdsChange: change,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} nodes={[]} />);
+    await act(async () => {});
+    expect(change).not.toHaveBeenCalled();
+    rerender(<TreeView {...props} nodes={nodes} />);
+    await waitFor(() => expect(screen.getByText("Item")).toBeInTheDocument());
+    expect(change).toHaveBeenCalledExactlyOnceWith(["folders", "archive"]);
+  });
+
+  it("replaces a missing request before its old data arrives", async () => {
+    const change = vi.fn();
+    const { rerender } = renderWithProviders(
+      <TreeView
+        nodes={[]}
+        revealRequest={{ id: "item", requestId: 1 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    rerender(
+      <TreeView
+        nodes={[]}
+        revealRequest={{ id: "other-item", requestId: 2 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    rerender(
+      <TreeView
+        nodes={nodes}
+        revealRequest={{ id: "other-item", requestId: 2 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("Other item")).toBeInTheDocument());
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenCalledExactlyOnceWith(["other"]);
+  });
+});

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

@@ -0,0 +1,249 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Button } from "@multiplatform.one/forms";
+import { useRef, useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
+
+const folders: TreeNode[] = [
+  {
+    id: "folders",
+    label: "Folders",
+    children: [
+      {
+        id: "archive",
+        label: "Archive",
+        children: Array.from({ length: 500 }, (_, index) => ({
+          id: `item-${index}`,
+          label: `Item ${String(index).padStart(3, "0")}`,
+        })),
+      },
+    ],
+  },
+  { id: "other", label: "Other", children: [{ id: "other-item", label: "Other item" }] },
+];
+
+const meta: Meta<typeof TreeView> = {
+  title: "Components/TreeView",
+  component: TreeView,
+  args: { height: 240, ariaLabel: "Reveal fixture" },
+  parameters: { status: { type: "stable" } },
+};
+export default meta;
+type Story = StoryObj<typeof TreeView>;
+
+function RevealFixture(args: TreeViewProps) {
+  const [nodes, setNodes] = useState(folders);
+  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);
+  const sequence = useRef(0);
+  const reveal = (id: string) => {
+    setSelectedId(id);
+    setRevealRequest({ id, requestId: ++sequence.current });
+  };
+  return (
+    <YStack gap="$3" width="100%" maxWidth={700}>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={() => reveal("item-499")}>Reveal last item</Button>
+        <Button onPress={() => reveal("item-0")}>Reveal first item</Button>
+        <Button onPress={() => reveal("other-item")}>Reveal other item</Button>
+        <Button onPress={() => setSelectedId("item-499")}>Select only</Button>
+        <Button onPress={() => setExpandedIds(["other"])}>Collapse archive</Button>
+      </XStack>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={() => setNodes([])}>Remove data</Button>
+        <Button onPress={() => setNodes(folders)}>Deliver data</Button>
+        <Button onPress={() => setHidden((value) => !value)}>
+          {hidden ? "Show tree" : "Hide tree"}
+        </Button>
+        <Button onPress={() => setDeferExpansion((value) => !value)}>
+          {deferExpansion ? "Accept expansion immediately" : "Defer expansion"}
+        </Button>
+        {pendingExpansion && (
+          <Button
+            onPress={() => {
+              setExpandedIds(pendingExpansion);
+              setPendingExpansion(undefined);
+            }}
+          >
+            Accept pending expansion
+          </Button>
+        )}
+      </XStack>
+      <Text>500 variable-height items. Request: {revealRequest?.requestId ?? "none"}</Text>
+      <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}
+          nodes={nodes}
+          expandedIds={expandedIds}
+          onExpandedIdsChange={(ids) => {
+            if (deferExpansion) setPendingExpansion(ids);
+            else setExpandedIds(ids);
+          }}
+          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-", ""));
+            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 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} />,
+};

package/src/views/TreeView.scroll-index.spec.tsx

@@ -0,0 +1,246 @@
+import type { FlashListProps, FlashListRef } from "@shopify/flash-list";
+import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, expect, it, vi } from "vitest";
+import { TreeView } from "./TreeView";
+
+const observed = vi.hoisted(() => ({ list: null as FlashListRef<unknown> | null }));
+vi.mock("@shopify/flash-list", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@shopify/flash-list")>();
+  const React = await import("react");
+  return {
+    ...actual,
+    FlashList: React.forwardRef<FlashListRef<unknown>, FlashListProps<unknown>>((props, ref) => {
+      const captureRef = React.useCallback(
+        (list: FlashListRef<unknown> | null) => {
+          observed.list = list;
+          if (typeof ref === "function") ref(list);
+          else if (ref) ref.current = list;
+        },
+        [ref],
+      );
+      return React.createElement(actual.FlashList, { ...props, ref: captureRef });
+    }),
+  };
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+it("reports no preparatory index offset while the actual scroll transport is deferred", async () => {
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(320);
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(240);
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    right: 320,
+    bottom: 240,
+    width: 320,
+    height: 240,
+    toJSON: () => ({}),
+  });
+  const change = vi.fn();
+  renderWithProviders(
+    <TreeView
+      nodes={Array.from({ length: 100 }, (_, i) => ({ id: `row-${i}`, label: `Row ${i}` }))}
+      height={240}
+      onScrollOffsetChange={change}
+    />,
+  );
+  await waitFor(() => expect(observed.list?.getChildContainerDimensions().height).toBe(24000));
+  await waitFor(() => expect(change).toHaveBeenCalledWith(0));
+  expect(observed.list?.getWindowSize().height).toBe(240);
+  expect(observed.list?.getLayout(99)?.y).toBe(23760);
+  const native = observed.list!.getNativeScrollRef()!;
+  const transport = vi.spyOn(native, "scrollTo").mockImplementation(() => {});
+  const scroller = native.getScrollableNode();
+  const index = vi.spyOn(observed.list!, "scrollToIndex");
+  change.mockClear();
+  fireEvent.keyDown(screen.getByRole("tree"), { key: "End" });
+  expect(index).toHaveBeenCalledExactlyOnceWith({ index: 99, animated: true });
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 40));
+  });
+  expect(transport).toHaveBeenCalled();
+  expect(observed.list!.getAbsoluteLastScrollOffset()).toBeGreaterThan(0);
+  expect(scroller.scrollTop).toBe(0);
+  expect(change).not.toHaveBeenCalled();
+  await act(async () => {
+    await index.mock.results[0].value;
+  });
+  expect(change).not.toHaveBeenCalled();
+  fireEvent.scroll(scroller, { target: { scrollTop: 96.5 } });
+  await waitFor(() => expect(change).toHaveBeenCalledExactlyOnceWith(96.5));
+  change.mockClear();
+  fireEvent.keyDown(screen.getByRole("tree"), { key: "Home" });
+  expect(index).toHaveBeenLastCalledWith({ index: 0, animated: true });
+  await act(async () => {
+    await index.mock.results[1].value;
+  });
+  expect(change).not.toHaveBeenCalled();
+  fireEvent.scroll(scroller, { target: { scrollTop: 0 } });
+  await waitFor(() => expect(change).toHaveBeenCalledExactlyOnceWith(0));
+});
+
+it("positive control: actual scroll delivery reports the transported offset", async () => {
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(320);
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(240);
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    right: 320,
+    bottom: 240,
+    width: 320,
+    height: 240,
+    toJSON: () => ({}),
+  });
+  const change = vi.fn();
+  renderWithProviders(
+    <TreeView
+      nodes={Array.from({ length: 100 }, (_, i) => ({ id: `row-${i}`, label: `Row ${i}` }))}
+      height={240}
+      onScrollOffsetChange={change}
+    />,
+  );
+  await waitFor(() => expect(observed.list?.getChildContainerDimensions().height).toBe(24000));
+  await waitFor(() => expect(change).toHaveBeenCalledWith(0));
+  change.mockClear();
+  const native = observed.list!.getNativeScrollRef()!;
+  const scroller = native.getScrollableNode();
+  fireEvent.scroll(scroller, { target: { scrollTop: 96.5 } });
+  await waitFor(() => expect(change).toHaveBeenCalledWith(96.5));
+});
+
+function dimensions() {
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(320);
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(240);
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      let y = 0;
+      for (let ancestor = this.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        y -= ancestor.scrollTop;
+      }
+      return {
+        x: 0,
+        y,
+        top: y,
+        left: 0,
+        right: 320,
+        bottom: y + 240,
+        width: 320,
+        height: 240,
+        toJSON: () => ({}),
+      };
+    },
+  );
+}
+
+it.each([false, true])(
+  "acknowledges index-prepared reveal only after physical delivery (delivered: %s)",
+  async (delivered) => {
+    dimensions();
+    const nodes = Array.from({ length: 100 }, (_, i) => ({ id: `row-${i}`, label: `Row ${i}` }));
+    const change = vi.fn();
+    const complete = vi.fn();
+    const tree = renderWithProviders(
+      <TreeView
+        nodes={nodes}
+        height={240}
+        onScrollOffsetChange={change}
+        onRevealComplete={complete}
+      />,
+    );
+    await waitFor(() => expect(observed.list?.getChildContainerDimensions().height).toBe(24000));
+    await waitFor(() => expect(change).toHaveBeenCalledWith(0));
+    const native = observed.list!.getNativeScrollRef()!;
+    const transport = vi.spyOn(native, "scrollTo").mockImplementation(() => {});
+    const scroller = native.getScrollableNode();
+    const index = vi.spyOn(observed.list!, "scrollToIndex");
+    fireEvent.keyDown(screen.getByRole("tree"), { key: "End" });
+    await act(async () => {
+      await index.mock.results[0].value;
+    });
+    expect(transport).toHaveBeenCalled();
+    expect(scroller.scrollTop).toBe(0);
+    const offset = observed.list!.getAbsoluteLastScrollOffset();
+    const visible = observed.list!.computeVisibleIndices();
+    const id = `row-${visible.startIndex}`;
+    const layout = observed.list!.getLayout(visible.startIndex)!;
+    expect(offset).toBeGreaterThan(0);
+    expect(layout.isHeightMeasured).toBe(true);
+    expect(screen.queryByText(`Row ${visible.startIndex}`)).not.toBeNull();
+    if (delivered) {
+      fireEvent.scroll(scroller, { target: { scrollTop: offset } });
+      expect(scroller.scrollTop).toBe(offset);
+      await waitFor(() => expect(change).toHaveBeenCalledWith(offset));
+    }
+    transport.mockClear();
+    tree.rerender(
+      <TreeView
+        nodes={nodes}
+        height={240}
+        onScrollOffsetChange={change}
+        onRevealComplete={complete}
+        revealRequest={{ id, requestId: 71 }}
+      />,
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 60));
+    });
+    if (!delivered) {
+      expect(complete).not.toHaveBeenCalled();
+      expect(scroller.scrollTop).toBe(0);
+      expect(transport).toHaveBeenCalledWith({ x: 0, y: offset, animated: false });
+    } else {
+      expect(complete).toHaveBeenCalledExactlyOnceWith({ id, requestId: 71 });
+    }
+    fireEvent.scroll(scroller, { target: { scrollTop: offset } });
+    await waitFor(() => expect(complete).toHaveBeenCalledExactlyOnceWith({ id, requestId: 71 }));
+  },
+);
+
+it("reveals an observed keyboard destination without a retention callback", async () => {
+  dimensions();
+  const nodes = Array.from({ length: 100 }, (_, i) => ({ id: `row-${i}`, label: `Row ${i}` }));
+  const complete = vi.fn();
+  const tree = renderWithProviders(
+    <TreeView nodes={nodes} height={240} onRevealComplete={complete} />,
+  );
+  await waitFor(() => expect(observed.list?.getChildContainerDimensions().height).toBe(24000));
+  const list = observed.list!;
+  const native = list.getNativeScrollRef()!;
+  const transport = vi.spyOn(native, "scrollTo").mockImplementation(() => {});
+  const scroller = native.getScrollableNode();
+  const index = vi.spyOn(list, "scrollToIndex");
+  fireEvent.keyDown(screen.getByRole("tree"), { key: "End" });
+  await act(async () => {
+    await index.mock.results[0].value;
+  });
+  const target = list.computeVisibleIndices().endIndex;
+  const layout = list.getLayout(target)!;
+  const offset = layout.y + list.getFirstItemOffset();
+  expect(offset).toBeGreaterThan(list.getAbsoluteLastScrollOffset());
+  expect(layout.isHeightMeasured).toBe(true);
+  expect(screen.getByText(`Row ${target}`)).toBeTruthy();
+  fireEvent.scroll(scroller, { target: { scrollTop: offset } });
+  await waitFor(() => expect(list.getAbsoluteLastScrollOffset()).toBe(offset));
+  transport.mockClear();
+  const revealScroll = vi.spyOn(list, "scrollToOffset");
+  tree.rerender(
+    <TreeView
+      nodes={nodes}
+      height={240}
+      onRevealComplete={complete}
+      revealRequest={{ id: `row-${target}`, requestId: 72 }}
+    />,
+  );
+  await waitFor(() =>
+    expect(complete).toHaveBeenCalledExactlyOnceWith({ id: `row-${target}`, requestId: 72 }),
+  );
+  expect(revealScroll).not.toHaveBeenCalled();
+});