@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,260 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown.ItemIndicator", () => {
+  it("renders a span with data-state='checked' when its CheckboxItem is checked", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem defaultChecked>
+            <Dropdown.ItemIndicator data-testid="indicator">
+              <svg aria-hidden="true" data-testid="icon" />
+            </Dropdown.ItemIndicator>
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const indicator = screen.getByTestId("indicator");
+    expect(indicator.tagName).toBe("SPAN");
+    expect(indicator).toHaveAttribute("data-state", "checked");
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("does not render when the CheckboxItem is unchecked and forceMount is not set", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem>
+            <Dropdown.ItemIndicator data-testid="indicator">
+              <svg data-testid="icon" />
+            </Dropdown.ItemIndicator>
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    expect(screen.queryByTestId("indicator")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
+  });
+
+  it("still renders with data-state='unchecked' when unchecked but forceMount is set", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem>
+            <Dropdown.ItemIndicator forceMount data-testid="indicator">
+              <svg data-testid="icon" />
+            </Dropdown.ItemIndicator>
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert — DOM is present so consumers can animate in/out via data-state
+    const indicator = screen.getByTestId("indicator");
+    expect(indicator).toHaveAttribute("data-state", "unchecked");
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("sets data-state='indeterminate' when the CheckboxItem is indeterminate", () => {
+    // Arrange & Act — indeterminate is tri-state; the indicator still renders
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem defaultChecked="indeterminate">
+            <Dropdown.ItemIndicator data-testid="indicator">
+              <svg data-testid="icon" />
+            </Dropdown.ItemIndicator>
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const indicator = screen.getByTestId("indicator");
+    expect(indicator).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("updates its data-state when the CheckboxItem toggles", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem onSelect={(e) => e.preventDefault()}>
+            <Dropdown.ItemIndicator
+              forceMount
+              data-testid="indicator"
+            />
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitemcheckbox", { hidden: true });
+    expect(screen.getByTestId("indicator")).toHaveAttribute(
+      "data-state",
+      "unchecked",
+    );
+
+    // Act
+    await user.click(item);
+
+    // Assert
+    expect(screen.getByTestId("indicator")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
+  });
+
+  it("renders with data-state='checked' inside a selected RadioItem", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.RadioGroup defaultValue="a">
+            <Dropdown.RadioItem value="a">
+              <Dropdown.ItemIndicator data-testid="indicator-a" />
+              Option A
+            </Dropdown.RadioItem>
+            <Dropdown.RadioItem value="b">
+              <Dropdown.ItemIndicator data-testid="indicator-b" />
+              Option B
+            </Dropdown.RadioItem>
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert — only the selected radio's indicator is in the DOM
+    expect(screen.getByTestId("indicator-a")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
+    expect(screen.queryByTestId("indicator-b")).not.toBeInTheDocument();
+  });
+
+  it("updates data-state on RadioItems when the group selection changes", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    function UncontrolledSingleRadio() {
+      const [value, setValue] = useState("a");
+      return (
+        <Dropdown.Root defaultOpen>
+          <Dropdown.Trigger>Options</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.RadioGroup value={value} onValueChange={setValue}>
+              <Dropdown.RadioItem
+                value="a"
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Dropdown.ItemIndicator
+                  forceMount
+                  data-testid="indicator-a"
+                />
+                Option A
+              </Dropdown.RadioItem>
+              <Dropdown.RadioItem
+                value="b"
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Dropdown.ItemIndicator
+                  forceMount
+                  data-testid="indicator-b"
+                />
+                Option B
+              </Dropdown.RadioItem>
+            </Dropdown.RadioGroup>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      );
+    }
+    render(<UncontrolledSingleRadio />);
+    const optionB = screen.getByRole("menuitemradio", {
+      name: "Option B",
+      hidden: true,
+    });
+
+    // Act
+    await user.click(optionB);
+
+    // Assert
+    expect(screen.getByTestId("indicator-a")).toHaveAttribute(
+      "data-state",
+      "unchecked",
+    );
+    expect(screen.getByTestId("indicator-b")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
+  });
+
+  it("composes onto a child element via asChild", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem defaultChecked>
+            <Dropdown.ItemIndicator asChild data-testid="indicator">
+              <svg viewBox="0 0 10 10" />
+            </Dropdown.ItemIndicator>
+            Show bookmarks
+          </Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert — the underlying element is the consumer-supplied svg, not a span
+    const indicator = screen.getByTestId("indicator");
+    expect(indicator.tagName).toBe("svg");
+    expect(indicator).toHaveAttribute("data-state", "checked");
+  });
+
+  it("throws a descriptive error when rendered outside a CheckboxItem or RadioItem", () => {
+    // Arrange — silence React's console.error for the expected throw
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => undefined);
+
+    // Act & Assert
+    expect(() =>
+      render(
+        <Dropdown.Root defaultOpen>
+          <Dropdown.Trigger>Options</Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.Item>
+              <Dropdown.ItemIndicator>
+                <svg />
+              </Dropdown.ItemIndicator>
+              Stray
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>,
+      ),
+    ).toThrow(
+      /Dropdown\.ItemIndicator.*Dropdown\.CheckboxItem.*Dropdown\.RadioItem/,
+    );
+
+    consoleError.mockRestore();
+  });
+});

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

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown.Item", () => {
+  it("renders as a <li role=menuitem> that is part of the tab sequence", () => {
+    // Arrange & Act
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    expect(item.tagName).toBe("LI");
+  });
+
+  it("fires onSelect and closes the dropdown when clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item onSelect={onSelect}>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    const menu = screen.getByRole("menu", { hidden: true });
+    const trigger = screen.getByRole("button", { name: "Options" });
+    expect(menu).toHaveAttribute("data-popover-open");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    // Act
+    await user.click(item);
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(menu).not.toHaveAttribute("data-popover-open");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("stays open if the onSelect handler calls preventDefault", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn((event: Event) => event.preventDefault());
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item onSelect={onSelect}>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    const menu = screen.getByRole("menu", { hidden: true });
+
+    // Act
+    await user.click(item);
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(menu).toHaveAttribute("data-popover-open");
+  });
+});

