@revenuecat/purchases-ui-js 4.8.15 → 4.8.16

package/dist/components/footer/Footer.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
+  import { setStackDimensionContext } from "../stack/stack-dimension-context";
   import type { FooterProps } from "../../types/components/footer";
 
   const { stack }: FooterProps = $props();
+  // The wrapper below is a row flex container; publish its axis to the Stack.
+  setStackDimensionContext(() => "horizontal");
 </script>
 
 <div>

package/dist/components/header/Header.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
+  import { setStackDimensionContext } from "../stack/stack-dimension-context";
   import type { HeaderProps } from "../../types/components/header";
 
   const { stack }: HeaderProps = $props();
+  // The wrapper below is a row flex container; publish its axis to the Stack.
+  setStackDimensionContext(() => "horizontal");
 </script>
 
 <div>

package/dist/components/paywall/Paywall.stories.svelte

@@ -26,6 +26,7 @@
   import { viewportDecorator } from "../../stories/viewport-decorator";
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
+  import { FILL_HEIGHT_WEBVIEW_PAYWALL } from "./fixtures/fill-height-webview-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
@@ -95,6 +96,19 @@
   }}
 />
 
+<!--
+  Regression for FUN-2262: fill-height Stack + fill-height WebView must fill
+  the space between the fixed header/footer bars. Collapse shows as the bars
+  sitting nearly adjacent. Chromatic watches the host layout, not iframe pixels.
+-->
+<Story
+  name="Fill-height WebView (regression)"
+  decorators={[viewportDecorator(320, 400, 0)]}
+  args={{
+    paywallData: FILL_HEIGHT_WEBVIEW_PAYWALL,
+  }}
+/>
+
 <Story
   name="Override paywall"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -47,6 +47,7 @@
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
+  import { mapPaywallContentStackStyle } from "./paywall-utils";
   import Sheet from "./Sheet.svelte";
   import ViewportBackdrop from "./ViewportBackdrop.svelte";
   import {
@@ -401,12 +402,11 @@
               bottom: (stack.padding?.bottom ?? 0) + footerHeight,
             }
           : stack.padding}
-        style={{
-          height: "auto",
-          ...(pullContentUnderHeader
-            ? { "margin-top": `-${headerHeight}px` }
-            : {}),
-        }}
+        style={mapPaywallContentStackStyle(
+          stack.size.height,
+          pullContentUnderHeader,
+          headerHeight,
+        )}
       />
     </div>
     {#if sticky_footer}

package/dist/components/paywall/fixtures/fill-height-webview-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const FILL_HEIGHT_WEBVIEW_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/fill-height-webview-paywall.js

@@ -0,0 +1,125 @@
+/**
+ * Regression fixture for FUN-2262: a fill-height Stack wrapping a fill-height
+ * WebView must consume the space between fixed header/footer bars.
+ *
+ * Pair with `viewportDecorator` so the paywall has a definite height. If either
+ * fill level collapses, the colored bars sit nearly adjacent in Chromatic.
+ *
+ * Uses a tiny stable https SVG so Chromatic cares about the host box height,
+ * not iframe content pixels.
+ */
+const STABLE_SVG_URL = "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/2705.svg";
+const ZERO_SPACING = {
+    bottom: 0,
+    leading: 0,
+    top: 0,
+    trailing: 0,
+};
+const NO_CORNERS = {
+    bottom_leading: 0,
+    bottom_trailing: 0,
+    top_leading: 0,
+    top_trailing: 0,
+};
+const solidBar = (id, height, hex) => ({
+    type: "stack",
+    id,
+    name: id,
+    components: [],
+    dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+    },
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: height },
+    },
+    background: null,
+    background_color: { light: { type: "hex", value: hex } },
+    badge: null,
+    border: null,
+    margin: { ...ZERO_SPACING },
+    padding: { ...ZERO_SPACING },
+    shadow: null,
+    shape: { type: "rectangle", corners: { ...NO_CORNERS } },
+    spacing: 0,
+});
+const fillWebView = {
+    type: "web_view",
+    id: "fill_web_view",
+    name: "Fill WebView",
+    protocol_version: 1,
+    url: STABLE_SVG_URL,
+    size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+    },
+};
+const fillHostStack = {
+    type: "stack",
+    id: "fill_host",
+    name: "Fill host",
+    components: [fillWebView],
+    dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "start",
+    },
+    size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+    },
+    // Distinct fill so a collapsed host is obvious next to the bars.
+    background: null,
+    background_color: { light: { type: "hex", value: "#c7d2fe" } },
+    badge: null,
+    border: null,
+    margin: { ...ZERO_SPACING },
+    padding: { ...ZERO_SPACING },
+    shadow: null,
+    shape: { type: "rectangle", corners: { ...NO_CORNERS } },
+    spacing: 0,
+};
+export const FILL_HEIGHT_WEBVIEW_PAYWALL = {
+    id: "fill_height_webview_paywall",
+    default_locale: "en_US",
+    components_localizations: { en_US: {} },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: { light: { type: "hex", value: "#ffffff" } },
+            },
+            stack: {
+                type: "stack",
+                id: "root",
+                name: "Root",
+                components: [
+                    solidBar("header_bar", 48, "#ff5f5f"),
+                    fillHostStack,
+                    solidBar("footer_bar", 48, "#11d483"),
+                ],
+                dimension: {
+                    type: "vertical",
+                    alignment: "center",
+                    distribution: "start",
+                },
+                size: {
+                    width: { type: "fill" },
+                    height: { type: "fill" },
+                },
+                background: null,
+                background_color: null,
+                badge: null,
+                border: null,
+                margin: { ...ZERO_SPACING },
+                padding: { ...ZERO_SPACING },
+                shadow: null,
+                shape: { type: "rectangle", corners: { ...NO_CORNERS } },
+                spacing: 0,
+            },
+            sticky_footer: null,
+        },
+    },
+};

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

