@machinemetrics/mm-react-embeddable 1.4.0-3 → 1.4.0-4

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

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),h=require("prop-types"),j=require("styled-components"),B=e.createContext(null),Z=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ee=2e4,P=r=>{try{return new URL(r).origin}catch{return null}},W=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const u=r.split(".");return u.length<=2?r:u.slice(-2).join(".")},D=(r,u)=>{try{const i=new URL(r),d=new URL(u);return i.protocol!==d.protocol?!0:W(i.hostname)!==W(d.hostname)}catch{return!0}},H=(r,{onBlocked:u,onClosed:i})=>{const d=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!d)return u(),()=>{};const m=setInterval(()=>{d.closed&&(clearInterval(m),i())},1e3);return()=>clearInterval(m)},K=({children:r,launcher:u})=>{const i=e.useContext(B),[d,m]=e.useState({}),[E,R]=e.useState({}),[x,M]=e.useState({}),[$,w]=e.useState({}),S=e.useRef(x);S.current=x;const g=e.useRef(null),k=e.useRef({}),I=e.useRef({}),C=e.useCallback(t=>{const n=I.current[t];if(!n)return;const s=f=>!f[t]||f[t].clientId?f:{...f,[t]:{...f[t],clientId:n}};m(s),w(s)},[]),O=e.useCallback((t,n)=>{const s=P(t==null?void 0:t.authUrl);s&&(w(f=>f[s]?f:{...f,[s]:{origin:s,reason:n,clientId:I.current[s]||null}}),C(s))},[C]),z=e.useCallback((t,{v2:n=!1}={})=>{const s=P(t==null?void 0:t.authUrl);s&&(n&&S.current[s]||(m(f=>f[s]?f:{...f,[s]:{origin:s,authUrl:t.authUrl,silentUrl:t.silentUrl||null,status:n&&t.silentUrl?"silent":"interactive",v2:n,clientId:t.clientId||I.current[s]||null,popupBlocked:!1}}),C(s)))},[C]),y=e.useCallback(t=>{m(n=>{if(!n[t])return n;const s={...n};return delete s[t],s})},[]),o=e.useCallback(t=>{t&&(y(t),R(n=>({...n,[t]:(n[t]||0)+1})))},[y]),l=e.useCallback(t=>{m(n=>!n[t]||n[t].status==="interactive"?n:{...n,[t]:{...n[t],status:"interactive"}})},[]),c=e.useCallback(t=>{y(t.origin)},[y]),a=e.useCallback(t=>{const n=P(t==null?void 0:t.authUrl);if(n&&D(n,window.location.origin)){O(t,"cross-site-legacy");return}z(t)},[z,O]);e.useEffect(()=>{if(!i)return;const t=[i.addListener("*","init",n=>{n!=null&&n.origin&&n.clientId&&(I.current[n.origin]=n.clientId,C(n.origin))}),i.addListener("*","authorize",a),i.addListener("*","login",a),i.addListener("*","credential-request",n=>z(n,{v2:!0})),i.addListener("*","authorized",n=>{n!=null&&n.accessToken||o(P(n==null?void 0:n.authUrl))})];return()=>t.forEach(n=>n())},[i,a,z,o,C]),e.useEffect(()=>{const t=n=>{const s=n==null?void 0:n.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const f=P(s.authUrl);if(!(!f||n.origin!==f)){if(s.type==="authorized"&&s.accessToken){M(T=>({...T,[f]:{accessToken:s.accessToken}})),y(f);return}s.type==="authorize-failed"&&l(f)}};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)},[y,l]),e.useEffect(()=>{const t=k.current;Object.values(d).forEach(n=>{n.status==="silent"&&!t[n.origin]&&(t[n.origin]=setTimeout(()=>{delete t[n.origin],l(n.origin)},ee))}),Object.keys(t).forEach(n=>{(!d[n]||d[n].status!=="silent")&&(clearTimeout(t[n]),delete t[n])})},[d,l]),e.useEffect(()=>()=>{g.current&&g.current(),Object.values(k.current).forEach(clearTimeout)},[]);const b=e.useCallback(t=>{g.current&&(g.current(),g.current=null);const n=u||H;g.current=n(t,{onBlocked:()=>{m(s=>s[t.origin]?{...s,[t.origin]:{...s[t.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(t.v2){m(s=>!s[t.origin]||!s[t.origin].silentUrl?s:{...s,[t.origin]:{...s[t.origin],status:"silent"}});return}o(t.origin)}})},[u,o]),p={pending:Object.values(d).filter(t=>t.status==="interactive"),authorize:b,dismiss:c,originEpochs:E,credentials:x,unsupported:$},U=Object.values(d).filter(t=>t.status==="silent"&&t.silentUrl);return e.createElement(Z.Provider,{value:p},r,U.map(t=>e.createElement("iframe",{key:`mm-silent-auth-${t.origin}`,src:t.silentUrl,title:`MachineMetrics silent authorization (${t.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};K.propTypes={children:h.node,launcher:h.func};const V=()=>e.useContext(Z),G=r=>{const{originEpochs:u}=e.useContext(Z),i=P(r);return i&&u[i]||0},J=r=>{const{credentials:u}=e.useContext(Z),i=P(r);return i&&u[i]||null},Q=r=>{const{unsupported:u}=e.useContext(Z),i=P(r);return i&&u[i]||null},X=({children:r,authorizationLauncher:u})=>{const[i,d]=e.useState({}),[m,E]=e.useState({}),R=e.useRef({}),x=e.useRef({}),M=e.useRef({}),$=e.useCallback((o,l)=>{var c;return!!((c=M.current[o])!=null&&c.has(l))},[]),w=e.useCallback((o,l,c)=>{d(a=>({...a,[o]:{origin:l,frameRef:c}}))},[]),S=e.useCallback(o=>{d(l=>{const c={...l};return delete c[o],c}),E(l=>{const c={...l};return delete c[o],c}),delete M.current[o]},[]);e.useEffect(()=>{const o=(c=[],a)=>{c.forEach(b=>b(a))},l=c=>{var U,t,n,s,f;if(!((U=c==null?void 0:c.data)!=null&&U.instanceId))return;const{instanceId:a,type:b}=c.data,p=R.current;if(b==="response"){const{callbackId:T,response:A,error:F}=c.data,L=x.current[T];L&&(L(A,F),delete x.current[T]);return}if(b==="mark-registered"){const{requestType:T}=c.data;M.current[a]||(M.current[a]=new Set),M.current[a].add(T);return}b==="ready"&&E(T=>({...T,[a]:!0})),o((t=p[a])==null?void 0:t[b],c.data),o((n=p["*"])==null?void 0:n[b],c.data),o((s=p[a])==null?void 0:s["*"],c.data),o((f=p["*"])==null?void 0:f["*"],c.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[i]);const g=e.useCallback((o,l,c)=>{var b,p;const a=i[o];if(!a){console.warn(`Origin not set for id: ${o}. Unable to send message.`);return}(p=(b=a==null?void 0:a.frameRef)==null?void 0:b.current)!=null&&p.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...c,instanceId:o},a.origin)},[i]),k=e.useRef(0),I=e.useCallback(()=>`${Date.now()}-${++k.current}`,[]),C=e.useCallback(async(o,l,c={})=>new Promise((a,b)=>{const p=I(),U=(t,n)=>{delete x.current[p],n?b(n):a(t)};x.current[p]=U,g(o,"request",{callbackId:p,requestType:l,data:c})}),[g]),O=e.useCallback((o,l)=>{g(o,"load-options",l)},[g]),z=e.useCallback((o,l)=>{g(o,"validate",l)},[g]),y=e.useMemo(()=>({registerFrame:w,unregisterFrame:S,sendMessage:g,sendRequest:C,loadOptions:O,validate:z,hasHandler:$,readyFrames:m,addListener:(o,l,c)=>(R.current[o]||(R.current[o]={}),R.current[o][l]||(R.current[o][l]=[]),R.current[o][l].push(c),()=>{R.current[o][l]=R.current[o][l].filter(a=>a!==c)})}),[w,S,g,C,O,z,$,m]);return e.createElement(B.Provider,{value:y},e.createElement(K,{launcher:u},r))},q=(r,u,i)=>{const d=e.useContext(B);if(d===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(i);e.useEffect(()=>{m.current=i},[i]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const E=u.substring(4);return d.readyFrames[r]&&d.sendMessage(r,"subscribe-key",{keyChord:E}),d.addListener(r,`key-pressed:${E}`,(...x)=>m.current(...x))}return d.addListener(r,u,(...E)=>m.current(...E))}},[d,r,u])};X.propTypes={children:h.node.isRequired,authorizationLauncher:h.func};const v=j.default||j,te=1e4,ne="credentials",_=(r,u)=>`${r}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${ne}`,re=v.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),h=require("prop-types"),j=require("styled-components"),B=e.createContext(null),Z=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),v=typeof window!="undefined"&&window.location.protocol==="https:",te=8e3,A=r=>{try{return new URL(r).origin}catch{return null}},W=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const c=r.split(".");return c.length<=2?r:c.slice(-2).join(".")},H=(r,c)=>{try{const o=new URL(r),d=new URL(c);return o.protocol!==d.protocol?!0:W(o.hostname)!==W(d.hostname)}catch{return!0}},K=(r,{onBlocked:c,onClosed:o})=>{const d=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!d)return c(),()=>{};const m=setInterval(()=>{d.closed&&(clearInterval(m),o())},1e3);return()=>clearInterval(m)},V=({children:r,launcher:c})=>{const o=e.useContext(B),[d,m]=e.useState({}),[E,R]=e.useState({}),[w,M]=e.useState({}),[P,k]=e.useState({}),S=e.useRef(w);S.current=w;const g=e.useRef(null),x=e.useRef({}),I=e.useRef({}),C=e.useCallback(t=>{const n=I.current[t];if(!n)return;const s=f=>!f[t]||f[t].clientId?f:{...f,[t]:{...f[t],clientId:n}};m(s),k(s)},[]),O=e.useCallback((t,n)=>{const s=A(t==null?void 0:t.authUrl);s&&(k(f=>f[s]?f:{...f,[s]:{origin:s,reason:n,clientId:I.current[s]||null}}),C(s))},[C]),z=e.useCallback((t,{v2:n=!1}={})=>{const s=A(t==null?void 0:t.authUrl);s&&(n&&S.current[s]||(m(f=>f[s]?f:{...f,[s]:{origin:s,authUrl:t.authUrl,silentUrl:t.silentUrl||null,status:n&&t.silentUrl&&v?"silent":"interactive",v2:n,clientId:t.clientId||I.current[s]||null,popupBlocked:!1}}),C(s)))},[C]),y=e.useCallback(t=>{m(n=>{if(!n[t])return n;const s={...n};return delete s[t],s})},[]),i=e.useCallback(t=>{t&&(y(t),R(n=>({...n,[t]:(n[t]||0)+1})))},[y]),l=e.useCallback(t=>{m(n=>!n[t]||n[t].status==="interactive"?n:{...n,[t]:{...n[t],status:"interactive"}})},[]),u=e.useCallback(t=>{y(t.origin)},[y]),a=e.useCallback(t=>{const n=A(t==null?void 0:t.authUrl);if(n&&H(n,window.location.origin)){O(t,"cross-site-legacy");return}z(t)},[z,O]);e.useEffect(()=>{if(!o)return;const t=[o.addListener("*","init",n=>{n!=null&&n.origin&&n.clientId&&(I.current[n.origin]=n.clientId,C(n.origin))}),o.addListener("*","authorize",a),o.addListener("*","login",a),o.addListener("*","credential-request",n=>z(n,{v2:!0})),o.addListener("*","authorized",n=>{n!=null&&n.accessToken||i(A(n==null?void 0:n.authUrl))})];return()=>t.forEach(n=>n())},[o,a,z,i,C]),e.useEffect(()=>{const t=n=>{const s=n==null?void 0:n.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const f=A(s.authUrl);if(!(!f||n.origin!==f)){if(s.type==="authorized"&&s.accessToken){M(T=>({...T,[f]:{accessToken:s.accessToken}})),y(f);return}s.type==="authorize-failed"&&l(f)}};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)},[y,l]),e.useEffect(()=>{const t=x.current;Object.values(d).forEach(n=>{n.status==="silent"&&!t[n.origin]&&(t[n.origin]=setTimeout(()=>{delete t[n.origin],l(n.origin)},te))}),Object.keys(t).forEach(n=>{(!d[n]||d[n].status!=="silent")&&(clearTimeout(t[n]),delete t[n])})},[d,l]),e.useEffect(()=>()=>{g.current&&g.current(),Object.values(x.current).forEach(clearTimeout)},[]);const b=e.useCallback(t=>{g.current&&(g.current(),g.current=null);const n=c||K;g.current=n(t,{onBlocked:()=>{m(s=>s[t.origin]?{...s,[t.origin]:{...s[t.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(t.v2){v&&m(s=>!s[t.origin]||!s[t.origin].silentUrl?s:{...s,[t.origin]:{...s[t.origin],status:"silent"}});return}i(t.origin)}})},[c,i]),p={pending:Object.values(d).filter(t=>t.status==="interactive"),authorize:b,dismiss:u,originEpochs:E,credentials:w,unsupported:P},U=Object.values(d).filter(t=>t.status==="silent"&&t.silentUrl);return e.createElement(Z.Provider,{value:p},r,U.map(t=>e.createElement("iframe",{key:`mm-silent-auth-${t.origin}`,src:t.silentUrl,title:`MachineMetrics silent authorization (${t.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};V.propTypes={children:h.node,launcher:h.func};const G=()=>e.useContext(Z),J=r=>{const{originEpochs:c}=e.useContext(Z),o=A(r);return o&&c[o]||0},Q=r=>{const{credentials:c}=e.useContext(Z),o=A(r);return o&&c[o]||null},X=r=>{const{unsupported:c}=e.useContext(Z),o=A(r);return o&&c[o]||null},Y=({children:r,authorizationLauncher:c})=>{const[o,d]=e.useState({}),[m,E]=e.useState({}),R=e.useRef({}),w=e.useRef({}),M=e.useRef({}),P=e.useCallback((i,l)=>{var u;return!!((u=M.current[i])!=null&&u.has(l))},[]),k=e.useCallback((i,l,u)=>{d(a=>({...a,[i]:{origin:l,frameRef:u}}))},[]),S=e.useCallback(i=>{d(l=>{const u={...l};return delete u[i],u}),E(l=>{const u={...l};return delete u[i],u}),delete M.current[i]},[]);e.useEffect(()=>{const i=(u=[],a)=>{u.forEach(b=>b(a))},l=u=>{var U,t,n,s,f;if(!((U=u==null?void 0:u.data)!=null&&U.instanceId))return;const{instanceId:a,type:b}=u.data,p=R.current;if(b==="response"){const{callbackId:T,response:$,error:F}=u.data,L=w.current[T];L&&(L($,F),delete w.current[T]);return}if(b==="mark-registered"){const{requestType:T}=u.data;M.current[a]||(M.current[a]=new Set),M.current[a].add(T);return}b==="ready"&&E(T=>({...T,[a]:!0})),i((t=p[a])==null?void 0:t[b],u.data),i((n=p["*"])==null?void 0:n[b],u.data),i((s=p[a])==null?void 0:s["*"],u.data),i((f=p["*"])==null?void 0:f["*"],u.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[o]);const g=e.useCallback((i,l,u)=>{var b,p;const a=o[i];if(!a){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(p=(b=a==null?void 0:a.frameRef)==null?void 0:b.current)!=null&&p.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...u,instanceId:i},a.origin)},[o]),x=e.useRef(0),I=e.useCallback(()=>`${Date.now()}-${++x.current}`,[]),C=e.useCallback(async(i,l,u={})=>new Promise((a,b)=>{const p=I(),U=(t,n)=>{delete w.current[p],n?b(n):a(t)};w.current[p]=U,g(i,"request",{callbackId:p,requestType:l,data:u})}),[g]),O=e.useCallback((i,l)=>{g(i,"load-options",l)},[g]),z=e.useCallback((i,l)=>{g(i,"validate",l)},[g]),y=e.useMemo(()=>({registerFrame:k,unregisterFrame:S,sendMessage:g,sendRequest:C,loadOptions:O,validate:z,hasHandler:P,readyFrames:m,addListener:(i,l,u)=>(R.current[i]||(R.current[i]={}),R.current[i][l]||(R.current[i][l]=[]),R.current[i][l].push(u),()=>{R.current[i][l]=R.current[i][l].filter(a=>a!==u)})}),[k,S,g,C,O,z,P,m]);return e.createElement(B.Provider,{value:y},e.createElement(V,{launcher:c},r))},q=(r,c,o)=>{const d=e.useContext(B);if(d===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(o);e.useEffect(()=>{m.current=o},[o]),e.useEffect(()=>{if(!(!r||!c)){if(c.startsWith("key:")){const E=c.substring(4);return d.readyFrames[r]&&d.sendMessage(r,"subscribe-key",{keyChord:E}),d.addListener(r,`key-pressed:${E}`,(...w)=>m.current(...w))}return d.addListener(r,c,(...E)=>m.current(...E))}},[d,r,c])};Y.propTypes={children:h.node.isRequired,authorizationLauncher:h.func};const _=j.default||j,ne=1e4,re="credentials",D=(r,c)=>`${r}/mm-embedded-interop?id=${c}&origin=${window.location.origin}&caps=${re}`,se=_.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${r=>r.$isReady?"visible":"hidden"};
-`,se=v.div`
+`,oe=_.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -16,13 +16,13 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,Y=({entry:r})=>e.createElement(se,null,e.createElement("div",{style:{fontWeight:600}},r&&r.origin||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));Y.propTypes={entry:h.shape({origin:h.string,name:h.string,reason:h.string})};const ie=v.div`
+`,N=({entry:r})=>e.createElement(oe,null,e.createElement("div",{style:{fontWeight:600}},r&&r.origin||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));N.propTypes={entry:h.shape({origin:h.string,name:h.string,reason:h.string})};const ie=_.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,oe=()=>e.createElement(ie,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),N=({id:r,src:u,path:i,onInit:d=()=>{},onTimeout:m,context:E={},params:R={},renderUnsupported:x,renderTimeout:M,...$})=>{if("isConfiguring"in $)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in E)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in E)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const w=e.useRef(),[S,g]=e.useState(),[k,I]=e.useState(0),[C,O]=e.useState(!1),[z,y]=e.useState(!1),o=G(u),l=J(u),c=Q(u);e.useEffect(()=>{o>0&&I(0)},[o]);const{registerFrame:a,unregisterFrame:b,sendMessage:p}=e.useContext(B),[U,t]=e.useState(),n=e.useRef(),s=e.useRef(m),f=e.useRef(d),T=e.useRef(!1);e.useEffect(()=>{s.current=m},[m]),e.useEffect(()=>{f.current=d},[d]),e.useEffect(()=>{k&&p(r,"set-context",{context:{...E}})},[E,r,k]),e.useEffect(()=>{k&&p(r,"set-params",{params:R})},[R,r,k]),e.useEffect(()=>{i!==void 0&&t((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),e.useEffect(()=>{U===void 0||!k||p(r,"navigate",{path:U})},[U,k,r,p]),e.useEffect(()=>{if(!u||!r||!w)return;const L=new URL(u);return a(r,L.origin,w),f.current(),g(_(L.origin,r)),()=>{b(r)}},[u,r,a,w]),e.useEffect(()=>{if(!(!S||T.current))return n.current=setTimeout(()=>{O(!0),s.current&&s.current()},te),()=>clearTimeout(n.current)},[S]);const A=e.useCallback(()=>{T.current=!0,clearTimeout(n.current),O(!1)},[]);q(r,"init",A),q(r,"authorize",A),q(r,"login",A),q(r,"credential-request",()=>{A(),y(!0)}),e.useEffect(()=>{!z||!l||p(r,"credential",{accessToken:l.accessToken})},[z,l,r,p]),q(r,"ready",()=>{A(),I(L=>L+1)});const F=e.useRef();return q(r,"heartbeat",()=>{F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{if(w.current){const L=new URL(u);w.current.src=_(L.origin,r)}},6e3)}),e.useEffect(()=>()=>{F.current&&clearTimeout(F.current)},[]),c?x?x(c):e.createElement(Y,{entry:c}):C&&!k?M?M():e.createElement(oe,null):e.createElement(re,{key:`auth-epoch-${o}`,$isReady:k,ref:w,src:S,...$})};N.propTypes={id:h.string,src:h.string.isRequired,path:h.string,onInit:h.func,onTimeout:h.func,renderUnsupported:h.func,renderTimeout:h.func};const ue=j.div`
+`,ce=()=>e.createElement(ie,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ee=({id:r,src:c,path:o,onInit:d=()=>{},onTimeout:m,context:E={},params:R={},renderUnsupported:w,renderTimeout:M,...P})=>{if("isConfiguring"in P)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in E)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in E)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const k=e.useRef(),[S,g]=e.useState(),[x,I]=e.useState(0),[C,O]=e.useState(!1),[z,y]=e.useState(!1),i=J(c),l=Q(c),u=X(c);e.useEffect(()=>{i>0&&I(0)},[i]);const{registerFrame:a,unregisterFrame:b,sendMessage:p}=e.useContext(B),[U,t]=e.useState(),n=e.useRef(),s=e.useRef(m),f=e.useRef(d),T=e.useRef(!1);e.useEffect(()=>{s.current=m},[m]),e.useEffect(()=>{f.current=d},[d]),e.useEffect(()=>{x&&p(r,"set-context",{context:{...E}})},[E,r,x]),e.useEffect(()=>{x&&p(r,"set-params",{params:R})},[R,r,x]),e.useEffect(()=>{o!==void 0&&t((o==null?void 0:o.indexOf("/"))===0?o:`/${o}`)},[o]),e.useEffect(()=>{U===void 0||!x||p(r,"navigate",{path:U})},[U,x,r,p]),e.useEffect(()=>{if(!c||!r||!k)return;const L=new URL(c);return a(r,L.origin,k),f.current(),g(D(L.origin,r)),()=>{b(r)}},[c,r,a,k]),e.useEffect(()=>{if(!(!S||T.current))return n.current=setTimeout(()=>{O(!0),s.current&&s.current()},ne),()=>clearTimeout(n.current)},[S]);const $=e.useCallback(()=>{T.current=!0,clearTimeout(n.current),O(!1)},[]);q(r,"init",$),q(r,"authorize",$),q(r,"login",$),q(r,"credential-request",()=>{$(),y(!0)}),e.useEffect(()=>{!z||!l||p(r,"credential",{accessToken:l.accessToken})},[z,l,r,p]),q(r,"ready",()=>{$(),I(L=>L+1)});const F=e.useRef();return q(r,"heartbeat",()=>{F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{if(k.current){const L=new URL(c);k.current.src=D(L.origin,r)}},6e3)}),e.useEffect(()=>()=>{F.current&&clearTimeout(F.current)},[]),u?w?w(u):e.createElement(N,{entry:u}):C&&!x?M?M():e.createElement(ce,null):e.createElement(se,{key:`auth-epoch-${i}`,$isReady:x,ref:k,src:S,...P})};ee.propTypes={id:h.string,src:h.string.isRequired,path:h.string,onInit:h.func,onTimeout:h.func,renderUnsupported:h.func,renderTimeout:h.func};const ue=j.div`
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-`,ce=j.div`
+`,le=j.div`
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
@@ -39,13 +39,13 @@
   max-width: calc(100vw - 32px);
   font-family: sans-serif;
   color: #222;
-`,le=j.div`
+`,ae=j.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`,ae=j.button`
+`,de=j.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -54,8 +54,8 @@
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`,de=j.p`
+`,fe=j.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
-`,fe=()=>{const{pending:r,authorize:u}=V();return r.length===0?null:e.createElement(ue,null,e.createElement(ce,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(i=>e.createElement("div",{key:i.origin},e.createElement(le,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},i.origin)),e.createElement(ae,{onClick:()=>u(i)},"Authorize")),i.popupBlocked&&e.createElement(de,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};exports.EmbeddedAuthorizationContext=Z;exports.EmbeddedAuthorizationPrompt=fe;exports.MMEmbeddableZone=N;exports.MMEmbeddableZoneContext=B;exports.MMEmbeddableZoneProvider=X;exports.isCrossSite=D;exports.popupAuthorizationLauncher=H;exports.useEmbeddedAuthorizations=V;exports.useEmbeddedCredential=J;exports.useEmbeddedEffect=q;exports.useEmbeddedOriginEpoch=G;exports.useEmbeddedUnsupported=Q;
+`,me=()=>{const{pending:r,authorize:c}=G();return r.length===0?null:e.createElement(ue,null,e.createElement(le,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(o=>e.createElement("div",{key:o.origin},e.createElement(ae,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},o.origin)),e.createElement(de,{onClick:()=>c(o)},"Authorize")),o.popupBlocked&&e.createElement(fe,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};exports.EmbeddedAuthorizationContext=Z;exports.EmbeddedAuthorizationPrompt=me;exports.MMEmbeddableZone=ee;exports.MMEmbeddableZoneContext=B;exports.MMEmbeddableZoneProvider=Y;exports.isCrossSite=H;exports.popupAuthorizationLauncher=K;exports.useEmbeddedAuthorizations=G;exports.useEmbeddedCredential=Q;exports.useEmbeddedEffect=q;exports.useEmbeddedOriginEpoch=J;exports.useEmbeddedUnsupported=X;

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

@@ -1,7 +1,7 @@
-import f, { createContext as J, useContext as _, useState as I, useRef as x, useCallback as h, useEffect as g, useMemo as Y } from "react";
+import f, { createContext as Q, useContext as Z, useState as I, useRef as x, useCallback as h, useEffect as g, useMemo as N } from "react";
 import w from "prop-types";
-import Z from "styled-components";
-const H = J(null), D = J({
+import W from "styled-components";
+const H = Q(null), D = Q({
   pending: [],
   authorize: () => {
   },
@@ -10,25 +10,25 @@ const H = J(null), D = J({
   originEpochs: {},
   credentials: {},
   unsupported: {}
-}), N = 2e4, j = (n) => {
+}), V = typeof window != "undefined" && window.location.protocol === "https:", ee = 8e3, j = (n) => {
   try {
     return new URL(n).origin;
   } catch {
     return null;
   }
-}, V = (n) => {
+}, G = (n) => {
   if (!n || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(n) || n.includes(":"))
     return n;
   const o = n.split(".");
   return o.length <= 2 ? n : o.slice(-2).join(".");
-}, ee = (n, o) => {
+}, te = (n, o) => {
   try {
     const s = new URL(n), a = new URL(o);
-    return s.protocol !== a.protocol ? !0 : V(s.hostname) !== V(a.hostname);
+    return s.protocol !== a.protocol ? !0 : G(s.hostname) !== G(a.hostname);
   } catch {
     return !0;
   }
-}, te = (n, { onBlocked: o, onClosed: s }) => {
+}, ne = (n, { onBlocked: o, onClosed: s }) => {
   const a = window.open(
     n.authUrl,
     "mm-embed-auth",
@@ -37,51 +37,52 @@ const H = J(null), D = J({
   if (!a)
     return o(), () => {
     };
-  const m = setInterval(() => {
-    a.closed && (clearInterval(m), s());
+  const p = setInterval(() => {
+    a.closed && (clearInterval(p), s());
   }, 1e3);
-  return () => clearInterval(m);
-}, Q = ({ children: n, launcher: o }) => {
-  const s = _(H), [a, m] = I({}), [R, T] = I({}), [k, L] = I({}), [q, y] = I({}), F = x(k);
-  F.current = k;
-  const b = x(null), U = x({}), P = x({}), z = h((e) => {
-    const t = P.current[e];
+  return () => clearInterval(p);
+}, X = ({ children: n, launcher: o }) => {
+  const s = Z(H), [a, p] = I({}), [R, T] = I({}), [k, L] = I({}), [q, U] = I({}), S = x(k);
+  S.current = k;
+  const b = x(null), y = x({}), F = x({}), z = h((e) => {
+    const t = F.current[e];
     if (!t)
       return;
     const r = (d) => !d[e] || d[e].clientId ? d : { ...d, [e]: { ...d[e], clientId: t } };
-    m(r), y(r);
+    p(r), U(r);
   }, []), A = h(
     (e, t) => {
       const r = j(e == null ? void 0 : e.authUrl);
-      r && (y((d) => d[r] ? d : {
+      r && (U((d) => d[r] ? d : {
         ...d,
-        [r]: { origin: r, reason: t, clientId: P.current[r] || null }
+        [r]: { origin: r, reason: t, clientId: F.current[r] || null }
       }), z(r));
     },
     [z]
   ), O = h(
     (e, { v2: t = !1 } = {}) => {
       const r = j(e == null ? void 0 : e.authUrl);
-      r && (t && F.current[r] || (m((d) => d[r] ? d : {
+      r && (t && S.current[r] || (p((d) => d[r] ? d : {
         ...d,
         [r]: {
           origin: r,
           authUrl: e.authUrl,
           silentUrl: e.silentUrl || null,
-          // v2 entries try the invisible silent resolver first; legacy
-          // signals go straight to the host's interactive UI.
-          status: t && e.silentUrl ? "silent" : "interactive",
+          // v2 entries try the invisible silent resolver first — but only on a host that can
+          // frame login (https). Otherwise (and for legacy signals) go straight to interactive,
+          // so an http host doesn't wait out a silent frame that can never load login.
+          status: t && e.silentUrl && V ? "silent" : "interactive",
           v2: t,
           // clientId from the request payload (v2) or the cached init (legacy);
           // the host resolves the display name from it.
-          clientId: e.clientId || P.current[r] || null,
+          clientId: e.clientId || F.current[r] || null,
           popupBlocked: !1
         }
       }), z(r)));
     },
     [z]
   ), C = h((e) => {
-    m((t) => {
+    p((t) => {
       if (!t[e])
         return t;
       const r = { ...t };
@@ -96,7 +97,7 @@ const H = J(null), D = J({
     },
     [C]
   ), u = h((e) => {
-    m((t) => !t[e] || t[e].status === "interactive" ? t : {
+    p((t) => !t[e] || t[e].status === "interactive" ? t : {
       ...t,
       [e]: { ...t[e], status: "interactive" }
     });
@@ -108,7 +109,7 @@ const H = J(null), D = J({
   ), l = h(
     (e) => {
       const t = j(e == null ? void 0 : e.authUrl);
-      if (t && ee(t, window.location.origin)) {
+      if (t && te(t, window.location.origin)) {
         A(e, "cross-site-legacy");
         return;
       }
@@ -126,7 +127,7 @@ const H = J(null), D = J({
       // the time an entry is created. The host resolves the display name from
       // the clientId.
       s.addListener("*", "init", (t) => {
-        t != null && t.origin && t.clientId && (P.current[t.origin] = t.clientId, z(t.origin));
+        t != null && t.origin && t.clientId && (F.current[t.origin] = t.clientId, z(t.origin));
       }),
       s.addListener("*", "authorize", l),
       s.addListener("*", "login", l),
@@ -159,31 +160,31 @@ const H = J(null), D = J({
     };
     return window.addEventListener("message", e), () => window.removeEventListener("message", e);
   }, [C, u]), g(() => {
-    const e = U.current;
+    const e = y.current;
     Object.values(a).forEach((t) => {
       t.status === "silent" && !e[t.origin] && (e[t.origin] = setTimeout(() => {
         delete e[t.origin], u(t.origin);
-      }, N));
+      }, ee));
     }), Object.keys(e).forEach((t) => {
       (!a[t] || a[t].status !== "silent") && (clearTimeout(e[t]), delete e[t]);
     });
   }, [a, u]), g(() => () => {
-    b.current && b.current(), Object.values(U.current).forEach(clearTimeout);
+    b.current && b.current(), Object.values(y.current).forEach(clearTimeout);
   }, []);
   const E = h(
     (e) => {
       b.current && (b.current(), b.current = null);
-      const t = o || te;
+      const t = o || ne;
       b.current = t(e, {
         onBlocked: () => {
-          m((r) => r[e.origin] ? {
+          p((r) => r[e.origin] ? {
             ...r,
             [e.origin]: { ...r[e.origin], popupBlocked: !0 }
           } : r);
         },
         onClosed: () => {
           if (e.v2) {
-            m((r) => !r[e.origin] || !r[e.origin].silentUrl ? r : {
+            V && p((r) => !r[e.origin] || !r[e.origin].silentUrl ? r : {
               ...r,
               [e.origin]: { ...r[e.origin], status: "silent" }
             });
@@ -194,7 +195,7 @@ const H = J(null), D = J({
       });
     },
     [o, i]
-  ), p = {
+  ), m = {
     // Hosts render UI for interactive entries only; silent resolution is
     // invisible by design.
     pending: Object.values(a).filter(
@@ -208,7 +209,7 @@ const H = J(null), D = J({
   }, $ = Object.values(a).filter(
     (e) => e.status === "silent" && e.silentUrl
   );
-  return /* @__PURE__ */ f.createElement(D.Provider, { value: p }, n, $.map((e) => /* @__PURE__ */ f.createElement(
+  return /* @__PURE__ */ f.createElement(D.Provider, { value: m }, n, $.map((e) => /* @__PURE__ */ f.createElement(
     "iframe",
     {
       key: `mm-silent-auth-${e.origin}`,
@@ -220,26 +221,26 @@ const H = J(null), D = J({
     }
   )));
 };
-Q.propTypes = {
+X.propTypes = {
   children: w.node,
   launcher: w.func
 };
-const ne = () => _(D), re = (n) => {
-  const { originEpochs: o } = _(D), s = j(n);
+const re = () => Z(D), se = (n) => {
+  const { originEpochs: o } = Z(D), s = j(n);
   return s && o[s] || 0;
-}, se = (n) => {
-  const { credentials: o } = _(D), s = j(n);
-  return s && o[s] || null;
 }, ie = (n) => {
-  const { unsupported: o } = _(D), s = j(n);
+  const { credentials: o } = Z(D), s = j(n);
   return s && o[s] || null;
-}, oe = ({ children: n, authorizationLauncher: o }) => {
-  const [s, a] = I({}), [m, R] = I({}), T = x({}), k = x({}), L = x({}), q = h((i, u) => {
+}, oe = (n) => {
+  const { unsupported: o } = Z(D), s = j(n);
+  return s && o[s] || null;
+}, ce = ({ children: n, authorizationLauncher: o }) => {
+  const [s, a] = I({}), [p, R] = I({}), T = x({}), k = x({}), L = x({}), q = h((i, u) => {
     var c;
     return !!((c = L.current[i]) != null && c.has(u));
-  }, []), y = h((i, u, c) => {
+  }, []), U = h((i, u, c) => {
     a((l) => ({ ...l, [i]: { origin: u, frameRef: c } }));
-  }, []), F = h((i) => {
+  }, []), S = h((i) => {
     a((u) => {
       const c = { ...u };
       return delete c[i], c;
@@ -255,10 +256,10 @@ const ne = () => _(D), re = (n) => {
       var $, e, t, r, d;
       if (!(($ = c == null ? void 0 : c.data) != null && $.instanceId))
         return;
-      const { instanceId: l, type: E } = c.data, p = T.current;
+      const { instanceId: l, type: E } = c.data, m = T.current;
       if (E === "response") {
-        const { callbackId: M, response: B, error: W } = c.data, S = k.current[M];
-        S && (S(B, W), delete k.current[M]);
+        const { callbackId: M, response: B, error: _ } = c.data, P = k.current[M];
+        P && (P(B, _), delete k.current[M]);
         return;
       }
       if (E === "mark-registered") {
@@ -266,7 +267,7 @@ const ne = () => _(D), re = (n) => {
         L.current[l] || (L.current[l] = /* @__PURE__ */ new Set()), L.current[l].add(M);
         return;
       }
-      E === "ready" && R((M) => ({ ...M, [l]: !0 })), i((e = p[l]) == null ? void 0 : e[E], c.data), i((t = p["*"]) == null ? void 0 : t[E], c.data), i((r = p[l]) == null ? void 0 : r["*"], c.data), i((d = p["*"]) == null ? void 0 : d["*"], c.data);
+      E === "ready" && R((M) => ({ ...M, [l]: !0 })), i((e = m[l]) == null ? void 0 : e[E], c.data), i((t = m["*"]) == null ? void 0 : t[E], c.data), i((r = m[l]) == null ? void 0 : r["*"], c.data), i((d = m["*"]) == null ? void 0 : d["*"], c.data);
     };
     return window.addEventListener("message", u), () => {
       window.removeEventListener("message", u);
@@ -274,24 +275,24 @@ const ne = () => _(D), re = (n) => {
   }, [s]);
   const b = h(
     (i, u, c) => {
-      var E, p;
+      var E, m;
       const l = s[i];
       if (!l) {
         console.warn(`Origin not set for id: ${i}. Unable to send message.`);
         return;
       }
-      (p = (E = l == null ? void 0 : l.frameRef) == null ? void 0 : E.current) != null && p.contentWindow && l.frameRef.current.contentWindow.postMessage(
+      (m = (E = l == null ? void 0 : l.frameRef) == null ? void 0 : E.current) != null && m.contentWindow && l.frameRef.current.contentWindow.postMessage(
         { type: u, ...c, instanceId: i },
         l.origin
       );
     },
     [s]
-  ), U = x(0), P = h(() => `${Date.now()}-${++U.current}`, []), z = h(
+  ), y = x(0), F = h(() => `${Date.now()}-${++y.current}`, []), z = h(
     async (i, u, c = {}) => new Promise((l, E) => {
-      const p = P(), $ = (e, t) => {
-        delete k.current[p], t ? E(t) : l(e);
+      const m = F(), $ = (e, t) => {
+        delete k.current[m], t ? E(t) : l(e);
       };
-      k.current[p] = $, b(i, "request", { callbackId: p, requestType: u, data: c });
+      k.current[m] = $, b(i, "request", { callbackId: m, requestType: u, data: c });
     }),
     [b]
   ), A = h(
@@ -304,41 +305,41 @@ const ne = () => _(D), re = (n) => {
       b(i, "validate", u);
     },
     [b]
-  ), C = Y(
+  ), C = N(
     () => ({
-      registerFrame: y,
-      unregisterFrame: F,
+      registerFrame: U,
+      unregisterFrame: S,
       sendMessage: b,
       sendRequest: z,
       loadOptions: A,
       validate: O,
       hasHandler: q,
-      readyFrames: m,
+      readyFrames: p,
       addListener: (i, u, c) => (T.current[i] || (T.current[i] = {}), T.current[i][u] || (T.current[i][u] = []), T.current[i][u].push(c), () => {
         T.current[i][u] = T.current[i][u].filter((l) => l !== c);
       })
     }),
     [
-      y,
-      F,
+      U,
+      S,
       b,
       z,
       A,
       O,
       q,
-      m
+      p
     ]
   );
-  return /* @__PURE__ */ f.createElement(H.Provider, { value: C }, /* @__PURE__ */ f.createElement(Q, { launcher: o }, n));
+  return /* @__PURE__ */ f.createElement(H.Provider, { value: C }, /* @__PURE__ */ f.createElement(X, { launcher: o }, n));
 }, v = (n, o, s) => {
-  const a = _(H);
+  const a = Z(H);
   if (a === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const m = x(s);
+  const p = x(s);
   g(() => {
-    m.current = s;
+    p.current = s;
   }, [s]), g(() => {
     if (!(!n || !o)) {
       if (o.startsWith("key:")) {
@@ -346,18 +347,18 @@ const ne = () => _(D), re = (n) => {
         return a.readyFrames[n] && a.sendMessage(n, "subscribe-key", { keyChord: R }), a.addListener(
           n,
           `key-pressed:${R}`,
-          (...k) => m.current(...k)
+          (...k) => p.current(...k)
         );
       }
       return a.addListener(
         n,
         o,
-        (...R) => m.current(...R)
+        (...R) => p.current(...R)
       );
     }
   }, [a, n, o]);
 };
-oe.propTypes = {
+ce.propTypes = {
   children: w.node.isRequired,
   /**
    * Optional interactive-step launcher for embedded authorizations,
@@ -367,12 +368,12 @@ oe.propTypes = {
    */
   authorizationLauncher: w.func
 };
-const K = Z.default || Z, ce = 1e4, ue = "credentials", G = (n, o) => `${n}/mm-embedded-interop?id=${o}&origin=${window.location.origin}&caps=${ue}`, le = K.iframe`
+const K = W.default || W, ue = 1e4, le = "credentials", J = (n, o) => `${n}/mm-embedded-interop?id=${o}&origin=${window.location.origin}&caps=${le}`, ae = K.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${(n) => n.$isReady ? "visible" : "hidden"};
-`, ae = K.div`
+`, de = K.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -385,27 +386,27 @@ const K = Z.default || Z, ce = 1e4, ue = "credentials", G = (n, o) => `${n}/mm-e
   text-align: center;
   color: #555;
   font-size: 14px;
-`, X = ({ entry: n }) => /* @__PURE__ */ f.createElement(ae, null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, n && n.origin || "This app", " can’t be embedded here"), /* @__PURE__ */ f.createElement("div", { style: { fontSize: 12, color: "#888" } }, "It needs an update to support embedding from a different domain."));
-X.propTypes = {
+`, Y = ({ entry: n }) => /* @__PURE__ */ f.createElement(de, null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, n && n.origin || "This app", " can’t be embedded here"), /* @__PURE__ */ f.createElement("div", { style: { fontSize: 12, color: "#888" } }, "It needs an update to support embedding from a different domain."));
+Y.propTypes = {
   entry: w.shape({
     origin: w.string,
     name: w.string,
     reason: w.string
   })
 };
-const de = K.div`
+const fe = K.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`, fe = () => /* @__PURE__ */ f.createElement(de, null, /* @__PURE__ */ f.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), me = ({
+`, pe = () => /* @__PURE__ */ f.createElement(fe, null, /* @__PURE__ */ f.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), me = ({
   id: n,
   src: o,
   path: s,
   onInit: a = () => {
   },
-  onTimeout: m,
+  onTimeout: p,
   context: R = {},
   params: T = {},
   renderUnsupported: k,
@@ -424,69 +425,69 @@ const de = K.div`
     return console.error(
       "isFullScreen must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  const y = x(), [F, b] = I(), [U, P] = I(0), [z, A] = I(!1), [O, C] = I(!1), i = re(o), u = se(o), c = ie(o);
+  const U = x(), [S, b] = I(), [y, F] = I(0), [z, A] = I(!1), [O, C] = I(!1), i = se(o), u = ie(o), c = oe(o);
   g(() => {
-    i > 0 && P(0);
+    i > 0 && F(0);
   }, [i]);
-  const { registerFrame: l, unregisterFrame: E, sendMessage: p } = _(
+  const { registerFrame: l, unregisterFrame: E, sendMessage: m } = Z(
     H
-  ), [$, e] = I(), t = x(), r = x(m), d = x(a), M = x(!1);
+  ), [$, e] = I(), t = x(), r = x(p), d = x(a), M = x(!1);
   g(() => {
-    r.current = m;
-  }, [m]), g(() => {
+    r.current = p;
+  }, [p]), g(() => {
     d.current = a;
   }, [a]), g(() => {
-    U && p(n, "set-context", {
+    y && m(n, "set-context", {
       context: {
         ...R
       }
     });
-  }, [R, n, U]), g(() => {
-    U && p(n, "set-params", { params: T });
-  }, [T, n, U]), g(() => {
+  }, [R, n, y]), g(() => {
+    y && m(n, "set-params", { params: T });
+  }, [T, n, y]), g(() => {
     s !== void 0 && e((s == null ? void 0 : s.indexOf("/")) === 0 ? s : `/${s}`);
   }, [s]), g(() => {
-    $ === void 0 || !U || p(n, "navigate", { path: $ });
-  }, [$, U, n, p]), g(() => {
-    if (!o || !n || !y)
+    $ === void 0 || !y || m(n, "navigate", { path: $ });
+  }, [$, y, n, m]), g(() => {
+    if (!o || !n || !U)
       return;
-    const S = new URL(o);
-    return l(n, S.origin, y), d.current(), b(G(S.origin, n)), () => {
+    const P = new URL(o);
+    return l(n, P.origin, U), d.current(), b(J(P.origin, n)), () => {
       E(n);
     };
-  }, [o, n, l, y]), g(() => {
-    if (!(!F || M.current))
+  }, [o, n, l, U]), g(() => {
+    if (!(!S || M.current))
       return t.current = setTimeout(() => {
         A(!0), r.current && r.current();
-      }, ce), () => clearTimeout(t.current);
-  }, [F]);
+      }, ue), () => clearTimeout(t.current);
+  }, [S]);
   const B = h(() => {
     M.current = !0, clearTimeout(t.current), A(!1);
   }, []);
   v(n, "init", B), v(n, "authorize", B), v(n, "login", B), v(n, "credential-request", () => {
     B(), C(!0);
   }), g(() => {
-    !O || !u || p(n, "credential", { accessToken: u.accessToken });
-  }, [O, u, n, p]), v(n, "ready", () => {
-    B(), P((S) => S + 1);
+    !O || !u || m(n, "credential", { accessToken: u.accessToken });
+  }, [O, u, n, m]), v(n, "ready", () => {
+    B(), F((P) => P + 1);
   });
-  const W = x();
+  const _ = x();
   return v(n, "heartbeat", () => {
-    W.current && clearTimeout(W.current), W.current = setTimeout(() => {
-      if (y.current) {
-        const S = new URL(o);
-        y.current.src = G(S.origin, n);
+    _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+      if (U.current) {
+        const P = new URL(o);
+        U.current.src = J(P.origin, n);
       }
     }, 6e3);
   }), g(() => () => {
-    W.current && clearTimeout(W.current);
-  }, []), c ? k ? k(c) : /* @__PURE__ */ f.createElement(X, { entry: c }) : z && !U ? L ? L() : /* @__PURE__ */ f.createElement(fe, null) : /* @__PURE__ */ f.createElement(
-    le,
+    _.current && clearTimeout(_.current);
+  }, []), c ? k ? k(c) : /* @__PURE__ */ f.createElement(Y, { entry: c }) : z && !y ? L ? L() : /* @__PURE__ */ f.createElement(pe, null) : /* @__PURE__ */ f.createElement(
+    ae,
     {
       key: `auth-epoch-${i}`,
-      $isReady: U,
-      ref: y,
-      src: F,
+      $isReady: y,
+      ref: U,
+      src: S,
       ...q
     }
   );
@@ -510,7 +511,7 @@ me.propTypes = {
    */
   renderTimeout: w.func
 };
-const pe = Z.div`
+const ge = W.div`
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
@@ -518,7 +519,7 @@ const pe = Z.div`
   align-items: center;
   justify-content: center;
   z-index: 10000;
-`, ge = Z.div`
+`, he = W.div`
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
@@ -527,13 +528,13 @@ const pe = Z.div`
   max-width: calc(100vw - 32px);
   font-family: sans-serif;
   color: #222;
-`, he = Z.div`
+`, be = W.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`, be = Z.button`
+`, Ee = W.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -542,25 +543,25 @@ const pe = Z.div`
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`, Ee = Z.p`
+`, we = W.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
-`, Te = () => {
-  const { pending: n, authorize: o } = ne();
-  return n.length === 0 ? null : /* @__PURE__ */ f.createElement(pe, null, /* @__PURE__ */ f.createElement(ge, null, /* @__PURE__ */ f.createElement("h3", { style: { margin: "0 0 8px" } }, "Authorization Required"), /* @__PURE__ */ f.createElement("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#555" } }, "The following apps need you to sign in and authorize them before they can load."), n.map((s) => /* @__PURE__ */ f.createElement("div", { key: s.origin }, /* @__PURE__ */ f.createElement(he, null, /* @__PURE__ */ f.createElement("div", null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, s.origin)), /* @__PURE__ */ f.createElement(be, { onClick: () => o(s) }, "Authorize")), s.popupBlocked && /* @__PURE__ */ f.createElement(Ee, null, "The sign-in window was blocked. Allow popups for this site, then try again.")))));
+`, ke = () => {
+  const { pending: n, authorize: o } = re();
+  return n.length === 0 ? null : /* @__PURE__ */ f.createElement(ge, null, /* @__PURE__ */ f.createElement(he, null, /* @__PURE__ */ f.createElement("h3", { style: { margin: "0 0 8px" } }, "Authorization Required"), /* @__PURE__ */ f.createElement("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#555" } }, "The following apps need you to sign in and authorize them before they can load."), n.map((s) => /* @__PURE__ */ f.createElement("div", { key: s.origin }, /* @__PURE__ */ f.createElement(be, null, /* @__PURE__ */ f.createElement("div", null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, s.origin)), /* @__PURE__ */ f.createElement(Ee, { onClick: () => o(s) }, "Authorize")), s.popupBlocked && /* @__PURE__ */ f.createElement(we, null, "The sign-in window was blocked. Allow popups for this site, then try again.")))));
 };
 export {
   D as EmbeddedAuthorizationContext,
-  Te as EmbeddedAuthorizationPrompt,
+  ke as EmbeddedAuthorizationPrompt,
   me as MMEmbeddableZone,
   H as MMEmbeddableZoneContext,
-  oe as MMEmbeddableZoneProvider,
-  ee as isCrossSite,
-  te as popupAuthorizationLauncher,
-  ne as useEmbeddedAuthorizations,
-  se as useEmbeddedCredential,
+  ce as MMEmbeddableZoneProvider,
+  te as isCrossSite,
+  ne as popupAuthorizationLauncher,
+  re as useEmbeddedAuthorizations,
+  ie as useEmbeddedCredential,
   v as useEmbeddedEffect,
-  re as useEmbeddedOriginEpoch,
-  ie as useEmbeddedUnsupported
+  se as useEmbeddedOriginEpoch,
+  oe as useEmbeddedUnsupported
 };

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

@@ -1,9 +1,9 @@
-(function(m,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(m=typeof globalThis!="undefined"?globalThis:m||self,e(m["mm-react-embeddable"]={},m.React,m.PropTypes,m.styled))})(this,(function(m,e,p,q){"use strict";const _=e.createContext(null),W=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ne=2e4,F=r=>{try{return new URL(r).origin}catch{return null}},H=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const u=r.split(".");return u.length<=2?r:u.slice(-2).join(".")},P=(r,u)=>{try{const i=new URL(r),f=new URL(u);return i.protocol!==f.protocol?!0:H(i.hostname)!==H(f.hostname)}catch{return!0}},K=(r,{onBlocked:u,onClosed:i})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const g=setInterval(()=>{f.closed&&(clearInterval(g),i())},1e3);return()=>clearInterval(g)},V=({children:r,launcher:u})=>{const i=e.useContext(_),[f,g]=e.useState({}),[k,w]=e.useState({}),[C,S]=e.useState({}),[$,M]=e.useState({}),O=e.useRef(C);O.current=C;const h=e.useRef(null),x=e.useRef({}),y=e.useRef({}),z=e.useCallback(n=>{const t=y.current[n];if(!t)return;const s=a=>!a[n]||a[n].clientId?a:{...a,[n]:{...a[n],clientId:t}};g(s),M(s)},[]),j=e.useCallback((n,t)=>{const s=F(n==null?void 0:n.authUrl);s&&(M(a=>a[s]?a:{...a,[s]:{origin:s,reason:t,clientId:y.current[s]||null}}),z(s))},[z]),I=e.useCallback((n,{v2:t=!1}={})=>{const s=F(n==null?void 0:n.authUrl);s&&(t&&O.current[s]||(g(a=>a[s]?a:{...a,[s]:{origin:s,authUrl:n.authUrl,silentUrl:n.silentUrl||null,status:t&&n.silentUrl?"silent":"interactive",v2:t,clientId:n.clientId||y.current[s]||null,popupBlocked:!1}}),z(s)))},[z]),T=e.useCallback(n=>{g(t=>{if(!t[n])return t;const s={...t};return delete s[n],s})},[]),o=e.useCallback(n=>{n&&(T(n),w(t=>({...t,[n]:(t[n]||0)+1})))},[T]),l=e.useCallback(n=>{g(t=>!t[n]||t[n].status==="interactive"?t:{...t,[n]:{...t[n],status:"interactive"}})},[]),c=e.useCallback(n=>{T(n.origin)},[T]),d=e.useCallback(n=>{const t=F(n==null?void 0:n.authUrl);if(t&&P(t,window.location.origin)){j(n,"cross-site-legacy");return}I(n)},[I,j]);e.useEffect(()=>{if(!i)return;const n=[i.addListener("*","init",t=>{t!=null&&t.origin&&t.clientId&&(y.current[t.origin]=t.clientId,z(t.origin))}),i.addListener("*","authorize",d),i.addListener("*","login",d),i.addListener("*","credential-request",t=>I(t,{v2:!0})),i.addListener("*","authorized",t=>{t!=null&&t.accessToken||o(F(t==null?void 0:t.authUrl))})];return()=>n.forEach(t=>t())},[i,d,I,o,z]),e.useEffect(()=>{const n=t=>{const s=t==null?void 0:t.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const a=F(s.authUrl);if(!(!a||t.origin!==a)){if(s.type==="authorized"&&s.accessToken){S(U=>({...U,[a]:{accessToken:s.accessToken}})),T(a);return}s.type==="authorize-failed"&&l(a)}};return window.addEventListener("message",n),()=>window.removeEventListener("message",n)},[T,l]),e.useEffect(()=>{const n=x.current;Object.values(f).forEach(t=>{t.status==="silent"&&!n[t.origin]&&(n[t.origin]=setTimeout(()=>{delete n[t.origin],l(t.origin)},ne))}),Object.keys(n).forEach(t=>{(!f[t]||f[t].status!=="silent")&&(clearTimeout(n[t]),delete n[t])})},[f,l]),e.useEffect(()=>()=>{h.current&&h.current(),Object.values(x.current).forEach(clearTimeout)},[]);const E=e.useCallback(n=>{h.current&&(h.current(),h.current=null);const t=u||K;h.current=t(n,{onBlocked:()=>{g(s=>s[n.origin]?{...s,[n.origin]:{...s[n.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(n.v2){g(s=>!s[n.origin]||!s[n.origin].silentUrl?s:{...s,[n.origin]:{...s[n.origin],status:"silent"}});return}o(n.origin)}})},[u,o]),b={pending:Object.values(f).filter(n=>n.status==="interactive"),authorize:E,dismiss:c,originEpochs:k,credentials:C,unsupported:$},L=Object.values(f).filter(n=>n.status==="silent"&&n.silentUrl);return e.createElement(W.Provider,{value:b},r,L.map(n=>e.createElement("iframe",{key:`mm-silent-auth-${n.origin}`,src:n.silentUrl,title:`MachineMetrics silent authorization (${n.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};V.propTypes={children:p.node,launcher:p.func};const G=()=>e.useContext(W),J=r=>{const{originEpochs:u}=e.useContext(W),i=F(r);return i&&u[i]||0},Q=r=>{const{credentials:u}=e.useContext(W),i=F(r);return i&&u[i]||null},X=r=>{const{unsupported:u}=e.useContext(W),i=F(r);return i&&u[i]||null},Y=({children:r,authorizationLauncher:u})=>{const[i,f]=e.useState({}),[g,k]=e.useState({}),w=e.useRef({}),C=e.useRef({}),S=e.useRef({}),$=e.useCallback((o,l)=>{var c;return!!((c=S.current[o])!=null&&c.has(l))},[]),M=e.useCallback((o,l,c)=>{f(d=>({...d,[o]:{origin:l,frameRef:c}}))},[]),O=e.useCallback(o=>{f(l=>{const c={...l};return delete c[o],c}),k(l=>{const c={...l};return delete c[o],c}),delete S.current[o]},[]);e.useEffect(()=>{const o=(c=[],d)=>{c.forEach(E=>E(d))},l=c=>{var L,n,t,s,a;if(!((L=c==null?void 0:c.data)!=null&&L.instanceId))return;const{instanceId:d,type:E}=c.data,b=w.current;if(E==="response"){const{callbackId:U,response:B,error:v}=c.data,A=C.current[U];A&&(A(B,v),delete C.current[U]);return}if(E==="mark-registered"){const{requestType:U}=c.data;S.current[d]||(S.current[d]=new Set),S.current[d].add(U);return}E==="ready"&&k(U=>({...U,[d]:!0})),o((n=b[d])==null?void 0:n[E],c.data),o((t=b["*"])==null?void 0:t[E],c.data),o((s=b[d])==null?void 0:s["*"],c.data),o((a=b["*"])==null?void 0:a["*"],c.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[i]);const h=e.useCallback((o,l,c)=>{var E,b;const d=i[o];if(!d){console.warn(`Origin not set for id: ${o}. Unable to send message.`);return}(b=(E=d==null?void 0:d.frameRef)==null?void 0:E.current)!=null&&b.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:l,...c,instanceId:o},d.origin)},[i]),x=e.useRef(0),y=e.useCallback(()=>`${Date.now()}-${++x.current}`,[]),z=e.useCallback(async(o,l,c={})=>new Promise((d,E)=>{const b=y(),L=(n,t)=>{delete C.current[b],t?E(t):d(n)};C.current[b]=L,h(o,"request",{callbackId:b,requestType:l,data:c})}),[h]),j=e.useCallback((o,l)=>{h(o,"load-options",l)},[h]),I=e.useCallback((o,l)=>{h(o,"validate",l)},[h]),T=e.useMemo(()=>({registerFrame:M,unregisterFrame:O,sendMessage:h,sendRequest:z,loadOptions:j,validate:I,hasHandler:$,readyFrames:g,addListener:(o,l,c)=>(w.current[o]||(w.current[o]={}),w.current[o][l]||(w.current[o][l]=[]),w.current[o][l].push(c),()=>{w.current[o][l]=w.current[o][l].filter(d=>d!==c)})}),[M,O,h,z,j,I,$,g]);return e.createElement(_.Provider,{value:T},e.createElement(V,{launcher:u},r))},Z=(r,u,i)=>{const f=e.useContext(_);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const g=e.useRef(i);e.useEffect(()=>{g.current=i},[i]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const k=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:k}),f.addListener(r,`key-pressed:${k}`,(...C)=>g.current(...C))}return f.addListener(r,u,(...k)=>g.current(...k))}},[f,r,u])};Y.propTypes={children:p.node.isRequired,authorizationLauncher:p.func};const D=q.default||q,te=1e4,re="credentials",N=(r,u)=>`${r}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${re}`,se=D.iframe`
+(function(m,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(m=typeof globalThis!="undefined"?globalThis:m||self,e(m["mm-react-embeddable"]={},m.React,m.PropTypes,m.styled))})(this,(function(m,e,E,q){"use strict";const W=e.createContext(null),v=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),H=typeof window!="undefined"&&window.location.protocol==="https:",te=8e3,F=r=>{try{return new URL(r).origin}catch{return null}},P=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const u=r.split(".");return u.length<=2?r:u.slice(-2).join(".")},K=(r,u)=>{try{const i=new URL(r),f=new URL(u);return i.protocol!==f.protocol?!0:P(i.hostname)!==P(f.hostname)}catch{return!0}},V=(r,{onBlocked:u,onClosed:i})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const g=setInterval(()=>{f.closed&&(clearInterval(g),i())},1e3);return()=>clearInterval(g)},G=({children:r,launcher:u})=>{const i=e.useContext(W),[f,g]=e.useState({}),[w,k]=e.useState({}),[C,S]=e.useState({}),[$,M]=e.useState({}),O=e.useRef(C);O.current=C;const h=e.useRef(null),x=e.useRef({}),y=e.useRef({}),z=e.useCallback(n=>{const t=y.current[n];if(!t)return;const s=a=>!a[n]||a[n].clientId?a:{...a,[n]:{...a[n],clientId:t}};g(s),M(s)},[]),j=e.useCallback((n,t)=>{const s=F(n==null?void 0:n.authUrl);s&&(M(a=>a[s]?a:{...a,[s]:{origin:s,reason:t,clientId:y.current[s]||null}}),z(s))},[z]),I=e.useCallback((n,{v2:t=!1}={})=>{const s=F(n==null?void 0:n.authUrl);s&&(t&&O.current[s]||(g(a=>a[s]?a:{...a,[s]:{origin:s,authUrl:n.authUrl,silentUrl:n.silentUrl||null,status:t&&n.silentUrl&&H?"silent":"interactive",v2:t,clientId:n.clientId||y.current[s]||null,popupBlocked:!1}}),z(s)))},[z]),T=e.useCallback(n=>{g(t=>{if(!t[n])return t;const s={...t};return delete s[n],s})},[]),o=e.useCallback(n=>{n&&(T(n),k(t=>({...t,[n]:(t[n]||0)+1})))},[T]),l=e.useCallback(n=>{g(t=>!t[n]||t[n].status==="interactive"?t:{...t,[n]:{...t[n],status:"interactive"}})},[]),c=e.useCallback(n=>{T(n.origin)},[T]),d=e.useCallback(n=>{const t=F(n==null?void 0:n.authUrl);if(t&&K(t,window.location.origin)){j(n,"cross-site-legacy");return}I(n)},[I,j]);e.useEffect(()=>{if(!i)return;const n=[i.addListener("*","init",t=>{t!=null&&t.origin&&t.clientId&&(y.current[t.origin]=t.clientId,z(t.origin))}),i.addListener("*","authorize",d),i.addListener("*","login",d),i.addListener("*","credential-request",t=>I(t,{v2:!0})),i.addListener("*","authorized",t=>{t!=null&&t.accessToken||o(F(t==null?void 0:t.authUrl))})];return()=>n.forEach(t=>t())},[i,d,I,o,z]),e.useEffect(()=>{const n=t=>{const s=t==null?void 0:t.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const a=F(s.authUrl);if(!(!a||t.origin!==a)){if(s.type==="authorized"&&s.accessToken){S(U=>({...U,[a]:{accessToken:s.accessToken}})),T(a);return}s.type==="authorize-failed"&&l(a)}};return window.addEventListener("message",n),()=>window.removeEventListener("message",n)},[T,l]),e.useEffect(()=>{const n=x.current;Object.values(f).forEach(t=>{t.status==="silent"&&!n[t.origin]&&(n[t.origin]=setTimeout(()=>{delete n[t.origin],l(t.origin)},te))}),Object.keys(n).forEach(t=>{(!f[t]||f[t].status!=="silent")&&(clearTimeout(n[t]),delete n[t])})},[f,l]),e.useEffect(()=>()=>{h.current&&h.current(),Object.values(x.current).forEach(clearTimeout)},[]);const p=e.useCallback(n=>{h.current&&(h.current(),h.current=null);const t=u||V;h.current=t(n,{onBlocked:()=>{g(s=>s[n.origin]?{...s,[n.origin]:{...s[n.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(n.v2){H&&g(s=>!s[n.origin]||!s[n.origin].silentUrl?s:{...s,[n.origin]:{...s[n.origin],status:"silent"}});return}o(n.origin)}})},[u,o]),b={pending:Object.values(f).filter(n=>n.status==="interactive"),authorize:p,dismiss:c,originEpochs:w,credentials:C,unsupported:$},L=Object.values(f).filter(n=>n.status==="silent"&&n.silentUrl);return e.createElement(v.Provider,{value:b},r,L.map(n=>e.createElement("iframe",{key:`mm-silent-auth-${n.origin}`,src:n.silentUrl,title:`MachineMetrics silent authorization (${n.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};G.propTypes={children:E.node,launcher:E.func};const J=()=>e.useContext(v),Q=r=>{const{originEpochs:u}=e.useContext(v),i=F(r);return i&&u[i]||0},X=r=>{const{credentials:u}=e.useContext(v),i=F(r);return i&&u[i]||null},Y=r=>{const{unsupported:u}=e.useContext(v),i=F(r);return i&&u[i]||null},N=({children:r,authorizationLauncher:u})=>{const[i,f]=e.useState({}),[g,w]=e.useState({}),k=e.useRef({}),C=e.useRef({}),S=e.useRef({}),$=e.useCallback((o,l)=>{var c;return!!((c=S.current[o])!=null&&c.has(l))},[]),M=e.useCallback((o,l,c)=>{f(d=>({...d,[o]:{origin:l,frameRef:c}}))},[]),O=e.useCallback(o=>{f(l=>{const c={...l};return delete c[o],c}),w(l=>{const c={...l};return delete c[o],c}),delete S.current[o]},[]);e.useEffect(()=>{const o=(c=[],d)=>{c.forEach(p=>p(d))},l=c=>{var L,n,t,s,a;if(!((L=c==null?void 0:c.data)!=null&&L.instanceId))return;const{instanceId:d,type:p}=c.data,b=k.current;if(p==="response"){const{callbackId:U,response:B,error:_}=c.data,A=C.current[U];A&&(A(B,_),delete C.current[U]);return}if(p==="mark-registered"){const{requestType:U}=c.data;S.current[d]||(S.current[d]=new Set),S.current[d].add(U);return}p==="ready"&&w(U=>({...U,[d]:!0})),o((n=b[d])==null?void 0:n[p],c.data),o((t=b["*"])==null?void 0:t[p],c.data),o((s=b[d])==null?void 0:s["*"],c.data),o((a=b["*"])==null?void 0:a["*"],c.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[i]);const h=e.useCallback((o,l,c)=>{var p,b;const d=i[o];if(!d){console.warn(`Origin not set for id: ${o}. Unable to send message.`);return}(b=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&b.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:l,...c,instanceId:o},d.origin)},[i]),x=e.useRef(0),y=e.useCallback(()=>`${Date.now()}-${++x.current}`,[]),z=e.useCallback(async(o,l,c={})=>new Promise((d,p)=>{const b=y(),L=(n,t)=>{delete C.current[b],t?p(t):d(n)};C.current[b]=L,h(o,"request",{callbackId:b,requestType:l,data:c})}),[h]),j=e.useCallback((o,l)=>{h(o,"load-options",l)},[h]),I=e.useCallback((o,l)=>{h(o,"validate",l)},[h]),T=e.useMemo(()=>({registerFrame:M,unregisterFrame:O,sendMessage:h,sendRequest:z,loadOptions:j,validate:I,hasHandler:$,readyFrames:g,addListener:(o,l,c)=>(k.current[o]||(k.current[o]={}),k.current[o][l]||(k.current[o][l]=[]),k.current[o][l].push(c),()=>{k.current[o][l]=k.current[o][l].filter(d=>d!==c)})}),[M,O,h,z,j,I,$,g]);return e.createElement(W.Provider,{value:T},e.createElement(G,{launcher:u},r))},Z=(r,u,i)=>{const f=e.useContext(W);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const g=e.useRef(i);e.useEffect(()=>{g.current=i},[i]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const w=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:w}),f.addListener(r,`key-pressed:${w}`,(...C)=>g.current(...C))}return f.addListener(r,u,(...w)=>g.current(...w))}},[f,r,u])};N.propTypes={children:E.node.isRequired,authorizationLauncher:E.func};const D=q.default||q,re=1e4,se="credentials",R=(r,u)=>`${r}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${se}`,ie=D.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${r=>r.$isReady?"visible":"hidden"};
-`,ie=D.div`
+`,oe=D.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -16,13 +16,13 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,R=({entry:r})=>e.createElement(ie,null,e.createElement("div",{style:{fontWeight:600}},r&&r.origin||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));R.propTypes={entry:p.shape({origin:p.string,name:p.string,reason:p.string})};const oe=D.div`
+`,ee=({entry:r})=>e.createElement(oe,null,e.createElement("div",{style:{fontWeight:600}},r&&r.origin||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));ee.propTypes={entry:E.shape({origin:E.string,name:E.string,reason:E.string})};const ue=D.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,ue=()=>e.createElement(oe,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ee=({id:r,src:u,path:i,onInit:f=()=>{},onTimeout:g,context:k={},params:w={},renderUnsupported:C,renderTimeout:S,...$})=>{if("isConfiguring"in $)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in k)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in k)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const M=e.useRef(),[O,h]=e.useState(),[x,y]=e.useState(0),[z,j]=e.useState(!1),[I,T]=e.useState(!1),o=J(u),l=Q(u),c=X(u);e.useEffect(()=>{o>0&&y(0)},[o]);const{registerFrame:d,unregisterFrame:E,sendMessage:b}=e.useContext(_),[L,n]=e.useState(),t=e.useRef(),s=e.useRef(g),a=e.useRef(f),U=e.useRef(!1);e.useEffect(()=>{s.current=g},[g]),e.useEffect(()=>{a.current=f},[f]),e.useEffect(()=>{x&&b(r,"set-context",{context:{...k}})},[k,r,x]),e.useEffect(()=>{x&&b(r,"set-params",{params:w})},[w,r,x]),e.useEffect(()=>{i!==void 0&&n((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),e.useEffect(()=>{L===void 0||!x||b(r,"navigate",{path:L})},[L,x,r,b]),e.useEffect(()=>{if(!u||!r||!M)return;const A=new URL(u);return d(r,A.origin,M),a.current(),h(N(A.origin,r)),()=>{E(r)}},[u,r,d,M]),e.useEffect(()=>{if(!(!O||U.current))return t.current=setTimeout(()=>{j(!0),s.current&&s.current()},te),()=>clearTimeout(t.current)},[O]);const B=e.useCallback(()=>{U.current=!0,clearTimeout(t.current),j(!1)},[]);Z(r,"init",B),Z(r,"authorize",B),Z(r,"login",B),Z(r,"credential-request",()=>{B(),T(!0)}),e.useEffect(()=>{!I||!l||b(r,"credential",{accessToken:l.accessToken})},[I,l,r,b]),Z(r,"ready",()=>{B(),y(A=>A+1)});const v=e.useRef();return Z(r,"heartbeat",()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{if(M.current){const A=new URL(u);M.current.src=N(A.origin,r)}},6e3)}),e.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]),c?C?C(c):e.createElement(R,{entry:c}):z&&!x?S?S():e.createElement(ue,null):e.createElement(se,{key:`auth-epoch-${o}`,$isReady:x,ref:M,src:O,...$})};ee.propTypes={id:p.string,src:p.string.isRequired,path:p.string,onInit:p.func,onTimeout:p.func,renderUnsupported:p.func,renderTimeout:p.func};const ce=q.div`
+`,ce=()=>e.createElement(ue,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ne=({id:r,src:u,path:i,onInit:f=()=>{},onTimeout:g,context:w={},params:k={},renderUnsupported:C,renderTimeout:S,...$})=>{if("isConfiguring"in $)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in w)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in w)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const M=e.useRef(),[O,h]=e.useState(),[x,y]=e.useState(0),[z,j]=e.useState(!1),[I,T]=e.useState(!1),o=Q(u),l=X(u),c=Y(u);e.useEffect(()=>{o>0&&y(0)},[o]);const{registerFrame:d,unregisterFrame:p,sendMessage:b}=e.useContext(W),[L,n]=e.useState(),t=e.useRef(),s=e.useRef(g),a=e.useRef(f),U=e.useRef(!1);e.useEffect(()=>{s.current=g},[g]),e.useEffect(()=>{a.current=f},[f]),e.useEffect(()=>{x&&b(r,"set-context",{context:{...w}})},[w,r,x]),e.useEffect(()=>{x&&b(r,"set-params",{params:k})},[k,r,x]),e.useEffect(()=>{i!==void 0&&n((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),e.useEffect(()=>{L===void 0||!x||b(r,"navigate",{path:L})},[L,x,r,b]),e.useEffect(()=>{if(!u||!r||!M)return;const A=new URL(u);return d(r,A.origin,M),a.current(),h(R(A.origin,r)),()=>{p(r)}},[u,r,d,M]),e.useEffect(()=>{if(!(!O||U.current))return t.current=setTimeout(()=>{j(!0),s.current&&s.current()},re),()=>clearTimeout(t.current)},[O]);const B=e.useCallback(()=>{U.current=!0,clearTimeout(t.current),j(!1)},[]);Z(r,"init",B),Z(r,"authorize",B),Z(r,"login",B),Z(r,"credential-request",()=>{B(),T(!0)}),e.useEffect(()=>{!I||!l||b(r,"credential",{accessToken:l.accessToken})},[I,l,r,b]),Z(r,"ready",()=>{B(),y(A=>A+1)});const _=e.useRef();return Z(r,"heartbeat",()=>{_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{if(M.current){const A=new URL(u);M.current.src=R(A.origin,r)}},6e3)}),e.useEffect(()=>()=>{_.current&&clearTimeout(_.current)},[]),c?C?C(c):e.createElement(ee,{entry:c}):z&&!x?S?S():e.createElement(ce,null):e.createElement(ie,{key:`auth-epoch-${o}`,$isReady:x,ref:M,src:O,...$})};ne.propTypes={id:E.string,src:E.string.isRequired,path:E.string,onInit:E.func,onTimeout:E.func,renderUnsupported:E.func,renderTimeout:E.func};const le=q.div`
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-`,le=q.div`
+`,de=q.div`
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
@@ -39,13 +39,13 @@
   max-width: calc(100vw - 32px);
   font-family: sans-serif;
   color: #222;
-`,de=q.div`
+`,fe=q.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`,fe=q.button`
+`,ae=q.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -54,8 +54,8 @@
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`,ae=q.p`
+`,me=q.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
-`,me=()=>{const{pending:r,authorize:u}=G();return r.length===0?null:e.createElement(ce,null,e.createElement(le,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(i=>e.createElement("div",{key:i.origin},e.createElement(de,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},i.origin)),e.createElement(fe,{onClick:()=>u(i)},"Authorize")),i.popupBlocked&&e.createElement(ae,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};m.EmbeddedAuthorizationContext=W,m.EmbeddedAuthorizationPrompt=me,m.MMEmbeddableZone=ee,m.MMEmbeddableZoneContext=_,m.MMEmbeddableZoneProvider=Y,m.isCrossSite=P,m.popupAuthorizationLauncher=K,m.useEmbeddedAuthorizations=G,m.useEmbeddedCredential=Q,m.useEmbeddedEffect=Z,m.useEmbeddedOriginEpoch=J,m.useEmbeddedUnsupported=X,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+`,ge=()=>{const{pending:r,authorize:u}=J();return r.length===0?null:e.createElement(le,null,e.createElement(de,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(i=>e.createElement("div",{key:i.origin},e.createElement(fe,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},i.origin)),e.createElement(ae,{onClick:()=>u(i)},"Authorize")),i.popupBlocked&&e.createElement(me,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};m.EmbeddedAuthorizationContext=v,m.EmbeddedAuthorizationPrompt=ge,m.MMEmbeddableZone=ne,m.MMEmbeddableZoneContext=W,m.MMEmbeddableZoneProvider=N,m.isCrossSite=K,m.popupAuthorizationLauncher=V,m.useEmbeddedAuthorizations=J,m.useEmbeddedCredential=X,m.useEmbeddedEffect=Z,m.useEmbeddedOriginEpoch=Q,m.useEmbeddedUnsupported=Y,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/package.json

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