react-tooltip 5.15.0-beta.1041.0 → 5.15.0-beta.1045.1

package/dist/react-tooltip.cjs

@@ -18,45 +18,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last
-function injectStyle(css, id = REACT_TOOLTIP_STYLES_ID, ref) {
-    if (!ref) {
-        // eslint-disable-next-line no-param-reassign
-        ref = {};
-    }
-    const { insertAt } = ref;
-    if (!css || typeof document === 'undefined' || document.getElementById(REACT_TOOLTIP_STYLES_ID)) {
-        return;
-    }
-    const head = document.head || document.getElementsByTagName('head')[0];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const style = document.createElement('style');
-    style.id = id;
-    style.type = 'text/css';
-    if (insertAt === 'top') {
-        if (head.firstChild) {
-            head.insertBefore(style, head.firstChild);
-        }
-        else {
-            head.appendChild(style);
-        }
-    }
-    else {
-        head.appendChild(style);
-    }
-    if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-    }
-    else {
-        style.appendChild(document.createTextNode(css));
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
-}
-function removeStyle(id = REACT_TOOLTIP_STYLES_ID) {
-    const style = document.getElementById(id);
-    style === null || style === void 0 ? void 0 : style.remove();
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
 }
 
+var css_248z$1 = ":root {\n  --rt-color-white: #fff;\n  --rt-color-dark: #222;\n  --rt-color-success: #8dc572;\n  --rt-color-error: #be6464;\n  --rt-color-warning: #f0ad4e;\n  --rt-color-info: #337ab7;\n  --rt-opacity: 0.9;\n}\n";
+styleInject(css_248z$1);
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * This function debounce the received function
@@ -190,6 +181,30 @@ const TooltipWrapper = ({ tooltipId, children, className, place, content, html,
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
+const isScrollable = (node) => {
+    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        return null;
+    }
+    const style = getComputedStyle(node);
+    return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
+        const value = style.getPropertyValue(propertyName);
+        return value === 'auto' || value === 'scroll';
+    });
+};
+const getScrollParent = (node) => {
+    if (!node) {
+        return null;
+    }
+    let currentParent = node.parentElement;
+    while (currentParent) {
+        if (isScrollable(currentParent)) {
+            return currentParent;
+        }
+        currentParent = currentParent.parentElement;
+    }
+    return document.scrollingElement || document.documentElement;
+};
+
 const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [dom.offset(Number(offsetValue)), dom.flip(), dom.shift({ padding: 5 })], }) => {
     if (!elementReference) {
         // elementReference can be null or undefined and we will not compute the position
@@ -237,9 +252,9 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
     });
 };
 
-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"};
-
-var styles = {"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"};
+var css_248z = ".styles-module_tooltip__mnnfp {\n  visibility: hidden;\n  width: max-content;\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 8px 16px;\n  border-radius: 3px;\n  font-size: 90%;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.3s ease-out;\n  will-change: opacity, visibility;\n}\n\n.styles-module_fixed__7ciUi {\n  position: fixed;\n}\n\n.styles-module_arrow__K0L3T {\n  position: absolute;\n  background: inherit;\n  width: 8px;\n  height: 8px;\n  transform: rotate(45deg);\n}\n\n.styles-module_noArrow__T8y2L {\n  display: none;\n}\n\n.styles-module_clickable__Bv9o7 {\n  pointer-events: auto;\n}\n\n.styles-module_show__2NboJ {\n  visibility: visible;\n  opacity: var(--rt-opacity);\n}\n\n/** Types variant **/\n.styles-module_dark__xNqje {\n  background: var(--rt-color-dark);\n  color: var(--rt-color-white);\n}\n\n.styles-module_light__Z6W-X {\n  background-color: var(--rt-color-white);\n  color: var(--rt-color-dark);\n}\n\n.styles-module_success__A2AKt {\n  background-color: var(--rt-color-success);\n  color: var(--rt-color-white);\n}\n\n.styles-module_warning__SCK0X {\n  background-color: var(--rt-color-warning);\n  color: var(--rt-color-white);\n}\n\n.styles-module_error__JvumD {\n  background-color: var(--rt-color-error);\n  color: var(--rt-color-white);\n}\n\n.styles-module_info__BWdHW {\n  background-color: var(--rt-color-info);\n  color: var(--rt-color-white);\n}\n";
+var styles = {"tooltip":"styles-module_tooltip__mnnfp","fixed":"styles-module_fixed__7ciUi","arrow":"styles-module_arrow__K0L3T","noArrow":"styles-module_noArrow__T8y2L","clickable":"styles-module_clickable__Bv9o7","show":"styles-module_show__2NboJ","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"};
+styleInject(css_248z);
 
 const Tooltip = ({ 
 // props
@@ -468,12 +483,6 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, })
         }
         handleShow(false);
     };
