@primitiv-ui/react 0.1.0

package/src/ContextMenu/__tests__/ContextMenu.checkbox-item.test.tsx

@@ -0,0 +1,145 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.CheckboxItem", () => {
+  it("renders as role=menuitemcheckbox with aria-checked reflecting its state", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem defaultChecked>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show grid",
+      hidden: true,
+    });
+    expect(item).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("toggles the checked state on click and fires onCheckedChange (uncontrolled)", () => {
+    // Arrange
+    const onCheckedChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem onCheckedChange={onCheckedChange}>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show grid",
+      hidden: true,
+    });
+    expect(item).toHaveAttribute("aria-checked", "false");
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onCheckedChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
+  it("stays open when onSelect calls preventDefault", () => {
+    // Arrange
+    const onSelect = vi.fn((event: Event) => event.preventDefault());
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem onSelect={onSelect}>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show grid",
+      hidden: true,
+    });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(item).toHaveAttribute("aria-checked", "true");
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  it("resolves indeterminate to checked on the next activation", () => {
+    // Arrange
+    function Controlled() {
+      const [checked, setChecked] = useState<boolean | "indeterminate">(
+        "indeterminate",
+      );
+      return (
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.CheckboxItem
+              checked={checked}
+              onCheckedChange={setChecked}
+            >
+              Show grid
+            </ContextMenu.CheckboxItem>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      );
+    }
+
+    render(<Controlled />);
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show grid",
+      hidden: true,
+    });
+    expect(item).toHaveAttribute("aria-checked", "mixed");
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(item).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("no-ops when disabled", () => {
+    // Arrange
+    const onCheckedChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem
+            disabled
+            onCheckedChange={onCheckedChange}
+          >
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show grid",
+      hidden: true,
+    });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onCheckedChange).not.toHaveBeenCalled();
+    expect(item).toHaveAttribute("aria-disabled", "true");
+  });
+});

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

@@ -0,0 +1,113 @@
+import { render } from "@testing-library/react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu error handling", () => {
+  beforeEach(() => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("throws when ContextMenu.Trigger is used outside ContextMenu.Root", () => {
+    expect(() =>
+      render(<ContextMenu.Trigger>Orphan</ContextMenu.Trigger>),
+    ).toThrowError(
+      "ContextMenu sub-components must be rendered inside a <ContextMenu.Root>.",
+    );
+  });
+
+  it("throws when ContextMenu.Content is used outside ContextMenu.Root", () => {
+    expect(() =>
+      render(
+        <ContextMenu.Content>
+          <ContextMenu.Item>Orphan</ContextMenu.Item>
+        </ContextMenu.Content>,
+      ),
+    ).toThrowError(
+      "ContextMenu sub-components must be rendered inside a <ContextMenu.Root>.",
+    );
+  });
+
+  it("throws when ContextMenu.Item is used outside ContextMenu.Root", () => {
+    expect(() =>
+      render(<ContextMenu.Item>Orphan</ContextMenu.Item>),
+    ).toThrowError(
+      "ContextMenu sub-components must be rendered inside a <ContextMenu.Root>.",
+    );
+  });
+
+  it("throws when ContextMenu.CheckboxItem is used outside ContextMenu.Root", () => {
+    expect(() =>
+      render(<ContextMenu.CheckboxItem>Orphan</ContextMenu.CheckboxItem>),
+    ).toThrowError(
+      "ContextMenu sub-components must be rendered inside a <ContextMenu.Root>.",
+    );
+  });
+
+  it("throws when ContextMenu.RadioItem is used outside ContextMenu.RadioGroup", () => {
+    expect(() =>
+      render(
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.RadioItem value="a">A</ContextMenu.RadioItem>
+          </ContextMenu.Content>
+        </ContextMenu.Root>,
+      ),
+    ).toThrowError(
+      "ContextMenu.RadioItem must be rendered inside a <ContextMenu.RadioGroup>.",
+    );
+  });
+
+  it("throws when ContextMenu.SubTrigger is used outside ContextMenu.Sub", () => {
+    expect(() =>
+      render(
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.SubTrigger>Orphan</ContextMenu.SubTrigger>
+          </ContextMenu.Content>
+        </ContextMenu.Root>,
+      ),
+    ).toThrowError(
+      "ContextMenu.SubTrigger and ContextMenu.SubContent must be rendered inside a <ContextMenu.Sub>.",
+    );
+  });
+
+  it("throws when ContextMenu.SubContent is used outside ContextMenu.Sub", () => {
+    expect(() =>
+      render(
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Orphan</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Content>
+        </ContextMenu.Root>,
+      ),
+    ).toThrowError(
+      "ContextMenu.SubTrigger and ContextMenu.SubContent must be rendered inside a <ContextMenu.Sub>.",
+    );
+  });
+
+  it("throws when ContextMenu.ItemIndicator is rendered outside a CheckboxItem or RadioItem", () => {
+    expect(() =>
+      render(
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.ItemIndicator>
+              <span>orphan</span>
+            </ContextMenu.ItemIndicator>
+          </ContextMenu.Content>
+        </ContextMenu.Root>,
+      ),
+    ).toThrowError(
+      "ContextMenu.ItemIndicator must be rendered inside a <ContextMenu.CheckboxItem> or <ContextMenu.RadioItem>.",
+    );
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.group-label.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.Group + ContextMenu.Label", () => {
+  it("renders Group as <li role=group> wrapping <ul role=none>", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Group>
+            <ContextMenu.Item>Rename</ContextMenu.Item>
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const group = screen.getByRole("group", { hidden: true });
+    expect(group.tagName).toBe("LI");
+    const inner = group.firstElementChild!;
+    expect(inner.tagName).toBe("UL");
+    expect(inner).toHaveAttribute("role", "none");
+  });
+
+  it("wires Group's aria-labelledby to a nested Label's id", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Group>
+            <ContextMenu.Label>Actions</ContextMenu.Label>
+            <ContextMenu.Item>Rename</ContextMenu.Item>
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const group = screen.getByRole("group", { hidden: true });
+    const label = screen.getByText("Actions");
+    expect(label.id).toBeTruthy();
+    expect(group).toHaveAttribute("aria-labelledby", label.id);
+  });
+
+});