package/src/Dropdown/__tests__/Dropdown.keyboard-edge-cases.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown keyboard edge cases", () => {
+  it("does not surface an error when an arrow key is pressed on a menu with no items", () => {
+    // Arrange
+    const errors: unknown[] = [];
+    const handler = (event: ErrorEvent) => errors.push(event.error ?? event);
+    window.addEventListener("error", handler);
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content />
+      </Dropdown.Root>,
+    );
+    const menu = screen.getByRole("menu", { hidden: true });
+
+    // Act — no items, no activeElement inside the menu
+    fireEvent.keyDown(menu, { key: "ArrowDown" });
+
+    // Assert — no uncaught error surfaced through the window
+    expect(errors).toHaveLength(0);
+    window.removeEventListener("error", handler);
+  });
+
+  it("does not surface an error during multi-character typeahead on a focusless menu", () => {
+    // Arrange
+    const errors: unknown[] = [];
+    const handler = (event: ErrorEvent) => errors.push(event.error ?? event);
+    window.addEventListener("error", handler);
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Apple</Dropdown.Item>
+          <Dropdown.Item>Banana</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const menu = screen.getByRole("menu", { hidden: true });
+    (document.activeElement as HTMLElement | null)?.blur();
+
+    // Act — two unmatched keystrokes accumulate the query to length 2
+    //        while currentIndex stays at -1 (no focused item)
+    fireEvent.keyDown(menu, { key: "z" });
+    fireEvent.keyDown(menu, { key: "a" });
+
+    // Assert — the typeahead loop does not dereference items[-1]
+    expect(errors).toHaveLength(0);
+    window.removeEventListener("error", handler);
+  });
+
+  it("does not surface an error when Enter is pressed on a menu with no focused item", () => {
+    // Arrange
+    const errors: unknown[] = [];
+    const handler = (event: ErrorEvent) => errors.push(event.error ?? event);
+    window.addEventListener("error", handler);
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Apple</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const menu = screen.getByRole("menu", { hidden: true });
+    (document.activeElement as HTMLElement | null)?.blur();
+
+    // Act — items exist, but no item has focus
+    fireEvent.keyDown(menu, { key: "Enter" });
+
+    // Assert — no uncaught error surfaced through the window
+    expect(errors).toHaveLength(0);
+    window.removeEventListener("error", handler);
+  });
+});