react-tooltip 5.19.0-beta.1052.0 → 5.20.0

package/dist/react-tooltip.umd.js

@@ -6,10 +6,10 @@
 * @license MIT
 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('@floating-ui/dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', '@floating-ui/dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.classNames, global.FloatingUIDOM));
-})(this, (function (exports, React, classNames, dom) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@floating-ui/dom'), require('classnames')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@floating-ui/dom', 'classnames'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.FloatingUIDOM, global.classNames));
+})(this, (function (exports, React, dom, classNames) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +25,20 @@
         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;
@@ -34,9 +48,6 @@
             ref = {};
         }
         const { insertAt } = ref;
-        if (!css || typeof document === 'undefined' || injected[type]) {
-            return;
-        }
         if (document.getElementById(id)) {
             // this should never happen because of `injected[type]`
             {
@@ -69,6 +80,28 @@
         }
         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 */
     /**
@@ -534,6 +567,59 @@
         // 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);
@@ -554,9 +640,17 @@
                 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;
@@ -607,6 +701,9 @@
                 if (closeOnResize) {
                     window.removeEventListener('resize', handleScrollResize);
                 }
+                else {
+                    updateTooltipCleanup === null || updateTooltipCleanup === void 0 ? void 0 : updateTooltipCleanup();
+                }
                 if (shouldOpenOnClick) {
                     window.removeEventListener('click', handleClickOutsideAnchors);
                 }
@@ -628,7 +725,15 @@
              * 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) {
@@ -699,52 +804,9 @@
                 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;
@@ -799,6 +861,7 @@
         }, [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,
@@ -1189,6 +1252,7 @@
     exports.Tooltip = TooltipController;
     exports.TooltipProvider = TooltipProvider;
     exports.TooltipWrapper = TooltipWrapper;
+    exports.removeStyle = removeStyle;
 
     Object.defineProperty(exports, '__esModule', { value: true });