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

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,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`
+(function(p,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):(p=typeof globalThis!="undefined"?globalThis:p||self,e(p["mm-react-embeddable"]={},p.React,p.PropTypes,p.styled))})(this,(function(p,e,C,v){"use strict";const G=e.createContext(null),H=e.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),X="access_token",J=s=>s?s.kind?s:s.accessToken?{kind:X,accessToken:s.accessToken,expiresAt:s.expiresAt||null}:null:null,fe=new Set(["host_not_allowed","invalid_token","provider_unavailable"]),V=typeof window!="undefined"&&window.location.protocol==="https:",be=8e3,N=s=>{try{return new URL(s).origin}catch{return null}},Y=(s,u)=>{const c=u==null?void 0:u.origin;return!c||N(s==null?void 0:s.authUrl)!==c?null:c},R=s=>{if(!s||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(s)||s.includes(":"))return s;const u=s.split(".");return u.length<=2?s:u.slice(-2).join(".")},ee=(s,u)=>{try{const c=new URL(s),f=new URL(u);return c.protocol!==f.protocol?!0:R(c.hostname)!==R(f.hostname)}catch{return!0}},ne=(s,{onBlocked:u,onClosed:c})=>{const f=window.open(s.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const g=setInterval(()=>{f.closed&&(clearInterval(g),c())},1e3);return()=>clearInterval(g)},te=({children:s,launcher:u,broker:c})=>{const f=e.useContext(G),[g,k]=e.useState({}),[j,I]=e.useState({}),[M,S]=e.useState({}),[U,T]=e.useState({}),Z=e.useRef(M);Z.current=M;const b=e.useRef(null),y=e.useRef({}),_=e.useRef({}),q=e.useRef({}),A=e.useRef(c);A.current=c;const z=e.useCallback(n=>{const t=_.current[n];if(!t)return;const r=d=>!d[n]||d[n].clientId?d:{...d,[n]:{...d[n],clientId:t}};k(r),T(r)},[]),B=e.useCallback((n,t)=>{n&&(T(r=>r[n]?r:{...r,[n]:{origin:n,reason:t,clientId:_.current[n]||null}}),z(n))},[z]),i=e.useCallback((n,{v2:t=!1,origin:r=null}={})=>{r&&(t&&Z.current[r]||(k(d=>d[r]?d:{...d,[r]:{origin:r,authUrl:n.authUrl,silentUrl:n.silentUrl||null,status:t&&A.current?"broker":t&&n.silentUrl&&V?"silent":"interactive",v2:t,scope:n.scope||null,acceptsCredentials:q.current[r]||null,consent:null,error:null,clientId:n.clientId||_.current[r]||null,popupBlocked:!1}}),z(r)))},[z]),l=e.useCallback(n=>{k(t=>{if(!t[n])return t;const r={...t};return delete r[n],r})},[]),o=e.useCallback(n=>{n&&(l(n),I(t=>({...t,[n]:(t[n]||0)+1})))},[l]),a=e.useCallback(n=>{k(t=>!t[n]||t[n].status==="interactive"?t:{...t,[n]:{...t[n],status:"interactive"}})},[]),h=e.useCallback(n=>{l(n.origin)},[l]),E=e.useCallback((n,t)=>{const r=Y(n,t);if(r){if(ee(r,window.location.origin)){B(r,"cross-site-legacy");return}i(n,{origin:r})}},[i,B]);e.useEffect(()=>{if(!f)return;const n=[f.addListener("*","init",(t,r)=>{r!=null&&r.origin&&(t!=null&&t.clientId)&&(_.current[r.origin]=t.clientId,z(r.origin)),r!=null&&r.origin&&Array.isArray(t==null?void 0:t.acceptsCredentials)&&(q.current[r.origin]=t.acceptsCredentials)}),f.addListener("*","authorize",E),f.addListener("*","login",E),f.addListener("*","credential-request",(t,r)=>i(t,{v2:!0,origin:Y(t,r)}))];return()=>n.forEach(t=>t())},[f,E,i,z]),e.useEffect(()=>{const n=t=>{const r=t==null?void 0:t.data;if(!r||r.type!=="authorized"&&r.type!=="authorize-failed")return;const d=N(r.authUrl);if(!(!d||t.origin!==d)){if(r.type==="authorized"){r.accessToken?(S(m=>({...m,[d]:J({accessToken:r.accessToken})})),l(d)):o(d);return}a(d)}};return window.addEventListener("message",n),()=>window.removeEventListener("message",n)},[l,o,a]);const O=e.useCallback((n,t)=>{const r=n==null?void 0:n.origin,d=J(t);!r||!d||(S(m=>({...m,[r]:d})),l(r))},[l]),w=e.useCallback((n,t)=>{k(r=>r[n]?{...r,[n]:{...r[n],...t}}:r)},[]),x=e.useCallback(async(n,{approve:t}={})=>{const r=A.current,{origin:d}=n;let m;try{m=await r({origin:d,clientId:n.clientId,scope:n.scope,authUrl:n.authUrl},{approve:t})}catch{t?w(d,{error:{reason:"broker_unavailable"}}):w(d,{status:n.silentUrl&&V?"silent":"interactive"});return}if((m==null?void 0:m.status)===200&&m.credential){O(n,m.credential);return}if((m==null?void 0:m.status)===409&&m.consentRequired){w(d,{status:"interactive",consent:{client:m.client||null,stepUp:!!m.stepUp,scope:m.scope||n.scope},error:null});return}const P=(m==null?void 0:m.error)||"broker_error";if(!t&&fe.has(P)){w(d,{status:n.silentUrl&&V?"silent":"interactive"});return}if(t&&P==="consent_denied"){w(d,{error:null});return}l(d),T(ae=>({...ae,[d]:{origin:d,reason:`broker:${P}`,detail:m||null,clientId:n.clientId||_.current[d]||null}}))},[O,w,l]),F=e.useRef({});e.useEffect(()=>{Object.values(g).forEach(n=>{n.status!=="broker"||F.current[n.origin]||(F.current[n.origin]=!0,x(n).finally(()=>{delete F.current[n.origin]}))})},[g,x]);const W=e.useCallback(n=>!A.current||!(n!=null&&n.consent)?Promise.resolve():x(n,{approve:!0}),[x]);e.useEffect(()=>{const n=y.current;Object.values(g).forEach(t=>{t.status==="silent"&&!n[t.origin]&&(n[t.origin]=setTimeout(()=>{delete n[t.origin],a(t.origin)},be))}),Object.keys(n).forEach(t=>{(!g[t]||g[t].status!=="silent")&&(clearTimeout(n[t]),delete n[t])})},[g,a]),e.useEffect(()=>()=>{b.current&&b.current(),Object.values(y.current).forEach(clearTimeout)},[]);const L=e.useCallback(n=>{b.current&&(b.current(),b.current=null);const t=u||ne;b.current=t(n,{onBlocked:()=>{k(r=>r[n.origin]?{...r,[n.origin]:{...r[n.origin],popupBlocked:!0}}:r)},onClosed:()=>{if(n.v2){V&&k(r=>!r[n.origin]||!r[n.origin].silentUrl?r:{...r,[n.origin]:{...r[n.origin],status:"silent"}});return}o(n.origin)}})},[u,o]),D={pending:Object.values(g).filter(n=>n.status==="interactive"),authorize:L,approve:W,complete:O,dismiss:h,originEpochs:j,credentials:M,unsupported:U},K=Object.values(g).filter(n=>n.status==="silent"&&n.silentUrl);return e.createElement(H.Provider,{value:D},s,K.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"}})))};te.propTypes={children:C.node,launcher:C.func,broker:C.func};const re=()=>e.useContext(H),se=s=>{const{originEpochs:u}=e.useContext(H),c=N(s);return c&&u[c]||0},ie=s=>{const{credentials:u}=e.useContext(H),c=N(s);return c&&u[c]||null},oe=s=>{const{unsupported:u}=e.useContext(H),c=N(s);return c&&u[c]||null},ue=({children:s,authorizationLauncher:u,credentialBroker:c})=>{const[f,g]=e.useState({}),[k,j]=e.useState({}),I=e.useRef({}),M=e.useRef({}),S=e.useRef({}),U=e.useCallback((i,l)=>{var o;return!!((o=S.current[i])!=null&&o.has(l))},[]),T=e.useCallback((i,l,o)=>{g(a=>({...a,[i]:{origin:l,frameRef:o}}))},[]),Z=e.useCallback(i=>{g(l=>{const o={...l};return delete o[i],o}),j(l=>{const o={...l};return delete o[i],o}),delete S.current[i]},[]);e.useEffect(()=>{const i=(o=[],a,h)=>{o.forEach(E=>E(a,h))},l=o=>{var F,W,L,D,K,n,t;if(!((F=o==null?void 0:o.data)!=null&&F.instanceId))return;const{instanceId:a,type:h}=o.data,E=f[a],O=(L=(W=E==null?void 0:E.frameRef)==null?void 0:W.current)==null?void 0:L.contentWindow;if(!O||o.source!==O||o.origin!==E.origin)return;const w={origin:o.origin},x=I.current;if(h==="response"){const{callbackId:r,response:d,error:m}=o.data,P=M.current[r];P&&(P(d,m),delete M.current[r]);return}if(h==="mark-registered"){const{requestType:r}=o.data;S.current[a]||(S.current[a]=new Set),S.current[a].add(r);return}h==="ready"&&j(r=>({...r,[a]:!0})),i((D=x[a])==null?void 0:D[h],o.data,w),i((K=x["*"])==null?void 0:K[h],o.data,w),i((n=x[a])==null?void 0:n["*"],o.data,w),i((t=x["*"])==null?void 0:t["*"],o.data,w)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[f]);const b=e.useCallback((i,l,o)=>{var h,E;const a=f[i];if(!a){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(E=(h=a==null?void 0:a.frameRef)==null?void 0:h.current)!=null&&E.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...o,instanceId:i},a.origin)},[f]),y=e.useRef(0),_=e.useCallback(()=>`${Date.now()}-${++y.current}`,[]),q=e.useCallback(async(i,l,o={})=>new Promise((a,h)=>{const E=_(),O=(w,x)=>{delete M.current[E],x?h(x):a(w)};M.current[E]=O,b(i,"request",{callbackId:E,requestType:l,data:o})}),[b]),A=e.useCallback((i,l)=>{b(i,"load-options",l)},[b]),z=e.useCallback((i,l)=>{b(i,"validate",l)},[b]),B=e.useMemo(()=>({registerFrame:T,unregisterFrame:Z,sendMessage:b,sendRequest:q,loadOptions:A,validate:z,hasHandler:U,readyFrames:k,addListener:(i,l,o)=>(I.current[i]||(I.current[i]={}),I.current[i][l]||(I.current[i][l]=[]),I.current[i][l].push(o),()=>{I.current[i][l]=I.current[i][l].filter(a=>a!==o)})}),[T,Z,b,q,A,z,U,k]);return e.createElement(G.Provider,{value:B},e.createElement(te,{launcher:u,broker:c},s))},$=(s,u,c)=>{const f=e.useContext(G);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const g=e.useRef(c);e.useEffect(()=>{g.current=c},[c]),e.useEffect(()=>{if(!(!s||!u)){if(u.startsWith("key:")){const k=u.substring(4);return f.readyFrames[s]&&f.sendMessage(s,"subscribe-key",{keyChord:k}),f.addListener(s,`key-pressed:${k}`,(...I)=>g.current(...I))}return f.addListener(s,u,(...k)=>g.current(...k))}},[f,s,u])};ue.propTypes={children:C.node.isRequired,authorizationLauncher:C.func,credentialBroker:C.func};const Q=v.default||v,me=1e4,pe="credentials",ce=(s,u)=>`${s}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${pe}`,ge=Q.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${r=>r.$isReady?"visible":"hidden"};
-`,oe=D.div`
+  visibility: ${s=>s.$isReady?"visible":"hidden"};
+`,he=Q.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -16,13 +16,13 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,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`
+`,le=({entry:s})=>e.createElement(he,null,e.createElement("div",{style:{fontWeight:600}},s&&s.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."));le.propTypes={entry:C.shape({origin:C.string,name:C.string,reason:C.string})};const Ee=Q.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,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`
+`,ke=()=>e.createElement(Ee,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),de=({id:s,src:u,path:c,onInit:f=()=>{},onTimeout:g,context:k={},params:j={},renderUnsupported:I,renderTimeout:M,...S})=>{if("isConfiguring"in S)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 U=e.useRef(),[T,Z]=e.useState(),[b,y]=e.useState(0),[_,q]=e.useState(!1),[A,z]=e.useState(!1),B=se(u),i=ie(u),l=oe(u);e.useEffect(()=>{B>0&&y(0)},[B]);const{registerFrame:o,unregisterFrame:a,sendMessage:h}=e.useContext(G),[E,O]=e.useState(),w=e.useRef(),x=e.useRef(g),F=e.useRef(f),W=e.useRef(!1);e.useEffect(()=>{x.current=g},[g]),e.useEffect(()=>{F.current=f},[f]),e.useEffect(()=>{b&&h(s,"set-context",{context:{...k}})},[k,s,b]),e.useEffect(()=>{b&&h(s,"set-params",{params:j})},[j,s,b]),e.useEffect(()=>{c!==void 0&&O((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),e.useEffect(()=>{E===void 0||!b||h(s,"navigate",{path:E})},[E,b,s,h]),e.useEffect(()=>{if(!u||!s||!U)return;const t=new URL(u);return o(s,t.origin,U),F.current(),Z(ce(t.origin,s)),()=>{a(s)}},[u,s,o,U]),e.useEffect(()=>{if(!(!T||W.current))return w.current=setTimeout(()=>{q(!0),x.current&&x.current()},me),()=>clearTimeout(w.current)},[T]);const L=e.useCallback(()=>{W.current=!0,clearTimeout(w.current),q(!1)},[]),[D,K]=e.useState(null);$(s,"init",t=>{L(),Array.isArray(t==null?void 0:t.acceptsCredentials)&&K(t.acceptsCredentials)}),$(s,"authorize",L),$(s,"login",L),$(s,"credential-request",()=>{L(),z(!0)}),e.useEffect(()=>{if(!A||!i)return;const t=D;if(Array.isArray(t)&&!t.includes(i.kind))return;const r=i.kind==="access_token"?{accessToken:i.accessToken}:{};h(s,"credential",{...r,credential:i})},[A,i,D,s,h]),$(s,"ready",()=>{L(),y(t=>t+1)});const n=e.useRef();return $(s,"heartbeat",()=>{n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{if(U.current){const t=new URL(u);U.current.src=ce(t.origin,s)}},6e3)}),e.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),l?I?I(l):e.createElement(le,{entry:l}):_&&!b?M?M():e.createElement(ke,null):e.createElement(ge,{key:`auth-epoch-${B}`,$isReady:b,ref:U,src:T,...S})};de.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,renderUnsupported:C.func,renderTimeout:C.func};const Ce=v.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;
-`,de=q.div`
+`,we=v.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;
-`,fe=q.div`
+`,xe=v.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`,ae=q.button`
+`,Ie=v.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -54,8 +54,8 @@
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`,me=q.p`
+`,Me=v.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
-`,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"})}));
+`,Se=()=>{const{pending:s,authorize:u}=re();return s.length===0?null:e.createElement(Ce,null,e.createElement(we,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."),s.map(c=>e.createElement("div",{key:c.origin},e.createElement(xe,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},c.origin)),e.createElement(Ie,{onClick:()=>u(c)},"Authorize")),c.popupBlocked&&e.createElement(Me,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};p.CREDENTIAL_KIND_ACCESS_TOKEN=X,p.EmbeddedAuthorizationContext=H,p.EmbeddedAuthorizationPrompt=Se,p.MMEmbeddableZone=de,p.MMEmbeddableZoneContext=G,p.MMEmbeddableZoneProvider=ue,p.isCrossSite=ee,p.normalizeCredential=J,p.popupAuthorizationLauncher=ne,p.useEmbeddedAuthorizations=re,p.useEmbeddedCredential=ie,p.useEmbeddedEffect=$,p.useEmbeddedOriginEpoch=se,p.useEmbeddedUnsupported=oe,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/package.json

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