@primitiv-ui/react 0.1.0

package/src/Dropdown/__tests__/Dropdown.radio-item.test.tsx

@@ -0,0 +1,134 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown.RadioGroup and Dropdown.RadioItem", () => {
+  it("renders each item as role=menuitemradio with aria-checked matching the group value", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Theme</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.RadioGroup defaultValue="light">
+            <Dropdown.RadioItem value="light">Light</Dropdown.RadioItem>
+            <Dropdown.RadioItem value="dark">Dark</Dropdown.RadioItem>
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const light = screen.getByRole("menuitemradio", {
+      name: "Light",
+      hidden: true,
+    });
+    const dark = screen.getByRole("menuitemradio", {
+      name: "Dark",
+      hidden: true,
+    });
+    expect(light).toHaveAttribute("aria-checked", "true");
+    expect(dark).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("updates the selected value on click and fires onValueChange (uncontrolled)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Theme</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.RadioGroup
+            defaultValue="light"
+            onValueChange={onValueChange}
+          >
+            <Dropdown.RadioItem value="light">Light</Dropdown.RadioItem>
+            <Dropdown.RadioItem value="dark">Dark</Dropdown.RadioItem>
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const dark = screen.getByRole("menuitemradio", {
+      name: "Dark",
+      hidden: true,
+    });
+
+    // Act
+    await user.click(dark);
+
+    // Assert
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(onValueChange).toHaveBeenLastCalledWith("dark");
+  });
+
+  it("stays open when onSelect calls preventDefault", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn((event: Event) => event.preventDefault());
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Theme</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.RadioGroup>
+            <Dropdown.RadioItem value="dark" onSelect={onSelect}>
+              Dark
+            </Dropdown.RadioItem>
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const dark = screen.getByRole("menuitemradio", {
+      name: "Dark",
+      hidden: true,
+    });
+    const menu = screen.getByRole("menu", { hidden: true });
+
+    // Act
+    await user.click(dark);
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(dark).toHaveAttribute("aria-checked", "true");
+    expect(menu).toHaveAttribute("data-popover-open");
+  });
+
+  it("reflects the consumer-driven value in controlled mode", async () => {
+    // Arrange
+    const user = userEvent.setup();
+
+    function Controlled() {
+      const [value, setValue] = useState("light");
+      return (
+        <Dropdown.Root defaultOpen>
+          <Dropdown.Trigger>Theme</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.RadioGroup value={value} onValueChange={setValue}>
+              <Dropdown.RadioItem value="light">Light</Dropdown.RadioItem>
+              <Dropdown.RadioItem value="dark">Dark</Dropdown.RadioItem>
+            </Dropdown.RadioGroup>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      );
+    }
+
+    render(<Controlled />);
+    const light = screen.getByRole("menuitemradio", {
+      name: "Light",
+      hidden: true,
+    });
+    const dark = screen.getByRole("menuitemradio", {
+      name: "Dark",
+      hidden: true,
+    });
+    expect(light).toHaveAttribute("aria-checked", "true");
+
+    // Act
+    await user.click(dark);
+
+    // Assert
+    expect(dark).toHaveAttribute("aria-checked", "true");
+    expect(light).toHaveAttribute("aria-checked", "false");
+  });
+});

