@primitiv-ui/react 0.1.28 → 0.1.30

package/src/Select/__tests__/Select.mutation-hardening.test.tsx

@@ -0,0 +1,317 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+
+import { Select } from "../Select";
+
+/**
+ * Discriminating assertions that pin down behaviour equivalent mutants would
+ * otherwise slip past (preventDefault calls, the toggle-sync listener, and
+ * the exact ARIA / data-state / role wiring). Complements the behavioural
+ * suites, which assert *where focus lands* but not *how* it got there.
+ */
+
+function open() {
+  render(
+    <Select.Root defaultValue="vue">
+      <Select.Trigger>
+        <Select.Value placeholder="Pick" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="solid">Solid</Select.Item>
+      </Select.Content>
+    </Select.Root>,
+  );
+  fireEvent.click(screen.getByRole("button"));
+  return screen.getByRole("listbox", { hidden: true });
+}
+
+describe("Select preventDefault on handled keys", () => {
+  it.each(["ArrowDown", "ArrowUp", "Home", "End", "Enter", " ", "Escape"])(
+    "cancels the default action for %s",
+    (key) => {
+      const list = open();
+      // fireEvent returns false when a handler called preventDefault.
+      const notCancelled = fireEvent.keyDown(list, { key });
+      expect(notCancelled).toBe(false);
+    },
+  );
+
+  it("cancels the default action for a typeahead match", () => {
+    const list = open();
+    const notCancelled = fireEvent.keyDown(list, { key: "s" }); // matches Solid
+    expect(notCancelled).toBe(false);
+  });
+
+  it("does not cancel an unhandled key", () => {
+    const list = open();
+    // A modifier / multi-char key falls through untouched.
+    const notCancelled = fireEvent.keyDown(list, { key: "Shift" });
+    expect(notCancelled).toBe(true);
+  });
+});
+
+describe("Select toggle-event sync", () => {
+  it("closes when the popover dispatches a toggle→closed (browser light-dismiss)", () => {
+    const list = open();
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+
+    // Simulate the browser's own light-dismiss: a toggle event to "closed".
+    const event = new Event("toggle");
+    Object.defineProperty(event, "newState", { value: "closed" });
+    fireEvent(list, event);
+
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("ignores a toggle→open event (does not thrash state)", () => {
+    const list = open();
+    const openEvent = new Event("toggle");
+    Object.defineProperty(openEvent, "newState", { value: "open" });
+    fireEvent(list, openEvent);
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+});
+
+describe("Select selection commit + hidden form field", () => {
+  it("fires onOpenChange exactly once (to false) when a selection commits", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Select.Root onOpenChange={onOpenChange}>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="react">React</Select.Item>
+          <Select.Item value="vue">Vue</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    await user.click(screen.getByRole("button")); // opens
+    onOpenChange.mockClear();
+    await user.click(screen.getByText("Vue")); // selecting closes — exactly once
+
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("renders a hidden form <select> option for each registered item value", () => {
+    const { container } = render(
+      <Select.Root name="framework">
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="react">React</Select.Item>
+          <Select.Item value="vue">Vue</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    const hidden = container.querySelector<HTMLSelectElement>(
+      'select[name="framework"]',
+    )!;
+    const values = Array.from(hidden.querySelectorAll("option")).map(
+      (o) => o.value,
+    );
+    expect(values).toContain("react");
+    expect(values).toContain("vue");
+  });
+});
+
+describe("Select native-mode edges", () => {
+  it("keeps a numeric child as the option text under native", () => {
+    render(
+      <Select.Root native defaultValue="1">
+        <Select.Item value="1">{42}</Select.Item>
+      </Select.Root>,
+    );
+    expect(screen.getByRole("option", { name: "42" })).toBeInTheDocument();
+  });
+
+  it("marks the matching option selected for a native controlled value", () => {
+    render(
+      <Select.Root native value="b" onValueChange={() => {}}>
+        <Select.Item value="a">A</Select.Item>
+        <Select.Item value="b">B</Select.Item>
+      </Select.Root>,
+    );
+    expect(
+      (screen.getByRole("option", { name: "B" }) as HTMLOptionElement).selected,
+    ).toBe(true);
+  });
+
+  it("does not throw on native change when onValueChange is omitted", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root native defaultValue="a">
+        <Select.Item value="a">A</Select.Item>
+        <Select.Item value="b">B</Select.Item>
+      </Select.Root>,
+    );
+    await user.selectOptions(screen.getByRole("combobox"), "b");
+    expect(
+      (screen.getByRole("option", { name: "B" }) as HTMLOptionElement).selected,
+    ).toBe(true);
+  });
+
+  it("filters an empty value out of the hidden select's generated options", () => {
+    const { container } = render(
+      <Select.Root name="framework">
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="">None</Select.Item>
+          <Select.Item value="a">A</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+    const hidden = container.querySelector<HTMLSelectElement>(
+      'select[name="framework"]',
+    )!;
+    const empties = Array.from(hidden.querySelectorAll("option")).filter(
+      (o) => o.value === "",
+    );
+    // Only the single literal placeholder <option value="">, not a duplicate
+    // generated from the registered empty value.
+    expect(empties).toHaveLength(1);
+  });
+
+  it("calls onValueChange with the chosen value under native", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select.Root native defaultValue="a" onValueChange={onValueChange}>
+        <Select.Item value="a">A</Select.Item>
+        <Select.Item value="b">B</Select.Item>
+      </Select.Root>,
+    );
+    await user.selectOptions(screen.getByRole("combobox"), "b");
+    expect(onValueChange).toHaveBeenCalledWith("b");
+  });
+});
+
+describe("Select hidden field + Content prop forwarding", () => {
+  it("renders the hidden form <select> non-focusable and aria-hidden", () => {
+    const { container } = render(
+      <Select.Root name="framework">
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+    const hidden = container.querySelector('select[name="framework"]')!;
+    expect(hidden).toHaveAttribute("tabindex", "-1");
+    expect(hidden).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("forwards arbitrary props from Select.Content onto the listbox", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content data-testid="lb" className="my-list">
+          <Select.Item value="a">A</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+    await user.click(screen.getByRole("button"));
+    const lb = screen.getByRole("listbox", { hidden: true });
+    expect(lb).toHaveAttribute("data-testid", "lb");
+    expect(lb).toHaveClass("my-list");
+  });
+});
+
+describe("Select rich data-disabled + typeahead reach", () => {
+  it("exposes data-disabled on a rich item only when disabled", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">Enabled</Select.Item>
+          <Select.Item value="b" disabled>
+            Disabled
+          </Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+    await user.click(screen.getByRole("button"));
+    expect(
+      screen.getByRole("option", { name: "Enabled", hidden: true }),
+    ).not.toHaveAttribute("data-disabled");
+    expect(screen.getByText("Disabled")).toHaveAttribute("data-disabled", "");
+  });
+
+  it("typeahead reaches the last option in a 5-item list (loop bound + modulo)", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">Alpha</Select.Item>
+          <Select.Item value="b">Bravo</Select.Item>
+          <Select.Item value="c">Charlie</Select.Item>
+          <Select.Item value="d">Delta</Select.Item>
+          <Select.Item value="e">Echo</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+    await user.click(screen.getByRole("button")); // Alpha focused (index 0)
+    await user.keyboard("e"); // only Echo (index 4) matches — loop must reach it
+    expect(screen.getByRole("option", { name: "Echo", hidden: true })).toHaveFocus();
+  });
+});
+
+describe("Select ARIA / data-state wiring", () => {
+  it("wires the trigger, listbox, and options with the exact contract", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root defaultValue="vue">
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="react">React</Select.Item>
+          <Select.Item value="vue">
+            Vue
+            <Select.ItemIndicator>✓</Select.ItemIndicator>
+          </Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("type", "button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+
+    await user.click(trigger);
+
+    const list = screen.getByRole("listbox", { hidden: true });
+    expect(list).toHaveAttribute("tabindex", "-1");
+
+    const react = screen.getByRole("option", { name: "React", hidden: true });
+    const vue = screen.getByRole("option", { name: /Vue/, hidden: true });
+    expect(react).toHaveAttribute("tabindex", "-1");
+    expect(react).toHaveAttribute("data-state", "unchecked");
+    expect(react).toHaveAttribute("aria-selected", "false");
+    expect(vue).toHaveAttribute("data-state", "checked");
+    expect(vue).toHaveAttribute("aria-selected", "true");
+    // The indicator only mounts on the selected item, as "checked".
+    expect(screen.getByText("✓")).toHaveAttribute("data-state", "checked");
+  });
+});

package/src/Select/__tests__/Select.native-item.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+
+import { Select } from "../Select";
+
+describe("Select.Item in native mode", () => {
+  it("renders a native <option> for each item so its value is in the DOM", () => {
+    render(
+      <Select.Root native>
+        <Select.Item value="apple">Apple</Select.Item>
+      </Select.Root>,
+    );
+
+    expect(screen.getByRole("option", { name: "Apple" })).toBeInTheDocument();
+  });
+
+  it("keeps only string/number children as the option text, dropping element children", () => {
+    render(
+      <Select.Root native defaultValue="apple">
+        <Select.Item value="apple">
+          <svg data-testid="leading-icon" />
+          Apple
+        </Select.Item>
+      </Select.Root>,
+    );
+
+    const option = screen.getByRole("option", { name: "Apple" });
+    expect(option).toHaveTextContent("Apple");
+    expect(screen.queryByTestId("leading-icon")).not.toBeInTheDocument();
+  });
+});

package/src/Select/__tests__/Select.open-close.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Select } from "../Select";
+
+function renderSelect() {
+  return render(
+    <Select.Root>
+      <Select.Trigger>
+        <Select.Value placeholder="Pick one" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="apple">Apple</Select.Item>
+      </Select.Content>
+    </Select.Root>,
+  );
+}
+
+describe("Select rich open/close", () => {
+  it("Trigger exposes the listbox ARIA contract and starts collapsed", () => {
+    renderSelect();
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-controls");
+    // Popover polyfill mirrors open state to `data-popover-open`.
+    expect(screen.getByRole("listbox", { hidden: true })).not.toHaveAttribute("data-popover-open");
+  });
+
+  it("opens the listbox when the Trigger is clicked", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByRole("listbox", { hidden: true })).toHaveAttribute("data-popover-open");
+
+    // A non-Escape key inside the open listbox is a no-op (typeahead / arrow
+    // navigation arrive in a later cycle) — the listbox stays open.
+    await user.keyboard("a");
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("closes on Escape and returns focus to the Trigger", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("{Escape}");
+
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByRole("listbox", { hidden: true })).not.toHaveAttribute("data-popover-open");
+    expect(screen.getByRole("button")).toHaveFocus();
+  });
+});

