@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,205 @@
+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;
+
+function mockTrack(element: HTMLElement) {
+  element.getBoundingClientRect = () => TRACK_RECT;
+}
+
+describe("Slider pointer interaction", () => {
+  it("jumps the thumb to the pointer position on pointer down", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "30");
+  });
+
+  it("drags the thumb while the pointer moves", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+    fireEvent.pointerMove(document, { clientX: 65 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "65");
+  });
+
+  it("stops dragging after pointer up", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+    fireEvent.pointerUp(document);
+    fireEvent.pointerMove(document, { clientX: 90 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "30");
+  });
+
+  it("moves the thumb closest to the pointer", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[20, 80]} data-testid="root">
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 70 });
+
+    // Assert
+    const [lower, upper] = screen.getAllByRole("slider");
+    expect(lower).toHaveAttribute("aria-valuenow", "20");
+    expect(upper).toHaveAttribute("aria-valuenow", "70");
+  });
+
+  it("moves the lower thumb when the pointer is nearer to it", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[20, 80]} data-testid="root">
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 25 });
+
+    // Assert
+    const [lower, upper] = screen.getAllByRole("slider");
+    expect(lower).toHaveAttribute("aria-valuenow", "25");
+    expect(upper).toHaveAttribute("aria-valuenow", "80");
+  });
+
+  it("ignores a pointer move that does not change the value", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[30]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+    fireEvent.pointerMove(document, { clientX: 30 });
+    fireEvent.pointerUp(document);
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "30");
+  });
+
+  it("focuses the thumb it activates", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveFocus();
+  });
+
+  it("snaps a pointer position to the nearest step", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[0]} step={10} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 34 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "30");
+  });
+
+  it("clamps a pointer position beyond the track", () => {
+    // Arrange
+    render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 140 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "100");
+  });
+
+  it("detaches drag listeners when unmounted mid-drag", () => {
+    // Arrange
+    const { unmount } = render(
+      <Slider.Root defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    mockTrack(root);
+    fireEvent.pointerDown(root, { clientX: 30 });
+
+    // Act
+    unmount();
+
+    // Assert
+    expect(() =>
+      fireEvent.pointerMove(document, { clientX: 80 }),
+    ).not.toThrow();
+  });
+});

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

@@ -0,0 +1,99 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider";
+import { Slider } from "../Slider";
+
+import { rtlKeyboardCases } from "./Slider.fixtures";
+
+const TRACK_RECT = {
+  left: 0,
+  top: 0,
+  right: 100,
+  bottom: 10,
+  width: 100,
+  height: 10,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+describe("Slider reading direction", () => {
+  describe.each(rtlKeyboardCases)("RTL — $name", ({ key, from, expected }) => {
+    it(`moves the thumb from ${from} to ${expected}`, async () => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Slider.Root dir="rtl" 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("inverts the arrow direction again when RTL is combined with inverted", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Slider.Root dir="rtl" inverted defaultValue={[50]}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "51");
+  });
+
+  it("maps a pointer position right-to-left", () => {
+    // Arrange
+    render(
+      <Slider.Root dir="rtl" defaultValue={[10]} data-testid="root">
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => TRACK_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "70");
+  });
+
+  it("should inherit reading direction from a DirectionProvider", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <Slider.Root data-testid="root" defaultValue={[50]}>
+          <Slider.Thumb />
+        </Slider.Root>
+      </DirectionProvider>,
+    );
+    const thumb = screen.getByRole("slider");
+    thumb.focus();
+
+    // Assert — provider direction reaches the DOM
+    expect(screen.getByTestId("root")).toHaveAttribute("dir", "rtl");
+
+    // Act — in RTL, Arrow Right moves the thumb toward the start
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "49");
+  });
+});

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

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Slider } from "../Slider";
+
+describe("Slider uncontrolled state", () => {
+  it("seeds the thumbs from defaultValue", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root defaultValue={[25, 60]}>
+        <Slider.Thumb />
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    const [lower, upper] = screen.getAllByRole("slider");
+    expect(lower).toHaveAttribute("aria-valuenow", "25");
+    expect(upper).toHaveAttribute("aria-valuenow", "60");
+  });
+
+  it("defaults to a single thumb at min when no value is given", () => {
+    // Arrange & Act
+    render(
+      <Slider.Root min={5} max={50}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "5");
+  });
+
+  it("updates its own value on interaction", 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("{ArrowRight}");
+
+    // Assert
+    expect(thumb).toHaveAttribute("aria-valuenow", "51");
+  });
+
+  it("notifies onValueChange with the updated array", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Slider.Root defaultValue={[50]} onValueChange={onValueChange}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    screen.getByRole("slider").focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(onValueChange).toHaveBeenCalledWith([51]);
+  });
+});

