react-tooltip 5.27.0 → 5.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-tooltip.cjs +25 -39
- package/dist/react-tooltip.cjs.map +1 -1
- package/dist/react-tooltip.min.cjs +2 -2
- package/dist/react-tooltip.min.cjs.map +1 -1
- package/dist/react-tooltip.min.mjs +2 -2
- package/dist/react-tooltip.min.mjs.map +1 -1
- package/dist/react-tooltip.mjs +25 -39
- package/dist/react-tooltip.mjs.map +1 -1
- package/dist/react-tooltip.umd.js +25 -39
- package/dist/react-tooltip.umd.js.map +1 -1
- package/dist/react-tooltip.umd.min.js +2 -2
- package/dist/react-tooltip.umd.min.js.map +1 -1
- package/package.json +1 -1
package/dist/react-tooltip.mjs
CHANGED
|
@@ -42,11 +42,7 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
|
|
|
42
42
|
}
|
|
43
43
|
const { insertAt } = ref;
|
|
44
44
|
if (document.getElementById(id)) {
|
|
45
|
-
// this
|
|
46
|
-
{
|
|
47
|
-
// eslint-disable-next-line no-console
|
|
48
|
-
console.warn(`[react-tooltip] Element with id '${id}' already exists. Call \`removeStyle()\` first`);
|
|
49
|
-
}
|
|
45
|
+
// this could happen in cases the tooltip is imported by multiple js modules
|
|
50
46
|
return;
|
|
51
47
|
}
|
|
52
48
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -282,6 +278,14 @@ const getScrollParent = (node) => {
|
|
|
282
278
|
|
|
283
279
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
284
280
|
|
|
281
|
+
const clearTimeoutRef = (ref) => {
|
|
282
|
+
if (ref.current) {
|
|
283
|
+
clearTimeout(ref.current);
|
|
284
|
+
// eslint-disable-next-line no-param-reassign
|
|
285
|
+
ref.current = null;
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
|
|
285
289
|
const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
|
|
286
290
|
const DEFAULT_CONTEXT_DATA = {
|
|
287
291
|
anchorRefs: new Set(),
|
|
@@ -536,9 +540,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
536
540
|
if (show === wasShowing.current) {
|
|
537
541
|
return;
|
|
538
542
|
}
|
|
539
|
-
|
|
540
|
-
clearTimeout(missedTransitionTimerRef.current);
|
|
541
|
-
}
|
|
543
|
+
clearTimeoutRef(missedTransitionTimerRef);
|
|
542
544
|
wasShowing.current = show;
|
|
543
545
|
if (show) {
|
|
544
546
|
afterShow === null || afterShow === void 0 ? void 0 : afterShow();
|
|
@@ -567,9 +569,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
567
569
|
: newComputedPosition);
|
|
568
570
|
};
|
|
569
571
|
const handleShowTooltipDelayed = (delay = delayShow) => {
|
|
570
|
-
|
|
571
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
572
|
-
}
|
|
572
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
573
573
|
if (rendered) {
|
|
574
574
|
// if the tooltip is already rendered, ignore delay
|
|
575
575
|
handleShow(true);
|
|
@@ -580,9 +580,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
580
580
|
}, delay);
|
|
581
581
|
};
|
|
582
582
|
const handleHideTooltipDelayed = (delay = delayHide) => {
|
|
583
|
-
|
|
584
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
585
|
-
}
|
|
583
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
586
584
|
tooltipHideDelayTimerRef.current = setTimeout(() => {
|
|
587
585
|
if (hoveringTooltip.current) {
|
|
588
586
|
return;
|
|
@@ -613,9 +611,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
613
611
|
}
|
|
614
612
|
setActiveAnchor(target);
|
|
615
613
|
setProviderActiveAnchor({ current: target });
|
|
616
|
-
|
|
617
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
618
|
-
}
|
|
614
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
619
615
|
};
|
|
620
616
|
const handleHideTooltip = () => {
|
|
621
617
|
if (clickable) {
|
|
@@ -628,9 +624,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
628
624
|
else {
|
|
629
625
|
handleShow(false);
|
|
630
626
|
}
|
|
631
|
-
|
|
632
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
633
|
-
}
|
|
627
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
634
628
|
};
|
|
635
629
|
const handleTooltipPosition = ({ x, y }) => {
|
|
636
630
|
var _a;
|
|
@@ -691,9 +685,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
691
685
|
return;
|
|
692
686
|
}
|
|
693
687
|
handleShow(false);
|
|
694
|
-
|
|
695
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
696
|
-
}
|
|
688
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
697
689
|
};
|
|
698
690
|
// debounce handler to prevent call twice when
|
|
699
691
|
// mouse enter and focus events being triggered toggether
|
|
@@ -977,12 +969,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
977
969
|
setRendered(false);
|
|
978
970
|
handleShow(false);
|
|
979
971
|
setActiveAnchor(null);
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
}
|
|
983
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
984
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
985
|
-
}
|
|
972
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
973
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
986
974
|
return true;
|
|
987
975
|
}
|
|
988
976
|
return false;
|
|
@@ -1061,12 +1049,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1061
1049
|
handleShow(true);
|
|
1062
1050
|
}
|
|
1063
1051
|
return () => {
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
}
|
|
1067
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
1068
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
1069
|
-
}
|
|
1052
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
1053
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
1070
1054
|
};
|
|
1071
1055
|
}, []);
|
|
1072
1056
|
useEffect(() => {
|
|
@@ -1089,7 +1073,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1089
1073
|
}, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
|
|
1090
1074
|
useEffect(() => {
|
|
1091
1075
|
if (tooltipShowDelayTimerRef.current) {
|
|
1092
|
-
|
|
1076
|
+
/**
|
|
1077
|
+
* if the delay changes while the tooltip is waiting to show,
|
|
1078
|
+
* reset the timer with the new delay
|
|
1079
|
+
*/
|
|
1080
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
1093
1081
|
handleShowTooltipDelayed(delayShow);
|
|
1094
1082
|
}
|
|
1095
1083
|
}, [delayShow]);
|
|
@@ -1130,9 +1118,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1130
1118
|
isOpen: Boolean(rendered && !hidden && actualContent && canShow),
|
|
1131
1119
|
}));
|
|
1132
1120
|
return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: role, className: classNames('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
|
|
1133
|
-
|
|
1134
|
-
clearTimeout(missedTransitionTimerRef.current);
|
|
1135
|
-
}
|
|
1121
|
+
clearTimeoutRef(missedTransitionTimerRef);
|
|
1136
1122
|
if (show || event.propertyName !== 'opacity') {
|
|
1137
1123
|
return;
|
|
1138
1124
|
}
|