@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Combobox/__tests__/Combobox.keyboard-interaction.test.tsx

@@ -1,196 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { Combobox } from "../Combobox";
-
-function renderCombobox() {
-  return render(
-    <Combobox.Root defaultOpen>
-      <Combobox.Input aria-label="Framework" />
-      <Combobox.Content aria-label="Frameworks">
-        <Combobox.Item value="react">React</Combobox.Item>
-        <Combobox.Item value="preact">Preact</Combobox.Item>
-      </Combobox.Content>
-    </Combobox.Root>,
-  );
-}
-
-/*
- * Cursor scrolling. The registry panel caps at 18rem and scrolls past it, so a
- * cursor that moves without bringing itself into view walks straight off the
- * bottom of a filtered list — APG requires the referenced option to be made
- * visible. `block: "nearest"` specifically: it is the option that does nothing
- * when the item is already on screen, so ordinary arrowing does not jerk the list
- * about. Same contract, and the same spy technique, as Listbox.
- */
-describe("Combobox cursor scrolling", () => {
-  it("scrolls the seeded item into view when ArrowDown opens the cursor", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const react = screen.getByRole("option", { hidden: true, name: "React" });
-    const scrollIntoView = vi.spyOn(react, "scrollIntoView");
-
-    await user.click(screen.getByRole("combobox", { name: "Framework" }));
-    await user.keyboard("{ArrowDown}");
-
-    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
-  });
-
-  it("scrolls each item into view as the cursor moves onto it", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
-    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
-
-    await user.click(screen.getByRole("combobox", { name: "Framework" }));
-    await user.keyboard("{ArrowDown}{ArrowDown}");
-
-    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
-  });
-
-  it("scrolls the last item into view on End", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
-    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
-
-    await user.click(screen.getByRole("combobox", { name: "Framework" }));
-    // Seed the cursor first: Home/End move an existing cursor rather than
-    // creating one.
-    await user.keyboard("{ArrowDown}{End}");
-
-    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
-  });
-
-  it("scrolls the seeded item into view when ArrowUp opens the cursor at the end", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
-    const scrollIntoView = vi.spyOn(preact, "scrollIntoView");
-
-    await user.click(screen.getByRole("combobox", { name: "Framework" }));
-    await user.keyboard("{ArrowUp}");
-
-    expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest" });
-  });
-});
-
-describe("Combobox keyboard interaction", () => {
-  it("closes the popup on Escape while leaving focus in the input", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(input);
-    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
-
-    await user.keyboard("{Escape}");
-
-    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
-    expect(input).toHaveFocus();
-  });
-
-  it("moves the cursor with the arrow keys and publishes it as aria-activedescendant", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(input);
-
-    // no cursor until the user asks for one
-    expect(input).not.toHaveAttribute("aria-activedescendant");
-
-    await user.keyboard("{ArrowDown}");
-    const react = screen.getByRole("option", { hidden: true, name: "React" });
-    expect(input).toHaveAttribute("aria-activedescendant", react.id);
-    expect(react).toHaveAttribute("data-highlighted", "");
-
-    await user.keyboard("{ArrowDown}");
-    const preact = screen.getByRole("option", { hidden: true, name: "Preact" });
-    expect(input).toHaveAttribute("aria-activedescendant", preact.id);
-    expect(react).not.toHaveAttribute("data-highlighted");
-
-    await user.keyboard("{ArrowUp}");
-    expect(input).toHaveAttribute("aria-activedescendant", react.id);
-
-    // virtual focus: the cursor moves without an option ever taking DOM focus
-    expect(input).toHaveFocus();
-    expect(react).not.toHaveFocus();
-  });
-
-  it("seeds the cursor on the last item when ArrowUp opens the cursor", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(input);
-    await user.keyboard("{ArrowUp}");
-
-    expect(input).toHaveAttribute(
-      "aria-activedescendant",
-      screen.getByRole("option", { hidden: true, name: "Preact" }).id,
-    );
-  });
-
-  it("commits the cursor item on Enter", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-
-    render(
-      <Combobox.Root defaultOpen onValueChange={onValueChange}>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks">
-          <Combobox.Item value="react">React</Combobox.Item>
-          <Combobox.Item value="preact">Preact</Combobox.Item>
-        </Combobox.Content>
-      </Combobox.Root>,
-    );
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(input);
-    await user.keyboard("{ArrowDown}{ArrowDown}");
-    await user.keyboard("{Enter}");
-
-    expect(onValueChange).toHaveBeenCalledWith("preact");
-    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
-    expect(input).toHaveValue("Preact");
-  });
-
-  it("ignores Enter while there is no cursor", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-
-    render(
-      <Combobox.Root defaultOpen onValueChange={onValueChange}>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks">
-          <Combobox.Item value="react">React</Combobox.Item>
-        </Combobox.Content>
-      </Combobox.Root>,
-    );
-
-    await user.click(screen.getByRole("combobox", { name: "Framework" }));
-    await user.keyboard("{Enter}");
-
-    expect(onValueChange).not.toHaveBeenCalled();
-    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
-  });
-
-  it("keeps the committed value when Escape closes the popup", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
-    await user.type(input, "zzz");
-    await user.keyboard("{Escape}");
-
-    // Escape abandons the query, so the text returns to the committed value
-    expect(input).toHaveValue("React");
-  });
-});

