@primitiv-ui/react 0.1.28 → 0.1.29

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

@@ -0,0 +1,151 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl disabled — per item", () => {
+  it("forwards the native disabled attribute and sets data-disabled on the segment", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b" disabled>
+          B
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const b = screen.getByRole("radio", { name: "B" });
+
+    // Assert
+    expect(b).toBeDisabled();
+    expect(b).toHaveAttribute("data-disabled", "");
+    expect(screen.getByRole("radio", { name: "A" })).not.toHaveAttribute(
+      "data-disabled",
+    );
+  });
+
+  it("skips a disabled segment when arrowing forwards", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b" disabled>
+          B
+        </SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const c = screen.getByRole("radio", { name: "C" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(c).toHaveFocus();
+    expect(c).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("skips a disabled segment when computing the home-base tab stop", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a" disabled>
+          A
+        </SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert: first enabled segment is the tab stop, not the disabled one
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+  });
+});
+
+describe("SegmentedControl disabled — whole control", () => {
+  it("sets data-disabled on the root and disables every segment", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" disabled defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("data-disabled", "");
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    expect(a).toBeDisabled();
+    expect(a).toHaveAttribute("data-disabled", "");
+    expect(b).toBeDisabled();
+    expect(b).toHaveAttribute("data-disabled", "");
+  });
+
+  it("still reflects the selected segment while the control is disabled", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" disabled defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("does not fire onValueChange when a disabled control's segment is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        disabled
+        onValueChange={onValueChange}
+      >
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("radio", { name: "B" }));
+
+    // Assert
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("takes no segment into the tab sequence when disabled and nothing is selected", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" disabled>
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.error-handling.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl error handling", () => {
+  it("throws a helpful error when SegmentedControl.Item is rendered outside Root", () => {
+    // Arrange
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    // Assert
+    expect(() =>
+      render(<SegmentedControl.Item value="a">A</SegmentedControl.Item>),
+    ).toThrow(/SegmentedControl sub-components must be rendered inside/);
+
+    error.mockRestore();
+  });
+});

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

