react-tooltip 5.26.1-beta.1169.0 → 5.26.1-beta.1170.0
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 -40
- 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 -40
- package/dist/react-tooltip.mjs.map +1 -1
- package/dist/react-tooltip.umd.js +25 -40
- 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
|
@@ -353,28 +353,6 @@ const cssTimeToMs = (time) => {
|
|
|
353
353
|
return Number(amount) * (unit === 'ms' ? 1 : 1000);
|
|
354
354
|
};
|
|
355
355
|
|
|
356
|
-
const isObject = (object) => {
|
|
357
|
-
return object !== null && typeof object === 'object';
|
|
358
|
-
};
|
|
359
|
-
const deepEqual = (object1, object2) => {
|
|
360
|
-
if (!isObject(object1) || !isObject(object2)) {
|
|
361
|
-
return object1 === object2;
|
|
362
|
-
}
|
|
363
|
-
const keys1 = Object.keys(object1);
|
|
364
|
-
const keys2 = Object.keys(object2);
|
|
365
|
-
if (keys1.length !== keys2.length) {
|
|
366
|
-
return false;
|
|
367
|
-
}
|
|
368
|
-
return keys1.every((key) => {
|
|
369
|
-
const val1 = object1[key];
|
|
370
|
-
const val2 = object2[key];
|
|
371
|
-
if (isObject(val1) && isObject(val2)) {
|
|
372
|
-
return deepEqual(val1, val2);
|
|
373
|
-
}
|
|
374
|
-
return val1 === val2;
|
|
375
|
-
});
|
|
376
|
-
};
|
|
377
|
-
|
|
378
356
|
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"};
|
|
379
357
|
|
|
380
358
|
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"};
|
|
@@ -385,17 +363,14 @@ forwardRef, id, className, classNameArrow, variant = 'dark', anchorId, anchorSel
|
|
|
385
363
|
// props handled by controller
|
|
386
364
|
content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
|
|
387
365
|
var _a;
|
|
388
|
-
console.log('render');
|
|
389
366
|
const tooltipRef = React.useRef(null);
|
|
390
367
|
const tooltipArrowRef = React.useRef(null);
|
|
391
368
|
const tooltipShowDelayTimerRef = React.useRef(null);
|
|
392
369
|
const tooltipHideDelayTimerRef = React.useRef(null);
|
|
393
370
|
const missedTransitionTimerRef = React.useRef(null);
|
|
394
|
-
const [
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
place,
|
|
398
|
-
});
|
|
371
|
+
const [actualPlacement, setActualPlacement] = React.useState(place);
|
|
372
|
+
const [inlineStyles, setInlineStyles] = React.useState({});
|
|
373
|
+
const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
|
|
399
374
|
const [show, setShow] = React.useState(false);
|
|
400
375
|
const [rendered, setRendered] = React.useState(false);
|
|
401
376
|
const [imperativeOptions, setImperativeOptions] = React.useState(null);
|
|
@@ -553,11 +528,6 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
553
528
|
}, transitionShowDelay + 25);
|
|
554
529
|
}
|
|
555
530
|
}, [show]);
|
|
556
|
-
const handleComputedPosition = (newComputedPosition) => {
|
|
557
|
-
setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
|
|
558
|
-
? oldComputedPosition
|
|
559
|
-
: newComputedPosition);
|
|
560
|
-
};
|
|
561
531
|
const handleShowTooltipDelayed = (delay = delayShow) => {
|
|
562
532
|
if (tooltipShowDelayTimerRef.current) {
|
|
563
533
|
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
@@ -645,7 +615,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
645
615
|
middlewares,
|
|
646
616
|
border,
|
|
647
617
|
}).then((computedStylesData) => {
|
|
648
|
-
|
|
618
|
+
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
619
|
+
setInlineStyles(computedStylesData.tooltipStyles);
|
|
620
|
+
}
|
|
621
|
+
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
622
|
+
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
623
|
+
}
|
|
624
|
+
setActualPlacement(computedStylesData.place);
|
|
649
625
|
});
|
|
650
626
|
};
|
|
651
627
|
const handlePointerMove = (event) => {
|
|
@@ -666,6 +642,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
666
642
|
return;
|
|
667
643
|
}
|
|
668
644
|
const target = event.target;
|
|
645
|
+
if (!target.isConnected) {
|
|
646
|
+
return;
|
|
647
|
+
}
|
|
669
648
|
if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
|
|
670
649
|
return;
|
|
671
650
|
}
|
|
@@ -735,7 +714,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
735
714
|
// invalidate computed positions after remount
|
|
736
715
|
return;
|
|
737
716
|
}
|
|
738
|
-
|
|
717
|
+
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
718
|
+
setInlineStyles(computedStylesData.tooltipStyles);
|
|
719
|
+
}
|
|
720
|
+
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
721
|
+
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
722
|
+
}
|
|
723
|
+
setActualPlacement(computedStylesData.place);
|
|
739
724
|
});
|
|
740
725
|
}, [
|
|
741
726
|
show,
|
|
@@ -1070,7 +1055,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1070
1055
|
}
|
|
1071
1056
|
}, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
|
|
1072
1057
|
const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
|
|
1073
|
-
const canShow = show && Object.keys(
|
|
1058
|
+
const canShow = show && Object.keys(inlineStyles).length > 0;
|
|
1074
1059
|
React.useImperativeHandle(forwardRef, () => ({
|
|
1075
1060
|
open: (options) => {
|
|
1076
1061
|
if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
|
|
@@ -1102,10 +1087,10 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1102
1087
|
}
|
|
1103
1088
|
},
|
|
1104
1089
|
activeAnchor,
|
|
1105
|
-
place:
|
|
1090
|
+
place: actualPlacement,
|
|
1106
1091
|
isOpen: Boolean(rendered && !hidden && actualContent && canShow),
|
|
1107
1092
|
}));
|
|
1108
|
-
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-${
|
|
1093
|
+
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-${actualPlacement}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
|
|
1109
1094
|
if (missedTransitionTimerRef.current) {
|
|
1110
1095
|
clearTimeout(missedTransitionTimerRef.current);
|
|
1111
1096
|
}
|
|
@@ -1117,12 +1102,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
|
|
|
1117
1102
|
afterHide === null || afterHide === void 0 ? void 0 : afterHide();
|
|
1118
1103
|
}, style: {
|
|
1119
1104
|
...externalStyles,
|
|
1120
|
-
...
|
|
1105
|
+
...inlineStyles,
|
|
1121
1106
|
opacity: opacity !== undefined && canShow ? opacity : undefined,
|
|
1122
1107
|
}, ref: tooltipRef },
|
|
1123
1108
|
actualContent,
|
|
1124
1109
|
React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
|
|
1125
|
-
...
|
|
1110
|
+
...inlineArrowStyles,
|
|
1126
1111
|
background: arrowColor
|
|
1127
1112
|
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
|
|
1128
1113
|
: undefined,
|