package/src/Combobox/__tests__/Combobox.light-dismiss.test.tsx

@@ -1,101 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { Combobox } from "../Combobox";
-
-/**
- * Light dismiss — clicking outside an open combobox closes it.
- *
- * The popup is a `popover="auto"` element, so the browser does the outside-click
- * detection itself and reports it back as a `toggle` event; there is deliberately
- * no hand-rolled pointerdown-outside listener. That is the same pattern
- * `useSelectContent` uses, and these tests drive it the same way Select's do: by
- * dispatching the `toggle` the browser would have sent, since jsdom implements
- * neither the top layer nor real light-dismiss.
- */
-function renderCombobox(onOpenChange?: (open: boolean) => void) {
-  return render(
-    <Combobox.Root defaultOpen onOpenChange={onOpenChange}>
-      <Combobox.Input aria-label="Framework" />
-      <Combobox.Content aria-label="Frameworks">
-        <Combobox.Item value="react">React</Combobox.Item>
-        <Combobox.Item value="preact">Preact</Combobox.Item>
-      </Combobox.Content>
-    </Combobox.Root>,
-  );
-}
-
-const listbox = () => screen.getByRole("listbox", { hidden: true });
-
-const dismiss = (element: HTMLElement) => {
-  const event = new Event("toggle");
-  Object.defineProperty(event, "newState", { value: "closed" });
-  fireEvent(element, event);
-};
-
-describe("Combobox light dismiss", () => {
-  it("closes when the popup reports a browser light-dismiss", () => {
-    renderCombobox();
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    expect(input).toHaveAttribute("aria-expanded", "true");
-
-    dismiss(listbox());
-
-    expect(input).toHaveAttribute("aria-expanded", "false");
-    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
-  });
-
-  it("ignores a toggle to open, so an opening popup does not thrash state", () => {
-    const onOpenChange = vi.fn();
-    renderCombobox(onOpenChange);
-    const input = screen.getByRole("combobox", { name: "Framework" });
-
-    const event = new Event("toggle");
-    Object.defineProperty(event, "newState", { value: "open" });
-    fireEvent(listbox(), event);
-
-    expect(input).toHaveAttribute("aria-expanded", "true");
-    expect(onOpenChange).not.toHaveBeenCalled();
-  });
-
-  it("still dismisses when the consumer attaches its own ref to the popup", () => {
-    // The popup needs an internal ref to call showPopover() on. A consumer ref
-    // must compose with it rather than replace it, or the whole popover
-    // machinery — top layer and light dismiss alike — silently stops working.
-    const consumerRef = { current: null as HTMLDivElement | null };
-    render(
-      <Combobox.Root defaultOpen>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks" ref={consumerRef}>
-          <Combobox.Item value="react">React</Combobox.Item>
-        </Combobox.Content>
-      </Combobox.Root>,
-    );
-
-    expect(consumerRef.current).not.toBeNull();
-
-    dismiss(listbox());
-
-    expect(screen.getByRole("combobox", { name: "Framework" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("restores the committed label, so a dismissed query never lingers", async () => {
-    const user = userEvent.setup();
-    renderCombobox();
-    const input = screen.getByRole("combobox", { name: "Framework" });
-
-    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
-    await user.type(input, "zzz");
-    expect(input).toHaveValue("Reactzzz");
-
-    dismiss(listbox());
-
-    // Same contract as Escape: dismissing abandons the query rather than leaving
-    // the field showing text that is not the value.
-    expect(input).toHaveValue("React");
-  });
-});

package/src/Combobox/__tests__/Combobox.query.test.tsx

@@ -1,105 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { Combobox } from "../Combobox";
-
-describe("Combobox query", () => {
-  it("opens the popup and shows the typed text as the user types", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <Combobox.Root>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks" />
-      </Combobox.Root>,
-    );
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    expect(screen.queryByRole("listbox", { hidden: true })).not.toBeInTheDocument();
-
-    await user.type(input, "Rea");
-
-    expect(input).toHaveValue("Rea");
-    expect(input).toHaveAttribute("aria-expanded", "true");
-    expect(screen.getByRole("listbox", { hidden: true })).toBeInTheDocument();
-  });
-
-  it("reports the query to onQueryChange on every keystroke", async () => {
-    const user = userEvent.setup();
-    const onQueryChange = vi.fn();
-
-    render(
-      <Combobox.Root onQueryChange={onQueryChange}>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks" />
-      </Combobox.Root>,
-    );
-
-    await user.type(screen.getByRole("combobox", { name: "Framework" }), "Re");
-
-    expect(onQueryChange.mock.calls.map(([q]) => q)).toEqual(["R", "Re"]);
-  });
-
-  /*
-   * Emptying the field is a deselect.
-   *
-   * The exploration (§D1) settled that closing resets the text FROM the value, so
-   * the field can never sit showing something that is not the value. Taken alone
-   * that made a cleared field un-clearable: Escape put the old label straight
-   * back. Clearing the value too keeps §D1's invariant intact — empty text, empty
-   * value — while letting the gesture mean what the user intended.
-   */
-  it("clears the committed value when the query is emptied", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-
-    render(
-      <Combobox.Root defaultOpen onValueChange={onValueChange}>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks">
-          <Combobox.Item value="react">React</Combobox.Item>
-        </Combobox.Content>
-      </Combobox.Root>,
-    );
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    await user.click(screen.getByRole("option", { hidden: true, name: "React" }));
-    expect(input).toHaveValue("React");
-    onValueChange.mockClear();
-
-    await user.clear(input);
-
-    expect(onValueChange).toHaveBeenCalledWith("");
-    expect(screen.getByRole("option", { hidden: true, name: "React" })).toHaveAttribute(
-      "aria-selected",
-      "false",
-    );
-
-    // The point of the change: Escape must not resurrect the label just deleted.
-    await user.keyboard("{Escape}");
-    expect(input).toHaveValue("");
-  });
-
-  it("does not report a value change when an already-empty field is cleared", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-
-    render(
-      <Combobox.Root onValueChange={onValueChange}>
-        <Combobox.Input aria-label="Framework" />
-        <Combobox.Content aria-label="Frameworks">
-          <Combobox.Item value="react">React</Combobox.Item>
-        </Combobox.Content>
-      </Combobox.Root>,
-    );
-
-    const input = screen.getByRole("combobox", { name: "Framework" });
-    // Typing and deleting back to empty never committed anything, so there is no
-    // selection to clear and no reason to tell the consumer otherwise.
-    await user.type(input, "Re");
-    await user.clear(input);
-
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-});

package/src/Combobox/hooks/index.ts

@@ -1 +0,0 @@
-export * from "./useComboboxRoot";

package/src/Combobox/hooks/useComboboxRoot.ts

@@ -1,2 +0,0 @@
-/* Combobox root state hook — scaffold only (RED). */
-export {};

package/src/Combobox/index.ts

@@ -1,3 +0,0 @@
-export * from "./Combobox";
-export * from "./ComboboxContext";
-export * from "./types";

package/src/Combobox/types.ts

@@ -1,133 +0,0 @@
-import type { ComponentProps, KeyboardEvent } from "react";
-
-/** What a mounted `Combobox.Item` registers with the root. */
-export interface ComboboxItemMeta {
-  /**
-   * The rendered element, used to scroll the cursor into view. Non-nullable:
-   * registration happens in the item's own effect, so the ref has always been
-   * attached by then — an item is never in the registry without its element.
-   */
-  element: HTMLElement;
-  /** The label to show in the input once this item is committed. */
-  label: string;
-}
-
-/** The value carried from `Combobox.Root` to its parts. */
-export interface ComboboxContextValue {
-  /** Whether the popup listbox is open. */
-  open: boolean;
-  /** DOM id of the popup listbox, wired to the input's `aria-controls`. */
-  listboxId: string;
-  /** The text currently in the input — the live query while open. */
-  query: string;
-  /** Sets the query, opening the popup, as the user types. */
-  setQuery: (query: string) => void;
-  /** The selected value, or `""` when nothing is selected. */
-  value: string;
-  /** Commits a selection: sets the value, closes, and resets the input text. */
-  select: (value: string, label: string) => void;
-  /** The input's whole keydown behaviour: Escape, cursor seeding, arrow keys. */
-  handleInputKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
-  /**
-   * Closes the popup, clears the cursor and resets the input text from the
-   * committed value. Shared by Escape and by the browser's own light-dismiss, so
-   * clicking away and pressing Escape leave the field in the same state.
-   */
-  dismiss: () => void;
-  /** The value the virtual-focus cursor sits on, or `null` for no cursor. */
-  activeValue: string | null;
-  /** Builds the DOM id for an item, so the input can point at it. */
-  getItemId: (value: string) => string;
-  /**
-   * Registers a mounted item so the arrow keys know the order and Enter can
-   * resolve the same label a click would.
-   */
-  registerItem: (value: string, meta: ComboboxItemMeta | null) => void;
-}
-
-/** Props shared by every asChild-capable part. */
-export interface ComboboxSlottableProps {
-  /**
-   * Render the consumer's own element instead of the default one, merging
-   * behaviour onto it.
-   *
-   * @default false
-   */
-  asChild?: boolean;
-}
-
-/** Props for `Combobox.Root` — the wrapper that owns the combobox's state. */
-export interface ComboboxRootProps extends ComponentProps<"div">, ComboboxSlottableProps {
-  /**
-   * Whether the popup is open on first render, for the uncontrolled case.
-   *
-   * @default false
-   */
-  defaultOpen?: boolean;
-  /**
-   * Whether the popup is open, for the controlled case. Pair with
-   * {@link ComboboxRootProps.onOpenChange | `onOpenChange`} or it can never
-   * change.
-   *
-   * @default undefined
-   */
-  open?: boolean;
-  /**
-   * Called when the combobox wants the popup opened or closed. Under a
-   * controlled {@link ComboboxRootProps.open | `open`} the combobox only asks —
-   * the parent decides.
-   *
-   * @default undefined
-   */
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * The selected value on first render, for the uncontrolled case.
-   *
-   * @default ""
-   */
-  defaultValue?: string;
-  /**
-   * The selected value, for the controlled case. Pair with
-   * {@link ComboboxRootProps.onValueChange | `onValueChange`}.
-   *
-   * @default undefined
-   */
-  value?: string;
-  /**
-   * Called with the input's text on every keystroke. Filtering is
-   * **consumer-owned** — narrow the options you render in response. The
-   * component deliberately ships no `filter` prop.
-   *
-   * @default undefined
-   */
-  onQueryChange?: (query: string) => void;
-  /**
-   * Called with the newly selected value when the user commits a choice,
-   * whether by click or by Enter.
-   *
-   * @default undefined
-   */
-  onValueChange?: (value: string) => void;
-}
-
-/** Props for `Combobox.Input` — the editable text field. */
-export interface ComboboxInputProps extends ComponentProps<"input">, ComboboxSlottableProps {}
-
-/** Props for `Combobox.Content` — the popup listbox. */
-export interface ComboboxContentProps extends ComponentProps<"div">, ComboboxSlottableProps {}
-
-/** Props for `Combobox.Item` — one selectable option in the popup. */
-export interface ComboboxItemProps
-  extends Omit<ComponentProps<"div">, "value">,
-    ComboboxSlottableProps {
-  /**
-   * The value committed when this item is chosen. This narrows the native
-   * `value` attribute, so `value` is `Omit`-ted from the base props above —
-   * without that the two resolve to an intersection artifact that leaks into
-   * consumer types and the generated prop tables.
-   */
-  value: string;
-}
-
-/** Props for `Combobox.Empty` — the no-results message inside the popup. */
-export interface ComboboxEmptyProps extends ComponentProps<"div">, ComboboxSlottableProps {}