@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Slider } from "../Slider";
+
+const TRACK_RECT = {
+  left: 0,
+  top: 0,
+  right: 100,
+  bottom: 10,
+  width: 100,
+  height: 10,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+describe("Slider disabled", () => {
+  it("marks the root, track, range and thumb with data-disabled", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[50]} disabled data-testid="root">
+        <Slider.Track data-testid="track">
+          <Slider.Range data-testid="range" />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("root")).toHaveAttribute("data-disabled", "");
+    expect(screen.getByTestId("track")).toHaveAttribute("data-disabled", "");
+    expect(screen.getByTestId("range")).toHaveAttribute("data-disabled", "");
+    expect(screen.getByRole("slider")).toHaveAttribute("data-disabled", "");
+  });
+
+  it("marks the thumb aria-disabled and removes it from the tab order", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[50]} disabled>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    const thumb = screen.getByRole("slider");
+    expect(thumb).toHaveAttribute("aria-disabled", "true");
+    expect(thumb).not.toHaveAttribute("tabindex");
+  });
+
+  it("ignores keyboard interaction while disabled", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[50]} disabled>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+
+    // Act
+    fireEvent.keyDown(thumb, { key: "ArrowRight" });
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "50");
+  });
+
+  it("ignores pointer interaction while disabled", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[50]} disabled data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => TRACK_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 90 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "50");
+  });
+});

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

@@ -0,0 +1,45 @@
+import { render } from "@testing-library/react";
+
+import { Slider } from "../Slider";
+
+describe("Slider error handling", () => {
+  it("throws when min is not less than max", () => {
+    // Arrange & Assert
+    expect(() =>
+      render(
+        <Slider.Root min={50} max={10}>
+          <Slider.Thumb />
+        </Slider.Root>,
+      ),
+    ).toThrow("Slider: `min` (50) must be less than `max` (10).");
+  });
+
+  it("throws when min equals max", () => {
+    // Arrange & Assert
+    expect(() =>
+      render(
+        <Slider.Root min={20} max={20}>
+          <Slider.Thumb />
+        </Slider.Root>,
+      ),
+    ).toThrow("must be less than");
+  });
+
+  it("throws when step is not greater than zero", () => {
+    // Arrange & Assert
+    expect(() =>
+      render(
+        <Slider.Root step={0}>
+          <Slider.Thumb />
+        </Slider.Root>,
+      ),
+    ).toThrow("Slider: `step` (0) must be greater than 0.");
+  });
+
+  it("throws when a sub-component is rendered outside Slider.Root", () => {
+    // Arrange & Assert
+    expect(() => render(<Slider.Thumb />)).toThrow(
+      "Slider sub-components must be rendered inside a <Slider.Root>.",
+    );
+  });
+});

package/src/Slider/__tests__/Slider.fixtures.ts

