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