@primitiv-ui/react 0.1.28 → 0.1.29

package/src/NavigationMenu/__tests__/NavigationMenu.hover-interaction.test.tsx

@@ -0,0 +1,254 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ThreeEntryNav } from "./NavigationMenu.fixtures";
+
+describe("NavigationMenu — hover interaction", () => {
+  it("opens a panel once the delayDuration elapses on pointer enter", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={1} />);
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("concepts-panel")).toBeVisible(),
+    );
+  });
+
+  it("cancels the pending open when the pointer leaves before the delay elapses", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={5000} />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    await user.hover(trigger);
+    await user.unhover(trigger);
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("switches panels with no delay while one is already open", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={5000} defaultValue="concepts" />);
+
+    await user.hover(screen.getByRole("button", { name: "Registry & CLI" }));
+
+    expect(screen.getByTestId("registry-panel")).toBeVisible();
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("keeps the panel open while the pointer moves from trigger into content", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" closeDelay={1} />);
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    await user.hover(screen.getByRole("link", { name: "Tokens" }));
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("closes after the closeDelay once the pointer leaves the nav", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav defaultValue="concepts" closeDelay={1} />);
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    await user.unhover(screen.getByRole("navigation", { name: "Main" }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("concepts-panel")).not.toBeVisible(),
+    );
+  });
+
+  it("forgets the pointer's arrival once it leaves, so Enter still toggles", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={0} closeDelay={5000} />);
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+
+    await user.hover(trigger);
+    await user.hover(screen.getByRole("list"));
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    // The pointer has gone, so there is no arrival state left to toggle
+    // against: Enter has to read the panel that is actually open.
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("ignores hover entirely when openOnHover is false", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav openOnHover={false} delayDuration={1} />);
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("leaves the panel open when a click follows the pointer's own hover-open", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={0} />);
+
+    // user.click fires pointerenter first, which opens the panel; the click
+    // must not read that as "already open" and undo it.
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("closes on a second click while the trigger is still hovered", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={0} />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    await user.click(trigger);
+    await user.click(trigger);
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+});
+
+/** Lets real time pass so a timer that was *not* cancelled gets its chance to
+ * fire. Wrapped in `act` at the call site: a state update from a timer that
+ * fires outside `act` is queued rather than applied, so an unwrapped wait
+ * cannot see the panel it opened. */
+function waitPast(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * The timing half of hover intent, where "the timer was cancelled" has to stay
+ * distinguishable from "the timer hasn't fired yet". Two techniques do that:
+ *
+ * - **A short delay plus a real wait several times past it.** A panel that is
+ *   still closed then was cancelled, not merely outrun. The delay also has to
+ *   outlast the gap before the cancelling action, or a loaded machine lets the
+ *   timer win that race and the test flakes.
+ * - **`delay: null` with a multi-step `user.pointer` call.** `userEvent`
+ *   normally awaits a macrotask between events, which is long enough for a
+ *   zero-delay timer to fire and so hides the difference between opening *now*
+ *   and opening *on the next tick*. With the waits switched off, the whole
+ *   pointer sequence runs before any timer gets a turn.
+ *
+ * Where the pointer is meant to stay inside the nav it moves to the `<ul>`
+ * rather than out: leaving the `<nav>` runs `closeWithDelay`, which cancels a
+ * pending open of its own and would mask what the trigger's own leave handler
+ * does.
+ */
+describe("NavigationMenu — hover intent timing", () => {
+  it("opens on a zero delay outright, so leaving straight away cannot undo it", async () => {
+    const user = userEvent.setup({ delay: null });
+    render(<ThreeEntryNav delayDuration={0} />);
+
+    await user.pointer([
+      { target: screen.getByRole("button", { name: "Concepts" }) },
+      { target: screen.getByRole("list") },
+    ]);
+
+    // Zero means "now": the panel is already open by the time the pointer has
+    // moved off, so there is no pending open left for the leave to cancel.
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("drops the pending open when the pointer leaves the trigger for the list", async () => {
+    const user = userEvent.setup({ delay: null });
+    render(<ThreeEntryNav delayDuration={100} />);
+
+    await user.pointer([
+      { target: screen.getByRole("button", { name: "Concepts" }) },
+      { target: screen.getByRole("list") },
+    ]);
+    await act(() => waitPast(400));
+
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+
+  it("abandons a pending open when the nav unmounts", async () => {
+    const user = userEvent.setup({ delay: null });
+    const onValueChange = vi.fn();
+    const { unmount } = render(
+      <ThreeEntryNav
+        value=""
+        onValueChange={onValueChange}
+        delayDuration={100}
+      />,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    // Nothing has opened yet, so the timer this cancels is genuinely pending.
+    expect(onValueChange).not.toHaveBeenCalled();
+    unmount();
+    await act(() => waitPast(400));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("keeps the panel open past the closeDelay when the pointer returns", async () => {
+    const user = userEvent.setup({ delay: null });
+    render(<ThreeEntryNav defaultValue="concepts" closeDelay={100} />);
+    const nav = screen.getByRole("navigation", { name: "Main" });
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    await user.pointer([{ target: document.body }, { target: nav }]);
+    await act(() => waitPast(400));
+
+    // Returning has to cancel the pending close outright — not merely outrun it.
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("honours a delayDuration changed after the first render", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(<ThreeEntryNav delayDuration={5000} />);
+
+    rerender(<ThreeEntryNav delayDuration={0} />);
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(screen.getByTestId("concepts-panel")).toBeVisible();
+  });
+
+  it("honours a closeDelay changed after the first render", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <ThreeEntryNav defaultValue="concepts" closeDelay={5000} />,
+    );
+
+    rerender(<ThreeEntryNav defaultValue="concepts" closeDelay={20} />);
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    await user.unhover(screen.getByRole("navigation", { name: "Main" }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("concepts-panel")).not.toBeVisible(),
+    );
+  });
+
+  it("requests the delayed close with the empty string", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <ThreeEntryNav
+        value="concepts"
+        onValueChange={onValueChange}
+        closeDelay={20}
+      />,
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Concepts" }));
+    await user.unhover(screen.getByRole("navigation", { name: "Main" }));
+
+    await waitFor(() => expect(onValueChange).toHaveBeenCalledWith(""));
+  });
+
+  it("closes a panel the pointer left and re-entered while it was open", async () => {
+    const user = userEvent.setup();
+    render(<ThreeEntryNav delayDuration={0} />);
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+
+    await user.hover(trigger);
+    await user.hover(screen.getByRole("list"));
+    await user.hover(trigger);
+    await user.click(trigger);
+
+    // The second arrival sees an open panel, so the click that follows it is a
+    // close — the arrival value has to be read live, not captured at mount.
+    expect(screen.getByTestId("concepts-panel")).not.toBeVisible();
+  });
+});

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

@@ -0,0 +1,252 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { NavigationMenu } from "../NavigationMenu";
+import type { NavigationMenuRootProps } from "../types";
+
+/** jsdom reports every offset as 0, so the geometry the Indicator reads has to
+ * be planted on the element first. */
+function plantGeometry(
+  element: HTMLElement,
+  box: { left: number; width: number; top: number; height: number },
+) {
+  Object.defineProperty(element, "offsetLeft", {
+    value: box.left,
+    configurable: true,
+  });
+  Object.defineProperty(element, "offsetWidth", {
+    value: box.width,
+    configurable: true,
+  });
+  Object.defineProperty(element, "offsetTop", {
+    value: box.top,
+    configurable: true,
+  });
+  Object.defineProperty(element, "offsetHeight", {
+    value: box.height,
+    configurable: true,
+  });
+}
+
+function Nav(props: NavigationMenuRootProps) {
+  return (
+    <NavigationMenu.Root {...props}>
+      <NavigationMenu.List>
+        <NavigationMenu.Item value="concepts">
+          <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="concepts-panel" />
+        </NavigationMenu.Item>
+        <NavigationMenu.Item value="registry">
+          <NavigationMenu.Trigger>Registry</NavigationMenu.Trigger>
+          <NavigationMenu.Content data-testid="registry-panel" />
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+      <NavigationMenu.Indicator data-testid="indicator" />
+    </NavigationMenu.Root>
+  );
+}
+
+describe("NavigationMenu.Indicator", () => {
+  it("stays hidden while nothing is open", () => {
+    render(<Nav />);
+
+    const indicator = screen.getByTestId("indicator");
+
+    expect(indicator).toHaveAttribute("hidden");
+    expect(indicator).toHaveAttribute("data-state", "closed");
+  });
+
+  it("publishes the open trigger's horizontal geometry", async () => {
+    const user = userEvent.setup();
+    render(<Nav />);
+
+    plantGeometry(screen.getByRole("button", { name: "Registry" }), {
+      left: 120,
+      width: 80,
+      top: 4,
+      height: 32,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Registry" }));
+
+    const indicator = screen.getByTestId("indicator");
+
+    expect(indicator).not.toHaveAttribute("hidden");
+    expect(indicator).toHaveAttribute("data-state", "open");
+    expect(indicator.style.getPropertyValue(
+      "--primitiv-navigation-menu-indicator-position",
+    )).toBe("120px");
+    expect(indicator.style.getPropertyValue(
+      "--primitiv-navigation-menu-indicator-size",
+    )).toBe("80px");
+  });
+
+  it("measures the cross axis when vertical", async () => {
+    const user = userEvent.setup();
+    render(<Nav orientation="vertical" />);
+
+    plantGeometry(screen.getByRole("button", { name: "Registry" }), {
+      left: 120,
+      width: 80,
+      top: 48,
+      height: 36,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Registry" }));
+
+    const indicator = screen.getByTestId("indicator");
+
+    expect(indicator.style.getPropertyValue(
+      "--primitiv-navigation-menu-indicator-position",
+    )).toBe("48px");
+    expect(indicator.style.getPropertyValue(
+      "--primitiv-navigation-menu-indicator-size",
+    )).toBe("36px");
+  });
+
+  it("re-measures when the window resizes", async () => {
+    const user = userEvent.setup();
+    render(<Nav />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    plantGeometry(trigger, { left: 0, width: 60, top: 0, height: 32 });
+    await user.click(trigger);
+
+    plantGeometry(trigger, { left: 10, width: 90, top: 0, height: 32 });
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(
+      screen
+        .getByTestId("indicator")
+        .style.getPropertyValue("--primitiv-navigation-menu-indicator-size"),
+    ).toBe("90px");
+  });
+
+  it("clears the geometry when the panel closes", async () => {
+    const user = userEvent.setup();
+    render(<Nav />);
+
+    const trigger = screen.getByRole("button", { name: "Concepts" });
+    plantGeometry(trigger, { left: 8, width: 72, top: 0, height: 32 });
+
+    await user.click(trigger);
+    await user.click(trigger);
+
+    const indicator = screen.getByTestId("indicator");
+
+    // A marker left holding the last trigger's geometry would animate from the
+    // wrong place on the next open.
+    expect(
+      indicator.style.getPropertyValue(
+        "--primitiv-navigation-menu-indicator-position",
+      ),
+    ).toBe("");
+    expect(
+      indicator.style.getPropertyValue(
+        "--primitiv-navigation-menu-indicator-size",
+      ),
+    ).toBe("");
+  });
+
+  it("removes its resize listener on unmount", () => {
+    const addEventListener = vi.spyOn(window, "addEventListener");
+    const removeEventListener = vi.spyOn(window, "removeEventListener");
+
+    const { unmount } = render(<Nav />);
+    const measure = addEventListener.mock.calls.find(
+      ([type]) => type === "resize",
+    )?.[1];
+    unmount();
+
+    expect(measure).toBeTypeOf("function");
+    expect(removeEventListener).toHaveBeenCalledWith("resize", measure);
+
+    addEventListener.mockRestore();
+    removeEventListener.mockRestore();
+  });
+
+  it("carries the open value and the orientation as styling hooks", async () => {
+    const user = userEvent.setup();
+    render(<Nav />);
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    const indicator = screen.getByTestId("indicator");
+
+    expect(indicator).toHaveAttribute("data-value", "concepts");
+    expect(indicator).toHaveAttribute("data-orientation", "horizontal");
+  });
+
+  it("publishes no geometry when the open value has no rendered trigger", () => {
+    render(<Nav value="ghost" onValueChange={() => {}} />);
+
+    const indicator = screen.getByTestId("indicator");
+
+    // Open by state, but there is nothing to measure — better a marker with no
+    // geometry than one parked at 0.
+    expect(indicator).toHaveAttribute("data-state", "open");
+    expect(
+      indicator.style.getPropertyValue(
+        "--primitiv-navigation-menu-indicator-position",
+      ),
+    ).toBe("");
+  });
+
+  it("renders a consumer element instead of the div with asChild", async () => {
+    const user = userEvent.setup();
+    render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item value="concepts">
+            <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+        <NavigationMenu.Indicator asChild>
+          <svg data-testid="arrow" viewBox="0 0 10 10" aria-hidden>
+            <polygon points="0,10 5,0 10,10" />
+          </svg>
+        </NavigationMenu.Indicator>
+      </NavigationMenu.Root>,
+    );
+
+    const arrow = screen.getByTestId("arrow");
+    plantGeometry(screen.getByRole("button", { name: "Concepts" }), {
+      left: 24,
+      width: 64,
+      top: 0,
+      height: 32,
+    });
+
+    expect(arrow.tagName).toBe("svg");
+    expect(arrow).toHaveAttribute("data-state", "closed");
+
+    await user.click(screen.getByRole("button", { name: "Concepts" }));
+
+    expect(arrow).toHaveAttribute("data-state", "open");
+    expect(
+      arrow.style.getPropertyValue(
+        "--primitiv-navigation-menu-indicator-position",
+      ),
+    ).toBe("24px");
+  });
+
+  it("keeps a force-mounted indicator unhidden so it can animate away", () => {
+    render(<Nav />);
+    const { container } = render(
+      <NavigationMenu.Root>
+        <NavigationMenu.List>
+          <NavigationMenu.Item value="concepts">
+            <NavigationMenu.Trigger>Concepts</NavigationMenu.Trigger>
+          </NavigationMenu.Item>
+        </NavigationMenu.List>
+        <NavigationMenu.Indicator forceMount />
+      </NavigationMenu.Root>,
+    );
+
+    const indicator = container.querySelector("nav > div");
+
+    expect(indicator).not.toHaveAttribute("hidden");
+  });
+});