@assistant-ui/react 0.12.21 → 0.12.23

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useAuiState } from "@assistant-ui/store";
 

package/src/primitives/thread/ThreadRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 
 export namespace ThreadPrimitiveRoot {

package/src/primitives/thread/ThreadViewport.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,

package/src/primitives/threadList/ThreadListNew.tsx

@@ -5,7 +5,7 @@ import {
   ActionButtonProps,
 } from "../../utils/createActionButton";
 import { forwardRef } from "react";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useAuiState } from "@assistant-ui/store";
 import { useThreadListNew as useThreadListNewBehavior } from "@assistant-ui/core/react";

package/src/primitives/threadList/ThreadListRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useAuiState } from "@assistant-ui/store";
 

package/src/utils/Primitive.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Primitive } from "./Primitive";
+
+const ALL_NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul",
+] as const;
+
+// Void elements cannot have children
+const VOID_ELEMENTS = new Set(["img", "input"]);
+
+describe("Primitive", () => {
+  describe.each(ALL_NODES)("Primitive.%s", (node) => {
+    const Comp = Primitive[node];
+
+    it("renders the correct HTML tag", () => {
+      const html = VOID_ELEMENTS.has(node)
+        ? renderToStaticMarkup(<Comp />)
+        : renderToStaticMarkup(<Comp>content</Comp>);
+
+      expect(html).toMatch(new RegExp(`^<${node}[\\s/>]`));
+    });
+
+    it("renders the render element instead of the default tag", () => {
+      // Use <i> as render target — it won't collide with any Primitive node name
+      const html = VOID_ELEMENTS.has(node)
+        ? renderToStaticMarkup(<Comp render={<i data-test="yes" />} />)
+        : renderToStaticMarkup(
+            <Comp render={<i data-test="yes" />}>content</Comp>,
+          );
+
+      expect(html).toContain("<i");
+      expect(html).toContain('data-test="yes"');
+      expect(html).not.toMatch(new RegExp(`<${node}[\\s>]`));
+    });
+
+    if (!VOID_ELEMENTS.has(node)) {
+      it("render produces same markup as asChild", () => {
+        const renderHtml = renderToStaticMarkup(
+          <Comp render={<i className="child" />} className="parent">
+            text
+          </Comp>,
+        );
+
+        const asChildHtml = renderToStaticMarkup(
+          <Comp asChild className="parent">
+            <i className="child">text</i>
+          </Comp>,
+        );
+
+        expect(renderHtml).toBe(asChildHtml);
+      });
+    }
+  });
+
+  describe("render prop edge cases", () => {
+    it("uses render element's own children as fallback", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.span render={<em>Fallback</em>} />,
+      );
+      expect(html).toBe("<em>Fallback</em>");
+    });
+
+    it("outer children override render element's children", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.span render={<em>Original</em>}>Override</Primitive.span>,
+      );
+      expect(html).toBe("<em>Override</em>");
+    });
+
+    it("passes multiple children into the render element", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.div render={<section />}>
+          <p>A</p>
+          <p>B</p>
+        </Primitive.div>,
+      );
+      expect(html).toContain("<section");
+      expect(html).toContain("<p>A</p>");
+      expect(html).toContain("<p>B</p>");
+    });
+  });
+});

package/src/utils/Primitive.tsx

@@ -0,0 +1,100 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  type ForwardRefExoticComponent,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+} from "react";
+import { Primitive as RadixPrimitive } from "@radix-ui/react-primitive";
+
+/**
+ * Thin wrapper around `@radix-ui/react-primitive` that adds `render` prop support.
+ *
+ * When `render` is provided, it is converted to the equivalent `asChild` pattern:
+ *   render={<Comp props />} + children  →  asChild + <Comp props>{children}</Comp>
+ *
+ * All prop merging, ref composition, and event handler chaining remain handled
+ * by Radix's battle-tested Slot implementation — we add zero custom logic for that.
+ */
+
+// Match @radix-ui/react-primitive's full element set
+const NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul",
+] as const;
+type PrimitiveNode = (typeof NODES)[number];
+
+type PrimitiveProps<E extends PrimitiveNode> = ComponentPropsWithoutRef<
+  (typeof RadixPrimitive)[E]
+> & {
+  render?: ReactElement | undefined;
+};
+
+type PrimitiveRef<E extends PrimitiveNode> = ComponentRef<
+  (typeof RadixPrimitive)[E]
+>;
+
+function createPrimitive<E extends PrimitiveNode>(node: E) {
+  const RadixComp = RadixPrimitive[node];
+
+  const Component = forwardRef<PrimitiveRef<E>, PrimitiveProps<E>>(
+    ({ render, asChild, children, ...props }, ref) => {
+      if (render && isValidElement(render)) {
+        // render={<Comp p />} + children
+        //   → asChild + <Comp p>{children}</Comp>
+        const renderChildren =
+          children !== undefined
+            ? children
+            : ((render.props as Record<string, unknown>).children as ReactNode);
+        return (
+          <RadixComp asChild {...(props as any)} ref={ref}>
+            {cloneElement(render, undefined, renderChildren)}
+          </RadixComp>
+        );
+      }
+
+      return (
+        <RadixComp asChild={asChild} {...(props as any)} ref={ref}>
+          {children}
+        </RadixComp>
+      );
+    },
+  );
+
+  Component.displayName = `Primitive.${node}`;
+  return Component as ForwardRefExoticComponent<
+    PrimitiveProps<E> & RefAttributes<PrimitiveRef<E>>
+  >;
+}
+
+const Primitive = NODES.reduce(
+  (acc, node) => {
+    acc[node] = createPrimitive(node);
+    return acc;
+  },
+  {} as {
+    [K in PrimitiveNode]: ReturnType<typeof createPrimitive<K>>;
+  },
+);
+
+export { Primitive };
+export type { PrimitiveProps };

package/src/utils/createActionButton.tsx

@@ -4,7 +4,7 @@ import {
   ComponentPropsWithoutRef,
   MouseEventHandler,
 } from "react";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "./Primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
 type ActionButtonCallback<TProps> = (