@machinemetrics/mm-react-embeddable 2.0.0 → 2.0.1-1
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,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`
|
|
1
|
+
(function(g,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):(g=typeof globalThis!="undefined"?globalThis:g||self,e(g["mm-react-embeddable"]={},g.React,g.PropTypes,g.styled))})(this,(function(g,e,me,Ee){"use strict";const R=t=>t&&t.__esModule?t:{default:t},O=R(e),C=R(me),te=R(Ee),J=e.createContext(null),G=e.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ne="access_token",V=t=>t?t.kind?t:t.accessToken?{kind:ne,accessToken:t.accessToken,expiresAt:t.expiresAt||null}:null:null,ge=60,ke=120,Ce=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),Q=t=>{try{return new URL(t).origin}catch{return null}},se=(t,o)=>{const c=o==null?void 0:o.origin;return!c||Q(t==null?void 0:t.authUrl)!==c?null:c},oe=t=>{if(!t||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(t)||t.includes(":"))return t;const o=t.split(".");return o.length<=2?t:o.slice(-2).join(".")},ee=(t,o)=>{try{const c=new URL(t),a=new URL(o);return c.protocol!==a.protocol?!0:oe(c.hostname)!==oe(a.hostname)}catch{return!0}},ue=(t,{onBlocked:o,onClosed:c})=>{const a=window.open(t.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!a)return o(),()=>{};const w=setInterval(()=>{a.closed&&(clearInterval(w),c())},1e3);return()=>clearInterval(w)},ie=({children:t,launcher:o,broker:c})=>{const a=e.useContext(J),[w,T]=e.useState({}),[F,B]=e.useState({}),[Z,W]=e.useState({}),[M,k]=e.useState({}),L=e.useRef(Z);L.current=Z;const H=e.useRef(w);H.current=w;const _=e.useRef(null),$=e.useRef({}),A=e.useRef({}),q=e.useRef(c);q.current=c;const x=e.useCallback(r=>{const s=$.current[r];if(!s)return;const n=i=>!i[r]||i[r].clientId?i:{...i,[r]:{...i[r],clientId:s}};T(n),k(n)},[]),v=e.useCallback((r,s)=>{r&&(k(n=>n[r]?n:{...n,[r]:{origin:r,reason:s,clientId:$.current[r]||null}}),x(r))},[x]),U=e.useCallback((r,{v2:s=!1,origin:n=null}={})=>{n&&(s&&L.current[n]||(T(i=>i[n]?i:{...i,[n]:{origin:n,authUrl:r.authUrl,status:s&&q.current?"broker":"interactive",v2:s,scope:r.scope||null,acceptsCredentials:A.current[n]||null,consent:null,error:null,clientId:r.clientId||$.current[n]||null,popupBlocked:!1}}),x(n)))},[x]),I=e.useRef({}),D=e.useCallback(r=>{I.current[r]&&(clearTimeout(I.current[r]),delete I.current[r])},[]),u=e.useCallback(r=>{D(r),T(s=>{if(!s[r])return s;const n={...s};return delete n[r],n})},[D]),d=e.useCallback(r=>{r&&(u(r),B(s=>({...s,[r]:(s[r]||0)+1})))},[u]),l=e.useCallback(r=>{u(r.origin)},[u]),p=e.useCallback((r,s)=>{const n=se(r,s);if(n){if(ee(n,window.location.origin)){v(n,"cross-site-legacy");return}U(r,{origin:n})}},[U,v]);e.useEffect(()=>{if(!a)return;const r=[a.addListener("*","init",(s,n)=>{n!=null&&n.origin&&(s!=null&&s.clientId)&&($.current[n.origin]=s.clientId,x(n.origin)),n!=null&&n.origin&&Array.isArray(s==null?void 0:s.acceptsCredentials)?A.current[n.origin]=s.acceptsCredentials:n!=null&&n.origin&&ee(n.origin,window.location.origin)&&v(n.origin,"cross-site-legacy")}),a.addListener("*","authorize",p),a.addListener("*","login",p),a.addListener("*","credential-request",(s,n)=>U(s,{v2:!0,origin:se(s,n)}))];return()=>r.forEach(s=>s())},[a,p,U,x,v]),e.useEffect(()=>{const r=s=>{const n=s==null?void 0:s.data;if(!n||n.type!=="authorized")return;const i=Q(n.authUrl);if(!i||s.origin!==i)return;const b=H.current[i];if(!(!b||b.status!=="interactive")){if(n.accessToken){W(z=>({...z,[i]:V({accessToken:n.accessToken})})),u(i);return}d(i)}};return window.addEventListener("message",r),()=>window.removeEventListener("message",r)},[u,d]);const h=e.useCallback((r,s)=>{const n=r==null?void 0:r.origin,i=V(s);!n||!i||(W(b=>({...b,[n]:i})),u(n))},[u]),m=e.useCallback((r,s)=>{T(n=>n[r]?{...n,[r]:{...n[r],...s}}:n)},[]),E=e.useRef({}),y=e.useCallback(async(r,{approve:s}={})=>{const n=q.current,{origin:i}=r;let b;try{b=await n({origin:i,clientId:r.clientId,scope:r.scope,authUrl:r.authUrl},{approve:s})}catch{s?m(i,{error:{reason:"broker_unavailable"}}):m(i,{status:"interactive"});return}const z=b==null?void 0:b.status,f=(b==null?void 0:b.body)||{};if(z===200&&f.credential){h(r,f.credential);return}if(z===409&&f.consentRequired){m(i,{status:"interactive",consent:{client:f.client||null,stepUp:!!f.stepUp,scope:f.scope||r.scope},error:null});return}const P=f.error||"broker_error";if(!s&&Ce.has(P)){m(i,{status:"interactive"});return}if(s&&P==="consent_denied"){m(i,{error:null});return}if(P==="rate_limited"&&!r.rateLimitRetried){const N=Math.min(Number(f.retryAfter)>0?Number(f.retryAfter):ge,ke),Le={...r,rateLimitRetried:!0};D(i),I.current[i]=setTimeout(()=>{delete I.current[i],E.current[i]=!0,S.current(Le,{approve:s}).finally(()=>{delete E.current[i]})},N*1e3),m(i,{rateLimitRetried:!0});return}u(i),k(N=>({...N,[i]:{origin:i,reason:`broker:${P}`,detail:{status:z!=null?z:null,reason:P},clientId:r.clientId||$.current[i]||null}}))},[h,m,u,D]),S=e.useRef(y);S.current=y,e.useEffect(()=>{Object.values(w).forEach(r=>{r.status!=="broker"||E.current[r.origin]||I.current[r.origin]||(E.current[r.origin]=!0,y(r).finally(()=>{delete E.current[r.origin]}))})},[w,y]);const X=e.useCallback(r=>!q.current||!(r!=null&&r.consent)||E.current[r.origin]?Promise.resolve():(E.current[r.origin]=!0,y(r,{approve:!0}).finally(()=>{delete E.current[r.origin]})),[y]);e.useEffect(()=>()=>{_.current&&_.current(),Object.values(I.current).forEach(clearTimeout)},[]);const j=e.useCallback(r=>{_.current&&(_.current(),_.current=null);const s=o||ue;_.current=s(r,{onBlocked:()=>{T(n=>n[r.origin]?{...n,[r.origin]:{...n[r.origin],popupBlocked:!0}}:n)},onClosed:()=>d(r.origin)})},[o,d]),K={pending:Object.values(w).filter(r=>r.status==="interactive"),authorize:j,approve:X,complete:h,dismiss:l,originEpochs:F,credentials:Z,unsupported:M};return O.default.createElement(G.Provider,{value:K},t)};ie.propTypes={children:C.default.node,launcher:C.default.func,broker:C.default.func};const we=()=>e.useContext(G),ce=t=>{const{originEpochs:o}=e.useContext(G),c=Q(t);return c&&o[c]||0},le=t=>{const{credentials:o}=e.useContext(G),c=Q(t);return c&&o[c]||null},de=t=>{const{unsupported:o}=e.useContext(G),c=Q(t);return c&&o[c]||null},ae="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.",fe=({children:t,authorizationLauncher:o,credentialBroker:c,ready:a})=>{const w=a===!0,T=e.useRef(!1);e.useEffect(()=>{a!==void 0||T.current||(T.current=!0,console.error(ae),typeof window!="undefined"&&typeof window.alert=="function"&&window.alert(ae))},[a]);const[F,B]=e.useState({}),[Z,W]=e.useState({}),M=e.useRef({}),k=e.useRef({}),L=e.useRef({}),H=e.useCallback((u,d)=>{var l;return!!((l=L.current[u])!=null&&l.has(d))},[]),_=e.useCallback((u,d,l)=>{B(p=>({...p,[u]:{origin:d,frameRef:l}}))},[]),$=e.useCallback(u=>{B(d=>{const l={...d};return delete l[u],l}),W(d=>{const l={...d};return delete l[u],l}),delete L.current[u],Object.keys(k.current).forEach(d=>{k.current[d].instanceId===u&&delete k.current[d]})},[]);e.useEffect(()=>()=>{k.current={}},[]),e.useEffect(()=>{const u=(l=[],p,h)=>{l.forEach(m=>m(p,h))},d=l=>{var X,j,K,r,s,n,i;if(!((X=l==null?void 0:l.data)!=null&&X.instanceId))return;const{instanceId:p,type:h}=l.data,m=F[p],E=(K=(j=m==null?void 0:m.frameRef)==null?void 0:j.current)==null?void 0:K.contentWindow;if(!E||l.source!==E||l.origin!==m.origin)return;const y={origin:l.origin},S=M.current;if(h==="response"){const{callbackId:b,response:z,error:f}=l.data,P=k.current[b];P&&P.instanceId===p&&(P.callback(z,f),delete k.current[b]);return}if(h==="mark-registered"){const{requestType:b}=l.data;L.current[p]||(L.current[p]=new Set),L.current[p].add(b);return}h==="ready"&&W(b=>({...b,[p]:!0})),u((r=S[p])==null?void 0:r[h],l.data,y),u((s=S["*"])==null?void 0:s[h],l.data,y),u((n=S[p])==null?void 0:n["*"],l.data,y),u((i=S["*"])==null?void 0:i["*"],l.data,y)};return window.addEventListener("message",d),()=>{window.removeEventListener("message",d)}},[F]);const A=e.useCallback((u,d,l,p)=>{var m,E;const h=F[u];if(!h){console.warn(`Origin not set for id: ${u}. Unable to send message.`);return}(E=(m=h==null?void 0:h.frameRef)==null?void 0:m.current)!=null&&E.contentWindow&&h.frameRef.current.contentWindow.postMessage({type:d,...l,instanceId:u},p||h.origin)},[F]),q=e.useRef(0),x=e.useCallback(()=>`${Date.now()}-${++q.current}`,[]),v=e.useCallback(async(u,d,l={})=>new Promise((p,h)=>{const m=x(),E=(y,S)=>{delete k.current[m],S?h(S):p(y)};k.current[m]={instanceId:u,callback:E},A(u,"request",{callbackId:m,requestType:d,data:l})}),[A]),U=e.useCallback((u,d)=>{A(u,"load-options",d)},[A]),I=e.useCallback((u,d)=>{A(u,"validate",d)},[A]),D=e.useMemo(()=>({registerFrame:_,unregisterFrame:$,sendMessage:A,sendRequest:v,loadOptions:U,validate:I,hasHandler:H,readyFrames:Z,ready:w,addListener:(u,d,l)=>(M.current[u]||(M.current[u]={}),M.current[u][d]||(M.current[u][d]=[]),M.current[u][d].push(l),()=>{M.current[u][d]=M.current[u][d].filter(p=>p!==l)})}),[_,$,A,v,U,I,H,Z,w]);return O.default.createElement(J.Provider,{value:D},O.default.createElement(ie,{launcher:o,broker:c},t))},Y=(t,o,c)=>{const a=e.useContext(J);if(a===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const w=e.useRef(c);e.useEffect(()=>{w.current=c},[c]),e.useEffect(()=>{if(!(!t||!o)){if(o.startsWith("key:")){const T=o.substring(4);return a.readyFrames[t]&&a.sendMessage(t,"subscribe-key",{keyChord:T}),a.addListener(t,`key-pressed:${T}`,(...B)=>w.current(...B))}return a.addListener(t,o,(...T)=>w.current(...T))}},[a,t,o])};fe.propTypes={children:C.default.node.isRequired,ready:C.default.bool.isRequired,authorizationLauncher:C.default.func,credentialBroker:C.default.func};const re=te.default.default||te.default,Te=1e4,_e="credentials",Ie=(t,o)=>`${t}/mm-embedded-interop?id=${encodeURIComponent(o)}&origin=${encodeURIComponent(window.location.origin)}&caps=${_e}`,ye=re.iframe`
|
|
2
2
|
width: 100%;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border: none;
|
|
5
|
-
visibility: ${
|
|
6
|
-
`,
|
|
5
|
+
visibility: ${t=>t.$isReady?"visible":"hidden"};
|
|
6
|
+
`,Me=re.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
|
-
`,
|
|
19
|
+
`,pe=t=>{const o=t&&t.origin||"This app",c=t&&t.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."}}},be=({entry:t})=>{const o=pe(t);return O.default.createElement(Me,{"data-reason":t&&t.reason||void 0},O.default.createElement("div",{style:{fontWeight:600}},o.title),O.default.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};be.propTypes={entry:C.default.shape({origin:C.default.string,name:C.default.string,reason:C.default.string,detail:C.default.object})};const Se=re.div`
|
|
20
20
|
height: 100%;
|
|
21
21
|
display: flex;
|
|
22
22
|
flex: 1;
|
|
23
23
|
align-items: center;
|
|
24
24
|
justify-content: center;
|
|
25
|
-
|
|
25
|
+
`,Ae=()=>O.default.createElement(Se,null,O.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),he=({id:t,src:o,path:c,onInit:a=()=>{},onTimeout:w,context:T={},params:F={},renderUnsupported:B,renderTimeout:Z,...W})=>{if("isConfiguring"in W)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in T)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in T)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const M=e.useRef(),k=Q(o),[L,H]=e.useState(),[_,$]=e.useState(0),[A,q]=e.useState(!1),[x,v]=e.useState(!1),U=ce(o),I=le(o),D=de(o),[u,d]=e.useState(0),[l,p]=e.useState(null),{registerFrame:h,unregisterFrame:m,sendMessage:E,ready:y}=e.useContext(J),[S,X]=e.useState(),j=e.useRef(),K=e.useRef(w),r=e.useRef(a),s=e.useRef(!1),n=e.useRef(),i=e.useCallback(()=>{s.current=!1,clearTimeout(j.current),clearTimeout(n.current),$(0),q(!1),v(!1),p(null)},[]);e.useEffect(()=>{(U>0||u>0)&&i()},[U,u,i]),e.useEffect(()=>{K.current=w},[w]),e.useEffect(()=>{r.current=a},[a]),e.useEffect(()=>{_&&E(t,"set-context",{context:{...T}},k)},[T,t,_,k]),e.useEffect(()=>{_&&E(t,"set-params",{params:F},k)},[F,t,_,k]),e.useEffect(()=>{c!==void 0&&X((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),e.useEffect(()=>{S===void 0||!_||E(t,"navigate",{path:S},k)},[S,_,t,E,k]),e.useEffect(()=>{if(!o||!t||!M)return;if(!y){i(),H(void 0);return}i();const f=new URL(o);return h(t,f.origin,M),r.current(),H(Ie(f.origin,t)),()=>{m(t)}},[o,t,y,h,M,i]),e.useEffect(()=>{if(!(!L||s.current))return j.current=setTimeout(()=>{q(!0),K.current&&K.current()},Te),()=>clearTimeout(j.current)},[L,o,U,u]);const b=e.useCallback(()=>{s.current=!0,clearTimeout(j.current),q(!1)},[]);if(Y(t,"init",f=>{b(),Array.isArray(f==null?void 0:f.acceptsCredentials)&&p(f.acceptsCredentials)}),Y(t,"authorize",b),Y(t,"login",b),Y(t,"credential-request",()=>{b(),v(!0)}),e.useEffect(()=>{if(!x||!I)return;const f=l;if(Array.isArray(f)&&!f.includes(I.kind))return;const P=I.kind==="access_token"?{accessToken:I.accessToken}:{};E(t,"credential",{...P,credential:I},k)},[x,I,l,t,E,k]),Y(t,"ready",()=>{b(),$(f=>f+1)}),Y(t,"heartbeat",()=>{n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{d(f=>f+1)},6e3)}),e.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),D)return B?B(D):O.default.createElement(be,{entry:D});if(A&&!_)return Z?Z():O.default.createElement(Ae,null);const z={...W};return delete z.skipManifestCheck,O.default.createElement(ye,{key:`auth-epoch-${U}-frame-${u}`,$isReady:_,ref:M,src:L,...z})};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},g.CREDENTIAL_KIND_ACCESS_TOKEN=ne,g.EmbeddedAuthorizationContext=G,g.MMEmbeddableZone=he,g.MMEmbeddableZoneContext=J,g.MMEmbeddableZoneProvider=fe,g.isCrossSite=ee,g.normalizeCredential=V,g.popupAuthorizationLauncher=ue,g.unsupportedCopy=pe,g.useEmbeddedAuthorizations=we,g.useEmbeddedCredential=le,g.useEmbeddedEffect=Y,g.useEmbeddedOriginEpoch=ce,g.useEmbeddedUnsupported=de,Object.defineProperty(g,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.
|
|
3
|
+
"version": "2.0.1-1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"module": "dist/mm-react-embeddable.es.js",
|
|
6
6
|
"main": "dist/mm-react-embeddable.cjs.js",
|
|
@@ -44,4 +44,4 @@
|
|
|
44
44
|
"vite": "^7.2.2",
|
|
45
45
|
"vitest": "^4.0.10"
|
|
46
46
|
}
|
|
47
|
-
}
|
|
47
|
+
}
|