@revenuecat/purchases-ui-js 4.8.8 → 4.8.9

package/dist/components/carousel/Carousel.svelte

@@ -22,7 +22,12 @@
   } from "../../utils/base-utils";
   import { getActiveStateProps } from "../../utils/style-utils";
   import { onMount } from "svelte";
-  import { clamp, getTranslation, mapPageAlignment } from "./carousel-utils";
+  import {
+    clamp,
+    getSwipeTargetPage,
+    getTranslation,
+    mapPageAlignment,
+  } from "./carousel-utils";
   import CarouselPage from "./CarouselPage.svelte";
   import PageControl from "./PageControl.svelte";
 
@@ -220,19 +225,35 @@
 
   let startTranslation = $state(0);
 
+  let lastClientX = 0;
+
   function onpointerdown(event: PointerEvent) {
     const target = event.currentTarget as HTMLElement;
     target.setPointerCapture(event.pointerId);
     startTranslation = getTranslation(slider);
     gestureStartPage = currentPage;
+    lastClientX = event.clientX;
   }
 
   function onpointerup(event: PointerEvent) {
     const target = event.currentTarget as HTMLElement;
-    target.releasePointerCapture(event.pointerId);
+    if (target.hasPointerCapture(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId);
+    }
 
     const translation = getTranslation(slider);
-    const page = getPageFromTranslation(translation);
+
+    // Advance at most one page from where the gesture started, based on how
+    // far the finger travelled relative to a page's width (see
+    // getSwipeTargetPage).
+    const page = getSwipeTargetPage({
+      startPage: gestureStartPage ?? getPageFromTranslation(translation),
+      dragDistance: translation - startTranslation,
+      pageWidth,
+      pageCount: pages.length,
+      loop: carouselPagingLoop,
+    });
+
     const destinationPage = normalizePageIndex(page);
 
     if (gestureStartPage !== null && gestureStartPage !== destinationPage) {
@@ -249,6 +270,7 @@
     }
 
     gestureStartPage = null;
+    currentPage = destinationPage;
     startTransition(false, 500);
     moveTo(page);
   }
@@ -259,11 +281,17 @@
       return;
     }
 
+    // Track movement from clientX instead of event.movementX: movementX is 0
+    // for touch-derived pointer events in Safari and device-pixel scaled in
+    // some Chrome configurations.
+    const deltaX = event.clientX - lastClientX;
+    lastClientX = event.clientX;
+
     const [min, max] = carouselPagingLoop
       ? [startTranslation - carouselWidth, startTranslation + carouselWidth]
       : [-(pages.length - 1) * pageWidth, 0];
     const translation = getTranslation(slider);
-    const newTranslation = clamp(translation + event.movementX, min, max);
+    const newTranslation = clamp(translation + deltaX, min, max);
 
     const page = getPageFromTranslation(newTranslation);
     currentPage = (page + pages.length) % pages.length;

package/dist/components/carousel/carousel-utils.d.ts

@@ -1,4 +1,35 @@
 import type { VerticalAlignment } from "../../types/alignment";
 export declare function mapPageAlignment(alignment: VerticalAlignment): string;
 export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Advance one page when the drag passed this fraction of a page's width,
+ * matching the iOS SDK carousel. A shorter drag snaps back to the page the
+ * gesture started on.
+ */
+export declare const PAGE_ADVANCE_THRESHOLD = 0.2;
+/**
+ * Decides which page a swipe settles on when the pointer is released.
+ *
+ * Distance-based (not velocity-based), mirroring the iOS SDK's `handleDragEnd`:
+ * a drag past `PAGE_ADVANCE_THRESHOLD` of a page's width advances exactly one
+ * page in the swipe direction regardless of speed; a shorter drag stays put.
+ * Non-loop carousels clamp at their first and last page; loop carousels may
+ * return an index just outside `[0, pageCount)` so the caller can animate into
+ * a clone before normalizing.
+ *
+ * @param startPage    Page the gesture started on.
+ * @param dragDistance Signed change in slider translation (negative = finger
+ *                     moved left / next page).
+ * @param pageWidth    Width of a single page in px.
+ * @param pageCount    Total number of real pages.
+ * @param loop         Whether the carousel loops.
+ */
+export declare function getSwipeTargetPage({ startPage, dragDistance, pageWidth, pageCount, loop, advanceThreshold, }: {
+    startPage: number;
+    dragDistance: number;
+    pageWidth: number;
+    pageCount: number;
+    loop: boolean;
+    advanceThreshold?: number;
+}): number;
 export declare function getTranslation(element: HTMLElement | null): number;

package/dist/components/carousel/carousel-utils.js

@@ -11,6 +11,42 @@ export function mapPageAlignment(alignment) {
 export function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
 }
+/**
+ * Advance one page when the drag passed this fraction of a page's width,
+ * matching the iOS SDK carousel. A shorter drag snaps back to the page the
+ * gesture started on.
+ */
+export const PAGE_ADVANCE_THRESHOLD = 0.2;
+/**
+ * Decides which page a swipe settles on when the pointer is released.
+ *
+ * Distance-based (not velocity-based), mirroring the iOS SDK's `handleDragEnd`:
+ * a drag past `PAGE_ADVANCE_THRESHOLD` of a page's width advances exactly one
+ * page in the swipe direction regardless of speed; a shorter drag stays put.
+ * Non-loop carousels clamp at their first and last page; loop carousels may
+ * return an index just outside `[0, pageCount)` so the caller can animate into
+ * a clone before normalizing.
+ *
+ * @param startPage    Page the gesture started on.
+ * @param dragDistance Signed change in slider translation (negative = finger
+ *                     moved left / next page).
+ * @param pageWidth    Width of a single page in px.
+ * @param pageCount    Total number of real pages.
+ * @param loop         Whether the carousel loops.
+ */
+export function getSwipeTargetPage({ startPage, dragDistance, pageWidth, pageCount, loop, advanceThreshold = PAGE_ADVANCE_THRESHOLD, }) {
+    const threshold = pageWidth * advanceThreshold;
+    let page = startPage;
+    if (dragDistance < -threshold) {
+        // Finger moved left, content shifts left: next page.
+        page += 1;
+    }
+    else if (dragDistance > threshold) {
+        // Finger moved right: previous page.
+        page -= 1;
+    }
+    return loop ? page : clamp(page, 0, pageCount - 1);
+}
 export function getTranslation(element) {
     if (element === null) {
         return 0;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.8.8",
+  "version": "4.8.9",
   "author": {
     "name": "RevenueCat, Inc."
   },