@primitiv-ui/react 0.1.28 → 0.1.30

package/src/Carousel/__tests__/Carousel.autoplay-status.test.tsx

@@ -0,0 +1,239 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+import { Carousel } from "../index.ts";
+
+// Autoplay status: an onAutoplayStatusChange callback mirroring Ark UI's
+// shape, firing on every tick (not just play/pause toggles) so a consumer
+// can react to autoplay in JS — e.g. logging analytics on each rotation.
+describe("Carousel autoplay status", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should call onAutoplayStatusChange with type 'autoplay.start' as soon as the timer becomes active", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.start",
+      page: 0,
+      isPlaying: true,
+    });
+  });
+
+  it("should call onAutoplayStatusChange with type 'autoplay' when a scheduled tick fires", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    onAutoplayStatusChange.mockClear();
+
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay",
+      page: 0,
+      isPlaying: true,
+    });
+  });
+
+  it("should not re-emit 'autoplay.start' on ticks after the timer is already running", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    onAutoplayStatusChange.mockClear();
+
+    act(() => {
+      vi.advanceTimersByTime(8000);
+    });
+
+    expect(onAutoplayStatusChange).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: "autoplay.start" }),
+    );
+  });
+
+  it("should call onAutoplayStatusChange with type 'autoplay.stop' when playing flips to false", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+    onAutoplayStatusChange.mockClear();
+
+    act(() => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.stop",
+      page: 0,
+      isPlaying: false,
+    });
+  });
+
+  it("should call onAutoplayStatusChange with type 'autoplay.stop' once the last page is reached", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    onAutoplayStatusChange.mockClear();
+
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.stop",
+      page: 1,
+      isPlaying: false,
+    });
+  });
+
+  it("should call onAutoplayStatusChange with type 'autoplay.stop' then 'autoplay.start' across a hover pause/resume", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        data-testid="carousel-root"
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const root = screen.getByTestId("carousel-root");
+    onAutoplayStatusChange.mockClear();
+
+    act(() => {
+      fireEvent.mouseEnter(root);
+    });
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.stop",
+      page: 0,
+      isPlaying: false,
+    });
+
+    onAutoplayStatusChange.mockClear();
+    act(() => {
+      fireEvent.mouseLeave(root);
+    });
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.start",
+      page: 0,
+      isPlaying: true,
+    });
+  });
+
+  it("should never call onAutoplayStatusChange when autoplay is disabled", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        defaultPlaying
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+
+    expect(onAutoplayStatusChange).not.toHaveBeenCalled();
+  });
+
+  it("should report the live active page in the callback payload", () => {
+    const onAutoplayStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        defaultPage={1}
+        onAutoplayStatusChange={onAutoplayStatusChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(onAutoplayStatusChange).toHaveBeenCalledWith({
+      type: "autoplay.start",
+      page: 1,
+      isPlaying: true,
+    });
+  });
+});

package/src/Carousel/__tests__/Carousel.drag-status.test.tsx

