react-tooltip - npm Package Compare versions

Comparing version 5.16.0-beta.10410.0 to 5.16.0

dist/react-tooltip.d.ts

 import React, { ElementType, ReactNode, CSSProperties, PropsWithChildren } from 'react';
 
-type PlacesType = 'top' | 'right' | 'bottom' | 'left'
+type PlacesType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
 
@@ -150,3 +162,3 @@ type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
 
-declare function removeStyle({ type, id, }: {
+declare function removeStyle({ type, id, }?: {
     type?: string;
@@ -153,0 +165,0 @@ id?: string;

dist/react-tooltip.umd.js

@@ -65,3 +65,3 @@
     }
-    function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, }) {
+    function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, } = {}) {
         if (type === 'core') {
@@ -281,3 +281,3 @@ // eslint-disable-next-line no-param-reassign
 
-    var styles = {"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"};
+    var styles = {"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"};
 
@@ -781,3 +781,3 @@ const Tooltip = ({
         const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
-        return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
+        return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
                 [coreStyles['show']]: canShow,
@@ -1037,9 +1037,5 @@ [coreStyles['fixed']]: positionStrategy === 'fixed',
   visibility: hidden;
-  width: max-content;
   position: absolute;
   top: 0;
   left: 0;
-  padding: 8px 16px;
-  border-radius: 3px;
-  font-size: 90%;
   pointer-events: none;
@@ -1076,2 +1072,9 @@ opacity: 0;
 
+.styles-module_tooltip__mnnfp {
+  padding: 8px 16px;
+  border-radius: 3px;
+  font-size: 90%;
+  width: max-content;
+}
+
 .styles-module_arrow__K0L3T {
@@ -1078,0 +1081,0 @@ width: 8px;

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,r,o){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),c=n(r);const s="react-tooltip-core-styles",a="react-tooltip-base-styles";function u({css:e,id:t=a,type:r="base",ref:o}){if("core"===r&&process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES)return;if("core"!==r&&process.env.REACT_TOOLTIP_DISABLE_BASE_STYLES)return;"core"===r&&(t=s),o||(o={});const{insertAt:n}=o;if(!e||"undefined"==typeof document||document.getElementById(t))return;const l=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");c.id=t,c.type="text/css","top"===n&&l.firstChild?l.insertBefore(c,l.firstChild):l.appendChild(c),c.styleSheet?c.styleSheet.cssText=e:c.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))}},d="DEFAULT_TOOLTIP_ID",f={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},p={getTooltipData:()=>f},m=t.createContext(p);function v(e=d){return t.useContext(m).getTooltipData(e)}const y="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,h=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}))},w=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(h(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:r=null,place:n="top",offset:l=10,strategy:c="absolute",middlewares:s=[o.offset(Number(l)),o.flip(),o.shift({padding:5})]})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};const a=s;return r?(a.push(o.arrow({element:r,padding:5})),o.computePosition(e,t,{placement:n,strategy:c,middleware:a}).then((({x:e,y:t,placement:r,middlewareData:o})=>{var n,l;const c={left:`${e}px`,top:`${t}px`},{x:s,y:a}=null!==(n=o.arrow)&&void 0!==n?n:{x:0,y:0};return{tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",[null!==(l={top:"bottom",right:"left",bottom:"top",left:"right"}[r.split("-")[0]])&&void 0!==l?l:"bottom"]:"-4px"},place:r}}))):o.computePosition(e,t,{placement:"bottom",strategy:c,middleware:a}).then((({x:e,y:t,placement:r})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:r})))};var S="core-styles-module_tooltip__3vRRp",g="core-styles-module_fixed__pcSol",_="core-styles-module_arrow__cvMwQ",b="core-styles-module_noArrow__xock6",A="core-styles-module_clickable__ZuTTB",T="core-styles-module_show__Nt9eE",O={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:e,className:r,classNameArrow:o,variant:n="dark",anchorId:s,anchorSelect:a,place:u="top",offset:d=10,events:f=["hover"],openOnClick:p=!1,positionStrategy:m="absolute",middlewares:h,wrapper:R,delayShow:L=0,delayHide:x=0,float:k=!1,hidden:N=!1,noArrow:C=!1,clickable:I=!1,closeOnEsc:$=!1,closeOnScroll:j=!1,closeOnResize:q=!1,style:B,position:D,afterShow:H,afterHide:M,content:P,contentWrapperRef:W,isOpen:z,setIsOpen:F,activeAnchor:K,setActiveAnchor:X})=>{const Y=t.useRef(null),U=t.useRef(null),V=t.useRef(null),Z=t.useRef(null),[G,J]=t.useState(u),[Q,ee]=t.useState({}),[te,re]=t.useState({}),[oe,ne]=t.useState(!1),[le,ce]=t.useState(!1),se=t.useRef(!1),ae=t.useRef(null),{anchorRefs:ue,setActiveAnchor:ie}=v(e),de=t.useRef(!1),[fe,pe]=t.useState([]),me=t.useRef(!1),ve=p||f.includes("click");y((()=>(me.current=!0,()=>{me.current=!1})),[]),t.useEffect((()=>{if(!oe){const e=setTimeout((()=>{ce(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[oe]);const ye=e=>{me.current&&(e&&ce(!0),setTimeout((()=>{me.current&&(null==F||F(e),void 0===z&&ne(e))}),10))};t.useEffect((()=>{if(void 0===z)return()=>null;z&&ce(!0);const e=setTimeout((()=>{ne(z)}),10);return()=>{clearTimeout(e)}}),[z]),t.useEffect((()=>{oe!==se.current&&(se.current=oe,oe?null==H||H():null==M||M())}),[oe]);const he=(e=x)=>{Z.current&&clearTimeout(Z.current),Z.current=setTimeout((()=>{de.current||ye(!1)}),e)},we=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 ie({current:null});L?(V.current&&clearTimeout(V.current),V.current=setTimeout((()=>{ye(!0)}),L)):ye(!0),X(r),ie({current:r}),Z.current&&clearTimeout(Z.current)},Ee=()=>{I?he(x||100):x?he():ye(!1),V.current&&clearTimeout(V.current)},Se=({x:e,y:t})=>{E({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:Y.current,tooltipArrowReference:U.current,strategy:m,middlewares:h}).then((e=>{Object.keys(e.tooltipStyles).length&&ee(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&re(e.tooltipArrowStyles),J(e.place)}))},ge=e=>{if(!e)return;const t=e,r={x:t.clientX,y:t.clientY};Se(r),ae.current=r},_e=e=>{we(e),x&&he()},be=e=>{var t;[document.querySelector(`[id='${s}']`),...fe].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=Y.current)||void 0===t?void 0:t.contains(e.target))||(ye(!1),V.current&&clearTimeout(V.current))},Ae=i(we,50,!0),Te=i(Ee,50,!0);t.useEffect((()=>{var e,t;const r=new Set(ue);fe.forEach((e=>{r.add({current:e})}));const o=document.querySelector(`[id='${s}']`);o&&r.add({current:o});const n=()=>{ye(!1)},l=w(K),c=w(Y.current);j&&(window.addEventListener("scroll",n),null==l||l.addEventListener("scroll",n),null==c||c.addEventListener("scroll",n)),q&&window.addEventListener("resize",n);const a=e=>{"Escape"===e.key&&ye(!1)};$&&window.addEventListener("keydown",a);const u=[];ve?(window.addEventListener("click",be),u.push({event:"click",listener:_e})):(u.push({event:"mouseenter",listener:Ae},{event:"mouseleave",listener:Te},{event:"focus",listener:Ae},{event:"blur",listener:Te}),k&&u.push({event:"mousemove",listener:ge}));const i=()=>{de.current=!0},d=()=>{de.current=!1,Ee()};return I&&!ve&&(null===(e=Y.current)||void 0===e||e.addEventListener("mouseenter",i),null===(t=Y.current)||void 0===t||t.addEventListener("mouseleave",d)),u.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.addEventListener(e,t)}))})),()=>{var e,t;j&&(window.removeEventListener("scroll",n),null==l||l.removeEventListener("scroll",n),null==c||c.removeEventListener("scroll",n)),q&&window.removeEventListener("resize",n),ve&&window.removeEventListener("click",be),$&&window.removeEventListener("keydown",a),I&&!ve&&(null===(e=Y.current)||void 0===e||e.removeEventListener("mouseenter",i),null===(t=Y.current)||void 0===t||t.removeEventListener("mouseleave",d)),u.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.removeEventListener(e,t)}))}))}}),[le,ue,fe,$,f]),t.useEffect((()=>{let t=null!=a?a:"";!t&&e&&(t=`[data-tooltip-id='${e}']`);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")===e&&o.push(r.target)}if("childList"===r.type&&(K&&[...r.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,K))&&(ce(!1),ye(!1),X(null),V.current&&clearTimeout(V.current),Z.current&&clearTimeout(Z.current),!0)})),t))try{const e=[...r.addedNodes].filter((e=>1===e.nodeType));o.push(...e.filter((e=>e.matches(t)))),o.push(...e.flatMap((e=>[...e.querySelectorAll(t)])))}catch(e){}})),o.length&&pe((e=>[...e,...o]))}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{r.disconnect()}}),[e,a,K]);const Oe=()=>{D?Se(D):k?ae.current&&Se(ae.current):E({place:u,offset:d,elementReference:K,tooltipReference:Y.current,tooltipArrowReference:U.current,strategy:m,middlewares:h}).then((e=>{me.current&&(Object.keys(e.tooltipStyles).length&&ee(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&re(e.tooltipArrowStyles),J(e.place))}))};t.useEffect((()=>{Oe()}),[oe,K,P,B,u,d,m,D]),t.useEffect((()=>{if(!(null==W?void 0:W.current))return()=>null;const e=new ResizeObserver((()=>{Oe()}));return e.observe(W.current),()=>{e.disconnect()}}),[P,null==W?void 0:W.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${s}']`),r=[...fe,t];K&&r.includes(K)||X(null!==(e=fe[0])&&void 0!==e?e:t)}),[s,fe,K]),t.useEffect((()=>()=>{V.current&&clearTimeout(V.current),Z.current&&clearTimeout(Z.current)}),[]),t.useEffect((()=>{let t=a;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));pe(e)}catch(e){pe([])}}),[e,a]);const Re=!N&&P&&oe&&Object.keys(Q).length>0;return le?l.default.createElement(R,{id:e,role:"tooltip",className:c.default("react-tooltip",S,O[n],r,`react-tooltip__place-${G}`,{[T]:Re,[g]:"fixed"===m,[A]:I}),style:{...B,...Q},ref:Y},P,l.default.createElement(R,{className:c.default("react-tooltip-arrow",_,O.arrow,o,{[b]:C}),style:te,ref:U})):null},L=({content:e})=>l.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});u({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;width:max-content;position:absolute;top:0;left:0;padding:8px 16px;border-radius:3px;font-size:90%;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"}),u({css:`
-.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)}`}),e.Tooltip=({id:e,anchorId:r,anchorSelect:o,content:n,html:c,render:s,className:a,classNameArrow:u,variant:i="dark",place:d="top",offset:f=10,wrapper:p="div",children:m=null,events:y=["hover"],openOnClick:h=!1,positionStrategy:w="absolute",middlewares:E,delayShow:S=0,delayHide:g=0,float:_=!1,hidden:b=!1,noArrow:A=!1,clickable:T=!1,closeOnEsc:O=!1,closeOnScroll:x=!1,closeOnResize:k=!1,style:N,position:C,isOpen:I,setIsOpen:$,afterShow:j,afterHide:q})=>{const[B,D]=t.useState(n),[H,M]=t.useState(c),[P,W]=t.useState(d),[z,F]=t.useState(i),[K,X]=t.useState(f),[Y,U]=t.useState(S),[V,Z]=t.useState(g),[G,J]=t.useState(_),[Q,ee]=t.useState(b),[te,re]=t.useState(p),[oe,ne]=t.useState(y),[le,ce]=t.useState(w),[se,ae]=t.useState(null),{anchorRefs:ue,activeAnchor:ie}=v(e),de=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}),{}),fe=e=>{const t={place:e=>{var t;W(null!==(t=e)&&void 0!==t?t:d)},content:e=>{D(null!=e?e:n)},html:e=>{M(null!=e?e:c)},variant:e=>{var t;F(null!==(t=e)&&void 0!==t?t:i)},offset:e=>{X(null===e?f:Number(e))},wrapper:e=>{var t;re(null!==(t=e)&&void 0!==t?t:p)},events:e=>{const t=null==e?void 0:e.split(" ");ne(null!=t?t:y)},"position-strategy":e=>{var t;ce(null!==(t=e)&&void 0!==t?t:w)},"delay-show":e=>{U(null===e?S:Number(e))},"delay-hide":e=>{Z(null===e?g:Number(e))},float:e=>{J(null===e?_:"true"===e)},hidden:e=>{ee(null===e?b:"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)}))};t.useEffect((()=>{D(n)}),[n]),t.useEffect((()=>{M(c)}),[c]),t.useEffect((()=>{W(d)}),[d]),t.useEffect((()=>{F(i)}),[i]),t.useEffect((()=>{X(f)}),[f]),t.useEffect((()=>{U(S)}),[S]),t.useEffect((()=>{Z(g)}),[g]),t.useEffect((()=>{J(_)}),[_]),t.useEffect((()=>{ee(b)}),[b]),t.useEffect((()=>{ce(w)}),[w]),t.useEffect((()=>{var t;const n=new Set(ue);let l=o;if(!l&&e&&(l=`[data-tooltip-id='${e}']`),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 c=document.querySelector(`[id='${r}']`);if(c&&n.add({current:c}),!n.size)return()=>null;const s=null!==(t=null!=se?se:c)&&void 0!==t?t:ie.current,a=new MutationObserver((e=>{e.forEach((e=>{var t;if(!s||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const r=de(s);fe(r)}))})),u={attributes:!0,childList:!1,subtree:!1};if(s){const e=de(s);fe(e),a.observe(s,u)}return()=>{a.disconnect()}}),[ue,ie,se,r,o]);let pe=m;const me=t.useRef(null);if(s){const e=s({content:null!=B?B:null,activeAnchor:se});pe=e?l.default.createElement("div",{ref:me,className:"react-tooltip-content-wrapper"},e):null}else B&&(pe=B);H&&(pe=l.default.createElement(L,{content:H}));const ve={id:e,anchorId:r,anchorSelect:o,className:a,classNameArrow:u,content:pe,contentWrapperRef:me,place:P,variant:z,offset:K,wrapper:te,events:oe,openOnClick:h,positionStrategy:le,middlewares:E,delayShow:Y,delayHide:V,float:G,hidden:Q,noArrow:A,clickable:T,closeOnEsc:O,closeOnScroll:x,closeOnResize:k,style:N,position:C,isOpen:I,setIsOpen:$,afterShow:j,afterHide:q,activeAnchor:se,setActiveAnchor:e=>ae(e)};return l.default.createElement(R,{...ve})},e.TooltipProvider=({children:e})=>{const[r,o]=t.useState({[d]:new Set}),[n,c]=t.useState({[d]:{current:null}}),s=(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}))},u=t.useCallback(((e=d)=>{var t,o;return{anchorRefs:null!==(t=r[e])&&void 0!==t?t:new Set,activeAnchor:null!==(o=n[e])&&void 0!==o?o:{current:null},attach:(...t)=>s(e,...t),detach:(...t)=>a(e,...t),setActiveAnchor:t=>((e,t)=>{c((r=>{var o;return(null===(o=r[e])||void 0===o?void 0:o.current)===t.current?r:{...r,[e]:t}}))})(e,t)}}),[r,n,s,a]),i=t.useMemo((()=>({getTooltipData:u})),[u]);return l.default.createElement(m.Provider,{value:i},e)},e.TooltipWrapper=({tooltipId:e,children:r,className:o,place:n,content:s,html:a,variant:u,offset:i,wrapper:d,events:f,positionStrategy:p,delayShow:m,delayHide:y})=>{const{attach:h,detach:w}=v(e),E=t.useRef(null);return t.useEffect((()=>(h(E),()=>{w(E)})),[]),l.default.createElement("span",{ref:E,className:c.default("react-tooltip-wrapper",o),"data-tooltip-place":n,"data-tooltip-content":s,"data-tooltip-html":a,"data-tooltip-variant":u,"data-tooltip-offset":i,"data-tooltip-wrapper":d,"data-tooltip-events":f,"data-tooltip-position-strategy":p,"data-tooltip-delay-show":m,"data-tooltip-delay-hide":y},r)},e.removeStyle=function({type:e="base",id:t=a}){"core"===e&&(t=s);const r=document.getElementById(t);null==r||r.remove()},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,r,o){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),c=n(r);const s="react-tooltip-core-styles",a="react-tooltip-base-styles";function u({css:e,id:t=a,type:r="base",ref:o}){if("core"===r&&process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES)return;if("core"!==r&&process.env.REACT_TOOLTIP_DISABLE_BASE_STYLES)return;"core"===r&&(t=s),o||(o={});const{insertAt:n}=o;if(!e||"undefined"==typeof document||document.getElementById(t))return;const l=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");c.id=t,c.type="text/css","top"===n&&l.firstChild?l.insertBefore(c,l.firstChild):l.appendChild(c),c.styleSheet?c.styleSheet.cssText=e:c.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))}},d="DEFAULT_TOOLTIP_ID",f={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},p={getTooltipData:()=>f},m=t.createContext(p);function v(e=d){return t.useContext(m).getTooltipData(e)}const y="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,h=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}))},w=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(h(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:r=null,place:n="top",offset:l=10,strategy:c="absolute",middlewares:s=[o.offset(Number(l)),o.flip(),o.shift({padding:5})]})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:n};const a=s;return r?(a.push(o.arrow({element:r,padding:5})),o.computePosition(e,t,{placement:n,strategy:c,middleware:a}).then((({x:e,y:t,placement:r,middlewareData:o})=>{var n,l;const c={left:`${e}px`,top:`${t}px`},{x:s,y:a}=null!==(n=o.arrow)&&void 0!==n?n:{x:0,y:0};return{tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",[null!==(l={top:"bottom",right:"left",bottom:"top",left:"right"}[r.split("-")[0]])&&void 0!==l?l:"bottom"]:"-4px"},place:r}}))):o.computePosition(e,t,{placement:"bottom",strategy:c,middleware:a}).then((({x:e,y:t,placement:r})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:r})))};var S="core-styles-module_tooltip__3vRRp",_="core-styles-module_fixed__pcSol",g="core-styles-module_arrow__cvMwQ",b="core-styles-module_noArrow__xock6",A="core-styles-module_clickable__ZuTTB",T="core-styles-module_show__Nt9eE",O={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:e,className:r,classNameArrow:o,variant:n="dark",anchorId:s,anchorSelect:a,place:u="top",offset:d=10,events:f=["hover"],openOnClick:p=!1,positionStrategy:m="absolute",middlewares:h,wrapper:R,delayShow:L=0,delayHide:x=0,float:k=!1,hidden:N=!1,noArrow:C=!1,clickable:I=!1,closeOnEsc:$=!1,closeOnScroll:j=!1,closeOnResize:q=!1,style:B,position:D,afterShow:H,afterHide:M,content:P,contentWrapperRef:W,isOpen:z,setIsOpen:F,activeAnchor:K,setActiveAnchor:X})=>{const Y=t.useRef(null),U=t.useRef(null),V=t.useRef(null),Z=t.useRef(null),[G,J]=t.useState(u),[Q,ee]=t.useState({}),[te,re]=t.useState({}),[oe,ne]=t.useState(!1),[le,ce]=t.useState(!1),se=t.useRef(!1),ae=t.useRef(null),{anchorRefs:ue,setActiveAnchor:ie}=v(e),de=t.useRef(!1),[fe,pe]=t.useState([]),me=t.useRef(!1),ve=p||f.includes("click");y((()=>(me.current=!0,()=>{me.current=!1})),[]),t.useEffect((()=>{if(!oe){const e=setTimeout((()=>{ce(!1)}),150);return()=>{clearTimeout(e)}}return()=>null}),[oe]);const ye=e=>{me.current&&(e&&ce(!0),setTimeout((()=>{me.current&&(null==F||F(e),void 0===z&&ne(e))}),10))};t.useEffect((()=>{if(void 0===z)return()=>null;z&&ce(!0);const e=setTimeout((()=>{ne(z)}),10);return()=>{clearTimeout(e)}}),[z]),t.useEffect((()=>{oe!==se.current&&(se.current=oe,oe?null==H||H():null==M||M())}),[oe]);const he=(e=x)=>{Z.current&&clearTimeout(Z.current),Z.current=setTimeout((()=>{de.current||ye(!1)}),e)},we=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 ie({current:null});L?(V.current&&clearTimeout(V.current),V.current=setTimeout((()=>{ye(!0)}),L)):ye(!0),X(r),ie({current:r}),Z.current&&clearTimeout(Z.current)},Ee=()=>{I?he(x||100):x?he():ye(!1),V.current&&clearTimeout(V.current)},Se=({x:e,y:t})=>{E({place:u,offset:d,elementReference:{getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})},tooltipReference:Y.current,tooltipArrowReference:U.current,strategy:m,middlewares:h}).then((e=>{Object.keys(e.tooltipStyles).length&&ee(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&re(e.tooltipArrowStyles),J(e.place)}))},_e=e=>{if(!e)return;const t=e,r={x:t.clientX,y:t.clientY};Se(r),ae.current=r},ge=e=>{we(e),x&&he()},be=e=>{var t;[document.querySelector(`[id='${s}']`),...fe].some((t=>null==t?void 0:t.contains(e.target)))||(null===(t=Y.current)||void 0===t?void 0:t.contains(e.target))||(ye(!1),V.current&&clearTimeout(V.current))},Ae=i(we,50,!0),Te=i(Ee,50,!0);t.useEffect((()=>{var e,t;const r=new Set(ue);fe.forEach((e=>{r.add({current:e})}));const o=document.querySelector(`[id='${s}']`);o&&r.add({current:o});const n=()=>{ye(!1)},l=w(K),c=w(Y.current);j&&(window.addEventListener("scroll",n),null==l||l.addEventListener("scroll",n),null==c||c.addEventListener("scroll",n)),q&&window.addEventListener("resize",n);const a=e=>{"Escape"===e.key&&ye(!1)};$&&window.addEventListener("keydown",a);const u=[];ve?(window.addEventListener("click",be),u.push({event:"click",listener:ge})):(u.push({event:"mouseenter",listener:Ae},{event:"mouseleave",listener:Te},{event:"focus",listener:Ae},{event:"blur",listener:Te}),k&&u.push({event:"mousemove",listener:_e}));const i=()=>{de.current=!0},d=()=>{de.current=!1,Ee()};return I&&!ve&&(null===(e=Y.current)||void 0===e||e.addEventListener("mouseenter",i),null===(t=Y.current)||void 0===t||t.addEventListener("mouseleave",d)),u.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.addEventListener(e,t)}))})),()=>{var e,t;j&&(window.removeEventListener("scroll",n),null==l||l.removeEventListener("scroll",n),null==c||c.removeEventListener("scroll",n)),q&&window.removeEventListener("resize",n),ve&&window.removeEventListener("click",be),$&&window.removeEventListener("keydown",a),I&&!ve&&(null===(e=Y.current)||void 0===e||e.removeEventListener("mouseenter",i),null===(t=Y.current)||void 0===t||t.removeEventListener("mouseleave",d)),u.forEach((({event:e,listener:t})=>{r.forEach((r=>{var o;null===(o=r.current)||void 0===o||o.removeEventListener(e,t)}))}))}}),[le,ue,fe,$,f]),t.useEffect((()=>{let t=null!=a?a:"";!t&&e&&(t=`[data-tooltip-id='${e}']`);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")===e&&o.push(r.target)}if("childList"===r.type&&(K&&[...r.removedNodes].some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,K))&&(ce(!1),ye(!1),X(null),V.current&&clearTimeout(V.current),Z.current&&clearTimeout(Z.current),!0)})),t))try{const e=[...r.addedNodes].filter((e=>1===e.nodeType));o.push(...e.filter((e=>e.matches(t)))),o.push(...e.flatMap((e=>[...e.querySelectorAll(t)])))}catch(e){}})),o.length&&pe((e=>[...e,...o]))}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{r.disconnect()}}),[e,a,K]);const Oe=()=>{D?Se(D):k?ae.current&&Se(ae.current):E({place:u,offset:d,elementReference:K,tooltipReference:Y.current,tooltipArrowReference:U.current,strategy:m,middlewares:h}).then((e=>{me.current&&(Object.keys(e.tooltipStyles).length&&ee(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&re(e.tooltipArrowStyles),J(e.place))}))};t.useEffect((()=>{Oe()}),[oe,K,P,B,u,d,m,D]),t.useEffect((()=>{if(!(null==W?void 0:W.current))return()=>null;const e=new ResizeObserver((()=>{Oe()}));return e.observe(W.current),()=>{e.disconnect()}}),[P,null==W?void 0:W.current]),t.useEffect((()=>{var e;const t=document.querySelector(`[id='${s}']`),r=[...fe,t];K&&r.includes(K)||X(null!==(e=fe[0])&&void 0!==e?e:t)}),[s,fe,K]),t.useEffect((()=>()=>{V.current&&clearTimeout(V.current),Z.current&&clearTimeout(Z.current)}),[]),t.useEffect((()=>{let t=a;if(!t&&e&&(t=`[data-tooltip-id='${e}']`),t)try{const e=Array.from(document.querySelectorAll(t));pe(e)}catch(e){pe([])}}),[e,a]);const Re=!N&&P&&oe&&Object.keys(Q).length>0;return le?l.default.createElement(R,{id:e,role:"tooltip",className:c.default("react-tooltip",S,O.tooltip,O[n],r,`react-tooltip__place-${G}`,{[T]:Re,[_]:"fixed"===m,[A]:I}),style:{...B,...Q},ref:Y},P,l.default.createElement(R,{className:c.default("react-tooltip-arrow",g,O.arrow,o,{[b]:C}),style:te,ref:U})):null},L=({content:e})=>l.default.createElement("span",{dangerouslySetInnerHTML:{__html:e}});u({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"}),u({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)}`}),e.Tooltip=({id:e,anchorId:r,anchorSelect:o,content:n,html:c,render:s,className:a,classNameArrow:u,variant:i="dark",place:d="top",offset:f=10,wrapper:p="div",children:m=null,events:y=["hover"],openOnClick:h=!1,positionStrategy:w="absolute",middlewares:E,delayShow:S=0,delayHide:_=0,float:g=!1,hidden:b=!1,noArrow:A=!1,clickable:T=!1,closeOnEsc:O=!1,closeOnScroll:x=!1,closeOnResize:k=!1,style:N,position:C,isOpen:I,setIsOpen:$,afterShow:j,afterHide:q})=>{const[B,D]=t.useState(n),[H,M]=t.useState(c),[P,W]=t.useState(d),[z,F]=t.useState(i),[K,X]=t.useState(f),[Y,U]=t.useState(S),[V,Z]=t.useState(_),[G,J]=t.useState(g),[Q,ee]=t.useState(b),[te,re]=t.useState(p),[oe,ne]=t.useState(y),[le,ce]=t.useState(w),[se,ae]=t.useState(null),{anchorRefs:ue,activeAnchor:ie}=v(e),de=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}),{}),fe=e=>{const t={place:e=>{var t;W(null!==(t=e)&&void 0!==t?t:d)},content:e=>{D(null!=e?e:n)},html:e=>{M(null!=e?e:c)},variant:e=>{var t;F(null!==(t=e)&&void 0!==t?t:i)},offset:e=>{X(null===e?f:Number(e))},wrapper:e=>{var t;re(null!==(t=e)&&void 0!==t?t:p)},events:e=>{const t=null==e?void 0:e.split(" ");ne(null!=t?t:y)},"position-strategy":e=>{var t;ce(null!==(t=e)&&void 0!==t?t:w)},"delay-show":e=>{U(null===e?S:Number(e))},"delay-hide":e=>{Z(null===e?_:Number(e))},float:e=>{J(null===e?g:"true"===e)},hidden:e=>{ee(null===e?b:"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)}))};t.useEffect((()=>{D(n)}),[n]),t.useEffect((()=>{M(c)}),[c]),t.useEffect((()=>{W(d)}),[d]),t.useEffect((()=>{F(i)}),[i]),t.useEffect((()=>{X(f)}),[f]),t.useEffect((()=>{U(S)}),[S]),t.useEffect((()=>{Z(_)}),[_]),t.useEffect((()=>{J(g)}),[g]),t.useEffect((()=>{ee(b)}),[b]),t.useEffect((()=>{ce(w)}),[w]),t.useEffect((()=>{var t;const n=new Set(ue);let l=o;if(!l&&e&&(l=`[data-tooltip-id='${e}']`),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 c=document.querySelector(`[id='${r}']`);if(c&&n.add({current:c}),!n.size)return()=>null;const s=null!==(t=null!=se?se:c)&&void 0!==t?t:ie.current,a=new MutationObserver((e=>{e.forEach((e=>{var t;if(!s||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const r=de(s);fe(r)}))})),u={attributes:!0,childList:!1,subtree:!1};if(s){const e=de(s);fe(e),a.observe(s,u)}return()=>{a.disconnect()}}),[ue,ie,se,r,o]);let pe=m;const me=t.useRef(null);if(s){const e=s({content:null!=B?B:null,activeAnchor:se});pe=e?l.default.createElement("div",{ref:me,className:"react-tooltip-content-wrapper"},e):null}else B&&(pe=B);H&&(pe=l.default.createElement(L,{content:H}));const ve={id:e,anchorId:r,anchorSelect:o,className:a,classNameArrow:u,content:pe,contentWrapperRef:me,place:P,variant:z,offset:K,wrapper:te,events:oe,openOnClick:h,positionStrategy:le,middlewares:E,delayShow:Y,delayHide:V,float:G,hidden:Q,noArrow:A,clickable:T,closeOnEsc:O,closeOnScroll:x,closeOnResize:k,style:N,position:C,isOpen:I,setIsOpen:$,afterShow:j,afterHide:q,activeAnchor:se,setActiveAnchor:e=>ae(e)};return l.default.createElement(R,{...ve})},e.TooltipProvider=({children:e})=>{const[r,o]=t.useState({[d]:new Set}),[n,c]=t.useState({[d]:{current:null}}),s=(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}))},u=t.useCallback(((e=d)=>{var t,o;return{anchorRefs:null!==(t=r[e])&&void 0!==t?t:new Set,activeAnchor:null!==(o=n[e])&&void 0!==o?o:{current:null},attach:(...t)=>s(e,...t),detach:(...t)=>a(e,...t),setActiveAnchor:t=>((e,t)=>{c((r=>{var o;return(null===(o=r[e])||void 0===o?void 0:o.current)===t.current?r:{...r,[e]:t}}))})(e,t)}}),[r,n,s,a]),i=t.useMemo((()=>({getTooltipData:u})),[u]);return l.default.createElement(m.Provider,{value:i},e)},e.TooltipWrapper=({tooltipId:e,children:r,className:o,place:n,content:s,html:a,variant:u,offset:i,wrapper:d,events:f,positionStrategy:p,delayShow:m,delayHide:y})=>{const{attach:h,detach:w}=v(e),E=t.useRef(null);return t.useEffect((()=>(h(E),()=>{w(E)})),[]),l.default.createElement("span",{ref:E,className:c.default("react-tooltip-wrapper",o),"data-tooltip-place":n,"data-tooltip-content":s,"data-tooltip-html":a,"data-tooltip-variant":u,"data-tooltip-offset":i,"data-tooltip-wrapper":d,"data-tooltip-events":f,"data-tooltip-position-strategy":p,"data-tooltip-delay-show":m,"data-tooltip-delay-hide":y},r)},e.removeStyle=function({type:e="base",id:t=a}={}){"core"===e&&(t=s);const r=document.getElementById(t);null==r||r.remove()},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "react-tooltip",
-  "version": "5.16.0-beta.10410.0",
+  "version": "5.16.0",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "scripts": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

636027

increased by0.19%

Lines of code

3951

increased by0.59%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes