@primitiv-ui/react 0.1.37 → 0.1.39

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

@@ -1,329 +0,0 @@
-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();
-  });
-
-  // A plain <div> (no native button semantics and no role) never fires a
-  // synthetic click on Enter/Space, so these isolate the Trigger's own
-  // keydown handler — the anchor tests above can toggle via native activation
-  // even when the handler does nothing, masking mutations in it.
-  it("toggles on Enter for a non-native asChild element", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger asChild>
-          <div tabIndex={0} data-testid="trigger">
-            Toggle
-          </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    screen.getByTestId("trigger").focus();
-    await user.keyboard("{Enter}");
-    expect(screen.getByTestId("content")).toBeVisible();
-  });
-
-  it("toggles on Space for a non-native asChild element", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger asChild>
-          <div tabIndex={0} data-testid="trigger">
-            Toggle
-          </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    screen.getByTestId("trigger").focus();
-    await user.keyboard(" ");
-    expect(screen.getByTestId("content")).toBeVisible();
-  });
-
-  it("does not toggle on a non-activation key", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger asChild>
-          <div tabIndex={0} data-testid="trigger">
-            Toggle
-          </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    screen.getByTestId("trigger").focus();
-    await user.keyboard("a");
-    expect(screen.getByTestId("content")).not.toBeVisible();
-  });
-
-  it("does not toggle on Enter when disabled (non-native asChild)", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root disabled>
-        <Collapsible.Trigger asChild>
-          <div tabIndex={0} data-testid="trigger">
-            Toggle
-          </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    screen.getByTestId("trigger").focus();
-    await user.keyboard("{Enter}");
-    expect(screen.getByTestId("content")).not.toBeVisible();
-  });
-
-  it("does not toggle on Space when disabled (non-native asChild)", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root disabled>
-        <Collapsible.Trigger asChild>
-          <div tabIndex={0} data-testid="trigger">
-            Toggle
-          </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    screen.getByTestId("trigger").focus();
-    await user.keyboard(" ");
-    expect(screen.getByTestId("content")).not.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

@@ -1,145 +0,0 @@
-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("gives the Trigger a '-trigger' suffixed id distinct from the Content id", () => {
-    // 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 — a derived, non-empty id that cannot collide with the content's.
-    expect(trigger.id).toMatch(/-trigger$/);
-    expect(trigger.id).not.toBe(content.id);
-  });
-
-  it("sets a displayName on the compound and each sub-component", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // `Collapsible`, `Collapsible.Root`, and the underlying function are one
-    // object (Object.assign compound), so the compound's "Collapsible" alias is
-    // the observable Root displayName; the sub-components are distinct objects.
-    expect(Collapsible.displayName).toBe("Collapsible");
-    expect(Collapsible.Trigger.displayName).toBe("CollapsibleTrigger");
-    expect(Collapsible.Content.displayName).toBe("CollapsibleContent");
-    expect(Collapsible.TriggerIcon.displayName).toBe("CollapsibleTriggerIcon");
-  });
-
-  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.collapsedHeight.test.tsx

@@ -1,140 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Collapsible } from "../Collapsible";
-
-const VAR = "--primitiv-collapsible-collapsed-height";
-
-describe("Collapsible collapsedHeight (clamped preview)", () => {
-  it("keeps the closed panel mounted and un-hidden (a visible preview)", () => {
-    // Arrange & Act
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content collapsedHeight={64} data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert — visible preview, not hidden, not aria-hidden
-    expect(content).toBeInTheDocument();
-    expect(content).not.toHaveAttribute("hidden");
-    expect(content).not.toHaveAttribute("aria-hidden");
-    expect(content).toHaveAttribute("data-state", "closed");
-  });
-
-  it("publishes a numeric collapsedHeight as a pixel custom property", () => {
-    // Arrange & Act
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content collapsedHeight={64} data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-
-    // Assert
-    expect(
-      screen.getByTestId("content").style.getPropertyValue(VAR),
-    ).toBe("64px");
-  });
-
-  it("uses a string collapsedHeight verbatim as a CSS length", () => {
-    // Arrange & Act
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content collapsedHeight="4rem" data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-
-    // Assert
-    expect(
-      screen.getByTestId("content").style.getPropertyValue(VAR),
-    ).toBe("4rem");
-  });
-
-  it("toggles data-state open/closed while staying mounted", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content collapsedHeight={64} data-testid="content">
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Toggle" }));
-
-    // Assert — opened, still no hidden/aria-hidden, var still present
-    expect(content).toHaveAttribute("data-state", "open");
-    expect(content).not.toHaveAttribute("hidden");
-    expect(content).not.toHaveAttribute("aria-hidden");
-    expect(content.style.getPropertyValue(VAR)).toBe("64px");
-  });
-
-  it("merges the custom property with a consumer style", () => {
-    // Arrange & Act
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content
-          collapsedHeight={64}
-          style={{ color: "rgb(1, 2, 3)" }}
-          data-testid="content"
-        >
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert — both the private var and the consumer's declaration survive
-    expect(content.style.getPropertyValue(VAR)).toBe("64px");
-    expect(content.style.color).toBe("rgb(1, 2, 3)");
-  });
-
-  it("does not aria-hide a clamped panel even when forceMount is also set", () => {
-    // Arrange & Act — clamped wins: the preview stays readable, so no
-    // aria-hidden despite forceMount being present.
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content
-          forceMount
-          collapsedHeight={64}
-          data-testid="content"
-        >
-          Content
-        </Collapsible.Content>
-      </Collapsible.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("content")).not.toHaveAttribute("aria-hidden");
-  });
-
-  it("does not set the custom property when collapsedHeight is omitted", () => {
-    // Arrange & Act
-    render(
-      <Collapsible.Root>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
-      </Collapsible.Root>,
-    );
-    const content = screen.getByTestId("content");
-
-    // Assert — default fully-hidden behaviour is untouched
-    expect(content.style.getPropertyValue(VAR)).toBe("");
-    expect(content).toHaveAttribute("hidden");
-  });
-});