@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
106 lines (101 loc) • 8.23 kB
JavaScript
'use client';
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react/jsx-runtime"),L=require("../../../theme/context.cjs"),f=require("@emotion/react"),Y=require("@emotion/styled"),i=require("react"),I=require("react-dom"),P=o=>o&&o.__esModule?o:{default:o},X=P(Y),E=P(i),F=["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],M=o=>F.includes(o)?o:"top",N=f.keyframes`
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
`,B=f.keyframes`
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.9);
}
`,D=(o,t,n,s)=>{if(!t)return{};const x=M(o),e={position:"absolute",zIndex:1600},a=8,r=Math.min(320,window.innerWidth-a*2);switch(x){case"top":e.bottom=`${window.innerHeight-t.top+n}px`,e.left=`${t.left+t.width/2}px`,e.transform=`translateX(-50%) translateX(${s}px)`,e.maxWidth=`${r}px`;break;case"top-start":e.bottom=`${window.innerHeight-t.top+n}px`,e.left=`${Math.max(a,t.left+s)}px`,e.maxWidth=`${r}px`;break;case"top-end":e.bottom=`${window.innerHeight-t.top+n}px`,e.right=`${Math.max(a,window.innerWidth-t.right-s)}px`,e.maxWidth=`${r}px`;break;case"bottom":e.top=`${t.bottom+n}px`,e.left=`${t.left+t.width/2}px`,e.transform=`translateX(-50%) translateX(${s}px)`,e.maxWidth=`${r}px`;break;case"bottom-start":e.top=`${t.bottom+n}px`,e.left=`${Math.max(a,t.left+s)}px`,e.maxWidth=`${r}px`;break;case"bottom-end":e.top=`${t.bottom+n}px`,e.right=`${Math.max(a,window.innerWidth-t.right-s)}px`,e.maxWidth=`${r}px`;break;case"left":e.right=`${window.innerWidth-t.left+n}px`,e.top=`${t.top+t.height/2}px`,e.transform=`translateY(-50%) translateY(${s}px)`,e.maxWidth=`${r}px`;break;case"left-start":e.right=`${window.innerWidth-t.left+n}px`,e.top=`${Math.max(a,t.top+s)}px`,e.maxWidth=`${r}px`;break;case"left-end":e.right=`${window.innerWidth-t.left+n}px`,e.bottom=`${Math.max(a,window.innerHeight-t.bottom-s)}px`,e.maxWidth=`${r}px`;break;case"right":e.left=`${t.right+n}px`,e.top=`${t.top+t.height/2}px`,e.transform=`translateY(-50%) translateY(${s}px)`,e.maxWidth=`${r}px`;break;case"right-start":e.left=`${t.right+n}px`,e.top=`${Math.max(a,t.top+s)}px`,e.maxWidth=`${r}px`;break;case"right-end":e.left=`${t.right+n}px`,e.bottom=`${Math.max(a,window.innerHeight-t.bottom-s)}px`,e.maxWidth=`${r}px`;break;default:e.bottom=`${window.innerHeight-t.top+n}px`,e.left=`${t.left+t.width/2}px`,e.transform=`translateX(-50%) translateX(${s}px)`,e.maxWidth=`${r}px`}return e},V=o=>{const t=M(o),n=6;switch(t){case"top":case"top-start":case"top-end":return f.css`
&::after {
content: '';
position: absolute;
top: 100%;
left: ${t==="top"?"50%":t==="top-start"?"12px":"auto"};
right: ${t==="top-end"?"12px":"auto"};
transform: ${t==="top"?"translateX(-50%)":"none"};
width: 0;
height: 0;
border-left: ${n}px solid transparent;
border-right: ${n}px solid transparent;
border-top: ${n}px solid currentColor;
}
`;case"bottom":case"bottom-start":case"bottom-end":return f.css`
&::after {
content: '';
position: absolute;
bottom: 100%;
left: ${t==="bottom"?"50%":t==="bottom-start"?"12px":"auto"};
right: ${t==="bottom-end"?"12px":"auto"};
transform: ${t==="bottom"?"translateX(-50%)":"none"};
width: 0;
height: 0;
border-left: ${n}px solid transparent;
border-right: ${n}px solid transparent;
border-bottom: ${n}px solid currentColor;
}
`;case"left":case"left-start":case"left-end":return f.css`
&::after {
content: '';
position: absolute;
left: 100%;
top: ${t==="left"?"50%":t==="left-start"?"12px":"auto"};
bottom: ${t==="left-end"?"12px":"auto"};
transform: ${t==="left"?"translateY(-50%)":"none"};
width: 0;
height: 0;
border-top: ${n}px solid transparent;
border-bottom: ${n}px solid transparent;
border-left: ${n}px solid currentColor;
}
`;case"right":case"right-start":case"right-end":return f.css`
&::after {
content: '';
position: absolute;
right: 100%;
top: ${t==="right"?"50%":t==="right-start"?"12px":"auto"};
bottom: ${t==="right-end"?"12px":"auto"};
transform: ${t==="right"?"translateY(-50%)":"none"};
width: 0;
height: 0;
border-top: ${n}px solid transparent;
border-bottom: ${n}px solid transparent;
border-right: ${n}px solid currentColor;
}
`;default:return f.css``}},G=X.default.div`
background-color: ${o=>o.theme.colors.neutral[800]};
color: ${o=>o.theme.colors.neutral[50]};
border-radius: ${o=>o.theme.borderRadius.md};
padding: ${o=>o.theme.spacing[2]} ${o=>o.theme.spacing[3]};
font-size: ${o=>o.theme.fontSizes.sm};
line-height: ${o=>o.theme.lineHeights.tight};
max-width: 320px;
word-wrap: break-word;
box-shadow: ${o=>o.theme.shadows.md};
animation: ${o=>o.isClosing?B:N}
${o=>o.theme.transitions.fast};
/* Arrow styles */
${o=>o.showArrow&&V(o.placement)}
/* Ensure arrow uses the same color as background */
&::after {
color: ${o=>o.theme.colors.neutral[800]};
}
/* Custom CSS prop */
${o=>o.css}
`,J=X.default.div`
display: inline-block;
/* Custom CSS prop */
${o=>o.css}
`,S=E.default.createContext(null),W=({children:o,isOpen:t,defaultOpen:n=!1,onOpenChange:s,placement:x="top",delay:e=700,closeDelay:a=300,showArrow:r=!0,offset:p=8,crossOffset:T=0,isDisabled:d=!1,className:C,css:u,portalContainer:m,...h})=>{const[l,w]=i.useState(n),y=i.useRef(null),$=t!==void 0,b=$?t:l,c=M(x),j=typeof e=="number"&&e>=0?e:700,q=typeof a=="number"&&a>=0?a:300,g=i.useCallback(v=>{d||($||w(v),s?.(v))},[$,s,d]);i.useEffect(()=>{if(!b||d)return;const v=A=>{A.key==="Escape"&&g(!1)};return document.addEventListener("keydown",v),()=>document.removeEventListener("keydown",v)},[b,g,d]);const z={isOpen:b,onOpenChange:g,triggerRef:y,placement:c,showArrow:r,offset:p,crossOffset:T,delay:j,closeDelay:q,isDisabled:d};return k.jsx(S.Provider,{value:z,children:k.jsx("div",{className:C,...h,children:o})})},_=({children:o,className:t,css:n,"aria-label":s,...x})=>{const{theme:e}=L.useTheme(),a=E.default.useContext(S);if(!a)throw new Error("TooltipTrigger must be used within a Tooltip");const{isOpen:r,onOpenChange:p,triggerRef:T,delay:d,closeDelay:C,isDisabled:u}=a,m=i.useRef(),h=i.useRef(),l=()=>{m.current&&clearTimeout(m.current),h.current&&clearTimeout(h.current)},w=()=>{u||(l(),m.current=setTimeout(()=>{p(!0)},d))},y=()=>{u||(l(),h.current=setTimeout(()=>{p(!1)},C))},$=()=>{u||(l(),p(!0))},b=()=>{u||(l(),p(!1))};return i.useEffect(()=>()=>l(),[]),k.jsx(J,{ref:T,theme:e,className:t,css:n,onMouseEnter:w,onMouseLeave:y,onFocus:$,onBlur:b,"aria-describedby":r?"tooltip-content":void 0,"aria-label":s,...x,children:o})},H=({children:o,className:t,css:n,...s})=>{const{theme:x}=L.useTheme(),e=E.default.useContext(S);if(!e)throw new Error("TooltipContent must be used within a Tooltip");const{isOpen:a,triggerRef:r,placement:p,showArrow:T,offset:d,crossOffset:C,isDisabled:u}=e,[m,h]=i.useState(null),[l,w]=i.useState(!1);if(i.useEffect(()=>{if(a&&r.current&&!u){const c=()=>{h(r.current.getBoundingClientRect())};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}}},[a,r,u]),i.useEffect(()=>{if(!a&&m){w(!0);const c=setTimeout(()=>{w(!1),h(null)},150);return()=>clearTimeout(c)}},[a,m]),!a&&!l||u)return null;const y=D(p,m,d,C),$=document.body,b=k.jsx(G,{id:"tooltip-content",theme:x,"data-tooltip-content":!0,className:t,css:n,placement:p,showArrow:T,isClosing:l,style:y,role:"tooltip",...s,children:o});return I.createPortal(b,$)};W.Trigger=_;W.Content=H;W.displayName="Tooltip";_.displayName="TooltipTrigger";H.displayName="TooltipContent";exports.Tooltip=W;
//# sourceMappingURL=tooltip.cjs.map