@primitiv-ui/react 0.1.37 → 0.1.39

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

@@ -1,504 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-
-import { Carousel } from "../index.ts";
-
-// Click-and-drag scrolling: pointerdown + pointermove sets scrollLeft/
-// scrollTop directly from the pointer delta, amplified by a sensitivity
-// multiplier (no momentum — the multiplier only scales the tracked delta,
-// there's still no motion after release), release lets the existing CSS
-// scroll-snap-type settle to the nearest slide (no new code needed for that
-// half — the scrollsnapchange sync already covers it). A small movement
-// threshold distinguishes a drag from a click so a link/button inside a
-// slide still works. Opt-in via `allowMouseDrag` (default `false`) — an
-// unconditionally-on drag could conflict with a consumer's own
-// drag-sensitive slide content.
-describe("Carousel mouse-drag styling hook (data-mouse-drag)", () => {
-  it("should not publish data-mouse-drag when allowMouseDrag is omitted (default false)", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("viewport")).not.toHaveAttribute(
-      "data-mouse-drag",
-    );
-  });
-
-  it("should publish data-mouse-drag when allowMouseDrag is true, as a persistent hook distinct from the transient data-dragging", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    expect(screen.getByTestId("viewport")).toHaveAttribute(
-      "data-mouse-drag",
-      "",
-    );
-  });
-});
-
-describe("Carousel mouse-drag scrolling (opt-in disabled)", () => {
-  it("should not move scrollLeft or set the dragging hook when allowMouseDrag is omitted (default false)", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(100);
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should not move scrollLeft or set the dragging hook when allowMouseDrag is explicitly false", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag={false}>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(100);
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-});
-
-describe("Carousel mouse-drag scrolling (allowMouseDrag enabled)", () => {
-  it("should not move scrollLeft for a pointer movement under the threshold", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 202,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(100);
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should start tracking at a 3px movement (the lowered click-vs-drag threshold)", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      // Exactly 3px — the threshold is now 3, so this crosses it (2px, in
-      // the test above, still doesn't).
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 203,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport).toHaveAttribute("data-dragging", "");
-  });
-
-  it("should scroll faster than the raw pointer delta, amplified by the drag sensitivity multiplier", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      // Dragging the pointer 40px to the right reveals content to the
-      // left — scrollLeft decreases by an amplified amount (2× the raw
-      // 40px delta), not the raw delta itself, so a full-slide transition
-      // doesn't require dragging the slide's full on-screen width.
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(20);
-    expect(viewport).toHaveAttribute("data-dragging", "");
-  });
-
-  it("should set scrollTop instead of scrollLeft when the carousel is vertical, also amplified", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" orientation="vertical" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollTop", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 0,
-        clientY: 100,
-      });
-      // 30px raw delta × 2 sensitivity = 60px of scroll.
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 0,
-        clientY: 130,
-      });
-    });
-
-    expect(viewport.scrollTop).toBe(40);
-  });
-
-  it("should stop tracking and clear the dragging hook on pointerup", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
-      // A move after release must not keep tracking.
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 300,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(20);
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should stop tracking and clear the dragging hook on pointercancel", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-      fireEvent.pointerCancel(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-      });
-    });
-
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should no-op a pointerup with no preceding pointerdown-tracked drag", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-
-    expect(() => {
-      act(() => {
-        fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
-      });
-    }).not.toThrow();
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should ignore non-mouse pointer types (native touch scroll already handles them)", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "touch",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "touch",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-    });
-
-    expect(viewport.scrollLeft).toBe(100);
-    expect(viewport).not.toHaveAttribute("data-dragging");
-  });
-
-  it("should suppress the click that follows a real drag, so a link under the pointer doesn't fire", () => {
-    const onClick = vi.fn();
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide>
-            <button type="button" onClick={onClick}>
-              Inner
-            </button>
-          </Carousel.Slide>
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    Object.defineProperty(viewport, "scrollLeft", {
-      value: 100,
-      writable: true,
-    });
-    const button = screen.getByRole("button", { name: "Inner" });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerMove(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 240,
-        clientY: 0,
-      });
-      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
-      // Browsers still synthesize a click at the release point after a
-      // drag unless it's suppressed.
-      fireEvent.click(button);
-    });
-
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it("should not suppress a plain click that never crossed the drag threshold", async () => {
-    const onClick = vi.fn();
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide>
-            <button type="button" onClick={onClick}>
-              Inner
-            </button>
-          </Carousel.Slide>
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-    const viewport = screen.getByTestId("viewport");
-    const button = screen.getByRole("button", { name: "Inner" });
-
-    act(() => {
-      fireEvent.pointerDown(viewport, {
-        pointerType: "mouse",
-        pointerId: 1,
-        clientX: 200,
-        clientY: 0,
-      });
-      fireEvent.pointerUp(viewport, { pointerType: "mouse", pointerId: 1 });
-      fireEvent.click(button);
-    });
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("Carousel native image-drag suppression (onDragStart)", () => {
-  it("should prevent the browser's own image-drag ghost when allowMouseDrag is enabled", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" allowMouseDrag>
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide>
-            <img src="photo.jpg" alt="Slide photo" />
-          </Carousel.Slide>
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    // Real <img>/<a> elements are natively draggable, and a dragstart on one
-    // bubbles up to the viewport, where our own handler lives — the browser's
-    // HTML5 drag (the semi-transparent ghost that follows the cursor) must
-    // never compete with the custom pointer-based drag-to-scroll. fireEvent
-    // returns dispatchEvent's result: false once preventDefault is called.
-    const dispatchResult = fireEvent.dragStart(
-      screen.getByRole("img", { name: "Slide photo" }),
-    );
-
-    expect(dispatchResult).toBe(false);
-  });
-
-  it("should leave native image drag alone when allowMouseDrag is omitted (default false)", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products">
-        <Carousel.Viewport data-testid="viewport">
-          <Carousel.Slide>
-            <img src="photo.jpg" alt="Slide photo" />
-          </Carousel.Slide>
-        </Carousel.Viewport>
-      </Carousel.Root>,
-    );
-
-    const dispatchResult = fireEvent.dragStart(
-      screen.getByRole("img", { name: "Slide photo" }),
-    );
-
-    expect(dispatchResult).toBe(true);
-  });
-});

