@primitiv-ui/react 0.1.0

package/src/Carousel/__tests__/Carousel.intersection-observer.test.tsx

@@ -0,0 +1,276 @@
+import { RefObject, useRef } from "react";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+import type { CarouselImperativeApi } from "..";
+import { MockIntersectionObserver } from "../../test/intersectionObserverPolyfill";
+
+describe("Carousel IntersectionObserver fallback + isInView", () => {
+  it("isInView(slideIndex) should reflect the observer's last reported intersection state", () => {
+    const ref = {
+      current: null,
+    } as unknown as RefObject<CarouselImperativeApi>;
+
+    render(
+      <Carousel.Root ref={ref} ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(ref.current!.isInView(0)).toBe(false);
+    expect(ref.current!.isInView(1)).toBe(false);
+
+    const io = MockIntersectionObserver.latest!;
+    act(() => {
+      io.fire([
+        {
+          target: screen.getByTestId("slide-0"),
+          isIntersecting: true,
+          intersectionRatio: 1,
+        },
+        {
+          target: screen.getByTestId("slide-1"),
+          isIntersecting: false,
+          intersectionRatio: 0,
+        },
+      ]);
+    });
+
+    expect(ref.current!.isInView(0)).toBe(true);
+    expect(ref.current!.isInView(1)).toBe(false);
+  });
+
+  it("should drive currentPage from IO entries crossing the 0.6 threshold", () => {
+    function Parent() {
+      const ref = useRef<CarouselImperativeApi>(null);
+      return (
+        <Carousel.Root ref={ref} ariaLabel="Featured products">
+          <Carousel.Viewport data-testid="viewport">
+            <Carousel.Slide data-testid="slide-0" />
+            <Carousel.Slide data-testid="slide-1" />
+            <Carousel.Slide data-testid="slide-2" />
+          </Carousel.Viewport>
+        </Carousel.Root>
+      );
+    }
+
+    render(<Parent />);
+
+    // Settle the carousel's initial mount-time scroll so the IO callback
+    // is not gated by the in-flight programmatic scroll guard.
+    act(() => {
+      screen.getByTestId("viewport").dispatchEvent(new Event("scrollend"));
+    });
+
+    const io = MockIntersectionObserver.latest!;
+    act(() => {
+      io.fire([
+        {
+          target: screen.getByTestId("slide-0"),
+          isIntersecting: false,
+          intersectionRatio: 0.1,
+        },
+        {
+          target: screen.getByTestId("slide-2"),
+          isIntersecting: true,
+          intersectionRatio: 0.9,
+        },
+      ]);
+    });
+
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should not change the page when no observed slides cross the visibility threshold", () => {
+    const onPageChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        page={0}
+        onPageChange={onPageChange}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    const io = MockIntersectionObserver.latest!;
+    act(() => {
+      io.fire([
+        {
+          target: screen.getByTestId("slide-0"),
+          isIntersecting: false,
+          intersectionRatio: 0.2,
+        },
+        {
+          target: screen.getByTestId("slide-1"),
+          isIntersecting: false,
+          intersectionRatio: 0.1,
+        },
+      ]);
+    });
+
+    expect(onPageChange).not.toHaveBeenCalled();
+  });
+
+  it("should derive the page index from floor(slideIndex / slidesPerPage) when slidesPerPage > 1", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // Settle the carousel's initial mount-time scroll so the IO callback
+    // is not gated by the in-flight programmatic scroll guard.
+    act(() => {
+      screen.getByTestId("viewport").dispatchEvent(new Event("scrollend"));
+    });
+
+    const io = MockIntersectionObserver.latest!;
+    act(() => {
+      io.fire([
+        {
+          target: screen.getByTestId("slide-3"),
+          isIntersecting: true,
+          intersectionRatio: 0.8,
+        },
+      ]);
+    });
+
+    // floor(3 / 2) = page 1; slides 2 and 3 active.
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should not drive the page from the IntersectionObserver when the browser supports scrollsnapchange", () => {
+    // scrollsnapchange reports the precise centred snap target, so it owns
+    // the active page. The IO's lowest-index-visible heuristic is only a
+    // fallback for browsers without the event — and for a centre-aligned
+    // carousel that shows several slides at once it would override the
+    // correct page with the *leftmost* visible slide. When the event is
+    // available the observer must feed isInView only, not the page.
+    const ref = {
+      current: null,
+    } as unknown as RefObject<CarouselImperativeApi>;
+    // The presence of the on* handler property is the feature-detection
+    // signal; assigning it (even null) makes `"onscrollsnapchange" in window`
+    // true the way a supporting browser does.
+    (
+      window as unknown as { onscrollsnapchange: unknown }
+    ).onscrollsnapchange = null;
+    try {
+      render(
+        <Carousel.Root
+          ref={ref}
+          ariaLabel="Featured products"
+          snapAlign="center"
+        >
+          <Carousel.Viewport data-testid="viewport">
+            <Carousel.Slide data-testid="slide-0" />
+            <Carousel.Slide data-testid="slide-1" />
+            <Carousel.Slide data-testid="slide-2" />
+          </Carousel.Viewport>
+        </Carousel.Root>,
+      );
+
+      act(() => {
+        screen.getByTestId("viewport").dispatchEvent(new Event("scrollend"));
+      });
+
+      const io = MockIntersectionObserver.latest!;
+      act(() => {
+        io.fire([
+          {
+            target: screen.getByTestId("slide-2"),
+            isIntersecting: true,
+            intersectionRatio: 0.9,
+          },
+        ]);
+      });
+
+      // The page stays put — scrollsnapchange owns it…
+      expect(screen.getByTestId("slide-0")).toHaveAttribute(
+        "data-state",
+        "active",
+      );
+      expect(screen.getByTestId("slide-2")).toHaveAttribute(
+        "data-state",
+        "inactive",
+      );
+      // …but isInView still reflects what the observer reported.
+      expect(ref.current!.isInView(2)).toBe(true);
+    } finally {
+      delete (window as unknown as { onscrollsnapchange?: unknown })
+        .onscrollsnapchange;
+    }
+  });
+
+  it("should not let an IO callback reset the page while a programmatic scroll is in flight", async () => {
+    // Regression test: clicking NextTrigger calls next() which sets
+    // internalPage to 1 and triggers a scrollIntoView. If the IO callback
+    // fires before the scroll settles (slide-0 still ≥0.6 visible), the
+    // callback must not call goTo(0) and undo the navigation.
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    // Simulate the IO callback firing mid-scroll: slide-0 still highly
+    // visible because the smooth-scroll animation hasn't finished yet.
+    const io = MockIntersectionObserver.latest!;
+    act(() => {
+      io.fire([
+        {
+          target: screen.getByTestId("slide-0"),
+          isIntersecting: true,
+          intersectionRatio: 0.9,
+        },
+        {
+          target: screen.getByTestId("slide-1"),
+          isIntersecting: false,
+          intersectionRatio: 0.1,
+        },
+      ]);
+    });
+
+    // The page must remain at 1, not be reset to 0.
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.keyboard-navigation.test.tsx

@@ -0,0 +1,158 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+
+describe("Carousel keyboard navigation", () => {
+  it("should advance the active page when ArrowRight is pressed with the viewport focused", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // Tab into the carousel — the Viewport must be in the tab order so
+    // keyboard users can reach the rotation control without first
+    // tabbing through every slide's interactive content.
+    await user.tab();
+    expect(screen.getByTestId("viewport")).toHaveFocus();
+
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should retreat the active page when ArrowLeft is pressed with the viewport focused", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" defaultPage={2}>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    await user.tab();
+    await user.keyboard("{ArrowLeft}");
+
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should jump to the first page when Home is pressed with the viewport focused", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" defaultPage={2}>
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    await user.tab();
+    await user.keyboard("{Home}");
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should jump to the last page when End is pressed with the viewport focused", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    await user.tab();
+    await user.keyboard("{End}");
+
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should clamp at the boundaries when arrow keys are pressed", async () => {
+    function Fixture({ start }: { start: number }) {
+      return (
+        <Carousel.Root ariaLabel="Featured products" defaultPage={start}>
+          <Carousel.Viewport data-testid="viewport">
+            <Carousel.Slide data-testid="slide-0" />
+            <Carousel.Slide data-testid="slide-1" />
+            <Carousel.Slide data-testid="slide-2" />
+          </Carousel.Viewport>
+        </Carousel.Root>
+      );
+    }
+
+    const user = userEvent.setup();
+
+    const { unmount } = render(<Fixture start={2} />);
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    unmount();
+
+    render(<Fixture start={0} />);
+    await user.tab();
+    await user.keyboard("{ArrowLeft}");
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should leave focus inside a slide alone — arrow keys don't navigate when a child element is the focus target", async () => {
+    const onPageChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        page={0}
+        onPageChange={onPageChange}
+      >
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide>
+            <button data-testid="slide-link">Open</button>
+          </Carousel.Slide>
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // Tab past the Viewport onto the link inside slide-0.
+    await user.tab();
+    await user.tab();
+    expect(screen.getByTestId("slide-link")).toHaveFocus();
+
+    // ArrowRight while a slide-internal control has focus must keep its
+    // native semantics rather than steal the keypress for navigation.
+    await user.keyboard("{ArrowRight}");
+
+    expect(onPageChange).not.toHaveBeenCalled();
+  });
+});

package/src/Carousel/__tests__/Carousel.play-pause.test.tsx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+
+describe("Carousel.PlayPauseTrigger basic shape", () => {
+  it("should render the PlayPauseTrigger as <button type='button'>", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toBeVisible();
+    expect(trigger).toHaveAttribute("type", "button");
+  });
+
+  it("should accept a className prop", () => {
+    const testClass = "custom-play-pause";
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger className={testClass} />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveAttribute("class", testClass);
+  });
+
+  it("should apply a className of empty string by default when not specified", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveAttribute("class", "");
+  });
+
+  it("should throw an error when used outside Carousel.Root", () => {
+    expect(() => {
+      render(<Carousel.PlayPauseTrigger />);
+    }).toThrow("Component must be rendered as a child of Carousel.Root");
+  });
+});
+
+describe("Carousel.PlayPauseTrigger uncontrolled playing state", () => {
+  it("should default to playing=false (paused) and announce 'Start automatic slide show'", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Start automatic slide show" }),
+    ).toBeVisible();
+  });
+
+  it("should accept defaultPlaying={true} to seed the initial playing state", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay defaultPlaying>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Stop automatic slide show" }),
+    ).toBeVisible();
+  });
+
+  it("should toggle playing when the trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Start automatic slide show" }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Stop automatic slide show" }),
+    ).toBeVisible();
+
+    await user.click(
+      screen.getByRole("button", { name: "Stop automatic slide show" }),
+    );
+    expect(
+      screen.getByRole("button", { name: "Start automatic slide show" }),
+    ).toBeVisible();
+  });
+});
+
+describe("Carousel.PlayPauseTrigger controlled playing state", () => {
+  it("should reflect the playing prop, not internal state", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        playing
+        onPlayingChange={() => {}}
+      >
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Stop automatic slide show" }),
+    ).toBeVisible();
+  });
+
+  it("should call onPlayingChange when clicked, without updating internal state", async () => {
+    const user = userEvent.setup();
+    const onPlayingChange = vi.fn();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        playing={false}
+        onPlayingChange={onPlayingChange}
+      >
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onPlayingChange).toHaveBeenCalledTimes(1);
+    expect(onPlayingChange).toHaveBeenCalledWith(true);
+    // Parent has not re-rendered with a new playing prop, so the
+    // visible state must remain at the controlled value.
+    expect(
+      screen.getByRole("button", { name: "Start automatic slide show" }),
+    ).toBeVisible();
+  });
+
+  it("should reflect external playing changes that don't go through the trigger", async () => {
+    const user = userEvent.setup();
+    function Parent() {
+      const [playing, setPlaying] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setPlaying(true)}>
+            External play
+          </button>
+          <Carousel.Root
+            ariaLabel="Featured products"
+            autoplay
+            playing={playing}
+            onPlayingChange={setPlaying}
+          >
+            <Carousel.PlayPauseTrigger />
+          </Carousel.Root>
+        </>
+      );
+    }
+
+    render(<Parent />);
+
+    await user.click(screen.getByRole("button", { name: "External play" }));
+
+    expect(
+      screen.getByRole("button", { name: "Stop automatic slide show" }),
+    ).toBeVisible();
+  });
+});
+
+describe("Carousel.PlayPauseTrigger render-prop children", () => {
+  it("should pass { playing } to a function child and render its return value", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger>
+          {({ playing }) => (playing ? "Pause slideshow" : "Start slideshow")}
+        </Carousel.PlayPauseTrigger>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("Start slideshow");
+  });
+
+  it("should re-render the function child when playing flips", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger>
+          {({ playing }) => (playing ? "Pause slideshow" : "Start slideshow")}
+        </Carousel.PlayPauseTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("button")).toHaveTextContent("Pause slideshow");
+  });
+
+  it("should render static children unchanged when no function is provided", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger>
+          <span data-testid="play-pause-icon" />
+        </Carousel.PlayPauseTrigger>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("play-pause-icon")).toBeVisible();
+  });
+});
+
+describe("Carousel.PlayPauseTrigger styling hooks", () => {
+  it('should emit data-state="paused" when not playing', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveAttribute("data-state", "paused");
+  });
+
+  it('should emit data-state="playing" when playing', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" autoplay defaultPlaying>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveAttribute("data-state", "playing");
+  });
+});