@primitiv-ui/react 0.1.38 → 0.1.39

package/src/Checkbox/__tests__/Checkbox.disabled.test.tsx

@@ -1,45 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox disabled state", () => {
-  it("disables the underlying native input", () => {
-    // Arrange & Act
-    render(<Checkbox.Root disabled aria-label="Accept terms" />);
-
-    // Assert
-    expect(screen.getByRole("checkbox", { name: "Accept terms" })).toBeDisabled();
-  });
-
-  it('sets data-disabled="" on the box so CSS can target the disabled state', () => {
-    // Arrange & Act
-    const { container } = render(<Checkbox.Root disabled aria-label="Accept terms" />);
-
-    // Assert
-    expect(container.querySelector("label")).toHaveAttribute("data-disabled", "");
-  });
-
-  it("omits data-disabled when not disabled", () => {
-    // Arrange & Act
-    const { container } = render(<Checkbox.Root aria-label="Accept terms" />);
-
-    // Assert
-    expect(container.querySelector("label")).not.toHaveAttribute("data-disabled");
-  });
-
-  it("does not fire onCheckedChange when a disabled checkbox is clicked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox.Root disabled onCheckedChange={onCheckedChange} aria-label="Accept terms" />,
-    );
-
-    // Act
-    await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
-
-    // Assert
-    expect(onCheckedChange).not.toHaveBeenCalled();
-  });
-});

package/src/Checkbox/__tests__/Checkbox.form.test.tsx

@@ -1,53 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-/**
- * The checkbox is a real native input, so it participates in forms: a checked
- * box submits its `value` under `name`, and an unchecked one submits nothing.
- * The old `<button role="checkbox">` could do neither.
- */
-describe("Checkbox form participation", () => {
-  function NewsletterForm({ onSubmit }: { onSubmit: (value: string | null) => void }) {
-    return (
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          const data = new FormData(event.currentTarget);
-          onSubmit(data.get("newsletter") as string | null);
-        }}
-      >
-        <Checkbox.Root name="newsletter" value="weekly" aria-label="Subscribe" />
-        <button type="submit">Save</button>
-      </form>
-    );
-  }
-
-  it("submits the value when checked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onSubmit = vi.fn();
-    render(<NewsletterForm onSubmit={onSubmit} />);
-
-    // Act
-    await user.click(screen.getByRole("checkbox", { name: "Subscribe" }));
-    await user.click(screen.getByRole("button", { name: "Save" }));
-
-    // Assert
-    expect(onSubmit).toHaveBeenCalledWith("weekly");
-  });
-
-  it("submits nothing when unchecked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onSubmit = vi.fn();
-    render(<NewsletterForm onSubmit={onSubmit} />);
-
-    // Act
-    await user.click(screen.getByRole("button", { name: "Save" }));
-
-    // Assert
-    expect(onSubmit).toHaveBeenCalledWith(null);
-  });
-});

package/src/Checkbox/__tests__/Checkbox.indeterminate.test.tsx

@@ -1,76 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox indeterminate state", () => {
-  it('marks the input partially-checked (aria mixed) when defaultChecked is "indeterminate"', () => {
-    // Arrange & Act
-    render(<Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms" />);
-
-    // Assert
-    expect(
-      screen.getByRole("checkbox", { name: "Accept terms" }),
-    ).toBePartiallyChecked();
-  });
-
-  it('sets data-state="indeterminate" on the box in indeterminate mode', () => {
-    // Arrange & Act
-    const { container } = render(
-      <Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms" />,
-    );
-
-    // Assert
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "indeterminate",
-    );
-  });
-
-  it("resolves to checked=true on the first click (WAI-ARIA tri-state convention)", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    const { container } = render(
-      <Checkbox.Root
-        defaultChecked="indeterminate"
-        onCheckedChange={onCheckedChange}
-        aria-label="Accept terms"
-      />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Act
-    await user.click(checkbox);
-
-    // Assert
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(checkbox).toBeChecked();
-    expect(checkbox).not.toBePartiallyChecked();
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-
-  it('honours controlled checked="indeterminate" across re-renders', () => {
-    // Arrange
-    const { container, rerender } = render(
-      <Checkbox.Root checked={false} onCheckedChange={() => {}} aria-label="Accept terms" />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).not.toBeChecked();
-
-    // Act
-    rerender(
-      <Checkbox.Root checked="indeterminate" onCheckedChange={() => {}} aria-label="Accept terms" />,
-    );
-
-    // Assert
-    expect(checkbox).toBePartiallyChecked();
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "indeterminate",
-    );
-  });
-});

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