package/src/Carousel/__tests__/Carousel.multi-slide-bounds.test.tsx

@@ -1,91 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Carousel } from "../index.ts";
-
-// A carousel's slide count and layout counts come from the consumer, so a
-// bad slidesPerPage / slidesPerMove (0, negative, NaN, fractional) must
-// degrade gracefully to a sane integer ≥ 1 rather than dividing by zero
-// (Infinity pages → a thrown RangeError from the indicator map) or going
-// silently inert.
-describe("Carousel multi-slide input guards", () => {
-  it("should treat slidesPerPage < 1 as 1 rather than dividing by zero", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" slidesPerPage={0}>
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.Indicators label="Choose page" />
-      </Carousel.Root>,
-    );
-
-    // perPage coerced to 1 → one page per slide → 4 indicators.
-    expect(
-      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
-    ).toHaveLength(4);
-  });
-
-  it("should treat a non-finite slidesPerPage as 1", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" slidesPerPage={NaN}>
-        <Carousel.Viewport>
-          <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 round a fractional slidesPerPage down to an integer", () => {
-    render(
-      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2.5}>
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.Indicators label="Choose page" />
-      </Carousel.Root>,
-    );
-
-    // floor(2.5) = 2 → ceil(5 / 2) = 3 pages (an unfloored 2.5 would give
-    // ceil(5 / 2.5) = 2, so this pins the integer coercion).
-    expect(
-      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
-    ).toHaveLength(3);
-  });
-
-  it("should treat a numeric slidesPerMove < 1 as 1", () => {
-    render(
-      <Carousel.Root
-        ariaLabel="Featured products"
-        slidesPerPage={2}
-        slidesPerMove={0}
-      >
-        <Carousel.Viewport>
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-          <Carousel.Slide />
-        </Carousel.Viewport>
-        <Carousel.Indicators label="Choose page" />
-      </Carousel.Root>,
-    );
-
-    // move coerced to 1 → windows [0,1] [1,2] [2,3] → 3 pages (not the
-    // Infinity a move of 0 would divide to).
-    expect(
-      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
-    ).toHaveLength(3);
-  });
-});