@machinemetrics/mm-react-embeddable 1.3.1 → 1.4.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,61 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),C=require("prop-types"),O=require("styled-components"),q=e.createContext(null),W=({children:r})=>{const[u,d]=e.useState({}),[i,R]=e.useState({}),c=e.useRef({}),f=e.useRef({}),b=e.useRef({}),T=e.useCallback((t,s)=>{var n;return!!((n=b.current[t])!=null&&n.has(s))},[]),w=e.useCallback((t,s,n)=>{d(o=>({...o,[t]:{origin:s,frameRef:n}}))},[]),h=e.useCallback(t=>{d(s=>{const n={...s};return delete n[t],n}),R(s=>{const n={...s};return delete n[t],n}),delete b.current[t]},[]);e.useEffect(()=>{const t=(n=[],o)=>{n.forEach(a=>a(o))},s=n=>{var $,y,E,m,k;if(!(($=n==null?void 0:n.data)!=null&&$.instanceId))return;const{instanceId:o,type:a}=n.data,l=c.current;if(a==="response"){const{callbackId:I,response:_,error:H}=n.data,U=f.current[I];U&&(U(_,H),delete f.current[I]);return}if(a==="mark-registered"){const{requestType:I}=n.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(I);return}a==="ready"&&R(I=>({...I,[o]:!0})),t((y=l[o])==null?void 0:y[a],n.data),t((E=l["*"])==null?void 0:E[a],n.data),t((m=l[o])==null?void 0:m["*"],n.data),t((k=l["*"])==null?void 0:k["*"],n.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const g=e.useCallback((t,s,n)=>{var a,l;const o=u[t];if(!o){console.warn(`Origin not set for id: ${t}. Unable to send message.`);return}(l=(a=o==null?void 0:o.frameRef)==null?void 0:a.current)!=null&&l.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...n,instanceId:t},o.origin)},[u]),M=e.useRef(0),P=e.useCallback(()=>`${Date.now()}-${++M.current}`,[]),F=e.useCallback(async(t,s,n={})=>new Promise((o,a)=>{const l=P(),$=(y,E)=>{delete f.current[l],E?a(E):o(y)};f.current[l]=$,g(t,"request",{callbackId:l,requestType:s,data:n})}),[g]),L=e.useCallback((t,s)=>{g(t,"load-options",s)},[g]),p=e.useCallback((t,s)=>{g(t,"validate",s)},[g]),x=e.useMemo(()=>({registerFrame:w,unregisterFrame:h,sendMessage:g,sendRequest:F,loadOptions:L,validate:p,hasHandler:T,readyFrames:i,addListener:(t,s,n)=>(c.current[t]||(c.current[t]={}),c.current[t][s]||(c.current[t][s]=[]),c.current[t][s].push(n),()=>{c.current[t][s]=c.current[t][s].filter(o=>o!==n)})}),[w,h,g,F,L,p,T,i]);return e.createElement(q.Provider,{value:x},r)},Z={},j=async r=>{try{const u=new URL(r).origin;if(Z[u]!==void 0)return Z[u];const i=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!i.version)throw new Error("Invalid manifest");return Z[u]=i,i}catch{}return Z[origin]=!1,!1},v=async r=>!!await j(r),S=(r,u,d)=>{const i=e.useContext(q);if(i===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const R=e.useRef(d);e.useEffect(()=>{R.current=d},[d]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const c=u.substring(4);return i.readyFrames[r]&&i.sendMessage(r,"subscribe-key",{keyChord:c}),i.addListener(r,`key-pressed:${c}`,(...b)=>R.current(...b))}return i.addListener(r,u,(...c)=>R.current(...c))}},[i,r,u])};W.propTypes={children:C.node.isRequired};const z=O.default||O,B=1e4,D=z.iframe`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),E=require("prop-types"),j=require("styled-components"),v=e.createContext(null),Z=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ee=2e4,F=r=>{try{return new URL(r).origin}catch{return null}},W=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(".")},D=(r,u)=>{try{const s=new URL(r),d=new URL(u);return s.protocol!==d.protocol?!0:W(s.hostname)!==W(d.hostname)}catch{return!0}},H=(r,{onBlocked:u,onClosed:s})=>{const d=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!d)return u(),()=>{};const g=setInterval(()=>{d.closed&&(clearInterval(g),s())},1e3);return()=>clearInterval(g)},K=({children:r,launcher:u})=>{const s=e.useContext(v),[d,g]=e.useState({}),[R,p]=e.useState({}),[x,T]=e.useState({}),[I,w]=e.useState({}),y=e.useRef(x);y.current=x;const b=e.useRef(null),k=e.useRef({}),P=e.useRef({}),C=e.useCallback(t=>{const n=P.current[t];if(!n)return;const o=f=>f[t]?{...f,[t]:{...f[t],name:n}}:f;g(o),w(o)},[]),O=e.useCallback((t,n)=>{const o=F(t==null?void 0:t.authUrl);o&&(w(f=>f[o]?f:{...f,[o]:{origin:o,reason:n,name:null}}),C(o))},[C]),z=e.useCallback((t,{v2:n=!1}={})=>{const o=F(t==null?void 0:t.authUrl);o&&(n&&y.current[o]||(g(f=>f[o]?f:{...f,[o]:{origin:o,authUrl:t.authUrl,silentUrl:t.silentUrl||null,status:n&&t.silentUrl?"silent":"interactive",v2:n,name:null,popupBlocked:!1}}),C(o)))},[C]),S=e.useCallback(t=>{g(n=>{if(!n[t])return n;const o={...n};return delete o[t],o})},[]),i=e.useCallback(t=>{t&&(S(t),p(n=>({...n,[t]:(n[t]||0)+1})))},[S]),l=e.useCallback(t=>{g(n=>!n[t]||n[t].status==="interactive"?n:{...n,[t]:{...n[t],status:"interactive"}})},[]),c=e.useCallback(t=>{S(t.origin)},[S]),a=e.useCallback(t=>{const n=F(t==null?void 0:t.authUrl);if(n&&D(n,window.location.origin)){O(t,"cross-site-legacy");return}z(t)},[z,O]);e.useEffect(()=>{if(!s)return;const t=[s.addListener("*","init",n=>{n!=null&&n.origin&&n.name&&(P.current[n.origin]=n.name,C(n.origin))}),s.addListener("*","authorize",a),s.addListener("*","login",a),s.addListener("*","credential-request",n=>z(n,{v2:!0})),s.addListener("*","authorized",n=>{n!=null&&n.accessToken||i(F(n==null?void 0:n.authUrl))})];return()=>t.forEach(n=>n())},[s,a,z,i,C]),e.useEffect(()=>{const t=n=>{const o=n==null?void 0:n.data;if(!o||o.type!=="authorized"&&o.type!=="authorize-failed")return;const f=F(o.authUrl);if(!(!f||n.origin!==f)){if(o.type==="authorized"&&o.accessToken){T(M=>({...M,[f]:{accessToken:o.accessToken}})),S(f);return}o.type==="authorize-failed"&&l(f)}};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)},[S,l]),e.useEffect(()=>{const t=k.current;Object.values(d).forEach(n=>{n.status==="silent"&&!t[n.origin]&&(t[n.origin]=setTimeout(()=>{delete t[n.origin],l(n.origin)},ee))}),Object.keys(t).forEach(n=>{(!d[n]||d[n].status!=="silent")&&(clearTimeout(t[n]),delete t[n])})},[d,l]),e.useEffect(()=>()=>{b.current&&b.current(),Object.values(k.current).forEach(clearTimeout)},[]);const h=e.useCallback(t=>{b.current&&(b.current(),b.current=null);const n=u||H;b.current=n(t,{onBlocked:()=>{g(o=>o[t.origin]?{...o,[t.origin]:{...o[t.origin],popupBlocked:!0}}:o)},onClosed:()=>{if(t.v2){g(o=>!o[t.origin]||!o[t.origin].silentUrl?o:{...o,[t.origin]:{...o[t.origin],status:"silent"}});return}i(t.origin)}})},[u,i]),m={pending:Object.values(d).filter(t=>t.status==="interactive"),authorize:h,dismiss:c,originEpochs:R,credentials:x,unsupported:I},U=Object.values(d).filter(t=>t.status==="silent"&&t.silentUrl);return e.createElement(Z.Provider,{value:m},r,U.map(t=>e.createElement("iframe",{key:`mm-silent-auth-${t.origin}`,src:t.silentUrl,title:`MachineMetrics silent authorization (${t.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};K.propTypes={children:E.node,launcher:E.func};const V=()=>e.useContext(Z),G=r=>{const{originEpochs:u}=e.useContext(Z),s=F(r);return s&&u[s]||0},J=r=>{const{credentials:u}=e.useContext(Z),s=F(r);return s&&u[s]||null},Q=r=>{const{unsupported:u}=e.useContext(Z),s=F(r);return s&&u[s]||null},X=({children:r,authorizationLauncher:u})=>{const[s,d]=e.useState({}),[g,R]=e.useState({}),p=e.useRef({}),x=e.useRef({}),T=e.useRef({}),I=e.useCallback((i,l)=>{var c;return!!((c=T.current[i])!=null&&c.has(l))},[]),w=e.useCallback((i,l,c)=>{d(a=>({...a,[i]:{origin:l,frameRef:c}}))},[]),y=e.useCallback(i=>{d(l=>{const c={...l};return delete c[i],c}),R(l=>{const c={...l};return delete c[i],c}),delete T.current[i]},[]);e.useEffect(()=>{const i=(c=[],a)=>{c.forEach(h=>h(a))},l=c=>{var U,t,n,o,f;if(!((U=c==null?void 0:c.data)!=null&&U.instanceId))return;const{instanceId:a,type:h}=c.data,m=p.current;if(h==="response"){const{callbackId:M,response:$,error:A}=c.data,L=x.current[M];L&&(L($,A),delete x.current[M]);return}if(h==="mark-registered"){const{requestType:M}=c.data;T.current[a]||(T.current[a]=new Set),T.current[a].add(M);return}h==="ready"&&R(M=>({...M,[a]:!0})),i((t=m[a])==null?void 0:t[h],c.data),i((n=m["*"])==null?void 0:n[h],c.data),i((o=m[a])==null?void 0:o["*"],c.data),i((f=m["*"])==null?void 0:f["*"],c.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[s]);const b=e.useCallback((i,l,c)=>{var h,m;const a=s[i];if(!a){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(m=(h=a==null?void 0:a.frameRef)==null?void 0:h.current)!=null&&m.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...c,instanceId:i},a.origin)},[s]),k=e.useRef(0),P=e.useCallback(()=>`${Date.now()}-${++k.current}`,[]),C=e.useCallback(async(i,l,c={})=>new Promise((a,h)=>{const m=P(),U=(t,n)=>{delete x.current[m],n?h(n):a(t)};x.current[m]=U,b(i,"request",{callbackId:m,requestType:l,data:c})}),[b]),O=e.useCallback((i,l)=>{b(i,"load-options",l)},[b]),z=e.useCallback((i,l)=>{b(i,"validate",l)},[b]),S=e.useMemo(()=>({registerFrame:w,unregisterFrame:y,sendMessage:b,sendRequest:C,loadOptions:O,validate:z,hasHandler:I,readyFrames:g,addListener:(i,l,c)=>(p.current[i]||(p.current[i]={}),p.current[i][l]||(p.current[i][l]=[]),p.current[i][l].push(c),()=>{p.current[i][l]=p.current[i][l].filter(a=>a!==c)})}),[w,y,b,C,O,z,I,g]);return e.createElement(v.Provider,{value:S},e.createElement(K,{launcher:u},r))},q=(r,u,s)=>{const d=e.useContext(v);if(d===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const g=e.useRef(s);e.useEffect(()=>{g.current=s},[s]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const R=u.substring(4);return d.readyFrames[r]&&d.sendMessage(r,"subscribe-key",{keyChord:R}),d.addListener(r,`key-pressed:${R}`,(...x)=>g.current(...x))}return d.addListener(r,u,(...R)=>g.current(...R))}},[d,r,u])};X.propTypes={children:E.node.isRequired,authorizationLauncher:E.func};const B=j.default||j,te=1e4,ne="credentials",_=(r,u)=>`${r}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${ne}`,re=B.iframe`
2
2
  width: 100%;
3
3
  height: 100%;
4
4
  border: none;
5
5
  visibility: ${r=>r.$isReady?"visible":"hidden"};
6
- `,A=({id:r,src:u,path:d,onInit:i=()=>{},onTimeout:R,context:c={},params:f={},skipManifestCheck:b=!1,...T})=>{if("isConfiguring"in T)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=e.useRef(),[h,g]=e.useState(),[M,P]=e.useState(0),{registerFrame:F,unregisterFrame:L,sendMessage:p}=e.useContext(q),[x,t]=e.useState(!0),[s,n]=e.useState(),o=e.useRef(),a=e.useRef(R),l=e.useRef(i),$=e.useRef(!1);e.useEffect(()=>{a.current=R},[R]),e.useEffect(()=>{l.current=i},[i]),e.useEffect(()=>{M&&p(r,"set-context",{context:{...c,colorMode:f.colorMode,isFullScreen:f.isFullScreen}})},[c,f.colorMode,f.isFullScreen,r,M]),e.useEffect(()=>{M&&(p(r,"set-params",{params:f}),p(r,"set-configuring",{isConfiguring:f.isConfiguring}))},[f,r,M]),e.useEffect(()=>{d!==void 0&&n((d==null?void 0:d.indexOf("/"))===0?d:`/${d}`)},[d]),e.useEffect(()=>{s===void 0||!M||p(r,"navigate",{path:s})},[s,M,r,p]),e.useEffect(()=>{if(!(!u||!r||!w)){if(b){const m=new URL(u);t(!0),F(r,m.origin,w),l.current(),g(`${m.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const m=await v(u);if(t(m),m){const k=new URL(u);F(r,k.origin,w),l.current(),g(`${k.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{L(r)}}},[u,r,F,w,b]),e.useEffect(()=>{if(!(!b||!h||$.current))return o.current=setTimeout(()=>{a.current&&a.current()},B),()=>clearTimeout(o.current)},[h,b]);const y=e.useCallback(()=>{$.current=!0,clearTimeout(o.current)},[]);S(r,"init",y),S(r,"authorize",y),S(r,"login",y),S(r,"ready",()=>{y(),P(m=>m+1)});const E=e.useRef();return S(r,"heartbeat",()=>{E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{if(w.current){const m=new URL(u);w.current.src=`${m.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{E.current&&clearTimeout(E.current)},[]),!b&&!x?null:e.createElement(D,{$isReady:M,ref:w,src:h,...T})};A.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,skipManifestCheck:C.bool};exports.MMEmbeddableZone=A;exports.MMEmbeddableZoneContext=q;exports.MMEmbeddableZoneProvider=W;exports.getAppInfo=j;exports.testIsEmbeddable=v;exports.useEmbeddedEffect=S;
6
+ `,se=B.div`
7
+ width: 100%;
8
+ height: 100%;
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: center;
12
+ justify-content: center;
13
+ gap: 6px;
14
+ padding: 16px;
15
+ box-sizing: border-box;
16
+ text-align: center;
17
+ color: #555;
18
+ font-size: 14px;
19
+ `,Y=({entry:r})=>e.createElement(se,null,e.createElement("div",{style:{fontWeight:600}},r&&(r.name||r.origin)||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));Y.propTypes={entry:E.shape({origin:E.string,name:E.string,reason:E.string})};const oe=B.div`
20
+ height: 100%;
21
+ display: flex;
22
+ flex: 1;
23
+ align-items: center;
24
+ justify-content: center;
25
+ `,ie=()=>e.createElement(oe,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),N=({id:r,src:u,path:s,onInit:d=()=>{},onTimeout:g,context:R={},params:p={},renderUnsupported:x,renderTimeout:T,...I})=>{if("isConfiguring"in I)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in R)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in R)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const w=e.useRef(),[y,b]=e.useState(),[k,P]=e.useState(0),[C,O]=e.useState(!1),[z,S]=e.useState(!1),i=G(u),l=J(u),c=Q(u);e.useEffect(()=>{i>0&&P(0)},[i]);const{registerFrame:a,unregisterFrame:h,sendMessage:m}=e.useContext(v),[U,t]=e.useState(),n=e.useRef(),o=e.useRef(g),f=e.useRef(d),M=e.useRef(!1);e.useEffect(()=>{o.current=g},[g]),e.useEffect(()=>{f.current=d},[d]),e.useEffect(()=>{k&&m(r,"set-context",{context:{...R,colorMode:p.colorMode,isFullScreen:p.isFullScreen}})},[R,p.colorMode,p.isFullScreen,r,k]),e.useEffect(()=>{k&&(m(r,"set-params",{params:p}),m(r,"set-configuring",{isConfiguring:p.isConfiguring}))},[p,r,k]),e.useEffect(()=>{s!==void 0&&t((s==null?void 0:s.indexOf("/"))===0?s:`/${s}`)},[s]),e.useEffect(()=>{U===void 0||!k||m(r,"navigate",{path:U})},[U,k,r,m]),e.useEffect(()=>{if(!u||!r||!w)return;const L=new URL(u);return a(r,L.origin,w),f.current(),b(_(L.origin,r)),()=>{h(r)}},[u,r,a,w]),e.useEffect(()=>{if(!(!y||M.current))return n.current=setTimeout(()=>{O(!0),o.current&&o.current()},te),()=>clearTimeout(n.current)},[y]);const $=e.useCallback(()=>{M.current=!0,clearTimeout(n.current),O(!1)},[]);q(r,"init",$),q(r,"authorize",$),q(r,"login",$),q(r,"credential-request",()=>{$(),S(!0)}),e.useEffect(()=>{!z||!l||m(r,"credential",{accessToken:l.accessToken})},[z,l,r,m]),q(r,"ready",()=>{$(),P(L=>L+1)});const A=e.useRef();return q(r,"heartbeat",()=>{A.current&&clearTimeout(A.current),A.current=setTimeout(()=>{if(w.current){const L=new URL(u);w.current.src=_(L.origin,r)}},6e3)}),e.useEffect(()=>()=>{A.current&&clearTimeout(A.current)},[]),c?x?x(c):e.createElement(Y,{entry:c}):C&&!k?T?T():e.createElement(ie,null):e.createElement(re,{key:`auth-epoch-${i}`,$isReady:k,ref:w,src:y,...I})};N.propTypes={id:E.string,src:E.string.isRequired,path:E.string,onInit:E.func,onTimeout:E.func,renderUnsupported:E.func,renderTimeout:E.func};const ue=j.div`
26
+ position: fixed;
27
+ inset: 0;
28
+ background: rgba(0, 0, 0, 0.45);
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ z-index: 10000;
33
+ `,ce=j.div`
34
+ background: #fff;
35
+ border-radius: 8px;
36
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
37
+ padding: 24px;
38
+ width: 480px;
39
+ max-width: calc(100vw - 32px);
40
+ font-family: sans-serif;
41
+ color: #222;
42
+ `,le=j.div`
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: space-between;
46
+ padding: 10px 0;
47
+ gap: 16px;
48
+ `,ae=j.button`
49
+ background: #16a500;
50
+ color: #fff;
51
+ border: none;
52
+ border-radius: 6px;
53
+ padding: 9px 18px;
54
+ font-size: 14px;
55
+ cursor: pointer;
56
+ white-space: nowrap;
57
+ `,de=j.p`
58
+ color: #b3261e;
59
+ font-size: 13px;
60
+ margin: 4px 0 0;
61
+ `,fe=()=>{const{pending:r,authorize:u}=V();return r.length===0?null:e.createElement(ue,null,e.createElement(ce,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(s=>e.createElement("div",{key:s.origin},e.createElement(le,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},s.name||s.origin),s.name&&e.createElement("div",{style:{fontSize:12,color:"#888"}},s.origin)),e.createElement(ae,{onClick:()=>u(s)},"Authorize")),s.popupBlocked&&e.createElement(de,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};exports.EmbeddedAuthorizationContext=Z;exports.EmbeddedAuthorizationPrompt=fe;exports.MMEmbeddableZone=N;exports.MMEmbeddableZoneContext=v;exports.MMEmbeddableZoneProvider=X;exports.isCrossSite=D;exports.popupAuthorizationLauncher=H;exports.useEmbeddedAuthorizations=V;exports.useEmbeddedCredential=J;exports.useEmbeddedEffect=q;exports.useEmbeddedOriginEpoch=G;exports.useEmbeddedUnsupported=Q;
@@ -1,254 +1,566 @@
1
- import A, { createContext as B, useState as U, useRef as R, useCallback as $, useEffect as g, useMemo as D, useContext as H } from "react";
2
- import T from "prop-types";
3
- import j from "styled-components";
4
- const W = B(null), K = ({ children: e }) => {
5
- const [s, a] = U({}), [c, y] = U({}), i = R({}), l = R({}), f = R({}), x = $((r, t) => {
6
- var n;
7
- return !!((n = f.current[r]) != null && n.has(t));
8
- }, []), p = $((r, t, n) => {
9
- a((o) => ({ ...o, [r]: { origin: t, frameRef: n } }));
10
- }, []), I = $((r) => {
11
- a((t) => {
12
- const n = { ...t };
13
- return delete n[r], n;
14
- }), y((t) => {
15
- const n = { ...t };
16
- return delete n[r], n;
17
- }), delete f.current[r];
1
+ import f, { createContext as J, useContext as Z, useState as L, useRef as R, useCallback as b, useEffect as h, useMemo as Y } from "react";
2
+ import x from "prop-types";
3
+ import W from "styled-components";
4
+ const H = J(null), D = J({
5
+ pending: [],
6
+ authorize: () => {
7
+ },
8
+ dismiss: () => {
9
+ },
10
+ originEpochs: {},
11
+ credentials: {},
12
+ unsupported: {}
13
+ }), N = 2e4, A = (n) => {
14
+ try {
15
+ return new URL(n).origin;
16
+ } catch {
17
+ return null;
18
+ }
19
+ }, V = (n) => {
20
+ if (!n || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(n) || n.includes(":"))
21
+ return n;
22
+ const o = n.split(".");
23
+ return o.length <= 2 ? n : o.slice(-2).join(".");
24
+ }, ee = (n, o) => {
25
+ try {
26
+ const r = new URL(n), a = new URL(o);
27
+ return r.protocol !== a.protocol ? !0 : V(r.hostname) !== V(a.hostname);
28
+ } catch {
29
+ return !0;
30
+ }
31
+ }, te = (n, { onBlocked: o, onClosed: r }) => {
32
+ const a = window.open(
33
+ n.authUrl,
34
+ "mm-embed-auth",
35
+ "popup,width=600,height=700"
36
+ );
37
+ if (!a)
38
+ return o(), () => {
39
+ };
40
+ const g = setInterval(() => {
41
+ a.closed && (clearInterval(g), r());
42
+ }, 1e3);
43
+ return () => clearInterval(g);
44
+ }, Q = ({ children: n, launcher: o }) => {
45
+ const r = Z(H), [a, g] = L({}), [T, p] = L({}), [M, C] = L({}), [j, z] = L({}), I = R(M);
46
+ I.current = M;
47
+ const E = R(null), k = R({}), q = R({}), U = b((e) => {
48
+ const t = q.current[e];
49
+ if (!t)
50
+ return;
51
+ const s = (d) => d[e] ? { ...d, [e]: { ...d[e], name: t } } : d;
52
+ g(s), z(s);
53
+ }, []), P = b(
54
+ (e, t) => {
55
+ const s = A(e == null ? void 0 : e.authUrl);
56
+ s && (z((d) => d[s] ? d : {
57
+ ...d,
58
+ [s]: { origin: s, reason: t, name: null }
59
+ }), U(s));
60
+ },
61
+ [U]
62
+ ), O = b(
63
+ (e, { v2: t = !1 } = {}) => {
64
+ const s = A(e == null ? void 0 : e.authUrl);
65
+ s && (t && I.current[s] || (g((d) => d[s] ? d : {
66
+ ...d,
67
+ [s]: {
68
+ origin: s,
69
+ authUrl: e.authUrl,
70
+ silentUrl: e.silentUrl || null,
71
+ // v2 entries try the invisible silent resolver first; legacy
72
+ // signals go straight to the host's interactive UI.
73
+ status: t && e.silentUrl ? "silent" : "interactive",
74
+ v2: t,
75
+ name: null,
76
+ popupBlocked: !1
77
+ }
78
+ }), U(s)));
79
+ },
80
+ [U]
81
+ ), S = b((e) => {
82
+ g((t) => {
83
+ if (!t[e])
84
+ return t;
85
+ const s = { ...t };
86
+ return delete s[e], s;
87
+ });
88
+ }, []), i = b(
89
+ (e) => {
90
+ e && (S(e), p((t) => ({
91
+ ...t,
92
+ [e]: (t[e] || 0) + 1
93
+ })));
94
+ },
95
+ [S]
96
+ ), u = b((e) => {
97
+ g((t) => !t[e] || t[e].status === "interactive" ? t : {
98
+ ...t,
99
+ [e]: { ...t[e], status: "interactive" }
100
+ });
101
+ }, []), c = b(
102
+ (e) => {
103
+ S(e.origin);
104
+ },
105
+ [S]
106
+ ), l = b(
107
+ (e) => {
108
+ const t = A(e == null ? void 0 : e.authUrl);
109
+ if (t && ee(t, window.location.origin)) {
110
+ P(e, "cross-site-legacy");
111
+ return;
112
+ }
113
+ O(e);
114
+ },
115
+ [O, P]
116
+ );
117
+ h(() => {
118
+ if (!r)
119
+ return;
120
+ const e = [
121
+ // `init` carries the app's display name (v2 apps). Cache it by app origin
122
+ // and enrich any entry already showing for that origin. `init` is posted
123
+ // before the authorize/login/credential-request signals, so the name is
124
+ // usually cached by the time an entry is created.
125
+ r.addListener("*", "init", (t) => {
126
+ t != null && t.origin && t.name && (q.current[t.origin] = t.name, U(t.origin));
127
+ }),
128
+ r.addListener("*", "authorize", l),
129
+ r.addListener("*", "login", l),
130
+ r.addListener(
131
+ "*",
132
+ "credential-request",
133
+ (t) => O(t, { v2: !0 })
134
+ ),
135
+ r.addListener("*", "authorized", (t) => {
136
+ t != null && t.accessToken || i(A(t == null ? void 0 : t.authUrl));
137
+ })
138
+ ];
139
+ return () => e.forEach((t) => t());
140
+ }, [r, l, O, i, U]), h(() => {
141
+ const e = (t) => {
142
+ const s = t == null ? void 0 : t.data;
143
+ if (!s || s.type !== "authorized" && s.type !== "authorize-failed")
144
+ return;
145
+ const d = A(s.authUrl);
146
+ if (!(!d || t.origin !== d)) {
147
+ if (s.type === "authorized" && s.accessToken) {
148
+ C((y) => ({
149
+ ...y,
150
+ [d]: { accessToken: s.accessToken }
151
+ })), S(d);
152
+ return;
153
+ }
154
+ s.type === "authorize-failed" && u(d);
155
+ }
156
+ };
157
+ return window.addEventListener("message", e), () => window.removeEventListener("message", e);
158
+ }, [S, u]), h(() => {
159
+ const e = k.current;
160
+ Object.values(a).forEach((t) => {
161
+ t.status === "silent" && !e[t.origin] && (e[t.origin] = setTimeout(() => {
162
+ delete e[t.origin], u(t.origin);
163
+ }, N));
164
+ }), Object.keys(e).forEach((t) => {
165
+ (!a[t] || a[t].status !== "silent") && (clearTimeout(e[t]), delete e[t]);
166
+ });
167
+ }, [a, u]), h(() => () => {
168
+ E.current && E.current(), Object.values(k.current).forEach(clearTimeout);
169
+ }, []);
170
+ const w = b(
171
+ (e) => {
172
+ E.current && (E.current(), E.current = null);
173
+ const t = o || te;
174
+ E.current = t(e, {
175
+ onBlocked: () => {
176
+ g((s) => s[e.origin] ? {
177
+ ...s,
178
+ [e.origin]: { ...s[e.origin], popupBlocked: !0 }
179
+ } : s);
180
+ },
181
+ onClosed: () => {
182
+ if (e.v2) {
183
+ g((s) => !s[e.origin] || !s[e.origin].silentUrl ? s : {
184
+ ...s,
185
+ [e.origin]: { ...s[e.origin], status: "silent" }
186
+ });
187
+ return;
188
+ }
189
+ i(e.origin);
190
+ }
191
+ });
192
+ },
193
+ [o, i]
194
+ ), m = {
195
+ // Hosts render UI for interactive entries only; silent resolution is
196
+ // invisible by design.
197
+ pending: Object.values(a).filter(
198
+ (e) => e.status === "interactive"
199
+ ),
200
+ authorize: w,
201
+ dismiss: c,
202
+ originEpochs: T,
203
+ credentials: M,
204
+ unsupported: j
205
+ }, F = Object.values(a).filter(
206
+ (e) => e.status === "silent" && e.silentUrl
207
+ );
208
+ return /* @__PURE__ */ f.createElement(D.Provider, { value: m }, n, F.map((e) => /* @__PURE__ */ f.createElement(
209
+ "iframe",
210
+ {
211
+ key: `mm-silent-auth-${e.origin}`,
212
+ src: e.silentUrl,
213
+ title: `MachineMetrics silent authorization (${e.origin})`,
214
+ "aria-hidden": "true",
215
+ tabIndex: -1,
216
+ style: { display: "none" }
217
+ }
218
+ )));
219
+ };
220
+ Q.propTypes = {
221
+ children: x.node,
222
+ launcher: x.func
223
+ };
224
+ const ne = () => Z(D), re = (n) => {
225
+ const { originEpochs: o } = Z(D), r = A(n);
226
+ return r && o[r] || 0;
227
+ }, se = (n) => {
228
+ const { credentials: o } = Z(D), r = A(n);
229
+ return r && o[r] || null;
230
+ }, ie = (n) => {
231
+ const { unsupported: o } = Z(D), r = A(n);
232
+ return r && o[r] || null;
233
+ }, oe = ({ children: n, authorizationLauncher: o }) => {
234
+ const [r, a] = L({}), [g, T] = L({}), p = R({}), M = R({}), C = R({}), j = b((i, u) => {
235
+ var c;
236
+ return !!((c = C.current[i]) != null && c.has(u));
237
+ }, []), z = b((i, u, c) => {
238
+ a((l) => ({ ...l, [i]: { origin: u, frameRef: c } }));
239
+ }, []), I = b((i) => {
240
+ a((u) => {
241
+ const c = { ...u };
242
+ return delete c[i], c;
243
+ }), T((u) => {
244
+ const c = { ...u };
245
+ return delete c[i], c;
246
+ }), delete C.current[i];
18
247
  }, []);
19
- g(() => {
20
- const r = (n = [], o) => {
21
- n.forEach((u) => u(o));
22
- }, t = (n) => {
23
- var F, M, w, m, C;
24
- if (!((F = n == null ? void 0 : n.data) != null && F.instanceId))
248
+ h(() => {
249
+ const i = (c = [], l) => {
250
+ c.forEach((w) => w(l));
251
+ }, u = (c) => {
252
+ var F, e, t, s, d;
253
+ if (!((F = c == null ? void 0 : c.data) != null && F.instanceId))
25
254
  return;
26
- const { instanceId: o, type: u } = n.data, d = i.current;
27
- if (u === "response") {
28
- const { callbackId: S, response: v, error: z } = n.data, _ = l.current[S];
29
- _ && (_(v, z), delete l.current[S]);
255
+ const { instanceId: l, type: w } = c.data, m = p.current;
256
+ if (w === "response") {
257
+ const { callbackId: y, response: B, error: v } = c.data, $ = M.current[y];
258
+ $ && ($(B, v), delete M.current[y]);
30
259
  return;
31
260
  }
32
- if (u === "mark-registered") {
33
- const { requestType: S } = n.data;
34
- f.current[o] || (f.current[o] = /* @__PURE__ */ new Set()), f.current[o].add(S);
261
+ if (w === "mark-registered") {
262
+ const { requestType: y } = c.data;
263
+ C.current[l] || (C.current[l] = /* @__PURE__ */ new Set()), C.current[l].add(y);
35
264
  return;
36
265
  }
37
- u === "ready" && y((S) => ({ ...S, [o]: !0 })), r((M = d[o]) == null ? void 0 : M[u], n.data), r((w = d["*"]) == null ? void 0 : w[u], n.data), r((m = d[o]) == null ? void 0 : m["*"], n.data), r((C = d["*"]) == null ? void 0 : C["*"], n.data);
266
+ w === "ready" && T((y) => ({ ...y, [l]: !0 })), i((e = m[l]) == null ? void 0 : e[w], c.data), i((t = m["*"]) == null ? void 0 : t[w], c.data), i((s = m[l]) == null ? void 0 : s["*"], c.data), i((d = m["*"]) == null ? void 0 : d["*"], c.data);
38
267
  };
39
- return window.addEventListener("message", t), () => {
40
- window.removeEventListener("message", t);
268
+ return window.addEventListener("message", u), () => {
269
+ window.removeEventListener("message", u);
41
270
  };
42
- }, [s]);
43
- const b = $(
44
- (r, t, n) => {
45
- var u, d;
46
- const o = s[r];
47
- if (!o) {
48
- console.warn(`Origin not set for id: ${r}. Unable to send message.`);
271
+ }, [r]);
272
+ const E = b(
273
+ (i, u, c) => {
274
+ var w, m;
275
+ const l = r[i];
276
+ if (!l) {
277
+ console.warn(`Origin not set for id: ${i}. Unable to send message.`);
49
278
  return;
50
279
  }
51
- (d = (u = o == null ? void 0 : o.frameRef) == null ? void 0 : u.current) != null && d.contentWindow && o.frameRef.current.contentWindow.postMessage(
52
- { type: t, ...n, instanceId: r },
53
- o.origin
280
+ (m = (w = l == null ? void 0 : l.frameRef) == null ? void 0 : w.current) != null && m.contentWindow && l.frameRef.current.contentWindow.postMessage(
281
+ { type: u, ...c, instanceId: i },
282
+ l.origin
54
283
  );
55
284
  },
56
- [s]
57
- ), E = R(0), O = $(() => `${Date.now()}-${++E.current}`, []), L = $(
58
- async (r, t, n = {}) => new Promise((o, u) => {
59
- const d = O(), F = (M, w) => {
60
- delete l.current[d], w ? u(w) : o(M);
285
+ [r]
286
+ ), k = R(0), q = b(() => `${Date.now()}-${++k.current}`, []), U = b(
287
+ async (i, u, c = {}) => new Promise((l, w) => {
288
+ const m = q(), F = (e, t) => {
289
+ delete M.current[m], t ? w(t) : l(e);
61
290
  };
62
- l.current[d] = F, b(r, "request", { callbackId: d, requestType: t, data: n });
291
+ M.current[m] = F, E(i, "request", { callbackId: m, requestType: u, data: c });
63
292
  }),
64
- [b]
65
- ), Z = $(
66
- (r, t) => {
67
- b(r, "load-options", t);
293
+ [E]
294
+ ), P = b(
295
+ (i, u) => {
296
+ E(i, "load-options", u);
68
297
  },
69
- [b]
70
- ), h = $(
71
- (r, t) => {
72
- b(r, "validate", t);
298
+ [E]
299
+ ), O = b(
300
+ (i, u) => {
301
+ E(i, "validate", u);
73
302
  },
74
- [b]
75
- ), k = D(
303
+ [E]
304
+ ), S = Y(
76
305
  () => ({
77
- registerFrame: p,
306
+ registerFrame: z,
78
307
  unregisterFrame: I,
79
- sendMessage: b,
80
- sendRequest: L,
81
- loadOptions: Z,
82
- validate: h,
83
- hasHandler: x,
84
- readyFrames: c,
85
- addListener: (r, t, n) => (i.current[r] || (i.current[r] = {}), i.current[r][t] || (i.current[r][t] = []), i.current[r][t].push(n), () => {
86
- i.current[r][t] = i.current[r][t].filter((o) => o !== n);
308
+ sendMessage: E,
309
+ sendRequest: U,
310
+ loadOptions: P,
311
+ validate: O,
312
+ hasHandler: j,
313
+ readyFrames: g,
314
+ addListener: (i, u, c) => (p.current[i] || (p.current[i] = {}), p.current[i][u] || (p.current[i][u] = []), p.current[i][u].push(c), () => {
315
+ p.current[i][u] = p.current[i][u].filter((l) => l !== c);
87
316
  })
88
317
  }),
89
318
  [
90
- p,
319
+ z,
91
320
  I,
92
- b,
93
- L,
94
- Z,
95
- h,
96
- x,
97
- c
321
+ E,
322
+ U,
323
+ P,
324
+ O,
325
+ j,
326
+ g
98
327
  ]
99
328
  );
100
- return /* @__PURE__ */ A.createElement(W.Provider, { value: k }, e);
101
- }, q = {}, G = async (e) => {
102
- try {
103
- const s = new URL(e).origin;
104
- if (q[s] !== void 0)
105
- return q[s];
106
- const c = await (await fetch(`${s}/mm-app-manifest.json`)).json();
107
- if (!c.version)
108
- throw new Error("Invalid manifest");
109
- return q[s] = c, c;
110
- } catch {
111
- }
112
- return q[origin] = !1, !1;
113
- }, J = async (e) => !!await G(e), P = (e, s, a) => {
114
- const c = H(W);
115
- if (c === null)
329
+ return /* @__PURE__ */ f.createElement(H.Provider, { value: S }, /* @__PURE__ */ f.createElement(Q, { launcher: o }, n));
330
+ }, _ = (n, o, r) => {
331
+ const a = Z(H);
332
+ if (a === null)
116
333
  throw new Error(
117
334
  "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
118
335
  );
119
- const y = R(a);
120
- g(() => {
121
- y.current = a;
122
- }, [a]), g(() => {
123
- if (!(!e || !s)) {
124
- if (s.startsWith("key:")) {
125
- const i = s.substring(4);
126
- return c.readyFrames[e] && c.sendMessage(e, "subscribe-key", { keyChord: i }), c.addListener(
127
- e,
128
- `key-pressed:${i}`,
129
- (...f) => y.current(...f)
336
+ const g = R(r);
337
+ h(() => {
338
+ g.current = r;
339
+ }, [r]), h(() => {
340
+ if (!(!n || !o)) {
341
+ if (o.startsWith("key:")) {
342
+ const T = o.substring(4);
343
+ return a.readyFrames[n] && a.sendMessage(n, "subscribe-key", { keyChord: T }), a.addListener(
344
+ n,
345
+ `key-pressed:${T}`,
346
+ (...M) => g.current(...M)
130
347
  );
131
348
  }
132
- return c.addListener(
133
- e,
134
- s,
135
- (...i) => y.current(...i)
349
+ return a.addListener(
350
+ n,
351
+ o,
352
+ (...T) => g.current(...T)
136
353
  );
137
354
  }
138
- }, [c, e, s]);
355
+ }, [a, n, o]);
139
356
  };
140
- K.propTypes = {
141
- children: T.node.isRequired
357
+ oe.propTypes = {
358
+ children: x.node.isRequired,
359
+ /**
360
+ * Optional interactive-step launcher for embedded authorizations,
361
+ * `(entry, { onBlocked, onClosed }) => cleanup`. Defaults to a top-level
362
+ * popup. Hosts that cannot open windows (Android WebView shells) drive
363
+ * their own UI from useEmbeddedAuthorizations() instead.
364
+ */
365
+ authorizationLauncher: x.func
142
366
  };
143
- const Q = j.default || j, V = 1e4, X = Q.iframe`
367
+ const K = W.default || W, ce = 1e4, ue = "credentials", G = (n, o) => `${n}/mm-embedded-interop?id=${o}&origin=${window.location.origin}&caps=${ue}`, le = K.iframe`
144
368
  width: 100%;
145
369
  height: 100%;
146
370
  border: none;
147
- visibility: ${(e) => e.$isReady ? "visible" : "hidden"};
148
- `, Y = ({
149
- id: e,
150
- src: s,
151
- path: a,
152
- onInit: c = () => {
371
+ visibility: ${(n) => n.$isReady ? "visible" : "hidden"};
372
+ `, ae = K.div`
373
+ width: 100%;
374
+ height: 100%;
375
+ display: flex;
376
+ flex-direction: column;
377
+ align-items: center;
378
+ justify-content: center;
379
+ gap: 6px;
380
+ padding: 16px;
381
+ box-sizing: border-box;
382
+ text-align: center;
383
+ color: #555;
384
+ font-size: 14px;
385
+ `, X = ({ entry: n }) => /* @__PURE__ */ f.createElement(ae, null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, n && (n.name || n.origin) || "This app", " can’t be embedded here"), /* @__PURE__ */ f.createElement("div", { style: { fontSize: 12, color: "#888" } }, "It needs an update to support embedding from a different domain."));
386
+ X.propTypes = {
387
+ entry: x.shape({
388
+ origin: x.string,
389
+ name: x.string,
390
+ reason: x.string
391
+ })
392
+ };
393
+ const de = K.div`
394
+ height: 100%;
395
+ display: flex;
396
+ flex: 1;
397
+ align-items: center;
398
+ justify-content: center;
399
+ `, fe = () => /* @__PURE__ */ f.createElement(de, null, /* @__PURE__ */ f.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), me = ({
400
+ id: n,
401
+ src: o,
402
+ path: r,
403
+ onInit: a = () => {
153
404
  },
154
- onTimeout: y,
155
- context: i = {},
156
- params: l = {},
157
- skipManifestCheck: f = !1,
158
- ...x
405
+ onTimeout: g,
406
+ context: T = {},
407
+ params: p = {},
408
+ renderUnsupported: M,
409
+ renderTimeout: C,
410
+ ...j
159
411
  }) => {
160
- if ("isConfiguring" in x)
412
+ if ("isConfiguring" in j)
161
413
  return console.error(
162
414
  "isConfiguring must be passed via the params prop to MMEmbeddableZone"
163
415
  ), null;
164
- if ("colorMode" in i)
416
+ if ("colorMode" in T)
165
417
  return console.error(
166
418
  "colorMode must be passed via the params prop to MMEmbeddableZone"
167
419
  ), null;
168
- if ("isFullScreen" in i)
420
+ if ("isFullScreen" in T)
169
421
  return console.error(
170
422
  "isFullScreen must be passed via the params prop to MMEmbeddableZone"
171
423
  ), null;
172
- const p = R(), [I, b] = U(), [E, O] = U(0), { registerFrame: L, unregisterFrame: Z, sendMessage: h } = H(
173
- W
174
- ), [k, r] = U(!0), [t, n] = U(), o = R(), u = R(y), d = R(c), F = R(!1);
175
- g(() => {
176
- u.current = y;
177
- }, [y]), g(() => {
178
- d.current = c;
179
- }, [c]), g(() => {
180
- E && h(e, "set-context", {
424
+ const z = R(), [I, E] = L(), [k, q] = L(0), [U, P] = L(!1), [O, S] = L(!1), i = re(o), u = se(o), c = ie(o);
425
+ h(() => {
426
+ i > 0 && q(0);
427
+ }, [i]);
428
+ const { registerFrame: l, unregisterFrame: w, sendMessage: m } = Z(
429
+ H
430
+ ), [F, e] = L(), t = R(), s = R(g), d = R(a), y = R(!1);
431
+ h(() => {
432
+ s.current = g;
433
+ }, [g]), h(() => {
434
+ d.current = a;
435
+ }, [a]), h(() => {
436
+ k && m(n, "set-context", {
181
437
  context: {
182
- ...i,
438
+ ...T,
183
439
  // TODO: Remove this once everything is migrated to params
184
- colorMode: l.colorMode,
185
- isFullScreen: l.isFullScreen
440
+ colorMode: p.colorMode,
441
+ isFullScreen: p.isFullScreen
186
442
  }
187
443
  });
188
- }, [i, l.colorMode, l.isFullScreen, e, E]), g(() => {
189
- E && (h(e, "set-params", { params: l }), h(e, "set-configuring", { isConfiguring: l.isConfiguring }));
190
- }, [l, e, E]), g(() => {
191
- a !== void 0 && n((a == null ? void 0 : a.indexOf("/")) === 0 ? a : `/${a}`);
192
- }, [a]), g(() => {
193
- t === void 0 || !E || h(e, "navigate", { path: t });
194
- }, [t, E, e, h]), g(() => {
195
- if (!(!s || !e || !p)) {
196
- if (f) {
197
- const m = new URL(s);
198
- r(!0), L(e, m.origin, p), d.current(), b(
199
- `${m.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
200
- );
201
- } else
202
- (async () => {
203
- const m = await J(s);
204
- if (r(m), m) {
205
- const C = new URL(s);
206
- L(e, C.origin, p), d.current(), b(
207
- `${C.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`
208
- );
209
- }
210
- })();
211
- return () => {
212
- Z(e);
213
- };
214
- }
215
- }, [s, e, L, p, f]), g(() => {
216
- if (!(!f || !I || F.current))
217
- return o.current = setTimeout(() => {
218
- u.current && u.current();
219
- }, V), () => clearTimeout(o.current);
220
- }, [I, f]);
221
- const M = $(() => {
222
- F.current = !0, clearTimeout(o.current);
444
+ }, [T, p.colorMode, p.isFullScreen, n, k]), h(() => {
445
+ k && (m(n, "set-params", { params: p }), m(n, "set-configuring", { isConfiguring: p.isConfiguring }));
446
+ }, [p, n, k]), h(() => {
447
+ r !== void 0 && e((r == null ? void 0 : r.indexOf("/")) === 0 ? r : `/${r}`);
448
+ }, [r]), h(() => {
449
+ F === void 0 || !k || m(n, "navigate", { path: F });
450
+ }, [F, k, n, m]), h(() => {
451
+ if (!o || !n || !z)
452
+ return;
453
+ const $ = new URL(o);
454
+ return l(n, $.origin, z), d.current(), E(G($.origin, n)), () => {
455
+ w(n);
456
+ };
457
+ }, [o, n, l, z]), h(() => {
458
+ if (!(!I || y.current))
459
+ return t.current = setTimeout(() => {
460
+ P(!0), s.current && s.current();
461
+ }, ce), () => clearTimeout(t.current);
462
+ }, [I]);
463
+ const B = b(() => {
464
+ y.current = !0, clearTimeout(t.current), P(!1);
223
465
  }, []);
224
- P(e, "init", M), P(e, "authorize", M), P(e, "login", M), P(e, "ready", () => {
225
- M(), O((m) => m + 1);
466
+ _(n, "init", B), _(n, "authorize", B), _(n, "login", B), _(n, "credential-request", () => {
467
+ B(), S(!0);
468
+ }), h(() => {
469
+ !O || !u || m(n, "credential", { accessToken: u.accessToken });
470
+ }, [O, u, n, m]), _(n, "ready", () => {
471
+ B(), q(($) => $ + 1);
226
472
  });
227
- const w = R();
228
- return P(e, "heartbeat", () => {
229
- w.current && clearTimeout(w.current), w.current = setTimeout(() => {
230
- if (p.current) {
231
- const m = new URL(s);
232
- p.current.src = `${m.origin}/mm-embedded-interop?id=${e}&origin=${window.location.origin}`;
473
+ const v = R();
474
+ return _(n, "heartbeat", () => {
475
+ v.current && clearTimeout(v.current), v.current = setTimeout(() => {
476
+ if (z.current) {
477
+ const $ = new URL(o);
478
+ z.current.src = G($.origin, n);
233
479
  }
234
480
  }, 6e3);
235
- }), g(() => () => {
236
- w.current && clearTimeout(w.current);
237
- }, []), !f && !k ? null : /* @__PURE__ */ A.createElement(X, { $isReady: E, ref: p, src: I, ...x });
481
+ }), h(() => () => {
482
+ v.current && clearTimeout(v.current);
483
+ }, []), c ? M ? M(c) : /* @__PURE__ */ f.createElement(X, { entry: c }) : U && !k ? C ? C() : /* @__PURE__ */ f.createElement(fe, null) : /* @__PURE__ */ f.createElement(
484
+ le,
485
+ {
486
+ key: `auth-epoch-${i}`,
487
+ $isReady: k,
488
+ ref: z,
489
+ src: I,
490
+ ...j
491
+ }
492
+ );
493
+ };
494
+ me.propTypes = {
495
+ id: x.string,
496
+ src: x.string.isRequired,
497
+ path: x.string,
498
+ onInit: x.func,
499
+ onTimeout: x.func,
500
+ /**
501
+ * Optional host-styled renderer for the structurally-unsupported embed
502
+ * state (legacy app on a cross-site origin), `(entry) => ReactNode`. Falls
503
+ * back to a minimal built-in placeholder.
504
+ */
505
+ renderUnsupported: x.func,
506
+ /**
507
+ * Optional host-styled renderer for the handshake-timeout failure state
508
+ * (the app is not embeddable / could not load), `() => ReactNode`. Falls
509
+ * back to a minimal centered message.
510
+ */
511
+ renderTimeout: x.func
238
512
  };
239
- Y.propTypes = {
240
- id: T.string,
241
- src: T.string.isRequired,
242
- path: T.string,
243
- onInit: T.func,
244
- onTimeout: T.func,
245
- skipManifestCheck: T.bool
513
+ const ge = W.div`
514
+ position: fixed;
515
+ inset: 0;
516
+ background: rgba(0, 0, 0, 0.45);
517
+ display: flex;
518
+ align-items: center;
519
+ justify-content: center;
520
+ z-index: 10000;
521
+ `, pe = W.div`
522
+ background: #fff;
523
+ border-radius: 8px;
524
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
525
+ padding: 24px;
526
+ width: 480px;
527
+ max-width: calc(100vw - 32px);
528
+ font-family: sans-serif;
529
+ color: #222;
530
+ `, he = W.div`
531
+ display: flex;
532
+ align-items: center;
533
+ justify-content: space-between;
534
+ padding: 10px 0;
535
+ gap: 16px;
536
+ `, be = W.button`
537
+ background: #16a500;
538
+ color: #fff;
539
+ border: none;
540
+ border-radius: 6px;
541
+ padding: 9px 18px;
542
+ font-size: 14px;
543
+ cursor: pointer;
544
+ white-space: nowrap;
545
+ `, Ee = W.p`
546
+ color: #b3261e;
547
+ font-size: 13px;
548
+ margin: 4px 0 0;
549
+ `, Te = () => {
550
+ const { pending: n, authorize: o } = ne();
551
+ return n.length === 0 ? null : /* @__PURE__ */ f.createElement(ge, null, /* @__PURE__ */ f.createElement(pe, null, /* @__PURE__ */ f.createElement("h3", { style: { margin: "0 0 8px" } }, "Authorization Required"), /* @__PURE__ */ f.createElement("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#555" } }, "The following apps need you to sign in and authorize them before they can load."), n.map((r) => /* @__PURE__ */ f.createElement("div", { key: r.origin }, /* @__PURE__ */ f.createElement(he, null, /* @__PURE__ */ f.createElement("div", null, /* @__PURE__ */ f.createElement("div", { style: { fontWeight: 600 } }, r.name || r.origin), r.name && /* @__PURE__ */ f.createElement("div", { style: { fontSize: 12, color: "#888" } }, r.origin)), /* @__PURE__ */ f.createElement(be, { onClick: () => o(r) }, "Authorize")), r.popupBlocked && /* @__PURE__ */ f.createElement(Ee, null, "The sign-in window was blocked. Allow popups for this site, then try again.")))));
246
552
  };
247
553
  export {
248
- Y as MMEmbeddableZone,
249
- W as MMEmbeddableZoneContext,
250
- K as MMEmbeddableZoneProvider,
251
- G as getAppInfo,
252
- J as testIsEmbeddable,
253
- P as useEmbeddedEffect
554
+ D as EmbeddedAuthorizationContext,
555
+ Te as EmbeddedAuthorizationPrompt,
556
+ me as MMEmbeddableZone,
557
+ H as MMEmbeddableZoneContext,
558
+ oe as MMEmbeddableZoneProvider,
559
+ ee as isCrossSite,
560
+ te as popupAuthorizationLauncher,
561
+ ne as useEmbeddedAuthorizations,
562
+ se as useEmbeddedCredential,
563
+ _ as useEmbeddedEffect,
564
+ re as useEmbeddedOriginEpoch,
565
+ ie as useEmbeddedUnsupported
254
566
  };
@@ -1,6 +1,61 @@
1
- (function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a["mm-react-embeddable"]={},a.React,a.PropTypes,a.styled))})(this,(function(a,e,C,W){"use strict";const q=e.createContext(null),v=({children:r})=>{const[u,f]=e.useState({}),[c,M]=e.useState({}),i=e.useRef({}),m=e.useRef({}),b=e.useRef({}),L=e.useCallback((n,s)=>{var t;return!!((t=b.current[n])!=null&&t.has(s))},[]),y=e.useCallback((n,s,t)=>{f(o=>({...o,[n]:{origin:s,frameRef:t}}))},[]),S=e.useCallback(n=>{f(s=>{const t={...s};return delete t[n],t}),M(s=>{const t={...s};return delete t[n],t}),delete b.current[n]},[]);e.useEffect(()=>{const n=(t=[],o)=>{t.forEach(d=>d(o))},s=t=>{var F,h,w,g,Z;if(!((F=t==null?void 0:t.data)!=null&&F.instanceId))return;const{instanceId:o,type:d}=t.data,l=i.current;if(d==="response"){const{callbackId:T,response:_,error:G}=t.data,z=m.current[T];z&&(z(_,G),delete m.current[T]);return}if(d==="mark-registered"){const{requestType:T}=t.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(T);return}d==="ready"&&M(T=>({...T,[o]:!0})),n((h=l[o])==null?void 0:h[d],t.data),n((w=l["*"])==null?void 0:w[d],t.data),n((g=l[o])==null?void 0:g["*"],t.data),n((Z=l["*"])==null?void 0:Z["*"],t.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[u]);const E=e.useCallback((n,s,t)=>{var d,l;const o=u[n];if(!o){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}(l=(d=o==null?void 0:o.frameRef)==null?void 0:d.current)!=null&&l.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...t,instanceId:n},o.origin)},[u]),p=e.useRef(0),x=e.useCallback(()=>`${Date.now()}-${++p.current}`,[]),k=e.useCallback(async(n,s,t={})=>new Promise((o,d)=>{const l=x(),F=(h,w)=>{delete m.current[l],w?d(w):o(h)};m.current[l]=F,E(n,"request",{callbackId:l,requestType:s,data:t})}),[E]),O=e.useCallback((n,s)=>{E(n,"load-options",s)},[E]),$=e.useCallback((n,s)=>{E(n,"validate",s)},[E]),j=e.useMemo(()=>({registerFrame:y,unregisterFrame:S,sendMessage:E,sendRequest:k,loadOptions:O,validate:$,hasHandler:L,readyFrames:c,addListener:(n,s,t)=>(i.current[n]||(i.current[n]={}),i.current[n][s]||(i.current[n][s]=[]),i.current[n][s].push(t),()=>{i.current[n][s]=i.current[n][s].filter(o=>o!==t)})}),[y,S,E,k,O,$,L,c]);return e.createElement(q.Provider,{value:j},r)},U={},A=async r=>{try{const u=new URL(r).origin;if(U[u]!==void 0)return U[u];const c=await(await fetch(`${u}/mm-app-manifest.json`)).json();if(!c.version)throw new Error("Invalid manifest");return U[u]=c,c}catch{}return U[origin]=!1,!1},P=async r=>!!await A(r),I=(r,u,f)=>{const c=e.useContext(q);if(c===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const M=e.useRef(f);e.useEffect(()=>{M.current=f},[f]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const i=u.substring(4);return c.readyFrames[r]&&c.sendMessage(r,"subscribe-key",{keyChord:i}),c.addListener(r,`key-pressed:${i}`,(...b)=>M.current(...b))}return c.addListener(r,u,(...i)=>M.current(...i))}},[c,r,u])};v.propTypes={children:C.node.isRequired};const B=W.default||W,D=1e4,K=B.iframe`
1
+ (function(g,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(g=typeof globalThis!="undefined"?globalThis:g||self,e(g["mm-react-embeddable"]={},g.React,g.PropTypes,g.styled))})(this,(function(g,e,k,j){"use strict";const _=e.createContext(null),W=e.createContext({pending:[],authorize:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ne=2e4,A=r=>{try{return new URL(r).origin}catch{return null}},H=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(".")},P=(r,u)=>{try{const s=new URL(r),f=new URL(u);return s.protocol!==f.protocol?!0:H(s.hostname)!==H(f.hostname)}catch{return!0}},K=(r,{onBlocked:u,onClosed:s})=>{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),s())},1e3);return()=>clearInterval(b)},V=({children:r,launcher:u})=>{const s=e.useContext(_),[f,b]=e.useState({}),[w,h]=e.useState({}),[C,U]=e.useState({}),[Z,M]=e.useState({}),F=e.useRef(C);F.current=C;const E=e.useRef(null),x=e.useRef({}),$=e.useRef({}),z=e.useCallback(n=>{const t=$.current[n];if(!t)return;const i=a=>a[n]?{...a,[n]:{...a[n],name:t}}:a;b(i),M(i)},[]),y=e.useCallback((n,t)=>{const i=A(n==null?void 0:n.authUrl);i&&(M(a=>a[i]?a:{...a,[i]:{origin:i,reason:t,name:null}}),z(i))},[z]),T=e.useCallback((n,{v2:t=!1}={})=>{const i=A(n==null?void 0:n.authUrl);i&&(t&&F.current[i]||(b(a=>a[i]?a:{...a,[i]:{origin:i,authUrl:n.authUrl,silentUrl:n.silentUrl||null,status:t&&n.silentUrl?"silent":"interactive",v2:t,name:null,popupBlocked:!1}}),z(i)))},[z]),L=e.useCallback(n=>{b(t=>{if(!t[n])return t;const i={...t};return delete i[n],i})},[]),o=e.useCallback(n=>{n&&(L(n),h(t=>({...t,[n]:(t[n]||0)+1})))},[L]),l=e.useCallback(n=>{b(t=>!t[n]||t[n].status==="interactive"?t:{...t,[n]:{...t[n],status:"interactive"}})},[]),c=e.useCallback(n=>{L(n.origin)},[L]),d=e.useCallback(n=>{const t=A(n==null?void 0:n.authUrl);if(t&&P(t,window.location.origin)){y(n,"cross-site-legacy");return}T(n)},[T,y]);e.useEffect(()=>{if(!s)return;const n=[s.addListener("*","init",t=>{t!=null&&t.origin&&t.name&&($.current[t.origin]=t.name,z(t.origin))}),s.addListener("*","authorize",d),s.addListener("*","login",d),s.addListener("*","credential-request",t=>T(t,{v2:!0})),s.addListener("*","authorized",t=>{t!=null&&t.accessToken||o(A(t==null?void 0:t.authUrl))})];return()=>n.forEach(t=>t())},[s,d,T,o,z]),e.useEffect(()=>{const n=t=>{const i=t==null?void 0:t.data;if(!i||i.type!=="authorized"&&i.type!=="authorize-failed")return;const a=A(i.authUrl);if(!(!a||t.origin!==a)){if(i.type==="authorized"&&i.accessToken){U(S=>({...S,[a]:{accessToken:i.accessToken}})),L(a);return}i.type==="authorize-failed"&&l(a)}};return window.addEventListener("message",n),()=>window.removeEventListener("message",n)},[L,l]),e.useEffect(()=>{const n=x.current;Object.values(f).forEach(t=>{t.status==="silent"&&!n[t.origin]&&(n[t.origin]=setTimeout(()=>{delete n[t.origin],l(t.origin)},ne))}),Object.keys(n).forEach(t=>{(!f[t]||f[t].status!=="silent")&&(clearTimeout(n[t]),delete n[t])})},[f,l]),e.useEffect(()=>()=>{E.current&&E.current(),Object.values(x.current).forEach(clearTimeout)},[]);const p=e.useCallback(n=>{E.current&&(E.current(),E.current=null);const t=u||K;E.current=t(n,{onBlocked:()=>{b(i=>i[n.origin]?{...i,[n.origin]:{...i[n.origin],popupBlocked:!0}}:i)},onClosed:()=>{if(n.v2){b(i=>!i[n.origin]||!i[n.origin].silentUrl?i:{...i,[n.origin]:{...i[n.origin],status:"silent"}});return}o(n.origin)}})},[u,o]),m={pending:Object.values(f).filter(n=>n.status==="interactive"),authorize:p,dismiss:c,originEpochs:w,credentials:C,unsupported:Z},O=Object.values(f).filter(n=>n.status==="silent"&&n.silentUrl);return e.createElement(W.Provider,{value:m},r,O.map(n=>e.createElement("iframe",{key:`mm-silent-auth-${n.origin}`,src:n.silentUrl,title:`MachineMetrics silent authorization (${n.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};V.propTypes={children:k.node,launcher:k.func};const G=()=>e.useContext(W),J=r=>{const{originEpochs:u}=e.useContext(W),s=A(r);return s&&u[s]||0},Q=r=>{const{credentials:u}=e.useContext(W),s=A(r);return s&&u[s]||null},X=r=>{const{unsupported:u}=e.useContext(W),s=A(r);return s&&u[s]||null},Y=({children:r,authorizationLauncher:u})=>{const[s,f]=e.useState({}),[b,w]=e.useState({}),h=e.useRef({}),C=e.useRef({}),U=e.useRef({}),Z=e.useCallback((o,l)=>{var c;return!!((c=U.current[o])!=null&&c.has(l))},[]),M=e.useCallback((o,l,c)=>{f(d=>({...d,[o]:{origin:l,frameRef:c}}))},[]),F=e.useCallback(o=>{f(l=>{const c={...l};return delete c[o],c}),w(l=>{const c={...l};return delete c[o],c}),delete U.current[o]},[]);e.useEffect(()=>{const o=(c=[],d)=>{c.forEach(p=>p(d))},l=c=>{var O,n,t,i,a;if(!((O=c==null?void 0:c.data)!=null&&O.instanceId))return;const{instanceId:d,type:p}=c.data,m=h.current;if(p==="response"){const{callbackId:S,response:v,error:B}=c.data,I=C.current[S];I&&(I(v,B),delete C.current[S]);return}if(p==="mark-registered"){const{requestType:S}=c.data;U.current[d]||(U.current[d]=new Set),U.current[d].add(S);return}p==="ready"&&w(S=>({...S,[d]:!0})),o((n=m[d])==null?void 0:n[p],c.data),o((t=m["*"])==null?void 0:t[p],c.data),o((i=m[d])==null?void 0:i["*"],c.data),o((a=m["*"])==null?void 0:a["*"],c.data)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[s]);const E=e.useCallback((o,l,c)=>{var p,m;const d=s[o];if(!d){console.warn(`Origin not set for id: ${o}. Unable to send message.`);return}(m=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&m.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:l,...c,instanceId:o},d.origin)},[s]),x=e.useRef(0),$=e.useCallback(()=>`${Date.now()}-${++x.current}`,[]),z=e.useCallback(async(o,l,c={})=>new Promise((d,p)=>{const m=$(),O=(n,t)=>{delete C.current[m],t?p(t):d(n)};C.current[m]=O,E(o,"request",{callbackId:m,requestType:l,data:c})}),[E]),y=e.useCallback((o,l)=>{E(o,"load-options",l)},[E]),T=e.useCallback((o,l)=>{E(o,"validate",l)},[E]),L=e.useMemo(()=>({registerFrame:M,unregisterFrame:F,sendMessage:E,sendRequest:z,loadOptions:y,validate:T,hasHandler:Z,readyFrames:b,addListener:(o,l,c)=>(h.current[o]||(h.current[o]={}),h.current[o][l]||(h.current[o][l]=[]),h.current[o][l].push(c),()=>{h.current[o][l]=h.current[o][l].filter(d=>d!==c)})}),[M,F,E,z,y,T,Z,b]);return e.createElement(_.Provider,{value:L},e.createElement(V,{launcher:u},r))},q=(r,u,s)=>{const f=e.useContext(_);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const b=e.useRef(s);e.useEffect(()=>{b.current=s},[s]),e.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const w=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:w}),f.addListener(r,`key-pressed:${w}`,(...C)=>b.current(...C))}return f.addListener(r,u,(...w)=>b.current(...w))}},[f,r,u])};Y.propTypes={children:k.node.isRequired,authorizationLauncher:k.func};const D=j.default||j,te=1e4,re="credentials",N=(r,u)=>`${r}/mm-embedded-interop?id=${u}&origin=${window.location.origin}&caps=${re}`,se=D.iframe`
2
2
  width: 100%;
3
3
  height: 100%;
4
4
  border: none;
5
5
  visibility: ${r=>r.$isReady?"visible":"hidden"};
6
- `,H=({id:r,src:u,path:f,onInit:c=()=>{},onTimeout:M,context:i={},params:m={},skipManifestCheck:b=!1,...L})=>{if("isConfiguring"in L)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in i)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in i)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const y=e.useRef(),[S,E]=e.useState(),[p,x]=e.useState(0),{registerFrame:k,unregisterFrame:O,sendMessage:$}=e.useContext(q),[j,n]=e.useState(!0),[s,t]=e.useState(),o=e.useRef(),d=e.useRef(M),l=e.useRef(c),F=e.useRef(!1);e.useEffect(()=>{d.current=M},[M]),e.useEffect(()=>{l.current=c},[c]),e.useEffect(()=>{p&&$(r,"set-context",{context:{...i,colorMode:m.colorMode,isFullScreen:m.isFullScreen}})},[i,m.colorMode,m.isFullScreen,r,p]),e.useEffect(()=>{p&&($(r,"set-params",{params:m}),$(r,"set-configuring",{isConfiguring:m.isConfiguring}))},[m,r,p]),e.useEffect(()=>{f!==void 0&&t((f==null?void 0:f.indexOf("/"))===0?f:`/${f}`)},[f]),e.useEffect(()=>{s===void 0||!p||$(r,"navigate",{path:s})},[s,p,r,$]),e.useEffect(()=>{if(!(!u||!r||!y)){if(b){const g=new URL(u);n(!0),k(r,g.origin,y),l.current(),E(`${g.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}else(async()=>{const g=await P(u);if(n(g),g){const Z=new URL(u);k(r,Z.origin,y),l.current(),E(`${Z.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`)}})();return()=>{O(r)}}},[u,r,k,y,b]),e.useEffect(()=>{if(!(!b||!S||F.current))return o.current=setTimeout(()=>{d.current&&d.current()},D),()=>clearTimeout(o.current)},[S,b]);const h=e.useCallback(()=>{F.current=!0,clearTimeout(o.current)},[]);I(r,"init",h),I(r,"authorize",h),I(r,"login",h),I(r,"ready",()=>{h(),x(g=>g+1)});const w=e.useRef();return I(r,"heartbeat",()=>{w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{if(y.current){const g=new URL(u);y.current.src=`${g.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]),!b&&!j?null:e.createElement(K,{$isReady:p,ref:y,src:S,...L})};H.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,skipManifestCheck:C.bool},a.MMEmbeddableZone=H,a.MMEmbeddableZoneContext=q,a.MMEmbeddableZoneProvider=v,a.getAppInfo=A,a.testIsEmbeddable=P,a.useEmbeddedEffect=I,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
6
+ `,ie=D.div`
7
+ width: 100%;
8
+ height: 100%;
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: center;
12
+ justify-content: center;
13
+ gap: 6px;
14
+ padding: 16px;
15
+ box-sizing: border-box;
16
+ text-align: center;
17
+ color: #555;
18
+ font-size: 14px;
19
+ `,R=({entry:r})=>e.createElement(ie,null,e.createElement("div",{style:{fontWeight:600}},r&&(r.name||r.origin)||"This app"," can’t be embedded here"),e.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));R.propTypes={entry:k.shape({origin:k.string,name:k.string,reason:k.string})};const oe=D.div`
20
+ height: 100%;
21
+ display: flex;
22
+ flex: 1;
23
+ align-items: center;
24
+ justify-content: center;
25
+ `,ue=()=>e.createElement(oe,null,e.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ee=({id:r,src:u,path:s,onInit:f=()=>{},onTimeout:b,context:w={},params:h={},renderUnsupported:C,renderTimeout:U,...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 M=e.useRef(),[F,E]=e.useState(),[x,$]=e.useState(0),[z,y]=e.useState(!1),[T,L]=e.useState(!1),o=J(u),l=Q(u),c=X(u);e.useEffect(()=>{o>0&&$(0)},[o]);const{registerFrame:d,unregisterFrame:p,sendMessage:m}=e.useContext(_),[O,n]=e.useState(),t=e.useRef(),i=e.useRef(b),a=e.useRef(f),S=e.useRef(!1);e.useEffect(()=>{i.current=b},[b]),e.useEffect(()=>{a.current=f},[f]),e.useEffect(()=>{x&&m(r,"set-context",{context:{...w,colorMode:h.colorMode,isFullScreen:h.isFullScreen}})},[w,h.colorMode,h.isFullScreen,r,x]),e.useEffect(()=>{x&&(m(r,"set-params",{params:h}),m(r,"set-configuring",{isConfiguring:h.isConfiguring}))},[h,r,x]),e.useEffect(()=>{s!==void 0&&n((s==null?void 0:s.indexOf("/"))===0?s:`/${s}`)},[s]),e.useEffect(()=>{O===void 0||!x||m(r,"navigate",{path:O})},[O,x,r,m]),e.useEffect(()=>{if(!u||!r||!M)return;const I=new URL(u);return d(r,I.origin,M),a.current(),E(N(I.origin,r)),()=>{p(r)}},[u,r,d,M]),e.useEffect(()=>{if(!(!F||S.current))return t.current=setTimeout(()=>{y(!0),i.current&&i.current()},te),()=>clearTimeout(t.current)},[F]);const v=e.useCallback(()=>{S.current=!0,clearTimeout(t.current),y(!1)},[]);q(r,"init",v),q(r,"authorize",v),q(r,"login",v),q(r,"credential-request",()=>{v(),L(!0)}),e.useEffect(()=>{!T||!l||m(r,"credential",{accessToken:l.accessToken})},[T,l,r,m]),q(r,"ready",()=>{v(),$(I=>I+1)});const B=e.useRef();return q(r,"heartbeat",()=>{B.current&&clearTimeout(B.current),B.current=setTimeout(()=>{if(M.current){const I=new URL(u);M.current.src=N(I.origin,r)}},6e3)}),e.useEffect(()=>()=>{B.current&&clearTimeout(B.current)},[]),c?C?C(c):e.createElement(R,{entry:c}):z&&!x?U?U():e.createElement(ue,null):e.createElement(se,{key:`auth-epoch-${o}`,$isReady:x,ref:M,src:F,...Z})};ee.propTypes={id:k.string,src:k.string.isRequired,path:k.string,onInit:k.func,onTimeout:k.func,renderUnsupported:k.func,renderTimeout:k.func};const ce=j.div`
26
+ position: fixed;
27
+ inset: 0;
28
+ background: rgba(0, 0, 0, 0.45);
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ z-index: 10000;
33
+ `,le=j.div`
34
+ background: #fff;
35
+ border-radius: 8px;
36
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
37
+ padding: 24px;
38
+ width: 480px;
39
+ max-width: calc(100vw - 32px);
40
+ font-family: sans-serif;
41
+ color: #222;
42
+ `,de=j.div`
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: space-between;
46
+ padding: 10px 0;
47
+ gap: 16px;
48
+ `,fe=j.button`
49
+ background: #16a500;
50
+ color: #fff;
51
+ border: none;
52
+ border-radius: 6px;
53
+ padding: 9px 18px;
54
+ font-size: 14px;
55
+ cursor: pointer;
56
+ white-space: nowrap;
57
+ `,ae=j.p`
58
+ color: #b3261e;
59
+ font-size: 13px;
60
+ margin: 4px 0 0;
61
+ `,me=()=>{const{pending:r,authorize:u}=G();return r.length===0?null:e.createElement(ce,null,e.createElement(le,null,e.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),e.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(s=>e.createElement("div",{key:s.origin},e.createElement(de,null,e.createElement("div",null,e.createElement("div",{style:{fontWeight:600}},s.name||s.origin),s.name&&e.createElement("div",{style:{fontSize:12,color:"#888"}},s.origin)),e.createElement(fe,{onClick:()=>u(s)},"Authorize")),s.popupBlocked&&e.createElement(ae,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};g.EmbeddedAuthorizationContext=W,g.EmbeddedAuthorizationPrompt=me,g.MMEmbeddableZone=ee,g.MMEmbeddableZoneContext=_,g.MMEmbeddableZoneProvider=Y,g.isCrossSite=P,g.popupAuthorizationLauncher=K,g.useEmbeddedAuthorizations=G,g.useEmbeddedCredential=Q,g.useEmbeddedEffect=q,g.useEmbeddedOriginEpoch=J,g.useEmbeddedUnsupported=X,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": "1.3.1",
3
+ "version": "1.4.0-1",
4
4
  "license": "MIT",
5
5
  "module": "dist/mm-react-embeddable.es.js",
6
6
  "main": "dist/mm-react-embeddable.cjs.js",
@@ -20,7 +20,9 @@
20
20
  "build": "vite build",
21
21
  "start": "npm install --omit=peer && npm link && vite build --watch",
22
22
  "test": "vitest run",
23
- "test:watch": "vitest"
23
+ "test:watch": "vitest",
24
+ "prepare": "node scripts/install-hooks.mjs",
25
+ "check:version": "node scripts/check-version.mjs"
24
26
  },
25
27
  "files": [
26
28
  "dist"
@@ -42,4 +44,4 @@
42
44
  "vite": "^7.2.2",
43
45
  "vitest": "^4.0.10"
44
46
  }
45
- }
47
+ }