@start-base/start-ui/Tooltip/index.js

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

"use strict";var e=require("react"),t=require("@floating-ui/core"),l=require("@floating-ui/dom"),r=require("@floating-ui/react"),n=require("clsx");function o(e){return e&&e.__esModule?e:{default:e}}var u=o(e),a=o(n);var i="SUI-FloatingArrow-module-arrow-8vgzo",c="SUI-FloatingArrow-module-top-pK86K",s="SUI-FloatingArrow-module-bottom-SSlO1",d="SUI-FloatingArrow-module-left-UiHRj",m="SUI-FloatingArrow-module-right-As3oX",f=e.forwardRef((({placement:e="bottom",x:t,y:l},r)=>{let n={};switch(e){case"top":n={bottom:(null!=l?l:0)-5,left:null!=t?t:0};break;case"top-end":n={bottom:(null!=l?l:0)-5,left:(null!=t?t:0)+10};break;case"top-start":n={bottom:(null!=l?l:0)-5,left:(null!=t?t:0)-10};break;case"bottom":n={top:(null!=l?l:0)-5,left:null!=t?t:0};break;case"bottom-start":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)-10};break;case"bottom-end":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)+10};break;case"left":n={top:null!=l?l:0,right:(null!=t?t:0)-5};break;case"left-start":n={top:(null!=l?l:0)-5,right:(null!=t?t:0)-5};break;case"left-end":n={top:(null!=l?l:0)+5,right:(null!=t?t:0)-5};break;case"right":n={top:null!=l?l:0,left:(null!=t?t:0)-5};break;case"right-start":n={top:(null!=l?l:0)-5,left:(null!=t?t:0)-5};break;case"right-end":n={top:(null!=l?l:0)+5,left:(null!=t?t:0)-5}}return u.default.createElement("div",{ref:r,className:a.default(i,{[c]:["top","top-end","top-start"].includes(e),[s]:["bottom","bottom-end","bottom-start"].includes(e),[d]:["left","left-end","left-start"].includes(e),[m]:["right","right-end","right-start"].includes(e)}),style:n})}));f.displayName="FloatingArrow";var p=f,v="SUI-Tooltip-module-tooltip-TqUld",g="SUI-Tooltip-module-visible-FppbQ",b="SUI-Tooltip-module-hidden-wgWX0",w="SUI-Tooltip-module-animate-4dzjJ",h=e.forwardRef((({text:n,open:o=!1,placement:i="top",trigger:c="hover",className:s,spacing:d=0,hideArrow:m=!0,openDelay:f=!1,closeDelay:h=!0,clickToClose:k=!1,children:E},y)=>{var T,S;const[U,F]=e.useState(o),[x,R]=e.useState(!1),I=e.useRef(null),A=e.useRef(null),L=e.useRef(null);let C=[];m||(C=[t.arrow({element:null==L?void 0:L.current})]);const{x:q,y:N,strategy:D,refs:j,middlewareData:z}=r.useFloating({placement:i,whileElementsMounted:l.autoUpdate,middleware:[t.offset(4+d),r.shift({padding:4}),r.flip({padding:4}),...C]}),K=e.useCallback((()=>{I.current&&clearTimeout(I.current),A.current&&clearTimeout(A.current);let e=0;"boolean"==typeof f?e=300:"number"==typeof f&&(e=f),R(!1),A.current=window.setTimeout((()=>{F(!0)}),e)}),[f]),M=e.useCallback((()=>{I.current&&clearTimeout(I.current),A.current&&clearTimeout(A.current),R(!0),I.current=window.setTimeout((()=>{F(!1),R(!1)}),h?200:0)}),[h]),W=e.useCallback((()=>{"hover"===c&&k&&M(),"click"===c&&(U?M():K())}),[c,k,M,U,K]),X=e.useCallback((()=>{"hover"===c&&K()}),[K,c]),_=e.useCallback((()=>{"hover"===c&&M()}),[M,c]),H=e.useCallback((()=>{M()}),[M]);e.useEffect((()=>{var e;const t=null==(e=null==j?void 0:j.domReference)?void 0:e.current;if(t)return t.addEventListener("click",W),t.addEventListener("mouseenter",X),t.addEventListener("mouseleave",_),function(){t.removeEventListener("click",W),t.removeEventListener("mouseenter",X),t.removeEventListener("mouseleave",_)}}),[j,W,X,_]),function({ref:t,handler:l,withoutRef:r}){e.useEffect((()=>{function e(e){(null==t?void 0:t.current)&&!(null==t?void 0:t.current.contains(e.target))&&((null==r?void 0:r.current)&&((null==r?void 0:r.current)===e.currentTarget||(null==r?void 0:r.current.contains(e.target)))||l())}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[l,t,r])}({ref:null==j?void 0:j.domReference,handler:H});const J=u.default.createElement("div",{ref:j.setFloating,style:{position:D,top:null!=N?N:0,left:null!=q?q:0,width:"max-content",maxWidth:"calc(100svw - 8px)"},className:a.default(v,{[g]:U,[b]:!U,[w]:x},s&&{[s]:!0})},!m&&u.default.createElement(p,{placement:i,ref:L,x:null==(T=null==z?void 0:z.arrow)?void 0:T.x,y:null==(S=null==z?void 0:z.arrow)?void 0:S.y}),n);return u.default.createElement(u.default.Fragment,null,e.cloneElement(E,{ref:e=>{j.setReference(e),"function"==typeof y?y(e):y&&(y.current=e)}}),u.default.createElement(r.FloatingPortal,null,J))}));h.displayName="Tooltip";var k=h;module.exports=k;