@@ -0,0 +1,292 @@
+import { createRef } from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+import { Carousel } from "../index.ts";
+import type { CarouselImperativeApi } from "../index.ts";
+
+// Drag status: imperative isDragging() + an onDragStatusChange callback,
+// mirroring Ark UI's api.isDragging / onDragStatusChange shape. The
+// existing data-dragging DOM hook already tracks this for CSS, but a
+// consumer couldn't react to drag start/end in JS (e.g. to pause a video
+// in the active slide while dragging) until now.
+describe("Carousel drag status", () => {
+  function drag(viewport: HTMLElement) {
+    fireEvent.pointerDown(viewport, {
+      pointerType: "mouse",
+      pointerId: 1,
+      clientX: 200,
+      clientY: 0,
+    });
+    fireEvent.pointerMove(viewport, {
+      pointerType: "mouse",
+      pointerId: 1,
+      clientX: 240,
+      clientY: 0,
+    });
+  }
+
+  it("should report isDragging() as false before any drag", () => {
+    const ref = createRef<CarouselImperativeApi>();
+    render(
+      <Carousel.Root ref={ref} ariaLabel="Featured products" allowMouseDrag>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(ref.current!.isDragging()).toBe(false);
+  });
+
+  it("should report isDragging() as true once a drag crosses the threshold", () => {
+    const ref = createRef<CarouselImperativeApi>();
+    render(
+      <Carousel.Root ref={ref} ariaLabel="Featured products" allowMouseDrag>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    act(() => {
+      drag(screen.getByTestId("viewport"));
+    });
+
+    expect(ref.current!.isDragging()).toBe(true);
+  });
+
+  it("should report isDragging() as false again after pointerup", () => {
+    const ref = createRef<CarouselImperativeApi>();
+    render(
+      <Carousel.Root ref={ref} ariaLabel="Featured products" allowMouseDrag>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      drag(viewport);
+      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
+    });
+
+    expect(ref.current!.isDragging()).toBe(false);
+  });
+
+  it("should not flip isDragging() for a movement under the click-vs-drag threshold", () => {
+    const ref = createRef<CarouselImperativeApi>();
+    render(
+      <Carousel.Root ref={ref} ariaLabel="Featured products" allowMouseDrag>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      fireEvent.pointerDown(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+        clientX: 200,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+        clientX: 201,
+        clientY: 0,
+      });
+    });
+
+    expect(ref.current!.isDragging()).toBe(false);
+  });
+
+  it("should call onDragStatusChange with type 'dragging.start' when a drag crosses the threshold", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    act(() => {
+      drag(screen.getByTestId("viewport"));
+    });
+
+    expect(onDragStatusChange).toHaveBeenCalledWith({
+      type: "dragging.start",
+      page: 0,
+      isDragging: true,
+    });
+  });
+
+  it("should call onDragStatusChange with type 'dragging' on subsequent moves while already dragging", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      drag(viewport);
+      onDragStatusChange.mockClear();
+      fireEvent.pointerMove(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+        clientX: 260,
+        clientY: 0,
+      });
+    });
+
+    expect(onDragStatusChange).toHaveBeenCalledWith({
+      type: "dragging",
+      page: 0,
+      isDragging: true,
+    });
+  });
+
+  it("should call onDragStatusChange with type 'dragging.end' on pointerup after a real drag", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      drag(viewport);
+      onDragStatusChange.mockClear();
+      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
+    });
+
+    expect(onDragStatusChange).toHaveBeenCalledWith({
+      type: "dragging.end",
+      page: 0,
+      isDragging: false,
+    });
+  });
+
+  it("should call onDragStatusChange with type 'dragging.end' on pointercancel after a real drag", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      drag(viewport);
+      onDragStatusChange.mockClear();
+      fireEvent.pointerCancel(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+      });
+    });
+
+    expect(onDragStatusChange).toHaveBeenCalledWith({
+      type: "dragging.end",
+      page: 0,
+      isDragging: false,
+    });
+  });
+
+  it("should not call onDragStatusChange for a movement that never crosses the drag threshold", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+    const viewport = screen.getByTestId("viewport");
+
+    act(() => {
+      fireEvent.pointerDown(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+        clientX: 200,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(viewport, {
+        pointerType: "mouse",
+        pointerId: 1,
+        clientX: 201,
+        clientY: 0,
+      });
+      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
+    });
+
+    expect(onDragStatusChange).not.toHaveBeenCalled();
+  });
+
+  it("should report the live currentPage in the callback payload", () => {
+    const onDragStatusChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        defaultPage={1}
+        allowMouseDrag
+        onDragStatusChange={onDragStatusChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    act(() => {
+      drag(screen.getByTestId("viewport"));
+    });
+
+    expect(onDragStatusChange).toHaveBeenCalledWith({
+      type: "dragging.start",
+      page: 1,
+      isDragging: true,
+    });
+  });
+});