@@ -1,92 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox.Indicator", () => {
-  it("is always mounted, regardless of checked state", () => {
-    // Arrange & Act — unchecked, yet the mark is in the DOM (CSS hides it).
-    render(
-      <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="mark" />
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("mark")).toBeInTheDocument();
-  });
-
-  it("is decorative, carrying aria-hidden", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="mark" />
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("mark")).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("mirrors the checkbox's data-state for CSS to key off", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="mark" />
-      </Checkbox.Root>,
-    );
-    const mark = screen.getByTestId("mark");
-    expect(mark).toHaveAttribute("data-state", "unchecked");
-
-    // Act
-    await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
-
-    // Assert
-    expect(mark).toHaveAttribute("data-state", "checked");
-  });
-
-  it("mirrors the indeterminate data-state", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="mark" />
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("mark")).toHaveAttribute(
-      "data-state",
-      "indeterminate",
-    );
-  });
-
-  it("delegates to the consumer's element (e.g. an svg tick) via asChild", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root defaultChecked aria-label="Accept terms">
-        <Checkbox.Indicator asChild>
-          <svg data-testid="tick" viewBox="0 0 10 10">
-            <path d="M1 5l3 3 5-7" />
-          </svg>
-        </Checkbox.Indicator>
-      </Checkbox.Root>,
-    );
-    const tick = screen.getByTestId("tick");
-
-    // Assert
-    expect(tick.tagName.toLowerCase()).toBe("svg");
-    expect(tick).toHaveAttribute("aria-hidden", "true");
-    expect(tick).toHaveAttribute("data-state", "checked");
-  });
-
-  it("throws when rendered outside Checkbox.Root", () => {
-    // Arrange
-    const error = vi.spyOn(console, "error").mockImplementation(() => {});
-
-    // Assert
-    expect(() => render(<Checkbox.Indicator />)).toThrow();
-
-    error.mockRestore();
-  });
-});

package/src/Checkbox/__tests__/Checkbox.uncontrolled-state.test.tsx

@@ -1,105 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox uncontrolled state", () => {
-  it("starts checked when defaultChecked is true", () => {
-    // Arrange & Act
-    const { container } = render(
-      <Checkbox.Root defaultChecked aria-label="Accept terms" />,
-    );
-
-    // Assert
-    expect(screen.getByRole("checkbox", { name: "Accept terms" })).toBeChecked();
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-
-  it("toggles on click from unchecked to checked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(<Checkbox.Root aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Act
-    await user.click(checkbox);
-
-    // Assert
-    expect(checkbox).toBeChecked();
-  });
-
-  it("toggles on click from checked to unchecked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(<Checkbox.Root defaultChecked aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).toBeChecked();
-
-    // Act
-    await user.click(checkbox);
-
-    // Assert
-    expect(checkbox).not.toBeChecked();
-  });
-
-  it("calls onCheckedChange with the new boolean value", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox.Root onCheckedChange={onCheckedChange} aria-label="Accept terms" />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Act
-    await user.click(checkbox);
-    await user.click(checkbox);
-
-    // Assert
-    expect(onCheckedChange).toHaveBeenNthCalledWith(1, true);
-    expect(onCheckedChange).toHaveBeenNthCalledWith(2, false);
-  });
-
-  it("composes a consumer onChange, running it before the internal handler", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const order: string[] = [];
-    const onChange = vi.fn(() => order.push("consumer"));
-    const onCheckedChange = vi.fn(() => order.push("internal"));
-    render(
-      <Checkbox.Root
-        onChange={onChange}
-        onCheckedChange={onCheckedChange}
-        aria-label="Accept terms"
-      />,
-    );
-
-    // Act
-    await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
-
-    // Assert
-    expect(order).toEqual(["consumer", "internal"]);
-  });
-
-  it("lets a consumer onChange veto the internal handler via preventDefault", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox.Root
-        onChange={(event) => event.preventDefault()}
-        onCheckedChange={onCheckedChange}
-        aria-label="Accept terms"
-      />,
-    );
-
-    // Act
-    await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
-
-    // Assert
-    expect(onCheckedChange).not.toHaveBeenCalled();
-  });
-});

