@primitiv-ui/react 0.1.28 → 0.1.29

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

@@ -0,0 +1,160 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Popover } from "../Popover";
+
+describe("Popover asChild composition", () => {
+  it("renders the Trigger as a custom element with the trigger ARIA merged in", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger<HTMLAnchorElement> asChild>
+          <a href="#open">Open</a>
+        </Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("link", { name: "Open" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("toggles the popover when the asChild Trigger is clicked and composes the child onClick", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Popover.Root>
+        <Popover.Trigger<HTMLAnchorElement> asChild>
+          <a href="#open" onClick={onClick}>
+            Open
+          </a>
+        </Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("link", { name: "Open" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders the Content as a custom element with the dialog props merged in", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content asChild>
+          <section data-testid="content">Content</section>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content.tagName).toBe("SECTION");
+    expect(content).toHaveAttribute("role", "dialog");
+    expect(content).toHaveAttribute("popover", "auto");
+  });
+
+  it("renders the Close as a custom element that still closes the popover", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Close asChild>
+            <a href="#close">Dismiss</a>
+          </Popover.Close>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("link", { name: "Dismiss", hidden: true }));
+
+    // Assert
+    expect(screen.getByTestId("content")).toHaveAttribute("data-state", "closed");
+  });
+
+  it("renders the Anchor as a custom element", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Anchor asChild>
+          <label data-testid="anchor">Email</label>
+        </Popover.Anchor>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const anchor = screen.getByTestId("anchor");
+
+    // Assert
+    expect(anchor.tagName).toBe("LABEL");
+  });
+
+  it("renders the Title and Description as custom elements with ids still wired", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Title asChild>
+            <h3>Filters</h3>
+          </Popover.Title>
+          <Popover.Description asChild>
+            <div>Refine below.</div>
+          </Popover.Description>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+    const title = screen.getByRole("heading", { name: "Filters", hidden: true });
+    const description = screen.getByText("Refine below.");
+
+    // Assert
+    expect(title.tagName).toBe("H3");
+    expect(content).toHaveAttribute("aria-labelledby", title.id);
+    expect(content).toHaveAttribute("aria-describedby", description.id);
+  });
+
+  it("forwards a ref to the underlying Trigger element", () => {
+    // Arrange
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <Popover.Root>
+        <Popover.Trigger ref={ref}>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+
+    // Assert
+    expect(ref.current).toBe(screen.getByRole("button", { name: "Open" }));
+  });
+
+  it("forwards a ref to the underlying Content element without breaking open state", () => {
+    // Arrange
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content ref={ref} data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(ref.current).toBe(content);
+    expect(content).toHaveAttribute("data-state", "open");
+    expect(content).toHaveAttribute("data-popover-open");
+  });
+});

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

@@ -0,0 +1,106 @@
+import { render, screen } from "@testing-library/react";
+
+import { Popover } from "../Popover";
+
+describe("Popover basic rendering tests", () => {
+  it("should render Popover.Trigger as a button with type='button'", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+
+    // Assert
+    expect(trigger.tagName).toBe("BUTTON");
+    expect(trigger).toHaveAttribute("type", "button");
+  });
+
+  it("should give Popover.Trigger aria-haspopup='dialog'", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+  });
+
+  it("should give Popover.Trigger aria-expanded='false' by default", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should wire aria-controls on Trigger to the id of Content", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-controls", content.id);
+    expect(content.id).not.toBe("");
+  });
+
+  it("should render Popover.Content as a native-popover div with role='dialog'", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByRole("dialog", { hidden: true });
+
+    // Assert
+    expect(content.tagName).toBe("DIV");
+    expect(content).toHaveAttribute("popover", "auto");
+  });
+
+  it("should give Popover.Content data-state='closed' by default", () => {
+    // Arrange
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should render no DOM element for Popover.Root itself", () => {
+    // Arrange
+    const { container } = render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+
+    // Assert — the trigger button is the first rendered node, not a Root wrapper
+    expect(container.firstElementChild?.tagName).toBe("BUTTON");
+  });
+});

