@primitiv-ui/react 0.1.37 → 0.1.39

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

@@ -1,134 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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/);
-  });
-});

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

@@ -1,111 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Collapsible } from "../Collapsible";
-
-describe("Collapsible forceMount tests", () => {
-  it("should NOT set the hidden attribute on Content when forceMount is true and the panel is closed", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content forceMount data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert
-    expect(content).not.toHaveAttribute("hidden");
-  });
-
-  it("should keep Content present in the DOM when forceMount is true and the panel is closed", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content forceMount data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert — element exists, just visually hidden via CSS
-    expect(content).toBeInTheDocument();
-    expect(content).toHaveAttribute("data-state", "closed");
-  });
-
-  it("should set aria-hidden='true' on closed Content when forceMount is true", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content forceMount data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert
-    expect(content).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("should remove aria-hidden when Content opens under forceMount", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content forceMount 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.toHaveAttribute("aria-hidden");
-    expect(content).toHaveAttribute("data-state", "open");
-  });
-
-  it("should let consumers override the auto aria-hidden via an explicit aria-hidden prop", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content
-          forceMount
-          aria-hidden={false}
-          data-testid="content"
-        >
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert — explicit consumer prop wins because rest is spread after
-    expect(content).toHaveAttribute("aria-hidden", "false");
-  });
-
-  it("should still apply hidden by default (without forceMount) 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("hidden");
-  });
-});

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

@@ -1,93 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Collapsible } from "../Collapsible";
-
-describe("Collapsible TriggerIcon tests", () => {
-  it("should wrap children in a span with aria-hidden='true'", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>
-          Toggle
-          <Collapsible.TriggerIcon data-testid="icon">
-            <svg viewBox="0 0 24 24">
-              <path d="M6 9l6 6 6-6" />
-            </svg>
-          </Collapsible.TriggerIcon>
-        </Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const icon = screen.getByTestId("icon");
-
-    // Assert
-    expect(icon.tagName).toBe("SPAN");
-    expect(icon).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("should expose data-state='closed' on the wrapper when collapsed", () => {
-    // Arrange
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>
-          Toggle
-          <Collapsible.TriggerIcon data-testid="icon">
-            <svg viewBox="0 0 24 24" />
-          </Collapsible.TriggerIcon>
-        </Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const icon = screen.getByTestId("icon");
-
-    // Assert
-    expect(icon).toHaveAttribute("data-state", "closed");
-  });
-
-  it("should flip data-state to 'open' when the panel opens", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>
-          Toggle
-          <Collapsible.TriggerIcon data-testid="icon">
-            <svg viewBox="0 0 24 24" />
-          </Collapsible.TriggerIcon>
-        </Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const trigger = screen.getByRole("button", { name: /Toggle/ });
-    const icon = screen.getByTestId("icon");
-
-    // Act
-    await user.click(trigger);
-
-    // Assert
-    expect(icon).toHaveAttribute("data-state", "open");
-  });
-
-  it("should hide its child icon from the accessibility tree even if the icon component sets its own aria attributes", () => {
-    // Arrange — the wrapping <span aria-hidden="true"> is the source of
-    // truth, so a third-party icon component that emits its own ARIA
-    // surface can't leak it to AT.
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>
-          Toggle
-          <Collapsible.TriggerIcon>
-            <span aria-label="chevron">v</span>
-          </Collapsible.TriggerIcon>
-        </Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-
-    // Assert — only the trigger's accessible name is "Toggle"; the icon
-    // is hidden from the AT tree by the wrapping span.
-    const trigger = screen.getByRole("button", { name: "Toggle" });
-    expect(trigger).toBeInTheDocument();
-  });
-});

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

@@ -1,125 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Collapsible } from "../Collapsible";
-
-describe("Collapsible uncontrolled state tests", () => {
-  it("should render Content visible when defaultOpen is true", () => {
-    // Arrange
-    render(
-      <Collapsible.Root defaultOpen>
-        <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 set data-state='open' on Root, Trigger, and Content when defaultOpen is true", () => {
-    // Arrange
-    render(
-      <Collapsible.Root defaultOpen 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 trigger = screen.getByRole("button", { name: "Toggle" });
-    const content = screen.getByTestId("content");
-
-    // Assert
-    expect(root).toHaveAttribute("data-state", "open");
-    expect(trigger).toHaveAttribute("data-state", "open");
-    expect(content).toHaveAttribute("data-state", "open");
-  });
-
-  it("should set aria-expanded='true' on Trigger when defaultOpen is true", () => {
-    // Arrange
-    render(
-      <Collapsible.Root defaultOpen>
-        <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", "true");
-  });
-
-  it("should toggle Content visibility when Trigger is clicked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    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 — closed initially
-    expect(content).not.toBeVisible();
-
-    // Act — open
-    await user.click(trigger);
-
-    // Assert — open after first click
-    expect(content).toBeVisible();
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    // Act — close
-    await user.click(trigger);
-
-    // Assert — closed after second click
-    expect(content).not.toBeVisible();
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should start closed when defaultOpen is omitted and toggle on click", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    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 — closed by default
-    expect(content).not.toBeVisible();
-
-    // Act
-    await user.click(trigger);
-
-    // Assert
-    expect(content).toBeVisible();
-  });
-
-  it("should call the consumer's onClick handler on Trigger in addition to toggling", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger onClick={onClick}>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(onClick).toHaveBeenCalledTimes(1);
-    expect(content).toBeVisible();
-  });
-});

package/src/Collapsible/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useCollapsibleRoot } from "./useCollapsibleRoot";
-export { useCollapsibleTrigger } from "./useCollapsibleTrigger";

package/src/Collapsible/hooks/useCollapsibleRoot.ts

@@ -1,34 +0,0 @@
-import { useCallback, useId, useMemo } from "react";
-
-import { useControllableState } from "../../hooks/index.ts";
-
-export function useCollapsibleRoot(
-  controlledOpen: boolean | undefined,
-  defaultOpen: boolean,
-  onOpenChange: ((open: boolean) => void) | undefined,
-  disabled: boolean,
-) {
-  const collapsibleId = useId();
-  const [open, setOpen] = useControllableState<boolean>(
-    controlledOpen,
-    defaultOpen,
-    onOpenChange,
-  );
-
-  const toggle = useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-
-  const contextValue = useMemo(
-    () => ({
-      open,
-      disabled,
-      toggle,
-      triggerId: `${collapsibleId}-trigger`,
-      contentId: `${collapsibleId}-content`,
-    }),
-    [open, disabled, toggle, collapsibleId],
-  );
-
-  return { contextValue };
-}