@machinemetrics/mm-react-embeddable 0.10.1 → 0.10.2-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"),y=require("prop-types"),C=require("styled-components"),R=e.createContext(null),x=({children:t})=>{const[a,d]=e.useState({}),s=e.useRef({}),f=e.useCallback((n,r,o)=>{d(i=>({...i,[n]:{origin:r,frameRef:o}}))},[]);e.useEffect(()=>{const n=(o=[],i)=>{o.forEach(u=>u(i))},r=o=>{var M,g,w,l,p;if(!((M=o==null?void 0:o.data)!=null&&M.instanceId))return;const{instanceId:i,type:u}=o.data,m=s.current;n((g=m[i])==null?void 0:g[u],o.data),n((w=m["*"])==null?void 0:w[u],o.data),n((l=m[i])==null?void 0:l["*"],o.data),n((p=m["*"])==null?void 0:p["*"],o.data)};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[a]);const c=e.useCallback((n,r,o)=>{const i=a[n];if(!i){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}i.frameRef.current.contentWindow.postMessage({type:r,...o,instanceId:n},i.origin)},[a]),E=e.useCallback((n,r)=>{c(n,"load-options",r)},[c]),b=e.useCallback((n,r)=>{c(n,"validate",r)},[c]),I={registerFrame:f,sendMessage:c,loadOptions:E,validate:b,addListener:(n,r,o)=>(s.current[n]||(s.current[n]={}),s.current[n][r]||(s.current[n][r]=[]),s.current[n][r].push(o),()=>{s.current[n][r]=s.current[n][r].filter(i=>i!==o)})};return e.createElement(R.Provider,{value:I},t)},h={},P=async t=>{try{const a=new URL(t).origin;if(h[a]!==void 0)return h[a];const s=await(await fetch(`${a}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return h[a]=s,s}catch{}return h[origin]=!1,!1},$=async t=>!!await P(t),L=(t,a,d)=>{const s=e.useContext(R);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const f=e.useRef(d);return e.useEffect(()=>{f.current=d},[d]),e.useEffect(()=>{if(!(!t||!a))return s.addListener(t,a,(...c)=>f.current(...c))},[s,t,a]),e.useCallback((c,E)=>s.sendMessage(t,c,E),[s,t])};x.propTypes={children:y.node.isRequired};const Z=C.default||C,v=Z.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),y=require("prop-types"),x=require("styled-components"),R=t.createContext(null),P=({children:r})=>{const[a,c]=t.useState({}),s=t.useRef({}),l=t.useCallback((e,o,n)=>{c(i=>({...i,[e]:{origin:o,frameRef:n}}))},[]),f=t.useCallback(e=>{c(o=>{const n={...o};return delete n[e],n})},[]);t.useEffect(()=>{const e=(n=[],i)=>{n.forEach(u=>u(i))},o=n=>{var M,E,w,b,p;if(!((M=n==null?void 0:n.data)!=null&&M.instanceId))return;const{instanceId:i,type:u}=n.data,g=s.current;e((E=g[i])==null?void 0:E[u],n.data),e((w=g["*"])==null?void 0:w[u],n.data),e((b=g[i])==null?void 0:b["*"],n.data),e((p=g["*"])==null?void 0:p["*"],n.data)};return window.addEventListener("message",o),()=>{window.removeEventListener("message",o)}},[a]);const d=t.useCallback((e,o,n)=>{const i=a[e];if(!i){console.warn(`Origin not set for id: ${e}. Unable to send message.`);return}i.frameRef.current.contentWindow.postMessage({type:o,...n,instanceId:e},i.origin)},[a]),m=t.useCallback((e,o)=>{d(e,"load-options",o)},[d]),I=t.useCallback((e,o)=>{d(e,"validate",o)},[d]),C={registerFrame:l,unregisterFrame:f,sendMessage:d,loadOptions:m,validate:I,addListener:(e,o,n)=>(s.current[e]||(s.current[e]={}),s.current[e][o]||(s.current[e][o]=[]),s.current[e][o].push(n),()=>{s.current[e][o]=s.current[e][o].filter(i=>i!==n)})};return t.createElement(R.Provider,{value:C},r)},h={},$=async r=>{try{const a=new URL(r).origin;if(h[a]!==void 0)return h[a];const s=await(await fetch(`${a}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return h[a]=s,s}catch{}return h[origin]=!1,!1},L=async r=>!!await $(r),S=(r,a,c)=>{const s=t.useContext(R);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const l=t.useRef(c);return t.useEffect(()=>{l.current=c},[c]),t.useEffect(()=>{if(!(!r||!a))return s.addListener(r,a,(...f)=>l.current(...f))},[s,r,a]),t.useCallback((f,d)=>s.sendMessage(r,f,d),[s,r])};P.propTypes={children:y.node.isRequired};const v=x.default||x,F=v.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${t=>t.$isReady?"visible":"hidden"};
-`,S=({id:t,src:a,path:d,onInit:s=()=>{},context:f,isConfiguring:c,...E})=>{const b=e.useRef(),[I,n]=e.useState(),[r,o]=e.useState(0),{registerFrame:i,sendMessage:u}=e.useContext(R),[m,M]=e.useState(!0),[g,w]=e.useState();return e.useEffect(()=>{r&&u(t,"set-context",{context:f})},[f,t,r]),e.useEffect(()=>{d!==void 0&&w(d)},[d]),e.useEffect(()=>{g===void 0||!r||u(t,"navigate",{path:g})},[g,r,t,u]),e.useEffect(()=>{r&&u(t,"set-configuring",{isConfiguring:c})},[r,c]),e.useEffect(()=>{!a||!t||!b||(async()=>{const l=await $(a);if(M(l),l){const p=new URL(a);i(t,p.origin,b),s(),n(`${p.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`);return}})()},[a,t,i,b]),L(t,"ready",()=>o(l=>l+1)),m?e.createElement(v,{$isReady:r,ref:b,src:I,...E}):e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};S.propTypes={id:y.string,src:y.string.isRequired,path:y.string,onInit:y.func};exports.MMEmbeddableZone=S;exports.MMEmbeddableZoneContext=R;exports.MMEmbeddableZoneProvider=x;exports.getAppInfo=P;exports.testIsEmbeddable=$;exports.useEmbeddedEffect=L;
+  visibility: ${r=>r.$isReady?"visible":"hidden"};
+`,Z=({id:r,src:a,path:c,onInit:s=()=>{},context:l,isConfiguring:f,...d})=>{const m=t.useRef(),[I,C]=t.useState(),[e,o]=t.useState(0),{registerFrame:n,unregisterFrame:i,sendMessage:u}=t.useContext(R),[g,M]=t.useState(!0),[E,w]=t.useState();return t.useEffect(()=>{e&&u(r,"set-context",{context:l})},[l,r,e]),t.useEffect(()=>{c!==void 0&&w(c)},[c]),t.useEffect(()=>{E===void 0||!e||u(r,"navigate",{path:E})},[E,e,r,u]),t.useEffect(()=>{e&&u(r,"set-configuring",{isConfiguring:f})},[e,f]),t.useEffect(()=>{if(!(!a||!r||!m))return(async()=>{const b=await L(a);if(M(b),b){const p=new URL(a);n(r,p.origin,m),s(),C(`${p.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`);return}})(),()=>{i(r)}},[a,r,n,m]),S(r,"ready",()=>o(b=>b+1)),g?t.createElement(F,{$isReady:e,ref:m,src:I,...d}):t.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},t.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};Z.propTypes={id:y.string,src:y.string.isRequired,path:y.string,onInit:y.func};exports.MMEmbeddableZone=Z;exports.MMEmbeddableZoneContext=R;exports.MMEmbeddableZoneProvider=P;exports.getAppInfo=$;exports.testIsEmbeddable=L;exports.useEmbeddedEffect=S;

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

