@machinemetrics/mm-react-embeddable 2.0.0-6 → 2.0.0
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.
- package/README.md +10 -0
- package/dist/mm-react-embeddable.cjs.js +4 -4
- package/dist/mm-react-embeddable.es.js +365 -352
- package/dist/mm-react-embeddable.umd.js +4 -4
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(m,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):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m["mm-react-embeddable"]={},m.React,m.PropTypes,m.styled))})(this,(function(m,t,ke,Ce){"use strict";const te=r=>r&&r.__esModule?r:{default:r},S=te(t),k=te(ke),ue=te(Ce),X=t.createContext(null),G=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),oe="access_token",re=r=>r?r.kind?r:r.accessToken?{kind:oe,accessToken:r.accessToken,expiresAt:r.expiresAt||null}:null:null,Te=60,_e=120,we=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),Q=typeof window!="undefined"&&window.location.protocol==="https:",Ie=8e3,J=r=>{try{return new URL(r).origin}catch{return null}},ie=(r,u)=>{const c=u==null?void 0:u.origin;return!c||J(r==null?void 0:r.authUrl)!==c?null:c},ce=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(".")},ne=(r,u)=>{try{const c=new URL(r),f=new URL(u);return c.protocol!==f.protocol?!0:ce(c.hostname)!==ce(f.hostname)}catch{return!0}},le=(r,{onBlocked:u,onClosed:c})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const b=setInterval(()=>{f.closed&&(clearInterval(b),c())},1e3);return()=>clearInterval(b)},ae=({children:r,launcher:u,broker:c})=>{const f=t.useContext(X),[b,E]=t.useState({}),[W,T]=t.useState({}),[O,y]=t.useState({}),[q,x]=t.useState({}),Y=t.useRef(O);Y.current=O;const g=t.useRef(b);g.current=b;const $=t.useRef(null),V=t.useRef({}),U=t.useRef({}),v=t.useRef({}),F=t.useRef(c);F.current=c;const w=t.useCallback(e=>{const n=U.current[e];if(!n)return;const s=l=>!l[e]||l[e].clientId?l:{...l,[e]:{...l[e],clientId:n}};E(s),x(s)},[]),i=t.useCallback((e,n)=>{e&&(x(s=>s[e]?s:{...s,[e]:{origin:e,reason:n,clientId:U.current[e]||null}}),w(e))},[w]),a=t.useCallback((e,{v2:n=!1,origin:s=null}={})=>{s&&(n&&Y.current[s]||(E(l=>l[s]?l:{...l,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&F.current?"broker":n&&e.silentUrl&&Q?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:v.current[s]||null,consent:null,error:null,clientId:e.clientId||U.current[s]||null,popupBlocked:!1}}),w(s)))},[w]),o=t.useRef({}),d=t.useCallback(e=>{o.current[e]&&(clearTimeout(o.current[e]),delete o.current[e])},[]),p=t.useCallback(e=>{d(e),E(n=>{if(!n[e])return n;const s={...n};return delete s[e],s})},[d]),h=t.useCallback(e=>{e&&(p(e),T(n=>({...n,[e]:(n[e]||0)+1})))},[p]),L=t.useCallback(e=>{E(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),P=t.useCallback(e=>{p(e.origin)},[p]),C=t.useCallback((e,n)=>{const s=ie(e,n);if(s){if(ne(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)&&(U.current[s.origin]=n.clientId,w(s.origin)),s!=null&&s.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)?v.current[s.origin]=n.acceptsCredentials:s!=null&&s.origin&&ne(s.origin,window.location.origin)&&i(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",C),f.addListener("*","login",C),f.addListener("*","credential-request",(n,s)=>a(n,{v2:!0,origin:ie(n,s)}))];return()=>e.forEach(n=>n())},[f,C,a,w,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=J(s.authUrl);if(!(!l||n.origin!==l)){if(s.type==="authorized"){if(s.accessToken){if(!g.current[l])return;y(z=>({...z,[l]:re({accessToken:s.accessToken})})),p(l)}else h(l);return}L(l)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[p,h,L]);const j=t.useCallback((e,n)=>{const s=e==null?void 0:e.origin,l=re(n);!s||!l||(y(z=>({...z,[s]:l})),p(s))},[p]),A=t.useCallback((e,n)=>{E(s=>s[e]?{...s,[e]:{...s[e],...n}}:s)},[]),I=t.useRef({}),M=t.useCallback(async(e,{approve:n}={})=>{const s=F.current,{origin:l}=e;let z;try{z=await s({origin:l,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?A(l,{error:{reason:"broker_unavailable"}}):A(l,{status:e.silentUrl&&Q?"silent":"interactive"});return}const ge=z==null?void 0:z.status,Z=(z==null?void 0:z.body)||{};if(ge===200&&Z.credential){j(e,Z.credential);return}if(ge===409&&Z.consentRequired){A(l,{status:"interactive",consent:{client:Z.client||null,stepUp:!!Z.stepUp,scope:Z.scope||e.scope},error:null});return}const R=Z.error||"broker_error";if(!n&&we.has(R)){A(l,{status:e.silentUrl&&Q?"silent":"interactive"});return}if(n&&R==="consent_denied"){A(l,{error:null});return}if(R==="rate_limited"&&!e.rateLimitRetried){const ee=Math.min(Number(Z.retryAfter)>0?Number(Z.retryAfter):Te,_e),$e={...e,rateLimitRetried:!0};d(l),o.current[l]=setTimeout(()=>{delete o.current[l],I.current[l]=!0,H.current($e,{approve:n}).finally(()=>{delete I.current[l]})},ee*1e3),A(l,{rateLimitRetried:!0});return}p(l),x(ee=>({...ee,[l]:{origin:l,reason:`broker:${R}`,detail:z||null,clientId:e.clientId||U.current[l]||null}}))},[j,A,p,d]),H=t.useRef(M);H.current=M,t.useEffect(()=>{Object.values(b).forEach(e=>{e.status!=="broker"||I.current[e.origin]||o.current[e.origin]||(I.current[e.origin]=!0,M(e).finally(()=>{delete I.current[e.origin]}))})},[b,M]);const K=t.useCallback(e=>!F.current||!(e!=null&&e.consent)?Promise.resolve():M(e,{approve:!0}),[M]);t.useEffect(()=>{const e=V.current;Object.values(b).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],L(n.origin)},Ie))}),Object.keys(e).forEach(n=>{(!b[n]||b[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[b,L]),t.useEffect(()=>()=>{$.current&&$.current(),Object.values(V.current).forEach(clearTimeout),Object.values(o.current).forEach(clearTimeout)},[]);const B=t.useCallback(e=>{$.current&&($.current(),$.current=null);const n=u||le;$.current=n(e,{onBlocked:()=>{E(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){Q&&E(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}h(e.origin)}})},[u,h]),_={pending:Object.values(b).filter(e=>e.status==="interactive"),authorize:B,approve:K,complete:j,dismiss:P,originEpochs:W,credentials:O,unsupported:q},D=Object.values(b).filter(e=>e.status==="silent"&&e.silentUrl);return S.default.createElement(G.Provider,{value:_},r,D.map(e=>S.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"}})))};ae.propTypes={children:k.default.node,launcher:k.default.func,broker:k.default.func};const Me=()=>t.useContext(G),de=r=>{const{originEpochs:u}=t.useContext(G),c=J(r);return c&&u[c]||0},fe=r=>{const{credentials:u}=t.useContext(G),c=J(r);return c&&u[c]||null},pe=r=>{const{unsupported:u}=t.useContext(G),c=J(r);return c&&u[c]||null},be=({children:r,authorizationLauncher:u,credentialBroker:c})=>{const[f,b]=t.useState({}),[E,W]=t.useState({}),T=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)=>{b(d=>({...d,[i]:{origin:a,frameRef:o}}))},[]),Y=t.useCallback(i=>{b(a=>{const o={...a};return delete o[i],o}),W(a=>{const o={...a};return delete o[i],o}),delete y.current[i]},[]);t.useEffect(()=>{const i=(o=[],d,p)=>{o.forEach(h=>h(d,p))},a=o=>{var j,A,I,M,H,K,B;if(!((j=o==null?void 0:o.data)!=null&&j.instanceId))return;const{instanceId:d,type:p}=o.data,h=f[d],L=(I=(A=h==null?void 0:h.frameRef)==null?void 0:A.current)==null?void 0:I.contentWindow;if(!L||o.source!==L||o.origin!==h.origin)return;const P={origin:o.origin},C=T.current;if(p==="response"){const{callbackId:_,response:D,error:e}=o.data,n=O.current[_];n&&(n(D,e),delete O.current[_]);return}if(p==="mark-registered"){const{requestType:_}=o.data;y.current[d]||(y.current[d]=new Set),y.current[d].add(_);return}p==="ready"&&W(_=>({..._,[d]:!0})),i((M=C[d])==null?void 0:M[p],o.data,P),i((H=C["*"])==null?void 0:H[p],o.data,P),i((K=C[d])==null?void 0:K["*"],o.data,P),i((B=C["*"])==null?void 0:B["*"],o.data,P)};return window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}},[f]);const g=t.useCallback((i,a,o)=>{var p,h;const d=f[i];if(!d){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(h=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&h.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:a,...o,instanceId:i},d.origin)},[f]),$=t.useRef(0),V=t.useCallback(()=>`${Date.now()}-${++$.current}`,[]),U=t.useCallback(async(i,a,o={})=>new Promise((d,p)=>{const h=V(),L=(P,C)=>{delete O.current[h],C?p(C):d(P)};O.current[h]=L,g(i,"request",{callbackId:h,requestType:a,data:o})}),[g]),v=t.useCallback((i,a)=>{g(i,"load-options",a)},[g]),F=t.useCallback((i,a)=>{g(i,"validate",a)},[g]),w=t.useMemo(()=>({registerFrame:x,unregisterFrame:Y,sendMessage:g,sendRequest:U,loadOptions:v,validate:F,hasHandler:q,readyFrames:E,addListener:(i,a,o)=>(T.current[i]||(T.current[i]={}),T.current[i][a]||(T.current[i][a]=[]),T.current[i][a].push(o),()=>{T.current[i][a]=T.current[i][a].filter(d=>d!==o)})}),[x,Y,g,U,v,F,q,E]);return S.default.createElement(X.Provider,{value:w},S.default.createElement(ae,{launcher:u,broker:c},r))},N=(r,u,c)=>{const f=t.useContext(X);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const b=t.useRef(c);t.useEffect(()=>{b.current=c},[c]),t.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const E=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:E}),f.addListener(r,`key-pressed:${E}`,(...T)=>b.current(...T))}return f.addListener(r,u,(...E)=>b.current(...E))}},[f,r,u])};be.propTypes={children:k.default.node.isRequired,authorizationLauncher:k.default.func,credentialBroker:k.default.func};const se=ue.default.default||ue.default,Se=1e4,Ue="credentials",Le=(r,u)=>`${r}/mm-embedded-interop?id=${encodeURIComponent(u)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Ue}`,Ae=se.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: ${
|
|
5
|
+
visibility: ${n=>n.$isReady?"visible":"hidden"};
|
|
6
6
|
`,ze=se.div`
|
|
7
7
|
width: 100%;
|
|
8
8
|
height: 100%;
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
text-align: center;
|
|
17
17
|
color: #555;
|
|
18
18
|
font-size: 14px;
|
|
19
|
-
`,me=
|
|
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
|
-
|
|
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
|
|
3
|
+
"version": "2.0.0",
|
|
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
|
+
}
|