@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,167 @@
+import "./dialog-polyfill";
+
+import { render, screen } from "@testing-library/react";
+
+import { Modal } from "../Modal";
+
+function getDialog() {
+  return document.querySelector("dialog") as HTMLDialogElement;
+}
+
+describe("Modal accessibility — Title and Description", () => {
+  it("renders Title as an <h2> with its children", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Title>Payment</Modal.Title>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const heading = screen.getByRole("heading", { level: 2, name: "Payment" });
+    expect(heading.tagName).toBe("H2");
+  });
+
+  it("renders Description as a <p> with its children", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Description>Enter your card details</Modal.Description>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const paragraph = screen.getByText("Enter your card details");
+    expect(paragraph.tagName).toBe("P");
+  });
+
+  it("wires aria-labelledby on the dialog to the Title's id", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Title>Payment</Modal.Title>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const heading = screen.getByRole("heading", { level: 2, name: "Payment" });
+    const dialog = getDialog();
+    expect(heading.id).toBeTruthy();
+    expect(dialog).toHaveAttribute("aria-labelledby", heading.id);
+  });
+
+  it("wires aria-describedby on the dialog to the Description's id", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Description>Enter your card details</Modal.Description>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const paragraph = screen.getByText("Enter your card details");
+    const dialog = getDialog();
+    expect(paragraph.id).toBeTruthy();
+    expect(dialog).toHaveAttribute("aria-describedby", paragraph.id);
+  });
+
+  it("has neither aria-labelledby nor aria-describedby when Title/Description are absent", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content data-testid="content">body</Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const dialog = getDialog();
+    expect(dialog).not.toHaveAttribute("aria-labelledby");
+    expect(dialog).not.toHaveAttribute("aria-describedby");
+  });
+
+  it("drops aria-labelledby when the Title unmounts", () => {
+    // Arrange
+    const { rerender } = render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Title>Payment</Modal.Title>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+    expect(getDialog()).toHaveAttribute("aria-labelledby");
+
+    // Act
+    rerender(
+      <Modal.Root defaultOpen>
+        <Modal.Content>body</Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    expect(getDialog()).not.toHaveAttribute("aria-labelledby");
+  });
+
+  it("drops aria-describedby when the Description unmounts", () => {
+    // Arrange
+    const { rerender } = render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Description>Enter your card details</Modal.Description>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+    expect(getDialog()).toHaveAttribute("aria-describedby");
+
+    // Act
+    rerender(
+      <Modal.Root defaultOpen>
+        <Modal.Content>body</Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    expect(getDialog()).not.toHaveAttribute("aria-describedby");
+  });
+
+  it("forwards extra HTML attributes (e.g. className) to the Description element", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Description className="my-description" data-testid="desc-el">
+            Enter your card details
+          </Modal.Description>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const paragraph = screen.getByTestId("desc-el");
+    expect(paragraph).toHaveClass("my-description");
+  });
+
+  it("forwards extra HTML attributes (e.g. className) to the Title element", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Title className="my-title" data-testid="title-el">
+            Payment
+          </Modal.Title>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const heading = screen.getByTestId("title-el");
+    expect(heading).toHaveClass("my-title");
+  });
+});

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

@@ -0,0 +1,162 @@
+import "./dialog-polyfill";
+
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Modal } from "../Modal";
+
+describe("Modal.Trigger — asChild", () => {
+  it("renders the consumer-supplied element instead of a button", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root>
+        <Modal.Trigger asChild>
+          <a href="/foo" data-testid="link">
+            Open
+          </a>
+        </Modal.Trigger>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const link = screen.getByTestId("link");
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("aria-haspopup", "dialog");
+    expect(link).toHaveAttribute("aria-expanded", "false");
+    expect(link).toHaveAttribute("aria-controls");
+  });
+
+  it("still opens the modal when the slotted element is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Modal.Root onOpenChange={onOpenChange}>
+        <Modal.Trigger asChild>
+          <a href="/foo" data-testid="link">
+            Open
+          </a>
+        </Modal.Trigger>
+      </Modal.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByTestId("link"));
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("composes the consumer's ref with the library's", () => {
+    // Arrange
+    const ref = createRef<HTMLAnchorElement>();
+
+    // Act
+    render(
+      <Modal.Root>
+        <Modal.Trigger asChild>
+          <a ref={ref} href="/foo" data-testid="link">
+            Open
+          </a>
+        </Modal.Trigger>
+      </Modal.Root>,
+    );
+
+    // Assert
+    expect(ref.current).toBe(screen.getByTestId("link"));
+  });
+});
+
+describe("Modal.Close — asChild", () => {
+  it("renders the consumer-supplied element and closes on click", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Modal.Root open={true} onOpenChange={onOpenChange}>
+        <Modal.Content>
+          <Modal.Close asChild>
+            <a href="#" data-testid="close-link">
+              Dismiss
+            </a>
+          </Modal.Close>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByTestId("close-link"));
+
+    // Assert
+    const link = screen.getByTestId("close-link");
+    expect(link.tagName).toBe("A");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("Modal.Title — asChild", () => {
+  it("renders the consumer-supplied heading and still registers aria-labelledby", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Title asChild>
+            <h3 data-testid="custom-title">Payment</h3>
+          </Modal.Title>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const heading = screen.getByTestId("custom-title");
+    expect(heading.tagName).toBe("H3");
+    const dialog = document.querySelector("dialog") as HTMLDialogElement;
+    expect(dialog).toHaveAttribute("aria-labelledby", heading.id);
+    expect(heading.id).toBeTruthy();
+  });
+});
+
+describe("Modal.Description — asChild", () => {
+  it("renders the consumer-supplied element and still registers aria-describedby", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content>
+          <Modal.Description asChild>
+            <div data-testid="custom-description">Enter card details</div>
+          </Modal.Description>
+        </Modal.Content>
+      </Modal.Root>,
+    );
+
+    // Assert
+    const description = screen.getByTestId("custom-description");
+    expect(description.tagName).toBe("DIV");
+    const dialog = document.querySelector("dialog") as HTMLDialogElement;
+    expect(dialog).toHaveAttribute("aria-describedby", description.id);
+    expect(description.id).toBeTruthy();
+  });
+});
+
+describe("Modal.Overlay — asChild", () => {
+  it("renders the consumer-supplied element with the overlay's ARIA and data-state forwarded", () => {
+    // Arrange & Act
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Portal>
+          <Modal.Overlay asChild>
+            <section data-testid="custom-overlay" />
+          </Modal.Overlay>
+          <Modal.Content>body</Modal.Content>
+        </Modal.Portal>
+      </Modal.Root>,
+    );
+    const overlay = screen.getByTestId("custom-overlay");
+
+    // Assert — Slot-composed tag, ARIA, and data-state are forwarded to the consumer element
+    expect(overlay.tagName).toBe("SECTION");
+    expect(overlay).toHaveAttribute("aria-hidden", "true");
+    expect(overlay).toHaveAttribute("data-state", "open");
+  });
+});

