react-tooltip 5.19.0-beta.1052.0 → 5.20.0

package/README.md

@@ -28,7 +28,7 @@ Why do we show ads on our docs?
 
 ## Demo
 
-[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
+[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/gallant-leftpad-8kvtn7?file=/src/App.js)
 
 Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/).
 

package/dist/react-tooltip.cjs

@@ -10,8 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
 var dom = require('@floating-ui/dom');
+var classNames = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +27,20 @@ const injected = {
     base: false,
 };
 function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', ref, }) {
+    var _a, _b;
+    if (!css || typeof document === 'undefined' || injected[type]) {
+        return;
+    }
+    if (type === 'core' &&
+        typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
+        ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_TOOLTIP_DISABLE_CORE_STYLES)) {
+        return;
+    }
+    if (type !== 'base' &&
+        typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
+        ((_b = process === null || process === void 0 ? void 0 : process.env) === null || _b === void 0 ? void 0 : _b.REACT_TOOLTIP_DISABLE_BASE_STYLES)) {
+        return;
+    }
     if (type === 'core') {
         // eslint-disable-next-line no-param-reassign
         id = REACT_TOOLTIP_CORE_STYLES_ID;
@@ -36,9 +50,6 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
         ref = {};
     }
     const { insertAt } = ref;
-    if (!css || typeof document === 'undefined' || injected[type]) {
-        return;
-    }
     if (document.getElementById(id)) {
         // this should never happen because of `injected[type]`
         {
@@ -71,6 +82,28 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
     }
     injected[type] = true;
 }
+/**
+ * @deprecated Use the `disableStyleInjection` tooltip prop instead.
+ * See https://react-tooltip.com/docs/examples/styling#disabling-reacttooltip-css
+ */
+function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, } = {}) {
+    if (!injected[type]) {
+        return;
+    }
+    if (type === 'core') {
+        // eslint-disable-next-line no-param-reassign
+        id = REACT_TOOLTIP_CORE_STYLES_ID;
+    }
+    const style = document.getElementById(id);
+    if ((style === null || style === void 0 ? void 0 : style.tagName) === 'style') {
+        style === null || style === void 0 ? void 0 : style.remove();
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.warn(`[react-tooltip] Failed to remove 'style' element with id '${id}'. Call \`injectStyle()\` first`);
+    }
+    injected[type] = false;
+}
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -536,6 +569,59 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     // mouse enter and focus events being triggered toggether
     const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
     const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
+    const updateTooltipPosition = React.useCallback(() => {
+        if (position) {
+            // if `position` is set, override regular and `float` positioning
+            handleTooltipPosition(position);
+            return;
+        }
+        if (float) {
+            if (lastFloatPosition.current) {
+                /*
+                  Without this, changes to `content`, `place`, `offset`, ..., will only
+                  trigger a position calculation after a `mousemove` event.
+        
+                  To see why this matters, comment this line, run `yarn dev` and click the
+                  "Hover me!" anchor.
+                */
+                handleTooltipPosition(lastFloatPosition.current);
+            }
+            // if `float` is set, override regular positioning
+            return;
+        }
+        computeTooltipPosition({
+            place,
+            offset,
+            elementReference: activeAnchor,
+            tooltipReference: tooltipRef.current,
+            tooltipArrowReference: tooltipArrowRef.current,
+            strategy: positionStrategy,
+            middlewares,
+            border,
+        }).then((computedStylesData) => {
+            if (!mounted.current) {
+                // invalidate computed positions after remount
+                return;
+            }
+            if (Object.keys(computedStylesData.tooltipStyles).length) {
+                setInlineStyles(computedStylesData.tooltipStyles);
+            }
+            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
+            }
+            setActualPlacement(computedStylesData.place);
+        });
+    }, [
+        show,
+        activeAnchor,
+        content,
+        externalStyles,
+        place,
+        offset,
+        positionStrategy,
+        position,
+        float,
+    ]);
     React.useEffect(() => {
         var _a, _b;
         const elementRefs = new Set(anchorRefs);
@@ -556,9 +642,17 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
             tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
         }
+        let updateTooltipCleanup = null;
         if (closeOnResize) {
             window.addEventListener('resize', handleScrollResize);
         }
+        else if (activeAnchor && tooltipRef.current) {
+            updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
+                ancestorResize: true,
+                elementResize: true,
+                layoutShift: true,
+            });
+        }
         const handleEsc = (event) => {
             if (event.key !== 'Escape') {
                 return;
@@ -609,6 +703,9 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             if (closeOnResize) {
                 window.removeEventListener('resize', handleScrollResize);
             }
+            else {
+                updateTooltipCleanup === null || updateTooltipCleanup === void 0 ? void 0 : updateTooltipCleanup();
+            }
             if (shouldOpenOnClick) {
                 window.removeEventListener('click', handleClickOutsideAnchors);
             }
@@ -630,7 +727,15 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
          * rendered is also a dependency to ensure anchor observers are re-registered
          * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
          */
-    }, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
+    }, [
+        activeAnchor,
+        updateTooltipPosition,
+        rendered,
+        anchorRefs,
+        anchorsBySelect,
+        closeOnEsc,
+        events,
+    ]);
     React.useEffect(() => {
         let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
         if (!selector && id) {
@@ -701,52 +806,9 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             documentObserver.disconnect();
         };
     }, [id, anchorSelect, activeAnchor]);
-    const updateTooltipPosition = () => {
-        if (position) {
-            // if `position` is set, override regular and `float` positioning
-            handleTooltipPosition(position);
-            return;
-        }
-        if (float) {
-            if (lastFloatPosition.current) {
-                /*
-                  Without this, changes to `content`, `place`, `offset`, ..., will only
-                  trigger a position calculation after a `mousemove` event.
-        
-                  To see why this matters, comment this line, run `yarn dev` and click the
-                  "Hover me!" anchor.
-                */
-                handleTooltipPosition(lastFloatPosition.current);
-            }
-            // if `float` is set, override regular positioning
-            return;
-        }
-        computeTooltipPosition({
-            place,
-            offset,
-            elementReference: activeAnchor,
-            tooltipReference: tooltipRef.current,
-            tooltipArrowReference: tooltipArrowRef.current,
-            strategy: positionStrategy,
-            middlewares,
-            border,
-        }).then((computedStylesData) => {
-            if (!mounted.current) {
-                // invalidate computed positions after remount
-                return;
-            }
-            if (Object.keys(computedStylesData.tooltipStyles).length) {
-                setInlineStyles(computedStylesData.tooltipStyles);
-            }
-            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
-                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
-            }
-            setActualPlacement(computedStylesData.place);
-        });
-    };
     React.useEffect(() => {
         updateTooltipPosition();
-    }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position]);
+    }, [updateTooltipPosition]);
     React.useEffect(() => {
         if (!(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
             return () => null;
@@ -801,6 +863,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     }, [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['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
+            'react-tooltip__show': canShow,
             [coreStyles['show']]: canShow,
             [coreStyles['fixed']]: positionStrategy === 'fixed',
             [coreStyles['clickable']]: clickable,
@@ -1191,3 +1254,4 @@ if (typeof window !== 'undefined') {
 exports.Tooltip = TooltipController;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipWrapper = TooltipWrapper;
+exports.removeStyle = removeStyle;