@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,180 @@
+import { render, screen } from "@testing-library/react";
+
+import { Tooltip } from "../Tooltip";
+
+describe("Tooltip — basic rendering", () => {
+  it("renders Tooltip.Trigger as a button with type='button'", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    expect(trigger.tagName).toBe("BUTTON");
+    expect(trigger).toHaveAttribute("type", "button");
+  });
+
+  it("does not render Tooltip.Content when closed by default", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("renders Tooltip.Content with role='tooltip' when open", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Tooltip text");
+  });
+
+  it("wires aria-describedby on Trigger to the id of Content", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    const tooltip = screen.getByRole("tooltip");
+    expect(trigger).toHaveAttribute("aria-describedby", tooltip.id);
+    expect(tooltip.id).not.toBe("");
+  });
+
+  it("sets data-state='closed' on Content when closed (forceMount)", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content forceMount>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toHaveAttribute("data-state", "closed");
+  });
+
+  it("sets data-state='open' on Content when open", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toHaveAttribute("data-state", "open");
+  });
+
+  it("sets data-state='open' | 'closed' on Trigger to reflect state", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("button", { name: "Hover me" })).toHaveAttribute(
+      "data-state",
+      "open",
+    );
+  });
+
+  it("Tooltip.Portal renders children into document.body when open", () => {
+    render(
+      <section data-testid="tree-root">
+        <Tooltip.Provider>
+          <Tooltip.Root defaultOpen>
+            <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content>Tooltip text</Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </section>,
+    );
+
+    const tooltip = screen.getByRole("tooltip");
+    expect(document.body).toContainElement(tooltip);
+    expect(screen.getByTestId("tree-root")).not.toContainElement(tooltip);
+  });
+
+  it("Tooltip.Portal does not render children when closed", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content>Tooltip text</Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("Tooltip.Arrow renders a span inside the content", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>
+            Tooltip text
+            <Tooltip.Arrow data-testid="arrow" />
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByTestId("arrow")).toBeInTheDocument();
+  });
+
+  it("forwards arbitrary attributes to Trigger", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger className="my-trigger" data-testid="trigger">
+            Hover me
+          </Tooltip.Trigger>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByTestId("trigger")).toHaveClass("my-trigger");
+  });
+
+  it("forwards arbitrary attributes to Content", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content className="my-content">Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toHaveClass("my-content");
+  });
+});

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

