@primitiv-ui/react 0.1.28 → 0.1.30

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

@@ -0,0 +1,92 @@
+import { render, screen } from "@testing-library/react";
+
+import { NavigationMenu } from "../NavigationMenu";
+
+describe("NavigationMenu — basic rendering", () => {
+  it("renders a navigation landmark named Main by default", () => {
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item>
+            <NavigationMenu.Link href="/start">Start Here</NavigationMenu.Link>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Main" })).toBeInTheDocument();
+  });
+
+  it("links a trigger to its panel and reports both closed", () => {
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item value="concepts">
+            <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+            <NavigationMenu.Content data-testid="panel">
+              <NavigationMenu.Link href="/tokens">Tokens</NavigationMenu.Link>
+            </NavigationMenu.Content>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    const panel = screen.getByTestId("panel");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-controls", panel.id);
+    expect(trigger).toHaveAttribute("data-state", "closed");
+    expect(panel).toHaveAttribute("aria-labelledby", trigger.id);
+    expect(panel).toHaveAttribute("data-state", "closed");
+
+    // The ids are a public surface — a consumer targeting them in CSS or a test
+    // depends on the role suffix, not just on the two sides agreeing.
+    expect(trigger.id).toContain("-trigger-concepts");
+    expect(panel.id).toContain("-panel-concepts");
+  });
+
+  it("does not treat an entry whose value is the empty string as open", () => {
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item value="">
+            <NavigationMenu.Trigger>Blank</NavigationMenu.Trigger>
+            <NavigationMenu.Content data-testid="blank-panel" />
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+      </NavigationMenu.Root>,
+    );
+
+    // `""` is the closed sentinel, so an Item that adopts it as its value must
+    // not read back as the open entry.
+    expect(screen.getByRole("button", { name: "Blank" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(screen.getByTestId("blank-panel")).not.toBeVisible();
+  });
+
+  it("republishes an Item's value when it changes", () => {
+    function Nav({ itemValue }: { itemValue: string }) {
+      return (
+        <NavigationMenu.Root>
+          <NavigationMenu.List>
+            <NavigationMenu.Item value={itemValue}>
+              <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+              <NavigationMenu.Content data-testid="panel" />
+            </NavigationMenu.Item>
+          </NavigationMenu.List>
+        </NavigationMenu.Root>
+      );
+    }
+
+    const { rerender } = render(<Nav itemValue="alpha" />);
+    rerender(<Nav itemValue="beta" />);
+
+    expect(screen.getByRole("button", { name: "Concepts" }).id).toContain(
+      "-trigger-beta",
+    );
+    expect(screen.getByTestId("panel").id).toContain("-panel-beta");
+  });
+});

package/src/NavigationMenu/__tests__/NavigationMenu.contract.test.tsx

@@ -0,0 +1,45 @@
+import { NavigationMenu } from "../NavigationMenu";
+import {
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "../NavigationMenu";
+import {
+  NavigationMenuContext,
+  NavigationMenuItemContext,
+} from "../NavigationMenuContext";
+
+describe("NavigationMenu — public contract", () => {
+  it("exposes every sub-component on the compound", () => {
+    expect(NavigationMenu.Root).toBe(NavigationMenu);
+    expect(NavigationMenu.List).toBe(NavigationMenuList);
+    expect(NavigationMenu.Item).toBe(NavigationMenuItem);
+    expect(NavigationMenu.Trigger).toBe(NavigationMenuTrigger);
+    expect(NavigationMenu.Content).toBe(NavigationMenuContent);
+    expect(NavigationMenu.Viewport).toBe(NavigationMenuViewport);
+    expect(NavigationMenu.Indicator).toBe(NavigationMenuIndicator);
+    expect(NavigationMenu.Link).toBe(NavigationMenuLink);
+  });
+
+  it("names the compound and each sub-component for React DevTools", () => {
+    expect(NavigationMenu.displayName).toBe("NavigationMenu");
+    expect(NavigationMenuList.displayName).toBe("NavigationMenuList");
+    expect(NavigationMenuItem.displayName).toBe("NavigationMenuItem");
+    expect(NavigationMenuTrigger.displayName).toBe("NavigationMenuTrigger");
+    expect(NavigationMenuContent.displayName).toBe("NavigationMenuContent");
+    expect(NavigationMenuViewport.displayName).toBe("NavigationMenuViewport");
+    expect(NavigationMenuIndicator.displayName).toBe("NavigationMenuIndicator");
+    expect(NavigationMenuLink.displayName).toBe("NavigationMenuLink");
+  });
+
+  it("names both strict contexts for React DevTools", () => {
+    expect(NavigationMenuContext.displayName).toBe("NavigationMenuContext");
+    expect(NavigationMenuItemContext.displayName).toBe(
+      "NavigationMenuItemContext",
+    );
+  });
+});

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

@@ -0,0 +1,134 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { ThreeEntryNav } from "./NavigationMenu.fixtures";
+
+describe("NavigationMenu — controlled state", () => {
+  it("reflects the value prop without owning it", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="" onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(onValueChange).toHaveBeenCalledWith("concepts");
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("requests a close with the empty string", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="concepts" onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(onValueChange).toHaveBeenCalledWith("");
+  });
+
+  it("requests the close with the empty string on Escape", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="concepts" onValueChange={onValueChange} />);
+
+    screen.getByRole("link", { name: "Tokens" }).focus();
+    await user.keyboard("{Escape}");
+
+    expect(onValueChange).toHaveBeenCalledWith("");
+  });
+
+  it("reports nothing when Escape is pressed with every panel closed", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="" onValueChange={onValueChange} />);
+
+    screen.getByRole("link", { name: "Changelog" }).focus();
+    await user.keyboard("{Escape}");
+
+    // Nothing is open, so there is nothing to close — a spurious `""` would
+    // make a controlled parent re-render (and clear its own state) on every
+    // stray Escape anywhere in the nav.
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("still closes when the open value names no rendered trigger", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="ghost" onValueChange={onValueChange} />);
+
+    screen.getByRole("link", { name: "Changelog" }).focus();
+    await user.keyboard("{Escape}");
+
+    // There is no trigger to return focus to, which must not stop the close.
+    expect(onValueChange).toHaveBeenCalledWith("");
+  });
+
+  it("calls the latest onValueChange, not the one from first render", async () => {
+    const user = userEvent.setup();
+    const first = vi.fn();
+    const second = vi.fn();
+    const { rerender } = render(
+      <ThreeEntryNav value="concepts" onValueChange={first} />,
+    );
+
+    rerender(<ThreeEntryNav value="concepts" onValueChange={second} />);
+    screen.getByRole("link", { name: "Tokens" }).focus();
+    await user.keyboard("{Escape}");
+
+    // An inline `onValueChange` is a new function every render, so a handler
+    // pinned at mount would report to a closure over stale parent state.
+    expect(second).toHaveBeenCalledWith("");
+    expect(first).not.toHaveBeenCalled();
+  });
+
+  it("reports nothing when focus moves outside with everything already closed", () => {
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="" onValueChange={onValueChange} />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    fireEvent.blur(trigger, { relatedTarget: document.body });
+
+    // A spurious "" would make a controlled parent re-render on every stray
+    // blur inside the nav, exactly like the Escape case above.
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("requests a close with the empty string when focus moves outside", () => {
+    const onValueChange = vi.fn();
+    render(<ThreeEntryNav value="concepts" onValueChange={onValueChange} />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    fireEvent.blur(trigger, { relatedTarget: document.body });
+
+    expect(onValueChange).toHaveBeenCalledWith("");
+  });
+
+  it("calls the latest onValueChange on a focus-outside close too, not the one from first render", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const { rerender } = render(
+      <ThreeEntryNav value="concepts" onValueChange={first} />,
+    );
+
+    rerender(<ThreeEntryNav value="concepts" onValueChange={second} />);
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    fireEvent.blur(trigger, { relatedTarget: document.body });
+
+    expect(second).toHaveBeenCalledWith("");
+    expect(first).not.toHaveBeenCalled();
+  });
+
+  it("opens the panel once the parent commits the new value", async () => {
+    const user = userEvent.setup();
+
+    function Controlled() {
+      const [open, setOpen] = useState("");
+      return <ThreeEntryNav value={open} onValueChange={setOpen} />;
+    }
+
+    render(<Controlled />);
+    await user.click(screen.getByRole("button", { name: "Registry & CLI" }));
+
+    expect(screen.getByTestId("registry-panel")).toBeVisible();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { render } from "@testing-library/react";
+
+import { NavigationMenu } from "../NavigationMenu";
+
+const MISSING_VALUE_ERROR =
+  "NavigationMenu.Trigger and NavigationMenu.Content require a `value` on their NavigationMenu.Item. " +
+  "Omit the value only for a plain link entry, which has no panel to open.";
+const OUTSIDE_ROOT_ERROR =
+  "Component must be rendered as a child of NavigationMenu.Root";
+const OUTSIDE_ITEM_ERROR =
+  "Component must be rendered as a child of NavigationMenu.Item";
+
+describe("NavigationMenu — error handling", () => {
+  it("throws when a Trigger's Item has no value", () => {
+    expect(() =>
+      render(
+        <NavigationMenu.Root>
+          <NavigationMenu.List>
+            <NavigationMenu.Item>
+              <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+            </NavigationMenu.Item>
+          </NavigationMenu.List>
+        </NavigationMenu.Root>,
+      ),
+    ).toThrow(MISSING_VALUE_ERROR);
+  });
+
+  it("throws when a Content's Item has no value", () => {
+    expect(() =>
+      render(
+        <NavigationMenu.Root>
+          <NavigationMenu.List>
+            <NavigationMenu.Item>
+              <NavigationMenu.Content />
+            </NavigationMenu.Item>
+          </NavigationMenu.List>
+        </NavigationMenu.Root>,
+      ),
+    ).toThrow(MISSING_VALUE_ERROR);
+  });
+
+  it.each([
+    ["List", <NavigationMenu.List key="l" />],
+    ["Viewport", <NavigationMenu.Viewport key="v" />],
+    ["Indicator", <NavigationMenu.Indicator key="i" />],
+    ["Link", <NavigationMenu.Link key="k" href="/x" />],
+  ])("throws when %s is rendered outside a Root", (_name, element) => {
+    expect(() => render(element)).toThrow(OUTSIDE_ROOT_ERROR);
+  });
+
+  it("throws when a Trigger is rendered outside an Item", () => {
+    expect(() =>
+      render(
+        <NavigationMenu.Root>
+          <NavigationMenu.List>
+            <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          </NavigationMenu.List>
+        </NavigationMenu.Root>,
+      ),
+    ).toThrow(OUTSIDE_ITEM_ERROR);
+  });
+});

package/src/NavigationMenu/__tests__/NavigationMenu.fixtures.tsx

@@ -0,0 +1,79 @@
+import type { ReactElement } from "react";
+
+import { NavigationMenu } from "../NavigationMenu";
+import type { NavigationMenuRootProps } from "../types";
+
+/** The three-entry nav used across the interaction suites: two panelled
+ * entries either side of a plain link entry, which is what exercises the
+ * "an Item without a value is a link, not a disclosure" contract. */
+export function ThreeEntryNav(props: NavigationMenuRootProps): ReactElement {
+  return (
+    <NavigationMenu.Root {...props}>
+      <NavigationMenu.List>
+        <NavigationMenu.Item value="concepts">
+          <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="concepts-panel">
+            <NavigationMenu.Link href="/tokens">Tokens</NavigationMenu.Link>
+            <NavigationMenu.Link href="/themes">Themes</NavigationMenu.Link>
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+        <NavigationMenu.Item>
+          <NavigationMenu.Link href="/changelog">Changelog</NavigationMenu.Link>
+        </NavigationMenu.Item>
+        <NavigationMenu.Item value="registry">
+          <NavigationMenu.Trigger>Registry &amp; CLI</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="registry-panel">
+            <NavigationMenu.Link href="/cli">CLI</NavigationMenu.Link>
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+    </NavigationMenu.Root>
+  );
+}
+
+/** A nav whose two disclosure entries are both dead ends for keyboard focus:
+ * `panelless` renders no `Content` at all, and `prose`'s panel holds nothing
+ * focusable. Between them they cover the enter-panel arrow's two
+ * nothing-to-focus cases — no panel element, and a panel with no target. */
+export function DeadEndNav(props: NavigationMenuRootProps): ReactElement {
+  return (
+    <NavigationMenu.Root {...props}>
+      <NavigationMenu.List>
+        <NavigationMenu.Item value="panelless">
+          <NavigationMenu.Trigger>Panelless</NavigationMenu.Trigger>
+        </NavigationMenu.Item>
+        <NavigationMenu.Item value="prose">
+          <NavigationMenu.Trigger>Prose</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="prose-panel">
+            Nothing in this panel can take focus.
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+    </NavigationMenu.Root>
+  );
+}
+
+/** Arrow-key cases for a horizontal LTR nav. `from` / `expected` are the
+ * accessible names of the top-level entries in `ThreeEntryNav`. */
+export const horizontalArrowCases = [
+  { key: "{ArrowRight}", from: "Concepts", expected: "Changelog" },
+  { key: "{ArrowRight}", from: "Registry & CLI", expected: "Concepts" },
+  { key: "{ArrowLeft}", from: "Concepts", expected: "Registry & CLI" },
+  { key: "{ArrowLeft}", from: "Changelog", expected: "Concepts" },
+  { key: "{Home}", from: "Changelog", expected: "Concepts" },
+  { key: "{End}", from: "Concepts", expected: "Registry & CLI" },
+] as const;
+
+/** The same movements under `dir="rtl"`: only the horizontal pair inverts,
+ * Home/End stay anchored to the start/end of the list. */
+export const rtlArrowCases = [
+  { key: "{ArrowLeft}", from: "Concepts", expected: "Changelog" },
+  { key: "{ArrowRight}", from: "Concepts", expected: "Registry & CLI" },
+  { key: "{Home}", from: "Changelog", expected: "Concepts" },
+] as const;
+
+/** Vertical orientation binds the up/down pair instead. */
+export const verticalArrowCases = [
+  { key: "{ArrowDown}", from: "Concepts", expected: "Changelog" },
+  { key: "{ArrowUp}", from: "Concepts", expected: "Registry & CLI" },
+] as const;

package/src/NavigationMenu/__tests__/NavigationMenu.forceMount.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { NavigationMenu } from "../NavigationMenu";
+
+function Nav({ forceMount }: { forceMount?: boolean }) {
+  return (
+    <NavigationMenu.Root>
+      <NavigationMenu.List>
+        <NavigationMenu.Item value="concepts">
+          <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="panel" forceMount={forceMount}>
+            <NavigationMenu.Link href="/tokens">Tokens</NavigationMenu.Link>
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+    </NavigationMenu.Root>
+  );
+}
+
+describe("NavigationMenu.Content — forceMount", () => {
+  it("leaves a closed panel out of the accessibility tree without hiding it", () => {
+    render(<Nav forceMount />);
+
+    const panel = screen.getByTestId("panel");
+
+    expect(panel).not.toHaveAttribute("hidden");
+    expect(panel).toHaveAttribute("aria-hidden", "true");
+    expect(panel).toHaveAttribute("data-state", "closed");
+  });
+
+  it("drops aria-hidden once the panel opens", async () => {
+    const user = userEvent.setup();
+    render(<Nav forceMount />);
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    const panel = screen.getByTestId("panel");
+
+    expect(panel).not.toHaveAttribute("aria-hidden");
+    expect(panel).toHaveAttribute("data-state", "open");
+  });
+
+  it("uses hidden when forceMount is not set", () => {
+    render(<Nav />);
+
+    const panel = screen.getByTestId("panel");
+
+    expect(panel).toHaveAttribute("hidden");
+    expect(panel).not.toHaveAttribute("aria-hidden");
+  });
+});