@primitiv-ui/react 0.1.0

package/src/Collapsible/__tests__/Collapsible.asChild.test.tsx

@@ -0,0 +1,240 @@
+import { useRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Collapsible } from "../Collapsible";
+
+describe("Collapsible asChild and keyboard tests", () => {
+  it("should render the child element (not a button) when Trigger uses asChild", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+
+    // Assert — rendered element is the anchor; no wrapping button
+    expect(trigger.tagName).toBe("A");
+    expect(trigger).toHaveAttribute("href", "#anchor");
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("should merge ARIA attributes from Trigger onto the child element", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-controls", content.id);
+    expect(trigger).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should compose onClick: child handler runs alongside the internal toggle", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const childOnClick = vi.fn();
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger" onClick={childOnClick}>
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(trigger);
+
+    // Assert — both ran, content is now open
+    expect(childOnClick).toHaveBeenCalledTimes(1);
+    expect(content).toBeVisible();
+  });
+
+  it("should toggle on Enter when asChild renders a non-button element", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+    const content = screen.getByTestId("content");
+
+    // Act
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(content).toBeVisible();
+  });
+
+  it("should toggle on Space when asChild renders a non-button element", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+    const content = screen.getByTestId("content");
+
+    // Act
+    trigger.focus();
+    await user.keyboard(" ");
+
+    // Assert
+    expect(content).toBeVisible();
+  });
+
+  it("should NOT toggle on Enter or Space when disabled (asChild)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+    const content = screen.getByTestId("content");
+
+    // Act
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    await user.keyboard(" ");
+
+    // Assert
+    expect(content).not.toBeVisible();
+  });
+
+  it("should auto-inject role='button' when asChild is combined with disabled", () => {
+    // Arrange — aria-disabled on a non-button element has no defined ARIA
+    // semantics; role="button" makes the attribute meaningful for AT.
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+
+    // Assert
+    expect(trigger).toHaveAttribute("role", "button");
+    expect(trigger).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should NOT inject role='button' when asChild without disabled", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger asChild>
+          <a href="#anchor" data-testid="trigger">
+            Toggle
+          </a>
+        </Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByTestId("trigger");
+
+    // Assert — no role override means the anchor stays a link
+    expect(trigger).not.toHaveAttribute("role");
+  });
+
+  it("should forward a consumer-supplied ref to the asChild element", () => {
+    // Arrange
+    function TestHarness() {
+      const ref = useRef<HTMLAnchorElement>(null);
+      return (
+        <>
+          <button onClick={() => ref.current?.setAttribute("data-touched", "yes")}>
+            Touch
+          </button>
+          <Collapsible.Root>
+            <Collapsible.Trigger<HTMLAnchorElement> asChild ref={ref}>
+              <a href="#anchor" data-testid="trigger">
+                Toggle
+              </a>
+            </Collapsible.Trigger>
+            <Collapsible.Content>Content</Collapsible.Content>
+          </Collapsible.Root>
+        </>
+      );
+    }
+    render(<TestHarness />);
+    const touch = screen.getByRole("button", { name: "Touch" });
+    const trigger = screen.getByTestId("trigger");
+
+    // Act
+    touch.click();
+
+    // Assert
+    expect(trigger).toHaveAttribute("data-touched", "yes");
+  });
+
+  it("should forward a consumer-supplied ref to the default <button> when asChild is not used", () => {
+    // Arrange
+    function TestHarness() {
+      const ref = useRef<HTMLButtonElement>(null);
+      return (
+        <>
+          <button onClick={() => ref.current?.setAttribute("data-touched", "yes")}>
+            Touch
+          </button>
+          <Collapsible.Root>
+            <Collapsible.Trigger ref={ref}>Toggle</Collapsible.Trigger>
+            <Collapsible.Content>Content</Collapsible.Content>
+          </Collapsible.Root>
+        </>
+      );
+    }
+    render(<TestHarness />);
+    const touch = screen.getByRole("button", { name: "Touch" });
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert
+    touch.click();
+    expect(trigger).toHaveAttribute("data-touched", "yes");
+  });
+});

package/src/Collapsible/__tests__/Collapsible.basic-rendering.test.tsx

@@ -0,0 +1,118 @@
+import { render, screen } from "@testing-library/react";
+
+import { Collapsible } from "../Collapsible";
+
+describe("Collapsible basic rendering tests", () => {
+  it("should render Collapsible.Root as a div with data-state='closed' by default", () => {
+    // Arrange
+    render(<Collapsible.Root data-testid="test-collapsible" />);
+    const root = screen.getByTestId("test-collapsible");
+
+    // Assert
+    expect(root.tagName).toBe("DIV");
+    expect(root).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should render Collapsible.Trigger as a button with type='button'", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert
+    expect(trigger.tagName).toBe("BUTTON");
+    expect(trigger).toHaveAttribute("type", "button");
+  });
+
+  it("should give Collapsible.Trigger aria-expanded='false' by default", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should wire aria-controls on Trigger to the id of Content", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-controls", content.id);
+    expect(content.id).not.toBe("");
+  });
+
+  it("should hide Content when closed", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).not.toBeVisible();
+  });
+
+  it("should set data-state='closed' on Trigger when closed", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should set data-state='closed' on Content when closed", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should forward arbitrary HTML attributes to the rendered Root div", () => {
+    // Arrange
+    render(
+      <Collapsible.Root
+        data-testid="test-collapsible"
+        className="custom"
+        aria-label="custom label"
+      />,
+    );
+    const root = screen.getByTestId("test-collapsible");
+
+    // Assert
+    expect(root).toHaveClass("custom");
+    expect(root).toHaveAttribute("aria-label", "custom label");
+  });
+});

