@revenuecat/purchases-ui-js 4.8.7 → 4.8.9

package/dist/components/button/ButtonNode.svelte

@@ -10,7 +10,8 @@
     PackageSelectionSheetInteractionData,
   } from "../../types/paywall-component-interaction";
   import { getActiveStateProps } from "../../utils/style-utils";
-  import { readable } from "svelte/store";
+  import { fromStore, readable } from "svelte/store";
+  import { isWorkflowButtonInputGated } from "./button-input-gating";
 
   const props: ButtonProps = $props();
   type SheetAction = Extract<
@@ -35,13 +36,8 @@
   const validationContext = getInputValidationContext();
   const { getLocalizedString } = getLocalizationContext();
 
-  // Reactive store for input satisfaction (defaults to true if no validation context)
-  const inputSatisfied = validationContext?.isSatisfied ?? readable(true);
-
-  // Button is disabled when it's a workflow (continue) or complete_workflow action and inputs aren't satisfied
-  const isDisabled = $derived(
-    (action.type === "workflow" || action.type === "complete_workflow") &&
-      !$inputSatisfied,
+  const inputSatisfied = fromStore(
+    validationContext?.isSatisfied ?? readable(true),
   );
 
   const getButtonInteractionData = (): ButtonInteractionData => {
@@ -142,7 +138,15 @@
   });
 
   const onclick = () => {
-    if (isDisabled) return;
+    if (
+      isWorkflowButtonInputGated(
+        action.type,
+        props.require_valid_inputs,
+        inputSatisfied.current,
+      )
+    ) {
+      return;
+    }
     // For "workflow" actions, pass the component's own id so Workflow.svelte
     // can look it up in the step's triggers array (component ID → action ID).
     const actionId = action.type === "workflow" ? props.id : undefined;
@@ -177,14 +181,20 @@
         return true;
     }
   });
-
-  const style = $derived(
-    isDisabled
-      ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }
-      : undefined,
-  );
 </script>
 
 {#if visible}
-  <Stack {...props.stack} {onclick} {style} testId={`button-${action.type}`} />
+  {@const isDisabled = isWorkflowButtonInputGated(
+    action.type,
+    props.require_valid_inputs,
+    inputSatisfied.current,
+  )}
+  <Stack
+    {...props.stack}
+    {onclick}
+    style={isDisabled
+      ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }
+      : undefined}
+    testId={`button-${action.type}`}
+  />
 {/if}

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -2,6 +2,10 @@
   import { setLocalizationContext } from "../../stores/localization";
   import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import {
+    createInputValidationContext,
+    setInputValidationContext,
+  } from "../../stores/inputValidation";
   import { setVariablesContext } from "../../stores/variables";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
@@ -9,9 +13,23 @@
 
   interface Props extends ButtonProps {
     hideBackButtons?: boolean;
+    /** When set, seeds the shared input validation context (default: satisfied). */
+    inputsSatisfied?: boolean;
+    onSatisfactionChange?: (satisfied: boolean) => void;
   }
 