package/src/Carousel/__tests__/Carousel.dynamic-slides.test.tsx

@@ -0,0 +1,38 @@
+import { render } from "@testing-library/react";
+
+import { Carousel } from "../index.ts";
+
+describe("Carousel dynamic slide count", () => {
+  it("should not crash the IntersectionObserver when the slide count shrinks in the same render that changes another viewport-effect dependency", () => {
+    // Regression: the IO effect closes over `slideKeys` from its render but
+    // reads the live `slidesRef`. When the slide count drops in the same commit
+    // that another effect dependency changes (e.g. a Builder Reset flips
+    // `transition` fade→slide and drops the count at once), the effect re-runs
+    // with the pre-drop `slideKeys` while the removed slides have already left
+    // `slidesRef` in the mutation phase — so `observer.observe` was handed
+    // `undefined` for the orphaned keys.
+    function Harness({
+      count,
+      transition,
+    }: {
+      count: number;
+      transition: "slide" | "fade";
+    }) {
+      return (
+        <Carousel.Root ariaLabel="Featured products" transition={transition}>
+          <Carousel.Viewport>
+            {Array.from({ length: count }, (_, index) => (
+              <Carousel.Slide key={index} data-testid={`slide-${index}`} />
+            ))}
+          </Carousel.Viewport>
+        </Carousel.Root>
+      );
+    }
+
+    const { rerender } = render(<Harness count={8} transition="fade" />);
+
+    expect(() =>
+      rerender(<Harness count={4} transition="slide" />),
+    ).not.toThrow();
+  });
+});

package/src/Carousel/__tests__/Carousel.indicators.test.tsx

@@ -251,6 +251,88 @@ describe("Carousel.Indicator", () => {
       "active",
     );
   });
+
+  it("should render a non-interactive element (not a button) when readOnly", () => {
+    const { container } = render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} readOnly />
+        </Carousel.IndicatorGroup>
+      </Carousel.Root>,
+    );
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    const dot = container.querySelector("[data-carousel-indicator]")!;
+    expect(dot.tagName).toBe("SPAN");
+    expect(dot).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should still track the active page via data-state when readOnly", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} readOnly />
+          <Carousel.Indicator index={1} readOnly />
+        </Carousel.IndicatorGroup>
+      </Carousel.Root>,
+    );
+
+    const dots = container.querySelectorAll("[data-carousel-indicator]");
+    expect(dots[0]).toHaveAttribute("data-state", "active");
+    expect(dots[1]).toHaveAttribute("data-state", "inactive");
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(dots[0]).toHaveAttribute("data-state", "inactive");
+    expect(dots[1]).toHaveAttribute("data-state", "active");
+  });
+
+  it("should not navigate when a readOnly indicator is clicked", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} readOnly />
+          <Carousel.Indicator index={1} readOnly />
+        </Carousel.IndicatorGroup>
+      </Carousel.Root>,
+    );
+
+    const dots = container.querySelectorAll("[data-carousel-indicator]");
+    await user.click(dots[1]);
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should still invoke the consumer's onClick handler when readOnly", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const { container } = render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} readOnly onClick={onClick} />
+        </Carousel.IndicatorGroup>
+      </Carousel.Root>,
+    );
+
+    const dot = container.querySelector("[data-carousel-indicator]")!;
+    await user.click(dot);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("Carousel.Indicators (auto-rendered)", () => {
@@ -396,6 +478,25 @@ describe("Carousel.Indicators (auto-rendered)", () => {
       testClass,
     );
   });
+
+  it("should forward readOnly to every auto-rendered indicator", () => {
+    const { container } = render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose slide" readOnly />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.queryAllByRole("button", { name: /^Slide \d+$/ }),
+    ).toHaveLength(0);
+    expect(
+      container.querySelectorAll("[data-carousel-indicator]"),
+    ).toHaveLength(2);
+  });
 });
 
 describe("Carousel.Indicator active state", () => {