@machinemetrics/mm-react-embeddable 0.10.2 → 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[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`
+"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: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;
+`,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,140 +1,157 @@
-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), 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;
+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 t = { ...n };
+      return delete t[e], t;
     });
   }, []);
-  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))
+  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: 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);
+      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", s), () => {
-      window.removeEventListener("message", s);
+    return window.addEventListener("message", n), () => {
+      window.removeEventListener("message", n);
     };
-  }, [o]);
-  const c = E(
-    (e, s, r) => {
-      const i = o[e];
+  }, [s]);
+  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;
       }
-      i.frameRef.current.contentWindow.postMessage(
-        { type: s, ...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
       );
     },
-    [o]
-  ), g = E(
-    (e, s) => {
-      c(e, "load-options", s);
+    [s]
+  ), b = E(
+    (e, n) => {
+      f(e, "load-options", n);
     },
-    [c]
-  ), $ = E(
-    (e, s) => {
-      c(e, "validate", s);
+    [f]
+  ), C = E(
+    (e, n) => {
+      f(e, "validate", n);
     },
-    [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);
+    [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 o = new URL(t).origin;
-    if (I[o] !== void 0)
-      return I[o];
-    const n = await (await fetch(`${o}/mm-app-manifest.json`)).json();
-    if (!n.version)
+    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[o] = n, n;
+    return F[s] = o, o;
   } catch {
   }
-  return I[origin] = !1, !1;
-}, j = async (t) => !!await Z(t), O = (t, o, a) => {
-  const n = A(P);
-  if (n === null)
+  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 l = F(a);
-  return f(() => {
-    l.current = a;
-  }, [a]), f(() => {
-    if (!(!t || !o))
-      return n.addListener(
-        t,
-        o,
-        (...u) => l.current(...u)
+  const u = v(c);
+  m(() => {
+    u.current = c;
+  }, [c]), m(() => {
+    if (!(!r || !s))
+      return o.addListener(
+        r,
+        s,
+        (...d) => u.current(...d)
       );
-  }, [n, t, o]), E(
-    (u, c) => n.sendMessage(t, u, c),
-    [n, t]
-  );
+  }, [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"};
-`, S = ({
-  id: t,
-  src: o,
-  path: a,
-  onInit: n = () => {
+  visibility: ${(r) => r.$isReady ? "visible" : "hidden"};
+`, q = ({
+  id: r,
+  src: s,
+  path: c,
+  onInit: o = () => {
   },
-  context: l,
-  isConfiguring: u,
-  ...c
+  context: u,
+  params: d,
+  ...f
 }) => {
-  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))
+  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(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}`
+        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);
       };
-  }, [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(
+  }, [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: {
@@ -144,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.")
   );
 };
-S.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 {
-  S 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(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`
+(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: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"})});
+  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.2",
+  "version": "0.11.0-0",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",