@machinemetrics/mm-react-embeddable 1.1.0 → 1.1.1-0

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

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

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

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

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

package/package.json

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