@@ -0,0 +1,53 @@
+export const keyboardCases = [
+  { key: "{ArrowRight}", from: 50, expected: 51 },
+  { key: "{ArrowUp}", from: 50, expected: 51 },
+  { key: "{ArrowLeft}", from: 50, expected: 49 },
+  { key: "{ArrowDown}", from: 50, expected: 49 },
+  { key: "{PageUp}", from: 50, expected: 60 },
+  { key: "{PageDown}", from: 50, expected: 40 },
+  { key: "{Home}", from: 50, expected: 0 },
+  { key: "{End}", from: 50, expected: 100 },
+] as const;
+
+export const rtlKeyboardCases = [
+  { name: "ArrowRight decreases the value", key: "{ArrowRight}", from: 50, expected: 49 },
+  { name: "ArrowLeft increases the value", key: "{ArrowLeft}", from: 50, expected: 51 },
+] as const;
+
+export const invertedKeyboardCases = [
+  {
+    name: "horizontal ArrowRight decreases",
+    orientation: "horizontal",
+    key: "{ArrowRight}",
+    from: 50,
+    expected: 49,
+  },
+  {
+    name: "horizontal ArrowLeft increases",
+    orientation: "horizontal",
+    key: "{ArrowLeft}",
+    from: 50,
+    expected: 51,
+  },
+  {
+    name: "vertical ArrowUp decreases",
+    orientation: "vertical",
+    key: "{ArrowUp}",
+    from: 50,
+    expected: 49,
+  },
+  {
+    name: "vertical ArrowDown increases",
+    orientation: "vertical",
+    key: "{ArrowDown}",
+    from: 50,
+    expected: 51,
+  },
+  {
+    name: "vertical ArrowRight increases",
+    orientation: "vertical",
+    key: "{ArrowRight}",
+    from: 50,
+    expected: 51,
+  },
+] as const;

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

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Slider } from "../Slider";
+
+describe("Slider form integration", () => {
+  it("renders a hidden input carrying the value when name is set", () => {
+    // Arrange & Act
+    const { container } = render(
+      <Slider.Root defaultValue={[40]} name="volume">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    const input = container.querySelector('input[type="hidden"]');
+    expect(input).toHaveAttribute("name", "volume");
+    expect(input).toHaveValue("40");
+  });
+
+  it("renders no hidden inputs without a name", () => {
+    // Arrange & Act
+    const { container } = render(
+      <Slider.Root defaultValue={[40]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(container.querySelectorAll('input[type="hidden"]')).toHaveLength(0);
+  });
+
+  it("names hidden inputs with [] for a multi-thumb slider", () => {
+    // Arrange & Act
+    const { container } = render(
+      <Slider.Root defaultValue={[20, 80]} name="range">
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    const inputs = container.querySelectorAll('input[type="hidden"]');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]).toHaveAttribute("name", "range[]");
+    expect(inputs[1]).toHaveAttribute("name", "range[]");
+    expect(inputs[0]).toHaveValue("20");
+    expect(inputs[1]).toHaveValue("80");
+  });
+
+  it("keeps the hidden input in sync with the value", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const { container } = render(
+      <Slider.Root defaultValue={[50]} name="volume">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    screen.getByRole("slider").focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(container.querySelector('input[type="hidden"]')).toHaveValue("51");
+  });
+});

package/src/Slider/__tests__/Slider.inverted.test.tsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Slider } from "../Slider";
+
+import { invertedKeyboardCases } from "./Slider.fixtures";
+
+const HORIZONTAL_RECT = {
+  left: 0,
+  top: 0,
+  right: 100,
+  bottom: 10,
+  width: 100,
+  height: 10,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+const VERTICAL_RECT = {
+  left: 0,
+  top: 0,
+  right: 10,
+  bottom: 100,
+  width: 10,
+  height: 100,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+describe("Slider inverted", () => {
+  describe.each(invertedKeyboardCases)(
+    "$name",
+    ({ orientation, key, from, expected }) => {
+      it(`moves the thumb from ${from} to ${expected}`, async () => {
+        // Arrange
+        const user = userEvent.setup();
+        render(
+          <Slider.Root inverted orientation={orientation} defaultValue={[from]}>
+            <Slider.Thumb />
+          </Slider.Root>,
+        );
+        const thumb = screen.getByRole("slider");
+        thumb.focus();
+
+        // Act
+        await user.keyboard(key);
+
+        // Assert
+        expect(thumb).toHaveAttribute("aria-valuenow", String(expected));
+      });
+    },
+  );
+
+  it("leaves a non-inverted vertical slider increasing on ArrowUp", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root orientation="vertical" defaultValue={[50]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowUp}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "51");
+  });
+
+  it("maps an inverted horizontal pointer position", () => {
+    // Arrange
+    render(
+      <Slider.Root inverted defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => HORIZONTAL_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "70");
+  });
+
+  it("maps an inverted vertical pointer position", () => {
+    // Arrange
+    render(
+      <Slider.Root
+        inverted
+        orientation="vertical"
+        defaultValue={[10]}
+        data-testid="root"
+      >
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => VERTICAL_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientY: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "30");
+  });
+});

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

@@ -0,0 +1,118 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Slider } from "../Slider";
+
+import { keyboardCases } from "./Slider.fixtures";
+
+describe("Slider keyboard interaction", () => {
+  describe.each(keyboardCases)("$key", ({ key, from, expected }) => {
+    it(`moves the thumb from ${from} to ${expected}`, async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Slider.Root defaultValue={[from]}>
+          <Slider.Thumb />
+        </Slider.Root>,
+      );
+      const thumb = screen.getByRole("slider");
+      thumb.focus();
+
+      // Act
+      await user.keyboard(key);
+
+      // Assert
+      expect(thumb).toHaveAttribute("aria-valuenow", String(expected));
+    });
+  });
+
+  it("moves by a custom step", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[50]} step={5}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "55");
+  });
+
+  it("clamps at the maximum", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[100]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "100");
+  });
+
+  it("clamps at the minimum", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[0]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "0");
+  });
+
+  it("snaps fractional steps to the configured precision", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[0.5]} min={0} max={1} step={0.1}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "0.6");
+  });
+
+  it("ignores unrelated keys", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[50]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("a");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "50");
+  });
+});

