react-tooltip 5.26.1 → 5.26.2
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 +39 -22
- 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 +39 -22
- package/dist/react-tooltip.mjs.map +1 -1
- package/dist/react-tooltip.umd.js +39 -22
- 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
|
@@ -344,6 +344,28 @@ const cssTimeToMs = (time) => {
|
|
|
344
344
|
return Number(amount) * (unit === 'ms' ? 1 : 1000);
|
|
345
345
|
};
|
|
346
346
|
|
|
347
|
+
const isObject = (object) => {
|
|
348
|
+
return object !== null && typeof object === 'object';
|
|
349
|
+
};
|
|
350
|
+
const deepEqual = (object1, object2) => {
|
|
351
|
+
if (!isObject(object1) || !isObject(object2)) {
|
|
352
|
+
return object1 === object2;
|
|
353
|
+
}
|
|
354
|
+
const keys1 = Object.keys(object1);
|
|
355
|
+
const keys2 = Object.keys(object2);
|
|
356
|
+
if (keys1.length !== keys2.length) {
|
|
357
|
+
return false;
|
|
358
|
+
}
|
|
359
|
+
return keys1.every((key) => {
|
|
360
|
+
const val1 = object1[key];
|
|
361
|
+
const val2 = object2[key];
|
|
362
|
+
if (isObject(val1) && isObject(val2)) {
|
|
363
|
+
return deepEqual(val1, val2);
|
|
364
|
+
}
|
|
365
|
+
return val1 === val2;
|
|
366
|
+
});
|
|
367
|
+
};
|
|
368
|
+
|
|
347
369
|
var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
|
|
348
370
|
|
|
349
371
|
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"};
|
|
@@ -359,9 +381,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
359
381
|
const tooltipShowDelayTimerRef = useRef(null);
|
|
360
382
|
const tooltipHideDelayTimerRef = useRef(null);
|
|
361
383
|
const missedTransitionTimerRef = useRef(null);
|
|
362
|
-
const [
|
|
363
|
-
|
|
364
|
-
|
|
384
|
+
const [computedPosition, setComputedPosition] = useState({
|
|
385
|
+
tooltipStyles: {},
|
|
386
|
+
tooltipArrowStyles: {},
|
|
387
|
+
place,
|
|
388
|
+
});
|
|
365
389
|
const [show, setShow] = useState(false);
|
|
366
390
|
const [rendered, setRendered] = useState(false);
|
|
367
391
|
const [imperativeOptions, setImperativeOptions] = useState(null);
|
|
@@ -519,6 +543,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
519
543
|
}, transitionShowDelay + 25);
|
|
520
544
|
}
|
|
521
545
|
}, [show]);
|
|
546
|
+
const handleComputedPosition = (newComputedPosition) => {
|
|
547
|
+
setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
|
|
548
|
+
? oldComputedPosition
|
|
549
|
+
: newComputedPosition);
|
|
550
|
+
};
|
|
522
551
|
const handleShowTooltipDelayed = (delay = delayShow) => {
|
|
523
552
|
if (tooltipShowDelayTimerRef.current) {
|
|
524
553
|
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
@@ -611,13 +640,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
611
640
|
middlewares,
|
|
612
641
|
border,
|
|
613
642
|
}).then((computedStylesData) => {
|
|
614
|
-
|
|
615
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
616
|
-
}
|
|
617
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
618
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
619
|
-
}
|
|
620
|
-
setActualPlacement(computedStylesData.place);
|
|
643
|
+
handleComputedPosition(computedStylesData);
|
|
621
644
|
});
|
|
622
645
|
};
|
|
623
646
|
const handlePointerMove = (event) => {
|
|
@@ -710,13 +733,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
710
733
|
// invalidate computed positions after remount
|
|
711
734
|
return;
|
|
712
735
|
}
|
|
713
|
-
|
|
714
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
715
|
-
}
|
|
716
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
717
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
718
|
-
}
|
|
719
|
-
setActualPlacement(computedStylesData.place);
|
|
736
|
+
handleComputedPosition(computedStylesData);
|
|
720
737
|
});
|
|
721
738
|
}, [
|
|
722
739
|
show,
|
|
@@ -1059,7 +1076,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1059
1076
|
}
|
|
1060
1077
|
}, [delayShow]);
|
|
1061
1078
|
const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
|
|
1062
|
-
const canShow = show && Object.keys(
|
|
1079
|
+
const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
|
|
1063
1080
|
useImperativeHandle(forwardRef, () => ({
|
|
1064
1081
|
open: (options) => {
|
|
1065
1082
|
if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
|
|
@@ -1091,10 +1108,10 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1091
1108
|
}
|
|
1092
1109
|
},
|
|
1093
1110
|
activeAnchor,
|
|
1094
|
-
place:
|
|
1111
|
+
place: computedPosition.place,
|
|
1095
1112
|
isOpen: Boolean(rendered && !hidden && actualContent && canShow),
|
|
1096
1113
|
}));
|
|
1097
|
-
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-${
|
|
1114
|
+
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) => {
|
|
1098
1115
|
if (missedTransitionTimerRef.current) {
|
|
1099
1116
|
clearTimeout(missedTransitionTimerRef.current);
|
|
1100
1117
|
}
|
|
@@ -1106,12 +1123,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1106
1123
|
afterHide === null || afterHide === void 0 ? void 0 : afterHide();
|
|
1107
1124
|
}, style: {
|
|
1108
1125
|
...externalStyles,
|
|
1109
|
-
...
|
|
1126
|
+
...computedPosition.tooltipStyles,
|
|
1110
1127
|
opacity: opacity !== undefined && canShow ? opacity : undefined,
|
|
1111
1128
|
}, ref: tooltipRef },
|
|
1112
1129
|
actualContent,
|
|
1113
1130
|
React.createElement(WrapperElement, { className: classNames('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
|
|
1114
|
-
...
|
|
1131
|
+
...computedPosition.tooltipArrowStyles,
|
|
1115
1132
|
background: arrowColor
|
|
1116
1133
|
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
|
|
1117
1134
|
: undefined,
|