@machinemetrics/mm-react-embeddable 2.0.0-5 → 2.0.0-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
- (function(h,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],t):(h=typeof globalThis!="undefined"?globalThis:h||self,t(h["mm-react-embeddable"]={},h.React,h.PropTypes,h.styled))})(this,(function(h,t,Ee,ge){"use strict";const ee=r=>r&&r.__esModule?r:{default:r},U=ee(t),C=ee(Ee),se=ee(ge),V=t.createContext(null),Y=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ue="access_token",te=r=>r?r.kind?r:r.accessToken?{kind:ue,accessToken:r.accessToken,expiresAt:r.expiresAt||null}:null:null,ke=60,Ce=120,Te=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),J=typeof window!="undefined"&&window.location.protocol==="https:",_e=8e3,X=r=>{try{return new URL(r).origin}catch{return null}},oe=(r,u)=>{const c=u==null?void 0:u.origin;return!c||X(r==null?void 0:r.authUrl)!==c?null:c},ie=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(".")},re=(r,u)=>{try{const c=new URL(r),f=new URL(u);return c.protocol!==f.protocol?!0:ie(c.hostname)!==ie(f.hostname)}catch{return!0}},ce=(r,{onBlocked:u,onClosed:c})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const m=setInterval(()=>{f.closed&&(clearInterval(m),c())},1e3);return()=>clearInterval(m)},le=({children:r,launcher:u,broker:c})=>{const f=t.useContext(V),[m,g]=t.useState({}),[Z,_]=t.useState({}),[O,y]=t.useState({}),[q,x]=t.useState({}),N=t.useRef(O);N.current=O;const k=t.useRef(m);k.current=m;const $=t.useRef(null),G=t.useRef({}),L=t.useRef({}),W=t.useRef({}),F=t.useRef(c);F.current=c;const I=t.useCallback(e=>{const n=L.current[e];if(!n)return;const s=l=>!l[e]||l[e].clientId?l:{...l,[e]:{...l[e],clientId:n}};g(s),x(s)},[]),i=t.useCallback((e,n)=>{e&&(x(s=>s[e]?s:{...s,[e]:{origin:e,reason:n,clientId:L.current[e]||null}}),I(e))},[I]),a=t.useCallback((e,{v2:n=!1,origin:s=null}={})=>{s&&(n&&N.current[s]||(g(l=>l[s]?l:{...l,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&F.current?"broker":n&&e.silentUrl&&J?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:W.current[s]||null,consent:null,error:null,clientId:e.clientId||L.current[s]||null,popupBlocked:!1}}),I(s)))},[I]),o=t.useRef({}),d=t.useCallback(e=>{o.current[e]&&(clearTimeout(o.current[e]),delete o.current[e])},[]),p=t.useCallback(e=>{d(e),g(n=>{if(!n[e])return n;const s={...n};return delete s[e],s})},[d]),E=t.useCallback(e=>{e&&(p(e),_(n=>({...n,[e]:(n[e]||0)+1})))},[p]),A=t.useCallback(e=>{g(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),P=t.useCallback(e=>{p(e.origin)},[p]),T=t.useCallback((e,n)=>{const s=oe(e,n);if(s){if(re(s,window.location.origin)){i(s,"cross-site-legacy");return}a(e,{origin:s})}},[a,i]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(n,s)=>{s!=null&&s.origin&&(n!=null&&n.clientId)&&(L.current[s.origin]=n.clientId,I(s.origin)),s!=null&&s.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)?W.current[s.origin]=n.acceptsCredentials:s!=null&&s.origin&&re(s.origin,window.location.origin)&&i(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",T),f.addListener("*","login",T),f.addListener("*","credential-request",(n,s)=>a(n,{v2:!0,origin:oe(n,s)}))];return()=>e.forEach(n=>n())},[f,T,a,I,i]),t.useEffect(()=>{const e=n=>{const s=n==null?void 0:n.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const l=X(s.authUrl);if(!(!l||n.origin!==l)){if(s.type==="authorized"){if(s.accessToken){if(!k.current[l])return;y(b=>({...b,[l]:te({accessToken:s.accessToken})})),p(l)}else E(l);return}A(l)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[p,E,A]);const j=t.useCallback((e,n)=>{const s=e==null?void 0:e.origin,l=te(n);!s||!l||(y(b=>({...b,[s]:l})),p(s))},[p]),z=t.useCallback((e,n)=>{g(s=>s[e]?{...s,[e]:{...s[e],...n}}:s)},[]),M=t.useRef({}),S=t.useCallback(async(e,{approve:n}={})=>{const s=F.current,{origin:l}=e;let b;try{b=await s({origin:l,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?z(l,{error:{reason:"broker_unavailable"}}):z(l,{status:e.silentUrl&&J?"silent":"interactive"});return}if((b==null?void 0:b.status)===200&&b.credential){j(e,b.credential);return}if((b==null?void 0:b.status)===409&&b.consentRequired){z(l,{status:"interactive",consent:{client:b.client||null,stepUp:!!b.stepUp,scope:b.scope||e.scope},error:null});return}const Q=(b==null?void 0:b.error)||"broker_error";if(!n&&Te.has(Q)){z(l,{status:e.silentUrl&&J?"silent":"interactive"});return}if(n&&Q==="consent_denied"){z(l,{error:null});return}if(Q==="rate_limited"&&!e.rateLimitRetried){const R=Math.min(Number(b==null?void 0:b.retryAfter)>0?Number(b.retryAfter):ke,Ce),Oe={...e,rateLimitRetried:!0};d(l),o.current[l]=setTimeout(()=>{delete o.current[l],M.current[l]=!0,v.current(Oe,{approve:n}).finally(()=>{delete M.current[l]})},R*1e3),z(l,{rateLimitRetried:!0});return}p(l),x(R=>({...R,[l]:{origin:l,reason:`broker:${Q}`,detail:b||null,clientId:e.clientId||L.current[l]||null}}))},[j,z,p,d]),v=t.useRef(S);v.current=S,t.useEffect(()=>{Object.values(m).forEach(e=>{e.status!=="broker"||M.current[e.origin]||o.current[e.origin]||(M.current[e.origin]=!0,S(e).finally(()=>{delete M.current[e.origin]}))})},[m,S]);const H=t.useCallback(e=>!F.current||!(e!=null&&e.consent)?Promise.resolve():S(e,{approve:!0}),[S]);t.useEffect(()=>{const e=G.current;Object.values(m).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],A(n.origin)},_e))}),Object.keys(e).forEach(n=>{(!m[n]||m[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[m,A]),t.useEffect(()=>()=>{$.current&&$.current(),Object.values(G.current).forEach(clearTimeout),Object.values(o.current).forEach(clearTimeout)},[]);const B=t.useCallback(e=>{$.current&&($.current(),$.current=null);const n=u||ce;$.current=n(e,{onBlocked:()=>{g(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){J&&g(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}E(e.origin)}})},[u,E]),w={pending:Object.values(m).filter(e=>e.status==="interactive"),authorize:B,approve:H,complete:j,dismiss:P,originEpochs:Z,credentials:O,unsupported:q},D=Object.values(m).filter(e=>e.status==="silent"&&e.silentUrl);return U.default.createElement(Y.Provider,{value:w},r,D.map(e=>U.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};le.propTypes={children:C.default.node,launcher:C.default.func,broker:C.default.func};const we=()=>t.useContext(Y),ae=r=>{const{originEpochs:u}=t.useContext(Y),c=X(r);return c&&u[c]||0},de=r=>{const{credentials:u}=t.useContext(Y),c=X(r);return c&&u[c]||null},fe=r=>{const{unsupported:u}=t.useContext(Y),c=X(r);return c&&u[c]||null},pe=({children:r,authorizationLauncher:u,credentialBroker:c})=>{const[f,m]=t.useState({}),[g,Z]=t.useState({}),_=t.useRef({}),O=t.useRef({}),y=t.useRef({}),q=t.useCallback((i,a)=>{var o;return!!((o=y.current[i])!=null&&o.has(a))},[]),x=t.useCallback((i,a,o)=>{m(d=>({...d,[i]:{origin:a,frameRef:o}}))},[]),N=t.useCallback(i=>{m(a=>{const o={...a};return delete o[i],o}),Z(a=>{const o={...a};return delete o[i],o}),delete y.current[i]},[]);t.useEffect(()=>{const i=(o=[],d,p)=>{o.forEach(E=>E(d,p))},a=o=>{var j,z,M,S,v,H,B;if(!((j=o==null?void 0:o.data)!=null&&j.instanceId))return;const{instanceId:d,type:p}=o.data,E=f[d],A=(M=(z=E==null?void 0:E.frameRef)==null?void 0:z.current)==null?void 0:M.contentWindow;if(!A||o.source!==A||o.origin!==E.origin)return;const P={origin:o.origin},T=_.current;if(p==="response"){const{callbackId:w,response:D,error:e}=o.data,n=O.current[w];n&&(n(D,e),delete O.current[w]);return}if(p==="mark-registered"){const{requestType:w}=o.data;y.current[d]||(y.current[d]=new Set),y.current[d].add(w);return}p==="ready"&&Z(w=>({...w,[d]:!0})),i((S=T[d])==null?void 0:S[p],o.data,P),i((v=T["*"])==null?void 0:v[p],o.data,P),i((H=T[d])==null?void 0:H["*"],o.data,P),i((B=T["*"])==null?void 0:B["*"],o.data,P)};return window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}},[f]);const k=t.useCallback((i,a,o)=>{var p,E;const d=f[i];if(!d){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(E=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&E.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:a,...o,instanceId:i},d.origin)},[f]),$=t.useRef(0),G=t.useCallback(()=>`${Date.now()}-${++$.current}`,[]),L=t.useCallback(async(i,a,o={})=>new Promise((d,p)=>{const E=G(),A=(P,T)=>{delete O.current[E],T?p(T):d(P)};O.current[E]=A,k(i,"request",{callbackId:E,requestType:a,data:o})}),[k]),W=t.useCallback((i,a)=>{k(i,"load-options",a)},[k]),F=t.useCallback((i,a)=>{k(i,"validate",a)},[k]),I=t.useMemo(()=>({registerFrame:x,unregisterFrame:N,sendMessage:k,sendRequest:L,loadOptions:W,validate:F,hasHandler:q,readyFrames:g,addListener:(i,a,o)=>(_.current[i]||(_.current[i]={}),_.current[i][a]||(_.current[i][a]=[]),_.current[i][a].push(o),()=>{_.current[i][a]=_.current[i][a].filter(d=>d!==o)})}),[x,N,k,L,W,F,q,g]);return U.default.createElement(V.Provider,{value:I},U.default.createElement(le,{launcher:u,broker:c},r))},K=(r,u,c)=>{const f=t.useContext(V);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=t.useRef(c);t.useEffect(()=>{m.current=c},[c]),t.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const g=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:g}),f.addListener(r,`key-pressed:${g}`,(..._)=>m.current(..._))}return f.addListener(r,u,(...g)=>m.current(...g))}},[f,r,u])};pe.propTypes={children:C.default.node.isRequired,authorizationLauncher:C.default.func,credentialBroker:C.default.func};const ne=se.default.default||se.default,Ie=1e4,Me="credentials",Se=(r,u)=>`${r}/mm-embedded-interop?id=${encodeURIComponent(u)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Me}`,Ue=ne.iframe`
1
+ (function(h,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],t):(h=typeof globalThis!="undefined"?globalThis:h||self,t(h["mm-react-embeddable"]={},h.React,h.PropTypes,h.styled))})(this,(function(h,t,Ce,Te){"use strict";const te=n=>n&&n.__esModule?n:{default:n},A=te(t),E=te(Ce),oe=te(Te),R=t.createContext(null),Q=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ue="access_token",re=n=>n?n.kind?n:n.accessToken?{kind:ue,accessToken:n.accessToken,expiresAt:n.expiresAt||null}:null:null,we=60,_e=120,Ie=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),X=typeof window!="undefined"&&window.location.protocol==="https:",Me=8e3,V=n=>{try{return new URL(n).origin}catch{return null}},ie=(n,o)=>{const c=o==null?void 0:o.origin;return!c||V(n==null?void 0:n.authUrl)!==c?null:c},ce=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(".")},ne=(n,o)=>{try{const c=new URL(n),f=new URL(o);return c.protocol!==f.protocol?!0:ce(c.hostname)!==ce(f.hostname)}catch{return!0}},le=(n,{onBlocked:o,onClosed:c})=>{const f=window.open(n.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return o(),()=>{};const p=setInterval(()=>{f.closed&&(clearInterval(p),c())},1e3);return()=>clearInterval(p)},de=({children:n,launcher:o,broker:c})=>{const f=t.useContext(R),[p,m]=t.useState({}),[F,j]=t.useState({}),[D,W]=t.useState({}),[T,y]=t.useState({}),O=t.useRef(D);O.current=D;const I=t.useRef(p);I.current=p;const z=t.useRef(null),N=t.useRef({}),g=t.useRef({}),Y=t.useRef({}),v=t.useRef(c);v.current=c;const M=t.useCallback(e=>{const r=g.current[e];if(!r)return;const s=i=>!i[e]||i[e].clientId?i:{...i,[e]:{...i[e],clientId:r}};m(s),y(s)},[]),S=t.useCallback((e,r)=>{e&&(y(s=>s[e]?s:{...s,[e]:{origin:e,reason:r,clientId:g.current[e]||null}}),M(e))},[M]),$=t.useCallback((e,{v2:r=!1,origin:s=null}={})=>{s&&(r&&O.current[s]||(m(i=>i[s]?i:{...i,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:r&&v.current?"broker":r&&e.silentUrl&&X?"silent":"interactive",v2:r,scope:e.scope||null,acceptsCredentials:Y.current[s]||null,consent:null,error:null,clientId:e.clientId||g.current[s]||null,popupBlocked:!1}}),M(s)))},[M]),U=t.useRef({}),d=t.useCallback(e=>{U.current[e]&&(clearTimeout(U.current[e]),delete U.current[e])},[]),l=t.useCallback(e=>{d(e),m(r=>{if(!r[e])return r;const s={...r};return delete s[e],s})},[d]),u=t.useCallback(e=>{e&&(l(e),j(r=>({...r,[e]:(r[e]||0)+1})))},[l]),a=t.useCallback(e=>{m(r=>!r[e]||r[e].status==="interactive"?r:{...r,[e]:{...r[e],status:"interactive"}})},[]),C=t.useCallback(e=>{l(e.origin)},[l]),b=t.useCallback((e,r)=>{const s=ie(e,r);if(s){if(ne(s,window.location.origin)){S(s,"cross-site-legacy");return}$(e,{origin:s})}},[$,S]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(r,s)=>{s!=null&&s.origin&&(r!=null&&r.clientId)&&(g.current[s.origin]=r.clientId,M(s.origin)),s!=null&&s.origin&&Array.isArray(r==null?void 0:r.acceptsCredentials)?Y.current[s.origin]=r.acceptsCredentials:s!=null&&s.origin&&ne(s.origin,window.location.origin)&&S(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",b),f.addListener("*","login",b),f.addListener("*","credential-request",(r,s)=>$(r,{v2:!0,origin:ie(r,s)}))];return()=>e.forEach(r=>r())},[f,b,$,M,S]),t.useEffect(()=>{const e=r=>{const s=r==null?void 0:r.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const i=V(s.authUrl);if(!(!i||r.origin!==i)){if(s.type==="authorized"){if(s.accessToken){if(!I.current[i])return;W(_=>({..._,[i]:re({accessToken:s.accessToken})})),l(i)}else u(i);return}a(i)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[l,u,a]);const x=t.useCallback((e,r)=>{const s=e==null?void 0:e.origin,i=re(r);!s||!i||(W(_=>({..._,[s]:i})),l(s))},[l]),k=t.useCallback((e,r)=>{m(s=>s[e]?{...s,[e]:{...s[e],...r}}:s)},[]),w=t.useRef({}),L=t.useCallback(async(e,{approve:r}={})=>{const s=v.current,{origin:i}=e;let _;try{_=await s({origin:i,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:r})}catch{r?k(i,{error:{reason:"broker_unavailable"}}):k(i,{status:e.silentUrl&&X?"silent":"interactive"});return}const ke=_==null?void 0:_.status,Z=(_==null?void 0:_.body)||{};if(ke===200&&Z.credential){x(e,Z.credential);return}if(ke===409&&Z.consentRequired){k(i,{status:"interactive",consent:{client:Z.client||null,stepUp:!!Z.stepUp,scope:Z.scope||e.scope},error:null});return}const J=Z.error||"broker_error";if(!r&&Ie.has(J)){k(i,{status:e.silentUrl&&X?"silent":"interactive"});return}if(r&&J==="consent_denied"){k(i,{error:null});return}if(J==="rate_limited"&&!e.rateLimitRetried){const ee=Math.min(Number(Z.retryAfter)>0?Number(Z.retryAfter):we,_e),xe={...e,rateLimitRetried:!0};d(i),U.current[i]=setTimeout(()=>{delete U.current[i],w.current[i]=!0,B.current(xe,{approve:r}).finally(()=>{delete w.current[i]})},ee*1e3),k(i,{rateLimitRetried:!0});return}l(i),y(ee=>({...ee,[i]:{origin:i,reason:`broker:${J}`,detail:_||null,clientId:e.clientId||g.current[i]||null}}))},[x,k,l,d]),B=t.useRef(L);B.current=L,t.useEffect(()=>{Object.values(p).forEach(e=>{e.status!=="broker"||w.current[e.origin]||U.current[e.origin]||(w.current[e.origin]=!0,L(e).finally(()=>{delete w.current[e.origin]}))})},[p,L]);const G=t.useCallback(e=>!v.current||!(e!=null&&e.consent)?Promise.resolve():L(e,{approve:!0}),[L]);t.useEffect(()=>{const e=N.current;Object.values(p).forEach(r=>{r.status==="silent"&&!e[r.origin]&&(e[r.origin]=setTimeout(()=>{delete e[r.origin],a(r.origin)},Me))}),Object.keys(e).forEach(r=>{(!p[r]||p[r].status!=="silent")&&(clearTimeout(e[r]),delete e[r])})},[p,a]),t.useEffect(()=>()=>{z.current&&z.current(),Object.values(N.current).forEach(clearTimeout),Object.values(U.current).forEach(clearTimeout)},[]);const H=t.useCallback(e=>{z.current&&(z.current(),z.current=null);const r=o||le;z.current=r(e,{onBlocked:()=>{m(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){X&&m(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}u(e.origin)}})},[o,u]),P={pending:Object.values(p).filter(e=>e.status==="interactive"),authorize:H,approve:G,complete:x,dismiss:C,originEpochs:F,credentials:D,unsupported:T},q=Object.values(p).filter(e=>e.status==="silent"&&e.silentUrl);return A.default.createElement(Q.Provider,{value:P},n,q.map(e=>A.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};de.propTypes={children:E.default.node,launcher:E.default.func,broker:E.default.func};const Se=()=>t.useContext(Q),ae=n=>{const{originEpochs:o}=t.useContext(Q),c=V(n);return c&&o[c]||0},fe=n=>{const{credentials:o}=t.useContext(Q),c=V(n);return c&&o[c]||null},pe=n=>{const{unsupported:o}=t.useContext(Q),c=V(n);return c&&o[c]||null},be="MMEmbeddableZoneProvider requires a boolean `ready` prop (true once the host holds the bearer its credentialBroker needs). Embedded apps will not load until it is provided.",he=({children:n,authorizationLauncher:o,credentialBroker:c,ready:f})=>{const p=f===!0,m=t.useRef(!1);t.useEffect(()=>{f!==void 0||m.current||(m.current=!0,console.error(be),typeof window!="undefined"&&typeof window.alert=="function"&&window.alert(be))},[f]);const[F,j]=t.useState({}),[D,W]=t.useState({}),T=t.useRef({}),y=t.useRef({}),O=t.useRef({}),I=t.useCallback((d,l)=>{var u;return!!((u=O.current[d])!=null&&u.has(l))},[]),z=t.useCallback((d,l,u)=>{j(a=>({...a,[d]:{origin:l,frameRef:u}}))},[]),N=t.useCallback(d=>{j(l=>{const u={...l};return delete u[d],u}),W(l=>{const u={...l};return delete u[d],u}),delete O.current[d]},[]);t.useEffect(()=>{const d=(u=[],a,C)=>{u.forEach(b=>b(a,C))},l=u=>{var L,B,G,H,P,q,e;if(!((L=u==null?void 0:u.data)!=null&&L.instanceId))return;const{instanceId:a,type:C}=u.data,b=F[a],x=(G=(B=b==null?void 0:b.frameRef)==null?void 0:B.current)==null?void 0:G.contentWindow;if(!x||u.source!==x||u.origin!==b.origin)return;const k={origin:u.origin},w=T.current;if(C==="response"){const{callbackId:r,response:s,error:i}=u.data,_=y.current[r];_&&(_(s,i),delete y.current[r]);return}if(C==="mark-registered"){const{requestType:r}=u.data;O.current[a]||(O.current[a]=new Set),O.current[a].add(r);return}C==="ready"&&W(r=>({...r,[a]:!0})),d((H=w[a])==null?void 0:H[C],u.data,k),d((P=w["*"])==null?void 0:P[C],u.data,k),d((q=w[a])==null?void 0:q["*"],u.data,k),d((e=w["*"])==null?void 0:e["*"],u.data,k)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[F]);const g=t.useCallback((d,l,u)=>{var C,b;const a=F[d];if(!a){console.warn(`Origin not set for id: ${d}. Unable to send message.`);return}(b=(C=a==null?void 0:a.frameRef)==null?void 0:C.current)!=null&&b.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...u,instanceId:d},a.origin)},[F]),Y=t.useRef(0),v=t.useCallback(()=>`${Date.now()}-${++Y.current}`,[]),M=t.useCallback(async(d,l,u={})=>new Promise((a,C)=>{const b=v(),x=(k,w)=>{delete y.current[b],w?C(w):a(k)};y.current[b]=x,g(d,"request",{callbackId:b,requestType:l,data:u})}),[g]),S=t.useCallback((d,l)=>{g(d,"load-options",l)},[g]),$=t.useCallback((d,l)=>{g(d,"validate",l)},[g]),U=t.useMemo(()=>({registerFrame:z,unregisterFrame:N,sendMessage:g,sendRequest:M,loadOptions:S,validate:$,hasHandler:I,readyFrames:D,ready:p,addListener:(d,l,u)=>(T.current[d]||(T.current[d]={}),T.current[d][l]||(T.current[d][l]=[]),T.current[d][l].push(u),()=>{T.current[d][l]=T.current[d][l].filter(a=>a!==u)})}),[z,N,g,M,S,$,I,D,p]);return A.default.createElement(R.Provider,{value:U},A.default.createElement(de,{launcher:o,broker:c},n))},K=(n,o,c)=>{const f=t.useContext(R);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const p=t.useRef(c);t.useEffect(()=>{p.current=c},[c]),t.useEffect(()=>{if(!(!n||!o)){if(o.startsWith("key:")){const m=o.substring(4);return f.readyFrames[n]&&f.sendMessage(n,"subscribe-key",{keyChord:m}),f.addListener(n,`key-pressed:${m}`,(...j)=>p.current(...j))}return f.addListener(n,o,(...m)=>p.current(...m))}},[f,n,o])};he.propTypes={children:E.default.node.isRequired,ready:E.default.bool.isRequired,authorizationLauncher:E.default.func,credentialBroker:E.default.func};const se=oe.default.default||oe.default,Ue=1e4,Le="credentials",Ae=(n,o)=>`${n}/mm-embedded-interop?id=${encodeURIComponent(o)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Le}`,ye=se.iframe`
2
2
  width: 100%;
3
3
  height: 100%;
4
4
  border: none;
5
- visibility: ${r=>r.$isReady?"visible":"hidden"};
6
- `,Le=ne.div`
5
+ visibility: ${n=>n.$isReady?"visible":"hidden"};
6
+ `,ze=se.div`
7
7
  width: 100%;
8
8
  height: 100%;
9
9
  display: flex;
@@ -16,10 +16,10 @@
16
16
  text-align: center;
17
17
  color: #555;
18
18
  font-size: 14px;
19
- `,be=r=>{const u=r&&r.origin||"This app",c=r&&r.reason||"";switch(c){case"broker:scope_above_ceiling":return{title:`${u} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${u} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${u} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return c.startsWith("broker:")?{title:`${u} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${u} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},me=({entry:r})=>{const u=be(r);return U.default.createElement(Le,{"data-reason":r&&r.reason||void 0},U.default.createElement("div",{style:{fontWeight:600}},u.title),U.default.createElement("div",{style:{fontSize:12,color:"#888"}},u.detail))};me.propTypes={entry:C.default.shape({origin:C.default.string,name:C.default.string,reason:C.default.string,detail:C.default.object})};const Ae=ne.div`
19
+ `,me=n=>{const o=n&&n.origin||"This app",c=n&&n.reason||"";switch(c){case"broker:scope_above_ceiling":return{title:`${o} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${o} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${o} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return c.startsWith("broker:")?{title:`${o} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${o} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},Ee=({entry:n})=>{const o=me(n);return A.default.createElement(ze,{"data-reason":n&&n.reason||void 0},A.default.createElement("div",{style:{fontWeight:600}},o.title),A.default.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};Ee.propTypes={entry:E.default.shape({origin:E.default.string,name:E.default.string,reason:E.default.string,detail:E.default.object})};const Oe=se.div`
20
20
  height: 100%;
21
21
  display: flex;
22
22
  flex: 1;
23
23
  align-items: center;
24
24
  justify-content: center;
25
- `,ze=()=>U.default.createElement(Ae,null,U.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),he=({id:r,src:u,path:c,onInit:f=()=>{},onTimeout:m,context:g={},params:Z={},renderUnsupported:_,renderTimeout:O,...y})=>{if("isConfiguring"in y)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in g)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in g)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const q=t.useRef(),[x,N]=t.useState(),[k,$]=t.useState(0),[G,L]=t.useState(!1),[W,F]=t.useState(!1),I=ae(u),i=de(u),a=fe(u),[o,d]=t.useState(0),[p,E]=t.useState(null),{registerFrame:A,unregisterFrame:P,sendMessage:T}=t.useContext(V),[j,z]=t.useState(),M=t.useRef(),S=t.useRef(m),v=t.useRef(f),H=t.useRef(!1),B=t.useCallback(()=>{H.current=!1,clearTimeout(M.current),$(0),L(!1),F(!1),E(null)},[]);t.useEffect(()=>{(I>0||o>0)&&B()},[I,o,B]),t.useEffect(()=>{S.current=m},[m]),t.useEffect(()=>{v.current=f},[f]),t.useEffect(()=>{k&&T(r,"set-context",{context:{...g}})},[g,r,k]),t.useEffect(()=>{k&&T(r,"set-params",{params:Z})},[Z,r,k]),t.useEffect(()=>{c!==void 0&&z((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),t.useEffect(()=>{j===void 0||!k||T(r,"navigate",{path:j})},[j,k,r,T]),t.useEffect(()=>{if(!u||!r||!q)return;B();const e=new URL(u);return A(r,e.origin,q),v.current(),N(Se(e.origin,r)),()=>{P(r)}},[u,r,A,q,B]),t.useEffect(()=>{if(!(!x||H.current))return M.current=setTimeout(()=>{L(!0),S.current&&S.current()},Ie),()=>clearTimeout(M.current)},[x,u,I,o]);const w=t.useCallback(()=>{H.current=!0,clearTimeout(M.current),L(!1)},[]);K(r,"init",e=>{w(),Array.isArray(e==null?void 0:e.acceptsCredentials)&&E(e.acceptsCredentials)}),K(r,"authorize",w),K(r,"login",w),K(r,"credential-request",()=>{w(),F(!0)}),t.useEffect(()=>{if(!W||!i)return;const e=p;if(Array.isArray(e)&&!e.includes(i.kind))return;const n=i.kind==="access_token"?{accessToken:i.accessToken}:{};T(r,"credential",{...n,credential:i})},[W,i,p,r,T]),K(r,"ready",()=>{w(),$(e=>e+1)});const D=t.useRef();return K(r,"heartbeat",()=>{D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{d(e=>e+1)},6e3)}),t.useEffect(()=>()=>{D.current&&clearTimeout(D.current)},[]),a?_?_(a):U.default.createElement(me,{entry:a}):G&&!k?O?O():U.default.createElement(ze,null):U.default.createElement(Ue,{key:`auth-epoch-${I}-frame-${o}`,$isReady:k,ref:q,src:x,...y})};he.propTypes={id:C.default.string,src:C.default.string.isRequired,path:C.default.string,onInit:C.default.func,onTimeout:C.default.func,renderUnsupported:C.default.func,renderTimeout:C.default.func},h.CREDENTIAL_KIND_ACCESS_TOKEN=ue,h.EmbeddedAuthorizationContext=Y,h.MMEmbeddableZone=he,h.MMEmbeddableZoneContext=V,h.MMEmbeddableZoneProvider=pe,h.isCrossSite=re,h.normalizeCredential=te,h.popupAuthorizationLauncher=ce,h.unsupportedCopy=be,h.useEmbeddedAuthorizations=we,h.useEmbeddedCredential=de,h.useEmbeddedEffect=K,h.useEmbeddedOriginEpoch=ae,h.useEmbeddedUnsupported=fe,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
25
+ `,$e=()=>A.default.createElement(Oe,null,A.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ge=({id:n,src:o,path:c,onInit:f=()=>{},onTimeout:p,context:m={},params:F={},renderUnsupported:j,renderTimeout:D,...W})=>{if("isConfiguring"in W)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in m)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in m)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const T=t.useRef(),[y,O]=t.useState(),[I,z]=t.useState(0),[N,g]=t.useState(!1),[Y,v]=t.useState(!1),M=ae(o),S=fe(o),$=pe(o),[U,d]=t.useState(0),[l,u]=t.useState(null),{registerFrame:a,unregisterFrame:C,sendMessage:b,ready:x}=t.useContext(R),[k,w]=t.useState(),L=t.useRef(),B=t.useRef(p),G=t.useRef(f),H=t.useRef(!1),P=t.useCallback(()=>{H.current=!1,clearTimeout(L.current),z(0),g(!1),v(!1),u(null)},[]);t.useEffect(()=>{(M>0||U>0)&&P()},[M,U,P]),t.useEffect(()=>{B.current=p},[p]),t.useEffect(()=>{G.current=f},[f]),t.useEffect(()=>{I&&b(n,"set-context",{context:{...m}})},[m,n,I]),t.useEffect(()=>{I&&b(n,"set-params",{params:F})},[F,n,I]),t.useEffect(()=>{c!==void 0&&w((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),t.useEffect(()=>{k===void 0||!I||b(n,"navigate",{path:k})},[k,I,n,b]),t.useEffect(()=>{if(!o||!n||!T)return;if(!x){P(),O(void 0);return}P();const r=new URL(o);return a(n,r.origin,T),G.current(),O(Ae(r.origin,n)),()=>{C(n)}},[o,n,x,a,T,P]),t.useEffect(()=>{if(!(!y||H.current))return L.current=setTimeout(()=>{g(!0),B.current&&B.current()},Ue),()=>clearTimeout(L.current)},[y,o,M,U]);const q=t.useCallback(()=>{H.current=!0,clearTimeout(L.current),g(!1)},[]);K(n,"init",r=>{q(),Array.isArray(r==null?void 0:r.acceptsCredentials)&&u(r.acceptsCredentials)}),K(n,"authorize",q),K(n,"login",q),K(n,"credential-request",()=>{q(),v(!0)}),t.useEffect(()=>{if(!Y||!S)return;const r=l;if(Array.isArray(r)&&!r.includes(S.kind))return;const s=S.kind==="access_token"?{accessToken:S.accessToken}:{};b(n,"credential",{...s,credential:S})},[Y,S,l,n,b]),K(n,"ready",()=>{q(),z(r=>r+1)});const e=t.useRef();return K(n,"heartbeat",()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{d(r=>r+1)},6e3)}),t.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]),$?j?j($):A.default.createElement(Ee,{entry:$}):N&&!I?D?D():A.default.createElement($e,null):A.default.createElement(ye,{key:`auth-epoch-${M}-frame-${U}`,$isReady:I,ref:T,src:y,...W})};ge.propTypes={id:E.default.string,src:E.default.string.isRequired,path:E.default.string,onInit:E.default.func,onTimeout:E.default.func,renderUnsupported:E.default.func,renderTimeout:E.default.func},h.CREDENTIAL_KIND_ACCESS_TOKEN=ue,h.EmbeddedAuthorizationContext=Q,h.MMEmbeddableZone=ge,h.MMEmbeddableZoneContext=R,h.MMEmbeddableZoneProvider=he,h.isCrossSite=ne,h.normalizeCredential=re,h.popupAuthorizationLauncher=le,h.unsupportedCopy=me,h.useEmbeddedAuthorizations=Se,h.useEmbeddedCredential=fe,h.useEmbeddedEffect=K,h.useEmbeddedOriginEpoch=ae,h.useEmbeddedUnsupported=pe,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@machinemetrics/mm-react-embeddable",
3
- "version": "2.0.0-5",
3
+ "version": "2.0.0-7",
4
4
  "license": "MIT",
5
5
  "module": "dist/mm-react-embeddable.es.js",
6
6
  "main": "dist/mm-react-embeddable.cjs.js",