@assistant-ui/react 0.15.27 → 0.15.29

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

@@ -1,5 +1,5 @@
 /** @vitest-environment jsdom */
-import { act } from "react";
+import { act, version } from "react";
 import type { MouseEvent, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -12,6 +12,8 @@ import { useComposerCompactContextOptional } from "./ComposerCompactContext";
 import type { ComposerCompactContextValue } from "./ComposerCompactContext";
 import { ComposerPrimitiveRoot } from "./ComposerRoot";
 
+const onReact18 = version.startsWith("18.");
+
 type StoreState = {
   composer: {
     attachments: object[];
@@ -77,6 +79,24 @@ describe("ComposerPrimitiveRoot click-to-focus", () => {
     };
   };
 
+  it("forwards the inert attribute and removes it when disabled", () => {
+    const { container, rerender } = render(<ComposerPrimitiveRoot inert />);
+    const form = container.querySelector("form");
+
+    expect(form?.hasAttribute("inert")).toBe(true);
+
+    rerender(<ComposerPrimitiveRoot inert={false} />);
+    expect(form?.hasAttribute("inert")).toBe(false);
+  });
+
+  it.skipIf(!onReact18)("keeps a string inert on React 18", () => {
+    const { container } = render(
+      <ComposerPrimitiveRoot inert={"" as unknown as boolean} />,
+    );
+
+    expect(container.querySelector("form")?.hasAttribute("inert")).toBe(true);
+  });
+
   it("focuses the textarea when primary-button mousedown starts on blank form space", () => {
     const { blankSpace, textarea } = setupComposer();
 

package/src/primitives/composer/ComposerRoot.tsx

@@ -11,6 +11,7 @@ import {
   type MouseEvent,
   useMemo,
   useState,
+  version,
 } from "react";
 import { useComposerSend } from "./ComposerSend";
 import { ComposerCompactContext } from "./ComposerCompactContext";
@@ -56,6 +57,9 @@ export namespace ComposerPrimitiveRoot {
   };
 }
 
+// React 18 drops a boolean `inert`, so it receives the attribute's string form.
+const isReact18 = version.startsWith("18.");
+
 /**
  * The root form container for message composition.
  *
@@ -79,7 +83,7 @@ export namespace ComposerPrimitiveRoot {
 export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Element,
   ComposerPrimitiveRoot.Props
->(({ onSubmit, onMouseDown, compact, ...rest }, forwardedRef) => {
+>(({ onSubmit, onMouseDown, compact, inert, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const composerType = useAuiState((s) => s.composer.type);
 
@@ -95,6 +99,8 @@ export const ComposerPrimitiveRoot = forwardRef<
       : false,
   );
   const isCompact = stateAllowsCompact && !multiline;
+  const inertAttribute =
+    isReact18 && typeof inert === "boolean" ? (inert ? "" : undefined) : inert;
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
@@ -126,6 +132,7 @@ export const ComposerPrimitiveRoot = forwardRef<
     <ComposerCompactContext.Provider value={compact ? compactContext : null}>
       <Primitive.form
         {...rest}
+        inert={inertAttribute as boolean | undefined}
         data-aui-composer-type={composerType}
         data-compact={isCompact ? "" : undefined}
         ref={forwardedRef}