@encatch/ws-react 0.0.50-beta.4 → 0.0.50-beta.6

package/README.md

@@ -56,8 +56,6 @@ function App() {
       <EncatchPreview
         formConfig={formConfig}
         formPageUrl="https://your-shareable-app.com/s/encatch-preview-form"
-        iframeWidth="100%"
-        iframeHeight="100%"
         scale={100}
         formId="unique-form-id"
         onFormEvent={(formEvent) => {
@@ -76,8 +74,6 @@ function App() {
 | `formConfig` | `EncatchFormConfig` | Yes* | - | Form configuration for the iframe. Required with formPageUrl to render. |
 | `formPageUrl` | `string` | Yes* | - | URL of the iframe form page (e.g. shareable app route). Required with formConfig to render. |
 | `formId` | `string` | No | from formConfig or "preview" | Form id for URL and message payloads. |
-| `iframeWidth` | `string` | No | `"100%"` | Container width as percentage (e.g. "100%", "80%"). |
-| `iframeHeight` | `string` | No | `"100%"` | Container height as percentage (e.g. "100%", "80%"). |
 | `scale` | `number` | No | `100` | Visual scale of iframe content, 1–100. Applied via CSS transform. |
 | `instanceId` | `string` | No | - | Unique identifier for filtering events. |
 | `onFormEvent` | `OnFormEventHandler` | No | - | Event handler builder function. |

package/dist/EncatchPreview.d.ts

@@ -7,11 +7,7 @@ interface EncatchPreviewProps {
     formPageUrl?: string;
     /** Optional form id for iframe URL query and message payloads. Defaults to formConfig.formId or "preview". */
     formId?: string;
-    /** Iframe container width as a percentage string (e.g. "100%", "80%"). Default "100%". */
-    iframeWidth?: string;
-    /** Iframe container height as a percentage string (e.g. "100%", "80%"). Default "100%". */
-    iframeHeight?: string;
-    /** Visual scale of the iframe content, 1–100. Applied via CSS transform. Default 100. */
+    /** Visual scale of the iframe content (e.g. 1–100). Passed to the iframe in config and applied inside the form; no transform on the iframe. Default 100. */
     scale?: number;
     instanceId?: string;
     /**

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import V, { useRef as J, useEffect as P, useCallback as H } from "react";
-var D = { exports: {} }, j = {};
+import $, { useRef as q, useEffect as O, useCallback as X } from "react";
+var j = { exports: {} }, A = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var D = { exports: {} }, j = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Z;
-function se() {
-  if (Z) return j;
-  Z = 1;
-  var i = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(s, a, c) {
-    var p = null;
-    if (c !== void 0 && (p = "" + c), a.key !== void 0 && (p = "" + a.key), "key" in a) {
+var H;
+function ae() {
+  if (H) return A;
+  H = 1;
+  var f = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(o, s, c) {
+    var m = null;
+    if (c !== void 0 && (m = "" + c), s.key !== void 0 && (m = "" + s.key), "key" in s) {
       c = {};
-      for (var w in a)
-        w !== "key" && (c[w] = a[w]);
-    } else c = a;
-    return a = c.ref, {
-      $$typeof: i,
-      type: s,
-      key: p,
-      ref: a !== void 0 ? a : null,
+      for (var w in s)
+        w !== "key" && (c[w] = s[w]);
+    } else c = s;
+    return s = c.ref, {
+      $$typeof: f,
+      type: o,
+      key: m,
+      ref: s !== void 0 ? s : null,
       props: c
     };
   }
-  return j.Fragment = r, j.jsx = n, j.jsxs = n, j;
+  return A.Fragment = r, A.jsx = n, A.jsxs = n, A;
 }
-var N = {};
+var C = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,47 +41,47 @@ var N = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var K;
-function ae() {
-  return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
-    function i(e) {
+var Z;
+function se() {
+  return Z || (Z = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === te ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case A:
+        case l:
           return "Fragment";
-        case u:
+        case P:
           return "Profiler";
-        case x:
+        case d:
           return "StrictMode";
-        case M:
+        case _:
           return "Suspense";
-        case E:
+        case T:
           return "SuspenseList";
-        case o:
+        case re:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case f:
+          case N:
             return "Portal";
-          case k:
+          case F:
             return (e.displayName || "Context") + ".Provider";
-          case d:
+          case x:
             return (e._context.displayName || "Context") + ".Consumer";
-          case F:
+          case h:
             var t = e.render;
             return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case O:
-            return t = e.displayName || null, t !== null ? t : i(e.type) || "Memo";
-          case T:
+          case a:
+            return t = e.displayName || null, t !== null ? t : f(e.type) || "Memo";
+          case J:
             t = e._payload, e = e._init;
             try {
-              return i(e(t));
+              return f(e(t));
             } catch {
             }
         }
@@ -99,33 +99,33 @@ function ae() {
       }
       if (t) {
         t = console;
-        var l = t.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return l.call(
+        var u = t.error, b = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
           t,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
+          b
         ), r(e);
       }
     }
-    function s(e) {
-      if (e === A) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === T)
+    function o(e) {
+      if (e === l) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === J)
         return "<...>";
       try {
-        var t = i(e);
+        var t = f(e);
         return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = Y.A;
+    function s() {
+      var e = D.A;
       return e === null ? null : e.getOwner();
     }
     function c() {
       return Error("react-stack-top-frame");
     }
-    function p(e) {
+    function m(e) {
       if (U.call(e, "key")) {
         var t = Object.getOwnPropertyDescriptor(e, "key").get;
         if (t && t.isReactWarning) return !1;
@@ -133,33 +133,33 @@ function ae() {
       return e.key !== void 0;
     }
     function w(e, t) {
-      function l() {
-        z || (z = !0, console.error(
+      function u() {
+        V || (V = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           t
         ));
       }
-      l.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: l,
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
         configurable: !0
       });
     }
-    function h() {
-      var e = i(this.type);
-      return G[e] || (G[e] = !0, console.error(
+    function v() {
+      var e = f(this.type);
+      return z[e] || (z[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function R(e, t, l, m, _, g, $, L) {
-      return l = g.ref, e = {
+    function g(e, t, u, b, k, E, Y, W) {
+      return u = E.ref, e = {
         $$typeof: I,
         type: e,
         key: t,
-        props: g,
-        _owner: _
-      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        props: E,
+        _owner: k
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: h
+        get: v
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,248 +174,239 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: $
+        value: Y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: L
+        value: W
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function S(e, t, l, m, _, g, $, L) {
-      var b = t.children;
-      if (b !== void 0)
-        if (m)
-          if (ne(b)) {
-            for (m = 0; m < b.length; m++)
-              v(b[m]);
-            Object.freeze && Object.freeze(b);
+    function R(e, t, u, b, k, E, Y, W) {
+      var p = t.children;
+      if (p !== void 0)
+        if (b)
+          if (ne(p)) {
+            for (b = 0; b < p.length; b++)
+              y(p[b]);
+            Object.freeze && Object.freeze(p);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else v(b);
+        else y(p);
       if (U.call(t, "key")) {
-        b = i(e);
-        var C = Object.keys(t).filter(function(oe) {
+        p = f(e);
+        var S = Object.keys(t).filter(function(oe) {
           return oe !== "key";
         });
-        m = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", X[b + m] || (C = 0 < C.length ? "{" + C.join(": ..., ") + ": ...}" : "{}", console.error(
+        b = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", Q[p + b] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          m,
           b,
-          C,
-          b
-        ), X[b + m] = !0);
+          p,
+          S,
+          p
+        ), Q[p + b] = !0);
       }
-      if (b = null, l !== void 0 && (n(l), b = "" + l), p(t) && (n(t.key), b = "" + t.key), "key" in t) {
-        l = {};
-        for (var q in t)
-          q !== "key" && (l[q] = t[q]);
-      } else l = t;
-      return b && w(
-        l,
+      if (p = null, u !== void 0 && (n(u), p = "" + u), m(t) && (n(t.key), p = "" + t.key), "key" in t) {
+        u = {};
+        for (var L in t)
+          L !== "key" && (u[L] = t[L]);
+      } else u = t;
+      return p && w(
+        u,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), R(
+      ), g(
         e,
-        b,
-        g,
-        _,
-        a(),
-        l,
-        $,
-        L
+        p,
+        E,
+        k,
+        s(),
+        u,
+        Y,
+        W
       );
     }
-    function v(e) {
+    function y(e) {
       typeof e == "object" && e !== null && e.$$typeof === I && e._store && (e._store.validated = 1);
     }
-    var y = V, I = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), d = Symbol.for("react.consumer"), k = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), o = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), Y = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ne = Array.isArray, W = console.createTask ? console.createTask : function() {
+    var i = $, I = Symbol.for("react.transitional.element"), N = Symbol.for("react.portal"), l = Symbol.for("react.fragment"), d = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), F = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), a = Symbol.for("react.memo"), J = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), D = i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ne = Array.isArray, M = console.createTask ? console.createTask : function() {
       return null;
     };
-    y = {
+    i = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var z, G = {}, B = y.react_stack_bottom_frame.bind(
-      y,
+    var V, z = {}, G = i.react_stack_bottom_frame.bind(
+      i,
       c
-    )(), Q = W(s(c)), X = {};
-    N.Fragment = A, N.jsx = function(e, t, l, m, _) {
-      var g = 1e4 > Y.recentlyCreatedOwnerStacks++;
-      return S(
+    )(), B = M(o(c)), Q = {};
+    C.Fragment = l, C.jsx = function(e, t, u, b, k) {
+      var E = 1e4 > D.recentlyCreatedOwnerStacks++;
+      return R(
         e,
         t,
-        l,
+        u,
         !1,
-        m,
-        _,
-        g ? Error("react-stack-top-frame") : B,
-        g ? W(s(e)) : Q
+        b,
+        k,
+        E ? Error("react-stack-top-frame") : G,
+        E ? M(o(e)) : B
       );
-    }, N.jsxs = function(e, t, l, m, _) {
-      var g = 1e4 > Y.recentlyCreatedOwnerStacks++;
-      return S(
+    }, C.jsxs = function(e, t, u, b, k) {
+      var E = 1e4 > D.recentlyCreatedOwnerStacks++;
+      return R(
         e,
         t,
-        l,
+        u,
         !0,
-        m,
-        _,
-        g ? Error("react-stack-top-frame") : B,
-        g ? W(s(e)) : Q
+        b,
+        k,
+        E ? Error("react-stack-top-frame") : G,
+        E ? M(o(e)) : B
       );
     };
-  })()), N;
+  })()), C;
 }
-var ee;
+var K;
 function ie() {
-  return ee || (ee = 1, process.env.NODE_ENV === "production" ? D.exports = se() : D.exports = ae()), D.exports;
+  return K || (K = 1, process.env.NODE_ENV === "production" ? j.exports = ae() : j.exports = se()), j.exports;
 }
 var ce = ie();
-const fe = ({
-  formConfig: i,
+const le = ({
+  formConfig: f,
   formPageUrl: r,
   formId: n,
-  iframeWidth: s = "100%",
-  iframeHeight: a = "100%",
-  scale: c = 100,
-  instanceId: p,
-  onFormEvent: w
+  scale: o = 100,
+  instanceId: s,
+  onFormEvent: c
 }) => {
-  const h = !!(i && r), R = n ?? i?.formId ?? p ?? "preview", S = V.useRef(null), v = V.useRef(null), y = J(!1), I = J(() => {
-  }), f = J({});
-  P(() => {
-    if (!w) return;
-    w({
+  const m = !!(f && r), w = n ?? f?.formId ?? s ?? "preview", v = $.useRef(null), g = $.useRef(null), R = q(!1), y = q(() => {
+  }), i = q({});
+  O(() => {
+    if (!c) return;
+    c({
       onSubmit: (d) => {
-        f.current.onSubmit = d;
+        i.current.onSubmit = d;
       },
       onShow: (d) => {
-        f.current.onShow = d;
+        i.current.onShow = d;
       },
       onClose: (d) => {
-        f.current.onClose = d;
+        i.current.onClose = d;
       },
       onSectionChange: (d) => {
-        f.current.onSectionChange = d;
+        i.current.onSectionChange = d;
       },
       onQuestionAnswered: (d) => {
-        f.current.onQuestionAnswered = d;
+        i.current.onQuestionAnswered = d;
       },
       onError: (d) => {
-        f.current.onError = d;
+        i.current.onError = d;
       }
     });
-  }, [w]);
-  const A = H(() => {
-    if (!v.current?.contentWindow || !i) return;
-    const u = { formId: R, ...i };
-    v.current.contentWindow.postMessage(
-      { type: "sdk:formConfig", data: u },
+  }, [c]);
+  const I = X(() => {
+    if (!g.current?.contentWindow || !f) return;
+    const l = { formId: w, scale: o, ...f };
+    g.current.contentWindow.postMessage(
+      { type: "sdk:formConfig", data: l },
       "*"
     );
-  }, [i, R]);
-  I.current = A, P(() => {
-    !h || !y.current || I.current();
-  }, [h, i, A]);
-  const x = H(
-    (u, d) => {
-      const k = d / 100;
-      u.style.border = "none", k === 1 ? (u.style.width = "100%", u.style.height = "100%", u.style.transform = "", u.style.transformOrigin = "") : (u.style.width = `${100 / k}%`, u.style.height = `${100 / k}%`, u.style.transformOrigin = "0 0", u.style.transform = `scale(${k})`);
-    },
-    []
-  );
-  return P(() => {
-    !h || !v.current || x(v.current, c);
-  }, [h, i, r, c, x]), P(() => {
-    if (!h || !S.current || !i || !r) return;
-    const u = document.createElement("div");
-    u.style.width = "100%", u.style.height = "100%", u.style.overflow = "hidden";
-    const d = document.createElement("iframe"), k = new URL(r, window.location.origin);
-    k.searchParams.set("formId", R), d.src = k.toString(), d.title = "Encatch form", x(d, c), v.current = d, u.appendChild(d), S.current.appendChild(u);
-    const F = (M) => {
-      const E = M.data;
-      if (!E || typeof E != "object" || !E.type) return;
-      let O = E.type, T = E.formId, o = E.data;
-      switch (O.startsWith("encatch:") && (O = O.replace("encatch:", ""), T = E.payload?.feedbackConfigurationId, o = E.payload), O) {
+  }, [f, w, o]);
+  y.current = I, O(() => {
+    !m || !R.current || y.current();
+  }, [m, f, I]);
+  const N = X((l) => {
+    l.style.border = "none", l.style.width = "100%", l.style.height = "100%";
+  }, []);
+  return O(() => {
+    if (!m || !v.current || !f || !r) return;
+    const l = document.createElement("div");
+    l.style.width = "100%", l.style.height = "100%", l.style.overflow = "hidden";
+    const d = document.createElement("iframe"), P = new URL(r, window.location.origin);
+    P.searchParams.set("formId", w), d.src = P.toString(), d.title = "Encatch form", N(d), g.current = d, l.appendChild(d), v.current.appendChild(l);
+    const x = (F) => {
+      const h = F.data;
+      if (!h || typeof h != "object" || !h.type) return;
+      let _ = h.type, T = h.formId, a = h.data;
+      switch (_.startsWith("encatch:") && (_ = _.replace("encatch:", ""), T = h.payload?.feedbackConfigurationId, a = h.payload), _) {
         case "form:ready":
-          y.current = !0, I.current();
+          R.current = !0, y.current();
           break;
         case "form:close":
-          f.current.onClose?.({ timestamp: Date.now() });
+          i.current.onClose?.({ timestamp: Date.now() });
           break;
         case "form:complete":
-          f.current.onClose?.({ timestamp: Date.now() });
+          i.current.onClose?.({ timestamp: Date.now() });
           break;
         case "form:submit":
-          o && f.current.onSubmit && f.current.onSubmit({
-            feedbackConfigurationId: o.feedbackConfigurationId,
-            feedbackIdentifier: o.feedbackIdentifier,
-            response: o.response,
-            isPartialSubmit: o.isPartialSubmit,
+          a && i.current.onSubmit && i.current.onSubmit({
+            feedbackConfigurationId: a.feedbackConfigurationId,
+            feedbackIdentifier: a.feedbackIdentifier,
+            response: a.response,
+            isPartialSubmit: a.isPartialSubmit,
             timestamp: Date.now()
           });
           break;
         case "form:show":
-          o && f.current.onShow && f.current.onShow({
-            feedbackConfigurationId: o.feedbackConfigurationId,
-            feedbackIdentifier: o.feedbackIdentifier,
+          a && i.current.onShow && i.current.onShow({
+            feedbackConfigurationId: a.feedbackConfigurationId,
+            feedbackIdentifier: a.feedbackIdentifier,
             timestamp: Date.now()
           });
           break;
         case "form:started":
-          o && f.current.onShow && f.current.onShow({
-            feedbackConfigurationId: o.feedbackConfigurationId,
-            feedbackIdentifier: o.feedbackIdentifier,
+          a && i.current.onShow && i.current.onShow({
+            feedbackConfigurationId: a.feedbackConfigurationId,
+            feedbackIdentifier: a.feedbackIdentifier,
             timestamp: Date.now()
           });
           break;
         case "form:section:change":
-          o && f.current.onSectionChange && f.current.onSectionChange({
-            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
-            sectionIndex: o.sectionIndex,
-            sectionId: o.sectionId,
+          a && i.current.onSectionChange && i.current.onSectionChange({
+            feedbackConfigurationId: a.feedbackConfigurationId ?? T ?? "",
+            sectionIndex: a.sectionIndex,
+            sectionId: a.sectionId,
             timestamp: Date.now()
           });
           break;
         case "form:question:answered":
-          o && f.current.onQuestionAnswered && f.current.onQuestionAnswered({
-            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
-            questionId: o.questionId,
-            questionType: o.questionType,
-            answer: o.answer,
+          a && i.current.onQuestionAnswered && i.current.onQuestionAnswered({
+            feedbackConfigurationId: a.feedbackConfigurationId ?? T ?? "",
+            questionId: a.questionId,
+            questionType: a.questionType,
+            answer: a.answer,
             timestamp: Date.now()
           });
           break;
         case "form:error":
-          o && f.current.onError && f.current.onError({
-            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
-            questionId: o.questionId,
-            error: o.error ?? "Unknown error",
+          a && i.current.onError && i.current.onError({
+            feedbackConfigurationId: a.feedbackConfigurationId ?? T ?? "",
+            questionId: a.questionId,
+            error: a.error ?? "Unknown error",
             timestamp: Date.now()
           });
           break;
       }
     };
-    return window.addEventListener("message", F), () => {
-      window.removeEventListener("message", F), y.current = !1, u.parentNode && u.parentNode.removeChild(u), v.current = null;
+    return window.addEventListener("message", x), () => {
+      window.removeEventListener("message", x), R.current = !1, l.parentNode && l.parentNode.removeChild(l), g.current = null;
     };
-  }, [h, r, R]), /* @__PURE__ */ ce.jsx(
+  }, [m, r, w]), /* @__PURE__ */ ce.jsx(
     "div",
     {
-      ref: S,
+      ref: v,
       title: "encatchPreview1",
-      style: h ? {
-        width: s ?? "100%",
-        height: a ?? "100%",
-        minHeight: 400
+      style: m ? {
+        width: "100%",
+        height: "100%"
       } : void 0
     }
   );
@@ -438,42 +429,42 @@ class ue extends EventTarget {
   /**
    * Publish an event to all matching subscribers
    */
-  publish(r, n, s) {
+  publish(r, n, o) {
     typeof window < "u" && window.dispatchEvent(
       new CustomEvent(r, {
         detail: n,
         bubbles: !0
       })
-    ), s?.usePostMessage !== !1 && this.sendPostMessage(r, n);
+    ), o?.usePostMessage !== !1 && this.sendPostMessage(r, n);
   }
   /**
    * Subscribe to form events with optional form ID filtering
    */
-  subscribe(r, n, s) {
-    const a = Symbol("subscription"), c = {
+  subscribe(r, n, o) {
+    const s = Symbol("subscription"), c = {
       eventType: r,
       handler: n,
-      filter: s?.formId,
-      id: a,
-      once: s?.once
+      filter: o?.formId,
+      id: s,
+      once: o?.once
     };
     this.subscriptions.has(r) || this.subscriptions.set(r, []), this.subscriptions.get(r).push(c);
-    const p = (w) => {
-      const h = w, R = this.getFormIdFromPayload(h.detail);
-      this.matchesFilter(R, s?.formId) && (n(h.detail), s?.once && typeof window < "u" && window.removeEventListener(r, p));
+    const m = (w) => {
+      const v = w, g = this.getFormIdFromPayload(v.detail);
+      this.matchesFilter(g, o?.formId) && (n(v.detail), o?.once && typeof window < "u" && window.removeEventListener(r, m));
     };
-    return typeof window < "u" && window.addEventListener(r, p), () => {
-      this.unsubscribe(a), typeof window < "u" && window.removeEventListener(r, p);
+    return typeof window < "u" && window.addEventListener(r, m), () => {
+      this.unsubscribe(s), typeof window < "u" && window.removeEventListener(r, m);
     };
   }
   /**
    * Unsubscribe by subscription ID
    */
   unsubscribe(r) {
-    for (const [n, s] of this.subscriptions.entries()) {
-      const a = s.findIndex((c) => c.id === r);
-      if (a !== -1) {
-        s.splice(a, 1), s.length === 0 && this.subscriptions.delete(n);
+    for (const [n, o] of this.subscriptions.entries()) {
+      const s = o.findIndex((c) => c.id === r);
+      if (s !== -1) {
+        o.splice(s, 1), o.length === 0 && this.subscriptions.delete(n);
         break;
       }
     }
@@ -482,7 +473,7 @@ class ue extends EventTarget {
    * Subscribe to all form events with optional filtering
    */
   subscribeAll(r, n) {
-    const s = [
+    const o = [
       "form:show",
       "form:started",
       "form:submit",
@@ -490,23 +481,23 @@ class ue extends EventTarget {
       "form:section:change",
       "form:question:answered",
       "form:error"
-    ], a = [];
-    return s.forEach((c) => {
-      const p = this.subscribe(
+    ], s = [];
+    return o.forEach((c) => {
+      const m = this.subscribe(
         c,
         (w) => r(c, w),
         n
       );
-      a.push(p);
+      s.push(m);
     }), () => {
-      a.forEach((c) => c());
+      s.forEach((c) => c());
     };
   }
   /**
    * Get active subscriptions count (for debugging)
    */
   getSubscriptionCount(r) {
-    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, s) => n + s.length, 0);
+    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, o) => n + o.length, 0);
   }
   /**
    * Clear all subscriptions for an event type (or all events)
@@ -515,32 +506,32 @@ class ue extends EventTarget {
     r ? this.subscriptions.delete(r) : this.subscriptions.clear();
   }
   sendPostMessage(r, n) {
-    const s = {
+    const o = {
       type: `encatch:${r}`,
       payload: n,
       source: "encatch-form-engine"
     };
-    window.parent && window.parent !== window && window.parent.postMessage(s, this.targetOrigin), document.querySelectorAll("iframe").forEach((a) => {
-      a.contentWindow && a.contentWindow.postMessage(s, this.targetOrigin);
+    window.parent && window.parent !== window && window.parent.postMessage(o, this.targetOrigin), document.querySelectorAll("iframe").forEach((s) => {
+      s.contentWindow && s.contentWindow.postMessage(o, this.targetOrigin);
     }), typeof window.ReactNativeWebView < "u" && window.ReactNativeWebView.postMessage(JSON.stringify({
       action: r.replace("form:", ""),
       data: JSON.stringify(n)
     }));
   }
 }
-const re = new ue();
-function de(i, r, n) {
-  P(() => re.subscribe(
-    i,
+const ee = new ue();
+function de(f, r, n) {
+  O(() => ee.subscribe(
+    f,
     r,
     n
-  ), [i, n?.formId, r]);
+  ), [f, n?.formId, r]);
 }
-function me(i, r) {
-  P(() => re.subscribeAll(i, r), [r?.formId, i]);
+function me(f, r) {
+  O(() => ee.subscribeAll(f, r), [r?.formId, f]);
 }
 export {
-  fe as EncatchPreview,
+  le as EncatchPreview,
   de as useEncatchFormEvent,
   me as useEncatchFormEventAll
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(k,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(k=typeof globalThis<"u"?globalThis:k||self,m(k.WsReact={},k.React))})(this,(function(k,m){"use strict";var M={exports:{}},x={};/**
+(function(g,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(g=typeof globalThis<"u"?globalThis:g||self,m(g.WsReact={},g.React))})(this,(function(g,m){"use strict";var j={exports:{}},C={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var V;function ee(){if(V)return x;V=1;var i=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(s,a,c){var w=null;if(c!==void 0&&(w=""+c),a.key!==void 0&&(w=""+a.key),"key"in a){c={};for(var h in a)h!=="key"&&(c[h]=a[h])}else c=a;return a=c.ref,{$$typeof:i,type:s,key:w,ref:a!==void 0?a:null,props:c}}return x.Fragment=r,x.jsx=n,x.jsxs=n,x}var N={};/**
+ */var $;function K(){if($)return C;$=1;var f=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,a,c){var b=null;if(c!==void 0&&(b=""+c),a.key!==void 0&&(b=""+a.key),"key"in a){c={};for(var h in a)h!=="key"&&(c[h]=a[h])}else c=a;return a=c.ref,{$$typeof:f,type:o,key:b,ref:a!==void 0?a:null,props:c}}return C.Fragment=r,C.jsx=n,C.jsxs=n,C}var O={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var U;function re(){return U||(U=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case u:return"Profiler";case F:return"StrictMode";case Y:return"Suspense";case v:return"SuspenseList";case o:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case l:return"Portal";case R:return(e.displayName||"Context")+".Provider";case d:return(e._context.displayName||"Context")+".Consumer";case D:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case P:return t=e.displayName||null,t!==null?t:i(e.type)||"Memo";case I:t=e._payload,e=e._init;try{return i(e(t))}catch{}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch{t=!0}if(t){t=console;var f=t.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(e)}}function s(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var t=i(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=W.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function w(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function f(){Q||(Q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function E(){var e=i(this.type);return X[e]||(X[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,t,f,b,S,g,q,L){return f=g.ref,e={$$typeof:O,type:e,key:t,props:g,_owner:S},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,t,f,b,S,g,q,L){var p=t.children;if(p!==void 0)if(b)if(ue(p)){for(b=0;b<p.length;b++)y(p[b]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(p);if(B.call(t,"key")){p=i(e);var j=Object.keys(t).filter(function(fe){return fe!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",K[p+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var J;function ee(){return J||(J=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case l:return"Fragment";case x:return"Profiler";case d:return"StrictMode";case S:return"Suspense";case I:return"SuspenseList";case ie:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case F:return"Portal";case M:return(e.displayName||"Context")+".Provider";case N:return(e._context.displayName||"Context")+".Consumer";case E:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case s:return t=e.displayName||null,t!==null?t:f(e.type)||"Memo";case z:t=e._payload,e=e._init;try{return f(e(t))}catch{}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch{t=!0}if(t){t=console;var u=t.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),r(e)}}function o(e){if(e===l)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===z)return"<...>";try{var t=f(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=D.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function b(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function u(){B||(B=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function k(){var e=f(this.type);return Q[e]||(Q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function y(e,t,u,p,R,v,W,q){return u=v.ref,e={$$typeof:P,type:e,key:t,props:v,_owner:R},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,t,u,p,R,v,W,q){var w=t.children;if(w!==void 0)if(p)if(ue(w)){for(p=0;p<w.length;p++)T(w[p]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(w);if(G.call(t,"key")){w=f(e);var A=Object.keys(t).filter(function(fe){return fe!=="key"});p=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Z[w+p]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,p,j,p),K[p+b]=!0)}if(p=null,f!==void 0&&(n(f),p=""+f),w(t)&&(n(t.key),p=""+t.key),"key"in t){f={};for(var J in t)J!=="key"&&(f[J]=t[J])}else f=t;return p&&h(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,p,g,S,a(),f,q,L)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===O&&e._store&&(e._store.validated=1)}var _=m,O=Symbol.for("react.transitional.element"),l=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),d=Symbol.for("react.consumer"),R=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),o=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),W=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,ue=Array.isArray,$=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var Q,X={},H=_.react_stack_bottom_frame.bind(_,c)(),Z=$(s(c)),K={};N.Fragment=C,N.jsx=function(e,t,f,b,S){var g=1e4>W.recentlyCreatedOwnerStacks++;return A(e,t,f,!1,b,S,g?Error("react-stack-top-frame"):H,g?$(s(e)):Z)},N.jsxs=function(e,t,f,b,S){var g=1e4>W.recentlyCreatedOwnerStacks++;return A(e,t,f,!0,b,S,g?Error("react-stack-top-frame"):H,g?$(s(e)):Z)}})()),N}var z;function te(){return z||(z=1,process.env.NODE_ENV==="production"?M.exports=ee():M.exports=re()),M.exports}var ne=te();const oe=({formConfig:i,formPageUrl:r,formId:n,iframeWidth:s="100%",iframeHeight:a="100%",scale:c=100,instanceId:w,onFormEvent:h})=>{const E=!!(i&&r),T=n??i?.formId??w??"preview",A=m.useRef(null),y=m.useRef(null),_=m.useRef(!1),O=m.useRef(()=>{}),l=m.useRef({});m.useEffect(()=>{if(!h)return;h({onSubmit:d=>{l.current.onSubmit=d},onShow:d=>{l.current.onShow=d},onClose:d=>{l.current.onClose=d},onSectionChange:d=>{l.current.onSectionChange=d},onQuestionAnswered:d=>{l.current.onQuestionAnswered=d},onError:d=>{l.current.onError=d}})},[h]);const C=m.useCallback(()=>{if(!y.current?.contentWindow||!i)return;const u={formId:T,...i};y.current.contentWindow.postMessage({type:"sdk:formConfig",data:u},"*")},[i,T]);O.current=C,m.useEffect(()=>{!E||!_.current||O.current()},[E,i,C]);const F=m.useCallback((u,d)=>{const R=d/100;u.style.border="none",R===1?(u.style.width="100%",u.style.height="100%",u.style.transform="",u.style.transformOrigin=""):(u.style.width=`${100/R}%`,u.style.height=`${100/R}%`,u.style.transformOrigin="0 0",u.style.transform=`scale(${R})`)},[]);return m.useEffect(()=>{!E||!y.current||F(y.current,c)},[E,i,r,c,F]),m.useEffect(()=>{if(!E||!A.current||!i||!r)return;const u=document.createElement("div");u.style.width="100%",u.style.height="100%",u.style.overflow="hidden";const d=document.createElement("iframe"),R=new URL(r,window.location.origin);R.searchParams.set("formId",T),d.src=R.toString(),d.title="Encatch form",F(d,c),y.current=d,u.appendChild(d),A.current.appendChild(u);const D=Y=>{const v=Y.data;if(!v||typeof v!="object"||!v.type)return;let P=v.type,I=v.formId,o=v.data;switch(P.startsWith("encatch:")&&(P=P.replace("encatch:",""),I=v.payload?.feedbackConfigurationId,o=v.payload),P){case"form:ready":_.current=!0,O.current();break;case"form:close":l.current.onClose?.({timestamp:Date.now()});break;case"form:complete":l.current.onClose?.({timestamp:Date.now()});break;case"form:submit":o&&l.current.onSubmit&&l.current.onSubmit({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,response:o.response,isPartialSubmit:o.isPartialSubmit,timestamp:Date.now()});break;case"form:show":o&&l.current.onShow&&l.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:started":o&&l.current.onShow&&l.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:section:change":o&&l.current.onSectionChange&&l.current.onSectionChange({feedbackConfigurationId:o.feedbackConfigurationId??I??"",sectionIndex:o.sectionIndex,sectionId:o.sectionId,timestamp:Date.now()});break;case"form:question:answered":o&&l.current.onQuestionAnswered&&l.current.onQuestionAnswered({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,questionType:o.questionType,answer:o.answer,timestamp:Date.now()});break;case"form:error":o&&l.current.onError&&l.current.onError({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,error:o.error??"Unknown error",timestamp:Date.now()});break}};return window.addEventListener("message",D),()=>{window.removeEventListener("message",D),_.current=!1,u.parentNode&&u.parentNode.removeChild(u),y.current=null}},[E,r,T]),ne.jsx("div",{ref:A,title:"encatchPreview1",style:E?{width:s??"100%",height:a??"100%",minHeight:400}:void 0})};class se extends EventTarget{subscriptions=new Map;targetOrigin="*";matchesFilter(r,n){return!n||n==="*"||n===null||n===void 0?!0:typeof n=="string"?r===n:Array.isArray(n)?n.includes(r||""):typeof n=="function"?n(r||""):!1}getFormIdFromPayload(r){return r?.feedbackConfigurationId}publish(r,n,s){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:n,bubbles:!0})),s?.usePostMessage!==!1&&this.sendPostMessage(r,n)}subscribe(r,n,s){const a=Symbol("subscription"),c={eventType:r,handler:n,filter:s?.formId,id:a,once:s?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const w=h=>{const E=h,T=this.getFormIdFromPayload(E.detail);this.matchesFilter(T,s?.formId)&&(n(E.detail),s?.once&&typeof window<"u"&&window.removeEventListener(r,w))};return typeof window<"u"&&window.addEventListener(r,w),()=>{this.unsubscribe(a),typeof window<"u"&&window.removeEventListener(r,w)}}unsubscribe(r){for(const[n,s]of this.subscriptions.entries()){const a=s.findIndex(c=>c.id===r);if(a!==-1){s.splice(a,1),s.length===0&&this.subscriptions.delete(n);break}}}subscribeAll(r,n){const s=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],a=[];return s.forEach(c=>{const w=this.subscribe(c,h=>r(c,h),n);a.push(w)}),()=>{a.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((n,s)=>n+s.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,n){const s={type:`encatch:${r}`,payload:n,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(s,this.targetOrigin),document.querySelectorAll("iframe").forEach(a=>{a.contentWindow&&a.contentWindow.postMessage(s,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(n)}))}}const G=new se;function ae(i,r,n){m.useEffect(()=>G.subscribe(i,r,n),[i,n?.formId,r])}function ie(i,r){m.useEffect(()=>G.subscribeAll(i,r),[r?.formId,i])}k.EncatchPreview=oe,k.useEncatchFormEvent=ae,k.useEncatchFormEventAll=ie,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,p,w,A,w),Z[w+p]=!0)}if(w=null,u!==void 0&&(n(u),w=""+u),b(t)&&(n(t.key),w=""+t.key),"key"in t){u={};for(var L in t)L!=="key"&&(u[L]=t[L])}else u=t;return w&&h(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),y(e,w,v,R,a(),u,W,q)}function T(e){typeof e=="object"&&e!==null&&e.$$typeof===P&&e._store&&(e._store.validated=1)}var i=m,P=Symbol.for("react.transitional.element"),F=Symbol.for("react.portal"),l=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),M=Symbol.for("react.context"),E=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),s=Symbol.for("react.memo"),z=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),D=i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Object.prototype.hasOwnProperty,ue=Array.isArray,Y=console.createTask?console.createTask:function(){return null};i={react_stack_bottom_frame:function(e){return e()}};var B,Q={},X=i.react_stack_bottom_frame.bind(i,c)(),H=Y(o(c)),Z={};O.Fragment=l,O.jsx=function(e,t,u,p,R){var v=1e4>D.recentlyCreatedOwnerStacks++;return _(e,t,u,!1,p,R,v?Error("react-stack-top-frame"):X,v?Y(o(e)):H)},O.jsxs=function(e,t,u,p,R){var v=1e4>D.recentlyCreatedOwnerStacks++;return _(e,t,u,!0,p,R,v?Error("react-stack-top-frame"):X,v?Y(o(e)):H)}})()),O}var U;function re(){return U||(U=1,process.env.NODE_ENV==="production"?j.exports=K():j.exports=ee()),j.exports}var te=re();const ne=({formConfig:f,formPageUrl:r,formId:n,scale:o=100,instanceId:a,onFormEvent:c})=>{const b=!!(f&&r),h=n??f?.formId??a??"preview",k=m.useRef(null),y=m.useRef(null),_=m.useRef(!1),T=m.useRef(()=>{}),i=m.useRef({});m.useEffect(()=>{if(!c)return;c({onSubmit:d=>{i.current.onSubmit=d},onShow:d=>{i.current.onShow=d},onClose:d=>{i.current.onClose=d},onSectionChange:d=>{i.current.onSectionChange=d},onQuestionAnswered:d=>{i.current.onQuestionAnswered=d},onError:d=>{i.current.onError=d}})},[c]);const P=m.useCallback(()=>{if(!y.current?.contentWindow||!f)return;const l={formId:h,scale:o,...f};y.current.contentWindow.postMessage({type:"sdk:formConfig",data:l},"*")},[f,h,o]);T.current=P,m.useEffect(()=>{!b||!_.current||T.current()},[b,f,P]);const F=m.useCallback(l=>{l.style.border="none",l.style.width="100%",l.style.height="100%"},[]);return m.useEffect(()=>{if(!b||!k.current||!f||!r)return;const l=document.createElement("div");l.style.width="100%",l.style.height="100%",l.style.overflow="hidden";const d=document.createElement("iframe"),x=new URL(r,window.location.origin);x.searchParams.set("formId",h),d.src=x.toString(),d.title="Encatch form",F(d),y.current=d,l.appendChild(d),k.current.appendChild(l);const N=M=>{const E=M.data;if(!E||typeof E!="object"||!E.type)return;let S=E.type,I=E.formId,s=E.data;switch(S.startsWith("encatch:")&&(S=S.replace("encatch:",""),I=E.payload?.feedbackConfigurationId,s=E.payload),S){case"form:ready":_.current=!0,T.current();break;case"form:close":i.current.onClose?.({timestamp:Date.now()});break;case"form:complete":i.current.onClose?.({timestamp:Date.now()});break;case"form:submit":s&&i.current.onSubmit&&i.current.onSubmit({feedbackConfigurationId:s.feedbackConfigurationId,feedbackIdentifier:s.feedbackIdentifier,response:s.response,isPartialSubmit:s.isPartialSubmit,timestamp:Date.now()});break;case"form:show":s&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:s.feedbackConfigurationId,feedbackIdentifier:s.feedbackIdentifier,timestamp:Date.now()});break;case"form:started":s&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:s.feedbackConfigurationId,feedbackIdentifier:s.feedbackIdentifier,timestamp:Date.now()});break;case"form:section:change":s&&i.current.onSectionChange&&i.current.onSectionChange({feedbackConfigurationId:s.feedbackConfigurationId??I??"",sectionIndex:s.sectionIndex,sectionId:s.sectionId,timestamp:Date.now()});break;case"form:question:answered":s&&i.current.onQuestionAnswered&&i.current.onQuestionAnswered({feedbackConfigurationId:s.feedbackConfigurationId??I??"",questionId:s.questionId,questionType:s.questionType,answer:s.answer,timestamp:Date.now()});break;case"form:error":s&&i.current.onError&&i.current.onError({feedbackConfigurationId:s.feedbackConfigurationId??I??"",questionId:s.questionId,error:s.error??"Unknown error",timestamp:Date.now()});break}};return window.addEventListener("message",N),()=>{window.removeEventListener("message",N),_.current=!1,l.parentNode&&l.parentNode.removeChild(l),y.current=null}},[b,r,h]),te.jsx("div",{ref:k,title:"encatchPreview1",style:b?{width:"100%",height:"100%"}:void 0})};class oe extends EventTarget{subscriptions=new Map;targetOrigin="*";matchesFilter(r,n){return!n||n==="*"||n===null||n===void 0?!0:typeof n=="string"?r===n:Array.isArray(n)?n.includes(r||""):typeof n=="function"?n(r||""):!1}getFormIdFromPayload(r){return r?.feedbackConfigurationId}publish(r,n,o){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:n,bubbles:!0})),o?.usePostMessage!==!1&&this.sendPostMessage(r,n)}subscribe(r,n,o){const a=Symbol("subscription"),c={eventType:r,handler:n,filter:o?.formId,id:a,once:o?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const b=h=>{const k=h,y=this.getFormIdFromPayload(k.detail);this.matchesFilter(y,o?.formId)&&(n(k.detail),o?.once&&typeof window<"u"&&window.removeEventListener(r,b))};return typeof window<"u"&&window.addEventListener(r,b),()=>{this.unsubscribe(a),typeof window<"u"&&window.removeEventListener(r,b)}}unsubscribe(r){for(const[n,o]of this.subscriptions.entries()){const a=o.findIndex(c=>c.id===r);if(a!==-1){o.splice(a,1),o.length===0&&this.subscriptions.delete(n);break}}}subscribeAll(r,n){const o=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],a=[];return o.forEach(c=>{const b=this.subscribe(c,h=>r(c,h),n);a.push(b)}),()=>{a.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((n,o)=>n+o.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,n){const o={type:`encatch:${r}`,payload:n,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(o,this.targetOrigin),document.querySelectorAll("iframe").forEach(a=>{a.contentWindow&&a.contentWindow.postMessage(o,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(n)}))}}const V=new oe;function se(f,r,n){m.useEffect(()=>V.subscribe(f,r,n),[f,n?.formId,r])}function ae(f,r){m.useEffect(()=>V.subscribeAll(f,r),[r?.formId,f])}g.EncatchPreview=ne,g.useEncatchFormEvent=se,g.useEncatchFormEventAll=ae,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@encatch/ws-react",
-  "version": "0.0.50-beta.4",
+  "version": "0.0.50-beta.6",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",