@machinemetrics/mm-react-embeddable 1.0.11-0 → 1.0.12

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "1.0.11-0",
+  "version": "1.0.12",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",
@@ -26,8 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "prop-types": "^15.8.1",
-    "vite": "^5.4.8"
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
@@ -36,10 +35,11 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^1.6.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^4.0.10",
     "jsdom": "^24.1.3",
     "prettier": "^3.3.3",
-    "vitest": "^1.6.1"
+    "vite": "^7.2.2",
+    "vitest": "^4.0.10"
   }
 }