@assistant-ui/react 0.15.31 → 0.15.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.31",
+  "version": "0.15.32",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,16 +55,16 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.31",
+    "@assistant-ui/core": "^0.3.32",
     "@assistant-ui/store": "^0.3.22",
     "@assistant-ui/tap": "^0.9.24",
-    "assistant-cloud": "^0.2.8",
-    "assistant-stream": "^0.3.54",
+    "assistant-cloud": "^0.2.9",
+    "assistant-stream": "^0.3.55",
     "radix-ui": "^1.8.1",
     "react-textarea-autosize": "^8.5.9",
     "safe-content-frame": "^0.0.34",
     "zod": "^4.6.7",
-    "zustand": "^5.0.15"
+    "zustand": "^5.0.16"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -82,7 +82,7 @@
   },
   "devDependencies": {
     "@assistant-ui/vite": "0.0.21",
-    "@assistant-ui/x-buildutils": "0.0.31",
+    "@assistant-ui/x-buildutils": "0.0.32",
     "@assistant-ui/x-react18": "0.0.0",
     "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",

package/src/mcp-apps/McpAppRenderer.composer.test.tsx

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+import { act, render, waitFor } from "@testing-library/react";
+import { resource, useResource } from "@assistant-ui/tap";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  useExternalStoreRuntime,
+  type ToolCallMessagePartProps,
+} from "@assistant-ui/core/react";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import { expect, it, vi } from "vitest";
+import type { AssistantRuntime } from "../index";
+import type { McpAppBridgeHandlers, McpAppsHost } from "./types";
+
+const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
+
+vi.mock("./app-frame", () => ({
+  McpAppFrame: (props: unknown) => {
+    framePropsMock(props);
+    return null;
+  },
+}));
+
+import { McpAppRenderer } from "./McpAppRenderer";
+
+const Host = resource(({ host }: { host: McpAppsHost }) => host);
+
+const host: McpAppsHost = {
+  loadResource: vi.fn(async ({ uri }) => ({
+    uri,
+    mimeType: "text/html;profile=mcp-app" as const,
+    html: "",
+  })),
+  callTool: vi.fn(),
+  readResource: vi.fn(),
+  listResources: vi.fn(),
+};
+
+const part: ToolCallMessagePartProps = {
+  type: "tool-call",
+  toolCallId: "call-1",
+  toolName: "search",
+  args: {},
+  argsText: "{}",
+  status: { type: "complete" },
+  mcp: { app: { resourceUri: "ui://example/search" } },
+  addResult: vi.fn(),
+  resume: vi.fn(),
+  respondToApproval: vi.fn(),
+};
+
+const messages: ThreadMessageLike[] = [
+  { role: "assistant", content: "Here is the app" },
+];
+
+const AppPart = () => {
+  const renderer = useResource(McpAppRenderer({ host: Host({ host }) }));
+  const Renderer = renderer.render;
+  return <Renderer {...part} />;
+};
+
+let runtime!: AssistantRuntime;
+
+const App = () => {
+  runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message: ThreadMessageLike) => message,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <AppPart />
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const renderApp = async () => {
+  framePropsMock.mockClear();
+  render(<App />);
+  await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+  const handlers = framePropsMock.mock.lastCall?.[0]
+    .handlers as McpAppBridgeHandlers;
+  return handlers;
+};
+
+it("fills the thread composer from an MCP App message inside a message", async () => {
+  const handlers = await renderApp();
+
+  let result: unknown;
+  act(() => {
+    result = handlers.sendMessage?.({ text: "Open Grade 5 Math" });
+  });
+
+  expect(result).toEqual({ ok: true });
+  expect(runtime.thread.composer.getState().text).toBe("Open Grade 5 Math");
+});
+
+it("keeps the user's draft when an MCP App message arrives", async () => {
+  const handlers = await renderApp();
+  act(() => runtime.thread.composer.setText("Show my classes"));
+
+  act(() => {
+    handlers.sendMessage?.({ text: "Open Grade 5 Math" });
+  });
+
+  expect(runtime.thread.composer.getState().text).toBe(
+    "Show my classes Open Grade 5 Math",
+  );
+});