package/src/Slider/__tests__/Slider.value-commit.test.tsx

@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+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 value commit", () => {
+  it("commits the value after a keyboard interaction", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueCommit = vi.fn();
+    render(
+      <Slider.Root defaultValue={[50]} onValueCommit={onValueCommit}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    screen.getByRole("slider").focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(onValueCommit).toHaveBeenCalledWith([51]);
+  });
+
+  it("does not commit when a keyboard press leaves the value unchanged", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onValueCommit = vi.fn();
+    render(
+      <Slider.Root defaultValue={[100]} onValueCommit={onValueCommit}>
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    screen.getByRole("slider").focus();
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(onValueCommit).not.toHaveBeenCalled();
+  });
+
+  it("commits once at the end of a pointer drag", () => {
+    // Arrange
+    const onValueCommit = vi.fn();
+    render(
+      <Slider.Root
+        defaultValue={[10]}
+        onValueCommit={onValueCommit}
+        data-testid="root"
+      >
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => TRACK_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+    fireEvent.pointerMove(document, { clientX: 55 });
+    fireEvent.pointerMove(document, { clientX: 70 });
+    fireEvent.pointerUp(document);
+
+    // Assert
+    expect(onValueCommit).toHaveBeenCalledTimes(1);
+    expect(onValueCommit).toHaveBeenCalledWith([70]);
+  });
+
+  it("does not commit when a pointer interaction leaves the value unchanged", () => {
+    // Arrange
+    const onValueCommit = vi.fn();
+    render(
+      <Slider.Root
+        defaultValue={[30]}
+        onValueCommit={onValueCommit}
+        data-testid="root"
+      >
+        <Slider.Thumb />
+      </Slider.Root>,
+    );
+    const root = screen.getByTestId("root");
+    root.getBoundingClientRect = () => TRACK_RECT;
+
+    // Act
+    fireEvent.pointerDown(root, { clientX: 30 });
+    fireEvent.pointerUp(document);
+
+    // Assert
+    expect(onValueCommit).not.toHaveBeenCalled();
+  });
+});

package/src/Slider/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useSliderContext } from "./useSliderContext";
+export { useSliderRoot } from "./useSliderRoot";
+export { useSliderThumb } from "./useSliderThumb";

package/src/Slider/hooks/useSliderContext.ts

@@ -0,0 +1 @@
+export { useSliderContext } from "../SliderContext";