package/src/Select/__tests__/Select.placeholder.test.tsx

@@ -6,9 +6,9 @@ describe("Select placeholder", () => {
   it("renders a non-selectable placeholder option that holds the initial selection until the user picks something", () => {
     // Arrange & Act
     const { container } = render(
-      <Select.Root>
-        <Select.Placeholder>Choose a fruit…</Select.Placeholder>
-        <Select.Option value="apple">Apple</Select.Option>
+      <Select.Root native>
+        <Select.Placeholder>Choose a fruit...</Select.Placeholder>
+        <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
 
@@ -22,9 +22,9 @@ describe("Select placeholder", () => {
     expect(placeholder).not.toBeNull();
     expect(placeholder).toBeDisabled();
     expect(placeholder).toHaveAttribute("value", "");
-    expect(placeholder).toHaveTextContent("Choose a fruit…");
+    expect(placeholder).toHaveTextContent("Choose a fruit...");
 
-    // …and is the initial selection because it's the first option with an
+    // ...and is the initial selection because it's the first option with an
     // empty value.
     const select = screen.getByRole("combobox") as HTMLSelectElement;
     expect(select.value).toBe("");
@@ -35,9 +35,9 @@ describe("Select placeholder", () => {
     // whitespace or a conditional that resolved to a string). The placeholder
     // scan must skip it rather than treat it as a candidate.
     const { container } = render(
-      <Select.Root>
+      <Select.Root native>
         {"  "}
-        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
 

package/src/Select/__tests__/Select.rich-asChild.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Select } from "../Select";
+
+describe("Select rich asChild composition", () => {
+  it("composes Trigger props onto a custom element and still toggles open", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger asChild>
+          <a href="#pick" data-testid="custom-trigger">
+            <Select.Value placeholder="Pick one" />
+          </a>
+        </Select.Trigger>
+        <Select.Content asChild>
+          <section data-testid="custom-content">
+            <Select.Item value="apple">Apple</Select.Item>
+          </section>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    const trigger = screen.getByTestId("custom-trigger");
+    expect(trigger.tagName).toBe("A");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    const content = screen.getByRole("listbox", { hidden: true });
+    expect(content).toBe(screen.getByTestId("custom-content"));
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).toHaveAttribute("data-popover-open");
+  });
+
+  it("delegates Separator to the child element via asChild", () => {
+    // Arrange & Act
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick one" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Separator asChild>
+            <hr data-testid="custom-sep" />
+          </Select.Separator>
+          <Select.Item value="banana">Banana</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    // Assert
+    const sep = screen.getByTestId("custom-sep");
+    expect(sep.tagName).toBe("HR");
+    expect(sep).toHaveAttribute("role", "separator");
+  });
+});

package/src/Select/__tests__/Select.rich-mode.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+
+import { Select } from "../Select";
+
+describe("Select rich mode (default, native={false})", () => {
+  it("does not render a native <select> — it is a context boundary for the rich listbox", () => {
+    render(
+      <Select.Root>
+        <span data-testid="rich-child">rich content</span>
+      </Select.Root>,
+    );
+
+    expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+    expect(screen.getByTestId("rich-child")).toBeInTheDocument();
+  });
+});

package/src/Select/__tests__/Select.selection.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+
+import { Select } from "../Select";
+import type { SelectRootProps } from "../types";
+
+function renderSelect(root: SelectRootProps = {}) {
+  return render(
+    <Select.Root {...root}>
+      <Select.Trigger>
+        <Select.Value placeholder="Pick one" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="svelte" disabled>
+          Svelte
+        </Select.Item>
+      </Select.Content>
+    </Select.Root>,
+  );
+}
+
+describe("Select rich selection", () => {
+  it("renders each Item as role=option, none selected initially", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+
+    // Scope to the listbox — the hidden form <select> also contains (nameless)
+    // <option>s that {hidden:true} would otherwise pick up.
+    const listbox = screen.getByRole("listbox", { hidden: true });
+    const options = within(listbox).getAllByRole("option", { hidden: true });
+    expect(options).toHaveLength(3);
+    options.forEach((o) => expect(o).toHaveAttribute("aria-selected", "false"));
+    expect(screen.getByText("Svelte")).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("selecting an item fires onValueChange and closes, returning focus to the trigger", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderSelect({ onValueChange });
+
+    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByText("Vue"));
+
+    expect(onValueChange).toHaveBeenCalledWith("vue");
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByRole("button")).toHaveFocus();
+  });
+
+  it("reflects the controlled value as aria-selected on the matching item", async () => {
+    const user = userEvent.setup();
+    renderSelect({ value: "vue", onValueChange: vi.fn() });
+
+    await user.click(screen.getByRole("button"));
+
+    // The selected label is mirrored into the trigger too, so scope to the
+    // listbox options rather than getByText.
+    expect(
+      screen.getByRole("option", { name: "Vue", hidden: true }),
+    ).toHaveAttribute("aria-selected", "true");
+    expect(
+      screen.getByRole("option", { name: "React", hidden: true }),
+    ).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("renders a rich Group as role=group with the label as its accessible name", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick one" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group label="Frontend">
+            <Select.Item value="react">React</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>,
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("group", { hidden: true })).toHaveAttribute(
+      "aria-label",
+      "Frontend",
+    );
+  });
+
+  it("does not select a disabled item and keeps the listbox open", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderSelect({ onValueChange });
+
+    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByText("Svelte"));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+});