package/src/ContextMenu/__tests__/ContextMenu.item-indicator.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.ItemIndicator", () => {
+  it("renders inside a checked CheckboxItem with data-state=checked", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem defaultChecked>
+            <ContextMenu.ItemIndicator>
+              <span data-testid="indicator">✓</span>
+            </ContextMenu.ItemIndicator>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const indicator = screen.getByTestId("indicator").parentElement!;
+    expect(indicator).toHaveAttribute("data-state", "checked");
+  });
+
+  it("unmounts when the parent CheckboxItem is unchecked", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem>
+            <ContextMenu.ItemIndicator>
+              <span data-testid="indicator">✓</span>
+            </ContextMenu.ItemIndicator>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    expect(screen.queryByTestId("indicator")).not.toBeInTheDocument();
+  });
+
+  it("stays mounted when unchecked if forceMount is set, reflecting state via data-state", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem>
+            <ContextMenu.ItemIndicator forceMount>
+              <span data-testid="indicator">✓</span>
+            </ContextMenu.ItemIndicator>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const indicator = screen.getByTestId("indicator").parentElement!;
+    expect(indicator).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("renders with data-state=indeterminate inside a tri-state CheckboxItem", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.CheckboxItem defaultChecked="indeterminate">
+            <ContextMenu.ItemIndicator>
+              <span data-testid="indicator">~</span>
+            </ContextMenu.ItemIndicator>
+            Show grid
+          </ContextMenu.CheckboxItem>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const indicator = screen.getByTestId("indicator").parentElement!;
+    expect(indicator).toHaveAttribute("data-state", "indeterminate");
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.item.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.Item", () => {
+  it("renders as <li role=menuitem>", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    expect(item.tagName).toBe("LI");
+  });
+
+  it("fires onSelect when the item is clicked", () => {
+    // Arrange
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={onSelect}>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("closes the menu after a click selection", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("keeps the menu open when onSelect calls preventDefault", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={(event) => event.preventDefault()}>
+            Rename
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  it("does not select when the item is disabled", () => {
+    // Arrange
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item disabled onSelect={onSelect}>
+            Rename
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    fireEvent.click(item);
+
+    // Assert
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(item).toHaveAttribute("aria-disabled", "true");
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.keyboard-interaction.test.tsx

@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ContextMenu } from "../ContextMenu";
+
+function renderMenu() {
+  return render(
+    <ContextMenu.Root defaultOpen>
+      <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+      <ContextMenu.Content>
+        <ContextMenu.Item>Rename</ContextMenu.Item>
+        <ContextMenu.Item>Duplicate</ContextMenu.Item>
+        <ContextMenu.Item>Delete</ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>,
+  );
+}
+
+describe("ContextMenu keyboard interaction", () => {
+  it("moves focus to the first item when the menu opens", () => {
+    // Arrange & Act
+    renderMenu();
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Rename", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("ArrowDown moves focus to the next item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderMenu();
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Duplicate", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("ArrowDown wraps from the last item back to the first", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderMenu();
+
+    // Act
+    await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}");
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Rename", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("ArrowUp moves focus to the previous item and wraps to the last", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderMenu();
+
+    // Act
+    await user.keyboard("{ArrowUp}");
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Delete", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("Home jumps to the first item and End jumps to the last", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderMenu();
+
+    // Act
+    await user.keyboard("{End}");
+    expect(
+      screen.getByRole("menuitem", { name: "Delete", hidden: true }),
+    ).toHaveFocus();
+    await user.keyboard("{Home}");
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Rename", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("Enter activates the focused item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={onSelect}>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("Space activates the focused item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item onSelect={onSelect}>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    await user.keyboard(" ");
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("Escape closes the menu", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    await user.keyboard("{Escape}");
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("skips disabled items during arrow navigation", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+          <ContextMenu.Item disabled>Duplicate</ContextMenu.Item>
+          <ContextMenu.Item>Delete</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert — Duplicate is disabled, so focus lands on Delete
+    expect(
+      screen.getByRole("menuitem", { name: "Delete", hidden: true }),
+    ).toHaveFocus();
+  });
+});