@machinemetrics/mm-react-embeddable 2.0.3-0 → 2.0.3-2

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