package/src/Collapsible/__tests__/Collapsible.controlled-state.test.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Collapsible } from "../Collapsible";
+
+describe("Collapsible controlled state tests", () => {
+  it("should render Content visible when controlled open is true", () => {
+    // Arrange
+    render(
+      <Collapsible.Root open onOpenChange={() => {}}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).toBeVisible();
+  });
+
+  it("should render Content hidden when controlled open is false", () => {
+    // Arrange
+    render(
+      <Collapsible.Root open={false} onOpenChange={() => {}}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).not.toBeVisible();
+  });
+
+  it("should call onOpenChange with the next open value when Trigger is clicked in controlled mode", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Collapsible.Root open={false} onOpenChange={onOpenChange}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("should NOT internally update state in controlled mode — content visibility tracks the open prop only", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Collapsible.Root open={false} onOpenChange={onOpenChange}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(trigger);
+
+    // Assert — parent has not flipped open, so content stays hidden
+    expect(content).not.toBeVisible();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should reflect parent-driven open prop changes in DOM state", async () => {
+    // Arrange
+    function TestHarness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>External open</button>
+          <Collapsible.Root open={open} onOpenChange={setOpen}>
+            <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+            <Collapsible.Content data-testid="content">
+              Content
+            </Collapsible.Content>
+          </Collapsible.Root>
+        </>
+      );
+    }
+    const user = userEvent.setup();
+    render(<TestHarness />);
+    const externalButton = screen.getByRole("button", { name: "External open" });
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).not.toBeVisible();
+
+    // Act
+    await user.click(externalButton);
+
+    // Assert
+    expect(content).toBeVisible();
+  });
+
+  it("should fire onOpenChange in uncontrolled mode when Trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Collapsible.Root onOpenChange={onOpenChange}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    // Act — second toggle
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledTimes(2);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+  });
+});

package/src/Collapsible/__tests__/Collapsible.disabled.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Collapsible } from "../Collapsible";
+
+describe("Collapsible disabled tests", () => {
+  it("should set aria-disabled='true' and data-disabled='true' on Trigger when Root is disabled", () => {
+    // Arrange
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-disabled", "true");
+    expect(trigger).toHaveAttribute("data-disabled", "true");
+  });
+
+  it("should NOT set aria-disabled when Root is not disabled", () => {
+    // Arrange
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Assert — Trigger renders the literal string "false" so consumers can
+    // hook on [data-disabled="false"] if they want; aria-disabled is only
+    // set when actually disabled.
+    expect(trigger).not.toHaveAttribute("aria-disabled");
+    expect(trigger).toHaveAttribute("data-disabled", "false");
+  });
+
+  it("should set data-disabled='true' on Root and Content when disabled", () => {
+    // Arrange
+    render(
+      <Collapsible.Root disabled data-testid="test-collapsible">
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const root = screen.getByTestId("test-collapsible");
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(root).toHaveAttribute("data-disabled", "true");
+    expect(content).toHaveAttribute("data-disabled", "true");
+  });
+
+  it("should remain focusable when disabled (aria-disabled, not native disabled)", () => {
+    // Arrange
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Act
+    trigger.focus();
+
+    // Assert
+    expect(trigger).toHaveFocus();
+    expect(trigger).not.toHaveAttribute("disabled");
+  });
+
+  it("should NOT toggle when a disabled Trigger is clicked (uncontrolled)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(content).not.toBeVisible();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should NOT fire onOpenChange when a disabled Trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Collapsible.Root disabled onOpenChange={onOpenChange}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("should NOT call the consumer's onClick when a disabled Trigger is clicked", async () => {
+    // Arrange — matches Accordion's behaviour: a disabled Trigger short-
+    // circuits the click handler entirely (no toggle, no consumer onClick),
+    // since aria-disabled means the control is inoperative.
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Collapsible.Root disabled>
+        <Collapsible.Trigger onClick={onClick}>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Toggle" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});

package/src/Collapsible/__tests__/Collapsible.error-handling.test.tsx

@@ -0,0 +1,40 @@
+import { render } from "@testing-library/react";
+
+import { Collapsible } from "../Collapsible";
+
+describe("Collapsible error handling tests", () => {
+  beforeEach(() => {
+    // Suppress React's noisy uncaught-error logging while we deliberately
+    // render sub-components outside their Root.
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should throw when Collapsible.Trigger is rendered without a Collapsible.Root", () => {
+    // Assert
+    expect(() =>
+      render(<Collapsible.Trigger>Toggle</Collapsible.Trigger>),
+    ).toThrow(/Collapsible\.Root/);
+  });
+
+  it("should throw when Collapsible.Content is rendered without a Collapsible.Root", () => {
+    // Assert
+    expect(() =>
+      render(<Collapsible.Content>Content</Collapsible.Content>),
+    ).toThrow(/Collapsible\.Root/);
+  });
+
+  it("should throw when Collapsible.TriggerIcon is rendered without a Collapsible.Root", () => {
+    // Assert
+    expect(() =>
+      render(
+        <Collapsible.TriggerIcon>
+          <svg />
+        </Collapsible.TriggerIcon>,
+      ),
+    ).toThrow(/Collapsible\.Root/);
+  });
+});