@primitiv-ui/react 0.1.27 → 0.1.29

package/src/Carousel/__tests__/Carousel.slide-snap.test.tsx

@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/react";
+
+import { Carousel } from "../index.ts";
+
+// scroll-snap-align must only land on a page's *leading* slide when
+// slidesPerPage > 1 — an interior slide is not a valid resting position,
+// since the browser's mandatory snap would stop there and leave the
+// viewport showing a straddled mix of two pages while currentPage/the
+// indicators still claim a single clean page is active (the mouse-wheel /
+// drag desync). data-snap-align is the CSS hook the registry stylesheet
+// scopes scroll-snap-align to — its *value* mirrors the resolved root
+// `snapAlign` ("center" default, "start"/"end"), so a user's native scroll
+// snap lands wherever the programmatic scroll targets, instead of always
+// snapping to "center" regardless of `snapAlign`.
+describe("Carousel slide snap-align hook", () => {
+  it('should mark every slide data-snap-align="center" when slidesPerPage is 1 (default)', () => {
+    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.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+  });
+
+  it("should only mark page-start slides when slidesPerPage > 1 (clean paging)", () => {
+    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>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-1")).not.toHaveAttribute(
+      "data-snap-align",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-3")).not.toHaveAttribute(
+      "data-snap-align",
+    );
+  });
+
+  it("should mark the end-aligned last page's leading slide, even off the move step (uneven last page)", () => {
+    // perPage 2, 5 slides: offsets 0, 2, 3 (end-aligned) — slide 4 is never
+    // a page start (it only ever appears as page 2's *trailing* slide).
+    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-0")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-1")).not.toHaveAttribute(
+      "data-snap-align",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-4")).not.toHaveAttribute(
+      "data-snap-align",
+    );
+  });
+
+  it('should mark page-start slides data-snap-align="start" when the root snapAlign is "start"', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" snapAlign="start">
+        <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(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-snap-align",
+      "start",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-snap-align",
+      "start",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-snap-align",
+      "start",
+    );
+  });
+
+  it('should let a slide\'s own snapAlign override the root default, including "start" and "end"', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" snapAlign="end" />
+          <Carousel.Slide data-testid="slide-2" snapAlign="start" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-snap-align",
+      "center",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-snap-align",
+      "end",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-snap-align",
+      "start",
+    );
+  });
+
+  it("should not publish a per-slide snapAlign override on a slide that isn't a valid snap-start position", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" snapAlign="end" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // slide-1 is an interior slide of page 0 (perPage 2) — no valid resting
+    // position, so its override must not leak into scroll-snap-align.
+    expect(screen.getByTestId("slide-1")).not.toHaveAttribute(
+      "data-snap-align",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.slides-per-move.test.tsx

@@ -1,8 +1,19 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { Carousel } from "../index.ts";
 
+function fireScrollSnapChange(viewport: HTMLElement, snapTarget: HTMLElement) {
+  const event = new Event("scrollsnapchange", { bubbles: false });
+  Object.defineProperty(event, "snapTargetInline", {
+    value: snapTarget,
+    writable: false,
+  });
+  act(() => {
+    viewport.dispatchEvent(event);
+  });
+}
+
 describe("Carousel numeric slidesPerMove", () => {
   it("should render `floor((total - slidesPerPage) / slidesPerMove) + 1` indicators", () => {
     render(
@@ -148,4 +159,171 @@ describe("Carousel numeric slidesPerMove", () => {
     );
   });
 
+  it("should end-align the last window so an inexact move leaves no slide unreachable", () => {
+    // 6 slides, perPage=3, move=2. A naive floor((6-3)/2)+1 = 2 pages
+    // ([0,1,2] [2,3,4]) orphans slide 5. End-aligning the last window
+    // adds a third page ([3,4,5]) so every slide is reachable.
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={3}
+        slidesPerMove={2}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
+    ).toHaveLength(3);
+  });
+
+  it("should snap the end-aligned last window to the track end", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={3}
+        slidesPerMove={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.Slide data-testid="slide-5" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    // page 0 [0,1,2] → page 1 [2,3,4] → page 2 end-aligned to [3,4,5].
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-5")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
+  });
+
+  it("should clamp slidesPerMove to slidesPerPage so a move can't skip past a page", () => {
+    // move=3 > perPage=2 would leave a gap (window [0,1] then [3,4],
+    // skipping slide 2). Clamp move to perPage so windows stay contiguous:
+    // 6 slides → [0,1] [2,3] [4,5] → 3 pages.
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={2}
+        slidesPerMove={3}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
+    ).toHaveLength(3);
+  });
+
+  it("should advance by at most slidesPerPage when slidesPerMove exceeds it", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={2}
+        slidesPerMove={3}
+      >
+        <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.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    // Clamped move=2 → window [2,3], not the [3,…] a move of 3 would give.
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
+
+  it("should map a user swipe to the nearest window in numeric slidesPerMove mode", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={3}
+        slidesPerMove={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.Slide data-testid="slide-4" />
+          <Carousel.Slide data-testid="slide-5" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // The user swipes so slide 3 leads the viewport. With move=2 the nearest
+    // window start is the end-aligned last page [3,4,5], not floor(3/2)=1's
+    // [2,3,4].
+    fireScrollSnapChange(
+      screen.getByTestId("viewport"),
+      screen.getByTestId("slide-3"),
+    );
+
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-5")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
 });

package/src/Carousel/__tests__/Carousel.slides-per-page.test.tsx

@@ -1,8 +1,19 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { Carousel } from "../index.ts";
 
+function fireScrollSnapChange(viewport: HTMLElement, snapTarget: HTMLElement) {
+  const event = new Event("scrollsnapchange", { bubbles: false });
+  Object.defineProperty(event, "snapTargetInline", {
+    value: snapTarget,
+    writable: false,
+  });
+  act(() => {
+    viewport.dispatchEvent(event);
+  });
+}
+
 describe("Carousel slidesPerPage", () => {
   it("should mark every slide on the active page as active when slidesPerPage > 1", () => {
     render(
@@ -142,7 +153,12 @@ describe("Carousel slidesPerPage", () => {
     );
   });
 
-  it("should activate only the remaining slides on a partial last page", () => {
+  it("should end-align the last page so its window is full (not a partial page that can't start-snap)", () => {
+    // perPage 2, 5 slides, last page. A naive offset of 2×2 = 4 leaves a
+    // single-slide page [4] whose leading slide can't align to the viewport
+    // start (there's nothing after it), so scroll-snap lands on slide 3 and the
+    // active page desyncs. End-aligning the last page to offset 3 → window
+    // [3,4], which snaps cleanly to the track end.
     render(
       <Carousel.Root
         ariaLabel="Featured products"
@@ -159,25 +175,93 @@ describe("Carousel slidesPerPage", () => {
       </Carousel.Root>,
     );
 
-    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
       "data-state",
       "inactive",
     );
-    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
       "data-state",
-      "inactive",
+      "active",
     );
-    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+    expect(screen.getByTestId("slide-4")).toHaveAttribute(
       "data-state",
-      "inactive",
+      "active",
+    );
+  });
+
+  it("should reach the end-aligned last page in two clicks without desyncing (perPage 3, 7 slides)", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={3}
+      >
+        <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.Slide data-testid="slide-5" />
+          <Carousel.Slide data-testid="slide-6" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    // 3 pages: [0,1,2] [3,4,5] [4,5,6] (last end-aligned). Two clicks reach it.
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByTestId("slide-4")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-6")).toHaveAttribute(
+      "data-state",
+      "active",
     );
     expect(screen.getByTestId("slide-3")).toHaveAttribute(
       "data-state",
       "inactive",
     );
+    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
+  });
+
+  it("should map a swipe onto the end-aligned last page to the last page (not the page a floor would give)", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={3}>
+        <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.Slide data-testid="slide-4" />
+          <Carousel.Slide data-testid="slide-5" />
+          <Carousel.Slide data-testid="slide-6" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    // The last page's leading slide is 4 (offset end-aligned to 7 − 3 = 4).
+    // A floor(4 / 3) would map it to page 1; the nearest-offset inverse maps it
+    // to the last page.
+    fireScrollSnapChange(
+      screen.getByTestId("viewport"),
+      screen.getByTestId("slide-4"),
+    );
+
     expect(screen.getByTestId("slide-4")).toHaveAttribute(
       "data-state",
       "active",
     );
+    expect(screen.getByTestId("slide-6")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
   });
 });

package/src/Carousel/__tests__/Carousel.snap-type.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+
+import { Carousel } from "../index.ts";
+
+// scroll-snap-type strictness ("mandatory" forces a rest at a snap point;
+// "proximity" only nudges toward one) is a Root-level prop, published as
+// data-snap-type on the Viewport so the registry stylesheet can key off it —
+// mirrors Ark UI's snapType.
+describe("Carousel snapType", () => {
+  it('should default to data-snap-type="mandatory" on the viewport', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport data-testid="viewport" />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("viewport")).toHaveAttribute(
+      "data-snap-type",
+      "mandatory",
+    );
+  });
+
+  it('should reflect snapType="proximity" as data-snap-type on the viewport', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" snapType="proximity">
+        <Carousel.Viewport data-testid="viewport" />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("viewport")).toHaveAttribute(
+      "data-snap-type",
+      "proximity",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.transition-modes.test.tsx

@@ -18,6 +18,34 @@ function fireScrollSnapChange(
 }
 
 describe("Carousel transition modes", () => {
+  it('should publish data-transition="slide" on the root by default (the CSS styling hook)', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("region", { name: "Featured products" }),
+    ).toHaveAttribute("data-transition", "slide");
+  });
+
+  it('should publish data-transition="fade" when transition="fade" so CSS can crossfade off the hook', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" transition="fade">
+        <Carousel.Viewport>
+          <Carousel.Slide />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("region", { name: "Featured products" }),
+    ).toHaveAttribute("data-transition", "fade");
+  });
+
   it('should skip the programmatic scroll on page change when transition="none"', async () => {
     const user = userEvent.setup();
     render(
@@ -30,10 +58,7 @@ describe("Carousel transition modes", () => {
       </Carousel.Root>,
     );
 
-    const scrollIntoViewSpy = vi.spyOn(
-      screen.getByTestId("slide-1"),
-      "scrollIntoView",
-    );
+    const scrollToSpy = vi.spyOn(screen.getByTestId("viewport"), "scrollTo");
 
     await user.click(screen.getByRole("button", { name: "Next" }));
 
@@ -43,7 +68,7 @@ describe("Carousel transition modes", () => {
       "data-state",
       "active",
     );
-    expect(scrollIntoViewSpy).not.toHaveBeenCalled();
+    expect(scrollToSpy).not.toHaveBeenCalled();
   });
 
   it('should ignore scrollsnapchange events on the viewport when transition="none"', () => {

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

@@ -108,6 +108,26 @@ describe("Carousel translations", () => {
     ).toBeVisible();
   });
 
+  it("should override the ProgressText format via translations.progressText", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        translations={{
+          progressText: ({ page, totalPages }) =>
+            `Page ${page + 1} sur ${totalPages}`,
+        }}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.ProgressText />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByText("Page 1 sur 2")).toBeVisible();
+  });
+
   it("should fall back to defaults for any translation keys not specified", () => {
     render(
       <Carousel.Root
@@ -123,6 +143,7 @@ describe("Carousel translations", () => {
           <Carousel.Indicator index={0} />
         </Carousel.IndicatorGroup>
         <Carousel.PlayPauseTrigger />
+        <Carousel.ProgressText />
       </Carousel.Root>,
     );
 
@@ -135,6 +156,8 @@ describe("Carousel translations", () => {
     );
     // indicatorLabel default still applied
     expect(screen.getByRole("button", { name: "Slide 1" })).toBeVisible();
+    // progressText default still applied
+    expect(screen.getByText("1 of 2")).toBeVisible();
   });
 
   it("should apply translations.indicatorLabel to indicators auto-rendered by Carousel.Indicators", () => {