@infinityfx/fluid/dist/components/display/tooltip.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as t,Fragment as e,jsx as n}from"react/jsx-runtime";import{combineClasses as r,combineRefs as i}from"../../core/utils.js";import{useId as o,useRef as a,useState as s,useEffect as c,isValidElement as l,cloneElement as d}from"react";import{createPortal as u}from"react-dom";import{createStyles as f}from"../../core/style.js";const m=f("tooltip",{".anchor":{position:"absolute",pointerEvents:"none"},'.anchor[data-position="top"]':{bottom:"calc(100% + var(--f-spacing-sml))",left:"50%"},'.anchor[data-position="left"]':{right:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="right"]':{left:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="bottom"]':{top:"calc(100% + var(--f-spacing-sml))",left:"50%"},".tooltip":{position:"fixed",left:0,top:0,zIndex:999,backgroundColor:"var(--f-clr-fg-200)",color:"var(--f-clr-text-100)",fontSize:"var(--f-font-size-xsm)",fontWeight:600,textAlign:"center",padding:".3em .5em",borderRadius:"var(--f-radius-sml)",pointerEvents:"none",transition:"opacity .2s, translate .2s"},'.tooltip[aria-hidden="true"]':{opacity:0,translate:"0px 4px"}});function p({children:f,cc:p={},content:g,position:h="auto",visibility:v="interact",delay:b=.3,...x}){const w=r(m,p),y=o(),E=a(null),A=a(null),L=a(null),F=a(void 0),C=a(!1),[W,$]=s(!1),[j,k]=s(h),[z,B]=s("100vw"),R="auto"===h?j:h;function q(t,e=0){if(clearTimeout(F.current),null!==t){if(L.current){let{left:t,top:e,right:n,bottom:r,width:i}=L.current.getBoundingClientRect();n=window.innerWidth-n,r=window.innerHeight-r;const o="auto"!==h?h:{[t]:"left",[e]:"top",[n]:"right",[r]:"bottom"}[Math.max(t,e,n,r)];let a=t+i/2;switch(o){case"left":a=t;break;case"right":a=n;break;default:a=2*Math.min(window.innerWidth-a,a)}B(`calc(${a}px - var(--f-spacing-sml) * 2)`),k(o)}if(!t||"never"===v)return C.current=!1,$("always"===v);F.current=setTimeout((()=>{$(!0)}),1e3*e)}}let I;function M(){if(E.current&&A.current){const{x:t,y:e}=E.current.getBoundingClientRect(),n={top:"-50%, -100%",left:"-100%, -50%",right:"0%, -50%",bottom:"-50%, 0%"}[R];A.current.style.transform=`translate(${t}px, ${e}px) translate(${n})`}I=requestAnimationFrame(M)}return c((()=>{const t=L.current,e=new AbortController,n=e.signal;if(!t)return;cancelAnimationFrame(I),I=requestAnimationFrame(M),window.addEventListener("touchstart",(e=>{e.target===t||t.contains(e.target)?(C.current=!0,q(!0,b+.05)):q(!1)}),{signal:n});const r=t=>{C.current||t instanceof FocusEvent&&t.target instanceof Element&&!t.target.matches(":focus-visible")||q(!0,b)};return t.addEventListener("mouseenter",r,{signal:n}),t.addEventListener("focus",r,{signal:n}),t.addEventListener("mouseleave",(()=>q(!1)),{signal:n}),t.addEventListener("blur",(()=>q(!1)),{signal:n}),t.addEventListener("touchend",(()=>q(null)),{signal:n}),()=>{cancelAnimationFrame(I),e.abort()}}),[v,R,b]),c((()=>q("always"===v)),[v]),f=Array.isArray(f)?f[0]:f,l(f)?t(e,{children:[d(f,{...x,"aria-describedby":y,ref:i(L,x.ref,f.props.ref)}),L.current&&u(n("div",{ref:E,className:w.anchor,"data-position":R}),L.current),L.current&&u(n("div",{ref:A,id:y,role:"tooltip",className:w.tooltip,"aria-hidden":!W,style:{maxWidth:z},children:g}),document.getElementById("__fluid"))]}):f}export{p as default};
//# sourceMappingURL=tooltip.js.map