test: add React compatibility matrix (#563)

Author: mattrothenberg

.changeset/clean-radios-fail.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Add React 18 and React 19 compatibility checks for Kumo tests.

.github/workflows/preview.yml

@@ -40,7 +40,9 @@ jobs:
             });
 
             if (prs.length === 0) {
-              core.setFailed(`No open PR found for branch ${branch}`);
+              core.warning(`No open PR found for branch ${branch}; skipping PR-scoped preview steps.`);
+              core.setOutput('pr_number', '');
+              core.setOutput('is_fork', '');
               return;
             }
 

.github/workflows/pullrequest.yml

@@ -5,13 +5,6 @@ on:
     paths-ignore:
       - "*.md"
       - ".changeset/**"
-  # Also trigger on push to PR branches (for bots that push via API)
-  push:
-    branches:
-      - "opencode/**"
-    paths-ignore:
-      - "*.md"
-      - ".changeset/**"
 
 permissions:
   contents: read
@@ -107,3 +100,45 @@ jobs:
           name: kumo-ai
           path: packages/kumo/ai
       - run: pnpm --filter @cloudflare/kumo test
+
+  test-react-compatibility:
+    needs: build
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - react-version: "18.3.1"
+            types-react-version: "18.3.12"
+            types-react-dom-version: "18.3.1"
+          - react-version: "19.2.0"
+            types-react-version: "19.2.4"
+            types-react-dom-version: "19.2.3"
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - uses: ./.github/actions/install-dependencies
+      - name: Install React ${{ matrix.react-version }} test dependencies
+        run: |
+          pnpm pkg set \
+            "pnpm.overrides.react=${{ matrix.react-version }}" \
+            "pnpm.overrides.react-dom=${{ matrix.react-version }}" \
+            "pnpm.overrides.@types/react=${{ matrix.types-react-version }}" \
+            "pnpm.overrides.@types/react-dom=${{ matrix.types-react-dom-version }}"
+          pnpm install --no-frozen-lockfile --ignore-scripts --filter "@cloudflare/kumo..."
+      - uses: actions/download-artifact@v4
+        with:
+          name: kumo-dist
+          path: packages/kumo/dist
+      - uses: actions/download-artifact@v4
+        with:
+          name: kumo-ai
+          path: packages/kumo/ai
+      - name: Verify React test versions
+        run: |
+          pnpm --filter @cloudflare/kumo exec node -e "if (require('react/package.json').version !== '${{ matrix.react-version }}') process.exit(1)"
+          pnpm --filter @cloudflare/kumo exec node -e "if (require('react-dom/package.json').version !== '${{ matrix.react-version }}') process.exit(1)"
+      - run: pnpm --filter @cloudflare/kumo typecheck
+      - run: pnpm --filter @cloudflare/kumo test

packages/kumo/src/components/sidebar/sidebar.tsx

@@ -1736,7 +1736,7 @@ const SidebarCollapsibleContent = forwardRef<
       id={contentId}
       role="region"
       aria-hidden={!isOpen}
-      inert={!isOpen ? true : undefined}
+      inert={!isOpen ? ("true" as unknown as boolean) : undefined}
       data-open={isOpen || undefined}
       className={cn(
         "grid",
@@ -1886,7 +1886,7 @@ const SidebarSlidingView = forwardRef<HTMLDivElement, SidebarSlidingViewProps>(
         data-sidebar="sliding-view"
         data-value={value}
         aria-hidden={!isActive}
-        inert={!isActive ? true : undefined}
+        inert={!isActive ? ("true" as unknown as boolean) : undefined}
         className={cn(
           "flex w-full shrink-0 flex-col min-h-0",
           !isActive && "pointer-events-none",

packages/kumo/src/react-compat.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Autocomplete } from "./components/autocomplete";
+import { Combobox } from "./components/combobox";
+
+const countries = ["Argentina", "Brazil", "Canada"];
+const fruits = ["Apple", "Banana", "Cherry"];
+
+describe("React compatibility", () => {
+  it("renders Autocomplete and Combobox context providers with React 18-compatible syntax", () => {
+    render(
+      <>
+        <Autocomplete items={countries} label="Country" error="Required">
+          <Autocomplete.InputGroup placeholder="Search countries..." />
+          <Autocomplete.Content>
+            <Autocomplete.List>
+              {(item: string) => (
+                <Autocomplete.Item key={item} value={item}>
+                  {item}
+                </Autocomplete.Item>
+              )}
+            </Autocomplete.List>
+          </Autocomplete.Content>
+        </Autocomplete>
+        <Combobox items={fruits} label="Fruit" error="Required">
+          <Combobox.TriggerInput placeholder="Pick a fruit..." />
+          <Combobox.Content>
+            <Combobox.List>
+              {(item: string) => (
+                <Combobox.Item key={item} value={item}>
+                  {item}
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>
+      </>,
+    );
+
+    expect(screen.getByText("Country")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Search countries...")).toBeTruthy();
+    expect(screen.getByText("Fruit")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Pick a fruit...")).toBeTruthy();
+  });
+});

packages/kumo/src/react-html-attributes.d.ts

@@ -0,0 +1,7 @@
+import "react";
+
+declare module "react" {
+  interface HTMLAttributes<T> {
+    inert?: boolean | undefined;
+  }
+}