@machinemetrics/mm-react-embeddable 2.0.3-1 → 2.0.3-3

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