@primitiv-ui/react 0.1.27 → 0.1.29

package/src/Select/SelectContext.ts

@@ -0,0 +1,38 @@
+import { ReactNode, RefObject } from "react";
+
+import { createStrictContext } from "../utils/index.ts";
+
+/**
+ * Context shared by the rich (non-`native`) Select sub-components —
+ * {@link SelectTrigger}, {@link SelectContent}, and (in later cycles)
+ * {@link SelectValue} / {@link SelectItem}. Provided by the rich render
+ * path of {@link SelectRoot}. The `native` path does not provide it, so
+ * the strict hook throwing outside a rich `<Select.Root>` is correct.
+ */
+export type SelectContextValue = {
+  /** Whether the listbox popover is open. */
+  open: boolean;
+  /** Open/close the listbox. De-dupes repeat transitions. */
+  setOpen: (open: boolean) => void;
+  /** The currently selected item value (`""` when nothing is selected). */
+  value: string;
+  /** Commit a selection: sets the value, closes the listbox, focuses the trigger. */
+  select: (value: string) => void;
+  /** Register (or refresh) a rich item's content for value-mirroring. */
+  registerItem: (value: string, children: ReactNode) => void;
+  /** Remove a rich item's registration on unmount. */
+  unregisterItem: (value: string) => void;
+  /** Read the registered content for a value (used by Select.Value). */
+  getItemChildren: (value: string) => ReactNode | undefined;
+  /** `id` of the listbox content, wired to the trigger's `aria-controls`. */
+  contentId: string;
+  /** `id` of the trigger, available for labelling. */
+  triggerId: string;
+  /** Ref to the trigger button so focus can return to it on close. */
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+
+export const [SelectContext, useSelectContext] =
+  createStrictContext<SelectContextValue>(
+    "Select rich sub-components (Trigger, Value, Content, Item) must be rendered inside a <Select.Root>.",
+  );

package/src/Select/SelectItemIndicatorContext.ts

@@ -0,0 +1,29 @@
+import { createStrictContext } from "../utils/index.ts";
+
+/**
+ * Context published by a rich {@link SelectItem} to its
+ * {@link SelectItemIndicator} child, carrying whether the item is currently
+ * selected so the indicator can render (and expose `data-state`).
+ */
+export type SelectItemIndicatorContextValue = {
+  /** Whether the enclosing item is the selected one. */
+  selected: boolean;
+  /**
+   * `true` while the subtree is being rendered by {@link SelectValue} as the
+   * mirrored copy of the selected item's content, rather than inside the item
+   * itself. Indicators render nothing there: the mark answers "which row is
+   * selected", which is redundant on the trigger it already represents.
+   *
+   * The mirror cannot identify indicators by element type — a styled layer
+   * wraps `Select.ItemIndicator` in its own component (the registry does), and
+   * any such wrapper is opaque to a `child.type` test. Publishing the intent
+   * through context instead lets the indicator opt itself out at any nesting
+   * depth.
+   */
+  mirrored: boolean;
+};
+
+export const [SelectItemIndicatorContext, useSelectItemIndicatorContext] =
+  createStrictContext<SelectItemIndicatorContextValue>(
+    "Select.ItemIndicator must be rendered inside a <Select.Item>.",
+  );

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

@@ -18,9 +18,9 @@ describe("Select asChild", () => {
   it("delegates to a consumer-supplied <select> wrapper, merging Root's props onto it", () => {
     // Arrange & Act
     render(
-      <Select.Root asChild disabled>
+      <Select.Root native asChild disabled>
         <StyledSelect>
-          <Select.Option value="apple">Apple</Select.Option>
+          <Select.Item value="apple">Apple</Select.Item>
         </StyledSelect>
       </Select.Root>,
     );

package/src/Select/__tests__/Select.basic-rendering.test.tsx

@@ -3,15 +3,34 @@ import { render, screen } from "@testing-library/react";
 import { Select } from "../Select";
 
 describe("Select basic rendering", () => {
-  it("renders an <option> for each Select.Option child so the value is in the DOM", () => {
+  it("renders an <option> for each Select.Item child so the value is in the DOM", () => {
     // Arrange & Act
     render(
-      <Select.Root>
-        <Select.Option value="apple">Apple</Select.Option>
+      <Select.Root native>
+        <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
 
     // Assert
     expect(screen.getByRole("option", { name: "Apple" })).toBeInTheDocument();
   });
+
+  it("sets a displayName on the compound and each sub-component", () => {
+    // Assert — empty displayNames would render each as anonymous in DevTools.
+    // `Select`, `Select.Root` and the underlying function are one object
+    // (Object.assign compound), so the compound's "Select" alias is the
+    // observable Root displayName; the sub-components are distinct objects.
+    // SelectPlaceholder's name is load-bearing beyond DevTools: Root detects a
+    // placeholder among its direct children by it (see the placeholder tests),
+    // and so must any consumer wrapper that wants that inference.
+    expect(Select.displayName).toBe("Select");
+    expect(Select.Trigger.displayName).toBe("SelectTrigger");
+    expect(Select.Value.displayName).toBe("SelectValue");
+    expect(Select.Content.displayName).toBe("SelectContent");
+    expect(Select.Item.displayName).toBe("SelectItem");
+    expect(Select.ItemIndicator.displayName).toBe("SelectItemIndicator");
+    expect(Select.Group.displayName).toBe("SelectGroup");
+    expect(Select.Separator.displayName).toBe("SelectSeparator");
+    expect(Select.Placeholder.displayName).toBe("SelectPlaceholder");
+  });
 });

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

@@ -17,9 +17,9 @@ describe("Select controlled state", () => {
         setValue(next);
       };
       return (
-        <Select.Root value={value} onValueChange={handle}>
-          <Select.Option value="apple">Apple</Select.Option>
-          <Select.Option value="banana">Banana</Select.Option>
+        <Select.Root native value={value} onValueChange={handle}>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Item value="banana">Banana</Select.Item>
         </Select.Root>
       );
     }
@@ -43,7 +43,7 @@ describe("Select controlled state", () => {
     function Wrapper() {
       const [value, setValue] = useState("apple");
       return (
-        <Select.Root
+        <Select.Root native
           value={value}
           onChange={(event) => {
             onChange(event.target.value);
@@ -51,8 +51,8 @@ describe("Select controlled state", () => {
           }}
           onValueChange={onValueChange}
         >
-          <Select.Option value="apple">Apple</Select.Option>
-          <Select.Option value="banana">Banana</Select.Option>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Item value="banana">Banana</Select.Item>
         </Select.Root>
       );
     }

package/src/Select/__tests__/Select.data-attributes.test.tsx

@@ -6,8 +6,8 @@ describe("Select data attributes", () => {
   it("renders data-disabled='' on the root <select> when disabled is true so CSS can style the disabled state", () => {
     // Arrange & Act
     render(
-      <Select.Root disabled>
-        <Select.Option value="apple">Apple</Select.Option>
+      <Select.Root native disabled>
+        <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
 
@@ -18,8 +18,8 @@ describe("Select data attributes", () => {
   it("omits data-disabled entirely when disabled is false or absent so the enabled state has nothing to override", () => {
     // Arrange & Act
     render(
-      <Select.Root>
-        <Select.Option value="apple">Apple</Select.Option>
+      <Select.Root native>
+        <Select.Item value="apple">Apple</Select.Item>
       </Select.Root>,
     );
 

package/src/Select/__tests__/Select.field-integration.test.tsx

@@ -7,8 +7,8 @@ function renderSelect(children?: React.ReactNode) {
   return (
     <>
       {children}
-      <Select.Option value="apple">Apple</Select.Option>
-      <Select.Option value="banana">Banana</Select.Option>
+      <Select.Item value="apple">Apple</Select.Item>
+      <Select.Item value="banana">Banana</Select.Item>
     </>
   );
 }
@@ -18,7 +18,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit">
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -33,7 +33,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit">
-        <Select.Root id="my-fruit" aria-label="Fruit">
+        <Select.Root native id="my-fruit" aria-label="Fruit">
           {renderSelect()}
         </Select.Root>
       </Field.Root>,
@@ -50,7 +50,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit">
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -65,7 +65,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit" invalid>
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -81,7 +81,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit">
-        <Select.Root aria-label="Fruit" aria-describedby="extra-hint">
+        <Select.Root native aria-label="Fruit" aria-describedby="extra-hint">
           {renderSelect()}
         </Select.Root>
       </Field.Root>,
@@ -99,7 +99,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit" invalid>
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -114,7 +114,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit" disabled>
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -126,7 +126,7 @@ describe("Select — Field integration", () => {
     // Arrange & Act
     render(
       <Field.Root id="fruit" required>
-        <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>
+        <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>
       </Field.Root>,
     );
 
@@ -137,7 +137,7 @@ describe("Select — Field integration", () => {
   it("Select outside Field.Root behaves identically to before — no field-derived attributes", () => {
     // Arrange & Act
     render(
-      <Select.Root aria-label="Fruit">{renderSelect()}</Select.Root>,
+      <Select.Root native aria-label="Fruit">{renderSelect()}</Select.Root>,
     );
     const select = screen.getByRole("combobox", { name: "Fruit" });
 

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

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Select } from "../Select";
+
+describe("Select rich form integration", () => {
+  it("submits the selected value through a hidden native <select>", async () => {
+    const user = userEvent.setup();
+    let submitted: string | null = null;
+    render(
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          submitted = new FormData(event.currentTarget).get(
+            "framework",
+          ) as string;
+        }}
+      >
+        <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>
+        <button type="submit">Submit</button>
+      </form>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pick" }));
+    await user.click(screen.getByText("Vue"));
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(submitted).toBe("vue");
+  });
+});

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

@@ -6,13 +6,13 @@ describe("Select group", () => {
   it("renders an <optgroup> with the given label so options can be visually grouped", () => {
     // Arrange & Act
     render(
-      <Select.Root>
+      <Select.Root native>
         <Select.Group label="Fruits">
-          <Select.Option value="apple">Apple</Select.Option>
-          <Select.Option value="banana">Banana</Select.Option>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Item value="banana">Banana</Select.Item>
         </Select.Group>
         <Select.Group label="Vegetables">
-          <Select.Option value="carrot">Carrot</Select.Option>
+          <Select.Item value="carrot">Carrot</Select.Item>
         </Select.Group>
       </Select.Root>,
     );
@@ -28,9 +28,9 @@ describe("Select group", () => {
   it("nests its Option children inside the rendered <optgroup>", () => {
     // Arrange & Act
     render(
-      <Select.Root>
+      <Select.Root native>
         <Select.Group label="Fruits">
-          <Select.Option value="apple">Apple</Select.Option>
+          <Select.Item value="apple">Apple</Select.Item>
         </Select.Group>
       </Select.Root>,
     );

package/src/Select/__tests__/Select.keyboard-edge.test.tsx

@@ -0,0 +1,95 @@
+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="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="solid">Solid</Select.Item>
+      </Select.Content>
+    </Select.Root>,
+  );
+}
+
+describe("Select keyboard edge cases", () => {
+  it("focuses the listbox itself and no-ops arrow keys when there are no options", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Empty" />
+        </Select.Trigger>
+        <Select.Content />
+      </Select.Root>,
+    );
+
+    await user.click(screen.getByRole("button"));
+    const list = screen.getByRole("listbox", { hidden: true });
+    expect(list).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    expect(list).toHaveFocus();
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("ignores unhandled multi-character keys", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("{Shift}"); // key.length > 1, not a nav/select key → no-op
+
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByRole("option", { name: "React", hidden: true })).toHaveFocus();
+  });
+
+  it("Enter is a no-op when focus is on the listbox rather than an option", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    const list = screen.getByRole("listbox", { hidden: true });
+    list.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("typeahead handles a repeated character and a no-option starting point", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    screen.getByRole("listbox", { hidden: true }).focus();
+
+    await user.keyboard("s"); // from the listbox (no option focused) → Solid
+    expect(screen.getByRole("option", { name: "Solid", hidden: true })).toHaveFocus();
+
+    await user.keyboard("s"); // repeated char → cycles, stays on the only "s" option
+    expect(screen.getByRole("option", { name: "Solid", hidden: true })).toHaveFocus();
+  });
+});
+
+describe("Select typeahead reset", () => {
+  it("clears the accumulated query after the reset window", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("s"); // → Solid
+    expect(screen.getByRole("option", { name: "Solid", hidden: true })).toHaveFocus();
+
+    // Wait past the typeahead reset window, then start a fresh search.
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    await user.keyboard("v"); // fresh query → Vue
+    expect(screen.getByRole("option", { name: "Vue", hidden: true })).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,124 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+
+import { Select } from "../Select";
+
+function renderSelect(props: Parameters<typeof Select.Root>[0] = {}) {
+  return render(
+    <Select.Root {...props}>
+      <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.Item value="solid">Solid</Select.Item>
+      </Select.Content>
+    </Select.Root>,
+  );
+}
+
+function option(name: RegExp | string) {
+  return screen.getByRole("option", { name, hidden: true });
+}
+
+describe("Select keyboard navigation", () => {
+  it("focuses the first enabled option on open when nothing is selected", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+
+    expect(option("React")).toHaveFocus();
+  });
+
+  it("focuses the selected option on open", async () => {
+    const user = userEvent.setup();
+    renderSelect({ defaultValue: "vue" });
+
+    await user.click(screen.getByRole("button"));
+
+    expect(option("Vue")).toHaveFocus();
+  });
+
+  it("moves focus with ArrowDown/ArrowUp, skipping disabled and wrapping", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("{ArrowDown}"); // React -> Vue
+    expect(option("Vue")).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}"); // Vue -> Solid (skips disabled Svelte)
+    expect(option("Solid")).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}"); // Solid -> React (wrap)
+    expect(option("React")).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}"); // React -> Solid (wrap back)
+    expect(option("Solid")).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}"); // Solid -> Vue (previous, no wrap)
+    expect(option("Vue")).toHaveFocus();
+  });
+
+  it("jumps to first/last enabled option with Home/End", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("{End}");
+    expect(option("Solid")).toHaveFocus();
+
+    await user.keyboard("{Home}");
+    expect(option("React")).toHaveFocus();
+  });
+
+  it("selects the focused option with Enter and closes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderSelect({ onValueChange });
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("{ArrowDown}"); // focus Vue
+    await user.keyboard("{Enter}");
+
+    expect(onValueChange).toHaveBeenCalledWith("vue");
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("selects the first option with Enter when it is the focused one", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select.Root onValueChange={onValueChange}>
+        <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.Content>
+      </Select.Root>,
+    );
+
+    await user.click(screen.getByRole("button")); // opens, focuses React (index 0)
+    await user.keyboard("{Enter}"); // index 0 is a valid selection, not "< 0"
+
+    expect(onValueChange).toHaveBeenCalledWith("react");
+  });
+
+  it("typeahead focuses the option whose label starts with the typed text", async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole("button"));
+    await user.keyboard("so");
+
+    expect(option("Solid")).toHaveFocus();
+  });
+});