@primitiv-ui/react 0.1.38 → 0.1.40

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

@@ -1,232 +0,0 @@
-import { useState } from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Carousel } from "../index.ts";
-
-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");
-  });
-});

package/src/Carousel/__tests__/Carousel.prev-next.test.tsx

@@ -1,68 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Carousel } from "../index.ts";
-
-function renderWithSlides(
-  rootProps: { defaultPage?: number } = {},
-  count = 3,
-) {
-  return render(
-    <Carousel.Root ariaLabel="Featured products" {...rootProps}>
-      <Carousel.Viewport>
-        {Array.from({ length: count }).map((_, i) => (
-          <Carousel.Slide key={i} data-testid={`slide-${i}`} />
-        ))}
-      </Carousel.Viewport>
-      <Carousel.PreviousTrigger>Previous</Carousel.PreviousTrigger>
-      <Carousel.NextTrigger>Next</Carousel.NextTrigger>
-    </Carousel.Root>,
-  );
-}
-
-describe("Carousel boundary behaviour", () => {
-  it("should disable Carousel.PreviousTrigger when the active page is the first slide", () => {
-    renderWithSlides();
-
-    expect(screen.getByRole("button", { name: "Previous" })).toBeDisabled();
-  });
-
-  it("should disable Carousel.NextTrigger when the active page is the last slide", () => {
-    renderWithSlides({ defaultPage: 2 });
-
-    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
-  });
-
-  it("should leave triggers enabled in the middle of the range, then disable Next once the user reaches the last slide", async () => {
-    const user = userEvent.setup();
-    renderWithSlides({ defaultPage: 1 });
-
-    // Middle: neither trigger disabled.
-    expect(screen.getByRole("button", { name: "Previous" })).not.toBeDisabled();
-    expect(screen.getByRole("button", { name: "Next" })).not.toBeDisabled();
-
-    await user.click(screen.getByRole("button", { name: "Next" }));
-
-    // After advancing to the last slide, Next must clamp.
-    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
-  });
-
-  it("should disable both triggers when there are no slides registered", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.PreviousTrigger>Previous</Carousel.PreviousTrigger>
-        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByRole("button", { name: "Previous" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
-  });
-
-  it("should disable both triggers when only one slide is registered", () => {
-    renderWithSlides({}, 1);
-
-    expect(screen.getByRole("button", { name: "Previous" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
-  });
-});

package/src/Carousel/__tests__/Carousel.progress-text.test.tsx

@@ -1,76 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-
-import { Carousel } from "../index.ts";
-
-// ProgressText: a rendered "N of M" progress announcement, closing the Ark
-// UI parity gap between the imperative getProgress() data and an actual
-// subcomponent a consumer can drop into the DOM without wiring it themselves.
-describe("Carousel ProgressText", () => {
-  it("should render the default '1 of 3' text for the first of three pages", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.ProgressText data-testid="progress" />
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("progress")).toHaveTextContent("1 of 3");
-  });
-
-  it("should update as the active page advances", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
-        <Carousel.ProgressText data-testid="progress" />
-      </Carousel.Root>,
-    );
-
-    act(() => {
-      fireEvent.click(screen.getByRole("button", { name: "Next" }));
-    });
-
-    expect(screen.getByTestId("progress")).toHaveTextContent("2 of 2");
-  });
-
-  it("should render custom children instead of the default text when provided", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.ProgressText data-testid="progress">
-          Custom progress
-        </Carousel.ProgressText>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("progress")).toHaveTextContent(
-      "Custom progress",
-    );
-  });
-
-  it("should forward native span props like className", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport>
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.ProgressText
-          data-testid="progress"
-          className="custom-class"
-        />
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("progress")).toHaveClass("custom-class");
-  });
-});

package/src/Carousel/__tests__/Carousel.reduced-motion.test.tsx