@@ -0,0 +1,128 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { Tooltip } from "../Tooltip";
+
+describe("Tooltip — controlled state", () => {
+  it("reflects the consumer's open={true} prop", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root open={true}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("reflects the consumer's open={false} prop", () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root open={false}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("calls onOpenChange(true) when the trigger is focused in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root open={false} onOpenChange={onOpenChange}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("calls onOpenChange(false) when trigger loses focus in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root open={true} onOpenChange={onOpenChange}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+        <button>Other</button>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+    await user.tab();
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("does not flip state internally when controlled — consumer must drive open", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root open={false} onOpenChange={onOpenChange}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("updates when the consumer drives state through onOpenChange", async () => {
+    function Wrapper() {
+      const [open, setOpen] = useState(false);
+      return (
+        <Tooltip.Provider>
+          <Tooltip.Root open={open} onOpenChange={setOpen}>
+            <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+            <Tooltip.Content>Tooltip text</Tooltip.Content>
+          </Tooltip.Root>
+          <button>Other</button>
+        </Tooltip.Provider>
+      );
+    }
+
+    const user = userEvent.setup();
+    render(<Wrapper />);
+
+    await user.tab();
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.tab();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("calls onOpenChange from uncontrolled mode too", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root onOpenChange={onOpenChange}>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/Tooltip/__tests__/Tooltip.escape-hatches.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tooltip } from "../Tooltip";
+
+describe("Tooltip — escape hatches", () => {
+  it("closes when pointer is pressed outside the content", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <Tooltip.Provider>
+          <Tooltip.Root defaultOpen>
+            <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+            <Tooltip.Content>Tooltip text</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+        <button>Outside</button>
+      </div>,
+    );
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("does not close when pointer is pressed inside the content", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>
+            <button>Inside</button>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Inside" }));
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("does not close when onPointerDownOutside calls preventDefault()", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <Tooltip.Provider>
+          <Tooltip.Root defaultOpen>
+            <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+            <Tooltip.Content
+              onPointerDownOutside={(e) => e.preventDefault()}
+            >
+              Tooltip text
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+        <button>Outside</button>
+      </div>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+});

package/src/Tooltip/__tests__/Tooltip.focus-interaction.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tooltip } from "../Tooltip";
+
+describe("Tooltip — focus interaction", () => {
+  it("opens immediately when the trigger receives focus (no delay)", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={700}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Focusable</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("closes immediately when the trigger loses focus", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Focusable</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+        <button>Other</button>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.tab();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("opens on focus even when defaultOpen is false", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider>
+        <Tooltip.Root defaultOpen={false}>
+          <Tooltip.Trigger>Focusable</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("cancels the grace-period timer and closes when trigger loses focus during the grace window", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <Tooltip.Provider delayDuration={0}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>Focusable</Tooltip.Trigger>
+            <Tooltip.Content>Tooltip text</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+        <button>Other</button>
+      </div>,
+    );
+
+    await user.tab();
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.hover(screen.getByRole("button", { name: "Focusable" }));
+    await user.unhover(screen.getByRole("button", { name: "Focusable" }));
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.tab();
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+});

package/src/Tooltip/__tests__/Tooltip.hover-interaction.test.tsx

@@ -0,0 +1,179 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tooltip } from "../Tooltip";
+
+describe("Tooltip — hover interaction", () => {
+  it("opens after the delayDuration elapses on pointer enter", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={1}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toBeInTheDocument(),
+    );
+  });
+
+  it("cancels the open timer when pointer leaves before the delay elapses", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={500}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+    await user.unhover(screen.getByRole("button", { name: "Hover me" }));
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("opens immediately when a second tooltip is hovered while the first is open (skip-delay)", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={0} skipDelayDuration={5000}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>First</Tooltip.Trigger>
+          <Tooltip.Content>First tip</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Second</Tooltip.Trigger>
+          <Tooltip.Content>Second tip</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "First" }));
+    expect(screen.getByText("First tip")).toBeInTheDocument();
+
+    await user.hover(screen.getByRole("button", { name: "Second" }));
+
+    expect(screen.getByText("Second tip")).toBeInTheDocument();
+  });
+
+  it("closes when the pointer leaves the trigger (disableHoverableContent=true)", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={0}>
+        <Tooltip.Root disableHoverableContent>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.unhover(screen.getByRole("button", { name: "Hover me" }));
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("stays open when cursor moves from trigger into content (disableHoverableContent=false)", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={0}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.hover(screen.getByRole("tooltip"));
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("closes when the pointer leaves the content", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={0}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+    await user.hover(screen.getByRole("tooltip"));
+    await user.unhover(screen.getByRole("tooltip"));
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("clears the skip-delay timer when a tooltip opens again within the skip window", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tooltip.Provider delayDuration={0} skipDelayDuration={5000}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+          <Tooltip.Content>Tooltip text</Tooltip.Content>
+        </Tooltip.Root>
+        <button>Other</button>
+      </Tooltip.Provider>,
+    );
+
+    await user.tab();
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.tab();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("applies the full delay after the skip window expires", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <Tooltip.Provider delayDuration={1} skipDelayDuration={1}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+            <Tooltip.Content>Tooltip text</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+        <button>Other</button>
+      </div>,
+    );
+
+    await user.tab();
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    await user.tab();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+
+    await new Promise((r) => setTimeout(r, 20));
+
+    await user.hover(screen.getByRole("button", { name: "Hover me" }));
+
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toBeInTheDocument(),
+    );
+  });
+});