package/src/Checkbox/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useCheckboxRoot } from "./useCheckboxRoot";
-export { useCheckboxInput } from "./useCheckboxInput";
-export { useCheckboxContext } from "./useCheckboxContext";

package/src/Checkbox/hooks/useCheckboxContext.ts

@@ -1 +0,0 @@
-export { useCheckboxContext } from "../CheckboxContext";

package/src/Checkbox/hooks/useCheckboxInput.ts

@@ -1,53 +0,0 @@
-import { useState } from "react";
-import type { ChangeEvent } from "react";
-
-import { CheckboxChangeHandler, CheckedState } from "../types";
-
-type UseCheckboxInputArgs = {
-  defaultChecked?: CheckedState;
-  checked?: CheckedState;
-  onCheckedChange?: (checked: boolean) => void;
-  onChange?: CheckboxChangeHandler;
-};
-
-/**
- * Resolves the controlled / uncontrolled tri-state for a {@link Checkbox.Root}
- * and produces the props to spread onto its native `<input type="checkbox">`.
- *
- * Distinct from {@link useCheckboxRoot}, which drives the *button*-based
- * `menuitemcheckbox` items in Dropdown / ContextMenu via a `toggle()` callback.
- * This hook instead lets the native input own the toggling: the boolean half of
- * the state maps to the input's `checked` / `defaultChecked`, and the
- * `"indeterminate"` value is applied by the component via the input's
- * `.indeterminate` DOM property. A native checkbox only toggles between booleans
- * by user action — clicking a mixed checkbox resolves it to `true` — so
- * `onCheckedChange` is always called with a boolean.
- */
-export function useCheckboxInput({
-  defaultChecked,
-  checked: controlledChecked,
-  onCheckedChange,
-  onChange,
-}: UseCheckboxInputArgs) {
-  const isControlled = controlledChecked !== undefined;
-  const [mirror, setMirror] = useState<CheckedState>(defaultChecked ?? false);
-  const checked = isControlled ? controlledChecked : mirror;
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange?.(event);
-    if (event.defaultPrevented) return;
-    const next = event.target.checked;
-    // Stryker disable next-line ConditionalExpression: in controlled mode
-    // `inputStateProps` reads controlledChecked, never `mirror`, so setting
-    // mirror here (the mutant's always-run form) has no observable effect —
-    // equivalent.
-    if (!isControlled) setMirror(next);
-    onCheckedChange?.(next);
-  };
-
-  const inputStateProps = isControlled
-    ? { checked: controlledChecked === true }
-    : { defaultChecked: defaultChecked === true };
-
-  return { checked, handleChange, inputStateProps };
-}

package/src/Checkbox/hooks/useCheckboxRoot.ts

@@ -1,32 +0,0 @@
-import { useCallback } from "react";
-
-import { useControllableState } from "../../hooks/index.ts";
-
-import { CheckedState } from "../types";
-
-type UseCheckboxRootArgs = {
-  defaultChecked?: CheckedState;
-  checked?: CheckedState;
-  onCheckedChange?: (checked: boolean) => void;
-};
-
-export function useCheckboxRoot({
-  defaultChecked,
-  checked: controlledChecked,
-  onCheckedChange,
-}: UseCheckboxRootArgs) {
-  const [checked, setChecked] = useControllableState<CheckedState>(
-    controlledChecked,
-    defaultChecked ?? false,
-  );
-
-  const toggle = useCallback(() => {
-    // Indeterminate resolves to checked per the WAI-ARIA tri-state
-    // convention; boolean flips.
-    const next = checked === "indeterminate" ? true : !checked;
-    setChecked(next);
-    onCheckedChange?.(next);
-  }, [checked, setChecked, onCheckedChange]);
-
-  return { checked, toggle };
-}

