@revenuecat/purchases-ui-js 4.8.21 → 4.8.23

package/README.md

@@ -9,3 +9,9 @@ To build your library:
 ```bash
 npm run package
 ```
+
+## Releasing
+
+Bump `version` in `package.json` in a PR. Once it lands on `main`, the Azure pipeline publishes that version to npm, skipping the publish if the version is already on the registry.
+
+After publishing, the pipeline triggers the `dependency-update` action in [purchases-js](https://github.com/RevenueCat/purchases-js). That job compares the pinned `@revenuecat/purchases-ui-js` with the latest on npm and opens a bump PR there if it is behind. The call runs on every `main` build and is a no-op when nothing changed. It needs the `CIRCLE_TOKEN` secret in the pipeline variables.

package/dist/components/carousel/Carousel.svelte

@@ -24,6 +24,7 @@
   import { onMount } from "svelte";
   import {
     clamp,
+    getDefaultPageIndex,
     getSwipeTargetPage,
     getTranslation,
     mapPageAlignment,
@@ -132,10 +133,6 @@
   let pageWidth = $derived(carouselWidth - pageOffset);
   let gestureStartPage = $state<number | null>(null);
 
-  function getDefaultPageIndex() {
-    return pages.at(initial_page_index) !== undefined ? initial_page_index : 0;
-  }
-
   function normalizePageIndex(index: number) {
     if (pages.length === 0) {
       return 0;
@@ -199,7 +196,7 @@
   }
 
   onMount(() => {
-    const initialPage = getDefaultPageIndex();
+    const initialPage = getDefaultPageIndex(pages, initial_page_index);
     currentPage = initialPage;
 
     stopTransition();
@@ -265,7 +262,7 @@
         destinationIndex: destinationPage,
         originContextName: getPageContextName(gestureStartPage),
         destinationContextName: getPageContextName(destinationPage),
-        defaultIndex: getDefaultPageIndex(),
+        defaultIndex: getDefaultPageIndex(pages, initial_page_index),
       });
     }
 

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

@@ -1,6 +1,12 @@
 import type { VerticalAlignment } from "../../types/alignment";
 export declare function mapPageAlignment(alignment: VerticalAlignment): string;
 export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Resolves the carousel's starting page. Out-of-range indexes (including a
+ * missing `pages[i]` hole) fall back to 0. Uses index access rather than
+ * `Array.prototype.at` so Chrome < 92 does not throw while mounting.
+ */
+export declare function getDefaultPageIndex<T>(pages: readonly T[], initialPageIndex: 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

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

@@ -11,6 +11,14 @@ export function mapPageAlignment(alignment) {
 export function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
 }
+/**
+ * Resolves the carousel's starting page. Out-of-range indexes (including a
+ * missing `pages[i]` hole) fall back to 0. Uses index access rather than
+ * `Array.prototype.at` so Chrome < 92 does not throw while mounting.
+ */
+export function getDefaultPageIndex(pages, initialPageIndex) {
+    return pages[initialPageIndex] !== undefined ? initialPageIndex : 0;
+}
 /**
  * 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

package/dist/components/input-text/InputText.stories.svelte

@@ -0,0 +1,92 @@
+<script module lang="ts">
+  import InputText from "./InputText.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { paywallDecorator } from "../../stories/paywall-decorator";
+  import type { InputTextProps } from "../../types/components/input-text";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/InputText",
+    component: InputText,
+    decorators: [
+      componentDecorator(),
+      paywallDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            email_placeholder: "Enter your email",
+            zero_placeholder: "0",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "input_text",
+      id: "input-text-1",
+      name: "Text Input",
+      placeholder_lid: "email_placeholder",
+      keyboard_type: "email",
+      capitalize: "none",
+      field_id: "email",
+      required: false,
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+      font_size: 16,
+      horizontal_alignment: "leading",
+      color: {
+        light: { type: "hex", value: "#000000" },
+      },
+      placeholder_font_size: 16,
+      placeholder_horizontal_alignment: "leading",
+      placeholder_color: {
+        light: { type: "hex", value: "#A9A9A9" },
+      },
+      background_color: {
+        light: { type: "hex", value: "#F5F5F5" },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 8,
+          top_trailing: 8,
+          bottom_leading: 8,
+          bottom_trailing: 8,
+        },
+      },
+    } satisfies InputTextProps,
+  });
+</script>
+
+<Story name="Default" />
+
+<!-- `fit` width sizes the input to its displayed text (the placeholder until a
+     value is typed), matching the editor preview. -->
+<Story
+  name="Fit Width"
+  args={{
+    placeholder_lid: "zero_placeholder",
+    keyboard_type: "numeric",
+    field_id: "height_ft",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    font_size: 56,
+    font_weight_int: 700,
+    horizontal_alignment: "center",
+    placeholder_font_size: 56,
+    placeholder_font_weight_int: 700,
+    placeholder_horizontal_alignment: "center",
+    background_color: null,
+    shape: null,
+  }}
+/>

package/dist/components/input-text/InputText.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputText from "./InputText.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputText = InstanceType<typeof InputText>;
+export default InputText;

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

@@ -9,6 +9,7 @@
   import type {
     InputTextKeyboardType,
     InputTextProps,
+    InputTextValidationRule,
   } from "../../types/components/input-text";
   import { mapBackground } from "../../utils/background-utils";
   import {
@@ -25,14 +26,23 @@
   } from "../../utils/font-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
+  import { onDestroy } from "svelte";
   import type { FormEventHandler, HTMLInputAttributes } from "svelte/elements";
-  import { mapTextColor } from "../text/text-utils";
+  import {
+    getHtmlFromMarkdown,
+    mapTextColor,
+    markdownLinkUrlFromClick,
+  } from "../text/text-utils";
+  import { compilePattern } from "./pattern";
+  import { failingRuleFromValidity } from "./validity-rule";
 
   const props: InputTextProps = $props();
 
   let focused = $state(false);
   let error = $state(false);
   let valid = $state(!props.required);
+  let failedRule = $state<InputTextValidationRule | null>(null);
+  let currentValue = $state("");
 
   const buildConditionContext = useConditionContext({ state: true });
 
@@ -62,6 +72,9 @@
     placeholder_color,
     background_color,
     visible,
+    validation,
+    validation_error_lid,
+    validation_error_lids,
   } = $derived.by(() => {
     return {
       ...props,
@@ -91,8 +104,21 @@
     }
   }
 
+  function readValidity(input: HTMLInputElement): boolean {
+    if (compiledPattern?.mode === "custom") {
+      // Mirrors the native `pattern` semantics: empty values are left to
+      // `required`, everything else must match the whole value.
+      const mismatch =
+        input.value !== "" && !compiledPattern.regex.test(input.value);
+      input.setCustomValidity(mismatch ? "pattern" : "");
+    }
+    const { validity } = input;
+    failedRule = failingRuleFromValidity(validity);
+    return validity.valid;
+  }
+
   function handleValueChange(input: HTMLInputElement) {
-    error = !input.validity.valid;
+    error = !readValidity(input);
     if (error) {
       return;
     }
@@ -101,7 +127,8 @@
 
   const oninput: FormEventHandler<HTMLInputElement> = (event) => {
     const input = event.currentTarget;
-    valid = input.validity.valid;
+    currentValue = input.value;
+    valid = readValidity(input);
     // Keep the propagated value in lockstep with `valid` so Continue can
     // never unlock before the workflow has received the current value.
     if (valid) {
@@ -114,7 +141,7 @@
 
   const onblur: FormEventHandler<HTMLInputElement> = (event) => {
     focused = false;
-    valid = event.currentTarget.validity.valid;
+    valid = readValidity(event.currentTarget);
     handleValueChange(event.currentTarget);
   };
 
@@ -127,8 +154,26 @@
     onInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
+    emitComponentInteraction,
+    onNavigateToUrl,
   } = getPaywallContext();
 
+  // Links in the error copy go through the host like text component links do:
+  // some hosts block a bare `target="_blank"` anchor.
+  const onErrorClick = (event: MouseEvent) => {
+    const url = markdownLinkUrlFromClick(event);
+    if (!url) {
+      return;
+    }
+    emitComponentInteraction({
+      componentType: "text",
+      componentName: props.name,
+      componentValue: "navigate_to_url",
+      componentURL: url,
+    });
+    onNavigateToUrl?.(url);
+  };
+
   const verticalAlignItems = $derived(
     vertical_alignment === "top"
       ? "flex-start"
@@ -137,13 +182,34 @@
         : null,
   );
 
-  const wrapperStyle = $derived(
+  // `fill` and percentage heights resolve against the parent, so they must sit
+  // on the element that is the stack's flex item (the outer container); the
+  // bordered box then takes what is left above the error row. Fixed and fit
+  // heights stay on the bordered box so the error row never eats into them.
+  const heightOnContainer = $derived(
+    size.height.type === "fill" || size.height.type === "relative",
+  );
+
+  // The margin lives on the outer container so the error text sits inside the
+  // component's margin box, directly below the bordered input.
+  const containerStyle = $derived(
     css({
       display: "flex",
-      ...(verticalAlignItems ? { "align-items": verticalAlignItems } : {}),
+      "flex-direction": "column",
       width: mapSize(size.width),
-      height: mapSize(size.height),
+      ...(heightOnContainer ? { height: mapSize(size.height) } : {}),
       margin: mapSpacing(margin),
+    }),
+  );
+
+  const wrapperStyle = $derived(
+    css({
+      display: "flex",
+      ...(verticalAlignItems ? { "align-items": verticalAlignItems } : {}),
+      width: "100%",
+      ...(heightOnContainer
+        ? { flex: "1 1 auto", "min-height": "0" }
+        : { flex: "none", height: mapSize(size.height) }),
       ...mapBackground(colorMode, background_color, null),
       ...mapBorder(colorMode, border),
       "border-radius": mapBorderRadius(shape),
@@ -151,11 +217,14 @@
     }),
   );
 
+  function resolveFontFamily(fontName: string | null | undefined): string {
+    const family = uiConfig.app.fonts[fontName ?? ""]?.web?.family;
+    return isFontRCFMManaged(fontName ?? "")
+      ? getScopedFontFamily(family ?? "")
+      : "sans-serif";
+  }
+
   const inputStyle = $derived.by(() => {
-    const font = uiConfig.app.fonts[font_name ?? ""];
-    const fontFamily = font?.web?.family;
-    const placeholderFont = uiConfig.app.fonts[placeholder_font_name ?? ""];
-    const placeholderFontFamily = placeholderFont?.web?.family;
     const placeholderColor = mapTextColor(colorMode, placeholder_color);
 
     return css({
@@ -166,9 +235,7 @@
         TextAlignments[horizontal_alignment] || TextAlignments.leading,
       "font-weight": font_weight_int ?? FontWeights.regular,
       "font-size": `${font_size}px`,
-      "font-family": isFontRCFMManaged(font_name ?? "")
-        ? getScopedFontFamily(fontFamily ?? "")
-        : "sans-serif",
+      "font-family": resolveFontFamily(font_name),
 
       "--placeholder-color": placeholderColor.color,
       "--placeholder-background": placeholderColor.background,
@@ -181,11 +248,7 @@
       "--placeholder-font-weight":
         placeholder_font_weight_int ?? FontWeights.regular,
       "--placeholder-font-size": `${placeholder_font_size}px`,
-      "--placeholder-font-family": isFontRCFMManaged(
-        placeholder_font_name ?? "",
-      )
-        ? getScopedFontFamily(placeholderFontFamily ?? "")
-        : "sans-serif",
+      "--placeholder-font-family": resolveFontFamily(placeholder_font_name),
     });
   });
 
@@ -195,7 +258,48 @@
     replaceVariables(getLocalizedString(placeholder_lid), $variables),
   );
 
+  const errorLid = $derived(
+    (failedRule ? validation_error_lids?.[failedRule] : null) ??
+      validation_error_lid ??
+      undefined,
+  );
+  const errorMessage = $derived(
+    replaceVariables(getLocalizedString(errorLid) ?? "", $variables),
+  );
+  // Same markdown subset as text components; the helper escapes HTML first so
+  // localization strings cannot reach the `{@html}` sink as markup.
+  const errorHtml = $derived(getHtmlFromMarkdown(errorMessage));
+  const errorId = $derived(`${props.id}-error`);
+  const showErrorMessage = $derived(error && errorMessage !== "");
+  // The error row is reserved as soon as any error copy is configured, so the
+  // message appearing never shifts the layout below the input. Inputs without
+  // copy keep their original footprint.
+  const hasErrorCopy = $derived(
+    validation_error_lid != null ||
+      Object.values(validation_error_lids ?? {}).some((lid) => lid != null),
+  );
+
+  const errorStyle = $derived(
+    css({
+      ...mapTextColor(colorMode, color),
+      "text-align":
+        TextAlignments[horizontal_alignment] || TextAlignments.leading,
+      "font-size": `${Math.max(10, font_size - 2)}px`,
+      "font-family": resolveFontFamily(font_name),
+    }),
+  );
+
   const type = $derived.by((): HTMLInputAttributes["type"] => {
+    // Password masking must always win; a format constraint only changes the
+    // type of otherwise plain inputs.
+    if (props.keyboard_type !== "password") {
+      if (validation?.format === "email") {
+        return "email";
+      }
+      if (validation?.format === "uri") {
+        return "url";
+      }
+    }
     switch (props.keyboard_type) {
       case "decimal":
       case "numeric":
@@ -219,34 +323,148 @@
     keyboard_type === "password" ? "text" : keyboard_type,
   );
 
+  // `pattern` only applies to text-like types, so number inputs skip it.
+  const compiledPattern = $derived(
+    type === "number" ? null : compilePattern(validation?.pattern),
+  );
+
+  // Only the constraints the resolved type honours are rendered: browsers
+  // ignore length/pattern on `type="number"` and min/max on text-like types.
+  // `step="any"` lifts the implicit `step=1` for the `decimal` keyboard, which
+  // would otherwise flag decimals as `stepMismatch`; `numeric` keeps it so the
+  // integer keypad and non-integer values agree. Patterns the browser would
+  // reject are enforced in `readValidity` instead of being rendered.
+  const constraintAttributes = $derived.by(
+    (): Pick<
+      HTMLInputAttributes,
+      "min" | "max" | "step" | "minlength" | "maxlength" | "pattern"
+    > =>
+      type === "number"
+        ? {
+            min: validation?.minimum ?? undefined,
+            max: validation?.maximum ?? undefined,
+            step: keyboard_type === "decimal" ? "any" : undefined,
+          }
+        : {
+            minlength: validation?.minLength ?? undefined,
+            maxlength: validation?.maxLength ?? undefined,
+            pattern:
+              compiledPattern?.mode === "native"
+                ? (validation?.pattern ?? undefined)
+                : undefined,
+          },
+  );
+
   const isVisible = $derived(visible !== false);
 
+  $effect(() => {
+    // The `{#if isVisible}` block remounts the `<input>` empty, so the state
+    // that mirrors it must not survive a hide/show cycle either.
+    if (!isVisible) {
+      error = false;
+      failedRule = null;
+      valid = !required;
+      currentValue = "";
+    }
+  });
+
+  // An <input> never shrinks below its browser-default intrinsic width, so in
+  // `fit` width mode a hidden sizer span mirrors the displayed text (styled
+  // and padded like the input) to give the wrapper its content size, and the
+  // input is stretched over it. This matches the editor preview.
+  const isContentSized = $derived(size.width.type === "fit");
+  const displayedText = $derived(
+    type === "password" ? "•".repeat(currentValue.length) : currentValue,
+  );
+
+  const sizerText = $derived(displayedText || placeholder || "\u200b");
+  const sizerStyle = $derived.by(() => {
+    const showsPlaceholder = displayedText === "";
+    return css({
+      padding: mapSpacing(padding),
+      "font-weight":
+        (showsPlaceholder ? placeholder_font_weight_int : font_weight_int) ??
+        FontWeights.regular,
+      "font-size": `${showsPlaceholder ? placeholder_font_size : font_size}px`,
+      "font-family": resolveFontFamily(
+        showsPlaceholder ? placeholder_font_name : font_name,
+      ),
+    });
+  });
+
   if (validationContext) {
     $effect(() => {
       // A hidden field can't be filled in, so it shouldn't be able to block
       // Continue for the rest of the screen.
-      validationContext.updateSatisfaction(!isVisible || valid);
+      validationContext.updateSatisfaction(props.id, !isVisible || valid);
     });
+    onDestroy(() => validationContext.removeInput(props.id));
   }
 </script>
 
 {#if isVisible}
-  <div class="rc-gradient-border" style={wrapperStyle}>
-    <input
-      {type}
-      {placeholder}
-      {required}
-      inputmode={inputMode}
-      autocapitalize={capitalize}
-      style={inputStyle}
-      {oninput}
-      onfocus={() => (focused = true)}
-      {onblur}
-    />
+  <div class="rc-input-text" style={containerStyle}>
+    <div
+      class="rc-gradient-border"
+      class:content-sized={isContentSized}
+      style={wrapperStyle}
+    >
+      {#if isContentSized}
+        <span class="sizer" aria-hidden="true" style={sizerStyle}
+          >{sizerText}</span
+        >
+      {/if}
+      <input
+        {type}
+        {placeholder}
+        {required}
+        {...constraintAttributes}
+        inputmode={inputMode}
+        autocapitalize={capitalize}
+        aria-invalid={error}
+        aria-describedby={showErrorMessage ? errorId : undefined}
+        style={inputStyle}
+        {oninput}
+        onfocus={() => (focused = true)}
+        {onblur}
+      />
+    </div>
+    {#if hasErrorCopy}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+      <div class="rc-input-error" style={errorStyle} onclick={onErrorClick}>
+        {#if showErrorMessage}
+          <span class="rc-input-error-message" id={errorId} role="alert">
+            {@html errorHtml}
+          </span>
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}
 
 <style>
+  .rc-input-error {
+    /* A parent stack paints a full-size absolutely positioned `::before`
+       overlay, which sits above static descendants and swallows their pointer
+       events. Positioning the row paints it after that overlay so links in the
+       message stay clickable. */
+    position: relative;
+    /* Reserve one line (line-height + top gap) so the message never shifts the
+       layout below the input when it appears. `em` follows the row's own
+       font-size from the inline style. */
+    flex: none;
+    box-sizing: border-box;
+    padding-top: 4px;
+    line-height: 1.4;
+    min-height: calc(1.4em + 4px);
+    /* Never let the message dictate the width: a `fit` width container sizes
+       to the bordered box (the sizer), and the row stretches to match and
+       wraps. A cyclic percentage min-width counts as zero for intrinsic
+       sizing, which is what keeps the row out of the measurement. */
+    width: 0;
+    min-width: 100%;
+  }
+
   input {
     width: 100%;
     height: 100%;
@@ -255,6 +473,37 @@
     border-radius: inherit;
   }
 
+  .content-sized {
+    position: relative;
+  }
+
+  .sizer {
+    display: block;
+    visibility: hidden;
+    white-space: pre;
+    line-height: normal; /* Match the intrinsic height of a bare <input> */
+    border-inline-end: 2px solid transparent; /* Room for the caret */
+  }
+
+  .content-sized input {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    height: auto;
+  }
+
+  /* Spin buttons would overlap the text of a content-sized number input. */
+  .content-sized input::-webkit-outer-spin-button,
+  .content-sized input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .content-sized input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
   input:focus-visible {
     outline: none;
   }

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

@@ -14,6 +14,8 @@
     InputTextProps,
     ReservedAttribute,
   } from "../../types/components/input-text";