package/src/Dropdown/__tests__/Dropdown.reading-direction.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider";
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown reading direction", () => {
+  it("opens a sub-menu on ArrowLeft when dir=rtl", async () => {
+    // Arrange — in RTL, "forward" on the inline axis is ArrowLeft, so it
+    // should open the submenu in place of ArrowRight.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen dir="rtl">
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("does not open the sub-menu on ArrowRight when dir=rtl", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen dir="rtl">
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("closes the sub-menu on ArrowRight when dir=rtl", async () => {
+    // Arrange — focus auto-lands inside the open sub-content.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen dir="rtl">
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+    expect(subTrigger).toHaveFocus();
+  });
+
+  it("inherits dir=rtl from a DirectionProvider when no dir prop is passed on Root", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <Dropdown.Root defaultOpen>
+          <Dropdown.Trigger>File</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.Sub>
+              <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+              <Dropdown.SubContent>
+                <Dropdown.Item>Project A</Dropdown.Item>
+              </Dropdown.SubContent>
+            </Dropdown.Sub>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      </DirectionProvider>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("lets an explicit dir prop on Root override the inherited DirectionProvider value", async () => {
+    // Arrange — provider says ltr but Root says rtl; rtl wins.
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="ltr">
+        <Dropdown.Root defaultOpen dir="rtl">
+          <Dropdown.Trigger>File</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.Sub>
+              <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+              <Dropdown.SubContent>
+                <Dropdown.Item>Project A</Dropdown.Item>
+              </Dropdown.SubContent>
+            </Dropdown.Sub>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      </DirectionProvider>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/Dropdown/__tests__/Dropdown.separator.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown.Separator", () => {
+  it("renders as a non-focusable element with role=separator", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item>Delete</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const separator = screen.getByRole("separator", { hidden: true });
+    expect(separator).toBeInTheDocument();
+  });
+
+  it("is skipped by ArrowDown focus traversal", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item>Delete</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const del = screen.getByRole("menuitem", { name: "Delete", hidden: true });
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert — arrow skips past the separator onto Delete
+    expect(del).toHaveFocus();
+  });
+});

package/src/Dropdown/__tests__/Dropdown.state-modes.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown state modes", () => {
+  it("honours controlled open prop and defers to onOpenChange callback", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    function Controlled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button
+            type="button"
+            data-testid="external-toggle"
+            onClick={() => setOpen(true)}
+          >
+            open externally
+          </button>
+          <Dropdown.Root
+            open={open}
+            onOpenChange={(next) => {
+              onOpenChange(next);
+              setOpen(next);
+            }}
+          >
+            <Dropdown.Trigger>Options</Dropdown.Trigger>
+            <Dropdown.Content>
+              <Dropdown.Item>Rename</Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </>
+      );
+    }
+    render(<Controlled />);
+    const trigger = screen.getByRole("button", { name: "Options" });
+    const external = screen.getByTestId("external-toggle");
+    const menu = screen.getByRole("menu", { hidden: true });
+    expect(menu).not.toHaveAttribute("data-popover-open");
+
+    // Act — external control opens it (no onOpenChange yet, state is external)
+    await user.click(external);
+
+    // Assert — controlled prop flows through to ARIA + popover state
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(menu).toHaveAttribute("data-popover-open");
+
+    // Act — trigger closes it, which must route through onOpenChange
+    await user.click(trigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("honours controlled open prop on Dropdown.Sub and defers to onOpenChange", async () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    function ControlledSub() {
+      const [subOpen, setSubOpen] = useState(false);
+      return (
+        <Dropdown.Root defaultOpen>
+          <Dropdown.Trigger>File</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.Sub
+              open={subOpen}
+              onOpenChange={(next) => {
+                onOpenChange(next);
+                setSubOpen(next);
+              }}
+            >
+              <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+              <Dropdown.SubContent>
+                <Dropdown.Item>Project A</Dropdown.Item>
+              </Dropdown.SubContent>
+            </Dropdown.Sub>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      );
+    }
+    const user = userEvent.setup();
+    render(<ControlledSub />);
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+
+    // Act — clicking the SubTrigger routes state through the parent
+    await user.click(subTrigger);
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/Dropdown/__tests__/Dropdown.sub.test.tsx

@@ -0,0 +1,185 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown submenus", () => {
+  it("renders SubTrigger as a menuitem with aria-haspopup and initially collapsed state", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>New</Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    expect(subTrigger).toHaveAttribute("aria-haspopup", "menu");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("opens the SubContent on ArrowRight and focuses its first item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+              <Dropdown.Item>Project B</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const projectA = screen.getByRole("menuitem", {
+      name: "Project A",
+      hidden: true,
+    });
+
+    // Act — focus starts on SubTrigger (the first menuitem in the parent)
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(projectA).toHaveFocus();
+  });
+
+  it("closes the SubContent on ArrowLeft and returns focus to the SubTrigger", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+    expect(subMenu).toHaveAttribute("data-popover-open");
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subMenu).not.toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveFocus();
+  });
+
+  it("does not open the SubContent when the SubTrigger receives a non-ArrowRight key", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+
+    // Act — press arbitrary key on SubTrigger; must not open the submenu
+    subTrigger.focus();
+    await user.keyboard("x");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+    expect(subMenu).not.toHaveAttribute("data-popover-open");
+  });
+
+  it("does not close the SubContent when a non-ArrowLeft key is pressed inside it", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+    const projectA = screen.getByRole("menuitem", {
+      name: "Project A",
+      hidden: true,
+    });
+
+    // Act
+    projectA.focus();
+    await user.keyboard("x");
+
+    // Assert
+    expect(subMenu).toHaveAttribute("data-popover-open");
+  });
+
+  it("opens the SubContent popover when the SubTrigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+    expect(subMenu).not.toHaveAttribute("data-popover-open");
+
+    // Act
+    await user.click(subTrigger);
+
+    // Assert
+    expect(subMenu).toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+});