@bothub-chat/ui/dist/components/tooltip/index.js

Bothub UI Components

import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as n,useState as r,useCallback as c,useEffect as o}from"react";import{useTransition as a}from"@react-spring/web";import{Portal as i}from"../portal/index.js";import{TooltipStyled as s,TooltipBlock as l,TooltipLabel as p,TooltipMarkdown as d,TooltipLabelBold as h,TooltipCode as m}from"./styled.js";export{TooltipColumn,TooltipImage}from"./styled.js";import{TooltipArrow as u}from"./arrow/index.js";import{TooltipProvider as g}from"./context.js";export{TooltipConsumer,TooltipContext,useTooltip}from"./context.js";const f={enter:150,exit:150,leaveDisabledHiddenAnimation:0},b=({className:b,variant:w="primary",placement:v="top",placementX:x=0,placementY:k=-5,align:y="auto",inverted:T=!1,label:j,contentWidth:$,disabled:E=!1,disableHiddenAnimation:C=!1,markdown:L=!1,children:M,hideOnScroll:O=!0})=>{const Y=n(null),[A,B]=r(),[H,N]=r([0,0]),R=!j||E,W=c((()=>{const e=Y.current;if(null===e)return[0,0];const t=A;if(!(t instanceof Element))return[0,0];const{width:n,height:r}=e.getBoundingClientRect(),c=t.getBoundingClientRect(),{width:o}=c,a=c.left+window.scrollX,i=c.top+window.scrollY,s=c.bottom+window.scrollY;let l=0;switch(v){case"top-left":switch(y){case"left":case"auto":l=a;break;case"center":l=a-n/2;break;case"right":l=a-n}break;case"top":switch(y){case"left":l=a+o/2;break;case"center":case"auto":l=a+o/2-n/2;break;case"right":l=a+o/2-n}break;case"top-right":switch(y){case"left":l=a+o;break;case"center":l=a+o-n/2;break;case"right":case"auto":l=a+o-n}break;case"center-right":l=a+o-18;break;case"center-left":l=a-n+18}let p=0;switch(v){case"top-left":case"top":case"top-right":p=T?s+6:i-r-6;break;case"center-right":case"center-left":p=(i+s-r+10)/2;break;default:p=s+6}return[l,p]}),[v,y,A]),X=c((()=>{A&&N(W())}),[A,W]),D=c((()=>{B(null)}),[]),I=[`${H[1]}px`];0!==k&&I.push(`calc(var(--bothub-scale, 1) * ${k}px)`);const P=[`${H[0]}px`];switch(v){case"top-left":switch(y){case"center":P.push("14.5px");break;case"right":P.push("29px")}break;case"top":switch(y){case"left":P.push("-14.5px");break;case"right":P.push("14.5px")}break;case"top-right":switch(y){case"left":P.push("-29px");break;case"center":P.push("-14.5px")}}0!==x&&P.push(`calc(var(--bothub-scale, 1) * ${x}px)`);const S=a(!!A,{from:{opacity:0,y:-6},enter:{opacity:1,y:0},leave:{opacity:0,y:-6,transition:{duration:C?0:.3}},config:{duration:f.enter}})(((n,r)=>r&&e(s,{$placement:v,$align:y,$inverted:T,ref:Y,className:b,style:Object.assign(Object.assign({},n),{top:I.length<=1?I[0]:`calc(${I.join(" + ")})`,left:P.length<=1?P[0]:`calc(${P.join(" + ")})`}),children:[T&&t(u,{placement:v,variant:w,inverted:T}),e(l,{$contentWidth:$,$variant:w,children:["string"==typeof j&&!L&&e(p,{children:[j.slice(0,272),j.length>272&&"..."]}),"string"==typeof j&&L&&t(d,{components:{p:({children:e})=>t(p,{component:"p",children:e}),b:({children:e})=>t(h,{children:e}),strong:({children:e})=>t(h,{component:"strong",children:e}),code:({children:e})=>t(m,{children:e})},children:j}),"string"!=typeof j&&j]}),!T&&t(u,{placement:v,variant:w,inverted:T})]})));o((()=>{X()}),[A,X]);const q=c((e=>{!R&&e.currentTarget instanceof Element&&(B(e.currentTarget),X())}),[R,X]);return o((()=>{const e=()=>{D()},t=()=>{D()};return window.addEventListener("mouseleave",e),window.addEventListener("scroll",t,O),()=>{window.removeEventListener("mouseleave",e),window.removeEventListener("scroll",t,O)}}),[D]),e(g,{handleTooltipMouseEnter:e=>{!R&&e.currentTarget instanceof Element&&B(e.currentTarget)},handleTooltipMouseLeave:()=>{B(null)},handleTooltipPointerMove:q,children:[t(i,{children:S}),M]})};export{b as Tooltip,f as TooltipAnimationDuration,l as TooltipBlock,m as TooltipCode,p as TooltipLabel,h as TooltipLabelBold,d as TooltipMarkdown,g as TooltipProvider,s as TooltipStyled};