@@ -0,0 +1,3 @@
+import type { Size } from "../../types";
+import type { CSS } from "../../utils/base-utils";
+export declare function mapPaywallContentStackStyle(height: Size, pullContentUnderHeader: boolean, headerHeight: number): CSS;

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

@@ -0,0 +1,8 @@
+export function mapPaywallContentStackStyle(height, pullContentUnderHeader, headerHeight) {
+    return {
+        // Nested fill children need a definite root height; other roots keep
+        // the existing content-sized scrolling behavior.
+        ...(height.type === "fill" ? {} : { height: "auto" }),
+        ...(pullContentUnderHeader ? { "margin-top": `-${headerHeight}px` } : {}),
+    };
+}

package/dist/components/stack/Stack.svelte

@@ -27,10 +27,12 @@
   import {
     mapBadge,
     mapDimension,
+    mapFillHeight,
     mapFixedHeightBounds,
     mapFixedWidthBounds,
     mapLayerAlignment,
   } from "./stack-utils";
+  import { setStackDimensionContext } from "./stack-dimension-context";
 
   interface MiscProps {
     onclick?: () => void;
@@ -67,6 +69,9 @@
       ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
+  const getParentStackDimension = setStackDimensionContext(
+    () => dimension.type,
+  );
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
@@ -80,12 +85,18 @@
   });
   const borderRadiusCss = $derived(mapBorderRadius(shape));
 
