@assistant-ui/react 0.12.28 → 0.14.2

package/src/primitives/composer/ComposerInput.test.tsx

@@ -0,0 +1,280 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+
+const setText = vi.fn<(text: string) => void>();
+const setCursorPosition = vi.fn<(pos: number) => void>();
+
+const composerState = {
+  isEditing: true,
+  text: "",
+  type: "thread" as const,
+  isEmpty: true,
+  canCancel: false,
+  dictation: undefined as undefined | { inputDisabled: boolean },
+};
+
+const threadState = {
+  isDisabled: false,
+  isRunning: false,
+  capabilities: { queue: false, attachments: false },
+};
+
+const plugin = {
+  handleKeyDown: () => false,
+  setCursorPosition,
+};
+
+let pluginRegistry: { getPlugins: () => (typeof plugin)[] } | null = null;
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("@assistant-ui/store", () => {
+  const aui = {
+    composer: () => ({
+      setText,
+      getState: () => composerState,
+      cancel: () => {},
+      send: () => {},
+      addAttachment: async () => {},
+    }),
+    thread: () => ({
+      getState: () => threadState,
+    }),
+    on: () => () => {},
+  };
+  type Selector<T> = (s: {
+    composer: typeof composerState;
+    thread: typeof threadState;
+  }) => T;
+  return {
+    useAui: () => aui,
+    useAuiState: <T,>(selector: Selector<T>) =>
+      selector({ composer: composerState, thread: threadState }),
+  };
+});
+
+vi.mock("@assistant-ui/tap", () => ({
+  flushResourcesSync: (fn: () => void) => fn(),
+}));
+
+vi.mock("./ComposerInputPluginContext", () => ({
+  useComposerInputPluginRegistryOptional: () => pluginRegistry,
+}));
+
+let activeAria: {
+  popoverId: string;
+  highlightedItemId: string | undefined;
+} | null = null;
+
+vi.mock("./trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverActiveAriaOptional: () => activeAria,
+}));
+
+vi.mock("@radix-ui/react-use-escape-keydown", () => ({
+  useEscapeKeydown: () => {},
+}));
+
+vi.mock("../../utils/hooks/useOnScrollToBottom", () => ({
+  useOnScrollToBottom: () => {},
+}));
+
+const setNativeValue = (textarea: HTMLTextAreaElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(textarea, value);
+};
+
+const fireInput = (
+  textarea: HTMLTextAreaElement,
+  value: string,
+  isComposing: boolean,
+) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new InputEvent("input", { bubbles: true, isComposing }),
+  );
+};
+
+const fireCompositionStart = (textarea: HTMLTextAreaElement) => {
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionstart", { bubbles: true }),
+  );
+};
+
+const fireCompositionEnd = (textarea: HTMLTextAreaElement, value: string) => {
+  setNativeValue(textarea, value);
+  textarea.dispatchEvent(
+    new CompositionEvent("compositionend", { bubbles: true }),
+  );
+};
+
+describe("ComposerPrimitiveInput", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    setText.mockReset();
+    setCursorPosition.mockReset();
+    composerState.isEditing = true;
+    composerState.text = "";
+    composerState.isEmpty = true;
+    composerState.dictation = undefined;
+    threadState.isDisabled = false;
+    threadState.isRunning = false;
+    threadState.capabilities = { queue: false, attachments: false };
+    pluginRegistry = null;
+    activeAria = null;
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  const mount = async () => {
+    await act(async () => {
+      root.render(<ComposerPrimitiveInput data-testid="input" />);
+    });
+    const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    return textarea;
+  };
+
+  it("syncs setText during active composition so React 19 cannot reset the textarea", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+
+    await act(async () => {
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("commits the final value on compositionend", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "가", true);
+    });
+    expect(setText).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).toHaveBeenCalledTimes(2);
+    expect(setText).toHaveBeenLastCalledWith("가");
+  });
+
+  it("recovers when compositionend is dropped before the next input", async () => {
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "hello", false);
+    });
+    expect(setText).toHaveBeenCalledWith("hello");
+
+    await act(async () => {
+      fireInput(textarea, "hello!", false);
+    });
+    expect(setText).toHaveBeenLastCalledWith("hello!");
+  });
+
+  it("skips plugin cursor tracking during composition but resumes after", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireCompositionStart(textarea);
+      fireInput(textarea, "ㄱ", true);
+    });
+    expect(setText).toHaveBeenCalledWith("ㄱ");
+    expect(setCursorPosition).not.toHaveBeenCalled();
+
+    await act(async () => {
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("tracks plugin cursor for non-composition input", async () => {
+    pluginRegistry = { getPlugins: () => [plugin] };
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+    });
+    expect(setText).toHaveBeenCalledWith("abc");
+    expect(setCursorPosition).toHaveBeenCalled();
+  });
+
+  it("ignores input and compositionend when the composer is not editing", async () => {
+    composerState.isEditing = false;
+    const textarea = await mount();
+
+    await act(async () => {
+      fireInput(textarea, "abc", false);
+      fireCompositionStart(textarea);
+      fireCompositionEnd(textarea, "가");
+    });
+    expect(setText).not.toHaveBeenCalled();
+  });
+
+  it("does not apply ARIA combobox attributes when no trigger popover is open", async () => {
+    activeAria = null;
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBeNull();
+    expect(textarea.getAttribute("aria-expanded")).toBeNull();
+    expect(textarea.getAttribute("aria-haspopup")).toBeNull();
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
+
+  it("applies ARIA combobox attributes when a trigger popover is open", async () => {
+    activeAria = {
+      popoverId: "popover-1",
+      highlightedItemId: "popover-1-option-foo",
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBe(
+      "popover-1-option-foo",
+    );
+  });
+
+  it("omits aria-activedescendant when no item is highlighted", async () => {
+    activeAria = {
+      popoverId: "popover-1",
+      highlightedItemId: undefined,
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
+});

package/src/primitives/composer/ComposerInput.tsx

@@ -23,6 +23,7 @@ import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useAuiState, useAui } from "@assistant-ui/store";
 import { flushResourcesSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
+import { useTriggerPopoverActiveAriaOptional } from "./trigger/TriggerPopoverRootContext";
 
 export namespace ComposerPrimitiveInput {
   export type Element = HTMLTextAreaElement;
@@ -100,6 +101,12 @@ export namespace ComposerPrimitiveInput {
  * keyboard shortcuts, file paste support, and intelligent focus management.
  * It integrates with the composer context to manage message state and submission.
  *
+ * When rendered inside `Unstable_TriggerPopoverRoot` and a popover is open, the
+ * underlying `<textarea>` automatically receives `aria-controls`,
+ * `aria-expanded`, `aria-haspopup`, and `aria-activedescendant` for the
+ * combobox relationship. These computed attributes override user-provided
+ * values for those four ARIA props while the popover is open.
+ *
  * @example
  * ```tsx
  * // Ctrl/Cmd+Enter to submit (plain Enter inserts newline)
@@ -142,6 +149,7 @@ export const ComposerPrimitiveInput = forwardRef<
   ) => {
     const aui = useAui();
     const pluginRegistry = useComposerInputPluginRegistryOptional();
+    const activeAria = useTriggerPopoverActiveAriaOptional();
 
     const effectiveSubmitMode =
       submitMode ?? (submitOnEnter === false ? "none" : "enter");
@@ -197,13 +205,13 @@ export const ComposerPrimitiveInput = forwardRef<
         const threadState = aui.thread().getState();
         const hasQueue = threadState.capabilities.queue;
 
-        // Steer hotkey: Cmd/Ctrl+Shift+Enter (respects submitMode="none" and isEmpty)
+        // Steer hotkey: Cmd/Ctrl+Shift+Enter (respects submitMode="none" and canSend)
         if (
           e.shiftKey &&
           (e.ctrlKey || e.metaKey) &&
           hasQueue &&
           effectiveSubmitMode !== "none" &&
-          !aui.composer().getState().isEmpty
+          aui.composer().getState().canSend
         ) {
           e.preventDefault();
           aui.composer().send({ steer: true });
@@ -287,23 +295,38 @@ export const ComposerPrimitiveInput = forwardRef<
       return aui.on("threadListItem.switchedTo", focus);
     }, [unstable_focusOnThreadSwitched, focus, aui]);
 
+    const ariaComboboxProps = activeAria
+      ? {
+          "aria-controls": activeAria.popoverId,
+          "aria-expanded": true as const,
+          "aria-haspopup": "listbox" as const,
+          "aria-activedescendant": activeAria.highlightedItemId,
+        }
+      : {};
+
     const inputProps = {
       name: "input" as const,
       value,
       ...rest,
+      ...ariaComboboxProps,
       ref: ref as React.ForwardedRef<HTMLTextAreaElement>,
       disabled: isDisabled,
       onChange: composeEventHandlers(
         onChange,
         (e: React.ChangeEvent<HTMLTextAreaElement>) => {
           if (!aui.composer().getState().isEditing) return;
-          const isComposing =
-            (e.nativeEvent as { isComposing?: boolean }).isComposing === true ||
-            compositionRef.current;
-          if (isComposing) return;
+          const nativeIsComposing =
+            (e.nativeEvent as { isComposing?: boolean }).isComposing === true;
+          // recover stuck compositionRef when the browser drops compositionend
+          if (compositionRef.current && !nativeIsComposing) {
+            compositionRef.current = false;
+          }
+          const isComposing = nativeIsComposing || compositionRef.current;
+          // keep controlled value in sync mid-IME so react does not reset the textarea to a stale value
           flushResourcesSync(() => {
             aui.composer().setText(e.target.value);
           });
+          if (isComposing) return;
           const pos = e.target.selectionStart ?? e.target.value.length;
           if (pluginRegistry) {
             for (const plugin of pluginRegistry.getPlugins()) {

package/src/primitives/composer/trigger/TriggerPopover.tsx

@@ -23,7 +23,10 @@ import {
   type TriggerPopoverResourceOutput,
 } from "./TriggerPopoverResource";
 import type { TriggerBehavior } from "./triggerSelectionResource";
-import { useTriggerPopoverRootContext } from "./TriggerPopoverRootContext";
+import {
+  useTriggerPopoverAriaPublish,
+  useTriggerPopoverRootContext,
+} from "./TriggerPopoverRootContext";
 
 const TriggerPopoverScopeContext =
   createContext<TriggerPopoverResourceOutput | null>(null);
@@ -179,6 +182,23 @@ export const ComposerPrimitiveTriggerPopover = forwardRef<
 
     const open = behavior !== null && resource.open;
 
+    const aria = useTriggerPopoverAriaPublish();
+
+    useEffect(() => {
+      if (!open) return undefined;
+      return () => {
+        aria.setActiveAria(char, null);
+      };
+    }, [aria, char, open]);
+
+    useEffect(() => {
+      if (!open) return;
+      aria.setActiveAria(char, {
+        popoverId,
+        highlightedItemId: resource.highlightedItemId,
+      });
+    }, [aria, char, popoverId, open, resource.highlightedItemId]);
+
     return (
       <TriggerBehaviorRegistrationContext.Provider value={registration}>
         <TriggerPopoverScopeContext.Provider value={resource}>

package/src/primitives/composer/trigger/TriggerPopoverRootContext.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type FC } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  ComposerPrimitiveTriggerPopoverRoot,
+  type TriggerPopoverActiveAria,
+  useTriggerPopoverActiveAriaOptional,
+  useTriggerPopoverAriaPublish,
+} from "./TriggerPopoverRootContext";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+type PublishHandle = ReturnType<typeof useTriggerPopoverAriaPublish>;
+
+describe("TriggerPopoverRootContext active ARIA", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const renderWithRoot = async () => {
+    const publishRef = { current: null as PublishHandle | null };
+    const ariaRef = { current: null as TriggerPopoverActiveAria | null };
+
+    const Probe: FC = () => {
+      publishRef.current = useTriggerPopoverAriaPublish();
+      ariaRef.current = useTriggerPopoverActiveAriaOptional();
+      return null;
+    };
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveTriggerPopoverRoot>
+          <Probe />
+        </ComposerPrimitiveTriggerPopoverRoot>,
+      );
+    });
+
+    return {
+      publish: () => publishRef.current as PublishHandle,
+      aria: () => ariaRef.current,
+    };
+  };
+
+  it("returns null initially inside a root", async () => {
+    const { aria } = await renderWithRoot();
+    expect(aria()).toBeNull();
+  });
+
+  it("publishes a descriptor and surfaces it via the hook", async () => {
+    const { publish, aria } = await renderWithRoot();
+
+    await act(async () => {
+      publish().setActiveAria("@", {
+        popoverId: "popover-mention",
+        highlightedItemId: "popover-mention-option-a",
+      });
+    });
+
+    expect(aria()).toEqual({
+      popoverId: "popover-mention",
+      highlightedItemId: "popover-mention-option-a",
+    });
+  });
+
+  it("clears the descriptor when the owning char releases it", async () => {
+    const { publish, aria } = await renderWithRoot();
+
+    await act(async () => {
+      publish().setActiveAria("@", {
+        popoverId: "popover-mention",
+        highlightedItemId: undefined,
+      });
+    });
+    expect(aria()).not.toBeNull();
+
+    await act(async () => {
+      publish().setActiveAria("@", null);
+    });
+    expect(aria()).toBeNull();
+  });
+
+  it("ignores a clear call from a non-owning char", async () => {
+    const { publish, aria } = await renderWithRoot();
+
+    await act(async () => {
+      publish().setActiveAria("@", {
+        popoverId: "popover-mention",
+        highlightedItemId: undefined,
+      });
+    });
+
+    await act(async () => {
+      publish().setActiveAria("/", null);
+    });
+
+    expect(aria()).toEqual({
+      popoverId: "popover-mention",
+      highlightedItemId: undefined,
+    });
+  });
+
+  it("replaces the descriptor when a different char takes over", async () => {
+    const { publish, aria } = await renderWithRoot();
+
+    await act(async () => {
+      publish().setActiveAria("@", {
+        popoverId: "popover-mention",
+        highlightedItemId: "popover-mention-option-a",
+      });
+    });
+    await act(async () => {
+      publish().setActiveAria("/", {
+        popoverId: "popover-slash",
+        highlightedItemId: "popover-slash-option-x",
+      });
+    });
+
+    expect(aria()).toEqual({
+      popoverId: "popover-slash",
+      highlightedItemId: "popover-slash-option-x",
+    });
+  });
+
+  it("returns null when the consumer is rendered outside a root", async () => {
+    const ariaRef = { current: null as TriggerPopoverActiveAria | null };
+    const Solo: FC = () => {
+      ariaRef.current = useTriggerPopoverActiveAriaOptional();
+      return null;
+    };
+
+    await act(async () => {
+      root.render(<Solo />);
+    });
+
+    expect(ariaRef.current).toBeNull();
+  });
+});