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.cjs
CHANGED
|
@@ -51,11 +51,7 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
|
|
|
51
51
|
}
|
|
52
52
|
const { insertAt } = ref;
|
|
53
53
|
if (document.getElementById(id)) {
|
|
54
|
-
// this
|
|
55
|
-
{
|
|
56
|
-
// eslint-disable-next-line no-console
|
|
57
|
-
console.warn(`[react-tooltip] Element with id '${id}' already exists. Call \`removeStyle()\` first`);
|
|
58
|
-
}
|
|
54
|
+
// this could happen in cases the tooltip is imported by multiple js modules
|
|
59
55
|
return;
|
|
60
56
|
}
|
|
61
57
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -291,6 +287,14 @@ const getScrollParent = (node) => {
|
|
|
291
287
|
|
|
292
288
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
293
289
|
|
|
290
|
+
const clearTimeoutRef = (ref) => {
|
|
291
|
+
if (ref.current) {
|
|
292
|
+
clearTimeout(ref.current);
|
|
293
|
+
// eslint-disable-next-line no-param-reassign
|
|
294
|
+
ref.current = null;
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
|
|
294
298
|
const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
|
|
295
299
|
const DEFAULT_CONTEXT_DATA = {
|
|
296
300
|
anchorRefs: new Set(),
|
|
@@ -545,9 +549,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
545
549
|
if (show === wasShowing.current) {
|
|
546
550
|
return;
|
|
547
551
|
}
|
|
548
|
-
|
|
549
|
-
clearTimeout(missedTransitionTimerRef.current);
|
|
550
|
-
}
|
|
552
|
+
clearTimeoutRef(missedTransitionTimerRef);
|
|
551
553
|
wasShowing.current = show;
|
|
552
554
|
if (show) {
|
|
553
555
|
afterShow === null || afterShow === void 0 ? void 0 : afterShow();
|
|
@@ -576,9 +578,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
576
578
|
: newComputedPosition);
|
|
577
579
|
};
|
|
578
580
|
const handleShowTooltipDelayed = (delay = delayShow) => {
|
|
579
|
-
|
|
580
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
581
|
-
}
|
|
581
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
582
582
|
if (rendered) {
|
|
583
583
|
// if the tooltip is already rendered, ignore delay
|
|
584
584
|
handleShow(true);
|
|
@@ -589,9 +589,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
589
589
|
}, delay);
|
|
590
590
|
};
|
|
591
591
|
const handleHideTooltipDelayed = (delay = delayHide) => {
|
|
592
|
-
|
|
593
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
594
|
-
}
|
|
592
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
595
593
|
tooltipHideDelayTimerRef.current = setTimeout(() => {
|
|
596
594
|
if (hoveringTooltip.current) {
|
|
597
595
|
return;
|
|
@@ -622,9 +620,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
622
620
|
}
|
|
623
621
|
setActiveAnchor(target);
|
|
624
622
|
setProviderActiveAnchor({ current: target });
|
|
625
|
-
|
|
626
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
627
|
-
}
|
|
623
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
628
624
|
};
|
|
629
625
|
const handleHideTooltip = () => {
|
|
630
626
|
if (clickable) {
|
|
@@ -637,9 +633,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
637
633
|
else {
|
|
638
634
|
handleShow(false);
|
|
639
635
|
}
|
|
640
|
-
|
|
641
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
642
|
-
}
|
|
636
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
643
637
|
};
|
|
644
638
|
const handleTooltipPosition = ({ x, y }) => {
|
|
645
639
|
var _a;
|
|
@@ -700,9 +694,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
700
694
|
return;
|
|
701
695
|
}
|
|
702
696
|
handleShow(false);
|
|
703
|
-
|
|
704
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
705
|
-
}
|
|
697
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
706
698
|
};
|
|
707
699
|
// debounce handler to prevent call twice when
|
|
708
700
|
// mouse enter and focus events being triggered toggether
|
|
@@ -986,12 +978,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
986
978
|
setRendered(false);
|
|
987
979
|
handleShow(false);
|
|
988
980
|
setActiveAnchor(null);
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
}
|
|
992
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
993
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
994
|
-
}
|
|
981
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
982
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
995
983
|
return true;
|
|
996
984
|
}
|
|
997
985
|
return false;
|
|
@@ -1070,12 +1058,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1070
1058
|
handleShow(true);
|
|
1071
1059
|
}
|
|
1072
1060
|
return () => {
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
}
|
|
1076
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
1077
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
1078
|
-
}
|
|
1061
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
1062
|
+
clearTimeoutRef(tooltipHideDelayTimerRef);
|
|
1079
1063
|
};
|
|
1080
1064
|
}, []);
|
|
1081
1065
|
React.useEffect(() => {
|
|
@@ -1098,7 +1082,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1098
1082
|
}, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
|
|
1099
1083
|
React.useEffect(() => {
|
|
1100
1084
|
if (tooltipShowDelayTimerRef.current) {
|
|
1101
|
-
|
|
1085
|
+
/**
|
|
1086
|
+
* if the delay changes while the tooltip is waiting to show,
|
|
1087
|
+
* reset the timer with the new delay
|
|
1088
|
+
*/
|
|
1089
|
+
clearTimeoutRef(tooltipShowDelayTimerRef);
|
|
1102
1090
|
handleShowTooltipDelayed(delayShow);
|
|
1103
1091
|
}
|
|
1104
1092
|
}, [delayShow]);
|
|
@@ -1139,9 +1127,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1139
1127
|
isOpen: Boolean(rendered && !hidden && actualContent && canShow),
|
|
1140
1128
|
}));
|
|
1141
1129
|
return rendered && !hidden && actualContent ? (React__default["default"].createElement(WrapperElement, { id: id, role: role, className: classNames__default["default"]('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) => {
|
|
1142
|
-
|
|
1143
|
-
clearTimeout(missedTransitionTimerRef.current);
|
|
1144
|
-
}
|
|
1130
|
+
clearTimeoutRef(missedTransitionTimerRef);
|
|
1145
1131
|
if (show || event.propertyName !== 'opacity') {
|
|
1146
1132
|
return;
|
|
1147
1133
|
}
|