@primitiv-ui/react 0.1.38 → 0.1.39

package/src/Modal/__tests__/Modal.content.test.tsx

@@ -1,193 +0,0 @@
-import "./dialog-polyfill";
-
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { createRef, useState } from "react";
-
-import { Modal } from "../Modal";
-
-function getDialog() {
-  return document.querySelector("dialog") as HTMLDialogElement;
-}
-
-describe("Modal.Content — native <dialog> behaviour", () => {
-  it("calls showModal() when open flips to true", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const showModal = vi.spyOn(HTMLDialogElement.prototype, "showModal");
-    render(
-      <Modal.Root>
-        <Modal.Trigger>Open</Modal.Trigger>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Open" }));
-
-    // Assert
-    expect(showModal).toHaveBeenCalledTimes(1);
-    expect(getDialog().open).toBe(true);
-
-    showModal.mockRestore();
-  });
-
-  it("calls close() when open flips to false", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const close = vi.spyOn(HTMLDialogElement.prototype, "close");
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Trigger>Open</Modal.Trigger>
-        <Modal.Close>Close</Modal.Close>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-    expect(getDialog().open).toBe(true);
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Close" }));
-
-    // Assert
-    expect(close).toHaveBeenCalled();
-    expect(getDialog().open).toBe(false);
-
-    close.mockRestore();
-  });
-
-  it("calls showModal() on initial mount when defaultOpen is true", () => {
-    // Arrange
-    const showModal = vi.spyOn(HTMLDialogElement.prototype, "showModal");
-
-    // Act
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Assert
-    expect(showModal).toHaveBeenCalledTimes(1);
-
-    showModal.mockRestore();
-  });
-
-  it("does not call showModal() when already open (idempotent)", () => {
-    // Arrange
-    const showModal = vi.spyOn(HTMLDialogElement.prototype, "showModal");
-    const { rerender } = render(
-      <Modal.Root open={true} onOpenChange={() => undefined}>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-    expect(showModal).toHaveBeenCalledTimes(1);
-
-    // Act: re-render with same open=true
-    rerender(
-      <Modal.Root open={true} onOpenChange={() => undefined}>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Assert
-    expect(showModal).toHaveBeenCalledTimes(1);
-
-    showModal.mockRestore();
-  });
-
-  it("does not call close() when already closed (idempotent)", () => {
-    // Arrange
-    const close = vi.spyOn(HTMLDialogElement.prototype, "close");
-
-    // Act: mount with open=false (never opened)
-    render(
-      <Modal.Root open={false} onOpenChange={() => undefined}>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Assert
-    expect(close).not.toHaveBeenCalled();
-
-    close.mockRestore();
-  });
-
-  it("sets data-state='open' when open and 'closed' when closed", async () => {
-    // Arrange
-    function Wrapper() {
-      const [open, setOpen] = useState(false);
-      return (
-        <Modal.Root open={open} onOpenChange={setOpen}>
-          <Modal.Trigger>Open</Modal.Trigger>
-          <Modal.Content>body</Modal.Content>
-        </Modal.Root>
-      );
-    }
-    const user = userEvent.setup();
-    render(<Wrapper />);
-    const dialog = getDialog();
-
-    // Assert initial
-    expect(dialog).toHaveAttribute("data-state", "closed");
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Open" }));
-
-    // Assert open
-    expect(dialog).toHaveAttribute("data-state", "open");
-  });
-
-  it("closes via onOpenChange when the native close event fires", () => {
-    // Arrange
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={true} onOpenChange={onOpenChange}>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-    const dialog = getDialog();
-
-    // Act — simulate the browser firing close (e.g. form method=dialog submit)
-    act(() => {
-      dialog.dispatchEvent(new Event("close"));
-    });
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("closes via onOpenChange when the native cancel event fires (Esc)", () => {
-    // Arrange
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={true} onOpenChange={onOpenChange}>
-        <Modal.Content>body</Modal.Content>
-      </Modal.Root>,
-    );
-    const dialog = getDialog();
-
-    // Act
-    act(() => {
-      fireEvent(dialog, new Event("cancel", { cancelable: true }));
-    });
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("forwards a consumer-supplied ref to the underlying <dialog>", () => {
-    // Arrange
-    const ref = createRef<HTMLDialogElement>();
-
-    // Act
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content ref={ref}>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Assert
-    expect(ref.current).toBe(getDialog());
-    expect(ref.current?.tagName).toBe("DIALOG");
-  });
-});

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

@@ -1,120 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useState } from "react";
-
-import { Modal } from "../Modal";
-
-describe("Modal — controlled state", () => {
-  it("reflects the consumer's open prop on the trigger", () => {
-    // Arrange & Act
-    render(
-      <Modal.Root open={true} onOpenChange={() => undefined}>
-        <Modal.Trigger>Open</Modal.Trigger>
-      </Modal.Root>,
-    );
-
-    // Assert
-    expect(screen.getByRole("button", { name: "Open" })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    );
-  });
-
-  it("calls onOpenChange(true) when the trigger is clicked in controlled mode", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={false} onOpenChange={onOpenChange}>
-        <Modal.Trigger>Open</Modal.Trigger>
-      </Modal.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Open" }));
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledTimes(1);
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-
-  it("calls onOpenChange(false) when Modal.Close is clicked in controlled mode", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={true} onOpenChange={onOpenChange}>
-        <Modal.Close>Close</Modal.Close>
-      </Modal.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Close" }));
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("does not flip state internally when controlled — consumer must drive open", async () => {
-    // Arrange: consumer renders with open=false and deliberately ignores changes
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={false} onOpenChange={onOpenChange}>
-        <Modal.Trigger>Open</Modal.Trigger>
-      </Modal.Root>,
-    );
-    const trigger = screen.getByRole("button", { name: "Open" });
-
-    // Act
-    await user.click(trigger);
-
-    // Assert: aria-expanded stays false because consumer never flipped open
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("updates when the consumer lifts state and drives open via onOpenChange", async () => {
-    // Arrange
-    function Wrapper() {
-      const [open, setOpen] = useState(false);
-      return (
-        <Modal.Root open={open} onOpenChange={setOpen}>
-          <Modal.Trigger>Open</Modal.Trigger>
-          <Modal.Close>Close</Modal.Close>
-        </Modal.Root>
-      );
-    }
-    const user = userEvent.setup();
-    render(<Wrapper />);
-    const trigger = screen.getByRole("button", { name: "Open" });
-
-    // Act
-    await user.click(trigger);
-
-    // Assert
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Close" }));
-
-    // Assert
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("calls onOpenChange from uncontrolled mode too (defaultOpen)", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root defaultOpen={false} onOpenChange={onOpenChange}>
-        <Modal.Trigger>Open</Modal.Trigger>
-      </Modal.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Open" }));
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-});

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

@@ -1,30 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { Modal } from "../Modal";
-
-describe("Modal — error handling", () => {
-  describe("context consumer null guard", () => {
-    it.each([
-      ["Modal.Trigger", <Modal.Trigger key="t">Open</Modal.Trigger>],
-      ["Modal.Portal", <Modal.Portal key="p">portal</Modal.Portal>],
-      ["Modal.Overlay", <Modal.Overlay key="o" />],
-      ["Modal.Content", <Modal.Content key="c">content</Modal.Content>],
-      ["Modal.Title", <Modal.Title key="ti">title</Modal.Title>],
-      ["Modal.Description", <Modal.Description key="d">desc</Modal.Description>],
-      ["Modal.Close", <Modal.Close key="cl">close</Modal.Close>],
-    ])(
-      "%s throws when rendered outside Modal.Root",
-      (_name, element) => {
-        // Arrange
-        const err = vi.spyOn(console, "error").mockImplementation(() => undefined);
-
-        // Act & Assert
-        expect(() => render(element)).toThrow(
-          "Component must be rendered as a child of Modal.Root",
-        );
-
-        err.mockRestore();
-      },
-    );
-  });
-});

package/src/Modal/__tests__/Modal.escape-hatches.test.tsx

@@ -1,99 +0,0 @@
-import "./dialog-polyfill";
-
-import { act, fireEvent, render } from "@testing-library/react";
-
-import { Modal } from "../Modal";
-
-function getDialog() {
-  return document.querySelector("dialog") as HTMLDialogElement;
-}
-
-describe("Modal.Content — onEscapeKeyDown", () => {
-  it("fires onEscapeKeyDown when the native cancel event is dispatched (Esc)", () => {
-    // Arrange
-    const onEscapeKeyDown = vi.fn();
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content onEscapeKeyDown={onEscapeKeyDown}>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Act
-    act(() => {
-      fireEvent(getDialog(), new Event("cancel", { cancelable: true }));
-    });
-
-    // Assert
-    expect(onEscapeKeyDown).toHaveBeenCalledTimes(1);
-  });
-
-  it("still closes the modal when the consumer does not veto", () => {
-    // Arrange
-    const onOpenChange = vi.fn();
-    const onEscapeKeyDown = vi.fn();
-    render(
-      <Modal.Root open={true} onOpenChange={onOpenChange}>
-        <Modal.Content onEscapeKeyDown={onEscapeKeyDown}>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Act
-    act(() => {
-      fireEvent(getDialog(), new Event("cancel", { cancelable: true }));
-    });
-
-    // Assert
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("does not close when the consumer calls event.preventDefault()", () => {
-    // Arrange
-    const onOpenChange = vi.fn();
-    render(
-      <Modal.Root open={true} onOpenChange={onOpenChange}>
-        <Modal.Content onEscapeKeyDown={(event) => event.preventDefault()}>
-          body
-        </Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Act
-    act(() => {
-      fireEvent(getDialog(), new Event("cancel", { cancelable: true }));
-    });
-
-    // Assert
-    expect(onOpenChange).not.toHaveBeenCalled();
-  });
-
-  it("sees the latest onEscapeKeyDown across re-renders", () => {
-    // Arrange
-    const first = vi.fn();
-    const second = vi.fn();
-    const { rerender } = render(
-      <Modal.Root defaultOpen>
-        <Modal.Content onEscapeKeyDown={first}>body</Modal.Content>
-      </Modal.Root>,
-    );
-    rerender(
-      <Modal.Root defaultOpen>
-        <Modal.Content onEscapeKeyDown={second}>body</Modal.Content>
-      </Modal.Root>,
-    );
-
-    // Act
-    act(() => {
-      fireEvent(getDialog(), new Event("cancel", { cancelable: true }));
-    });
-
-    // Assert
-    expect(first).not.toHaveBeenCalled();
-    expect(second).toHaveBeenCalledTimes(1);
-  });
-});
-
-// onPointerDownOutside is driven by the dialog's own pointerdown event
-// and is covered in Modal.click-outside.test.tsx — it used to be wired
-// through the sibling Overlay's onClick, but the native <dialog>'s
-// ::backdrop paints over the overlay so that path was unreachable in
-// real browsers.

package/src/Modal/__tests__/Modal.focus-trap.test.tsx

@@ -1,162 +0,0 @@
-import "./dialog-polyfill";
-
-import { createEvent, fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Modal } from "../Modal";
-
-function getDialog() {
-  return document.querySelector("dialog") as HTMLDialogElement;
-}
-
-// WAI-ARIA APG Modal Dialog pattern: Tab must cycle *within* the dialog and
-// never reach the browser chrome. A native <dialog> inerts the background but
-// does not wrap focus, so Modal.Content adds a boundary Tab-wrap trap. These
-// tests render a Trigger (outside the dialog) in the wrap cases so that,
-// without the trap, a native wrap would land on the Trigger — proving the
-// assertion is driven by the trap, not by jsdom's own tab order.
-describe("Modal focus trap — Tab cycles within the dialog", () => {
-  it("wraps focus from the last element back to the first on Tab", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Trigger>Open</Modal.Trigger>
-        <Modal.Content>
-          <button type="button">First</button>
-          <button type="button">Second</button>
-          <button type="button">Third</button>
-        </Modal.Content>
-      </Modal.Root>,
-    );
-    screen.getByRole("button", { name: "Third" }).focus();
-
-    // Act
-    await user.tab();
-
-    // Assert
-    expect(screen.getByRole("button", { name: "First" })).toHaveFocus();
-  });
-
-  it("leaves an interior forward Tab to native handling (no wrap)", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content>
-          <button type="button">First</button>
-          <button type="button">Second</button>
-          <button type="button">Third</button>
-        </Modal.Content>
-      </Modal.Root>,
-    );
-    screen.getByRole("button", { name: "First" }).focus();
-
-    // Act
-    await user.tab();
-
-    // Assert
-    expect(screen.getByRole("button", { name: "Second" })).toHaveFocus();
-  });
-
-  it("wraps focus from the first element to the last on Shift+Tab", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Trigger>Open</Modal.Trigger>
-        <Modal.Content>
-          <button type="button">First</button>
-          <button type="button">Second</button>
-          <button type="button">Third</button>
-        </Modal.Content>
-      </Modal.Root>,
-    );
-    screen.getByRole("button", { name: "First" }).focus();
-
-    // Act
-    await user.tab({ shift: true });
-
-    // Assert
-    expect(screen.getByRole("button", { name: "Third" })).toHaveFocus();
-  });
-
-  it("leaves an interior Shift+Tab to native handling (no wrap)", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content>
-          <button type="button">First</button>
-          <button type="button">Second</button>
-          <button type="button">Third</button>
-        </Modal.Content>
-      </Modal.Root>,
-    );
-    screen.getByRole("button", { name: "Second" }).focus();
-
-    // Act
-    await user.tab({ shift: true });
-
-    // Assert
-    expect(screen.getByRole("button", { name: "First" })).toHaveFocus();
-  });
-
-  it("ignores non-Tab keys (typing is never intercepted)", () => {
-    // Arrange
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content>
-          <button type="button">First</button>
-          <button type="button">Second</button>
-        </Modal.Content>
-      </Modal.Root>,
-    );
-    const first = screen.getByRole("button", { name: "First" });
-    first.focus();
-
-    // Act
-    const event = createEvent.keyDown(first, { key: "a" });
-    fireEvent(first, event);
-
-    // Assert
-    expect(first).toHaveFocus();
-    expect(event.defaultPrevented).toBe(false);
-  });
-
-  it("blocks Tab when the dialog has no focusable content", () => {
-    // Arrange
-    render(
-      <Modal.Root defaultOpen>
-        <Modal.Content>Just text, nothing to focus.</Modal.Content>
-      </Modal.Root>,
-    );
-    const dialog = getDialog();
-
-    // Act
-    const event = createEvent.keyDown(dialog, { key: "Tab" });
-    fireEvent(dialog, event);
-
-    // Assert — Tab is swallowed so focus cannot escape to the browser chrome.
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it("stays inactive while the dialog is closed", () => {
-    // Arrange — Content always renders its <dialog>; without defaultOpen it is
-    // mounted but closed, so the trap must not fire.
-    render(
-      <Modal.Root>
-        <Modal.Content>Just text, nothing to focus.</Modal.Content>
-      </Modal.Root>,
-    );
-    const dialog = getDialog();
-    expect(dialog.open).toBe(false);
-
-    // Act
-    const event = createEvent.keyDown(dialog, { key: "Tab" });
-    fireEvent(dialog, event);
-
-    // Assert — the guard returns before the empty-content block would preventDefault.
-    expect(event.defaultPrevented).toBe(false);
-  });
-});