@revenuecat/purchases-ui-js 4.14.0 → 4.14.2

package/dist/components/carousel/Carousel.svelte

@@ -224,7 +224,12 @@
 
   let startTranslation = $state(0);
 
+  // Releasing after holding still this long is not a flick, however fast the drag was.
+  const FLICK_MAX_PAUSE_MS = 100;
+
   let lastClientX = 0;
+  let lastMoveTimeStamp = 0;
+  let velocityPxPerMs: number | null = null;
 
   function onpointerdown(event: PointerEvent) {
     const target = event.currentTarget as HTMLElement;
@@ -232,9 +237,21 @@
     startTranslation = getTranslation(slider);
     gestureStartPage = currentPage;
     lastClientX = event.clientX;
+    lastMoveTimeStamp = event.timeStamp;
+    velocityPxPerMs = null;
   }
 
   function onpointerup(event: PointerEvent) {
+    const stalled = event.timeStamp - lastMoveTimeStamp > FLICK_MAX_PAUSE_MS;
+    settleGesture(event, stalled ? 0 : (velocityPxPerMs ?? 0));
+  }
+
+  // Fires when the browser takes over the touch (e.g. vertical scroll).
+  function onpointercancel(event: PointerEvent) {
+    settleGesture(event, 0);
+  }
+
+  function settleGesture(event: PointerEvent, releaseVelocityPxPerMs: number) {
     const target = event.currentTarget as HTMLElement;
     if (target.hasPointerCapture(event.pointerId)) {
       target.releasePointerCapture(event.pointerId);
@@ -242,12 +259,10 @@
 
     const translation = getTranslation(slider);
 
-    // 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,
+      velocityPxPerMs: releaseVelocityPxPerMs,
       pageWidth,
       pageCount: pages.length,
       loop: carouselPagingLoop,
@@ -284,7 +299,17 @@
     // for touch-derived pointer events in Safari and device-pixel scaled in
     // some Chrome configurations.
     const deltaX = event.clientX - lastClientX;
+    // At least 1ms: synthetic input and coarse timestamps can report 0ms.
+    const deltaT = Math.max(1, event.timeStamp - lastMoveTimeStamp);
     lastClientX = event.clientX;
+    lastMoveTimeStamp = event.timeStamp;
+    // Moving average, so one jittery pointermove doesn't decide the release
+    // speed; the first sample seeds it so short flicks aren't underestimated.
+    const sampleVelocity = deltaX / deltaT;
+    velocityPxPerMs =
+      velocityPxPerMs === null
+        ? sampleVelocity
+        : 0.6 * velocityPxPerMs + 0.4 * sampleVelocity;
 
     const [min, max] = carouselPagingLoop
       ? [startTranslation - carouselWidth, startTranslation + carouselWidth]
@@ -330,6 +355,7 @@
       {ontransitionend}
       {onpointerdown}
       {onpointerup}
+      {onpointercancel}
       {onpointermove}
       class="slider"
       style={sliderStyle}

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

@@ -7,35 +7,39 @@ export declare function clamp(value: number, min: number, max: number): number;
  * `Array.prototype.at` so Chrome < 92 does not throw while mounting.
  */
 export declare function getDefaultPageIndex<T>(pages: readonly T[], initialPageIndex: number): number;
+/** Release speed (0.4 px/ms = 400 px/s) at or above which a swipe counts as a flick. */
+export declare const FLICK_VELOCITY_PX_PER_MS = 0.4;
 /**
- * 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.
+ * Decides which page a swipe settles on when the pointer is released. Matches
+ * the native (iOS and Android) SDK carousels:
+ *
+ * - A flick (release speed >= `FLICK_VELOCITY_PX_PER_MS`) moves in the
+ *   direction the pointer was travelling when released. From a partial drag it
+ *   lands on the next page boundary that way, so dragging forward then flicking
+ *   back returns to the start page.
+ * - A slower release settles on whichever page is nearest, i.e. the drag must
+ *   pass `SLOW_DRAG_THRESHOLD` of a page's width to change page.
+ * - The result is never more than one page from `startPage`.
  *
- * 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.
+ * @param startPage        Page the gesture started on.
+ * @param dragDistance     Signed change in slider translation in px (negative =
+ *                         pointer moved left / next page).
+ * @param velocityPxPerMs  Signed pointer velocity at release, same sign
+ *                         convention as `dragDistance`.
+ * @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, }: {
+export declare function getSwipeTargetPage({ startPage, dragDistance, velocityPxPerMs, pageWidth, pageCount, loop, }: {
     startPage: number;
     dragDistance: number;
+    velocityPxPerMs: 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

@@ -19,40 +19,54 @@ export function clamp(value, min, max) {
 export function getDefaultPageIndex(pages, initialPageIndex) {
     return pages[initialPageIndex] !== undefined ? initialPageIndex : 0;
 }
+/** Fraction of a page's width a slow drag must pass to change page. */
+const SLOW_DRAG_THRESHOLD = 0.5;
+/** Release speed (0.4 px/ms = 400 px/s) at or above which a swipe counts as a flick. */
+export const FLICK_VELOCITY_PX_PER_MS = 0.4;
 /**
- * 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.
+ * Decides which page a swipe settles on when the pointer is released. Matches
+ * the native (iOS and Android) SDK carousels:
+ *
+ * - A flick (release speed >= `FLICK_VELOCITY_PX_PER_MS`) moves in the
+ *   direction the pointer was travelling when released. From a partial drag it
+ *   lands on the next page boundary that way, so dragging forward then flicking
+ *   back returns to the start page.
+ * - A slower release settles on whichever page is nearest, i.e. the drag must
+ *   pass `SLOW_DRAG_THRESHOLD` of a page's width to change page.
+ * - The result is never more than one page from `startPage`.
  *
- * 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.
+ * @param startPage        Page the gesture started on.
+ * @param dragDistance     Signed change in slider translation in px (negative =
+ *                         pointer moved left / next page).
+ * @param velocityPxPerMs  Signed pointer velocity at release, same sign
+ *                         convention as `dragDistance`.
+ * @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;
+export function getSwipeTargetPage({ startPage, dragDistance, velocityPxPerMs, pageWidth, pageCount, loop, }) {
+    // Pages travelled from startPage; positive = towards the next page.
+    const offset = -dragDistance / pageWidth;
+    // A flick lands on the next whole page past the current offset in its
+    // direction; from a page-aligned start that is the adjacent page.
+    let pageDelta;
+    if (velocityPxPerMs <= -FLICK_VELOCITY_PX_PER_MS) {
+        pageDelta = Math.floor(offset) + 1;
+    }
+    else if (velocityPxPerMs >= FLICK_VELOCITY_PX_PER_MS) {
+        pageDelta = Math.ceil(offset) - 1;
+    }
+    else if (Math.abs(offset) > SLOW_DRAG_THRESHOLD) {
+        pageDelta = Math.sign(offset);
     }
-    else if (dragDistance > threshold) {
-        // Finger moved right: previous page.
-        page -= 1;
+    else {
+        pageDelta = 0;
     }
+    const page = startPage + clamp(pageDelta, -1, 1);
     return loop ? page : clamp(page, 0, pageCount - 1);
 }
 export function getTranslation(element) {

package/dist/components/paywall/Paywall.svelte

@@ -478,6 +478,9 @@
   let headerHeight = $state(0);
   let footerHeight = $state(0);
 
+  // A horizontal root's direction is row, so the spacer would incorrectly sit beside the content
+  const spacerFitsRoot = stack.dimension.type !== "horizontal";
+
   const contentColumnStyle = $derived(
     maxContentWidth
       ? `max-width: ${maxContentWidth}; margin-inline: auto;`
@@ -501,6 +504,12 @@
     <div class="paywall-content" style={contentColumnStyle}>
       <Stack
         {...stack}
+        padding={sticky_footer && !spacerFitsRoot
+          ? {
+              ...stack.padding,
+              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
+            }
+          : stack.padding}
         class="paywall-content-scroll"
         style={mapPaywallContentStackStyle(
           stack.size.height,
@@ -508,9 +517,9 @@
           headerHeight,
         )}
       >
-        {#if sticky_footer}
-          <!-- Adds a  real flex item rather than bottom padding to clear
-            a footer because iOS Safari ignores the padding if the content 
+        {#if sticky_footer && spacerFitsRoot}
+          <!-- Adds a real flex item rather than bottom padding to clear
+            a footer because iOS Safari ignores the padding if the content
             still fits on screen leaving content stuck behind the footer. -->
           <div
             class="footer-scroll-spacer"

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

@@ -64,7 +64,8 @@ export function mapStackSize(size, parentDimension) {
 }
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
-        return {};
+        // The default direction is row, so we need to set it to column to keep the flow vertical.
+        return { "flex-direction": "column" };
     }
     const direction = dimension.type === "vertical" ? "column" : "row";
     const justify = DISTRIBUTION_MAP[dimension.distribution] || "center";

package/package.json

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