@revenuecat/purchases-ui-js 4.8.4 → 4.8.5

package/dist/components/package/Package.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
+  import { setPackageIdContext } from "../../stores/packageId";
   import { setSelectedStateContext } from "../../stores/selected";
   import {
     getVariablesContext,
@@ -18,6 +19,8 @@
   const { stack, package_id, is_selected_by_default, name }: PackageProps =
     $props();
 
+  setPackageIdContext(package_id);
+
   const {
     defaultPackageId,
     emitComponentInteraction,

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getOptionalPackageIdContext } from "../../stores/packageId";
   import { getPaywallContext } from "../../stores/paywall";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
   import type { PurchaseButtonInteractionData } from "../../types/paywall-component-interaction";
@@ -16,6 +17,9 @@
   } = getPaywallContext();
   const { getLocalizedString } = getLocalizationContext();
 
+  // Set when embedded in a package; standalone buttons fall back to the store.
+  const enclosingPackageId = getOptionalPackageIdContext();
+
   const appendQueryParam = (url: string, key: string, value: string) => {
     const hashIndex = url.indexOf("#");
     const hash = hashIndex === -1 ? "" : url.slice(hashIndex);
@@ -64,8 +68,10 @@
   };
 
   const onclick = () => {
-    const packageId = $selectedPackageId;
+    const packageId = enclosingPackageId ?? $selectedPackageId;
     if (packageId !== undefined) {
+      // Sync before purchasing so onPurchase reads this package, not a stale one.
+      $selectedPackageId = packageId;
       emitComponentInteraction(getPurchaseButtonInteractionData(packageId));
     }
 

package/dist/components/stack/Stack.svelte

@@ -187,7 +187,7 @@
         style="position: relative; width: 100%; height: 100%; isolation: isolate;"
       >
         {#each components as component, index}
-          <div style={getLayerStyle(index)}>
+          <div class="rc-zlayer-layer" style={getLayerStyle(index)}>
             <Node nodeData={component} />
           </div>
         {/each}
@@ -236,4 +236,18 @@
     position: relative;
     z-index: 3;
   }
+
+  /*
+   * Each overlay layer is a full-size (inset:0) box, so by default it swallows
+   * clicks anywhere over the stack — including where it has no content —
+   * blocking interactive elements on the layers beneath. Only its own content
+   * should be hit-testable.
+   */
+  .rc-zlayer-layer {
+    pointer-events: none;
+  }
+
+  .rc-zlayer-layer > :global(*) {
+    pointer-events: auto;
+  }
 </style>

package/dist/stores/packageId.d.ts

@@ -0,0 +1,2 @@
+export declare function setPackageIdContext(packageId: string): void;
+export declare function getOptionalPackageIdContext(): string | undefined;

package/dist/stores/packageId.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("packageId");
+export function setPackageIdContext(packageId) {
+    setContext(key, packageId);
+}
+export function getOptionalPackageIdContext() {
+    return getContext(key);
+}

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