@clerk/clerk-js
Version:
Clerk JS library
1 lines • 3.92 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["378"],{5692:function(e,t,o){o.r(t),o.d(t,{ImpersonationFab:()=>w});var i=o(9109),n=o(3799),r=o(9144),s=o(5878),a=o(1576),l=o(4204),c=o(7348),d=o(4264),p=o(4174),m=o(1217);let u=({width:e,height:t,...o})=>{let{sx:n,...r}=o;return(0,i.tZ)(l.Col,{elementDescriptor:l.descriptors.impersonationFabIconContainer,center:!0,sx:[o=>({width:e,height:t,backgroundColor:o.colors.$danger500,borderRadius:o.radii.$circle}),n],...r,children:(0,i.tZ)(l.Icon,{elementDescriptor:l.descriptors.impersonationFabIcon,icon:p.bA,sx:e=>({color:e.colors.$white}),size:"lg"})})},h=({title:e,signOutText:t})=>{let{session:o}=(0,n.kP)(),{user:r}=(0,n.aF)(),{signOut:s}=(0,n.cL)(),{otherSessions:c}=(0,d.j)({user:r}),{navigateAfterSignOut:p,navigateAfterMultiSessionSingleSignOutUrl:m}=(0,a.useSignOutContext)();return(0,i.BX)(l.Col,{sx:e=>({width:"100%",paddingLeft:e.sizes.$4,paddingRight:e.sizes.$6,whiteSpace:"nowrap"}),children:[(0,i.tZ)(l.Text,{colorScheme:"secondary",elementDescriptor:l.descriptors.impersonationFabTitle,variant:"buttonLarge",truncate:!0,localizationKey:e}),(0,i.tZ)(l.Link,{variant:"buttonLarge",elementDescriptor:l.descriptors.impersonationFabActionLink,sx:e=>({alignSelf:"flex-start",color:e.colors.$primary500,":hover":{cursor:"pointer"}}),localizationKey:t,onClick:()=>0===c.length?s(p):s(m,{sessionId:o.id})})]})},f=()=>{let{session:e}=(0,n.kP)(),{t}=(0,l.useLocalizations)(),{parsedInternalTheme:o}=(0,l.useAppearance)(),a=(0,r.useRef)(null),d=e?.actor,p=o.sizes.$16,f="--cl-impersonation-fab-top",w="--cl-impersonation-fab-right",x=()=>{let e=a.current;if(!e)return;let t=window.innerWidth-e.offsetLeft-e.offsetWidth,o=window.innerHeight-e.offsetTop-e.offsetHeight;[e.offsetLeft,t,e.offsetTop,o].some(e=>e<0)&&(document.documentElement.style.setProperty(w,"23px"),document.documentElement.style.setProperty(f,"109px"))},$=r.useCallback(e=>{e.stopPropagation(),e.preventDefault();let t=a.current;if(!t)return;let o=`${window.innerWidth-t.offsetLeft-t.offsetWidth-e.movementX}px`;document.documentElement.style.setProperty(w,o),document.documentElement.style.setProperty(f,`${t.offsetTop- -e.movementY}px`)},[]);if((0,r.useEffect)(()=>(window.addEventListener("resize",x),()=>{window.removeEventListener("resize",x)}),[]),!d||!e.user)return null;let g=(0,l.localizationKeys)("impersonationFab.title",{identifier:(0,s.Pp)(e.user)||(0,s.xC)(e.user)}),b=t(g).length;return(0,i.tZ)(c.h,{children:(0,i.BX)(l.Flex,{ref:a,elementDescriptor:l.descriptors.impersonationFab,onPointerDown:()=>{window.addEventListener("pointermove",$),window.addEventListener("pointerup",()=>{window.removeEventListener("pointermove",$),x()},{once:!0})},align:"center",sx:e=>({touchAction:"none",position:"fixed",overflow:"hidden",top:`var(${f}, 109px)`,right:`var(${w}, 23px)`,zIndex:e.zIndices.$fab,boxShadow:e.shadows.$fabShadow,borderRadius:e.radii.$halfHeight,backgroundColor:e.colors.$white,fontFamily:e.fonts.$main,":hover":{cursor:"grab"},":hover #cl-impersonationText":{transition:`max-width ${e.transitionDuration.$slowest} ease, opacity ${e.transitionDuration.$slower} ease ${e.transitionDuration.$slowest}`,maxWidth:`min(calc(50vw - ${p} - 2 * 23px), ${b}ch)`,[m.mqu.md]:{maxWidth:`min(calc(100vw - ${p} - 2 * 23px), ${b}ch)`},opacity:1},":hover #cl-impersonationEye":{transform:"rotate(-180deg)"}}),children:[(0,i.tZ)(u,{id:"cl-impersonationEye",width:p,height:p,sx:e=>({transition:`transform ${e.transitionDuration.$slowest} ease`})}),(0,i.tZ)(l.Flex,{id:"cl-impersonationText",sx:e=>({transition:`max-width ${e.transitionDuration.$slowest} ease, opacity ${e.transitionDuration.$fast} ease`,maxWidth:"0px",opacity:0}),children:(0,i.tZ)(h,{title:g,signOutText:(0,l.localizationKeys)("impersonationFab.action__signOut")})})]})})},w=(0,a.withCoreUserGuard)(()=>(0,i.tZ)(m.InternalThemeProvider,{children:(0,i.tZ)(f,{})}))}}]);