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.
@@ -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 [computedPosition, setComputedPosition] = React.useState({
395
- tooltipStyles: {},
396
- tooltipArrowStyles: {},
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
- handleComputedPosition(computedStylesData);
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
- handleComputedPosition(computedStylesData);
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(computedPosition.tooltipStyles).length > 0;
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: computedPosition.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-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
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
- ...computedPosition.tooltipStyles,
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
- ...computedPosition.tooltipArrowStyles,
1110
+ ...inlineArrowStyles,
1126
1111
  background: arrowColor
1127
1112
  ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
1128
1113
  : undefined,