@machinemetrics/mm-react-embeddable 0.10.1-0 → 0.10.1

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

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

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

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

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

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

package/package.json

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