+  const heightFill = $derived(size.height.type === "fill");
+
   const stackStyle = $derived(
     css({
       display: "flex",
       position: "relative",
       width: mapSize(size.width),
-      height: mapSize(size.height),
+      // Fill height: definite height + growth in columns; stretch in rows
+      // (see mapFillHeight). Lets nested fill children (e.g. web_view) resolve.
+      ...(heightFill
+        ? mapFillHeight(getParentStackDimension?.())
+        : { height: mapSize(size.height) }),
       ...mapFixedWidthBounds(size.width),
       ...mapFixedHeightBounds(size.height),
       ...mapDimension(dimension),

package/dist/components/stack/stack-dimension-context.d.ts

@@ -0,0 +1,12 @@
+import type { Dimension } from "../../types/alignment";
+export type StackDimension = Dimension["type"];
+type GetStackDimension = () => StackDimension | undefined;
+/**
+ * Publishes the nearest flex container's axis and returns the parent-axis getter.
+ *
+ * Reading before writing is required because Svelte seeds a component's context
+ * map from its parent. Flex wrappers around Stack must publish their own axis.
+ */
+export declare function setStackDimensionContext(context: GetStackDimension): GetStackDimension | undefined;
+export declare function getStackDimensionContext(): GetStackDimension | undefined;
+export {};

package/dist/components/stack/stack-dimension-context.js

@@ -0,0 +1,16 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("stack-dimension");
+/**
+ * Publishes the nearest flex container's axis and returns the parent-axis getter.
+ *
+ * Reading before writing is required because Svelte seeds a component's context
+ * map from its parent. Flex wrappers around Stack must publish their own axis.
+ */
+export function setStackDimensionContext(context) {
+    const parentContext = getStackDimensionContext();
+    setContext(key, context);
+    return parentContext;
+}
+export function getStackDimensionContext() {
+    return getContext(key);
+}

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

@@ -4,6 +4,7 @@ import type { Badge } from "../../types/components/stack";
 import { type CSS } from "../../utils/base-utils";
 export declare function mapFixedWidthBounds(width: Size): CSS;
 export declare function mapFixedHeightBounds(height: Size): CSS;
+export declare function mapFillHeight(parentDimension?: Dimension["type"]): CSS;
 export declare function mapDimension(dimension: Dimension): Record<string, string>;
 type JustifyAlign = {
     justifyContent: string;

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

@@ -28,6 +28,28 @@ export function mapFixedHeightBounds(height) {
     const value = px(height.value);
     return { "min-height": value, "max-height": value };
 }
+export function mapFillHeight(parentDimension) {
+    // In a row, fill-height is a cross-axis problem. flex-grow would steal width;
+    // height:100% often fails under align-items:flex-start (e.g. alignment:"top").
+    // align-self:stretch fills the line so nested center/space_around can work.
+    if (parentDimension === "horizontal") {
+        return {
+            "align-self": "stretch",
+            "min-height": 0,
+        };
+    }
+    return {
+        height: "100%",
+        "min-height": 0,
+        ...(parentDimension === "vertical"
+            ? {
+                "flex-grow": 1,
+                "flex-shrink": 1,
+                "flex-basis": "0%",
+            }
+            : {}),
+    };
+}
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
         return {};

package/dist/components/web-view/WebView.svelte

@@ -2,6 +2,8 @@
   import { onMount } from "svelte";
   import type { WebViewProps } from "../../types/components/web-view";
   import { css, mapSize, px } from "../../utils/base-utils";
+  import { getStackDimensionContext } from "../stack/stack-dimension-context";
+  import { mapFillHeight } from "../stack/stack-utils";
   import { isSameOriginAsHost, sanitizeWebViewUrl } from "./web-view-utils";
   import {
     FIT_MESSAGE,
@@ -24,6 +26,7 @@
     typeof value === "number" && Number.isFinite(value) && value > 0;
 
   const props: WebViewProps = $props();
+  const getParentStackDimension = getStackDimensionContext();
 
   // Gate the origin guard on a post-mount flag (not `typeof window`) so SSR and the
   // first client render match; otherwise a cross-origin URL mismatches on hydration.
@@ -57,6 +60,9 @@
     const { width, height } = props.size;
     const widthFit = width.type === "fit";
     const heightFit = height.type === "fit";
+    const heightFill = height.type === "fill";
+    const growsInVerticalParent =
+      heightFill && getParentStackDimension?.() === "vertical";
     // Pin a `fit` axis with an explicit size. `flex-shrink: 0` keeps flex parents
     // from collapsing the box; avoid mirroring the size in `min-*` or it beats `max-*`.
     // Prefer author-declared `default` when present; else the hard 300px fallback.
@@ -68,12 +74,23 @@
       : null;
     return css({
       width: fitWidthPx != null ? px(fitWidthPx) : mapSize(width),
-      height: fitHeightPx != null ? px(fitHeightPx) : mapSize(height),
+      // Fill height via mapFillHeight: grow in columns, stretch in rows.
+      // Growing on a row main axis would change this box's width.
+      ...(heightFill
+        ? mapFillHeight(getParentStackDimension?.())
+        : {
+            height: fitHeightPx != null ? px(fitHeightPx) : mapSize(height),
+          }),
       // Cap a fit axis to the parent. Do not mirror the reported size in `min-*`:
       // that defeats `max-*` and clips content when the report exceeds the viewport.
       ...(fitWidthPx != null ? { "max-width": "100%" } : {}),
       ...(fitHeightPx != null ? { "max-height": "100%" } : {}),
-      "flex-shrink": width.type === "fixed" || widthFit || heightFit ? 0 : 1,
+      ...(growsInVerticalParent
+        ? {}
+        : {
+            "flex-shrink":
+              width.type === "fixed" || widthFit || heightFit ? 0 : 1,
+          }),
       "line-height": 0,
       // No transition: the iframe is height:100% of this box, so animating the
       // resize would flash the iframe's own scrollbar mid-change.

package/dist/components/web-view/WebViewTestWrapper.svelte

@@ -2,11 +2,20 @@
   import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
   import { setVariablesContext } from "../../stores/variables";
+  import {
+    setStackDimensionContext,
+    type StackDimension,
+  } from "../stack/stack-dimension-context";
   import type { WebViewProps } from "../../types/components/web-view";
   import { readable, writable } from "svelte/store";
   import WebView from "./WebView.svelte";
 
-  const props: WebViewProps = $props();
+  const {
+    parentStackDimension,
+    ...props
+  }: WebViewProps & { parentStackDimension?: StackDimension } = $props();
+
+  setStackDimensionContext(() => parentStackDimension);
 
   setPaywallContext({
     defaultPackageId: undefined,

package/dist/components/web-view/WebViewTestWrapper.svelte.d.ts

@@ -1,4 +1,8 @@
+import { type StackDimension } from "../stack/stack-dimension-context";
 import type { WebViewProps } from "../../types/components/web-view";
-declare const WebViewTestWrapper: import("svelte").Component<WebViewProps, {}, "">;
+type $$ComponentProps = WebViewProps & {
+    parentStackDimension?: StackDimension;
+};
+declare const WebViewTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type WebViewTestWrapper = ReturnType<typeof WebViewTestWrapper>;
 export default WebViewTestWrapper;

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