@schematichq/schematic-components 0.6.2 → 0.6.3

package/dist/schematic-components.cjs.js

@@ -2167,7 +2167,7 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce2(func, wait, options) {
+    function debounce3(func, wait, options) {
       var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
       if (typeof func != "function") {
         throw new TypeError(FUNC_ERROR_TEXT);
@@ -2248,7 +2248,7 @@ var require_debounce = __commonJS({
       debounced.flush = flush;
       return debounced;
     }
-    module2.exports = debounce2;
+    module2.exports = debounce3;
   }
 });
 
@@ -13106,7 +13106,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.2";
+      headers["X-Schematic-Components-Version"] = "0.6.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14668,6 +14668,7 @@ var Container2 = dt(Box)`
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
   width: 100%;
+  height: 100%;
 
   *,
   *::before,
@@ -14700,6 +14701,7 @@ var Root = (0, import_react22.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
+var import_debounce2 = __toESM(require_debounce());
 var import_react30 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -18219,16 +18221,19 @@ var Viewport = (0, import_react30.forwardRef)(
     const canCheckout = data.capabilities?.checkout ?? true;
     (0, import_react30.useLayoutEffect)(() => {
       const parent = portal || document.body;
-      setTop(
-        Math.abs(
+      const setModalY = (0, import_debounce2.default)(() => {
+        const value = Math.abs(
           (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
-        )
-      );
+        );
+        setTop(value);
+      }, 250);
       parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
+      window.addEventListener("scroll", setModalY);
       return () => {
+        window.removeEventListener("scroll", setModalY);
         parent.style.overflow = "";
       };
-    }, [layout, portal]);
+    }, [portal, layout]);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledViewport, { ref, ...props, children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RenderLayout, { children }),

package/dist/schematic-components.esm.js

@@ -2167,7 +2167,7 @@ var require_debounce = __commonJS({
     var FUNC_ERROR_TEXT = "Expected a function";
     var nativeMax = Math.max;
     var nativeMin = Math.min;
-    function debounce2(func, wait, options) {
+    function debounce3(func, wait, options) {
       var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
       if (typeof func != "function") {
         throw new TypeError(FUNC_ERROR_TEXT);
@@ -2248,7 +2248,7 @@ var require_debounce = __commonJS({
       debounced.flush = flush;
       return debounced;
     }
-    module.exports = debounce2;
+    module.exports = debounce3;
   }
 });
 
@@ -13056,7 +13056,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.6.2";
+      headers["X-Schematic-Components-Version"] = "0.6.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14618,6 +14618,7 @@ var Container2 = dt(Box)`
   display: block;
   font-size: ${TEXT_BASE_SIZE}px;
   width: 100%;
+  height: 100%;
 
   *,
   *::before,
@@ -14650,6 +14651,7 @@ var Root = forwardRef5(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
+var import_debounce2 = __toESM(require_debounce());
 import { forwardRef as forwardRef6, useLayoutEffect as useLayoutEffect6, useState as useState11 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -18183,16 +18185,19 @@ var Viewport = forwardRef6(
     const canCheckout = data.capabilities?.checkout ?? true;
     useLayoutEffect6(() => {
       const parent = portal || document.body;
-      setTop(
-        Math.abs(
+      const setModalY = (0, import_debounce2.default)(() => {
+        const value = Math.abs(
           (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
-        )
-      );
+        );
+        setTop(value);
+      }, 250);
       parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
+      window.addEventListener("scroll", setModalY);
       return () => {
+        window.removeEventListener("scroll", setModalY);
         parent.style.overflow = "";
       };
-    }, [layout, portal]);
+    }, [portal, layout]);
     return /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsxs20(StyledViewport, { ref, ...props, children: [
         /* @__PURE__ */ jsx26(RenderLayout, { children }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",