package/src/Slider/hooks/useSliderRoot.ts

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import type { PointerEvent as ReactPointerEvent } from "react";
+
+import { useCollection, useControllableState } from "../../hooks";
+import type { SliderContextValue } from "../SliderContext";
+import type { SliderDirection, SliderOrientation } from "../types";
+import { clamp, getClosestThumbIndex, getPointerValue } from "../utils";
+
+type UseSliderRootArgs = {
+  min: number;
+  max: number;
+  step: number;
+  minStepsBetweenThumbs: number;
+  orientation: SliderOrientation;
+  dir: SliderDirection;
+  inverted: boolean;
+  disabled: boolean;
+  defaultValue?: number[];
+  value?: number[];
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+};
+
+export function useSliderRoot({
+  min,
+  max,
+  step,
+  minStepsBetweenThumbs,
+  orientation,
+  dir,
+  inverted,
+  disabled,
+  defaultValue,
+  value,
+  onValueChange,
+  onValueCommit,
+}: UseSliderRootArgs) {
+  const [values, setValues] = useControllableState<number[]>(
+    value,
+    defaultValue ?? [min],
+    onValueChange,
+  );
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const {
+    register: registerThumb,
+    itemsRef,
+    keys: orderedThumbIds,
+  } = useCollection<string, HTMLSpanElement>();
+
+  const setThumbValue = useCallback(
+    (index: number, nextValue: number): number[] | null => {
+      const current = valuesRef.current;
+      const gap = minStepsBetweenThumbs * step;
+      const lowerBound = index > 0 ? current[index - 1] + gap : min;
+      const upperBound =
+        index < current.length - 1 ? current[index + 1] - gap : max;
+      const clamped = clamp(nextValue, lowerBound, upperBound);
+      if (current[index] === clamped) {
+        return null;
+      }
+      const next = current.map((entry, i) => (i === index ? clamped : entry));
+      setValues(next);
+      return next;
+    },
+    [min, max, step, minStepsBetweenThumbs, setValues],
+  );
+
+  const commit = useCallback(
+    (committed: number[]) => {
+      onValueCommit?.(committed);
+    },
+    [onValueCommit],
+  );
+
+  const dragRef = useRef<{
+    move: (event: PointerEvent) => void;
+    up: () => void;
+  } | null>(null);
+
+  const onPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLSpanElement>) => {
+      if (disabled) {
+        return;
+      }
+      const rect = rootRef.current!.getBoundingClientRect();
+      const pointerValue = getPointerValue(event.clientX, event.clientY, rect, {
+        min,
+        max,
+        step,
+        orientation,
+        dir,
+        inverted,
+      });
+      const index = getClosestThumbIndex(pointerValue, valuesRef.current);
+      let pendingCommit = setThumbValue(index, pointerValue);
+      itemsRef.current.get(orderedThumbIds[index])?.focus();
+
+      const move = (moveEvent: PointerEvent) => {
+        const moveRect = rootRef.current!.getBoundingClientRect();
+        const next = setThumbValue(
+          index,
+          getPointerValue(moveEvent.clientX, moveEvent.clientY, moveRect, {
+            min,
+            max,
+            step,
+            orientation,
+            dir,
+            inverted,
+          }),
+        );
+        if (next) {
+          pendingCommit = next;
+        }
+      };
+      const up = () => {
+        document.removeEventListener("pointermove", move);
+        document.removeEventListener("pointerup", up);
+        dragRef.current = null;
+        if (pendingCommit) {
+          commit(pendingCommit);
+        }
+      };
+      dragRef.current = { move, up };
+      document.addEventListener("pointermove", move);
+      document.addEventListener("pointerup", up);
+      event.preventDefault();
+    },
+    [
+      min,
+      max,
+      step,
+      orientation,
+      dir,
+      inverted,
+      disabled,
+      setThumbValue,
+      commit,
+      orderedThumbIds,
+      itemsRef,
+    ],
+  );
+
+  useEffect(
+    () => () => {
+      if (dragRef.current) {
+        document.removeEventListener("pointermove", dragRef.current.move);
+        document.removeEventListener("pointerup", dragRef.current.up);
+      }
+    },
+    [],
+  );
+
+  const contextValue = useMemo<SliderContextValue>(
+    () => ({
+      values,
+      min,
+      max,
+      step,
+      orientation,
+      dir,
+      inverted,
+      disabled,
+      registerThumb,
+      orderedThumbIds,
+      setThumbValue,
+      commit,
+    }),
+    [
+      values,
+      min,
+      max,
+      step,
+      orientation,
+      dir,
+      inverted,
+      disabled,
+      registerThumb,
+      orderedThumbIds,
+      setThumbValue,
+      commit,
+    ],
+  );
+
+  if (min >= max) {
+    throw new Error(
+      `Slider: \`min\` (${min}) must be less than \`max\` (${max}).`,
+    );
+  }
+  if (step <= 0) {
+    throw new Error(`Slider: \`step\` (${step}) must be greater than 0.`);
+  }
+
+  return { contextValue, rootRef, onPointerDown };
+}