package/src/Modal/__tests__/Modal.click-outside.test.tsx

@@ -0,0 +1,115 @@
+import "./dialog-polyfill";
+
+import { act, fireEvent, render } from "@testing-library/react";
+
+import { Modal } from "../Modal";
+
+function getDialog() {
+  return document.querySelector("dialog") as HTMLDialogElement;
+}
+
+function stubRect(
+  dialog: HTMLDialogElement,
+  rect: { left: number; top: number; right: number; bottom: number },
+) {
+  const domRect = {
+    ...rect,
+    x: rect.left,
+    y: rect.top,
+    width: rect.right - rect.left,
+    height: rect.bottom - rect.top,
+    toJSON() {
+      return this;
+    },
+  } as DOMRect;
+  dialog.getBoundingClientRect = () => domRect;
+}
+
+describe("Modal.Content — click-outside via dialog bounding rect", () => {
+  it("closes the modal when pointerdown lands outside the dialog's rect (the native ::backdrop area)", () => {
+    // Arrange — dialog occupies the middle 200x200 of the viewport
+    const onOpenChange = vi.fn();
+    render(
+      <Modal.Root open={true} onOpenChange={onOpenChange}>
+        <Modal.Content>body</Modal.Content>
+      </Modal.Root>,
+    );
+    const dialog = getDialog();
+    stubRect(dialog, { left: 100, top: 100, right: 300, bottom: 300 });
+
+    // Act — pointerdown at (50, 50), outside the rect
+    act(() => {
+      fireEvent.pointerDown(dialog, { clientX: 50, clientY: 50 });
+    });
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("does not close the modal when pointerdown lands inside the dialog's rect (content or padding)", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <Modal.Root open={true} onOpenChange={onOpenChange}>
+        <Modal.Content>body</Modal.Content>
+      </Modal.Root>,
+    );
+    const dialog = getDialog();
+    stubRect(dialog, { left: 100, top: 100, right: 300, bottom: 300 });
+
+    // Act — pointerdown at (200, 200), inside the rect
+    act(() => {
+      fireEvent.pointerDown(dialog, { clientX: 200, clientY: 200 });
+    });
+
+    // Assert
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("fires onPointerDownOutside with the native event when the backdrop is pressed", () => {
+    // Arrange
+    const onPointerDownOutside = vi.fn();
+    render(
+      <Modal.Root defaultOpen>
+        <Modal.Content onPointerDownOutside={onPointerDownOutside}>
+          body
+        </Modal.Content>
+      </Modal.Root>,
+    );
+    const dialog = getDialog();
+    stubRect(dialog, { left: 100, top: 100, right: 300, bottom: 300 });
+
+    // Act
+    act(() => {
+      fireEvent.pointerDown(dialog, { clientX: 50, clientY: 50 });
+    });
+
+    // Assert
+    expect(onPointerDownOutside).toHaveBeenCalledTimes(1);
+    expect(onPointerDownOutside.mock.calls[0][0]).toBeInstanceOf(Event);
+  });
+
+  it("does not close when the consumer's onPointerDownOutside calls event.preventDefault()", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <Modal.Root open={true} onOpenChange={onOpenChange}>
+        <Modal.Content
+          onPointerDownOutside={(event) => event.preventDefault()}
+        >
+          body
+        </Modal.Content>
+      </Modal.Root>,
+    );
+    const dialog = getDialog();
+    stubRect(dialog, { left: 100, top: 100, right: 300, bottom: 300 });
+
+    // Act
+    act(() => {
+      fireEvent.pointerDown(dialog, { clientX: 50, clientY: 50 });
+    });
+
+    // Assert
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});

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

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