+  import type { Localizations } from "../../types/localization";
+  import type { ComponentInteractionData } from "../../types/paywall-component-interaction";
 
   interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
@@ -23,6 +25,10 @@
       value: string,
     ) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
+    onNavigateToUrl?: (url: string) => void;
+    onComponentInteraction?: (data: ComponentInteractionData) => void;
+    localizations?: Localizations;
+    selectedLocale?: string;
   }
 
   const {
@@ -30,6 +36,10 @@
     onSensitiveInputChanged,
     onReservedAttributeChanged,
     onSatisfactionChange,
+    onNavigateToUrl,
+    onComponentInteraction,
+    localizations = { en_US: {} },
+    selectedLocale,
     ...inputTextProps
   }: Props = $props();
 
@@ -42,9 +52,8 @@
   setColorModeContext();
   setLocalizationContext(() => ({
     defaultLocale: "en_US",
-    localizations: {
-      en_US: {},
-    },
+    selectedLocale,
+    localizations,
   }));
 
   setPaywallContext({
@@ -53,7 +62,8 @@
     baseVariables: readable(undefined),
     infoPerPackage: readable(undefined),
     onPurchase: () => {},
-    emitComponentInteraction: () => {},
+    emitComponentInteraction: onComponentInteraction ?? (() => {}),
+    onNavigateToUrl,
     onButtonAction: () => {},
     onInputChanged,
     onSensitiveInputChanged,