@encatch/ws-react 0.0.49 → 0.0.50-beta.0

package/README.md

@@ -97,9 +97,9 @@ function App() {
       console.log('Form submitted:', data);
     });
 
-    // Called when form is viewed/opened
-    formEvent.onView((data) => {
-      console.log('Form viewed:', data);
+    // Called when form is shown/displayed
+    formEvent.onShow((data) => {
+      console.log('Form shown:', data);
     });
 
     // Called when form is closed
@@ -155,8 +155,8 @@ function MyComponent() {
   }, { formId: 'my-form-instance-1' });
 
   // Subscribe once (unsubscribe after first event)
-  useEncatchFormEvent('form:view', (payload) => {
-    console.log('Form viewed:', payload);
+  useEncatchFormEvent('form:show', (payload) => {
+    console.log('Form shown:', payload);
   }, { formId: 'my-form-instance-1', once: true });
 
   return <div>Your component</div>;
@@ -166,7 +166,7 @@ function MyComponent() {
 #### Available Event Types
 
 - `form:submit` - Form submission event
-- `form:view` - Form viewed/opened event
+- `form:show` - Form shown/displayed event
 - `form:close` - Form closed event
 - `form:section:change` - Section navigation event
 - `form:question:answered` - Question answered event
@@ -207,7 +207,7 @@ import type {
   FormEventBuilder,
   OnFormEventHandler,
   OnSubmitCallback,
-  OnViewCallback,
+  OnShowCallback,
   OnCloseCallback,
   OnSectionChangeCallback,
   OnQuestionAnsweredCallback,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { EncatchPreview } from "./EncatchPreview";
 export { useEncatchFormEvent, useEncatchFormEventAll } from "./useEncatchFormEvent";
 export type { FormEventType, FormEventPayload, SubscriptionOptions, FormIdFilter, } from "./useEncatchFormEvent";
-export type { FormEventBuilder, OnFormEventHandler, OnSubmitCallback, OnViewCallback, OnCloseCallback, OnSectionChangeCallback, OnQuestionAnsweredCallback, OnErrorCallback, } from "./types";
+export type { FormEventBuilder, OnFormEventHandler, OnSubmitCallback, OnShowCallback, OnCloseCallback, OnSectionChangeCallback, OnQuestionAnsweredCallback, OnErrorCallback, } from "./types";

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import I, { useState as V, useRef as oe, useEffect as S, useCallback as se } from "react";
+import I, { useState as U, useRef as oe, useEffect as S, useCallback as se } from "react";
 var A = { exports: {} }, P = {};
 /**
  * @license React
@@ -9,10 +9,10 @@ var A = { exports: {} }, P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var U;
+var J;
 function ie() {
-  if (U) return P;
-  U = 1;
+  if (J) return P;
+  J = 1;
   var o = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
   function t(u, s, c) {
     var m = null;
@@ -41,9 +41,9 @@ var k = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
+var V;
 function ue() {
-  return J || (J = 1, process.env.NODE_ENV !== "production" && (function() {
+  return V || (V = 1, process.env.NODE_ENV !== "production" && (function() {
     function o(e) {
       if (e == null) return null;
       if (typeof e == "function")
@@ -150,12 +150,12 @@ function ue() {
         "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, n, l, d, w, E, x, j) {
-      return l = E.ref, e = {
+    function T(e, n, l, d, w, h, x, j) {
+      return l = h.ref, e = {
         $$typeof: y,
         type: e,
         key: n,
-        props: E,
+        props: h,
         _owner: w
       }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
@@ -182,19 +182,19 @@ function ue() {
         value: j
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function h(e, n, l, d, w, E, x, j) {
+    function E(e, n, l, d, w, h, x, j) {
       var b = n.children;
       if (b !== void 0)
         if (d)
           if (te(b)) {
             for (d = 0; d < b.length; d++)
-              g(b[d]);
+              v(b[d]);
             Object.freeze && Object.freeze(b);
           } 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 g(b);
+        else v(b);
       if (F.call(n, "key")) {
         b = o(e);
         var _ = Object.keys(n).filter(function(ne) {
@@ -224,7 +224,7 @@ React keys must be passed directly to JSX without using spread:
       ), T(
         e,
         b,
-        E,
+        h,
         w,
         s(),
         l,
@@ -232,7 +232,7 @@ React keys must be passed directly to JSX without using spread:
         j
       );
     }
-    function g(e) {
+    function v(e) {
       typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
     }
     var a = I, y = Symbol.for("react.transitional.element"), i = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), G = Symbol.for("react.strict_mode"), Q = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), K = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), C = a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, te = Array.isArray, O = console.createTask ? console.createTask : function() {
@@ -248,28 +248,28 @@ React keys must be passed directly to JSX without using spread:
       c
     )(), $ = O(u(c)), q = {};
     k.Fragment = f, k.jsx = function(e, n, l, d, w) {
-      var E = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return h(
+      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return E(
         e,
         n,
         l,
         !1,
         d,
         w,
-        E ? Error("react-stack-top-frame") : W,
-        E ? O(u(e)) : $
+        h ? Error("react-stack-top-frame") : W,
+        h ? O(u(e)) : $
       );
     }, k.jsxs = function(e, n, l, d, w) {
-      var E = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return h(
+      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return E(
         e,
         n,
         l,
         !0,
         d,
         w,
-        E ? Error("react-stack-top-frame") : W,
-        E ? O(u(e)) : $
+        h ? Error("react-stack-top-frame") : W,
+        h ? O(u(e)) : $
       );
     };
   })()), k;
@@ -342,7 +342,8 @@ class le extends EventTarget {
    */
   subscribeAll(r, t) {
     const u = [
-      "form:view",
+      "form:show",
+      "form:started",
       "form:submit",
       "form:close",
       "form:section:change",
@@ -386,7 +387,7 @@ class le extends EventTarget {
     }));
   }
 }
-const v = new le(), de = ({
+const g = new le(), de = ({
   formData: o,
   cssLink: r,
   scale: t = 100,
@@ -394,7 +395,7 @@ const v = new le(), de = ({
   instanceId: s,
   onFormEvent: c
 }) => {
-  const [m, p] = V(!1), [R, T] = V(!0), h = I.useRef(null), g = I.useRef(
+  const [m, p] = U(!1), [R, T] = U(!0), E = I.useRef(null), v = I.useRef(
     null
   ), a = oe({});
   S(() => {
@@ -403,8 +404,8 @@ const v = new le(), de = ({
       onSubmit: (f) => {
         a.current.onSubmit = f;
       },
-      onView: (f) => {
-        a.current.onView = f;
+      onShow: (f) => {
+        a.current.onShow = f;
       },
       onClose: (f) => {
         a.current.onClose = f;
@@ -423,37 +424,37 @@ const v = new le(), de = ({
     if (!s) return;
     const i = [];
     return a.current.onSubmit && i.push(
-      v.subscribe(
+      g.subscribe(
         "form:submit",
         a.current.onSubmit,
         { formId: s }
       )
-    ), a.current.onView && i.push(
-      v.subscribe(
-        "form:view",
-        a.current.onView,
+    ), a.current.onShow && i.push(
+      g.subscribe(
+        "form:show",
+        a.current.onShow,
         { formId: s }
       )
     ), a.current.onClose && i.push(
-      v.subscribe(
+      g.subscribe(
         "form:close",
         a.current.onClose,
         { formId: s }
       )
     ), a.current.onSectionChange && i.push(
-      v.subscribe(
+      g.subscribe(
         "form:section:change",
         a.current.onSectionChange,
         { formId: s }
       )
     ), a.current.onQuestionAnswered && i.push(
-      v.subscribe(
+      g.subscribe(
         "form:question:answered",
         a.current.onQuestionAnswered,
         { formId: s }
       )
     ), a.current.onError && i.push(
-      v.subscribe(
+      g.subscribe(
         "form:error",
         a.current.onError,
         { formId: s }
@@ -476,23 +477,23 @@ const v = new le(), de = ({
     o.onClose && o.onClose(), T(!1);
   }, [o.onClose]);
   return S(() => {
-    if (!m || !h.current)
+    if (!m || !E.current)
       return;
     const i = document.createElement("encatch-app");
-    return i.theme = o.theme, i.currentMode = o.currentMode, i.currentLanguage = o.currentLanguage, i.questions = o.questions, i.questionLanguages = o.questionLanguages, i.otherConfigurationProperties = o.otherConfigurationProperties, i.welcomeScreenProperties = o.welcomeScreenProperties, i.endScreenProperties = o.endScreenProperties, i.translations = o.translations, i.sections = o.sections, i.themeSettings = o.themeSettings, i.onClose = y, i.onSectionChange = o.onSectionChange, i.apiKey = o.apiKey, i.hostUrl = o.hostUrl, i.feedbackConfigId = o.feedbackConfigId, i.identifier = o.identifier, r && (i.cssLink = r), i.scale = t, i.persistMode = u, s && (i.instanceId = s), g.current = i, h.current.appendChild(i), () => {
-      h.current && g.current && h.current.removeChild(g.current), g.current = null;
+    return i.theme = o.theme, i.currentMode = o.currentMode, i.currentLanguage = o.currentLanguage, i.questions = o.questions, i.questionLanguages = o.questionLanguages, i.otherConfigurationProperties = o.otherConfigurationProperties, i.welcomeScreenProperties = o.welcomeScreenProperties, i.endScreenProperties = o.endScreenProperties, i.translations = o.translations, i.sections = o.sections, i.themeSettings = o.themeSettings, i.onClose = y, i.onSectionChange = o.onSectionChange, i.apiKey = o.apiKey, i.hostUrl = o.hostUrl, i.feedbackConfigId = o.feedbackConfigId, i.identifier = o.identifier, r && (i.cssLink = r), i.scale = t, i.persistMode = u, s && (i.instanceId = s), v.current = i, E.current.appendChild(i), () => {
+      E.current && v.current && E.current.removeChild(v.current), v.current = null;
     };
-  }, [m, o, r, t, y, u, s]), R ? /* @__PURE__ */ ae.jsx("div", { ref: h }) : null;
+  }, [m, o, r, t, y, u, s]), R ? /* @__PURE__ */ ae.jsx("div", { ref: E }) : null;
 };
 function be(o, r, t) {
-  S(() => v.subscribe(
+  S(() => g.subscribe(
     o,
     r,
     t
   ), [o, t?.formId, r]);
 }
 function me(o, r) {
-  S(() => v.subscribeAll(o, r), [r?.formId, o]);
+  S(() => g.subscribeAll(o, r), [r?.formId, o]);
 }
 export {
   de as EncatchPreview,

package/dist/index.umd.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 M;function z(){if(M)return y;M=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(u,s,c){var E=null;if(c!==void 0&&(E=""+c),s.key!==void 0&&(E=""+s.key),"key"in s){c={};for(var p in s)p!=="key"&&(c[p]=s[p])}else c=s;return s=c.ref,{$$typeof:o,type:u,key:E,ref:s!==void 0?s:null,props:c}}return y.Fragment=r,y.jsx=n,y.jsxs=n,y}var P={};/**
+ */var M;function z(){if(M)return y;M=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(u,s,c){var E=null;if(c!==void 0&&(E=""+c),s.key!==void 0&&(E=""+s.key),"key"in s){c={};for(var h in s)h!=="key"&&(c[h]=s[h])}else c=s;return s=c.ref,{$$typeof:o,type:u,key:E,ref:s!==void 0?s:null,props:c}}return y.Fragment=r,y.jsx=t,y.jsxs=t,y}var P={};/**
  * @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 F;function G(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function o(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 f:return"Fragment";case ee:return"Profiler";case D:return"StrictMode";case oe:return"Suspense";case se:return"SuspenseList";case ue: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 i:return"Portal";case ne:return(e.displayName||"Context")+".Provider";case re:return(e._context.displayName||"Context")+".Consumer";case te:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return t=e.displayName||null,t!==null?t:o(e.type)||"Memo";case L:t=e._payload,e=e._init;try{return o(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 l=t.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.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 u(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var t=o(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=O.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function E(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function p(e,t){function l(){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))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function S(){var e=o(this.type);return $[e]||($[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 A(e,t,l,b,_,h,x,N){return l=h.ref,e={$$typeof:k,type:e,key:t,props:h,_owner:_},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:S}):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:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,t,l,b,_,h,x,N){var m=t.children;if(m!==void 0)if(b)if(ae(m)){for(b=0;b<m.length;b++)R(m[b]);Object.freeze&&Object.freeze(m)}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 R(m);if(W.call(t,"key")){m=o(e);var T=Object.keys(t).filter(function(le){return le!=="key"});b=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",J[m+b]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var F;function G(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function o(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 f:return"Fragment";case ee:return"Profiler";case D:return"StrictMode";case oe:return"Suspense";case se:return"SuspenseList";case ue: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 i:return"Portal";case te:return(e.displayName||"Context")+".Provider";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return n=e.displayName||null,n!==null?n:o(e.type)||"Memo";case L:n=e._payload,e=e._init;try{return o(e(n))}catch{}}return null}function r(e){return""+e}function t(e){try{r(e);var n=!1}catch{n=!0}if(n){n=console;var l=n.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(e)}}function u(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var n=o(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function s(){var e=O.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function E(e){if(W.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function h(e,n){function l(){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)",n))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function R(){var e=o(this.type);return $[e]||($[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 A(e,n,l,b,S,p,x,N){return l=p.ref,e={$$typeof:k,type:e,key:n,props:p,_owner:S},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,n,l,b,S,p,x,N){var m=n.children;if(m!==void 0)if(b)if(ae(m)){for(b=0;b<m.length;b++)_(m[b]);Object.freeze&&Object.freeze(m)}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 _(m);if(W.call(n,"key")){m=o(e);var T=Object.keys(n).filter(function(le){return le!=="key"});b=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",V[m+b]||(T=0<T.length?"{"+T.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,m,T,m),J[m+b]=!0)}if(m=null,l!==void 0&&(n(l),m=""+l),E(t)&&(n(t.key),m=""+t.key),"key"in t){l={};for(var I in t)I!=="key"&&(l[I]=t[I])}else l=t;return m&&p(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,m,h,_,s(),l,x,N)}function R(e){typeof e=="object"&&e!==null&&e.$$typeof===k&&e._store&&(e._store.validated=1)}var a=d,k=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),ne=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),O=a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,ae=Array.isArray,j=console.createTask?console.createTask:function(){return null};a={react_stack_bottom_frame:function(e){return e()}};var q,$={},V=a.react_stack_bottom_frame.bind(a,c)(),U=j(u(c)),J={};P.Fragment=f,P.jsx=function(e,t,l,b,_){var h=1e4>O.recentlyCreatedOwnerStacks++;return g(e,t,l,!1,b,_,h?Error("react-stack-top-frame"):V,h?j(u(e)):U)},P.jsxs=function(e,t,l,b,_){var h=1e4>O.recentlyCreatedOwnerStacks++;return g(e,t,l,!0,b,_,h?Error("react-stack-top-frame"):V,h?j(u(e)):U)}})()),P}var Y;function Q(){return Y||(Y=1,process.env.NODE_ENV==="production"?C.exports=z():C.exports=G()),C.exports}var X=Q();class B 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,u){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:n,bubbles:!0})),u?.usePostMessage!==!1&&this.sendPostMessage(r,n)}subscribe(r,n,u){const s=Symbol("subscription"),c={eventType:r,handler:n,filter:u?.formId,id:s,once:u?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const E=p=>{const S=p,A=this.getFormIdFromPayload(S.detail);this.matchesFilter(A,u?.formId)&&(n(S.detail),u?.once&&typeof window<"u"&&window.removeEventListener(r,E))};return typeof window<"u"&&window.addEventListener(r,E),()=>{this.unsubscribe(s),typeof window<"u"&&window.removeEventListener(r,E)}}unsubscribe(r){for(const[n,u]of this.subscriptions.entries()){const s=u.findIndex(c=>c.id===r);if(s!==-1){u.splice(s,1),u.length===0&&this.subscriptions.delete(n);break}}}subscribeAll(r,n){const u=["form:view","form:submit","form:close","form:section:change","form:question:answered","form:error"],s=[];return u.forEach(c=>{const E=this.subscribe(c,p=>r(c,p),n);s.push(E)}),()=>{s.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((n,u)=>n+u.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,n){const u={type:`encatch:${r}`,payload:n,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(u,this.targetOrigin),document.querySelectorAll("iframe").forEach(s=>{s.contentWindow&&s.contentWindow.postMessage(u,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(n)}))}}const v=new B,H=({formData:o,cssLink:r,scale:n=100,persistMode:u="none",instanceId:s,onFormEvent:c})=>{const[E,p]=d.useState(!1),[S,A]=d.useState(!0),g=d.useRef(null),R=d.useRef(null),a=d.useRef({});d.useEffect(()=>{if(!c)return;c({onSubmit:f=>{a.current.onSubmit=f},onView:f=>{a.current.onView=f},onClose:f=>{a.current.onClose=f},onSectionChange:f=>{a.current.onSectionChange=f},onQuestionAnswered:f=>{a.current.onQuestionAnswered=f},onError:f=>{a.current.onError=f}})},[c]),d.useEffect(()=>{if(!s)return;const i=[];return a.current.onSubmit&&i.push(v.subscribe("form:submit",a.current.onSubmit,{formId:s})),a.current.onView&&i.push(v.subscribe("form:view",a.current.onView,{formId:s})),a.current.onClose&&i.push(v.subscribe("form:close",a.current.onClose,{formId:s})),a.current.onSectionChange&&i.push(v.subscribe("form:section:change",a.current.onSectionChange,{formId:s})),a.current.onQuestionAnswered&&i.push(v.subscribe("form:question:answered",a.current.onQuestionAnswered,{formId:s})),a.current.onError&&i.push(v.subscribe("form:error",a.current.onError,{formId:s})),()=>{i.forEach(f=>f())}},[s]),d.useEffect(()=>{(()=>{try{return o?!0:(console.warn("[EncatchPreview] formData is not defined"),!1)}catch(f){return console.error("[EncatchPreview] Error during data validation:",f),!1}})()?p(!0):console.warn("[EncatchPreview] Data validation failed, retrying in 100ms...")},[o]);const k=d.useCallback(()=>{o.onClose&&o.onClose(),A(!1)},[o.onClose]);return d.useEffect(()=>{if(!E||!g.current)return;const i=document.createElement("encatch-app");return i.theme=o.theme,i.currentMode=o.currentMode,i.currentLanguage=o.currentLanguage,i.questions=o.questions,i.questionLanguages=o.questionLanguages,i.otherConfigurationProperties=o.otherConfigurationProperties,i.welcomeScreenProperties=o.welcomeScreenProperties,i.endScreenProperties=o.endScreenProperties,i.translations=o.translations,i.sections=o.sections,i.themeSettings=o.themeSettings,i.onClose=k,i.onSectionChange=o.onSectionChange,i.apiKey=o.apiKey,i.hostUrl=o.hostUrl,i.feedbackConfigId=o.feedbackConfigId,i.identifier=o.identifier,r&&(i.cssLink=r),i.scale=n,i.persistMode=u,s&&(i.instanceId=s),R.current=i,g.current.appendChild(i),()=>{g.current&&R.current&&g.current.removeChild(R.current),R.current=null}},[E,o,r,n,k,u,s]),S?X.jsx("div",{ref:g}):null};function Z(o,r,n){d.useEffect(()=>v.subscribe(o,r,n),[o,n?.formId,r])}function K(o,r){d.useEffect(()=>v.subscribeAll(o,r),[r?.formId,o])}w.EncatchPreview=H,w.useEncatchFormEvent=Z,w.useEncatchFormEventAll=K,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,m,T,m),V[m+b]=!0)}if(m=null,l!==void 0&&(t(l),m=""+l),E(n)&&(t(n.key),m=""+n.key),"key"in n){l={};for(var I in n)I!=="key"&&(l[I]=n[I])}else l=n;return m&&h(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,m,p,S,s(),l,x,N)}function _(e){typeof e=="object"&&e!==null&&e.$$typeof===k&&e._store&&(e._store.validated=1)}var a=d,k=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),O=a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,ae=Array.isArray,j=console.createTask?console.createTask:function(){return null};a={react_stack_bottom_frame:function(e){return e()}};var q,$={},U=a.react_stack_bottom_frame.bind(a,c)(),J=j(u(c)),V={};P.Fragment=f,P.jsx=function(e,n,l,b,S){var p=1e4>O.recentlyCreatedOwnerStacks++;return g(e,n,l,!1,b,S,p?Error("react-stack-top-frame"):U,p?j(u(e)):J)},P.jsxs=function(e,n,l,b,S){var p=1e4>O.recentlyCreatedOwnerStacks++;return g(e,n,l,!0,b,S,p?Error("react-stack-top-frame"):U,p?j(u(e)):J)}})()),P}var Y;function Q(){return Y||(Y=1,process.env.NODE_ENV==="production"?C.exports=z():C.exports=G()),C.exports}var X=Q();class B extends EventTarget{subscriptions=new Map;targetOrigin="*";matchesFilter(r,t){return!t||t==="*"||t===null||t===void 0?!0:typeof t=="string"?r===t:Array.isArray(t)?t.includes(r||""):typeof t=="function"?t(r||""):!1}getFormIdFromPayload(r){return r?.feedbackConfigurationId}publish(r,t,u){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:t,bubbles:!0})),u?.usePostMessage!==!1&&this.sendPostMessage(r,t)}subscribe(r,t,u){const s=Symbol("subscription"),c={eventType:r,handler:t,filter:u?.formId,id:s,once:u?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const E=h=>{const R=h,A=this.getFormIdFromPayload(R.detail);this.matchesFilter(A,u?.formId)&&(t(R.detail),u?.once&&typeof window<"u"&&window.removeEventListener(r,E))};return typeof window<"u"&&window.addEventListener(r,E),()=>{this.unsubscribe(s),typeof window<"u"&&window.removeEventListener(r,E)}}unsubscribe(r){for(const[t,u]of this.subscriptions.entries()){const s=u.findIndex(c=>c.id===r);if(s!==-1){u.splice(s,1),u.length===0&&this.subscriptions.delete(t);break}}}subscribeAll(r,t){const u=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],s=[];return u.forEach(c=>{const E=this.subscribe(c,h=>r(c,h),t);s.push(E)}),()=>{s.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((t,u)=>t+u.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,t){const u={type:`encatch:${r}`,payload:t,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(u,this.targetOrigin),document.querySelectorAll("iframe").forEach(s=>{s.contentWindow&&s.contentWindow.postMessage(u,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(t)}))}}const v=new B,H=({formData:o,cssLink:r,scale:t=100,persistMode:u="none",instanceId:s,onFormEvent:c})=>{const[E,h]=d.useState(!1),[R,A]=d.useState(!0),g=d.useRef(null),_=d.useRef(null),a=d.useRef({});d.useEffect(()=>{if(!c)return;c({onSubmit:f=>{a.current.onSubmit=f},onShow:f=>{a.current.onShow=f},onClose:f=>{a.current.onClose=f},onSectionChange:f=>{a.current.onSectionChange=f},onQuestionAnswered:f=>{a.current.onQuestionAnswered=f},onError:f=>{a.current.onError=f}})},[c]),d.useEffect(()=>{if(!s)return;const i=[];return a.current.onSubmit&&i.push(v.subscribe("form:submit",a.current.onSubmit,{formId:s})),a.current.onShow&&i.push(v.subscribe("form:show",a.current.onShow,{formId:s})),a.current.onClose&&i.push(v.subscribe("form:close",a.current.onClose,{formId:s})),a.current.onSectionChange&&i.push(v.subscribe("form:section:change",a.current.onSectionChange,{formId:s})),a.current.onQuestionAnswered&&i.push(v.subscribe("form:question:answered",a.current.onQuestionAnswered,{formId:s})),a.current.onError&&i.push(v.subscribe("form:error",a.current.onError,{formId:s})),()=>{i.forEach(f=>f())}},[s]),d.useEffect(()=>{(()=>{try{return o?!0:(console.warn("[EncatchPreview] formData is not defined"),!1)}catch(f){return console.error("[EncatchPreview] Error during data validation:",f),!1}})()?h(!0):console.warn("[EncatchPreview] Data validation failed, retrying in 100ms...")},[o]);const k=d.useCallback(()=>{o.onClose&&o.onClose(),A(!1)},[o.onClose]);return d.useEffect(()=>{if(!E||!g.current)return;const i=document.createElement("encatch-app");return i.theme=o.theme,i.currentMode=o.currentMode,i.currentLanguage=o.currentLanguage,i.questions=o.questions,i.questionLanguages=o.questionLanguages,i.otherConfigurationProperties=o.otherConfigurationProperties,i.welcomeScreenProperties=o.welcomeScreenProperties,i.endScreenProperties=o.endScreenProperties,i.translations=o.translations,i.sections=o.sections,i.themeSettings=o.themeSettings,i.onClose=k,i.onSectionChange=o.onSectionChange,i.apiKey=o.apiKey,i.hostUrl=o.hostUrl,i.feedbackConfigId=o.feedbackConfigId,i.identifier=o.identifier,r&&(i.cssLink=r),i.scale=t,i.persistMode=u,s&&(i.instanceId=s),_.current=i,g.current.appendChild(i),()=>{g.current&&_.current&&g.current.removeChild(_.current),_.current=null}},[E,o,r,t,k,u,s]),R?X.jsx("div",{ref:g}):null};function Z(o,r,t){d.useEffect(()=>v.subscribe(o,r,t),[o,t?.formId,r])}function K(o,r){d.useEffect(()=>v.subscribeAll(o,r),[r?.formId,o])}w.EncatchPreview=H,w.useEncatchFormEvent=Z,w.useEncatchFormEventAll=K,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -4,9 +4,9 @@ import type { FormEventPayload } from '@encatch/event-publisher';
  */
 export type OnSubmitCallback = (payload: FormEventPayload['form:submit']) => void;
 /**
- * Callback function for form view events
+ * Callback function for form show events
  */
-export type OnViewCallback = (payload: FormEventPayload['form:view']) => void;
+export type OnShowCallback = (payload: FormEventPayload['form:show']) => void;
 /**
  * Callback function for form close events
  */
@@ -56,10 +56,10 @@ export interface FormEventBuilder {
      */
     onSubmit: (callback: OnSubmitCallback) => void;
     /**
-     * Register a callback for when form is viewed/opened
-     * @param callback - Function to call when form is viewed
+     * Register a callback for when form is shown/displayed
+     * @param callback - Function to call when form is shown
      */
-    onView: (callback: OnViewCallback) => void;
+    onShow: (callback: OnShowCallback) => void;
     /**
      * Register a callback for when form is closed
      * @param callback - Function to call when form is closed

package/dist/useEncatchFormEvent.d.ts

@@ -15,8 +15,8 @@ import { type FormEventType, type FormEventPayload, type SubscriptionOptions } f
  * }, { formId: 'my-form-instance-1' });
  *
  * // Subscribe once
- * useEncatchFormEvent('form:view', (payload) => {
- *   console.log('Form viewed:', payload);
+ * useEncatchFormEvent('form:show', (payload) => {
+ *   console.log('Form shown:', payload);
  * }, { formId: 'my-form-instance-1', once: true });
  * ```
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@encatch/ws-react",
-  "version": "0.0.49",
+  "version": "0.0.50-beta.0",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -20,8 +20,8 @@
     "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@encatch/schema": "0.1.38",
-    "@encatch/event-publisher": "0.0.2"
+    "@encatch/schema": "1.0.0-beta.0",
+    "@encatch/event-publisher": "1.0.0-beta.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",