-    const handleEsc = (event) => {
-        if (event.key !== 'Escape') {
-            return;
-        }
-        handleShow(false);
-    };
     // debounce handler to prevent call twice when
     // mouse enter and focus events being triggered toggether
     const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
@@ -488,12 +497,25 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, })
         if (anchorById) {
             elementRefs.add({ current: anchorById });
         }
+        const handleScrollResize = () => {
+            handleShow(false);
+        };
+        const anchorScrollParent = getScrollParent(activeAnchor);
+        const tooltipScrollParent = getScrollParent(tooltipRef.current);
         if (closeOnScroll) {
-            window.addEventListener('scroll', debouncedHandleHideTooltip);
+            window.addEventListener('scroll', handleScrollResize);
+            anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
+            tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
         }
         if (closeOnResize) {
-            window.addEventListener('resize', debouncedHandleHideTooltip);
+            window.addEventListener('resize', handleScrollResize);
         }
+        const handleEsc = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            handleShow(false);
+        };
         if (closeOnEsc) {
             window.addEventListener('keydown', handleEsc);
         }
@@ -531,10 +553,12 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, })
         return () => {
             var _a, _b;
             if (closeOnScroll) {
-                window.removeEventListener('scroll', debouncedHandleHideTooltip);
+                window.removeEventListener('scroll', handleScrollResize);
+                anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
+                tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.removeEventListener('scroll', handleScrollResize);
             }
             if (closeOnResize) {
-                window.removeEventListener('resize', debouncedHandleHideTooltip);
+                window.removeEventListener('resize', handleScrollResize);
             }
             if (shouldOpenOnClick) {
                 window.removeEventListener('click', handleClickOutsideAnchors);
@@ -720,18 +744,18 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, })
         }
     }, [id, anchorSelect]);
     const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
-    return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
-            [coreStyles['show']]: canShow,
-            [coreStyles['fixed']]: positionStrategy === 'fixed',
-            [coreStyles['clickable']]: clickable,
+    return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
+            [styles['show']]: canShow,
+            [styles['fixed']]: positionStrategy === 'fixed',
+            [styles['clickable']]: clickable,
         }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef },
         content,
-        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, {
+        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', styles['arrow'], classNameArrow, {
                 /**
                  * changed from dash `no-arrow` to camelcase because of:
                  * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
                  */
-                [coreStyles['noArrow']]: noArrow,
+                [styles['noArrow']]: noArrow,
             }), style: inlineArrowStyles, ref: tooltipArrowRef }))) : null;
 };
 
@@ -962,98 +986,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
     return React__default["default"].createElement(Tooltip, { ...props });
 };
 
-// those content will be replaced in build time with the `react-tooltip.css` builded content
-const TooltipCoreStyles = `:root {
-  --rt-color-white: #fff;
-  --rt-color-dark: #222;
-  --rt-color-success: #8dc572;
-  --rt-color-error: #be6464;
-  --rt-color-warning: #f0ad4e;
-  --rt-color-info: #337ab7;
-  --rt-opacity: 0.9;
-}
-
-.core-styles-module_tooltip__3vRRp {
-  visibility: hidden;
-  width: max-content;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px 16px;
-  border-radius: 3px;
-  font-size: 90%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
-}
-
-.core-styles-module_fixed__pcSol {
-  position: fixed;
-}
-
-.core-styles-module_arrow__cvMwQ {
-  position: absolute;
-  background: inherit;
-}
-
-.core-styles-module_noArrow__xock6 {
-  display: none;
-}
-
-.core-styles-module_clickable__ZuTTB {
-  pointer-events: auto;
-}
-
-.core-styles-module_show__Nt9eE {
-  visibility: visible;
-  opacity: var(--rt-opacity);
-}
-
-`;
-const TooltipStyles = `
-
-.styles-module_arrow__K0L3T {
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-}
-
-/** Types variant **/
-.styles-module_dark__xNqje {
-  background: var(--rt-color-dark);
-  color: var(--rt-color-white);
-}
-
-.styles-module_light__Z6W-X {
-  background-color: var(--rt-color-white);
-  color: var(--rt-color-dark);
-}
-
-.styles-module_success__A2AKt {
-  background-color: var(--rt-color-success);
-  color: var(--rt-color-white);
-}
-
-.styles-module_warning__SCK0X {
-  background-color: var(--rt-color-warning);
-  color: var(--rt-color-white);
-}
-
-.styles-module_error__JvumD {
-  background-color: var(--rt-color-error);
-  color: var(--rt-color-white);
-}
-
-.styles-module_info__BWdHW {
-  background-color: var(--rt-color-info);
-  color: var(--rt-color-white);
-}
-`;
-injectStyle(TooltipCoreStyles, 'react-tooltip-core-styles');
-injectStyle(TooltipStyles);
-
 exports.Tooltip = TooltipController;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipWrapper = TooltipWrapper;
-exports.removeStyle = removeStyle;
+//# sourceMappingURL=react-tooltip.cjs.map