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.
@@ -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 [actualPlacement, setActualPlacement] = useState(place);
363
- const [inlineStyles, setInlineStyles] = useState({});
364
- const [inlineArrowStyles, setInlineArrowStyles] = useState({});
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
- if (Object.keys(computedStylesData.tooltipStyles).length) {
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
- if (Object.keys(computedStylesData.tooltipStyles).length) {
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(inlineStyles).length > 0;
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: actualPlacement,
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-${actualPlacement}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
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
- ...inlineStyles,
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
- ...inlineArrowStyles,
1131
+ ...computedPosition.tooltipArrowStyles,
1115
1132
  background: arrowColor
1116
1133
  ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
1117
1134
  : undefined,