package/src/Slider/__tests__/Slider.multiple-thumbs.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Slider } from "../Slider";
+
+describe("Slider multiple thumbs", () => {
+  it("stops a thumb at its higher neighbour", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[20, 80]}>
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const [lower, upper] = screen.getAllByRole("slider");
+    lower.focus();
+
+    // Act
+    await user.keyboard("{End}");
+
+    // Assert
+    expect(lower).toHaveAttribute("aria-valuenow", "80");
+    expect(upper).toHaveAttribute("aria-valuenow", "80");
+  });
+
+  it("stops a thumb at its lower neighbour", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[20, 80]}>
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const [lower, upper] = screen.getAllByRole("slider");
+    upper.focus();
+
+    // Act
+    await user.keyboard("{Home}");
+
+    // Assert
+    expect(lower).toHaveAttribute("aria-valuenow", "20");
+    expect(upper).toHaveAttribute("aria-valuenow", "20");
+  });
+
+  it("stretches the range between the two thumbs", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[20, 80]}>
+        <Slider.Track>
+          <Slider.Range data-testid="range" />
+        </Slider.Track>
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("range")).toHaveStyle({
+      left: "20%",
+      right: "20%",
+    });
+  });
+
+  it("keeps a minimum gap between thumbs", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root defaultValue={[20, 80]} minStepsBetweenThumbs={10}>
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const [lower] = screen.getAllByRole("slider");
+    lower.focus();
+
+    // Act
+    await user.keyboard("{End}");
+
+    // Assert
+    expect(lower).toHaveAttribute("aria-valuenow", "70");
+  });
+});

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

@@ -0,0 +1,101 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Slider } from "../Slider";
+
+const VERTICAL_RECT = {
+  left: 0,
+  top: 0,
+  right: 10,
+  bottom: 100,
+  width: 10,
+  height: 100,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+describe("Slider orientation", () => {
+  it('marks a vertical slider with data-orientation="vertical"', () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[50]} orientation="vertical" data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("root")).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+    expect(screen.getByRole("slider")).toHaveAttribute(
+      "aria-orientation",
+      "vertical",
+    );
+  });
+
+  it("positions a vertical thumb from the bottom edge", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[25]} orientation="vertical">
+        <Slider.Thumb data-testid="thumb" />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("thumb")).toHaveStyle({ bottom: "25%" });
+  });
+
+  it("stretches a vertical range along the bottom edge", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[40]} orientation="vertical">
+        <Slider.Track>
+          <Slider.Range data-testid="range" />
+        </Slider.Track>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("range")).toHaveStyle({
+      bottom: "0%",
+      top: "60%",
+    });
+  });
+
+  it("maps a pointer's vertical position to a value", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} orientation="vertical" data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => VERTICAL_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientY: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "70");
+  });
+
+  it("drags a vertical thumb as the pointer moves", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} orientation="vertical" data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => VERTICAL_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientY: 30 });
+    fireEvent.pointerMove(document, { clientY: 80 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "20");
+  });
+});