package/src/Popover/__tests__/Popover.click-outside.test.tsx

@@ -0,0 +1,149 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Popover } from "../Popover";
+
+describe("Popover light-dismiss", () => {
+  it("closes when the user clicks outside the open popover", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <div>
+        <Popover.Root defaultOpen>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Content data-testid="content">Content</Popover.Content>
+        </Popover.Root>
+        <button type="button">Outside</button>
+      </div>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("data-state", "closed");
+  });
+
+  it("stays open when the user clicks inside the content", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <span>Inside</span>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(screen.getByText("Inside"));
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+
+  it("syncs React state to closed when the browser light-dismisses (native toggle event)", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Act — simulate the browser closing the popover on its own
+    const toggleEvent = new Event("toggle");
+    Object.defineProperty(toggleEvent, "newState", { value: "closed" });
+    act(() => {
+      content.dispatchEvent(toggleEvent);
+    });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("data-state", "closed");
+  });
+
+  it("ignores a native toggle event that reports the popover is opening", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Act
+    const toggleEvent = new Event("toggle");
+    Object.defineProperty(toggleEvent, "newState", { value: "open" });
+    content.dispatchEvent(toggleEvent);
+
+    // Assert
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+
+  it("skips the document-click fallback when the native Popover API is present", async () => {
+    // Simulate a real browser (native light-dismiss + toggle event handle
+    // outside clicks). The document-click fallback must not run there — it
+    // would catch the click that opened the popover from an external control
+    // and re-close it. With the fallback gated out and no native light-dismiss
+    // in jsdom, an outside click leaves the popover open.
+    Object.defineProperty(HTMLElement.prototype, "popover", {
+      configurable: true,
+      get() {
+        return "auto";
+      },
+    });
+    try {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <Popover.Root defaultOpen>
+            <Popover.Trigger>Open</Popover.Trigger>
+            <Popover.Content data-testid="content">Content</Popover.Content>
+          </Popover.Root>
+          <button type="button">Outside</button>
+        </div>,
+      );
+      const content = screen.getByTestId("content");
+
+      await user.click(screen.getByRole("button", { name: "Outside" }));
+
+      expect(content).toHaveAttribute("data-state", "open");
+    } finally {
+      delete (HTMLElement.prototype as unknown as { popover?: unknown })
+        .popover;
+    }
+  });
+
+  it("closes only once when the trigger itself is clicked to close (no double dismiss)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Popover.Root onOpenChange={onOpenChange}>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+
+    // Act
+    await user.click(trigger); // open
+    await user.click(trigger); // close via the trigger, not light-dismiss
+
+    // Assert
+    expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+    expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+    expect(onOpenChange).toHaveBeenCalledTimes(2);
+  });
+});

package/src/Popover/__tests__/Popover.close.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Popover } from "../Popover";
+
+describe("Popover.Close", () => {
+  it("renders a button that closes the popover when clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Close>Dismiss</Popover.Close>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Dismiss", hidden: true }));
+
+    // Assert
+    expect(content).toHaveAttribute("data-state", "closed");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("returns focus to the trigger after closing", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Close>Dismiss</Popover.Close>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Dismiss", hidden: true }));
+
+    // Assert
+    expect(trigger).toHaveFocus();
+  });
+
+  it("lets a consumer onClick veto the close via preventDefault", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Close onClick={(event) => event.preventDefault()}>
+            Dismiss
+          </Popover.Close>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Dismiss", hidden: true }));
+
+    // Assert
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+});

