@machinemetrics/mm-react-embeddable 0.10.3 → 0.11.0-0

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

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

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

@@ -1,138 +1,157 @@
-import x, { createContext as C, useState as y, useRef as F, useCallback as E, useEffect as u, useContext as A } from "react";
-import h from "prop-types";
-import v from "styled-components";
-const P = C(null), U = ({ children: t }) => {
-  const [s, c] = y({}), o = F({}), f = E((e, n, r) => {
-    c((i) => ({ ...i, [e]: { origin: n, frameRef: r } }));
-  }, []), g = E((e) => {
+import I, { createContext as P, useState as h, useRef as v, useCallback as E, useEffect as m, useContext as Z } from "react";
+import w from "prop-types";
+import L from "styled-components";
+const x = P(null), S = ({ children: r }) => {
+  const [s, c] = h({}), o = v({}), u = E((e, n, t) => {
+    c((i) => ({ ...i, [e]: { origin: n, frameRef: t } }));
+  }, []), d = E((e) => {
     c((n) => {
-      const r = { ...n };
-      return delete r[e], r;
+      const t = { ...n };
+      return delete t[e], t;
     });
   }, []);
-  u(() => {
-    const e = (r = [], i) => {
-      r.forEach((a) => a(i));
-    }, n = (r) => {
-      var R, b, M, m, w;
-      if (!((R = r == null ? void 0 : r.data) != null && R.instanceId))
+  m(() => {
+    const e = (t = [], i) => {
+      t.forEach((a) => a(i));
+    }, n = (t) => {
+      var y, p, R, g, M;
+      if (!((y = t == null ? void 0 : t.data) != null && y.instanceId))
         return;
-      const { instanceId: i, type: a } = r.data, d = o.current;
-      e((b = d[i]) == null ? void 0 : b[a], r.data), e((M = d["*"]) == null ? void 0 : M[a], r.data), e((m = d[i]) == null ? void 0 : m["*"], r.data), e((w = d["*"]) == null ? void 0 : w["*"], r.data);
+      const { instanceId: i, type: a } = t.data, l = o.current;
+      e((p = l[i]) == null ? void 0 : p[a], t.data), e((R = l["*"]) == null ? void 0 : R[a], t.data), e((g = l[i]) == null ? void 0 : g["*"], t.data), e((M = l["*"]) == null ? void 0 : M["*"], t.data);
     };
     return window.addEventListener("message", n), () => {
       window.removeEventListener("message", n);
     };
   }, [s]);
-  const l = E(
-    (e, n, r) => {
-      var a, d;
+  const f = E(
+    (e, n, t) => {
+      var a, l;
       const i = s[e];
       if (!i) {
         console.warn(`Origin not set for id: ${e}. Unable to send message.`);
         return;
       }
-      (d = (a = i == null ? void 0 : i.frameRef) == null ? void 0 : a.current) != null && d.contentWindow && i.frameRef.current.contentWindow.postMessage(
-        { type: n, ...r, instanceId: e },
+      (l = (a = i == null ? void 0 : i.frameRef) == null ? void 0 : a.current) != null && l.contentWindow && i.frameRef.current.contentWindow.postMessage(
+        { type: n, ...t, instanceId: e },
         i.origin
       );
     },
     [s]
-  ), p = E(
+  ), b = E(
     (e, n) => {
-      l(e, "load-options", n);
+      f(e, "load-options", n);
     },
-    [l]
-  ), $ = E(
+    [f]
+  ), C = E(
     (e, n) => {
-      l(e, "validate", n);
+      f(e, "validate", n);
     },
-    [l]
-  ), L = {
-    registerFrame: f,
-    unregisterFrame: g,
-    sendMessage: l,
-    loadOptions: p,
-    validate: $,
-    addListener: (e, n, r) => (o.current[e] || (o.current[e] = {}), o.current[e][n] || (o.current[e][n] = []), o.current[e][n].push(r), () => {
-      o.current[e][n] = o.current[e][n].filter((i) => i !== r);
+    [f]
+  ), $ = {
+    registerFrame: u,
+    unregisterFrame: d,
+    sendMessage: f,
+    loadOptions: b,
+    validate: C,
+    addListener: (e, n, t) => (o.current[e] || (o.current[e] = {}), o.current[e][n] || (o.current[e][n] = []), o.current[e][n].push(t), () => {
+      o.current[e][n] = o.current[e][n].filter((i) => i !== t);
     })
   };
-  return /* @__PURE__ */ x.createElement(P.Provider, { value: L }, t);
-}, I = {}, Z = async (t) => {
+  return /* @__PURE__ */ I.createElement(x.Provider, { value: $ }, r);
+}, F = {}, A = async (r) => {
   try {
-    const s = new URL(t).origin;
-    if (I[s] !== void 0)
-      return I[s];
+    const s = new URL(r).origin;
+    if (F[s] !== void 0)
+      return F[s];
     const o = await (await fetch(`${s}/mm-app-manifest.json`)).json();
     if (!o.version)
       throw new Error("Invalid manifest");
-    return I[s] = o, o;
+    return F[s] = o, o;
   } catch {
   }
-  return I[origin] = !1, !1;
-}, j = async (t) => !!await Z(t), O = (t, s, c) => {
-  const o = A(P);
+  return F[origin] = !1, !1;
+}, U = async (r) => !!await A(r), j = (r, s, c) => {
+  const o = Z(x);
   if (o === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const f = F(c);
-  u(() => {
-    f.current = c;
-  }, [c]), u(() => {
-    if (!(!t || !s))
+  const u = v(c);
+  m(() => {
+    u.current = c;
+  }, [c]), m(() => {
+    if (!(!r || !s))
       return o.addListener(
-        t,
+        r,
         s,
-        (...g) => f.current(...g)
+        (...d) => u.current(...d)
       );
-  }, [o, t, s]);
+  }, [o, r, s]);
 };
-U.propTypes = {
-  children: h.node.isRequired
+S.propTypes = {
+  children: w.node.isRequired
 };
-const T = v.default || v, q = T.iframe`
+const O = L.default || L, T = O.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${(t) => t.$isReady ? "visible" : "hidden"};
-`, W = ({
-  id: t,
+  visibility: ${(r) => r.$isReady ? "visible" : "hidden"};
+`, q = ({
+  id: r,
   src: s,
   path: c,
   onInit: o = () => {
   },
-  context: f,
-  isConfiguring: g,
-  ...l
+  context: u,
+  params: d,
+  ...f
 }) => {
-  const p = F(), [$, L] = y(), [e, n] = y(0), { registerFrame: r, unregisterFrame: i, sendMessage: a } = A(
-    P
-  ), [d, R] = y(!0), [b, M] = y();
-  return u(() => {
-    e && a(t, "set-context", { context: f });
-  }, [f, t, e]), u(() => {
-    c !== void 0 && M(c);
-  }, [c]), u(() => {
-    b === void 0 || !e || a(t, "navigate", { path: b });
-  }, [b, e, t, a]), u(() => {
-    e && a(t, "set-configuring", { isConfiguring: g });
-  }, [e, g]), u(() => {
-    if (!(!s || !t || !p))
+  if ("isConfiguring" in f)
+    return console.error(
+      "isConfiguring must be passed via the params prop to MMEmbeddableZone"
+    ), null;
+  if ("colorMode" in u)
+    return console.error(
+      "colorMode must be passed via the params prop to MMEmbeddableZone"
+    ), null;
+  if ("isFullScreen" in u)
+    return console.error(
+      "isFullScreen must be passed via the params prop to MMEmbeddableZone"
+    ), null;
+  const b = v(), [C, $] = h(), [e, n] = h(0), { registerFrame: t, unregisterFrame: i, sendMessage: a } = Z(
+    x
+  ), [l, y] = h(!0), [p, R] = h();
+  return m(() => {
+    e && a(r, "set-context", {
+      context: {
+        ...u,
+        // TODO: Remove this once everything is migrated to params
+        colorMode: d.colorMode,
+        isFullScreen: d.isFullScreen
+      }
+    });
+  }, [u, d.colorMode, d.isFullScreen, r, e]), m(() => {
+    e && (a(r, "set-params", { params: d }), a(r, "set-configuring", { isConfiguring: d.isConfiguring }));
+  }, [d, r, e]), m(() => {
+    c !== void 0 && R(c);
+  }, [c]), m(() => {
+    p === void 0 || !e || a(r, "navigate", { path: p });
+  }, [p, e, r, a]), m(() => {
+    if (!(!s || !r || !b))
       return (async () => {
-        const m = await j(s);
-        if (R(m), m) {
-          const w = new URL(s);
-          r(t, w.origin, p), o(), L(
-            `${w.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`
+        const g = await U(s);
+        if (y(g), g) {
+          const M = new URL(s);
+          t(r, M.origin, b), o(), $(
+            `${M.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`
           );
           return;
         }
       })(), () => {
-        i(t);
+        i(r);
       };
-  }, [s, t, r, p]), O(t, "ready", () => n((m) => m + 1)), d ? /* @__PURE__ */ x.createElement(q, { $isReady: e, ref: p, src: $, ...l }) : /* @__PURE__ */ x.createElement(
+  }, [s, r, t, b]), j(r, "ready", () => n((g) => g + 1)), l ? /* @__PURE__ */ I.createElement(T, { $isReady: e, ref: b, src: C, ...f }) : /* @__PURE__ */ I.createElement(
     "div",
     {
       style: {
@@ -142,20 +161,20 @@ const T = v.default || v, q = T.iframe`
         justifyContent: "center"
       }
     },
-    /* @__PURE__ */ x.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
+    /* @__PURE__ */ I.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
   );
 };
-W.propTypes = {
-  id: h.string,
-  src: h.string.isRequired,
-  path: h.string,
-  onInit: h.func
+q.propTypes = {
+  id: w.string,
+  src: w.string.isRequired,
+  path: w.string,
+  onInit: w.func
 };
 export {
-  W as MMEmbeddableZone,
-  P as MMEmbeddableZoneContext,
-  U as MMEmbeddableZoneProvider,
-  Z as getAppInfo,
-  j as testIsEmbeddable,
-  O as useEmbeddedEffect
+  q as MMEmbeddableZone,
+  x as MMEmbeddableZoneContext,
+  S as MMEmbeddableZoneProvider,
+  A as getAppInfo,
+  U as testIsEmbeddable,
+  j 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,y,S){"use strict";const w=e.createContext(null),Z=({children:n})=>{const[i,f]=e.useState({}),o=e.useRef({}),l=e.useCallback((t,s,r)=>{f(d=>({...d,[t]:{origin:s,frameRef:r}}))},[]),E=e.useCallback(t=>{f(s=>{const r={...s};return delete r[t],r})},[]);e.useEffect(()=>{const t=(r=[],d)=>{r.forEach(a=>a(d))},s=r=>{var I,p,C,b,h;if(!((I=r==null?void 0:r.data)!=null&&I.instanceId))return;const{instanceId:d,type:a}=r.data,c=o.current;t((p=c[d])==null?void 0:p[a],r.data),t((C=c["*"])==null?void 0:C[a],r.data),t((b=c[d])==null?void 0:b["*"],r.data),t((h=c["*"])==null?void 0:h["*"],r.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[i]);const m=e.useCallback((t,s,r)=>{var a,c;const d=i[t];if(!d){console.warn(`Origin not set for id: ${t}. Unable to send message.`);return}(c=(a=d==null?void 0:d.frameRef)==null?void 0:a.current)!=null&&c.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:s,...r,instanceId:t},d.origin)},[i]),g=e.useCallback((t,s)=>{m(t,"load-options",s)},[m]),$=e.useCallback((t,s)=>{m(t,"validate",s)},[m]),L={registerFrame:l,unregisterFrame:E,sendMessage:m,loadOptions:g,validate:$,addListener:(t,s,r)=>(o.current[t]||(o.current[t]={}),o.current[t][s]||(o.current[t][s]=[]),o.current[t][s].push(r),()=>{o.current[t][s]=o.current[t][s].filter(d=>d!==r)})};return e.createElement(w.Provider,{value:L},n)},M={},v=async n=>{try{const i=new URL(n).origin;if(M[i]!==void 0)return M[i];const o=await(await fetch(`${i}/mm-app-manifest.json`)).json();if(!o.version)throw new Error("Invalid manifest");return M[i]=o,o}catch{}return M[origin]=!1,!1},x=async n=>!!await v(n),F=(n,i,f)=>{const o=e.useContext(w);if(o===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const l=e.useRef(f);e.useEffect(()=>{l.current=f},[f]),e.useEffect(()=>{if(!(!n||!i))return o.addListener(n,i,(...E)=>l.current(...E))},[o,n,i])};Z.propTypes={children:y.node.isRequired};const q=(S.default||S).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,M,Z){"use strict";const y=e.createContext(null),v=({children:t})=>{const[o,f]=e.useState({}),i=e.useRef({}),c=e.useCallback((n,s,r)=>{f(d=>({...d,[n]:{origin:s,frameRef:r}}))},[]),l=e.useCallback(n=>{f(s=>{const r={...s};return delete r[n],r})},[]);e.useEffect(()=>{const n=(r=[],d)=>{r.forEach(a=>a(d))},s=r=>{var C,p,I,g,h;if(!((C=r==null?void 0:r.data)!=null&&C.instanceId))return;const{instanceId:d,type:a}=r.data,b=i.current;n((p=b[d])==null?void 0:p[a],r.data),n((I=b["*"])==null?void 0:I[a],r.data),n((g=b[d])==null?void 0:g["*"],r.data),n((h=b["*"])==null?void 0:h["*"],r.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[o]);const m=e.useCallback((n,s,r)=>{var a,b;const d=o[n];if(!d){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}(b=(a=d==null?void 0:d.frameRef)==null?void 0:a.current)!=null&&b.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:s,...r,instanceId:n},d.origin)},[o]),E=e.useCallback((n,s)=>{m(n,"load-options",s)},[m]),S=e.useCallback((n,s)=>{m(n,"validate",s)},[m]),F={registerFrame:c,unregisterFrame:l,sendMessage:m,loadOptions:E,validate:S,addListener:(n,s,r)=>(i.current[n]||(i.current[n]={}),i.current[n][s]||(i.current[n][s]=[]),i.current[n][s].push(r),()=>{i.current[n][s]=i.current[n][s].filter(d=>d!==r)})};return e.createElement(y.Provider,{value:F},t)},w={},$=async t=>{try{const o=new URL(t).origin;if(w[o]!==void 0)return w[o];const i=await(await fetch(`${o}/mm-app-manifest.json`)).json();if(!i.version)throw new Error("Invalid manifest");return w[o]=i,i}catch{}return w[origin]=!1,!1},L=async t=>!!await $(t),j=(t,o,f)=>{const i=e.useContext(y);if(i===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const c=e.useRef(f);e.useEffect(()=>{c.current=f},[f]),e.useEffect(()=>{if(!(!t||!o))return i.addListener(t,o,(...l)=>c.current(...l))},[i,t,o])};v.propTypes={children:M.node.isRequired};const x=(Z.default||Z).iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${n=>n.$isReady?"visible":"hidden"};
-`,j=({id:n,src:i,path:f,onInit:o=()=>{},context:l,isConfiguring:E,...m})=>{const g=e.useRef(),[$,L]=e.useState(),[t,s]=e.useState(0),{registerFrame:r,unregisterFrame:d,sendMessage:a}=e.useContext(w),[c,I]=e.useState(!0),[p,C]=e.useState();return e.useEffect(()=>{t&&a(n,"set-context",{context:l})},[l,n,t]),e.useEffect(()=>{f!==void 0&&C(f)},[f]),e.useEffect(()=>{p===void 0||!t||a(n,"navigate",{path:p})},[p,t,n,a]),e.useEffect(()=>{t&&a(n,"set-configuring",{isConfiguring:E})},[t,E]),e.useEffect(()=>{if(!(!i||!n||!g))return(async()=>{const b=await x(i);if(I(b),b){const h=new URL(i);r(n,h.origin,g),o(),L(`${h.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`);return}})(),()=>{d(n)}},[i,n,r,g]),F(n,"ready",()=>s(b=>b+1)),c?e.createElement(q,{$isReady:t,ref:g,src:$,...m}):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},u.MMEmbeddableZone=j,u.MMEmbeddableZoneContext=w,u.MMEmbeddableZoneProvider=Z,u.getAppInfo=v,u.testIsEmbeddable=x,u.useEmbeddedEffect=F,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+  visibility: ${t=>t.$isReady?"visible":"hidden"};
+`,q=({id:t,src:o,path:f,onInit:i=()=>{},context:c,params:l,...m})=>{if("isConfiguring"in m)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 E=e.useRef(),[S,F]=e.useState(),[n,s]=e.useState(0),{registerFrame:r,unregisterFrame:d,sendMessage:a}=e.useContext(y),[b,C]=e.useState(!0),[p,I]=e.useState();return e.useEffect(()=>{n&&a(t,"set-context",{context:{...c,colorMode:l.colorMode,isFullScreen:l.isFullScreen}})},[c,l.colorMode,l.isFullScreen,t,n]),e.useEffect(()=>{n&&(a(t,"set-params",{params:l}),a(t,"set-configuring",{isConfiguring:l.isConfiguring}))},[l,t,n]),e.useEffect(()=>{f!==void 0&&I(f)},[f]),e.useEffect(()=>{p===void 0||!n||a(t,"navigate",{path:p})},[p,n,t,a]),e.useEffect(()=>{if(!(!o||!t||!E))return(async()=>{const g=await L(o);if(C(g),g){const h=new URL(o);r(t,h.origin,E),i(),F(`${h.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`);return}})(),()=>{d(t)}},[o,t,r,E]),j(t,"ready",()=>s(g=>g+1)),b?e.createElement(x,{$isReady:n,ref:E,src:S,...m}):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:M.string,src:M.string.isRequired,path:M.string,onInit:M.func},u.MMEmbeddableZone=q,u.MMEmbeddableZoneContext=y,u.MMEmbeddableZoneProvider=v,u.getAppInfo=$,u.testIsEmbeddable=L,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.3",
+  "version": "0.11.0-0",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",