@machinemetrics/mm-react-embeddable 1.1.2-0 → 1.1.2-1

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

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

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

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

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

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

package/package.json

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