react-tooltip - npm Package Compare versions

Comparing version 5.13.1 to 5.13.2

dist/react-tooltip.umd.js

@@ -8,4 +8,2 @@
 */
-
-'use client';
 (function (global, factory) {
@@ -12,0 +10,0 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('@floating-ui/dom')) :

dist/react-tooltip.umd.min.js

@@ -7,3 +7,3 @@ /*
 */
-"use client";!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames"),require("@floating-ui/dom")):"function"==typeof define&&define.amd?define(["exports","react","classnames","@floating-ui/dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTooltip={},e.React,e.classNames,e.FloatingUIDOM)}(this,(function(e,t,o,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(t),a=l(o);function c(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}c(":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}");const s=(e,t,o)=>{let r=null;return function(...l){const n=()=>{r=null,o||e.apply(this,l)};o&&!r&&(e.apply(this,l),r=setTimeout(n,t)),o||(r&&clearTimeout(r),r=setTimeout(n,t))}},i="DEFAULT_TOOLTIP_ID",u={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},d={getTooltipData:()=>u},f=t.createContext(d);function p(e=i){return t.useContext(f).getTooltipData(e)}const v="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,m=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:n=10,strategy:a="absolute",middlewares:c=[r.offset(Number(n)),r.flip(),r.shift({padding:5})]})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=c;return o?(s.push(r.arrow({element:o,padding:5})),r.computePosition(e,t,{placement:l,strategy:a,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const a={left:`${e}px`,top:`${t}px`},{x:c,y:s}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0};return{tooltipStyles:a,tooltipArrowStyles:{left:null!=c?`${c}px`:"",top:null!=s?`${s}px`:"",right:"",bottom:"",[null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom"]:"-4px"},place:o}}))):r.computePosition(e,t,{placement:"bottom",strategy:a,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var h={tooltip:"styles-module_tooltip__mnnfp",fixed:"styles-module_fixed__7ciUi",arrow:"styles-module_arrow__K0L3T",noArrow:"styles-module_noArrow__T8y2L",clickable:"styles-module_clickable__Bv9o7",show:"styles-module_show__2NboJ",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"};c(".styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;left:0;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease-out;visibility:hidden;width:max-content;will-change:opacity,visibility}.styles-module_fixed__7ciUi{position:fixed}.styles-module_arrow__K0L3T{background:inherit;height:8px;position:absolute;transform:rotate(45deg);width:8px}.styles-module_noArrow__T8y2L{display:none}.styles-module_clickable__Bv9o7{pointer-events:auto}.styles-module_show__2NboJ{opacity:var(--rt-opacity);visibility:visible}.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)}");const y=({id:e,className:o,classNameArrow:r,variant:l="dark",anchorId:c,anchorSelect:i,place:u="top",offset:d=10,events:f=["hover"],openOnClick:y=!1,positionStrategy:w="absolute",middlewares:_,wrapper:S,delayShow:b=0,delayHide:g=0,float:E=!1,hidden:A=!1,noArrow:k=!1,clickable:T=!1,closeOnEsc:x=!1,style:R,position:N,afterShow:O,afterHide:L,content:C,contentWrapperRef:$,isOpen:j,setIsOpen:q,activeAnchor:I,setActiveAnchor:W})=>{const H=t.useRef(null),D=t.useRef(null),B=t.useRef(null),M=t.useRef(null),[K,P]=t.useState(u),[X,J]=t.useState({}),[U,z]=t.useState({}),[F,Z]=t.useState(!1),[Y,G]=t.useState(!1),Q=t.useRef(!1),V=t.useRef(null),{anchorRefs:ee,setActiveAnchor:te}=p(e),oe=t.useRef(!1),[re,le]=t.useState([]),ne=t.useRef(!1),ae=y||f.includes("click");v((()=>(ne.current=!0,()=>{ne.current=!1})),[]),t.useEffect((()=>{if(!F){const e=setTimeout((()=>{G(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[F]);const ce=e=>{ne.current&&(e&&G(!0),setTimeout((()=>{ne.current&&(null==q||q(e),void 0===j&&Z(e))}),10))};t.useEffect((()=>{if(void 0===j)return()=>null;j&&G(!0);const e=setTimeout((()=>{Z(j)}),10);return()=>{clearTimeout(e)}}),[j]),t.useEffect((()=>{F!==Q.current&&(Q.current=F,F?null==O||O():null==L||L())}),[F]);const se=(e=g)=>{M.current&&clearTimeout(M.current),M.current=setTimeout((()=>{oe.current||ce(!1)}),e)},ie=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return W(null),void te({current:null});b?(B.current&&clearTimeout(B.current),B.current=setTimeout((()=>{ce(!0)}),b)):ce(!0),W(o),te({current:o}),M.current&&clearTimeout(M.current)},ue=()=>{T?se(g||100):g?se():ce(!1),B.current&&clearTimeout(B.current)},de=({x:e,y:t})=>{m({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:H.current,tooltipArrowReference:D.current,strategy:w,middlewares:_}).then((e=>{Object.keys(e.tooltipStyles).length&&J(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&z(e.tooltipArrowStyles),P(e.place)}))},fe=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};de(o),V.current=o},pe=e=>{ie(e),g&&se()},ve=e=>{var t;[document.querySelector(`[id='${c}']`),...re].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=H.current)||void 0===t?void 0:t.contains(e.target))||ce(!1)},me=e=>{"Escape"===e.key&&ce(!1)},he=s(ie,50,!0),ye=s(ue,50,!0);t.useEffect((()=>{var e,t;const o=new Set(ee);re.forEach((e=>{o.add({current:e})}));const r=document.querySelector(`[id='${c}']`);r&&o.add({current:r}),x&&window.addEventListener("keydown",me);const l=[];ae?(window.addEventListener("click",ve),l.push({event:"click",listener:pe})):(l.push({event:"mouseenter",listener:he},{event:"mouseleave",listener:ye},{event:"focus",listener:he},{event:"blur",listener:ye}),E&&l.push({event:"mousemove",listener:fe}));const n=()=>{oe.current=!0},a=()=>{oe.current=!1,ue()};return T&&!ae&&(null===(e=H.current)||void 0===e||e.addEventListener("mouseenter",n),null===(t=H.current)||void 0===t||t.addEventListener("mouseleave",a)),l.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t)}))})),()=>{var e,t;ae&&window.removeEventListener("click",ve),x&&window.removeEventListener("keydown",me),T&&!ae&&(null===(e=H.current)||void 0===e||e.removeEventListener("mouseenter",n),null===(t=H.current)||void 0===t||t.removeEventListener("mouseleave",a)),l.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t)}))}))}}),[Y,ee,re,x,f]),t.useEffect((()=>{let t=null!=i?i:"";!t&&e&&(t=`[data-tooltip-id='${e}']`);const o=new MutationObserver((o=>{const r=[];o.forEach((o=>{if("attributes"===o.type&&"data-tooltip-id"===o.attributeName){o.target.getAttribute("data-tooltip-id")===e&&r.push(o.target)}if("childList"===o.type&&(I&&[...o.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,I))&&(G(!1),ce(!1),W(null),!0)})),t))try{const e=[...o.addedNodes].filter((e=>1===e.nodeType));r.push(...e.filter((e=>e.matches(t)))),r.push(...e.flatMap((e=>[...e.querySelectorAll(t)])))}catch(e){}})),r.length&&le((e=>[...e,...r]))}));return o.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{o.disconnect()}}),[e,i,I]);const we=()=>{N?de(N):E?V.current&&de(V.current):m({place:u,offset:d,elementReference:I,tooltipReference:H.current,tooltipArrowReference:D.current,strategy:w,middlewares:_}).then((e=>{ne.current&&(Object.keys(e.tooltipStyles).length&&J(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&z(e.tooltipArrowStyles),P(e.place))}))};t.useEffect((()=>{we()}),[F,I,C,R,u,d,w,N]),t.useEffect((()=>{if(!(null==$?void 0:$.current))return()=>null;const e=new ResizeObserver((()=>{we()}));return e.observe($.current),()=>{e.disconnect()}}),[C,null==$?void 0:$.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${c}']`),o=[...re,t];I&&o.includes(I)||W(null!==(e=re[0])&&void 0!==e?e:t)}),[c,re,I]),t.useEffect((()=>()=>{B.current&&clearTimeout(B.current),M.current&&clearTimeout(M.current)}),[]),t.useEffect((()=>{let t=i;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));le(e)}catch(e){le([])}}),[e,i]);const _e=!A&&C&&F&&Object.keys(X).length>0;return Y?n.default.createElement(S,{id:e,role:"tooltip",className:a.default("react-tooltip",h.tooltip,h[l],o,`react-tooltip__place-${K}`,{[h.show]:_e,[h.fixed]:"fixed"===w,[h.clickable]:T}),style:{...R,...X},ref:H},C,n.default.createElement(S,{className:a.default("react-tooltip-arrow",h.arrow,r,{[h.noArrow]:k}),style:U,ref:D})):null},w=({content:e})=>n.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});e.Tooltip=({id:e,anchorId:o,anchorSelect:r,content:l,html:a,render:c,className:s,classNameArrow:i,variant:u="dark",place:d="top",offset:f=10,wrapper:v="div",children:m=null,events:h=["hover"],openOnClick:_=!1,positionStrategy:S="absolute",middlewares:b,delayShow:g=0,delayHide:E=0,float:A=!1,hidden:k=!1,noArrow:T=!1,clickable:x=!1,closeOnEsc:R=!1,style:N,position:O,isOpen:L,setIsOpen:C,afterShow:$,afterHide:j})=>{const[q,I]=t.useState(l),[W,H]=t.useState(a),[D,B]=t.useState(d),[M,K]=t.useState(u),[P,X]=t.useState(f),[J,U]=t.useState(g),[z,F]=t.useState(E),[Z,Y]=t.useState(A),[G,Q]=t.useState(k),[V,ee]=t.useState(v),[te,oe]=t.useState(h),[re,le]=t.useState(S),[ne,ae]=t.useState(null),{anchorRefs:ce,activeAnchor:se}=p(e),ie=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null}return t}),{}),ue=e=>{const t={place:e=>{var t;B(null!==(t=e)&&void 0!==t?t:d)},content:e=>{I(null!=e?e:l)},html:e=>{H(null!=e?e:a)},variant:e=>{var t;K(null!==(t=e)&&void 0!==t?t:u)},offset:e=>{X(null===e?f:Number(e))},wrapper:e=>{var t;ee(null!==(t=e)&&void 0!==t?t:v)},events:e=>{const t=null==e?void 0:e.split(" ");oe(null!=t?t:h)},"position-strategy":e=>{var t;le(null!==(t=e)&&void 0!==t?t:S)},"delay-show":e=>{U(null===e?g:Number(e))},"delay-hide":e=>{F(null===e?E:Number(e))},float:e=>{Y(null===e?A:"true"===e)},hidden:e=>{Q(null===e?k:"true"===e)}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o)}))};t.useEffect((()=>{I(l)}),[l]),t.useEffect((()=>{H(a)}),[a]),t.useEffect((()=>{B(d)}),[d]),t.useEffect((()=>{K(u)}),[u]),t.useEffect((()=>{X(f)}),[f]),t.useEffect((()=>{U(g)}),[g]),t.useEffect((()=>{F(E)}),[E]),t.useEffect((()=>{Y(A)}),[A]),t.useEffect((()=>{Q(k)}),[k]),t.useEffect((()=>{le(S)}),[S]),t.useEffect((()=>{var t;const l=new Set(ce);let n=r;if(!n&&e&&(n=`[data-tooltip-id='${e}']`),n)try{document.querySelectorAll(n).forEach((e=>{l.add({current:e})}))}catch(e){console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`)}const a=document.querySelector(`[id='${o}']`);if(a&&l.add({current:a}),!l.size)return()=>null;const c=null!==(t=null!=ne?ne:a)&&void 0!==t?t:se.current,s=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 o=ie(c);ue(o)}))})),i={attributes:!0,childList:!1,subtree:!1};if(c){const e=ie(c);ue(e),s.observe(c,i)}return()=>{s.disconnect()}}),[ce,se,ne,o,r]);let de=m;const fe=t.useRef(null);if(c){const e=c({content:null!=q?q:null,activeAnchor:ne});de=e?n.default.createElement("div",{ref:fe,className:"react-tooltip-content-wrapper"},e):null}else q&&(de=q);W&&(de=n.default.createElement(w,{content:W}));const pe={id:e,anchorId:o,anchorSelect:r,className:s,classNameArrow:i,content:de,contentWrapperRef:fe,place:D,variant:M,offset:P,wrapper:V,events:te,openOnClick:_,positionStrategy:re,middlewares:b,delayShow:J,delayHide:z,float:Z,hidden:G,noArrow:T,clickable:x,closeOnEsc:R,style:N,position:O,isOpen:L,setIsOpen:C,afterShow:$,afterHide:j,activeAnchor:ne,setActiveAnchor:e=>ae(e)};return n.default.createElement(y,{...pe})},e.TooltipProvider=({children:e})=>{const[o,r]=t.useState({[i]:new Set}),[l,a]=t.useState({[i]:{current:null}}),c=(e,...t)=>{r((o=>{var r;const l=null!==(r=o[e])&&void 0!==r?r:new Set;return t.forEach((e=>l.add(e))),{...o,[e]:new Set(l)}}))},s=(e,...t)=>{r((o=>{const r=o[e];return r?(t.forEach((e=>r.delete(e))),{...o}):o}))},u=t.useCallback(((e=i)=>{var t,r;return{anchorRefs:null!==(t=o[e])&&void 0!==t?t:new Set,activeAnchor:null!==(r=l[e])&&void 0!==r?r:{current:null},attach:(...t)=>c(e,...t),detach:(...t)=>s(e,...t),setActiveAnchor:t=>((e,t)=>{a((o=>{var r;return(null===(r=o[e])||void 0===r?void 0:r.current)===t.current?o:{...o,[e]:t}}))})(e,t)}}),[o,l,c,s]),d=t.useMemo((()=>({getTooltipData:u})),[u]);return n.default.createElement(f.Provider,{value:d},e)},e.TooltipWrapper=({tooltipId:e,children:o,className:r,place:l,content:c,html:s,variant:i,offset:u,wrapper:d,events:f,positionStrategy:v,delayShow:m,delayHide:h})=>{const{attach:y,detach:w}=p(e),_=t.useRef(null);return t.useEffect((()=>(y(_),()=>{w(_)})),[]),n.default.createElement("span",{ref:_,className:a.default("react-tooltip-wrapper",r),"data-tooltip-place":l,"data-tooltip-content":c,"data-tooltip-html":s,"data-tooltip-variant":i,"data-tooltip-offset":u,"data-tooltip-wrapper":d,"data-tooltip-events":f,"data-tooltip-position-strategy":v,"data-tooltip-delay-show":m,"data-tooltip-delay-hide":h},o)},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames"),require("@floating-ui/dom")):"function"==typeof define&&define.amd?define(["exports","react","classnames","@floating-ui/dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTooltip={},e.React,e.classNames,e.FloatingUIDOM)}(this,(function(e,t,o,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(t),a=l(o);function c(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}c(":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}");const s=(e,t,o)=>{let r=null;return function(...l){const n=()=>{r=null,o||e.apply(this,l)};o&&!r&&(e.apply(this,l),r=setTimeout(n,t)),o||(r&&clearTimeout(r),r=setTimeout(n,t))}},i="DEFAULT_TOOLTIP_ID",u={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},d={getTooltipData:()=>u},f=t.createContext(d);function p(e=i){return t.useContext(f).getTooltipData(e)}const v="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,m=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:n=10,strategy:a="absolute",middlewares:c=[r.offset(Number(n)),r.flip(),r.shift({padding:5})]})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=c;return o?(s.push(r.arrow({element:o,padding:5})),r.computePosition(e,t,{placement:l,strategy:a,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const a={left:`${e}px`,top:`${t}px`},{x:c,y:s}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0};return{tooltipStyles:a,tooltipArrowStyles:{left:null!=c?`${c}px`:"",top:null!=s?`${s}px`:"",right:"",bottom:"",[null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom"]:"-4px"},place:o}}))):r.computePosition(e,t,{placement:"bottom",strategy:a,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var h={tooltip:"styles-module_tooltip__mnnfp",fixed:"styles-module_fixed__7ciUi",arrow:"styles-module_arrow__K0L3T",noArrow:"styles-module_noArrow__T8y2L",clickable:"styles-module_clickable__Bv9o7",show:"styles-module_show__2NboJ",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"};c(".styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;left:0;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease-out;visibility:hidden;width:max-content;will-change:opacity,visibility}.styles-module_fixed__7ciUi{position:fixed}.styles-module_arrow__K0L3T{background:inherit;height:8px;position:absolute;transform:rotate(45deg);width:8px}.styles-module_noArrow__T8y2L{display:none}.styles-module_clickable__Bv9o7{pointer-events:auto}.styles-module_show__2NboJ{opacity:var(--rt-opacity);visibility:visible}.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)}");const y=({id:e,className:o,classNameArrow:r,variant:l="dark",anchorId:c,anchorSelect:i,place:u="top",offset:d=10,events:f=["hover"],openOnClick:y=!1,positionStrategy:w="absolute",middlewares:_,wrapper:S,delayShow:b=0,delayHide:g=0,float:E=!1,hidden:A=!1,noArrow:k=!1,clickable:T=!1,closeOnEsc:x=!1,style:R,position:N,afterShow:O,afterHide:L,content:C,contentWrapperRef:$,isOpen:j,setIsOpen:q,activeAnchor:I,setActiveAnchor:W})=>{const H=t.useRef(null),D=t.useRef(null),B=t.useRef(null),M=t.useRef(null),[K,P]=t.useState(u),[X,J]=t.useState({}),[U,z]=t.useState({}),[F,Z]=t.useState(!1),[Y,G]=t.useState(!1),Q=t.useRef(!1),V=t.useRef(null),{anchorRefs:ee,setActiveAnchor:te}=p(e),oe=t.useRef(!1),[re,le]=t.useState([]),ne=t.useRef(!1),ae=y||f.includes("click");v((()=>(ne.current=!0,()=>{ne.current=!1})),[]),t.useEffect((()=>{if(!F){const e=setTimeout((()=>{G(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[F]);const ce=e=>{ne.current&&(e&&G(!0),setTimeout((()=>{ne.current&&(null==q||q(e),void 0===j&&Z(e))}),10))};t.useEffect((()=>{if(void 0===j)return()=>null;j&&G(!0);const e=setTimeout((()=>{Z(j)}),10);return()=>{clearTimeout(e)}}),[j]),t.useEffect((()=>{F!==Q.current&&(Q.current=F,F?null==O||O():null==L||L())}),[F]);const se=(e=g)=>{M.current&&clearTimeout(M.current),M.current=setTimeout((()=>{oe.current||ce(!1)}),e)},ie=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return W(null),void te({current:null});b?(B.current&&clearTimeout(B.current),B.current=setTimeout((()=>{ce(!0)}),b)):ce(!0),W(o),te({current:o}),M.current&&clearTimeout(M.current)},ue=()=>{T?se(g||100):g?se():ce(!1),B.current&&clearTimeout(B.current)},de=({x:e,y:t})=>{m({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:H.current,tooltipArrowReference:D.current,strategy:w,middlewares:_}).then((e=>{Object.keys(e.tooltipStyles).length&&J(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&z(e.tooltipArrowStyles),P(e.place)}))},fe=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};de(o),V.current=o},pe=e=>{ie(e),g&&se()},ve=e=>{var t;[document.querySelector(`[id='${c}']`),...re].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=H.current)||void 0===t?void 0:t.contains(e.target))||ce(!1)},me=e=>{"Escape"===e.key&&ce(!1)},he=s(ie,50,!0),ye=s(ue,50,!0);t.useEffect((()=>{var e,t;const o=new Set(ee);re.forEach((e=>{o.add({current:e})}));const r=document.querySelector(`[id='${c}']`);r&&o.add({current:r}),x&&window.addEventListener("keydown",me);const l=[];ae?(window.addEventListener("click",ve),l.push({event:"click",listener:pe})):(l.push({event:"mouseenter",listener:he},{event:"mouseleave",listener:ye},{event:"focus",listener:he},{event:"blur",listener:ye}),E&&l.push({event:"mousemove",listener:fe}));const n=()=>{oe.current=!0},a=()=>{oe.current=!1,ue()};return T&&!ae&&(null===(e=H.current)||void 0===e||e.addEventListener("mouseenter",n),null===(t=H.current)||void 0===t||t.addEventListener("mouseleave",a)),l.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t)}))})),()=>{var e,t;ae&&window.removeEventListener("click",ve),x&&window.removeEventListener("keydown",me),T&&!ae&&(null===(e=H.current)||void 0===e||e.removeEventListener("mouseenter",n),null===(t=H.current)||void 0===t||t.removeEventListener("mouseleave",a)),l.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t)}))}))}}),[Y,ee,re,x,f]),t.useEffect((()=>{let t=null!=i?i:"";!t&&e&&(t=`[data-tooltip-id='${e}']`);const o=new MutationObserver((o=>{const r=[];o.forEach((o=>{if("attributes"===o.type&&"data-tooltip-id"===o.attributeName){o.target.getAttribute("data-tooltip-id")===e&&r.push(o.target)}if("childList"===o.type&&(I&&[...o.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,I))&&(G(!1),ce(!1),W(null),!0)})),t))try{const e=[...o.addedNodes].filter((e=>1===e.nodeType));r.push(...e.filter((e=>e.matches(t)))),r.push(...e.flatMap((e=>[...e.querySelectorAll(t)])))}catch(e){}})),r.length&&le((e=>[...e,...r]))}));return o.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{o.disconnect()}}),[e,i,I]);const we=()=>{N?de(N):E?V.current&&de(V.current):m({place:u,offset:d,elementReference:I,tooltipReference:H.current,tooltipArrowReference:D.current,strategy:w,middlewares:_}).then((e=>{ne.current&&(Object.keys(e.tooltipStyles).length&&J(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&z(e.tooltipArrowStyles),P(e.place))}))};t.useEffect((()=>{we()}),[F,I,C,R,u,d,w,N]),t.useEffect((()=>{if(!(null==$?void 0:$.current))return()=>null;const e=new ResizeObserver((()=>{we()}));return e.observe($.current),()=>{e.disconnect()}}),[C,null==$?void 0:$.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${c}']`),o=[...re,t];I&&o.includes(I)||W(null!==(e=re[0])&&void 0!==e?e:t)}),[c,re,I]),t.useEffect((()=>()=>{B.current&&clearTimeout(B.current),M.current&&clearTimeout(M.current)}),[]),t.useEffect((()=>{let t=i;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));le(e)}catch(e){le([])}}),[e,i]);const _e=!A&&C&&F&&Object.keys(X).length>0;return Y?n.default.createElement(S,{id:e,role:"tooltip",className:a.default("react-tooltip",h.tooltip,h[l],o,`react-tooltip__place-${K}`,{[h.show]:_e,[h.fixed]:"fixed"===w,[h.clickable]:T}),style:{...R,...X},ref:H},C,n.default.createElement(S,{className:a.default("react-tooltip-arrow",h.arrow,r,{[h.noArrow]:k}),style:U,ref:D})):null},w=({content:e})=>n.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});e.Tooltip=({id:e,anchorId:o,anchorSelect:r,content:l,html:a,render:c,className:s,classNameArrow:i,variant:u="dark",place:d="top",offset:f=10,wrapper:v="div",children:m=null,events:h=["hover"],openOnClick:_=!1,positionStrategy:S="absolute",middlewares:b,delayShow:g=0,delayHide:E=0,float:A=!1,hidden:k=!1,noArrow:T=!1,clickable:x=!1,closeOnEsc:R=!1,style:N,position:O,isOpen:L,setIsOpen:C,afterShow:$,afterHide:j})=>{const[q,I]=t.useState(l),[W,H]=t.useState(a),[D,B]=t.useState(d),[M,K]=t.useState(u),[P,X]=t.useState(f),[J,U]=t.useState(g),[z,F]=t.useState(E),[Z,Y]=t.useState(A),[G,Q]=t.useState(k),[V,ee]=t.useState(v),[te,oe]=t.useState(h),[re,le]=t.useState(S),[ne,ae]=t.useState(null),{anchorRefs:ce,activeAnchor:se}=p(e),ie=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null}return t}),{}),ue=e=>{const t={place:e=>{var t;B(null!==(t=e)&&void 0!==t?t:d)},content:e=>{I(null!=e?e:l)},html:e=>{H(null!=e?e:a)},variant:e=>{var t;K(null!==(t=e)&&void 0!==t?t:u)},offset:e=>{X(null===e?f:Number(e))},wrapper:e=>{var t;ee(null!==(t=e)&&void 0!==t?t:v)},events:e=>{const t=null==e?void 0:e.split(" ");oe(null!=t?t:h)},"position-strategy":e=>{var t;le(null!==(t=e)&&void 0!==t?t:S)},"delay-show":e=>{U(null===e?g:Number(e))},"delay-hide":e=>{F(null===e?E:Number(e))},float:e=>{Y(null===e?A:"true"===e)},hidden:e=>{Q(null===e?k:"true"===e)}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o)}))};t.useEffect((()=>{I(l)}),[l]),t.useEffect((()=>{H(a)}),[a]),t.useEffect((()=>{B(d)}),[d]),t.useEffect((()=>{K(u)}),[u]),t.useEffect((()=>{X(f)}),[f]),t.useEffect((()=>{U(g)}),[g]),t.useEffect((()=>{F(E)}),[E]),t.useEffect((()=>{Y(A)}),[A]),t.useEffect((()=>{Q(k)}),[k]),t.useEffect((()=>{le(S)}),[S]),t.useEffect((()=>{var t;const l=new Set(ce);let n=r;if(!n&&e&&(n=`[data-tooltip-id='${e}']`),n)try{document.querySelectorAll(n).forEach((e=>{l.add({current:e})}))}catch(e){console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`)}const a=document.querySelector(`[id='${o}']`);if(a&&l.add({current:a}),!l.size)return()=>null;const c=null!==(t=null!=ne?ne:a)&&void 0!==t?t:se.current,s=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 o=ie(c);ue(o)}))})),i={attributes:!0,childList:!1,subtree:!1};if(c){const e=ie(c);ue(e),s.observe(c,i)}return()=>{s.disconnect()}}),[ce,se,ne,o,r]);let de=m;const fe=t.useRef(null);if(c){const e=c({content:null!=q?q:null,activeAnchor:ne});de=e?n.default.createElement("div",{ref:fe,className:"react-tooltip-content-wrapper"},e):null}else q&&(de=q);W&&(de=n.default.createElement(w,{content:W}));const pe={id:e,anchorId:o,anchorSelect:r,className:s,classNameArrow:i,content:de,contentWrapperRef:fe,place:D,variant:M,offset:P,wrapper:V,events:te,openOnClick:_,positionStrategy:re,middlewares:b,delayShow:J,delayHide:z,float:Z,hidden:G,noArrow:T,clickable:x,closeOnEsc:R,style:N,position:O,isOpen:L,setIsOpen:C,afterShow:$,afterHide:j,activeAnchor:ne,setActiveAnchor:e=>ae(e)};return n.default.createElement(y,{...pe})},e.TooltipProvider=({children:e})=>{const[o,r]=t.useState({[i]:new Set}),[l,a]=t.useState({[i]:{current:null}}),c=(e,...t)=>{r((o=>{var r;const l=null!==(r=o[e])&&void 0!==r?r:new Set;return t.forEach((e=>l.add(e))),{...o,[e]:new Set(l)}}))},s=(e,...t)=>{r((o=>{const r=o[e];return r?(t.forEach((e=>r.delete(e))),{...o}):o}))},u=t.useCallback(((e=i)=>{var t,r;return{anchorRefs:null!==(t=o[e])&&void 0!==t?t:new Set,activeAnchor:null!==(r=l[e])&&void 0!==r?r:{current:null},attach:(...t)=>c(e,...t),detach:(...t)=>s(e,...t),setActiveAnchor:t=>((e,t)=>{a((o=>{var r;return(null===(r=o[e])||void 0===r?void 0:r.current)===t.current?o:{...o,[e]:t}}))})(e,t)}}),[o,l,c,s]),d=t.useMemo((()=>({getTooltipData:u})),[u]);return n.default.createElement(f.Provider,{value:d},e)},e.TooltipWrapper=({tooltipId:e,children:o,className:r,place:l,content:c,html:s,variant:i,offset:u,wrapper:d,events:f,positionStrategy:v,delayShow:m,delayHide:h})=>{const{attach:y,detach:w}=p(e),_=t.useRef(null);return t.useEffect((()=>(y(_),()=>{w(_)})),[]),n.default.createElement("span",{ref:_,className:a.default("react-tooltip-wrapper",r),"data-tooltip-place":l,"data-tooltip-content":c,"data-tooltip-html":s,"data-tooltip-variant":i,"data-tooltip-offset":u,"data-tooltip-wrapper":d,"data-tooltip-events":f,"data-tooltip-position-strategy":v,"data-tooltip-delay-show":m,"data-tooltip-delay-hide":h},o)},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-tooltip.umd.min.js.map

package.json

 {
   "name": "react-tooltip",
-  "version": "5.13.1",
+  "version": "5.13.2",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -23,2 +23,8 @@ # react-tooltip
 
+---
+
+Why do we show ads on our docs?
+
+- ReactTooltip is an open source project, this is the way we found to be financed by the community.
+
 ## Demo
@@ -46,2 +52,4 @@
 
+---
+
 ## Installation
@@ -61,10 +69,2 @@
 
-> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
-> The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper.
-
-> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
-> In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
-
-### Using NPM package
-
 1 . Import the CSS file to set default styling.
@@ -110,55 +110,2 @@
 
-#### Using multiple anchor elements
-
-You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them.
-`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
-
-```jsx
-<a className="my-anchor-element" data-tooltip-content="Hello world!">
-  ◕‿‿◕
-</a>
-<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
-  ◕‿‿◕
-</a>
-<Tooltip anchorSelect=".my-anchor-element" />
-```
-
-Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
-
-### Standalone
-
-You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
-
-mode: `esm` `cjs` `umd`
-
-If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default.
-
-PS: all the files have a minified version and a non-minified version.
-
-![image](https://user-images.githubusercontent.com/9615850/205637814-c0ef01ae-bd77-4e7f-b4bf-df502c71e5c3.png)
-
-## Options
-
-For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
-
-### Security note
-
-The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
-
-#### JSX note
-
-You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
-**Example:**
-
-```jsx
-import ReactDOMServer from 'react-dom/server';
-[...]
-<a
-  data-tooltip-id="my-tooltip"
-  data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
->
-  ◕‿‿◕
-</a>
-```
-
 ## Troubleshooting
@@ -178,75 +125,7 @@
 
+Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs.
+
 If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
 If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
 
-### The tooltip is broken/not showing up
-
-Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.
-
-```jsx
-import 'react-tooltip/dist/react-tooltip.css'
-```
-
-If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip.
-
-If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.
-
-### Next.js `TypeError: f is not a function`
-
-This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
-The best way to solve this is to upgrade to `next@13.3.0` or later versions.
-
-Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
-
-### Bad performance
-
-If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.
-
-#### Move `<Tooltip />` on the DOM
-
-This is specially relevant when using components that are conditionally rendered.
-
-Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.
-
-We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).
-
-#### Dynamically generated anchor elements
-
-You should avoid needlessly using a large amount of `<Tooltip />` components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips.
-
-Here's a simple example on how to improve performance when using dynamically generated items.
-
-> Check the docs for examples for the [`anchorSelect`](https://react-tooltip.com/docs/examples/anchor-select) and [`render`](https://react-tooltip.com/docs/examples/render) props for more complex use cases.
-
-```jsx
-// ❌ BAD
-<div className="items-container">
-  {myItems.map(({ id, content, tooltip }) => (
-    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
-      {content}
-      <Tooltip id={`tooltip-${id}`} content={tooltip} />
-    </div>
-  ))}
-</div>
-```
-
-```jsx
-// ✅ GOOD
-<div className="items-container">
-  {
-    myItems.map(({ id, content, tooltip }) => (
-      <div
-        key={id}
-        className="item"
-        data-tooltip-id="my-tooltip"
-        data-tooltip-content={tooltip}
-      >
-        {content}
-      </div>
-    ))
-  }
-</div>
-<Tooltip id="my-tooltip" />
-```
-
 ## Article
@@ -278,3 +157,3 @@
 
-We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.
+We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details.
 
@@ -281,0 +160,0 @@ ## License

No alert changes

Worsened metrics

Total package byte prevSize

581132

decreased by-1%

Lines of code

3737

decreased by-0.08%

Number of lines in readme file

157

decreased by-43.53%

No dependency changes