@@ -1,46 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Carousel } from "../index.ts";
-
-function mockReducedMotion(matches: boolean) {
-  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
-    matches: query.includes("prefers-reduced-motion") ? matches : false,
-    media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }));
-}
-
-describe("Carousel scroll sync respects prefers-reduced-motion", () => {
-  afterEach(() => {
-    // @ts-expect-error: restore by deletion so other suites get jsdom default.
-    delete window.matchMedia;
-  });
-
-  it("should scroll with behavior='instant' when prefers-reduced-motion is reduce", async () => {
-    mockReducedMotion(true);
-    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.Viewport>
-        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
-      </Carousel.Root>,
-    );
-
-    const scrollToSpy = vi.spyOn(screen.getByTestId("viewport"), "scrollTo");
-
-    await user.click(screen.getByRole("button", { name: "Next" }));
-
-    expect(scrollToSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ behavior: "instant" }),
-    );
-  });
-});

package/src/Carousel/__tests__/Carousel.refresh-progress.test.tsx

@@ -1,84 +0,0 @@
-import { createRef } from "react";
-import { act, render, screen } from "@testing-library/react";
-
-import { Carousel } from "../index.ts";
-import type { CarouselImperativeApi } from "../index.ts";
-
-function fixture(apiRef: React.Ref<CarouselImperativeApi>, slides = 3) {
-  return (
-    <Carousel.Root ref={apiRef} ariaLabel="Featured products">
-      <Carousel.Viewport>
-        {Array.from({ length: slides }).map((_, i) => (
-          <Carousel.Slide key={i} data-testid={`slide-${i}`} />
-        ))}
-      </Carousel.Viewport>
-    </Carousel.Root>
-  );
-}
-
-describe("Carousel imperative getProgress / refresh", () => {
-  it("getProgress() should return the live page, totalPages, and a 0..1 value", () => {
-    const ref = createRef<CarouselImperativeApi>();
-    render(fixture(ref, 4));
-
-    expect(ref.current!.getProgress()).toEqual({
-      page: 0,
-      totalPages: 4,
-      value: 0,
-    });
-
-    act(() => {
-      ref.current!.goTo(2);
-    });
-
-    expect(ref.current!.getProgress()).toEqual({
-      page: 2,
-      totalPages: 4,
-      value: 2 / 3,
-    });
-  });
-
-  it("getProgress() should return value=0 when no slides are registered", () => {
-    const ref = createRef<CarouselImperativeApi>();
-    render(
-      <Carousel.Root ref={ref} ariaLabel="Featured products" />,
-    );
-
-    expect(ref.current!.getProgress()).toEqual({
-      page: 0,
-      totalPages: 0,
-      value: 0,
-    });
-  });
-
-  it("getProgress() should return value=0 with a single page", () => {
-    const ref = createRef<CarouselImperativeApi>();
-    render(fixture(ref, 1));
-
-    expect(ref.current!.getProgress()).toEqual({
-      page: 0,
-      totalPages: 1,
-      value: 0,
-    });
-  });
-
-  it("refresh() should re-issue the scroll for the current page", () => {
-    const ref = createRef<CarouselImperativeApi>();
-    render(
-      <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.Viewport>
-      </Carousel.Root>,
-    );
-
-    const scrollToSpy = vi.spyOn(screen.getByTestId("viewport"), "scrollTo");
-
-    act(() => {
-      ref.current!.refresh();
-    });
-
-    expect(scrollToSpy).toHaveBeenCalled();
-  });
-});

package/src/Carousel/__tests__/Carousel.scroll-margin.test.tsx