@@ -0,0 +1,117 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl keyboard interaction", () => {
+  it("selects and focuses the next segment on ArrowRight (horizontal default)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(b).toHaveFocus();
+    expect(b).toHaveAttribute("aria-checked", "true");
+    expect(a).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("selects and focuses the previous segment on ArrowLeft", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="b">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    b.focus();
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(a).toHaveFocus();
+    expect(a).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("wraps from last to first on ArrowRight", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="b">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    b.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(a).toHaveFocus();
+    expect(a).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("wraps from first to last on ArrowLeft", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(b).toHaveFocus();
+    expect(b).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("selects and focuses with vertical arrows when orientation is vertical", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        orientation="vertical"
+        defaultValue="a"
+      >
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(b).toHaveFocus();
+    expect(b).toHaveAttribute("aria-checked", "true");
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.orientation.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl orientation", () => {
+  it("ignores vertical arrows when orientation is horizontal (default)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert — vertical arrows are inert on a horizontal control
+    expect(a).toHaveFocus();
+    expect(a).toHaveAttribute("aria-checked", "true");
+    expect(b).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("ignores horizontal arrows when orientation is vertical", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        orientation="vertical"
+        defaultValue="a"
+      >
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    a.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert — horizontal arrows are inert on a vertical control
+    expect(a).toHaveFocus();
+    expect(a).toHaveAttribute("aria-checked", "true");
+    expect(b).toHaveAttribute("aria-checked", "false");
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.reading-direction.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl reading direction", () => {
+  it("inverts horizontal arrows when dir is rtl", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" dir="rtl" defaultValue="a">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const b = screen.getByRole("radio", { name: "B" });
+    screen.getByRole("radio", { name: "A" }).focus();
+
+    // Assert — dir reaches the DOM
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("dir", "rtl");
+
+    // Act — in RTL, Arrow Left moves forward
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(b).toHaveFocus();
+    expect(b).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("inherits reading direction from a DirectionProvider", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <SegmentedControl.Root aria-label="Mode" defaultValue="a">
+          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+          <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+          <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      </DirectionProvider>,
+    );
+    const b = screen.getByRole("radio", { name: "B" });
+    screen.getByRole("radio", { name: "A" }).focus();
+
+    // Assert — provider direction reaches the DOM
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("dir", "rtl");
+
+    // Act — in RTL, Arrow Left moves forward
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(b).toHaveFocus();
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.ref-forwarding.test.tsx

@@ -0,0 +1,45 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl.Item ref forwarding", () => {
+  it("forwards the underlying button element to a consumer function ref", () => {
+    // Arrange
+    const received: (HTMLButtonElement | null)[] = [];
+    const functionRef = (node: HTMLButtonElement | null) => {
+      received.push(node);
+    };
+
+    // Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a" ref={functionRef}>
+          A
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    const button = screen.getByRole("radio", { name: "A" });
+    expect(received).toContain(button);
+  });
+
+  it("forwards the underlying button element to a consumer object ref", () => {
+    // Arrange
+    const objectRef = createRef<HTMLButtonElement>();
+
+    // Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a" ref={objectRef}>
+          A
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    const button = screen.getByRole("radio", { name: "A" });
+    expect(objectRef.current).toBe(button);
+  });
+});

package/src/SegmentedControl/__tests__/SegmentedControl.roving-tabindex.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl roving tabindex", () => {
+  it("puts only the first segment in the tab sequence when nothing is selected", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("radio", { name: "C" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("puts only the selected segment in the tab sequence when one is selected", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="b">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("radio", { name: "C" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("moves the tab stop to a newly selected segment", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const a = screen.getByRole("radio", { name: "A" });
+    const b = screen.getByRole("radio", { name: "B" });
+    expect(a).toHaveAttribute("tabindex", "0");
+
+    // Act
+    await user.click(b);
+
+    // Assert
+    expect(a).toHaveAttribute("tabindex", "-1");
+    expect(b).toHaveAttribute("tabindex", "0");
+  });
+
+  it("tabs into the single home-base segment and not the others", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <>
+        <button type="button">Before</button>
+        <SegmentedControl.Root aria-label="Mode">
+          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+          <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+          <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+        </SegmentedControl.Root>
+        <button type="button">After</button>
+      </>,
+    );
+    screen.getByRole("button", { name: "Before" }).focus();
+
+    // Act
+    await user.tab();
+
+    // Assert: focus lands on the first segment (the home base)
+    expect(screen.getByRole("radio", { name: "A" })).toHaveFocus();
+
+    // Tabbing again escapes the group entirely — the others are tabindex -1.
+    await user.tab();
+    expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SegmentedControl } from "../SegmentedControl";
+
+describe("SegmentedControl uncontrolled state", () => {
+  it("reflects defaultValue on mount", () => {
+    // Arrange & Act
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="styled">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+    expect(screen.getByRole("radio", { name: "Styled" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(screen.getByRole("radio", { name: "Styled" })).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
+  });
+
+  it("selects an item on click and un-selects the previous one", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <SegmentedControl.Root aria-label="Mode" defaultValue="headless">
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const headless = screen.getByRole("radio", { name: "Headless" });
+    const styled = screen.getByRole("radio", { name: "Styled" });
+    expect(headless).toHaveAttribute("aria-checked", "true");
+
+    // Act
+    await user.click(styled);
+
+    // Assert
+    expect(headless).toHaveAttribute("aria-checked", "false");
+    expect(styled).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("fires onValueChange with the new value on every distinct selection", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root aria-label="Mode" onValueChange={onValueChange}>
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("radio", { name: "Headless" }));
+    await user.click(screen.getByRole("radio", { name: "Styled" }));
+
+    // Assert
+    expect(onValueChange).toHaveBeenNthCalledWith(1, "headless");
+    expect(onValueChange).toHaveBeenNthCalledWith(2, "styled");
+  });
+
+  it("does not re-fire onValueChange when the already-selected item is clicked again", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <SegmentedControl.Root
+        aria-label="Mode"
+        defaultValue="headless"
+        onValueChange={onValueChange}
+      >
+        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("radio", { name: "Headless" }));
+    await user.click(screen.getByRole("radio", { name: "Headless" }));
+
+    // Assert
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+});

package/src/SegmentedControl/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useSegmentedControlContext } from "./useSegmentedControlContext";
+export { useSegmentedControlRoot } from "./useSegmentedControlRoot";

package/src/SegmentedControl/hooks/useSegmentedControlContext.ts

@@ -0,0 +1 @@
+export { useSegmentedControlContext } from "../SegmentedControlContext";