react-tooltip 5.22.0-beta.1091.0 → 5.22.0-beta.1106.0

package/README.md

@@ -58,17 +58,26 @@ yarn add react-tooltip
 
 ## Sponsors
 
+### Gold Sponsors 🌟
+
 <a href="https://frigade.com/?source=react-tooltip">
-  <img alt="Frigade" style="height: 250px" src="docs/static/img/sponsors/frigade.png" />
+  <img alt="Frigade" style="height: 250px;" src="docs/static/img/sponsors/frigade.png" />
 </a>
 
 React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
 
+#### Silver Sponsors ✪
+
+<a href="https://dopt.com/?source=react-tooltip">
+  <img alt="Dopt" style="height: 200px; width: 200px;" src="docs/static/img/sponsors/dopt.png" />
+</a>
+
 ## Usage
 
 1 . Import the CSS file to set default styling.
 
-> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
+> [!WARNING]\
+> If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
@@ -100,6 +109,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 
 4 . Include the `<Tooltip />` element.
 
+> [!NOTE]\
 > Don't forget to set the id, it won't work without it!
 
 ```jsx

package/dist/react-tooltip-tokens.css

@@ -6,4 +6,6 @@
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
+  --rt-transition-show-delay: 0.15s;
+  --rt-transition-closing-delay: 0.15s;
 }

package/dist/react-tooltip.cjs

@@ -327,7 +327,7 @@ 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 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"};
 
 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"};
 
@@ -335,7 +335,7 @@ const Tooltip = ({
 // props
 id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style: externalStyles, position, afterShow, afterHide, 
 // props handled by controller
-content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, }) => {
+content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, }) => {
     const tooltipRef = React.useRef(null);
     const tooltipArrowRef = React.useRef(null);
     const tooltipShowDelayTimerRef = React.useRef(null);
@@ -366,23 +366,6 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
             mounted.current = false;
         };
     }, []);
-    React.useEffect(() => {
-        if (!show) {
-            /**
-             * this fixes weird behavior when switching between two anchor elements very quickly
-             * remove the timeout and switch quickly between two adjancent anchor elements to see it
-             *
-             * in practice, this means the tooltip is not immediately removed from the DOM on hide
-             */
-            const timeout = setTimeout(() => {
-                setRendered(false);
-            }, 150);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-        return () => null;
-    }, [show]);
     const handleShow = (value) => {
         if (!mounted.current) {
             return;
@@ -646,7 +629,7 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         if (closeOnResize) {
             window.addEventListener('resize', handleScrollResize);
         }
-        else if (activeAnchor && tooltipRef.current && !holdPositionOnRender) {
+        else if (activeAnchor && tooltipRef.current) {
             updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
                 ancestorResize: true,
                 elementResize: true,
@@ -757,12 +740,20 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
                 if (activeAnchor) {
                     const elements = [...mutation.removedNodes].filter((node) => node.nodeType === 1);
                     if (selector) {
-                        removedAnchors.push(
-                        // the element itself is an anchor
-                        ...elements.filter((element) => element.matches(selector)));
-                        removedAnchors.push(
-                        // the element has children which are anchors
-                        ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
+                        try {
+                            removedAnchors.push(
+                            // the element itself is an anchor
+                            ...elements.filter((element) => element.matches(selector)));
+                            removedAnchors.push(
+                            // the element has children which are anchors
+                            ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
+                        }
+                        catch (_a) {
+                            /**
+                             * invalid CSS selector.
+                             * already warned on tooltip controller
+                             */
+                        }
                     }
                     elements.some((node) => {
                         var _a;
@@ -793,14 +784,14 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
                     // the element has children which are anchors
                     ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
                 }
-                catch (_a) {
+                catch (_b) {
                     /**
                      * invalid CSS selector.
                      * already warned on tooltip controller
                      */
                 }
             });
-            if (newAnchors.length) {
+            if (newAnchors.length || removedAnchors.length) {
                 setAnchorsBySelect((anchors) => [
                     ...anchors.filter((anchor) => removedAnchors.includes(anchor)),
                     ...newAnchors,
@@ -875,24 +866,22 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         }
     }, [id, anchorSelect]);
     const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
-    return rendered || (wasShowing.current && holdPositionOnRender) ? (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,
-        }), style: {
+    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}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
+            /**
+             * @warning if `--rt-transition-closing-delay` is set to 0,
+             * the tooltip will be stuck (but not visible) on the DOM
+             */
+            if (show || event.propertyName !== 'opacity') {
+                return;
+            }
+            setRendered(false);
+        }, style: {
             ...externalStyles,
             ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
         content,
-        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['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,
-            }), style: {
+        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                 ...inlineArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
@@ -905,7 +894,7 @@ const TooltipContent = ({ content }) => {
     return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-const TooltipController = ({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style, position, isOpen, disableStyleInjection = false, holdPositionOnRender, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }) => {
+const TooltipController = ({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style, position, isOpen, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }) => {
     const [tooltipContent, setTooltipContent] = React.useState(content);
     const [tooltipHtml, setTooltipHtml] = React.useState(html);
     const [tooltipPlace, setTooltipPlace] = React.useState(place);
@@ -1156,7 +1145,6 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         style,
         position,
         isOpen,
-        holdPositionOnRender,
         border,
         opacity,
         arrowColor,
@@ -1178,17 +1166,17 @@ const TooltipCoreStyles = `:root {
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
+  --rt-transition-show-delay: 0.15s;
+  --rt-transition-closing-delay: 0.15s;
 }
 
 .core-styles-module_tooltip__3vRRp {
-  visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
+  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1209,8 +1197,13 @@ const TooltipCoreStyles = `:root {
 }
 
 .core-styles-module_show__Nt9eE {
-  visibility: visible;
   opacity: var(--rt-opacity);
+  transition: opacity var(--rt-transition-show-delay) ease-out;
+}
+
+.core-styles-module_closing__sGnxF {
+  opacity: 0;
+  transition: opacity var(--rt-transition-closing-delay) ease-in;
 }
 
 `;