@@ -1,167 +0,0 @@
-import { act, render, screen } from "@testing-library/react";
-
-import { MockResizeObserver } from "../../test/resizeObserverPolyfill";
-import { Carousel } from "../index.ts";
-
-// scroll-margin extends a multi-slide page's *leading* slide's native
-// scroll-snap "snap area" out to the page's actual last member, so a user's
-// own swipe/wheel/touch settling (driven entirely by the browser's snap
-// engine, never our JS) agrees with the programmatic scrollTo fix in
-// Carousel.scroll-sync.test.tsx — both now measure the whole page, not just
-// the leading slide's own box. Mocks are attached to the shared prototypes
-// (not specific instances found via screen.getByTestId after render) since
-// the effect that sets scroll-margin runs on the very first render.
-describe("Carousel multi-slide scroll-margin", () => {
-  function mockRects(rectsByTestId: Record<string, Partial<DOMRect>>) {
-    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
-      function (this: HTMLElement) {
-        const rect = rectsByTestId[this.dataset.testid ?? ""];
-        return { left: 0, top: 0, width: 0, height: 0, ...rect } as DOMRect;
-      },
-    );
-  }
-
-  it("should set scroll-margin-inline-end on each page's leading slide to reach its last member", () => {
-    mockRects({
-      "slide-0": { left: 0, width: 240 },
-      "slide-1": { left: 240, width: 240 },
-      "slide-2": { left: 480, width: 240 },
-      "slide-3": { left: 720, width: 240 },
-    });
-
-    render(
-      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
-        <Carousel.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>,
-    );
-
-    // Page 0 = [slide-0, slide-1]; page 1 = [slide-2, slide-3]. Each leading
-    // slide's own trailing edge (240 / 720) must extend to its page's real
-    // last member's trailing edge (480 / 960) — 240px either way.
-    expect(screen.getByTestId("slide-0").style.scrollMarginInlineEnd).toBe(
-      "240px",
-    );
-    expect(screen.getByTestId("slide-2").style.scrollMarginInlineEnd).toBe(
-      "240px",
-    );
-    // Non-leading members never get it set at all.
-    expect(screen.getByTestId("slide-1").style.scrollMarginInlineEnd).toBe("");
-    expect(screen.getByTestId("slide-3").style.scrollMarginInlineEnd).toBe("");
-  });
-
-  it("should not set any scroll-margin when slidesPerPage is 1 (the common case)", () => {
-    mockRects({
-      "slide-0": { left: 0, width: 480 },
-      "slide-1": { left: 480, width: 480 },
-    });
-
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport>
-          <Carousel.Slide data-testid="slide-0" />
-          <Carousel.Slide data-testid="slide-1" />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("slide-0").style.scrollMarginInlineEnd).toBe("");
-    expect(screen.getByTestId("slide-1").style.scrollMarginInlineEnd).toBe("");
-  });
-
-  it("should use scroll-margin-block-end (not inline) when vertical, leaving inline unset", () => {
-    mockRects({
-      "slide-0": { top: 0, height: 180 },
-      "slide-1": { top: 180, height: 180 },
-    });
-
-    render(
-      <Carousel.Root
-        ariaLabel="Featured products"
-        orientation="vertical"
-        slidesPerPage={2}
-      >
-        <Carousel.Viewport>
-          <Carousel.Slide data-testid="slide-0" />
-          <Carousel.Slide data-testid="slide-1" />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("slide-0").style.scrollMarginBlockEnd).toBe(
-      "180px",
-    );
-    expect(screen.getByTestId("slide-0").style.scrollMarginInlineEnd).toBe("");
-  });
-
-  it("should correctly measure the offset-shifted, overlapping last page (uneven total)", () => {
-    // total=5, perPage=2: offsets 0, 2, maxOffset=3 → windows [0,1] [2,3] [3,4].
-    // The last page's leading slide is 3, sharing slide-3 with the middle
-    // page — its scroll-margin must still reach slide-4, not slide-1 or a
-    // stale value from the earlier page.
-    mockRects({
-      "slide-0": { left: 0, width: 200 },
-      "slide-1": { left: 200, width: 200 },
-      "slide-2": { left: 400, width: 200 },
-      "slide-3": { left: 600, width: 200 },
-      "slide-4": { left: 800, width: 200 },
-    });
-
-    render(
-      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
-        <Carousel.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.Slide data-testid="slide-4" />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("slide-3").style.scrollMarginInlineEnd).toBe(
-      "200px",
-    );
-  });
-
-  it("should recompute the scroll-margin when the viewport resizes", () => {
-    mockRects({
-      "slide-0": { left: 0, width: 240 },
-      "slide-1": { left: 240, width: 240 },
-    });
-
-    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.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("slide-0").style.scrollMarginInlineEnd).toBe(
-      "240px",
-    );
-
-    // Simulate a narrower viewport shrinking both slides proportionally.
-    mockRects({
-      "slide-0": { left: 0, width: 120 },
-      "slide-1": { left: 120, width: 120 },
-    });
-
-    act(() => {
-      // fireAll(), not `.latest` — the scroll-progress signal now also
-      // observes the Viewport, so "latest" no longer reliably refers to
-      // this effect's own observer.
-      MockResizeObserver.fireAll();
-    });
-
-    expect(screen.getByTestId("slide-0").style.scrollMarginInlineEnd).toBe(
-      "120px",
-    );
-  });
-});