@machinemetrics/mm-react-embeddable 1.3.0-2 → 1.3.0

package/dist/mm-react-embeddable.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),p=require("prop-types"),O=require("styled-components"),P=e.createContext(null),j=({children:r})=>{const[u,d]=e.useState({}),[i,E]=e.useState({}),c=e.useRef({}),b=e.useRef({}),m=e.useRef({}),h=e.useCallback((n,s)=>{var t;return!!((t=m.current[n])!=null&&t.has(s))},[]),S=e.useCallback((n,s,t)=>{d(o=>({...o,[n]:{origin:s,frameRef:t}}))},[]),R=e.useCallback(n=>{d(s=>{const t={...s};return delete t[n],t}),E(s=>{const t={...s};return delete t[n],t}),delete m.current[n]},[]);e.useEffect(()=>{const n=(t=[],o)=>{t.forEach(a=>a(o))},s=t=>{var M,w,f,T,x;if(!((M=t==null?void 0:t.data)!=null&&M.instanceId))return;const{instanceId:o,type:a}=t.data,l=c.current;if(a==="response"){const{callbackId:F,response:H,error:z}=t.data,U=b.current[F];U&&(U(H,z),delete b.current[F]);return}if(a==="mark-registered"){const{requestType:F}=t.data;m.current[o]||(m.current[o]=new Set),m.current[o].add(F);return}a==="ready"&&E(F=>({...F,[o]:!0})),n((w=l[o])==null?void 0:w[a],t.data),n((f=l["*"])==null?void 0:f[a],t.data),n((T=l[o])==null?void 0:T["*"],t.data),n((x=l["*"])==null?void 0:x["*"],t.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const g=e.useCallback((n,s,t)=>{var a,l;const o=u[n];if(!o){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}(l=(a=o==null?void 0:o.frameRef)==null?void 0:a.current)!=null&&l.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...t,instanceId:n},o.origin)},[u]),k=e.useRef(0),y=e.useCallback(()=>`${Date.now()}-${++k.current}`,[]),L=e.useCallback(async(n,s,t={})=>new Promise((o,a)=>{const l=y(),M=(w,f)=>{delete b.current[l],f?a(f):o(w)};b.current[l]=M,g(n,"request",{callbackId:l,requestType:s,data:t})}),[g]),C=e.useCallback((n,s)=>{g(n,"load-options",s)},[g]),Z=e.useCallback((n,s)=>{g(n,"validate",s)},[g]),$=e.useMemo(()=>({registerFrame:S,unregisterFrame:R,sendMessage:g,sendRequest:L,loadOptions:C,validate:Z,hasHandler:h,readyFrames:i,addListener:(n,s,t)=>(c.current[n]||(c.current[n]={}),c.current[n][s]||(c.current[n][s]=[]),c.current[n][s].push(t),()=>{c.current[n][s]=c.current[n][s].filter(o=>o!==t)})}),[S,R,g,L,C,Z,h,i]);return e.createElement(P.Provider,{value:$},r)},q={},v=async r=>{try{const u=new URL(r).origin;if(q[u]!==void 0)return q[u];const i=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!i.version)throw new Error("Invalid manifest");return q[u]=i,i}catch{}return q[origin]=!1,!1},W=async r=>!!await v(r),I=(r,u,d)=>{const i=e.useContext(P);if(i===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const E=e.useRef(d);e.useEffect(()=>{E.current=d},[d]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const c=u.substring(4);return i.readyFrames[r]&&i.sendMessage(r,"subscribe-key",{keyChord:c}),i.addListener(r,`key-pressed:${c}`,(...m)=>E.current(...m))}return i.addListener(r,u,(...c)=>E.current(...c))}},[i,r,u])};j.propTypes={children:p.node.isRequired};const B=O.default||O,D=B.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),C=require("prop-types"),O=require("styled-components"),q=e.createContext(null),W=({children:r})=>{const[u,d]=e.useState({}),[i,R]=e.useState({}),c=e.useRef({}),f=e.useRef({}),b=e.useRef({}),T=e.useCallback((t,s)=>{var n;return!!((n=b.current[t])!=null&&n.has(s))},[]),w=e.useCallback((t,s,n)=>{d(o=>({...o,[t]:{origin:s,frameRef:n}}))},[]),h=e.useCallback(t=>{d(s=>{const n={...s};return delete n[t],n}),R(s=>{const n={...s};return delete n[t],n}),delete b.current[t]},[]);e.useEffect(()=>{const t=(n=[],o)=>{n.forEach(a=>a(o))},s=n=>{var $,y,E,m,k;if(!(($=n==null?void 0:n.data)!=null&&$.instanceId))return;const{instanceId:o,type:a}=n.data,l=c.current;if(a==="response"){const{callbackId:I,response:_,error:H}=n.data,U=f.current[I];U&&(U(_,H),delete f.current[I]);return}if(a==="mark-registered"){const{requestType:I}=n.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(I);return}a==="ready"&&R(I=>({...I,[o]:!0})),t((y=l[o])==null?void 0:y[a],n.data),t((E=l["*"])==null?void 0:E[a],n.data),t((m=l[o])==null?void 0:m["*"],n.data),t((k=l["*"])==null?void 0:k["*"],n.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const g=e.useCallback((t,s,n)=>{var a,l;const o=u[t];if(!o){console.warn(`Origin not set for id: ${t}. Unable to send message.`);return}(l=(a=o==null?void 0:o.frameRef)==null?void 0:a.current)!=null&&l.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...n,instanceId:t},o.origin)},[u]),M=e.useRef(0),P=e.useCallback(()=>`${Date.now()}-${++M.current}`,[]),F=e.useCallback(async(t,s,n={})=>new Promise((o,a)=>{const l=P(),$=(y,E)=>{delete f.current[l],E?a(E):o(y)};f.current[l]=$,g(t,"request",{callbackId:l,requestType:s,data:n})}),[g]),L=e.useCallback((t,s)=>{g(t,"load-options",s)},[g]),p=e.useCallback((t,s)=>{g(t,"validate",s)},[g]),x=e.useMemo(()=>({registerFrame:w,unregisterFrame:h,sendMessage:g,sendRequest:F,loadOptions:L,validate:p,hasHandler:T,readyFrames:i,addListener:(t,s,n)=>(c.current[t]||(c.current[t]={}),c.current[t][s]||(c.current[t][s]=[]),c.current[t][s].push(n),()=>{c.current[t][s]=c.current[t][s].filter(o=>o!==n)})}),[w,h,g,F,L,p,T,i]);return e.createElement(q.Provider,{value:x},r)},Z={},j=async r=>{try{const u=new URL(r).origin;if(Z[u]!==void 0)return Z[u];const i=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!i.version)throw new Error("Invalid manifest");return Z[u]=i,i}catch{}return Z[origin]=!1,!1},v=async r=>!!await j(r),S=(r,u,d)=>{const i=e.useContext(q);if(i===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const R=e.useRef(d);e.useEffect(()=>{R.current=d},[d]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const c=u.substring(4);return i.readyFrames[r]&&i.sendMessage(r,"subscribe-key",{keyChord:c}),i.addListener(r,`key-pressed:${c}`,(...b)=>R.current(...b))}return i.addListener(r,u,(...c)=>R.current(...c))}},[i,r,u])};W.propTypes={children:C.node.isRequired};const z=O.default||O,B=1e4,D=z.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${r=>r.$isReady?"visible":"hidden"};
-`,A=({id:r,src:u,path:d,onInit:i=()=>{},onTimeout:E,context:c={},params:b={},skipManifestCheck:m=!1,readyTimeout:h=5e3,...S})=>{if("isConfiguring"in S)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in c)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in c)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const R=e.useRef(),[g,k]=e.useState(),[y,L]=e.useState(0),{registerFrame:C,unregisterFrame:Z,sendMessage:$}=e.useContext(P),[n,s]=e.useState(!0),[t,o]=e.useState(),a=e.useRef(),l=e.useRef(E);e.useEffect(()=>{l.current=E},[E]),e.useEffect(()=>{y&&$(r,"set-context",{context:{...c,colorMode:b.colorMode,isFullScreen:b.isFullScreen}})},[c,b.colorMode,b.isFullScreen,r,y]),e.useEffect(()=>{y&&($(r,"set-params",{params:b}),$(r,"set-configuring",{isConfiguring:b.isConfiguring}))},[b,r,y]),e.useEffect(()=>{d!==void 0&&o((d==null?void 0:d.indexOf("/"))===0?d:`/${d}`)},[d]),e.useEffect(()=>{t===void 0||!y||$(r,"navigate",{path:t})},[t,y,r,$]),e.useEffect(()=>{if(!(!u||!r||!R)){if(m){const f=new URL(u);s(!0),C(r,f.origin,R),i(),k(`${f.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const f=await W(u);if(s(f),f){const T=new URL(u);C(r,T.origin,R),i(),k(`${T.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{Z(r)}}},[u,r,C,R,m]),e.useEffect(()=>{if(!(!m||!g||h==null))return a.current=setTimeout(()=>{l.current&&l.current()},h),()=>clearTimeout(a.current)},[g,m,h]);const M=()=>{clearTimeout(a.current)};I(r,"init",M),I(r,"authorize",M),I(r,"login",M),I(r,"ready",()=>{M(),L(f=>f+1)});const w=e.useRef();return I(r,"heartbeat",()=>{w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{if(R.current){const f=new URL(u);R.current.src=`${f.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]),!m&&!n?null:e.createElement(D,{$isReady:y,ref:R,src:g,...S})};A.propTypes={id:p.string,src:p.string.isRequired,path:p.string,onInit:p.func,onTimeout:p.func,skipManifestCheck:p.bool,readyTimeout:p.number};exports.MMEmbeddableZone=A;exports.MMEmbeddableZoneContext=P;exports.MMEmbeddableZoneProvider=j;exports.getAppInfo=v;exports.testIsEmbeddable=W;exports.useEmbeddedEffect=I;
+`,A=({id:r,src:u,path:d,onInit:i=()=>{},onTimeout:R,context:c={},params:f={},skipManifestCheck:b=!1,...T})=>{if("isConfiguring"in T)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in c)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in c)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const w=e.useRef(),[h,g]=e.useState(),[M,P]=e.useState(0),{registerFrame:F,unregisterFrame:L,sendMessage:p}=e.useContext(q),[x,t]=e.useState(!0),[s,n]=e.useState(),o=e.useRef(),a=e.useRef(R),l=e.useRef(i),$=e.useRef(!1);e.useEffect(()=>{a.current=R},[R]),e.useEffect(()=>{l.current=i},[i]),e.useEffect(()=>{M&&p(r,"set-context",{context:{...c,colorMode:f.colorMode,isFullScreen:f.isFullScreen}})},[c,f.colorMode,f.isFullScreen,r,M]),e.useEffect(()=>{M&&(p(r,"set-params",{params:f}),p(r,"set-configuring",{isConfiguring:f.isConfiguring}))},[f,r,M]),e.useEffect(()=>{d!==void 0&&n((d==null?void 0:d.indexOf("/"))===0?d:`/${d}`)},[d]),e.useEffect(()=>{s===void 0||!M||p(r,"navigate",{path:s})},[s,M,r,p]),e.useEffect(()=>{if(!(!u||!r||!w)){if(b){const m=new URL(u);t(!0),F(r,m.origin,w),l.current(),g(`${m.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const m=await v(u);if(t(m),m){const k=new URL(u);F(r,k.origin,w),l.current(),g(`${k.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{L(r)}}},[u,r,F,w,b]),e.useEffect(()=>{if(!(!b||!h||$.current))return o.current=setTimeout(()=>{a.current&&a.current()},B),()=>clearTimeout(o.current)},[h,b]);const y=e.useCallback(()=>{$.current=!0,clearTimeout(o.current)},[]);S(r,"init",y),S(r,"authorize",y),S(r,"login",y),S(r,"ready",()=>{y(),P(m=>m+1)});const E=e.useRef();return S(r,"heartbeat",()=>{E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{if(w.current){const m=new URL(u);w.current.src=`${m.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{E.current&&clearTimeout(E.current)},[]),!b&&!x?null:e.createElement(D,{$isReady:M,ref:w,src:h,...T})};A.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,skipManifestCheck:C.bool};exports.MMEmbeddableZone=A;exports.MMEmbeddableZoneContext=q;exports.MMEmbeddableZoneProvider=W;exports.getAppInfo=j;exports.testIsEmbeddable=v;exports.useEmbeddedEffect=S;

package/dist/mm-react-embeddable.es.js

@@ -1,164 +1,163 @@
-import v, { createContext as D, useState as x, useRef as M, useCallback as $, useEffect as b, useMemo as _, useContext as z } from "react";
-import h from "prop-types";
-import H from "styled-components";
-const O = D(null), G = ({ children: e }) => {
-  const [s, a] = x({}), [c, w] = x({}), i = M({}), f = M({}), m = M({}), I = $((n, t) => {
-    var r;
-    return !!((r = m.current[n]) != null && r.has(t));
-  }, []), C = $((n, t, r) => {
-    a((o) => ({ ...o, [n]: { origin: t, frameRef: r } }));
-  }, []), y = $((n) => {
+import A, { createContext as B, useState as U, useRef as R, useCallback as $, useEffect as g, useMemo as D, useContext as H } from "react";
+import T from "prop-types";
+import j from "styled-components";
+const W = B(null), K = ({ children: e }) => {
+  const [s, a] = U({}), [c, y] = U({}), i = R({}), l = R({}), f = R({}), x = $((r, t) => {
+    var n;
+    return !!((n = f.current[r]) != null && n.has(t));
+  }, []), p = $((r, t, n) => {
+    a((o) => ({ ...o, [r]: { origin: t, frameRef: n } }));
+  }, []), I = $((r) => {
     a((t) => {
-      const r = { ...t };
-      return delete r[n], r;
-    }), w((t) => {
-      const r = { ...t };
-      return delete r[n], r;
-    }), delete m.current[n];
+      const n = { ...t };
+      return delete n[r], n;
+    }), y((t) => {
+      const n = { ...t };
+      return delete n[r], n;
+    }), delete f.current[r];
   }, []);
-  b(() => {
-    const n = (r = [], o) => {
-      r.forEach((u) => u(o));
-    }, t = (r) => {
-      var E, R, l, P, W;
-      if (!((E = r == null ? void 0 : r.data) != null && E.instanceId))
+  g(() => {
+    const r = (n = [], o) => {
+      n.forEach((u) => u(o));
+    }, t = (n) => {
+      var F, M, w, m, C;
+      if (!((F = n == null ? void 0 : n.data) != null && F.instanceId))
         return;
-      const { instanceId: o, type: u } = r.data, d = i.current;
+      const { instanceId: o, type: u } = n.data, d = i.current;
       if (u === "response") {
-        const { callbackId: L, response: A, error: B } = r.data, j = f.current[L];
-        j && (j(A, B), delete f.current[L]);
+        const { callbackId: S, response: v, error: z } = n.data, _ = l.current[S];
+        _ && (_(v, z), delete l.current[S]);
         return;
       }
       if (u === "mark-registered") {
-        const { requestType: L } = r.data;
-        m.current[o] || (m.current[o] = /* @__PURE__ */ new Set()), m.current[o].add(L);
+        const { requestType: S } = n.data;
+        f.current[o] || (f.current[o] = /* @__PURE__ */ new Set()), f.current[o].add(S);
         return;
       }
-      u === "ready" && w((L) => ({ ...L, [o]: !0 })), n((R = d[o]) == null ? void 0 : R[u], r.data), n((l = d["*"]) == null ? void 0 : l[u], r.data), n((P = d[o]) == null ? void 0 : P["*"], r.data), n((W = d["*"]) == null ? void 0 : W["*"], r.data);
+      u === "ready" && y((S) => ({ ...S, [o]: !0 })), r((M = d[o]) == null ? void 0 : M[u], n.data), r((w = d["*"]) == null ? void 0 : w[u], n.data), r((m = d[o]) == null ? void 0 : m["*"], n.data), r((C = d["*"]) == null ? void 0 : C["*"], n.data);
     };
     return window.addEventListener("message", t), () => {
       window.removeEventListener("message", t);
     };
   }, [s]);
-  const g = $(
-    (n, t, r) => {
+  const b = $(
+    (r, t, n) => {
       var u, d;
-      const o = s[n];
+      const o = s[r];
       if (!o) {
-        console.warn(`Origin not set for id: ${n}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${r}. Unable to send message.`);
         return;
       }
       (d = (u = o == null ? void 0 : o.frameRef) == null ? void 0 : u.current) != null && d.contentWindow && o.frameRef.current.contentWindow.postMessage(
-        { type: t, ...r, instanceId: n },
+        { type: t, ...n, instanceId: r },
         o.origin
       );
     },
     [s]
-  ), U = M(0), p = $(() => `${Date.now()}-${++U.current}`, []), Z = $(
-    async (n, t, r = {}) => new Promise((o, u) => {
-      const d = p(), E = (R, l) => {
-        delete f.current[d], l ? u(l) : o(R);
+  ), E = R(0), O = $(() => `${Date.now()}-${++E.current}`, []), L = $(
+    async (r, t, n = {}) => new Promise((o, u) => {
+      const d = O(), F = (M, w) => {
+        delete l.current[d], w ? u(w) : o(M);
       };
-      f.current[d] = E, g(n, "request", { callbackId: d, requestType: t, data: r });
+      l.current[d] = F, b(r, "request", { callbackId: d, requestType: t, data: n });
     }),
-    [g]
-  ), T = $(
-    (n, t) => {
-      g(n, "load-options", t);
+    [b]
+  ), Z = $(
+    (r, t) => {
+      b(r, "load-options", t);
     },
-    [g]
-  ), q = $(
-    (n, t) => {
-      g(n, "validate", t);
+    [b]
+  ), h = $(
+    (r, t) => {
+      b(r, "validate", t);
     },
-    [g]
-  ), F = _(
+    [b]
+  ), k = D(
     () => ({
-      registerFrame: C,
-      unregisterFrame: y,
-      sendMessage: g,
-      sendRequest: Z,
-      loadOptions: T,
-      validate: q,
-      hasHandler: I,
+      registerFrame: p,
+      unregisterFrame: I,
+      sendMessage: b,
+      sendRequest: L,
+      loadOptions: Z,
+      validate: h,
+      hasHandler: x,
       readyFrames: c,
-      addListener: (n, t, r) => (i.current[n] || (i.current[n] = {}), i.current[n][t] || (i.current[n][t] = []), i.current[n][t].push(r), () => {
-        i.current[n][t] = i.current[n][t].filter((o) => o !== r);
+      addListener: (r, t, n) => (i.current[r] || (i.current[r] = {}), i.current[r][t] || (i.current[r][t] = []), i.current[r][t].push(n), () => {
+        i.current[r][t] = i.current[r][t].filter((o) => o !== n);
       })
     }),
     [
-      C,
-      y,
-      g,
-      Z,
-      T,
-      q,
+      p,
       I,
+      b,
+      L,
+      Z,
+      h,
+      x,
       c
     ]
   );
-  return /* @__PURE__ */ v.createElement(O.Provider, { value: F }, e);
-}, k = {}, J = async (e) => {
+  return /* @__PURE__ */ A.createElement(W.Provider, { value: k }, e);
+}, q = {}, G = async (e) => {
   try {
     const s = new URL(e).origin;
-    if (k[s] !== void 0)
-      return k[s];
+    if (q[s] !== void 0)
+      return q[s];
     const c = await (await fetch(`${s}/mm-app-manifest.json`)).json();
     if (!c.version)
       throw new Error("Invalid manifest");
-    return k[s] = c, c;
+    return q[s] = c, c;
   } catch {
   }
-  return k[origin] = !1, !1;
-}, K = async (e) => !!await J(e), S = (e, s, a) => {
-  const c = z(O);
+  return q[origin] = !1, !1;
+}, J = async (e) => !!await G(e), P = (e, s, a) => {
+  const c = H(W);
   if (c === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const w = M(a);
-  b(() => {
-    w.current = a;
-  }, [a]), b(() => {
+  const y = R(a);
+  g(() => {
+    y.current = a;
+  }, [a]), g(() => {
     if (!(!e || !s)) {
       if (s.startsWith("key:")) {
         const i = s.substring(4);
         return c.readyFrames[e] && c.sendMessage(e, "subscribe-key", { keyChord: i }), c.addListener(
           e,
           `key-pressed:${i}`,
-          (...m) => w.current(...m)
+          (...f) => y.current(...f)
         );
       }
       return c.addListener(
         e,
         s,
-        (...i) => w.current(...i)
+        (...i) => y.current(...i)
       );
     }
   }, [c, e, s]);
 };
-G.propTypes = {
-  children: h.node.isRequired
+K.propTypes = {
+  children: T.node.isRequired
 };
-const Q = H.default || H, V = Q.iframe`
+const Q = j.default || j, V = 1e4, X = Q.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${(e) => e.$isReady ? "visible" : "hidden"};
-`, X = ({
+`, Y = ({
   id: e,
   src: s,
   path: a,
   onInit: c = () => {
   },
-  onTimeout: w,
+  onTimeout: y,
   context: i = {},
-  params: f = {},
-  skipManifestCheck: m = !1,
-  readyTimeout: I = 5e3,
-  ...C
+  params: l = {},
+  skipManifestCheck: f = !1,
+  ...x
 }) => {
-  if ("isConfiguring" in C)
+  if ("isConfiguring" in x)
     return console.error(
       "isConfiguring must be passed via the params prop to MMEmbeddableZone"
     ), null;
@@ -170,85 +169,86 @@ const Q = H.default || H, V = Q.iframe`
     return console.error(
       "isFullScreen must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  const y = M(), [g, U] = x(), [p, Z] = x(0), { registerFrame: T, unregisterFrame: q, sendMessage: F } = z(
-    O
-  ), [n, t] = x(!0), [r, o] = x(), u = M(), d = M(w);
-  b(() => {
-    d.current = w;
-  }, [w]), b(() => {
-    p && F(e, "set-context", {
+  const p = R(), [I, b] = U(), [E, O] = U(0), { registerFrame: L, unregisterFrame: Z, sendMessage: h } = H(
+    W
+  ), [k, r] = U(!0), [t, n] = U(), o = R(), u = R(y), d = R(c), F = R(!1);
+  g(() => {
+    u.current = y;
+  }, [y]), g(() => {
+    d.current = c;
+  }, [c]), g(() => {
+    E && h(e, "set-context", {
       context: {
         ...i,
         // TODO: Remove this once everything is migrated to params
-        colorMode: f.colorMode,
-        isFullScreen: f.isFullScreen
+        colorMode: l.colorMode,
+        isFullScreen: l.isFullScreen
       }
     });
-  }, [i, f.colorMode, f.isFullScreen, e, p]), b(() => {
-    p && (F(e, "set-params", { params: f }), F(e, "set-configuring", { isConfiguring: f.isConfiguring }));
-  }, [f, e, p]), b(() => {
-    a !== void 0 && o((a == null ? void 0 : a.indexOf("/")) === 0 ? a : `/${a}`);
-  }, [a]), b(() => {
-    r === void 0 || !p || F(e, "navigate", { path: r });
-  }, [r, p, e, F]), b(() => {
-    if (!(!s || !e || !y)) {
-      if (m) {
-        const l = new URL(s);
-        t(!0), T(e, l.origin, y), c(), U(
-          `${l.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
+  }, [i, l.colorMode, l.isFullScreen, e, E]), g(() => {
+    E && (h(e, "set-params", { params: l }), h(e, "set-configuring", { isConfiguring: l.isConfiguring }));
+  }, [l, e, E]), g(() => {
+    a !== void 0 && n((a == null ? void 0 : a.indexOf("/")) === 0 ? a : `/${a}`);
+  }, [a]), g(() => {
+    t === void 0 || !E || h(e, "navigate", { path: t });
+  }, [t, E, e, h]), g(() => {
+    if (!(!s || !e || !p)) {
+      if (f) {
+        const m = new URL(s);
+        r(!0), L(e, m.origin, p), d.current(), b(
+          `${m.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
         );
       } else
         (async () => {
-          const l = await K(s);
-          if (t(l), l) {
-            const P = new URL(s);
-            T(e, P.origin, y), c(), U(
-              `${P.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
+          const m = await J(s);
+          if (r(m), m) {
+            const C = new URL(s);
+            L(e, C.origin, p), d.current(), b(
+              `${C.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
             );
           }
         })();
       return () => {
-        q(e);
+        Z(e);
       };
     }
-  }, [s, e, T, y, m]), b(() => {
-    if (!(!m || !g || I == null))
-      return u.current = setTimeout(() => {
-        d.current && d.current();
-      }, I), () => clearTimeout(u.current);
-  }, [g, m, I]);
-  const E = () => {
-    clearTimeout(u.current);
-  };
-  S(e, "init", E), S(e, "authorize", E), S(e, "login", E), S(e, "ready", () => {
-    E(), Z((l) => l + 1);
+  }, [s, e, L, p, f]), g(() => {
+    if (!(!f || !I || F.current))
+      return o.current = setTimeout(() => {
+        u.current && u.current();
+      }, V), () => clearTimeout(o.current);
+  }, [I, f]);
+  const M = $(() => {
+    F.current = !0, clearTimeout(o.current);
+  }, []);
+  P(e, "init", M), P(e, "authorize", M), P(e, "login", M), P(e, "ready", () => {
+    M(), O((m) => m + 1);
   });
-  const R = M();
-  return S(e, "heartbeat", () => {
-    R.current && clearTimeout(R.current), R.current = setTimeout(() => {
-      if (y.current) {
-        const l = new URL(s);
-        y.current.src = `${l.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`;
+  const w = R();
+  return P(e, "heartbeat", () => {
+    w.current && clearTimeout(w.current), w.current = setTimeout(() => {
+      if (p.current) {
+        const m = new URL(s);
+        p.current.src = `${m.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`;
       }
     }, 6e3);
-  }), b(() => () => {
-    R.current && clearTimeout(R.current);
-  }, []), !m && !n ? null : /* @__PURE__ */ v.createElement(V, { $isReady: p, ref: y, src: g, ...C });
+  }), g(() => () => {
+    w.current && clearTimeout(w.current);
+  }, []), !f && !k ? null : /* @__PURE__ */ A.createElement(X, { $isReady: E, ref: p, src: I, ...x });
 };
-X.propTypes = {
-  id: h.string,
-  src: h.string.isRequired,
-  path: h.string,
-  onInit: h.func,
-  onTimeout: h.func,
-  skipManifestCheck: h.bool,
-  readyTimeout: h.number
+Y.propTypes = {
+  id: T.string,
+  src: T.string.isRequired,
+  path: T.string,
+  onInit: T.func,
+  onTimeout: T.func,
+  skipManifestCheck: T.bool
 };
 export {
-  X as MMEmbeddableZone,
-  O as MMEmbeddableZoneContext,
-  G as MMEmbeddableZoneProvider,
-  J as getAppInfo,
-  K as testIsEmbeddable,
-  S as useEmbeddedEffect
+  Y as MMEmbeddableZone,
+  W as MMEmbeddableZoneContext,
+  K as MMEmbeddableZoneProvider,
+  G as getAppInfo,
+  J as testIsEmbeddable,
+  P as useEmbeddedEffect
 };

package/dist/mm-react-embeddable.umd.js

@@ -1,6 +1,6 @@
-(function(m,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(m=typeof globalThis!="undefined"?globalThis:m||self,e(m["mm-react-embeddable"]={},m.React,m.PropTypes,m.styled))})(this,(function(m,e,$,j){"use strict";const q=e.createContext(null),v=({children:r})=>{const[u,l]=e.useState({}),[c,w]=e.useState({}),i=e.useRef({}),b=e.useRef({}),g=e.useRef({}),I=e.useCallback((t,s)=>{var n;return!!((n=g.current[t])!=null&&n.has(s))},[]),L=e.useCallback((t,s,n)=>{l(o=>({...o,[t]:{origin:s,frameRef:n}}))},[]),y=e.useCallback(t=>{l(s=>{const n={...s};return delete n[t],n}),w(s=>{const n={...s};return delete n[t],n}),delete g.current[t]},[]);e.useEffect(()=>{const t=(n=[],o)=>{n.forEach(d=>d(o))},s=n=>{var h,M,a,Z,P;if(!((h=n==null?void 0:n.data)!=null&&h.instanceId))return;const{instanceId:o,type:d}=n.data,f=i.current;if(d==="response"){const{callbackId:k,response:D,error:G}=n.data,z=b.current[k];z&&(z(D,G),delete b.current[k]);return}if(d==="mark-registered"){const{requestType:k}=n.data;g.current[o]||(g.current[o]=new Set),g.current[o].add(k);return}d==="ready"&&w(k=>({...k,[o]:!0})),t((M=f[o])==null?void 0:M[d],n.data),t((a=f["*"])==null?void 0:a[d],n.data),t((Z=f[o])==null?void 0:Z["*"],n.data),t((P=f["*"])==null?void 0:P["*"],n.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const E=e.useCallback((t,s,n)=>{var d,f;const o=u[t];if(!o){console.warn(`Origin not set for id: ${t}. Unable to send message.`);return}(f=(d=o==null?void 0:o.frameRef)==null?void 0:d.current)!=null&&f.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...n,instanceId:t},o.origin)},[u]),U=e.useRef(0),p=e.useCallback(()=>`${Date.now()}-${++U.current}`,[]),x=e.useCallback(async(t,s,n={})=>new Promise((o,d)=>{const f=p(),h=(M,a)=>{delete b.current[f],a?d(a):o(M)};b.current[f]=h,E(t,"request",{callbackId:f,requestType:s,data:n})}),[E]),S=e.useCallback((t,s)=>{E(t,"load-options",s)},[E]),O=e.useCallback((t,s)=>{E(t,"validate",s)},[E]),C=e.useMemo(()=>({registerFrame:L,unregisterFrame:y,sendMessage:E,sendRequest:x,loadOptions:S,validate:O,hasHandler:I,readyFrames:c,addListener:(t,s,n)=>(i.current[t]||(i.current[t]={}),i.current[t][s]||(i.current[t][s]=[]),i.current[t][s].push(n),()=>{i.current[t][s]=i.current[t][s].filter(o=>o!==n)})}),[L,y,E,x,S,O,I,c]);return e.createElement(q.Provider,{value:C},r)},T={},W=async r=>{try{const u=new URL(r).origin;if(T[u]!==void 0)return T[u];const c=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!c.version)throw new Error("Invalid manifest");return T[u]=c,c}catch{}return T[origin]=!1,!1},A=async r=>!!await W(r),F=(r,u,l)=>{const c=e.useContext(q);if(c===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const w=e.useRef(l);e.useEffect(()=>{w.current=l},[l]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const i=u.substring(4);return c.readyFrames[r]&&c.sendMessage(r,"subscribe-key",{keyChord:i}),c.addListener(r,`key-pressed:${i}`,(...g)=>w.current(...g))}return c.addListener(r,u,(...i)=>w.current(...i))}},[c,r,u])};v.propTypes={children:$.node.isRequired};const B=(j.default||j).iframe`
+(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a["mm-react-embeddable"]={},a.React,a.PropTypes,a.styled))})(this,(function(a,e,C,W){"use strict";const q=e.createContext(null),v=({children:r})=>{const[u,f]=e.useState({}),[c,M]=e.useState({}),i=e.useRef({}),m=e.useRef({}),b=e.useRef({}),L=e.useCallback((n,s)=>{var t;return!!((t=b.current[n])!=null&&t.has(s))},[]),y=e.useCallback((n,s,t)=>{f(o=>({...o,[n]:{origin:s,frameRef:t}}))},[]),S=e.useCallback(n=>{f(s=>{const t={...s};return delete t[n],t}),M(s=>{const t={...s};return delete t[n],t}),delete b.current[n]},[]);e.useEffect(()=>{const n=(t=[],o)=>{t.forEach(d=>d(o))},s=t=>{var F,h,w,g,Z;if(!((F=t==null?void 0:t.data)!=null&&F.instanceId))return;const{instanceId:o,type:d}=t.data,l=i.current;if(d==="response"){const{callbackId:T,response:_,error:G}=t.data,z=m.current[T];z&&(z(_,G),delete m.current[T]);return}if(d==="mark-registered"){const{requestType:T}=t.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(T);return}d==="ready"&&M(T=>({...T,[o]:!0})),n((h=l[o])==null?void 0:h[d],t.data),n((w=l["*"])==null?void 0:w[d],t.data),n((g=l[o])==null?void 0:g["*"],t.data),n((Z=l["*"])==null?void 0:Z["*"],t.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const E=e.useCallback((n,s,t)=>{var d,l;const o=u[n];if(!o){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}(l=(d=o==null?void 0:o.frameRef)==null?void 0:d.current)!=null&&l.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...t,instanceId:n},o.origin)},[u]),p=e.useRef(0),x=e.useCallback(()=>`${Date.now()}-${++p.current}`,[]),k=e.useCallback(async(n,s,t={})=>new Promise((o,d)=>{const l=x(),F=(h,w)=>{delete m.current[l],w?d(w):o(h)};m.current[l]=F,E(n,"request",{callbackId:l,requestType:s,data:t})}),[E]),O=e.useCallback((n,s)=>{E(n,"load-options",s)},[E]),$=e.useCallback((n,s)=>{E(n,"validate",s)},[E]),j=e.useMemo(()=>({registerFrame:y,unregisterFrame:S,sendMessage:E,sendRequest:k,loadOptions:O,validate:$,hasHandler:L,readyFrames:c,addListener:(n,s,t)=>(i.current[n]||(i.current[n]={}),i.current[n][s]||(i.current[n][s]=[]),i.current[n][s].push(t),()=>{i.current[n][s]=i.current[n][s].filter(o=>o!==t)})}),[y,S,E,k,O,$,L,c]);return e.createElement(q.Provider,{value:j},r)},U={},A=async r=>{try{const u=new URL(r).origin;if(U[u]!==void 0)return U[u];const c=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!c.version)throw new Error("Invalid manifest");return U[u]=c,c}catch{}return U[origin]=!1,!1},P=async r=>!!await A(r),I=(r,u,f)=>{const c=e.useContext(q);if(c===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const M=e.useRef(f);e.useEffect(()=>{M.current=f},[f]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const i=u.substring(4);return c.readyFrames[r]&&c.sendMessage(r,"subscribe-key",{keyChord:i}),c.addListener(r,`key-pressed:${i}`,(...b)=>M.current(...b))}return c.addListener(r,u,(...i)=>M.current(...i))}},[c,r,u])};v.propTypes={children:C.node.isRequired};const B=W.default||W,D=1e4,K=B.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${r=>r.$isReady?"visible":"hidden"};
-`,H=({id:r,src:u,path:l,onInit:c=()=>{},onTimeout:w,context:i={},params:b={},skipManifestCheck:g=!1,readyTimeout:I=5e3,...L})=>{if("isConfiguring"in L)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in i)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in i)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const y=e.useRef(),[E,U]=e.useState(),[p,x]=e.useState(0),{registerFrame:S,unregisterFrame:O,sendMessage:C}=e.useContext(q),[t,s]=e.useState(!0),[n,o]=e.useState(),d=e.useRef(),f=e.useRef(w);e.useEffect(()=>{f.current=w},[w]),e.useEffect(()=>{p&&C(r,"set-context",{context:{...i,colorMode:b.colorMode,isFullScreen:b.isFullScreen}})},[i,b.colorMode,b.isFullScreen,r,p]),e.useEffect(()=>{p&&(C(r,"set-params",{params:b}),C(r,"set-configuring",{isConfiguring:b.isConfiguring}))},[b,r,p]),e.useEffect(()=>{l!==void 0&&o((l==null?void 0:l.indexOf("/"))===0?l:`/${l}`)},[l]),e.useEffect(()=>{n===void 0||!p||C(r,"navigate",{path:n})},[n,p,r,C]),e.useEffect(()=>{if(!(!u||!r||!y)){if(g){const a=new URL(u);s(!0),S(r,a.origin,y),c(),U(`${a.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const a=await A(u);if(s(a),a){const Z=new URL(u);S(r,Z.origin,y),c(),U(`${Z.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{O(r)}}},[u,r,S,y,g]),e.useEffect(()=>{if(!(!g||!E||I==null))return d.current=setTimeout(()=>{f.current&&f.current()},I),()=>clearTimeout(d.current)},[E,g,I]);const h=()=>{clearTimeout(d.current)};F(r,"init",h),F(r,"authorize",h),F(r,"login",h),F(r,"ready",()=>{h(),x(a=>a+1)});const M=e.useRef();return F(r,"heartbeat",()=>{M.current&&clearTimeout(M.current),M.current=setTimeout(()=>{if(y.current){const a=new URL(u);y.current.src=`${a.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{M.current&&clearTimeout(M.current)},[]),!g&&!t?null:e.createElement(B,{$isReady:p,ref:y,src:E,...L})};H.propTypes={id:$.string,src:$.string.isRequired,path:$.string,onInit:$.func,onTimeout:$.func,skipManifestCheck:$.bool,readyTimeout:$.number},m.MMEmbeddableZone=H,m.MMEmbeddableZoneContext=q,m.MMEmbeddableZoneProvider=v,m.getAppInfo=W,m.testIsEmbeddable=A,m.useEmbeddedEffect=F,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+`,H=({id:r,src:u,path:f,onInit:c=()=>{},onTimeout:M,context:i={},params:m={},skipManifestCheck:b=!1,...L})=>{if("isConfiguring"in L)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in i)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in i)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const y=e.useRef(),[S,E]=e.useState(),[p,x]=e.useState(0),{registerFrame:k,unregisterFrame:O,sendMessage:$}=e.useContext(q),[j,n]=e.useState(!0),[s,t]=e.useState(),o=e.useRef(),d=e.useRef(M),l=e.useRef(c),F=e.useRef(!1);e.useEffect(()=>{d.current=M},[M]),e.useEffect(()=>{l.current=c},[c]),e.useEffect(()=>{p&&$(r,"set-context",{context:{...i,colorMode:m.colorMode,isFullScreen:m.isFullScreen}})},[i,m.colorMode,m.isFullScreen,r,p]),e.useEffect(()=>{p&&($(r,"set-params",{params:m}),$(r,"set-configuring",{isConfiguring:m.isConfiguring}))},[m,r,p]),e.useEffect(()=>{f!==void 0&&t((f==null?void 0:f.indexOf("/"))===0?f:`/${f}`)},[f]),e.useEffect(()=>{s===void 0||!p||$(r,"navigate",{path:s})},[s,p,r,$]),e.useEffect(()=>{if(!(!u||!r||!y)){if(b){const g=new URL(u);n(!0),k(r,g.origin,y),l.current(),E(`${g.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const g=await P(u);if(n(g),g){const Z=new URL(u);k(r,Z.origin,y),l.current(),E(`${Z.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{O(r)}}},[u,r,k,y,b]),e.useEffect(()=>{if(!(!b||!S||F.current))return o.current=setTimeout(()=>{d.current&&d.current()},D),()=>clearTimeout(o.current)},[S,b]);const h=e.useCallback(()=>{F.current=!0,clearTimeout(o.current)},[]);I(r,"init",h),I(r,"authorize",h),I(r,"login",h),I(r,"ready",()=>{h(),x(g=>g+1)});const w=e.useRef();return I(r,"heartbeat",()=>{w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{if(y.current){const g=new URL(u);y.current.src=`${g.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]),!b&&!j?null:e.createElement(K,{$isReady:p,ref:y,src:S,...L})};H.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,skipManifestCheck:C.bool},a.MMEmbeddableZone=H,a.MMEmbeddableZoneContext=q,a.MMEmbeddableZoneProvider=v,a.getAppInfo=A,a.testIsEmbeddable=P,a.useEmbeddedEffect=I,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "1.3.0-2",
+  "version": "1.3.0",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",