react-tooltip/dist/react-tooltip.min.cjs

react tooltip component

/*
* React Tooltip
* {@link https://github.com/ReactTooltip/react-tooltip}
* @copyright ReactTooltip Team
* @license MIT
*/
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("@floating-ui/dom");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e),l=o(t);const s="react-tooltip-core-styles",c="react-tooltip-base-styles";function a({css:e,id:t=c,type:r="base",ref:o}){var n,l;if("core"===r&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("core"!==r&&"undefined"!=typeof process&&(null===(l=null===process||void 0===process?void 0:process.env)||void 0===l?void 0:l.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===r&&(t=s),o||(o={});const{insertAt:a}=o;if(!e||"undefined"==typeof document||document.getElementById(t))return;const i=document.head||document.getElementsByTagName("head")[0],u=document.createElement("style");u.id=t,u.type="text/css","top"===a&&i.firstChild?i.insertBefore(u,i.firstChild):i.appendChild(u),u.styleSheet?u.styleSheet.cssText=e:u.appendChild(document.createTextNode(e))}const i=(e,t,r)=>{let o=null;return function(...n){const l=()=>{o=null,r||e.apply(this,n)};r&&!o&&(e.apply(this,n),o=setTimeout(l,t)),r||(o&&clearTimeout(o),o=setTimeout(l,t))}},u="DEFAULT_TOOLTIP_ID",d={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},p={getTooltipData:()=>d},f=e.createContext(p);function v(t=u){return e.useContext(f).getTooltipData(t)}const m="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,y=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return!1;const t=getComputedStyle(e);return["overflow","overflow-x","overflow-y"].some((e=>{const r=t.getPropertyValue(e);return"auto"===r||"scroll"===r}))},h=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(y(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},w=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:n="top",offset:l=10,strategy:s="absolute",middlewares:c=[r.offset(Number(l)),r.flip(),r.shift({padding:5})],border:a})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};const i=c;return o?(i.push(r.arrow({element:o,padding:5})),r.computePosition(e,t,{placement:n,strategy:s,middleware:i}).then((({x:e,y:t,placement:r,middlewareData:o})=>{var n,l;const s={left:`${e}px`,top:`${t}px`,border:a},{x:c,y:i}=null!==(n=o.arrow)&&void 0!==n?n:{x:0,y:0},u=null!==(l={top:"bottom",right:"left",bottom:"top",left:"right"}[r.split("-")[0]])&&void 0!==l?l:"bottom",d=a&&{top:{borderBottom:a,borderRight:a},right:{borderBottom:a,borderLeft:a},bottom:{borderTop:a,borderLeft:a},left:{borderTop:a,borderRight:a}}[r.split("-")[0]];let p=0;if(a){const e=`${a}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1}return{tooltipStyles:s,tooltipArrowStyles:{left:null!=c?`${c}px`:"",top:null!=i?`${i}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:r}}))):r.computePosition(e,t,{placement:"bottom",strategy:s,middleware:i}).then((({x:e,y:t,placement:r})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:r})))};var S="core-styles-module_tooltip__3vRRp",E="core-styles-module_fixed__pcSol",b="core-styles-module_arrow__cvMwQ",_="core-styles-module_noArrow__xock6",g="core-styles-module_clickable__ZuTTB",A="core-styles-module_show__Nt9eE",T={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const R=({id:t,className:r,classNameArrow:o,variant:s="dark",anchorId:c,anchorSelect:a,place:u="top",offset:d=10,events:p=["hover"],openOnClick:f=!1,positionStrategy:y="absolute",middlewares:R,wrapper:O,delayShow:L=0,delayHide:x=0,float:k=!1,hidden:N=!1,noArrow:$=!1,clickable:C=!1,closeOnEsc:I=!1,closeOnScroll:B=!1,closeOnResize:q=!1,style:D,position:j,afterShow:H,afterHide:P,content:M,contentWrapperRef:W,isOpen:z,setIsOpen:K,activeAnchor:U,setActiveAnchor:X,border:Y,opacity:F})=>{const V=e.useRef(null),Z=e.useRef(null),G=e.useRef(null),J=e.useRef(null),[Q,ee]=e.useState(u),[te,re]=e.useState({}),[oe,ne]=e.useState({}),[le,se]=e.useState(!1),[ce,ae]=e.useState(!1),ie=e.useRef(!1),ue=e.useRef(null),{anchorRefs:de,setActiveAnchor:pe}=v(t),fe=e.useRef(!1),[ve,me]=e.useState([]),ye=e.useRef(!1),he=f||p.includes("click");m((()=>(ye.current=!0,()=>{ye.current=!1})),[]),e.useEffect((()=>{if(!le){const e=setTimeout((()=>{ae(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[le]);const we=e=>{ye.current&&(e&&ae(!0),setTimeout((()=>{ye.current&&(null==K||K(e),void 0===z&&se(e))}),10))};e.useEffect((()=>{if(void 0===z)return()=>null;z&&ae(!0);const e=setTimeout((()=>{se(z)}),10);return()=>{clearTimeout(e)}}),[z]),e.useEffect((()=>{le!==ie.current&&(ie.current=le,le?null==H||H():null==P||P())}),[le]);const Se=(e=x)=>{J.current&&clearTimeout(J.current),J.current=setTimeout((()=>{fe.current||we(!1)}),e)},Ee=e=>{var t;if(!e)return;const r=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==r?void 0:r.isConnected))return X(null),void pe({current:null});L?(G.current&&clearTimeout(G.current),G.current=setTimeout((()=>{we(!0)}),L)):we(!0),X(r),pe({current:r}),J.current&&clearTimeout(J.current)},be=()=>{C?Se(x||100):x?Se():we(!1),G.current&&clearTimeout(G.current)},_e=({x:e,y:t})=>{w({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:V.current,tooltipArrowReference:Z.current,strategy:y,middlewares:R,border:Y}).then((e=>{Object.keys(e.tooltipStyles).length&&re(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&ne(e.tooltipArrowStyles),ee(e.place)}))},ge=e=>{if(!e)return;const t=e,r={x:t.clientX,y:t.clientY};_e(r),ue.current=r},Ae=e=>{Ee(e),x&&Se()},Te=e=>{var t;[document.querySelector(`[id='${c}']`),...ve].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=V.current)||void 0===t?void 0:t.contains(e.target))||(we(!1),G.current&&clearTimeout(G.current))},Re=i(Ee,50,!0),Oe=i(be,50,!0);e.useEffect((()=>{var e,t;const r=new Set(de);ve.forEach((e=>{r.add({current:e})}));const o=document.querySelector(`[id='${c}']`);o&&r.add({current:o});const n=()=>{we(!1)},l=h(U),s=h(V.current);B&&(window.addEventListener("scroll",n),null==l||l.addEventListener("scroll",n),null==s||s.addEventListener("scroll",n)),q&&window.addEventListener("resize",n);const a=e=>{"Escape"===e.key&&we(!1)};I&&window.addEventListener("keydown",a);const i=[];he?(window.addEventListener("click",Te),i.push({event:"click",listener:Ae})):(i.push({event:"mouseenter",listener:Re},{event:"mouseleave",listener:Oe},{event:"focus",listener:Re},{event:"blur",listener:Oe}),k&&i.push({event:"mousemove",listener:ge}));const u=()=>{fe.current=!0},d=()=>{fe.current=!1,be()};return C&&!he&&(null===(e=V.current)||void 0===e||e.addEventListener("mouseenter",u),null===(t=V.current)||void 0===t||t.addEventListener("mouseleave",d)),i.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.addEventListener(e,t)}))})),()=>{var e,t;B&&(window.removeEventListener("scroll",n),null==l||l.removeEventListener("scroll",n),null==s||s.removeEventListener("scroll",n)),q&&window.removeEventListener("resize",n),he&&window.removeEventListener("click",Te),I&&window.removeEventListener("keydown",a),C&&!he&&(null===(e=V.current)||void 0===e||e.removeEventListener("mouseenter",u),null===(t=V.current)||void 0===t||t.removeEventListener("mouseleave",d)),i.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.removeEventListener(e,t)}))}))}}),[ce,de,ve,I,p]),e.useEffect((()=>{let e=null!=a?a:"";!e&&t&&(e=`[data-tooltip-id='${t}']`);const r=new MutationObserver((r=>{const o=[];r.forEach((r=>{if("attributes"===r.type&&"data-tooltip-id"===r.attributeName){r.target.getAttribute("data-tooltip-id")===t&&o.push(r.target)}if("childList"===r.type&&(U&&[...r.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,U))&&(ae(!1),we(!1),X(null),G.current&&clearTimeout(G.current),J.current&&clearTimeout(J.current),!0)})),e))try{const t=[...r.addedNodes].filter((e=>1===e.nodeType));o.push(...t.filter((t=>t.matches(e)))),o.push(...t.flatMap((t=>[...t.querySelectorAll(e)])))}catch(e){}})),o.length&&me((e=>[...e,...o]))}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{r.disconnect()}}),[t,a,U]);const Le=()=>{j?_e(j):k?ue.current&&_e(ue.current):w({place:u,offset:d,elementReference:U,tooltipReference:V.current,tooltipArrowReference:Z.current,strategy:y,middlewares:R,border:Y}).then((e=>{ye.current&&(Object.keys(e.tooltipStyles).length&&re(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&ne(e.tooltipArrowStyles),ee(e.place))}))};e.useEffect((()=>{Le()}),[le,U,M,D,u,d,y,j]),e.useEffect((()=>{if(!(null==W?void 0:W.current))return()=>null;const e=new ResizeObserver((()=>{Le()}));return e.observe(W.current),()=>{e.disconnect()}}),[M,null==W?void 0:W.current]),e.useEffect((()=>{var e;const t=document.querySelector(`[id='${c}']`),r=[...ve,t];U&&r.includes(U)||X(null!==(e=ve[0])&&void 0!==e?e:t)}),[c,ve,U]),e.useEffect((()=>()=>{G.current&&clearTimeout(G.current),J.current&&clearTimeout(J.current)}),[]),e.useEffect((()=>{let e=a;if(!e&&t&&(e=`[data-tooltip-id='${t}']`),e)try{const t=Array.from(document.querySelectorAll(e));me(t)}catch(e){me([])}}),[t,a]);const xe=!N&&M&&le&&Object.keys(te).length>0;return ce?n.default.createElement(O,{id:t,role:"tooltip",className:l.default("react-tooltip",S,T.tooltip,T[s],r,`react-tooltip__place-${Q}`,{[A]:xe,[E]:"fixed"===y,[g]:C}),style:{...D,...te,opacity:void 0!==F&&xe?F:void 0},ref:V},M,n.default.createElement(O,{className:l.default("react-tooltip-arrow",b,T.arrow,o,{[_]:$}),style:oe,ref:Z})):null},O=({content:e})=>n.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});a({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9}.core-styles-module_tooltip__3vRRp{visibility:hidden;position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity 0.3s ease-out;will-change:opacity,visibility}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{visibility:visible;opacity:var(--rt-opacity)}`,type:"core"}),a({css:`
.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px;transform:rotate(45deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`}),exports.Tooltip=({id:t,anchorId:r,anchorSelect:o,content:l,html:s,render:c,className:a,classNameArrow:i,variant:u="dark",place:d="top",offset:p=10,wrapper:f="div",children:m=null,events:y=["hover"],openOnClick:h=!1,positionStrategy:w="absolute",middlewares:S,delayShow:E=0,delayHide:b=0,float:_=!1,hidden:g=!1,noArrow:A=!1,clickable:T=!1,closeOnEsc:L=!1,closeOnScroll:x=!1,closeOnResize:k=!1,style:N,position:$,isOpen:C,border:I,opacity:B,setIsOpen:q,afterShow:D,afterHide:j})=>{const[H,P]=e.useState(l),[M,W]=e.useState(s),[z,K]=e.useState(d),[U,X]=e.useState(u),[Y,F]=e.useState(p),[V,Z]=e.useState(E),[G,J]=e.useState(b),[Q,ee]=e.useState(_),[te,re]=e.useState(g),[oe,ne]=e.useState(f),[le,se]=e.useState(y),[ce,ae]=e.useState(w),[ie,ue]=e.useState(null),{anchorRefs:de,activeAnchor:pe}=v(t),fe=e=>null==e?void 0:e.getAttributeNames().reduce(((t,r)=>{var o;if(r.startsWith("data-tooltip-")){t[r.replace(/^data-tooltip-/,"")]=null!==(o=null==e?void 0:e.getAttribute(r))&&void 0!==o?o:null}return t}),{}),ve=e=>{const t={place:e=>{var t;K(null!==(t=e)&&void 0!==t?t:d)},content:e=>{P(null!=e?e:l)},html:e=>{W(null!=e?e:s)},variant:e=>{var t;X(null!==(t=e)&&void 0!==t?t:u)},offset:e=>{F(null===e?p:Number(e))},wrapper:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:f)},events:e=>{const t=null==e?void 0:e.split(" ");se(null!=t?t:y)},"position-strategy":e=>{var t;ae(null!==(t=e)&&void 0!==t?t:w)},"delay-show":e=>{Z(null===e?E:Number(e))},"delay-hide":e=>{J(null===e?b:Number(e))},float:e=>{ee(null===e?_:"true"===e)},hidden:e=>{re(null===e?g:"true"===e)}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,r])=>{var o;null===(o=t[e])||void 0===o||o.call(t,r)}))};e.useEffect((()=>{P(l)}),[l]),e.useEffect((()=>{W(s)}),[s]),e.useEffect((()=>{K(d)}),[d]),e.useEffect((()=>{X(u)}),[u]),e.useEffect((()=>{F(p)}),[p]),e.useEffect((()=>{Z(E)}),[E]),e.useEffect((()=>{J(b)}),[b]),e.useEffect((()=>{ee(_)}),[_]),e.useEffect((()=>{re(g)}),[g]),e.useEffect((()=>{ae(w)}),[w]),e.useEffect((()=>{var e;const n=new Set(de);let l=o;if(!l&&t&&(l=`[data-tooltip-id='${t}']`),l)try{document.querySelectorAll(l).forEach((e=>{n.add({current:e})}))}catch(e){console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`)}const s=document.querySelector(`[id='${r}']`);if(s&&n.add({current:s}),!n.size)return()=>null;const c=null!==(e=null!=ie?ie:s)&&void 0!==e?e:pe.current,a=new MutationObserver((e=>{e.forEach((e=>{var t;if(!c||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const r=fe(c);ve(r)}))})),i={attributes:!0,childList:!1,subtree:!1};if(c){const e=fe(c);ve(e),a.observe(c,i)}return()=>{a.disconnect()}}),[de,pe,ie,r,o]),e.useEffect((()=>{(null==N?void 0:N.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),I&&!CSS.supports("border",`${I}`)&&console.warn(`[react-tooltip] "${I}" is not a valid \`border\`.`),(null==N?void 0:N.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),B&&!CSS.supports("opacity",`${B}`)&&console.warn(`[react-tooltip] "${B}" is not a valid \`opacity\`.`)}),[]);let me=m;const ye=e.useRef(null);if(c){const e=c({content:null!=H?H:null,activeAnchor:ie});me=e?n.default.createElement("div",{ref:ye,className:"react-tooltip-content-wrapper"},e):null}else H&&(me=H);M&&(me=n.default.createElement(O,{content:M}));const he={id:t,anchorId:r,anchorSelect:o,className:a,classNameArrow:i,content:me,contentWrapperRef:ye,place:z,variant:U,offset:Y,wrapper:oe,events:le,openOnClick:h,positionStrategy:ce,middlewares:S,delayShow:V,delayHide:G,float:Q,hidden:te,noArrow:A,clickable:T,closeOnEsc:L,closeOnScroll:x,closeOnResize:k,style:N,position:$,isOpen:C,border:I,opacity:B,setIsOpen:q,afterShow:D,afterHide:j,activeAnchor:ie,setActiveAnchor:e=>ue(e)};return n.default.createElement(R,{...he})},exports.TooltipProvider=({children:t})=>{const[r,o]=e.useState({[u]:new Set}),[l,s]=e.useState({[u]:{current:null}}),c=(e,...t)=>{o((r=>{var o;const n=null!==(o=r[e])&&void 0!==o?o:new Set;return t.forEach((e=>n.add(e))),{...r,[e]:new Set(n)}}))},a=(e,...t)=>{o((r=>{const o=r[e];return o?(t.forEach((e=>o.delete(e))),{...r}):r}))},i=e.useCallback(((e=u)=>{var t,o;return{anchorRefs:null!==(t=r[e])&&void 0!==t?t:new Set,activeAnchor:null!==(o=l[e])&&void 0!==o?o:{current:null},attach:(...t)=>c(e,...t),detach:(...t)=>a(e,...t),setActiveAnchor:t=>((e,t)=>{s((r=>{var o;return(null===(o=r[e])||void 0===o?void 0:o.current)===t.current?r:{...r,[e]:t}}))})(e,t)}}),[r,l,c,a]),d=e.useMemo((()=>({getTooltipData:i})),[i]);return n.default.createElement(f.Provider,{value:d},t)},exports.TooltipWrapper=({tooltipId:t,children:r,className:o,place:s,content:c,html:a,variant:i,offset:u,wrapper:d,events:p,positionStrategy:f,delayShow:m,delayHide:y})=>{const{attach:h,detach:w}=v(t),S=e.useRef(null);return e.useEffect((()=>(h(S),()=>{w(S)})),[]),n.default.createElement("span",{ref:S,className:l.default("react-tooltip-wrapper",o),"data-tooltip-place":s,"data-tooltip-content":c,"data-tooltip-html":a,"data-tooltip-variant":i,"data-tooltip-offset":u,"data-tooltip-wrapper":d,"data-tooltip-events":p,"data-tooltip-position-strategy":f,"data-tooltip-delay-show":m,"data-tooltip-delay-hide":y},r)},exports.removeStyle=function({type:e="base",id:t=c}={}){"core"===e&&(t=s);const r=document.getElementById(t);null==r||r.remove()};