react-tooltip - npm Package Compare versions

Comparing version 5.15.0-beta.1045.0 to 5.15.0-beta.1045.1

dist/react-tooltip.umd.js

@@ -182,2 +182,26 @@
 
+  const isScrollable = (node) => {
+      if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+          return null;
+      }
+      const style = getComputedStyle(node);
+      return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
+          const value = style.getPropertyValue(propertyName);
+          return value === 'auto' || value === 'scroll';
+      });
+  };
+  const getScrollParent = (node) => {
+      if (!node) {
+          return null;
+      }
+      let currentParent = node.parentElement;
+      while (currentParent) {
+          if (isScrollable(currentParent)) {
+              return currentParent;
+          }
+          currentParent = currentParent.parentElement;
+      }
+      return document.scrollingElement || document.documentElement;
+  };
+
   const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [dom.offset(Number(offsetValue)), dom.flip(), dom.shift({ padding: 5 })], }) => {
@@ -466,3 +490,3 @@ if (!elementReference) {
       React.useEffect(() => {
-          var _a, _b, _c;
+          var _a, _b;
           const elementRefs = new Set(anchorRefs);
@@ -479,8 +503,8 @@ anchorsBySelect.forEach((anchor) => {
           };
-          const tooltipParent = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-          const anchorParent = activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.parentElement;
+          const anchorScrollParent = getScrollParent(activeAnchor);
+          const tooltipScrollParent = getScrollParent(tooltipRef.current);
           if (closeOnScroll) {
               window.addEventListener('scroll', handleScrollResize);
-              tooltipParent === null || tooltipParent === void 0 ? void 0 : tooltipParent.addEventListener('scroll', handleScrollResize);
-              anchorParent === null || anchorParent === void 0 ? void 0 : anchorParent.addEventListener('scroll', handleScrollResize);
+              anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
+              tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
           }
@@ -521,4 +545,4 @@ if (closeOnResize) {
           if (clickable && !shouldOpenOnClick) {
-              (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', handleMouseEnterTooltip);
-              (_c = tooltipRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handleMouseLeaveTooltip);
+              (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
+              (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
           }
@@ -535,4 +559,4 @@ enabledEvents.forEach(({ event, listener }) => {
                   window.removeEventListener('scroll', handleScrollResize);
-                  tooltipParent === null || tooltipParent === void 0 ? void 0 : tooltipParent.removeEventListener('scroll', handleScrollResize);
-                  anchorParent === null || anchorParent === void 0 ? void 0 : anchorParent.removeEventListener('scroll', handleScrollResize);
+                  anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
+                  tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.removeEventListener('scroll', handleScrollResize);
               }
@@ -539,0 +563,0 @@ if (closeOnResize) {

dist/react-tooltip.umd.min.js

@@ -7,3 +7,3 @@ /*
 */
-!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),s=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 i=(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))}},a="DEFAULT_TOOLTIP_ID",u={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},d={getTooltipData:()=>u},f=t.createContext(d);function p(e=a){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:s="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 i=c;return o?(i.push(r.arrow({element:o,padding:5})),r.computePosition(e,t,{placement:l,strategy:s,middleware:i}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const s={left:`${e}px`,top:`${t}px`},{x:c,y:i}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0};return{tooltipStyles:s,tooltipArrowStyles:{left:null!=c?`${c}px`:"",top:null!=i?`${i}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:s,middleware:i}).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:a,place:u="top",offset:d=10,events:f=["hover"],openOnClick:y=!1,positionStrategy:w="absolute",middlewares:_,wrapper:S,delayShow:b=0,delayHide:E=0,float:g=!1,hidden:A=!1,noArrow:k=!1,clickable:T=!1,closeOnEsc:x=!1,closeOnScroll:O=!1,closeOnResize:R=!1,style:L,position:N,afterShow:C,afterHide:$,content:j,contentWrapperRef:q,isOpen:I,setIsOpen:W,activeAnchor:H,setActiveAnchor:D})=>{const z=t.useRef(null),B=t.useRef(null),M=t.useRef(null),K=t.useRef(null),[P,X]=t.useState(u),[J,U]=t.useState({}),[F,Z]=t.useState({}),[Y,G]=t.useState(!1),[Q,V]=t.useState(!1),ee=t.useRef(!1),te=t.useRef(null),{anchorRefs:oe,setActiveAnchor:re}=p(e),le=t.useRef(!1),[ne,se]=t.useState([]),ce=t.useRef(!1),ie=y||f.includes("click");v((()=>(ce.current=!0,()=>{ce.current=!1})),[]),t.useEffect((()=>{if(!Y){const e=setTimeout((()=>{V(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[Y]);const ae=e=>{ce.current&&(e&&V(!0),setTimeout((()=>{ce.current&&(null==W||W(e),void 0===I&&G(e))}),10))};t.useEffect((()=>{if(void 0===I)return()=>null;I&&V(!0);const e=setTimeout((()=>{G(I)}),10);return()=>{clearTimeout(e)}}),[I]),t.useEffect((()=>{Y!==ee.current&&(ee.current=Y,Y?null==C||C():null==$||$())}),[Y]);const ue=(e=E)=>{K.current&&clearTimeout(K.current),K.current=setTimeout((()=>{le.current||ae(!1)}),e)},de=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 D(null),void re({current:null});b?(M.current&&clearTimeout(M.current),M.current=setTimeout((()=>{ae(!0)}),b)):ae(!0),D(o),re({current:o}),K.current&&clearTimeout(K.current)},fe=()=>{T?ue(E||100):E?ue():ae(!1),M.current&&clearTimeout(M.current)},pe=({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:z.current,tooltipArrowReference:B.current,strategy:w,middlewares:_}).then((e=>{Object.keys(e.tooltipStyles).length&&U(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&Z(e.tooltipArrowStyles),X(e.place)}))},ve=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};pe(o),te.current=o},me=e=>{de(e),E&&ue()},he=e=>{var t;[document.querySelector(`[id='${c}']`),...ne].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=z.current)||void 0===t?void 0:t.contains(e.target))||ae(!1)},ye=i(de,50,!0),we=i(fe,50,!0);t.useEffect((()=>{var e,t,o;const r=new Set(oe);ne.forEach((e=>{r.add({current:e})}));const l=document.querySelector(`[id='${c}']`);l&&r.add({current:l});const n=()=>{ae(!1)},s=null===(e=z.current)||void 0===e?void 0:e.parentElement,i=null==H?void 0:H.parentElement;O&&(window.addEventListener("scroll",n),null==s||s.addEventListener("scroll",n),null==i||i.addEventListener("scroll",n)),R&&window.addEventListener("resize",n);const a=e=>{"Escape"===e.key&&ae(!1)};x&&window.addEventListener("keydown",a);const u=[];ie?(window.addEventListener("click",he),u.push({event:"click",listener:me})):(u.push({event:"mouseenter",listener:ye},{event:"mouseleave",listener:we},{event:"focus",listener:ye},{event:"blur",listener:we}),g&&u.push({event:"mousemove",listener:ve}));const d=()=>{le.current=!0},f=()=>{le.current=!1,fe()};return T&&!ie&&(null===(t=z.current)||void 0===t||t.addEventListener("mouseenter",d),null===(o=z.current)||void 0===o||o.addEventListener("mouseleave",f)),u.forEach((({event:e,listener:t})=>{r.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t)}))})),()=>{var e,t;O&&(window.removeEventListener("scroll",n),null==s||s.removeEventListener("scroll",n),null==i||i.removeEventListener("scroll",n)),R&&window.removeEventListener("resize",n),ie&&window.removeEventListener("click",he),x&&window.removeEventListener("keydown",a),T&&!ie&&(null===(e=z.current)||void 0===e||e.removeEventListener("mouseenter",d),null===(t=z.current)||void 0===t||t.removeEventListener("mouseleave",f)),u.forEach((({event:e,listener:t})=>{r.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t)}))}))}}),[Q,oe,ne,x,f]),t.useEffect((()=>{let t=null!=a?a:"";!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&&(H&&[...o.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,H))&&(V(!1),ae(!1),D(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&&se((e=>[...e,...r]))}));return o.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{o.disconnect()}}),[e,a,H]);const _e=()=>{N?pe(N):g?te.current&&pe(te.current):m({place:u,offset:d,elementReference:H,tooltipReference:z.current,tooltipArrowReference:B.current,strategy:w,middlewares:_}).then((e=>{ce.current&&(Object.keys(e.tooltipStyles).length&&U(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&Z(e.tooltipArrowStyles),X(e.place))}))};t.useEffect((()=>{_e()}),[Y,H,j,L,u,d,w,N]),t.useEffect((()=>{if(!(null==q?void 0:q.current))return()=>null;const e=new ResizeObserver((()=>{_e()}));return e.observe(q.current),()=>{e.disconnect()}}),[j,null==q?void 0:q.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${c}']`),o=[...ne,t];H&&o.includes(H)||D(null!==(e=ne[0])&&void 0!==e?e:t)}),[c,ne,H]),t.useEffect((()=>()=>{M.current&&clearTimeout(M.current),K.current&&clearTimeout(K.current)}),[]),t.useEffect((()=>{let t=a;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));se(e)}catch(e){se([])}}),[e,a]);const Se=!A&&j&&Y&&Object.keys(J).length>0;return Q?n.default.createElement(S,{id:e,role:"tooltip",className:s.default("react-tooltip",h.tooltip,h[l],o,`react-tooltip__place-${P}`,{[h.show]:Se,[h.fixed]:"fixed"===w,[h.clickable]:T}),style:{...L,...J},ref:z},j,n.default.createElement(S,{className:s.default("react-tooltip-arrow",h.arrow,r,{[h.noArrow]:k}),style:F,ref:B})):null},w=({content:e})=>n.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});e.Tooltip=({id:e,anchorId:o,anchorSelect:r,content:l,html:s,render:c,className:i,classNameArrow:a,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:E=0,delayHide:g=0,float:A=!1,hidden:k=!1,noArrow:T=!1,clickable:x=!1,closeOnEsc:O=!1,closeOnScroll:R=!1,closeOnResize:L=!1,style:N,position:C,isOpen:$,setIsOpen:j,afterShow:q,afterHide:I})=>{const[W,H]=t.useState(l),[D,z]=t.useState(s),[B,M]=t.useState(d),[K,P]=t.useState(u),[X,J]=t.useState(f),[U,F]=t.useState(E),[Z,Y]=t.useState(g),[G,Q]=t.useState(A),[V,ee]=t.useState(k),[te,oe]=t.useState(v),[re,le]=t.useState(h),[ne,se]=t.useState(S),[ce,ie]=t.useState(null),{anchorRefs:ae,activeAnchor:ue}=p(e),de=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}),{}),fe=e=>{const t={place:e=>{var t;M(null!==(t=e)&&void 0!==t?t:d)},content:e=>{H(null!=e?e:l)},html:e=>{z(null!=e?e:s)},variant:e=>{var t;P(null!==(t=e)&&void 0!==t?t:u)},offset:e=>{J(null===e?f:Number(e))},wrapper:e=>{var t;oe(null!==(t=e)&&void 0!==t?t:v)},events:e=>{const t=null==e?void 0:e.split(" ");le(null!=t?t:h)},"position-strategy":e=>{var t;se(null!==(t=e)&&void 0!==t?t:S)},"delay-show":e=>{F(null===e?E:Number(e))},"delay-hide":e=>{Y(null===e?g:Number(e))},float:e=>{Q(null===e?A:"true"===e)},hidden:e=>{ee(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((()=>{H(l)}),[l]),t.useEffect((()=>{z(s)}),[s]),t.useEffect((()=>{M(d)}),[d]),t.useEffect((()=>{P(u)}),[u]),t.useEffect((()=>{J(f)}),[f]),t.useEffect((()=>{F(E)}),[E]),t.useEffect((()=>{Y(g)}),[g]),t.useEffect((()=>{Q(A)}),[A]),t.useEffect((()=>{ee(k)}),[k]),t.useEffect((()=>{se(S)}),[S]),t.useEffect((()=>{var t;const l=new Set(ae);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 s=document.querySelector(`[id='${o}']`);if(s&&l.add({current:s}),!l.size)return()=>null;const c=null!==(t=null!=ce?ce:s)&&void 0!==t?t:ue.current,i=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=de(c);fe(o)}))})),a={attributes:!0,childList:!1,subtree:!1};if(c){const e=de(c);fe(e),i.observe(c,a)}return()=>{i.disconnect()}}),[ae,ue,ce,o,r]);let pe=m;const ve=t.useRef(null);if(c){const e=c({content:null!=W?W:null,activeAnchor:ce});pe=e?n.default.createElement("div",{ref:ve,className:"react-tooltip-content-wrapper"},e):null}else W&&(pe=W);D&&(pe=n.default.createElement(w,{content:D}));const me={id:e,anchorId:o,anchorSelect:r,className:i,classNameArrow:a,content:pe,contentWrapperRef:ve,place:B,variant:K,offset:X,wrapper:te,events:re,openOnClick:_,positionStrategy:ne,middlewares:b,delayShow:U,delayHide:Z,float:G,hidden:V,noArrow:T,clickable:x,closeOnEsc:O,closeOnScroll:R,closeOnResize:L,style:N,position:C,isOpen:$,setIsOpen:j,afterShow:q,afterHide:I,activeAnchor:ce,setActiveAnchor:e=>ie(e)};return n.default.createElement(y,{...me})},e.TooltipProvider=({children:e})=>{const[o,r]=t.useState({[a]:new Set}),[l,s]=t.useState({[a]:{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)}}))},i=(e,...t)=>{r((o=>{const r=o[e];return r?(t.forEach((e=>r.delete(e))),{...o}):o}))},u=t.useCallback(((e=a)=>{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)=>i(e,...t),setActiveAnchor:t=>((e,t)=>{s((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,i]),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:i,variant:a,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:s.default("react-tooltip-wrapper",r),"data-tooltip-place":l,"data-tooltip-content":c,"data-tooltip-html":i,"data-tooltip-variant":a,"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),s=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 a=(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=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return null;const t=getComputedStyle(e);return["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return"auto"===o||"scroll"===o}))},h=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(m(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},y=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:n=10,strategy:s="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 a=c;return o?(a.push(r.arrow({element:o,padding:5})),r.computePosition(e,t,{placement:l,strategy:s,middleware:a}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const s={left:`${e}px`,top:`${t}px`},{x:c,y:a}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0};return{tooltipStyles:s,tooltipArrowStyles:{left:null!=c?`${c}px`:"",top:null!=a?`${a}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:s,middleware:a}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var w={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 _=({id:e,className:o,classNameArrow:r,variant:l="dark",anchorId:c,anchorSelect:i,place:u="top",offset:d=10,events:f=["hover"],openOnClick:m=!1,positionStrategy:_="absolute",middlewares:S,wrapper:E,delayShow:b=0,delayHide:g=0,float:A=!1,hidden:T=!1,noArrow:k=!1,clickable:x=!1,closeOnEsc:O=!1,closeOnScroll:R=!1,closeOnResize:L=!1,style:N,position:C,afterShow:$,afterHide:j,content:q,contentWrapperRef:H,isOpen:I,setIsOpen:W,activeAnchor:D,setActiveAnchor:z})=>{const M=t.useRef(null),B=t.useRef(null),P=t.useRef(null),K=t.useRef(null),[X,J]=t.useState(u),[U,F]=t.useState({}),[V,Z]=t.useState({}),[G,Y]=t.useState(!1),[Q,ee]=t.useState(!1),te=t.useRef(!1),oe=t.useRef(null),{anchorRefs:re,setActiveAnchor:le}=p(e),ne=t.useRef(!1),[se,ce]=t.useState([]),ae=t.useRef(!1),ie=m||f.includes("click");v((()=>(ae.current=!0,()=>{ae.current=!1})),[]),t.useEffect((()=>{if(!G){const e=setTimeout((()=>{ee(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[G]);const ue=e=>{ae.current&&(e&&ee(!0),setTimeout((()=>{ae.current&&(null==W||W(e),void 0===I&&Y(e))}),10))};t.useEffect((()=>{if(void 0===I)return()=>null;I&&ee(!0);const e=setTimeout((()=>{Y(I)}),10);return()=>{clearTimeout(e)}}),[I]),t.useEffect((()=>{G!==te.current&&(te.current=G,G?null==$||$():null==j||j())}),[G]);const de=(e=g)=>{K.current&&clearTimeout(K.current),K.current=setTimeout((()=>{ne.current||ue(!1)}),e)},fe=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 z(null),void le({current:null});b?(P.current&&clearTimeout(P.current),P.current=setTimeout((()=>{ue(!0)}),b)):ue(!0),z(o),le({current:o}),K.current&&clearTimeout(K.current)},pe=()=>{x?de(g||100):g?de():ue(!1),P.current&&clearTimeout(P.current)},ve=({x:e,y:t})=>{y({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:M.current,tooltipArrowReference:B.current,strategy:_,middlewares:S}).then((e=>{Object.keys(e.tooltipStyles).length&&F(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&Z(e.tooltipArrowStyles),J(e.place)}))},me=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ve(o),oe.current=o},he=e=>{fe(e),g&&de()},ye=e=>{var t;[document.querySelector(`[id='${c}']`),...se].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=M.current)||void 0===t?void 0:t.contains(e.target))||ue(!1)},we=a(fe,50,!0),_e=a(pe,50,!0);t.useEffect((()=>{var e,t;const o=new Set(re);se.forEach((e=>{o.add({current:e})}));const r=document.querySelector(`[id='${c}']`);r&&o.add({current:r});const l=()=>{ue(!1)},n=h(D),s=h(M.current);R&&(window.addEventListener("scroll",l),null==n||n.addEventListener("scroll",l),null==s||s.addEventListener("scroll",l)),L&&window.addEventListener("resize",l);const a=e=>{"Escape"===e.key&&ue(!1)};O&&window.addEventListener("keydown",a);const i=[];ie?(window.addEventListener("click",ye),i.push({event:"click",listener:he})):(i.push({event:"mouseenter",listener:we},{event:"mouseleave",listener:_e},{event:"focus",listener:we},{event:"blur",listener:_e}),A&&i.push({event:"mousemove",listener:me}));const u=()=>{ne.current=!0},d=()=>{ne.current=!1,pe()};return x&&!ie&&(null===(e=M.current)||void 0===e||e.addEventListener("mouseenter",u),null===(t=M.current)||void 0===t||t.addEventListener("mouseleave",d)),i.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t)}))})),()=>{var e,t;R&&(window.removeEventListener("scroll",l),null==n||n.removeEventListener("scroll",l),null==s||s.removeEventListener("scroll",l)),L&&window.removeEventListener("resize",l),ie&&window.removeEventListener("click",ye),O&&window.removeEventListener("keydown",a),x&&!ie&&(null===(e=M.current)||void 0===e||e.removeEventListener("mouseenter",u),null===(t=M.current)||void 0===t||t.removeEventListener("mouseleave",d)),i.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t)}))}))}}),[Q,re,se,O,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&&(D&&[...o.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,D))&&(ee(!1),ue(!1),z(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&&ce((e=>[...e,...r]))}));return o.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{o.disconnect()}}),[e,i,D]);const Se=()=>{C?ve(C):A?oe.current&&ve(oe.current):y({place:u,offset:d,elementReference:D,tooltipReference:M.current,tooltipArrowReference:B.current,strategy:_,middlewares:S}).then((e=>{ae.current&&(Object.keys(e.tooltipStyles).length&&F(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&Z(e.tooltipArrowStyles),J(e.place))}))};t.useEffect((()=>{Se()}),[G,D,q,N,u,d,_,C]),t.useEffect((()=>{if(!(null==H?void 0:H.current))return()=>null;const e=new ResizeObserver((()=>{Se()}));return e.observe(H.current),()=>{e.disconnect()}}),[q,null==H?void 0:H.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${c}']`),o=[...se,t];D&&o.includes(D)||z(null!==(e=se[0])&&void 0!==e?e:t)}),[c,se,D]),t.useEffect((()=>()=>{P.current&&clearTimeout(P.current),K.current&&clearTimeout(K.current)}),[]),t.useEffect((()=>{let t=i;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));ce(e)}catch(e){ce([])}}),[e,i]);const Ee=!T&&q&&G&&Object.keys(U).length>0;return Q?n.default.createElement(E,{id:e,role:"tooltip",className:s.default("react-tooltip",w.tooltip,w[l],o,`react-tooltip__place-${X}`,{[w.show]:Ee,[w.fixed]:"fixed"===_,[w.clickable]:x}),style:{...N,...U},ref:M},q,n.default.createElement(E,{className:s.default("react-tooltip-arrow",w.arrow,r,{[w.noArrow]:k}),style:V,ref:B})):null},S=({content:e})=>n.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});e.Tooltip=({id:e,anchorId:o,anchorSelect:r,content:l,html:s,render:c,className:a,classNameArrow:i,variant:u="dark",place:d="top",offset:f=10,wrapper:v="div",children:m=null,events:h=["hover"],openOnClick:y=!1,positionStrategy:w="absolute",middlewares:E,delayShow:b=0,delayHide:g=0,float:A=!1,hidden:T=!1,noArrow:k=!1,clickable:x=!1,closeOnEsc:O=!1,closeOnScroll:R=!1,closeOnResize:L=!1,style:N,position:C,isOpen:$,setIsOpen:j,afterShow:q,afterHide:H})=>{const[I,W]=t.useState(l),[D,z]=t.useState(s),[M,B]=t.useState(d),[P,K]=t.useState(u),[X,J]=t.useState(f),[U,F]=t.useState(b),[V,Z]=t.useState(g),[G,Y]=t.useState(A),[Q,ee]=t.useState(T),[te,oe]=t.useState(v),[re,le]=t.useState(h),[ne,se]=t.useState(w),[ce,ae]=t.useState(null),{anchorRefs:ie,activeAnchor:ue}=p(e),de=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}),{}),fe=e=>{const t={place:e=>{var t;B(null!==(t=e)&&void 0!==t?t:d)},content:e=>{W(null!=e?e:l)},html:e=>{z(null!=e?e:s)},variant:e=>{var t;K(null!==(t=e)&&void 0!==t?t:u)},offset:e=>{J(null===e?f:Number(e))},wrapper:e=>{var t;oe(null!==(t=e)&&void 0!==t?t:v)},events:e=>{const t=null==e?void 0:e.split(" ");le(null!=t?t:h)},"position-strategy":e=>{var t;se(null!==(t=e)&&void 0!==t?t:w)},"delay-show":e=>{F(null===e?b:Number(e))},"delay-hide":e=>{Z(null===e?g:Number(e))},float:e=>{Y(null===e?A:"true"===e)},hidden:e=>{ee(null===e?T:"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((()=>{W(l)}),[l]),t.useEffect((()=>{z(s)}),[s]),t.useEffect((()=>{B(d)}),[d]),t.useEffect((()=>{K(u)}),[u]),t.useEffect((()=>{J(f)}),[f]),t.useEffect((()=>{F(b)}),[b]),t.useEffect((()=>{Z(g)}),[g]),t.useEffect((()=>{Y(A)}),[A]),t.useEffect((()=>{ee(T)}),[T]),t.useEffect((()=>{se(w)}),[w]),t.useEffect((()=>{var t;const l=new Set(ie);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 s=document.querySelector(`[id='${o}']`);if(s&&l.add({current:s}),!l.size)return()=>null;const c=null!==(t=null!=ce?ce:s)&&void 0!==t?t:ue.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 o=de(c);fe(o)}))})),i={attributes:!0,childList:!1,subtree:!1};if(c){const e=de(c);fe(e),a.observe(c,i)}return()=>{a.disconnect()}}),[ie,ue,ce,o,r]);let pe=m;const ve=t.useRef(null);if(c){const e=c({content:null!=I?I:null,activeAnchor:ce});pe=e?n.default.createElement("div",{ref:ve,className:"react-tooltip-content-wrapper"},e):null}else I&&(pe=I);D&&(pe=n.default.createElement(S,{content:D}));const me={id:e,anchorId:o,anchorSelect:r,className:a,classNameArrow:i,content:pe,contentWrapperRef:ve,place:M,variant:P,offset:X,wrapper:te,events:re,openOnClick:y,positionStrategy:ne,middlewares:E,delayShow:U,delayHide:V,float:G,hidden:Q,noArrow:k,clickable:x,closeOnEsc:O,closeOnScroll:R,closeOnResize:L,style:N,position:C,isOpen:$,setIsOpen:j,afterShow:q,afterHide:H,activeAnchor:ce,setActiveAnchor:e=>ae(e)};return n.default.createElement(_,{...me})},e.TooltipProvider=({children:e})=>{const[o,r]=t.useState({[i]:new Set}),[l,s]=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)}}))},a=(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)=>a(e,...t),setActiveAnchor:t=>((e,t)=>{s((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,a]),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:a,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:s.default("react-tooltip-wrapper",r),"data-tooltip-place":l,"data-tooltip-content":c,"data-tooltip-html":a,"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.15.0-beta.1045.0",
+  "version": "5.15.0-beta.1045.1",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

611277

increased by1.99%

Lines of code

3896

increased by1.91%

No dependency changes