package/src/mcp-apps/McpAppRenderer.test.tsx

@@ -16,15 +16,22 @@ import type {
   McpAppsRemoteHostOptions,
 } from "./types";
 
-const { appendMock, framePropsMock } = vi.hoisted(() => ({
+const { appendMock, setTextMock, framePropsMock } = vi.hoisted(() => ({
   appendMock: vi.fn(),
+  setTextMock: vi.fn(),
   framePropsMock: vi.fn(),
 }));
 
 vi.mock("@assistant-ui/store", async (importOriginal) => ({
   ...(await importOriginal()),
   useAui: () => ({
-    thread: { append: appendMock },
+    thread: {
+      append: appendMock,
+      composer: () => ({
+        setText: setTextMock,
+        getState: () => ({ text: "" }),
+      }),
+    },
   }),
 }));
 
@@ -190,6 +197,7 @@ function RemoteHarness({
 describe("McpAppRenderer", () => {
   beforeEach(() => {
     appendMock.mockReset();
+    setTextMock.mockReset();
     framePropsMock.mockReset();
   });
 
@@ -676,7 +684,7 @@ describe("McpAppRenderer", () => {
     expect(listResources).toHaveBeenCalledWith(params);
   });
 
-  it("appends MCP Apps message content in the default sendMessage handler", async () => {
+  it("puts MCP Apps text content in the composer without appending", async () => {
     render(<Harness host={loadingHost()} />);
     await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
     const handlers = framePropsMock.mock.lastCall?.[0]
@@ -692,19 +700,13 @@ describe("McpAppRenderer", () => {
         ],
       }),
     ).toEqual({ ok: true });
-    expect(appendMock).toHaveBeenCalledWith({
-      content: [
-        { type: "text", text: "Open Grade 5 Math" },
-        { type: "text", text: "Period 4" },
-      ],
-    });
+    expect(setTextMock).toHaveBeenCalledWith("Open Grade 5 Math\nPeriod 4");
+    expect(appendMock).not.toHaveBeenCalled();
 
     expect(handlers.sendMessage?.({ text: "typed instead" })).toEqual({
       ok: true,
     });
-    expect(appendMock).toHaveBeenLastCalledWith({
-      content: [{ type: "text", text: "typed instead" }],
-    });
+    expect(setTextMock).toHaveBeenLastCalledWith("typed instead");
 
     expect(
       handlers.sendMessage?.({
@@ -722,7 +724,8 @@ describe("McpAppRenderer", () => {
       ok: false,
       reason: "unrecognised params shape",
     });
-    expect(appendMock).toHaveBeenCalledTimes(2);
+    expect(setTextMock).toHaveBeenCalledTimes(2);
+    expect(appendMock).not.toHaveBeenCalled();
   });
 
   it("extracts sparse message content without traversing holes", async () => {
@@ -755,9 +758,8 @@ describe("McpAppRenderer", () => {
     }
 
     expect(visitedHole).not.toHaveBeenCalled();
-    expect(appendMock).toHaveBeenCalledWith({
-      content: [{ type: "text", text: "sparse prompt" }],
-    });
+    expect(setTextMock).toHaveBeenCalledExactlyOnceWith("sparse prompt");
+    expect(appendMock).not.toHaveBeenCalled();
   });
 
   it("ignores non-index message content properties after structured clone", async () => {
@@ -781,13 +783,10 @@ describe("McpAppRenderer", () => {
       ).toEqual({ ok: true });
     }
 
-    expect(appendMock).toHaveBeenCalledTimes(2);
-    expect(appendMock).toHaveBeenNthCalledWith(1, {
-      content: [{ type: "text", text: "message text" }],
-    });
-    expect(appendMock).toHaveBeenNthCalledWith(2, {
-      content: [{ type: "text", text: "message text" }],
-    });
+    expect(setTextMock).toHaveBeenCalledTimes(2);
+    expect(setTextMock).toHaveBeenNthCalledWith(1, "message text");
+    expect(setTextMock).toHaveBeenNthCalledWith(2, "message text");
+    expect(appendMock).not.toHaveBeenCalled();
   });
 
   it("uses caller UI handlers and keeps data-plane handlers on the host", async () => {
@@ -838,6 +837,8 @@ describe("McpAppRenderer", () => {
     expect(updateModelContext).toHaveBeenCalledWith({ text: "context" });
     expect(openLink).toHaveBeenCalledWith({ url: "https://example.com" });
     expect(sendMessage).toHaveBeenCalledWith({ text: "hello" });
+    expect(setTextMock).not.toHaveBeenCalled();
+    expect(appendMock).not.toHaveBeenCalled();
     expect(onInitialized).toHaveBeenCalledOnce();
     expect(host.callTool).toHaveBeenCalledWith({ name: "search" });
     expect(host.readResource).toHaveBeenCalledWith({ uri: "ui://resource" });

package/src/mcp-apps/McpAppRenderer.tsx

@@ -277,7 +277,15 @@ function InlineRenderer({
           if ("reason" in result) {
             return { isError: true, ok: false, reason: result.reason };
           }
-          aui.thread.append({ content: result.content });
+          const composer = aui.thread.composer();
+          composer.setText(
+            [
+              composer.getState().text,
+              result.content.map((part) => part.text).join("\n"),
+            ]
+              .filter((part) => part.trim())
+              .join(" "),
+          );
           return { ok: true };
         }),
       callTool: (params) =>

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.test.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+import { createRef, type MouseEvent, type Ref } from "react";
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AuiProvider, useAui, useAuiState } from "@assistant-ui/store";
+import { ChainOfThoughtClient } from "@assistant-ui/core/store";
+import { ChainOfThoughtPrimitiveAccordionTrigger } from "./ChainOfThoughtAccordionTrigger";
+
+afterEach(cleanup);
+
+const Content = () => {
+  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+  return (
+    <div data-testid="reasoning" hidden={collapsed}>
+      Reasoning details
+    </div>
+  );
+};
+
+const App = ({
+  triggerRef,
+  ...props
+}: ChainOfThoughtPrimitiveAccordionTrigger.Props & {
+  triggerRef?: Ref<HTMLButtonElement>;
+}) => {
+  const aui = useAui({
+    chainOfThought: ChainOfThoughtClient({
+      parts: [
+        {
+          type: "reasoning",
+          text: "Reasoning details",
+          status: { type: "complete" },
+        },
+      ],
+      getMessagePart: () => {
+        throw new Error("Part lookup is not used by the toggle");
+      },
+    }),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <ChainOfThoughtPrimitiveAccordionTrigger {...props} ref={triggerRef} />
+      <Content />
+    </AuiProvider>
+  );
+};
+
+describe("ChainOfThoughtPrimitiveAccordionTrigger", () => {
+  it.each(["button", "render", "asChild"] as const)(
+    "exposes expansion and forwards the ref with %s",
+    async (mode) => {
+      const ref = createRef<HTMLButtonElement>();
+      const { getByRole, getByTestId } = render(
+        <App
+          triggerRef={ref}
+          {...(mode === "render" ? { render: <button /> } : {})}
+          {...(mode === "asChild" ? { asChild: true } : {})}
+        >
+          {mode === "asChild" ? <button>Thinking</button> : "Thinking"}
+        </App>,
+      );
+      const button = getByRole("button", { name: "Thinking" });
+      const content = getByTestId("reasoning");
+      expect(ref.current).toBe(button);
+      expect(content.hidden).toBe(true);
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+      fireEvent.click(button);
+      await waitFor(() => expect(content.hidden).toBe(false));
+      expect(button.getAttribute("aria-expanded")).toBe("true");
+      fireEvent.click(button);
+      await waitFor(() => expect(content.hidden).toBe(true));
+      expect(button.getAttribute("aria-expanded")).toBe("false");
+    },
+  );
+
+  it("lets the caller veto expansion", () => {
+    const onClick = vi.fn((event: MouseEvent) => event.preventDefault());
+    const { getByRole, getByTestId } = render(
+      <App onClick={onClick}>Thinking</App>,
+    );
+    fireEvent.click(getByRole("button"));
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(getByTestId("reasoning").hidden).toBe(true);
+  });
+
+  it("does not expand a disabled trigger", () => {
+    const { getByRole, getByTestId } = render(<App disabled>Thinking</App>);
+    fireEvent.click(getByRole("button"));
+    expect(getByTestId("reasoning").hidden).toBe(true);
+  });
+});

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { ActionButtonElement } from "../../utils/createActionButton";
+import { type ComponentPropsWithoutRef, forwardRef, useCallback } from "react";
+import { useAuiState, useAui } from "@assistant-ui/store";
+import { composeEventHandlers } from "radix-ui/internal";
+import { Primitive } from "../../utils/Primitive";
+
+export namespace ChainOfThoughtPrimitiveAccordionTrigger {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ChainOfThoughtPrimitive.AccordionTrigger component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+/**
+ * A button component that toggles the collapsed state of the chain of thought accordion.
+ *
+ * This component automatically handles the toggle functionality, expanding or collapsing
+ * the chain of thought parts when clicked.
+ * Exposes the current disclosure state through `aria-expanded`.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThoughtPrimitive.AccordionTrigger>
+ *   Toggle Reasoning
+ * </ChainOfThoughtPrimitive.AccordionTrigger>
+ * ```
+ */
+export const ChainOfThoughtPrimitiveAccordionTrigger = forwardRef<
+  ChainOfThoughtPrimitiveAccordionTrigger.Element,
+  ChainOfThoughtPrimitiveAccordionTrigger.Props
+>(({ onClick, ...props }, ref) => {
+  const aui = useAui();
+  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+  const toggle = useCallback(() => {
+    aui.chainOfThought.setCollapsed(!collapsed);
+  }, [aui, collapsed]);
+
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={ref}
+      aria-expanded={!collapsed}
+      onClick={composeEventHandlers(onClick, toggle)}
+    />
+  );
+});
+
+ChainOfThoughtPrimitiveAccordionTrigger.displayName =
+  "ChainOfThoughtPrimitive.AccordionTrigger";

package/src/primitives/reasoning/useScrollLock.test.tsx

@@ -31,9 +31,29 @@ function stubWidths(
 function lockWithin(container: HTMLElement) {
   const animated = document.createElement("div");
   container.appendChild(animated);
+  return createLock(animated).lock;
+}
+
+function createLock(animated: HTMLElement) {
   const ref = { current: animated };
-  const { result } = renderHook(() => useScrollLock(ref, 200));
-  return result.current;
+  const { result, unmount } = renderHook(() => useScrollLock(ref, 200));
+  return { lock: result.current, dispose: unmount };
+}
+
+function createSharedScroller() {
+  const scroller = document.createElement("div");
+  scroller.style.overflowY = "auto";
+  scroller.style.borderWidth = "0px";
+  scroller.style.paddingRight = "4px";
+  document.body.appendChild(scroller);
+  Object.defineProperty(scroller, "offsetWidth", { value: 306 });
+  Object.defineProperty(scroller, "clientWidth", {
+    get: () => (scroller.style.scrollbarWidth === "none" ? 306 : 300),
+  });
+  const first = document.createElement("div");
+  const second = document.createElement("div");
+  scroller.append(first, second);
+  return { scroller, first: createLock(first), second: createLock(second) };
 }
 
 describe("useScrollLock", () => {
@@ -115,6 +135,55 @@ describe("useScrollLock", () => {
     expect(scroller.style.scrollbarWidth).toBe("");
   });
 
+  it("keeps overlapping animations locked until the last one finishes", () => {
+    vi.useFakeTimers();
+    const { scroller, first, second } = createSharedScroller();
+    scroller.scrollTop = 120;
+
+    first.lock();
+    vi.advanceTimersByTime(100);
+    second.lock();
+    expect(scroller.style.paddingRight).toBe("10px");
+
+    vi.advanceTimersByTime(100);
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    expect(scroller.style.paddingRight).toBe("10px");
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(120);
+
+    vi.advanceTimersByTime(100);
+    expect(scroller.style.scrollbarWidth).toBe("");
+    expect(scroller.style.paddingRight).toBe("4px");
+    scroller.scrollTop = 90;
+    scroller.dispatchEvent(new Event("scroll"));
+    expect(scroller.scrollTop).toBe(90);
+  });
+
+  it.each(["first", "second"] as const)(
+    "preserves a restarted shared lock when the %s owner is disposed first",
+    (disposedFirst) => {
+      vi.useFakeTimers();
+      const shared = createSharedScroller();
+      const { scroller, first, second } = shared;
+      first.lock();
+      second.lock();
+      vi.advanceTimersByTime(100);
+      first.lock();
+
+      shared[disposedFirst].dispose();
+      expect(scroller.style.scrollbarWidth).toBe("none");
+      expect(scroller.style.paddingRight).toBe("10px");
+
+      shared[disposedFirst === "first" ? "second" : "first"].dispose();
+      expect(scroller.style.scrollbarWidth).toBe("");
+      expect(scroller.style.paddingRight).toBe("4px");
+      scroller.style.scrollbarWidth = "thin";
+      vi.advanceTimersByTime(200);
+      expect(scroller.style.scrollbarWidth).toBe("thin");
+    },
+  );
+
   it("leaves the padding alone when no scrollbar takes space", () => {
     const scroller = document.createElement("div");
     scroller.style.overflowY = "auto";

package/src/primitives/reasoning/useScrollLock.ts

@@ -12,6 +12,74 @@ const findScrollableAncestor = (element: HTMLElement | null) => {
   return null;
 };
 
+const scrollLocks = new WeakMap<
+  HTMLElement,
+  { count: number; restore: () => void }
+>();
+
+const acquireScrollLock = (scrollContainer: HTMLElement) => {
+  const existing = scrollLocks.get(scrollContainer);
+  if (existing) {
+    existing.count++;
+    return existing;
+  }
+
+  const scrollPosition = scrollContainer.scrollTop;
+  const scrollbarWidth = scrollContainer.style.scrollbarWidth;
+
+  // Hiding the scrollbar collapses its gutter on classic scrollbars, which
+  // shifts centered content horizontally; compensate with padding on the
+  // side the scrollbar occupies (the left side in RTL).
+  const computed = getComputedStyle(scrollContainer);
+  const paddingSide =
+    computed.direction === "rtl" ? "paddingLeft" : "paddingRight";
+  const previousPadding = scrollContainer.style[paddingSide];
+  const elementScrollbarSize =
+    scrollContainer.offsetWidth -
+    scrollContainer.clientWidth -
+    parseFloat(computed.borderLeftWidth) -
+    parseFloat(computed.borderRightWidth);
+  // A root element's offsetWidth already excludes the viewport scrollbar, so
+  // the element formula reports zero once the scroll propagates to the
+  // viewport, and only then does the viewport measure apply. A body that
+  // scrolls in its own right is measured by the element formula like any
+  // other scroller, whether or not the viewport is scrolling too.
+  const ownerDocument = scrollContainer.ownerDocument;
+  const isRootScroller =
+    scrollContainer === ownerDocument.documentElement ||
+    scrollContainer === ownerDocument.body;
+  const scrollbarSize =
+    isRootScroller && elementScrollbarSize <= 0
+      ? (ownerDocument.defaultView?.innerWidth ?? 0) -
+        ownerDocument.documentElement.clientWidth
+      : elementScrollbarSize;
+
+  scrollContainer.style.scrollbarWidth = "none";
+  if (scrollbarSize > 0) {
+    scrollContainer.style[paddingSide] = `${
+      parseFloat(computed[paddingSide]) + scrollbarSize
+    }px`;
+  }
+
+  const restoreStyles = () => {
+    scrollContainer.style.scrollbarWidth = scrollbarWidth;
+    scrollContainer.style[paddingSide] = previousPadding;
+  };
+
+  const resetPosition = () => (scrollContainer.scrollTop = scrollPosition);
+  scrollContainer.addEventListener("scroll", resetPosition);
+
+  const lock = {
+    count: 1,
+    restore: () => {
+      scrollContainer.removeEventListener("scroll", resetPosition);
+      restoreStyles();
+    },
+  };
+  scrollLocks.set(scrollContainer, lock);
+  return lock;
+};
+
 /**
  * Locks scroll position during collapsible/height animations and hides scrollbar.
  *
@@ -59,61 +127,20 @@ export const useScrollLock = <T extends HTMLElement = HTMLElement>(
       return;
     }
 
-    const scrollPosition = scrollContainer.scrollTop;
-    const scrollbarWidth = scrollContainer.style.scrollbarWidth;
-
-    // Hiding the scrollbar collapses its gutter on classic scrollbars, which
-    // shifts centered content horizontally; compensate with padding on the
-    // side the scrollbar occupies (the left side in RTL).
-    const computed = getComputedStyle(scrollContainer);
-    const paddingSide =
-      computed.direction === "rtl" ? "paddingLeft" : "paddingRight";
-    const previousPadding = scrollContainer.style[paddingSide];
-    const elementScrollbarSize =
-      scrollContainer.offsetWidth -
-      scrollContainer.clientWidth -
-      parseFloat(computed.borderLeftWidth) -
-      parseFloat(computed.borderRightWidth);
-    // A root element's offsetWidth already excludes the viewport scrollbar, so
-    // the element formula reports zero once the scroll propagates to the
-    // viewport, and only then does the viewport measure apply. A body that
-    // scrolls in its own right is measured by the element formula like any
-    // other scroller, whether or not the viewport is scrolling too.
-    const ownerDocument = scrollContainer.ownerDocument;
-    const isRootScroller =
-      scrollContainer === ownerDocument.documentElement ||
-      scrollContainer === ownerDocument.body;
-    const scrollbarSize =
-      isRootScroller && elementScrollbarSize <= 0
-        ? (ownerDocument.defaultView?.innerWidth ?? 0) -
-          ownerDocument.documentElement.clientWidth
-        : elementScrollbarSize;
-
-    scrollContainer.style.scrollbarWidth = "none";
-    if (scrollbarSize > 0) {
-      scrollContainer.style[paddingSide] = `${
-        parseFloat(computed[paddingSide]) + scrollbarSize
-      }px`;
-    }
-
-    const restoreStyles = () => {
-      scrollContainer.style.scrollbarWidth = scrollbarWidth;
-      scrollContainer.style[paddingSide] = previousPadding;
-    };
+    const lock = acquireScrollLock(scrollContainer);
 
-    const resetPosition = () => (scrollContainer.scrollTop = scrollPosition);
-    scrollContainer.addEventListener("scroll", resetPosition);
-
-    const timeoutId = setTimeout(() => {
-      scrollContainer.removeEventListener("scroll", resetPosition);
-      restoreStyles();
-      cleanupRef.current = null;
-    }, animationDuration);
+    const timeoutId = setTimeout(
+      () => cleanupRef.current?.(),
+      animationDuration,
+    );
 
     cleanupRef.current = () => {
       clearTimeout(timeoutId);
-      scrollContainer.removeEventListener("scroll", resetPosition);
-      restoreStyles();
+      if (--lock.count === 0) {
+        lock.restore();
+        scrollLocks.delete(scrollContainer);
+      }
+      cleanupRef.current = null;
     };
   }, [animationDuration, animatedElementRef]);
 

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -51,7 +51,10 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         const triggers = getItems()
           .map((item) => item.ref.current)
-          .filter((node): node is HTMLButtonElement => node !== null);
+          .filter(
+            (node): node is HTMLButtonElement =>
+              node !== null && !node.disabled,
+          );
         const next =
           triggers[
             triggers.indexOf(trigger) + (event.key === "ArrowDown" ? 1 : -1)