-  const { hideBackButtons = false, ...buttonProps }: Props = $props();
+  const {
+    hideBackButtons = false,
+    inputsSatisfied = true,
+    onSatisfactionChange,
+    ...buttonProps
+  }: Props = $props();
+
+  const validationContext = createInputValidationContext(inputsSatisfied);
+  setInputValidationContext(validationContext);
+  if (onSatisfactionChange) {
+    validationContext.isSatisfied.subscribe(onSatisfactionChange);
+  }
 
   setLocalizationContext(() => ({
     defaultLocale: "en_US",

package/dist/components/button/ButtonNodeTestWrapper.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { ButtonProps } from "../../types/components/button";
 interface Props extends ButtonProps {
     hideBackButtons?: boolean;
+    /** When set, seeds the shared input validation context (default: satisfied). */
+    inputsSatisfied?: boolean;
+    onSatisfactionChange?: (satisfied: boolean) => void;
 }
 declare const ButtonNodeTestWrapper: import("svelte").Component<Props, {}, "">;
 type ButtonNodeTestWrapper = ReturnType<typeof ButtonNodeTestWrapper>;

package/dist/components/button/button-input-gating.d.ts

@@ -0,0 +1,3 @@
+import type { Action } from "../../types/components/button";
+/** Whether a workflow / complete_workflow button should be disabled. */
+export declare function isWorkflowButtonInputGated(actionType: Action["type"], requireValidInputs: boolean | undefined, inputsSatisfied: boolean): boolean;

package/dist/components/button/button-input-gating.js

@@ -0,0 +1,6 @@
+/** Whether a workflow / complete_workflow button should be disabled. */
+export function isWorkflowButtonInputGated(actionType, requireValidInputs, inputsSatisfied) {
+    return (requireValidInputs !== false &&
+        (actionType === "workflow" || actionType === "complete_workflow") &&
+        !inputsSatisfied);
+}

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/dist/components/input-text/InputText.svelte

@@ -73,6 +73,12 @@
 
   function commitValue(input: HTMLInputElement) {
     const value = input.value.trim();
+    if (keyboard_type === "password") {
+      // Sensitive value: never emit through the persisted onInputChanged path.
+      // Hosts keep it in memory only (no storage, analytics, or attributes).
+      onSensitiveInputChanged?.(field_id, value);
+      return;
+    }
     if (reserved_attribute) {
       if (!onReservedAttributeChanged) {
         console.error("onReservedAttributeChanged is not set");
@@ -118,6 +124,7 @@
   const {
     uiConfig,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     selectedPackageId,
   } = getPaywallContext();
@@ -196,6 +203,8 @@
         return "number";
       case "email":
         return "email";
+      case "password":
+        return "password";
       case "tel":
         return "tel";
       case "text":
@@ -205,6 +214,12 @@
     }
   });
 
+  // `password` is not a valid `inputmode`; masking is handled by `type` above, so
+  // fall back to the default text keyboard for it.
+  const inputMode = $derived.by((): HTMLInputAttributes["inputmode"] =>
+    keyboard_type === "password" ? "text" : keyboard_type,
+  );
+
   const isVisible = $derived(
     evaluateVisibilityConditions(
       {
@@ -232,7 +247,7 @@
       {type}
       {placeholder}
       {required}
-      inputmode={keyboard_type}
+      inputmode={inputMode}
       autocapitalize={capitalize}
       style={inputStyle}
       {oninput}

package/dist/components/input-text/InputTextTestWrapper.svelte

@@ -10,15 +10,28 @@
   import { setVariablesContext } from "../../stores/variables";
   import { readable, writable } from "svelte/store";
   import InputText from "./InputText.svelte";
-  import type { InputTextProps } from "../../types/components/input-text";
+  import type {
+    InputTextProps,
+    ReservedAttribute,
+  } from "../../types/components/input-text";
 
   interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
+    onReservedAttributeChanged?: (
+      reservedAttribute: ReservedAttribute,
+      value: string,
+    ) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
   }
 
-  const { onInputChanged, onSatisfactionChange, ...inputTextProps }: Props =
-    $props();
+  const {
+    onInputChanged,
+    onSensitiveInputChanged,
+    onReservedAttributeChanged,
+    onSatisfactionChange,
+    ...inputTextProps
+  }: Props = $props();
 
   const validationContext = createInputValidationContext();
   setInputValidationContext(validationContext);
@@ -43,6 +56,8 @@
     emitComponentInteraction: () => {},
     onButtonAction: () => {},
     onInputChanged,
+    onSensitiveInputChanged,
+    onReservedAttributeChanged,
     uiConfig: { app: { fonts: {} } } as never,
     hideBackButtons: false,
   });

package/dist/components/input-text/InputTextTestWrapper.svelte.d.ts

@@ -1,6 +1,8 @@
-import type { InputTextProps } from "../../types/components/input-text";
+import type { InputTextProps, ReservedAttribute } from "../../types/components/input-text";
 interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
 }
 declare const InputTextTestWrapper: import("svelte").Component<Props, {}, "">;

package/dist/components/paywall/Paywall.svelte

@@ -93,6 +93,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -141,6 +146,7 @@
     uiConfig,
     walletButtonRender,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     hideBackButtons = false,
     maxContentWidth,
@@ -309,6 +315,7 @@
     onNavigateToUrl: onNavigateToUrlClicked,
     onButtonAction,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     walletButtonRender,
     uiConfig,

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -44,6 +44,11 @@ interface Props {
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;

package/dist/components/workflows/Screen.svelte

@@ -32,6 +32,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -61,6 +66,7 @@
     infoPerPackage,
     initialInputSelections = {},
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     onCompleteWorkflowNavigate,
     onNavigateToUrlClicked,
@@ -100,6 +106,7 @@
       {onComponentInteraction}
       {onPurchaseClicked}
       {onInputChanged}
+      {onSensitiveInputChanged}
       {onReservedAttributeChanged}
       {walletButtonRender}
       {safeAreaFallbackColor}

package/dist/components/workflows/Screen.svelte.d.ts

@@ -23,6 +23,11 @@ interface Props {
     infoPerPackage?: Record<string, PackageInfo>;
     initialInputSelections?: InitialInputSelections;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onNavigateToUrlClicked?: (url: string) => void;

package/dist/components/workflows/Workflow.svelte

@@ -49,6 +49,11 @@
       value: string,
       actionId?: string,
     ) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (
       reservedAttribute: ReservedAttribute,
       value: string,
@@ -84,6 +89,7 @@
     onPurchaseClicked,
     onActionTriggered,
     onInputChanged,
+    onSensitiveInputChanged,
     onReservedAttributeChanged,
     onCompleteWorkflowNavigate,
     onNavigateToUrlClicked,
@@ -303,6 +309,7 @@
     {onPurchaseClicked}
     onActionTriggered={handleActionTriggered}
     {onInputChanged}
+    {onSensitiveInputChanged}
     {onReservedAttributeChanged}
     {onCompleteWorkflowNavigate}
     {onNavigateToUrlClicked}

package/dist/components/workflows/Workflow.svelte.d.ts

@@ -21,6 +21,11 @@ interface Props {
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onNavigateToUrlClicked?: (url: string) => void;

package/dist/stores/inputValidation.d.ts

@@ -8,7 +8,7 @@ interface InputValidationContext {
     isSatisfied: Readable<boolean>;
     updateSatisfaction: (satisfied: boolean) => void;
 }
-export declare function createInputValidationContext(): InputValidationContext;
+export declare function createInputValidationContext(initiallySatisfied?: boolean): InputValidationContext;
 export declare function setInputValidationContext(context: InputValidationContext): void;
 export declare function getInputValidationContext(): InputValidationContext | undefined;
 export declare function setInitialInputSelectionsContext(selections: InitialInputSelections): void;

package/dist/stores/inputValidation.js

@@ -2,8 +2,8 @@ import { getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 const key = Symbol("inputValidation");
 const initialSelectionsKey = Symbol("initialInputSelections");
-export function createInputValidationContext() {
-    const isSatisfied = writable(true);
+export function createInputValidationContext(initiallySatisfied = true) {
+    const isSatisfied = writable(initiallySatisfied);
     const updateSatisfaction = (satisfied) => {
         isSatisfied.set(satisfied);
     };

package/dist/stores/paywall.d.ts

@@ -22,6 +22,12 @@ type PaywallContext = Readonly<{
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    /**
+     * Called for sensitive inputs (keyboard_type: "password") instead of
+     * onInputChanged, so hosts can keep the value in memory only and never
+     * persist, log, or forward it.
+     */
+    onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;

package/dist/types/components/button.d.ts

@@ -63,5 +63,11 @@ export interface ButtonProps extends BaseComponent {
     stack: StackProps;
     transition?: null;
     overrides?: Overrides<ButtonProps>;
+    /**
+     * When false, workflow / complete_workflow buttons stay enabled even if
+     * required inputs on the screen are empty. Hosts (e.g. rc-workflows) may set
+     * this at runtime for auth cross-links; it is not persisted in paywall JSON.
+     */
+    require_valid_inputs?: boolean;
 }
 export {};

package/dist/types/components/input-text.d.ts

@@ -4,7 +4,7 @@ import type { BaseComponent } from "../base";
 import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 export type InputTextCapitalizeType = "none" | "sentences" | "words" | "characters";
-export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "tel" | "text" | "url";
+export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "password" | "tel" | "text" | "url";
 export type ReservedAttribute = "$email" | "$displayName" | "$phoneNumber";
 export interface InputTextProps extends BaseComponent {
     type: "input_text";

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.7",
+  "version": "4.8.9",
   "author": {
     "name": "RevenueCat, Inc."
   },