@@ -1,60 +1,66 @@
-import $, { createContext as C, useState as w, useRef as L, useCallback as y, useEffect as u, useContext as A } from "react";
+import x, { createContext as C, useState as y, useRef as F, useCallback as E, useEffect as f, useContext as A } from "react";
 import h from "prop-types";
 import v from "styled-components";
-const P = C(null), F = ({ children: e }) => {
-  const [o, c] = w({}), n = L({}), f = y((t, r, s) => {
-    c((i) => ({ ...i, [t]: { origin: r, frameRef: s } }));
+const P = C(null), U = ({ children: t }) => {
+  const [o, a] = y({}), n = F({}), l = E((e, s, r) => {
+    a((i) => ({ ...i, [e]: { origin: s, frameRef: r } }));
+  }, []), u = E((e) => {
+    a((s) => {
+      const r = { ...s };
+      return delete r[e], r;
+    });
   }, []);
-  u(() => {
-    const t = (s = [], i) => {
-      s.forEach((d) => d(i));
-    }, r = (s) => {
-      var M, p, R, l, E;
-      if (!((M = s == null ? void 0 : s.data) != null && M.instanceId))
+  f(() => {
+    const e = (r = [], i) => {
+      r.forEach((d) => d(i));
+    }, s = (r) => {
+      var M, b, R, m, w;
+      if (!((M = r == null ? void 0 : r.data) != null && M.instanceId))
         return;
-      const { instanceId: i, type: d } = s.data, g = n.current;
-      t((p = g[i]) == null ? void 0 : p[d], s.data), t((R = g["*"]) == null ? void 0 : R[d], s.data), t((l = g[i]) == null ? void 0 : l["*"], s.data), t((E = g["*"]) == null ? void 0 : E["*"], s.data);
+      const { instanceId: i, type: d } = r.data, p = n.current;
+      e((b = p[i]) == null ? void 0 : b[d], r.data), e((R = p["*"]) == null ? void 0 : R[d], r.data), e((m = p[i]) == null ? void 0 : m["*"], r.data), e((w = p["*"]) == null ? void 0 : w["*"], r.data);
     };
-    return window.addEventListener("message", r), () => {
-      window.removeEventListener("message", r);
+    return window.addEventListener("message", s), () => {
+      window.removeEventListener("message", s);
     };
   }, [o]);
-  const a = y(
-    (t, r, s) => {
-      const i = o[t];
+  const c = E(
+    (e, s, r) => {
+      const i = o[e];
       if (!i) {
-        console.warn(`Origin not set for id: ${t}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${e}. Unable to send message.`);
         return;
       }
       i.frameRef.current.contentWindow.postMessage(
-        { type: r, ...s, instanceId: t },
+        { type: s, ...r, instanceId: e },
         i.origin
       );
     },
     [o]
-  ), b = y(
-    (t, r) => {
-      a(t, "load-options", r);
+  ), g = E(
+    (e, s) => {
+      c(e, "load-options", s);
     },
-    [a]
-  ), m = y(
-    (t, r) => {
-      a(t, "validate", r);
+    [c]
+  ), $ = E(
+    (e, s) => {
+      c(e, "validate", s);
     },
-    [a]
-  ), x = {
-    registerFrame: f,
-    sendMessage: a,
-    loadOptions: b,
-    validate: m,
-    addListener: (t, r, s) => (n.current[t] || (n.current[t] = {}), n.current[t][r] || (n.current[t][r] = []), n.current[t][r].push(s), () => {
-      n.current[t][r] = n.current[t][r].filter((i) => i !== s);
+    [c]
+  ), L = {
+    registerFrame: l,
+    unregisterFrame: u,
+    sendMessage: c,
+    loadOptions: g,
+    validate: $,
+    addListener: (e, s, r) => (n.current[e] || (n.current[e] = {}), n.current[e][s] || (n.current[e][s] = []), n.current[e][s].push(r), () => {
+      n.current[e][s] = n.current[e][s].filter((i) => i !== r);
     })
   };
-  return /* @__PURE__ */ $.createElement(P.Provider, { value: x }, e);
-}, I = {}, U = async (e) => {
+  return /* @__PURE__ */ x.createElement(P.Provider, { value: L }, t);
+}, I = {}, Z = async (t) => {
   try {
-    const o = new URL(e).origin;
+    const o = new URL(t).origin;
     if (I[o] !== void 0)
       return I[o];
     const n = await (await fetch(`${o}/mm-app-manifest.json`)).json();
@@ -64,66 +70,71 @@ const P = C(null), F = ({ children: e }) => {
   } catch {
   }
   return I[origin] = !1, !1;
-}, Z = async (e) => !!await U(e), j = (e, o, c) => {
+}, j = async (t) => !!await Z(t), O = (t, o, a) => {
   const n = A(P);
   if (n === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const f = L(c);
-  return u(() => {
-    f.current = c;
-  }, [c]), u(() => {
-    if (!(!e || !o))
+  const l = F(a);
+  return f(() => {
+    l.current = a;
+  }, [a]), f(() => {
+    if (!(!t || !o))
       return n.addListener(
-        e,
+        t,
         o,
-        (...a) => f.current(...a)
+        (...u) => l.current(...u)
       );
-  }, [n, e, o]), y(
-    (a, b) => n.sendMessage(e, a, b),
-    [n, e]
+  }, [n, t, o]), E(
+    (u, c) => n.sendMessage(t, u, c),
+    [n, t]
   );
 };
-F.propTypes = {
+U.propTypes = {
   children: h.node.isRequired
 };
-const O = v.default || v, T = O.iframe`
+const T = v.default || v, q = T.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${(e) => e.$isReady ? "visible" : "hidden"};
-`, q = ({
-  id: e,
+  visibility: ${(t) => t.$isReady ? "visible" : "hidden"};
+`, S = ({
+  id: t,
   src: o,
-  path: c,
+  path: a,
   onInit: n = () => {
   },
-  context: f,
-  isConfiguring: a,
-  ...b
+  context: l,
+  isConfiguring: u,
+  ...c
 }) => {
-  const m = L(), [x, t] = w(), [r, s] = w(0), { registerFrame: i, sendMessage: d } = A(P), [g, M] = w(!0), [p, R] = w();
-  return u(() => {
-    r && d(e, "set-context", { context: f });
-  }, [f, e, r]), u(() => {
-    c !== void 0 && R(c);
-  }, [c]), u(() => {
-    p === void 0 || !r || d(e, "navigate", { path: p });
-  }, [p, r, e, d]), u(() => {
-    r && d(e, "set-configuring", { isConfiguring: a });
-  }, [r, a]), u(() => {
-    !o || !e || !m || (async () => {
-      const l = await Z(o);
-      if (M(l), l) {
-        const E = new URL(o);
-        i(e, E.origin, m), n(), t(
-          `${E.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
-        );
-        return;
-      }
-    })();
-  }, [o, e, i, m]), j(e, "ready", () => s((l) => l + 1)), g ? /* @__PURE__ */ $.createElement(T, { $isReady: r, ref: m, src: x, ...b }) : /* @__PURE__ */ $.createElement(
+  const g = F(), [$, L] = y(), [e, s] = y(0), { registerFrame: r, unregisterFrame: i, sendMessage: d } = A(
+    P
+  ), [p, M] = y(!0), [b, R] = y();
+  return f(() => {
+    e && d(t, "set-context", { context: l });
+  }, [l, t, e]), f(() => {
+    a !== void 0 && R(a);
+  }, [a]), f(() => {
+    b === void 0 || !e || d(t, "navigate", { path: b });
+  }, [b, e, t, d]), f(() => {
+    e && d(t, "set-configuring", { isConfiguring: u });
+  }, [e, u]), f(() => {
+    if (!(!o || !t || !g))
+      return (async () => {
+        const m = await j(o);
+        if (M(m), m) {
+          const w = new URL(o);
+          r(t, w.origin, g), n(), L(
+            `${w.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`
+          );
+          return;
+        }
+      })(), () => {
+        i(t);
+      };
+  }, [o, t, r, g]), O(t, "ready", () => s((m) => m + 1)), p ? /* @__PURE__ */ x.createElement(q, { $isReady: e, ref: g, src: $, ...c }) : /* @__PURE__ */ x.createElement(
     "div",
     {
       style: {
@@ -133,20 +144,20 @@ const O = v.default || v, T = O.iframe`
         justifyContent: "center"
       }
     },
-    /* @__PURE__ */ $.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
+    /* @__PURE__ */ x.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
   );
 };
-q.propTypes = {
+S.propTypes = {
   id: h.string,
   src: h.string.isRequired,
   path: h.string,
   onInit: h.func
 };
 export {
-  q as MMEmbeddableZone,
+  S as MMEmbeddableZone,
   P as MMEmbeddableZoneContext,
-  F as MMEmbeddableZoneProvider,
-  U as getAppInfo,
-  Z as testIsEmbeddable,
-  j as useEmbeddedEffect
+  U as MMEmbeddableZoneProvider,
+  Z as getAppInfo,
+  j as testIsEmbeddable,
+  O as useEmbeddedEffect
 };

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

@@ -1,6 +1,6 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u["mm-react-embeddable"]={},u.React,u.PropTypes,u.styled))})(this,function(u,e,p,L){"use strict";const M=e.createContext(null),S=({children:t})=>{const[o,f]=e.useState({}),s=e.useRef({}),l=e.useCallback((n,r,i)=>{f(d=>({...d,[n]:{origin:r,frameRef:i}}))},[]);e.useEffect(()=>{const n=(i=[],d)=>{i.forEach(c=>c(d))},r=i=>{var I,g,C,m,h;if(!((I=i==null?void 0:i.data)!=null&&I.instanceId))return;const{instanceId:d,type:c}=i.data,E=s.current;n((g=E[d])==null?void 0:g[c],i.data),n((C=E["*"])==null?void 0:C[c],i.data),n((m=E[d])==null?void 0:m["*"],i.data),n((h=E["*"])==null?void 0:h["*"],i.data)};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[o]);const a=e.useCallback((n,r,i)=>{const d=o[n];if(!d){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}d.frameRef.current.contentWindow.postMessage({type:r,...i,instanceId:n},d.origin)},[o]),y=e.useCallback((n,r)=>{a(n,"load-options",r)},[a]),b=e.useCallback((n,r)=>{a(n,"validate",r)},[a]),$={registerFrame:l,sendMessage:a,loadOptions:y,validate:b,addListener:(n,r,i)=>(s.current[n]||(s.current[n]={}),s.current[n][r]||(s.current[n][r]=[]),s.current[n][r].push(i),()=>{s.current[n][r]=s.current[n][r].filter(d=>d!==i)})};return e.createElement(M.Provider,{value:$},t)},w={},Z=async t=>{try{const o=new URL(t).origin;if(w[o]!==void 0)return w[o];const s=await(await fetch(`${o}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return w[o]=s,s}catch{}return w[origin]=!1,!1},v=async t=>!!await Z(t),j=(t,o,f)=>{const s=e.useContext(M);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const l=e.useRef(f);return e.useEffect(()=>{l.current=f},[f]),e.useEffect(()=>{if(!(!t||!o))return s.addListener(t,o,(...a)=>l.current(...a))},[s,t,o]),e.useCallback((a,y)=>s.sendMessage(t,a,y),[s,t])};S.propTypes={children:p.node.isRequired};const x=(L.default||L).iframe`
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["mm-react-embeddable"]={},d.React,d.PropTypes,d.styled))})(this,function(d,e,y,S){"use strict";const M=e.createContext(null),Z=({children:n})=>{const[o,a]=e.useState({}),s=e.useRef({}),m=e.useCallback((t,i,r)=>{a(u=>({...u,[t]:{origin:i,frameRef:r}}))},[]),l=e.useCallback(t=>{a(i=>{const r={...i};return delete r[t],r})},[]);e.useEffect(()=>{const t=(r=[],u)=>{r.forEach(c=>c(u))},i=r=>{var I,p,C,b,h;if(!((I=r==null?void 0:r.data)!=null&&I.instanceId))return;const{instanceId:u,type:c}=r.data,g=s.current;t((p=g[u])==null?void 0:p[c],r.data),t((C=g["*"])==null?void 0:C[c],r.data),t((b=g[u])==null?void 0:b["*"],r.data),t((h=g["*"])==null?void 0:h["*"],r.data)};return window.addEventListener("message",i),()=>{window.removeEventListener("message",i)}},[o]);const f=e.useCallback((t,i,r)=>{const u=o[t];if(!u){console.warn(`Origin not set for id: ${t}. Unable to send message.`);return}u.frameRef.current.contentWindow.postMessage({type:i,...r,instanceId:t},u.origin)},[o]),E=e.useCallback((t,i)=>{f(t,"load-options",i)},[f]),$=e.useCallback((t,i)=>{f(t,"validate",i)},[f]),L={registerFrame:m,unregisterFrame:l,sendMessage:f,loadOptions:E,validate:$,addListener:(t,i,r)=>(s.current[t]||(s.current[t]={}),s.current[t][i]||(s.current[t][i]=[]),s.current[t][i].push(r),()=>{s.current[t][i]=s.current[t][i].filter(u=>u!==r)})};return e.createElement(M.Provider,{value:L},n)},w={},v=async n=>{try{const o=new URL(n).origin;if(w[o]!==void 0)return w[o];const s=await(await fetch(`${o}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return w[o]=s,s}catch{}return w[origin]=!1,!1},x=async n=>!!await v(n),F=(n,o,a)=>{const s=e.useContext(M);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(a);return e.useEffect(()=>{m.current=a},[a]),e.useEffect(()=>{if(!(!n||!o))return s.addListener(n,o,(...l)=>m.current(...l))},[s,n,o]),e.useCallback((l,f)=>s.sendMessage(n,l,f),[s,n])};Z.propTypes={children:y.node.isRequired};const q=(S.default||S).iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${t=>t.$isReady?"visible":"hidden"};
-`,q=({id:t,src:o,path:f,onInit:s=()=>{},context:l,isConfiguring:a,...y})=>{const b=e.useRef(),[$,n]=e.useState(),[r,i]=e.useState(0),{registerFrame:d,sendMessage:c}=e.useContext(M),[E,I]=e.useState(!0),[g,C]=e.useState();return e.useEffect(()=>{r&&c(t,"set-context",{context:l})},[l,t,r]),e.useEffect(()=>{f!==void 0&&C(f)},[f]),e.useEffect(()=>{g===void 0||!r||c(t,"navigate",{path:g})},[g,r,t,c]),e.useEffect(()=>{r&&c(t,"set-configuring",{isConfiguring:a})},[r,a]),e.useEffect(()=>{!o||!t||!b||(async()=>{const m=await v(o);if(I(m),m){const h=new URL(o);d(t,h.origin,b),s(),n(`${h.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`);return}})()},[o,t,d,b]),j(t,"ready",()=>i(m=>m+1)),E?e.createElement(x,{$isReady:r,ref:b,src:$,...y}):e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};q.propTypes={id:p.string,src:p.string.isRequired,path:p.string,onInit:p.func},u.MMEmbeddableZone=q,u.MMEmbeddableZoneContext=M,u.MMEmbeddableZoneProvider=S,u.getAppInfo=Z,u.testIsEmbeddable=v,u.useEmbeddedEffect=j,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+  visibility: ${n=>n.$isReady?"visible":"hidden"};
+`,j=({id:n,src:o,path:a,onInit:s=()=>{},context:m,isConfiguring:l,...f})=>{const E=e.useRef(),[$,L]=e.useState(),[t,i]=e.useState(0),{registerFrame:r,unregisterFrame:u,sendMessage:c}=e.useContext(M),[g,I]=e.useState(!0),[p,C]=e.useState();return e.useEffect(()=>{t&&c(n,"set-context",{context:m})},[m,n,t]),e.useEffect(()=>{a!==void 0&&C(a)},[a]),e.useEffect(()=>{p===void 0||!t||c(n,"navigate",{path:p})},[p,t,n,c]),e.useEffect(()=>{t&&c(n,"set-configuring",{isConfiguring:l})},[t,l]),e.useEffect(()=>{if(!(!o||!n||!E))return(async()=>{const b=await x(o);if(I(b),b){const h=new URL(o);r(n,h.origin,E),s(),L(`${h.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`);return}})(),()=>{u(n)}},[o,n,r,E]),F(n,"ready",()=>i(b=>b+1)),g?e.createElement(q,{$isReady:t,ref:E,src:$,...f}):e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};j.propTypes={id:y.string,src:y.string.isRequired,path:y.string,onInit:y.func},d.MMEmbeddableZone=j,d.MMEmbeddableZoneContext=M,d.MMEmbeddableZoneProvider=Z,d.getAppInfo=v,d.testIsEmbeddable=x,d.useEmbeddedEffect=F,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/package.json

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