@primitiv-ui/react 0.1.38 → 0.1.39

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

@@ -1,92 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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");
-  });
-});