package/src/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export * from "./Checkbox";
-export * from "./types";

package/src/Checkbox/types.ts

@@ -1,86 +0,0 @@
-import { ChangeEventHandler, ComponentProps, ReactNode, Ref } from "react";
-
-/** The checked value of a checkbox — `true`, `false`, or `"indeterminate"` (the tri-state). */
-export type CheckedState = boolean | "indeterminate";
-
-/**
- * Props for {@link Checkbox.Indicator} — the decorative mark. All `<span>`
- * attributes plus the `asChild` escape hatch. The indicator is always mounted;
- * its visibility is a CSS concern, revealed off the input's native `:checked` /
- * `:indeterminate` state.
- */
-export type CheckboxIndicatorProps = ComponentProps<"span"> & {
-  /** Custom mark content. Omit to let the shipped CSS draw the tick/bar off the
-   * input's native `:checked` / `:indeterminate` state; provide your own (an
-   * icon, glyph, or nested element) to override it. */
-  children?: ReactNode;
-  /**
-   * When `true`, render `children` as the indicator element itself
-   * (via the {@link Slot} pattern) instead of wrapping them in a `<span>`.
-   * `data-state` and `aria-hidden` are merged onto that element.
-   * @default false
-   */
-  asChild?: boolean;
-};
-
-/**
- * Shared base for both {@link CheckboxRootProps} variants — the native
- * `<input type="checkbox">` attributes (minus the ones the component owns) plus
- * the `onCheckedChange` convenience callback. `className` / `style` here style
- * the **box** (the visible control), not the hidden input; everything else
- * spreads onto the input, because semantically the Root *is* the checkbox.
- */
-export type CheckboxRootBaseProps = Omit<
-  ComponentProps<"input">,
-  "type" | "checked" | "defaultChecked"
-> & {
-  /** Fired with the new boolean checked value on every user toggle. */
-  onCheckedChange?: (checked: boolean) => void;
-  children?: ReactNode;
-  /** Forwarded to the underlying native `<input type="checkbox">`. */
-  ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * Uncontrolled variant of {@link CheckboxRootProps}: the component owns the
- * checked value. Pass `defaultChecked` (or omit it); `checked` is forbidden.
- * `defaultChecked` may be `"indeterminate"` for a mixed-on-mount checkbox.
- */
-export type CheckboxRootUncontrolledProps = CheckboxRootBaseProps & {
-  /** Checked value on first render; the component owns it thereafter. May be
-   * `"indeterminate"` for a mixed-on-mount checkbox. Omit for an initially
-   * unchecked box. */
-  defaultChecked?: CheckedState;
-  /** Forbidden in uncontrolled mode — use `defaultChecked` instead. */
-  checked?: never;
-};
-
-/**
- * Controlled variant of {@link CheckboxRootProps}: the parent owns the checked
- * value. Pass `checked` and `onCheckedChange` together; `defaultChecked` is
- * forbidden.
- */
-export type CheckboxRootControlledProps = CheckboxRootBaseProps & {
-  /** Forbidden in controlled mode — use `checked` instead. */
-  defaultChecked?: never;
-  /** The current checked value, owned by the parent. May be `"indeterminate"`
-   * for the tri-state; clicking a mixed checkbox resolves it to `true`. Keep it
-   * in sync via `onCheckedChange`. */
-  checked: CheckedState;
-  /** Called with the new boolean checked value on every user toggle. Required
-   * in controlled mode so the parent can keep `checked` in sync. */
-  onCheckedChange: (checked: boolean) => void;
-};
-
-/**
- * Props for {@link Checkbox.Root}. A discriminated union of
- * {@link CheckboxRootUncontrolledProps} and
- * {@link CheckboxRootControlledProps}, so TypeScript accepts exactly one
- * state mode.
- */
-export type CheckboxRootProps =
-  | CheckboxRootUncontrolledProps
-  | CheckboxRootControlledProps;
-
-/** Internal: the native `onChange` shape the Root composes with its own. */
-export type CheckboxChangeHandler = ChangeEventHandler<HTMLInputElement>;