package/src/Popover/__tests__/Popover.content.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+
+import { Popover } from "../Popover";
+
+describe("Popover.Title and Popover.Description", () => {
+  it("wires Content aria-labelledby to a Popover.Title", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Title>Filters</Popover.Title>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+    const title = screen.getByRole("heading", { name: "Filters", hidden: true });
+
+    // Assert
+    expect(title.tagName).toBe("H2");
+    expect(content).toHaveAttribute("aria-labelledby", title.id);
+    expect(title.id).not.toBe("");
+  });
+
+  it("wires Content aria-describedby to a Popover.Description", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">
+          <Popover.Description>Narrow the results below.</Popover.Description>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+    const description = screen.getByText("Narrow the results below.");
+
+    // Assert
+    expect(description.tagName).toBe("P");
+    expect(content).toHaveAttribute("aria-describedby", description.id);
+    expect(description.id).not.toBe("");
+  });
+
+  it("omits aria-labelledby and aria-describedby when neither is present", () => {
+    // Arrange
+    render(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(content).not.toHaveAttribute("aria-labelledby");
+    expect(content).not.toHaveAttribute("aria-describedby");
+  });
+});

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

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Popover } from "../Popover";
+
+describe("Popover controlled state", () => {
+  it("reflects the controlled open prop", () => {
+    // Arrange & Act
+    render(
+      <Popover.Root open onOpenChange={() => {}}>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).toHaveAttribute("data-state", "open");
+    expect(content).toHaveAttribute("data-popover-open");
+  });
+
+  it("defers state changes to the parent — clicking calls onOpenChange but does not self-open", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Popover.Root open={false} onOpenChange={onOpenChange}>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Content</Popover.Content>
+      </Popover.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Open" });
+    const content = screen.getByTestId("content");
+
+    // Act
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("data-state", "closed");
+  });
+});

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

@@ -0,0 +1,51 @@
+import { render } from "@testing-library/react";
+
+import { Popover } from "../Popover";
+
+describe("Popover error handling", () => {
+  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("throws when Popover.Trigger is rendered without a Popover.Root", () => {
+    expect(() => render(<Popover.Trigger>Open</Popover.Trigger>)).toThrow(
+      /Popover\.Root/,
+    );
+  });
+
+  it("throws when Popover.Anchor is rendered without a Popover.Root", () => {
+    expect(() => render(<Popover.Anchor>Ref</Popover.Anchor>)).toThrow(
+      /Popover\.Root/,
+    );
+  });
+
+  it("throws when Popover.Content is rendered without a Popover.Root", () => {
+    expect(() => render(<Popover.Content>Content</Popover.Content>)).toThrow(
+      /Popover\.Root/,
+    );
+  });
+
+  it("throws when Popover.Close is rendered without a Popover.Root", () => {
+    expect(() => render(<Popover.Close>Close</Popover.Close>)).toThrow(
+      /Popover\.Root/,
+    );
+  });
+
+  it("throws when Popover.Title is rendered without a Popover.Root", () => {
+    expect(() => render(<Popover.Title>Title</Popover.Title>)).toThrow(
+      /Popover\.Root/,
+    );
+  });
+
+  it("throws when Popover.Description is rendered without a Popover.Root", () => {
+    expect(() =>
+      render(<Popover.Description>Desc</Popover.Description>),
+    ).toThrow(/Popover\.Root/);
+  });
+});

package/src/Popover/__tests__/Popover.focus.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Popover } from "../Popover";
+
+describe("Popover focus management", () => {
+  it("moves focus to the first focusable element inside the content on open", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content>
+          <button type="button">First</button>
+          <button type="button">Second</button>
+        </Popover.Content>
+      </Popover.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Open" }));
+
+    // Assert
+    expect(screen.getByRole("button", { name: "First", hidden: true })).toHaveFocus();
+  });
+
+  it("moves focus to the content element itself when it has no focusable children", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Popover.Root>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Content data-testid="content">Just text, nothing to focus.</Popover.Content>
+      </Popover.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Open" }));
+
+    // Assert
+    expect(screen.getByTestId("content")).toHaveFocus();
+  });
+});