react-tooltip 5.29.1-beta.1258.rc.1 → 5.30.0

package/dist/react-tooltip.mjs

@@ -392,14 +392,13 @@ const Tooltip = ({
 // props
 forwardRef, 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, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, disableTooltip, 
 // props handled by controller
-content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, arrowSize = 8, role = 'tooltip', }) => {
+content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousActiveAnchor, activeAnchor, setActiveAnchor, border, opacity, arrowColor, arrowSize = 8, role = 'tooltip', }) => {
     var _a;
     const tooltipRef = useRef(null);
     const tooltipArrowRef = useRef(null);
     const tooltipShowDelayTimerRef = useRef(null);
     const tooltipHideDelayTimerRef = useRef(null);
     const missedTransitionTimerRef = useRef(null);
-    const tooltipShowTimerRef = useRef(null);
     const [computedPosition, setComputedPosition] = useState({
         tooltipStyles: {},
         tooltipArrowStyles: {},
@@ -511,8 +510,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
          * wait for the component to render and calculate position
          * before actually showing
          */
-        clearTimeoutRef(tooltipShowTimerRef);
-        tooltipShowTimerRef.current = setTimeout(() => {
+        setTimeout(() => {
             if (!mounted.current) {
                 return;
             }
@@ -522,6 +520,41 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }
         }, 10);
     };
+    /**
+     * Add aria-describedby to activeAnchor when tooltip is active
+     */
+    useEffect(() => {
+        if (!id)
+            return;
+        function getAriaDescribedBy(element) {
+            var _a;
+            return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        }
+        function removeAriaDescribedBy(element) {
+            const newDescribedBy = getAriaDescribedBy(element).filter((s) => s !== id);
+            if (newDescribedBy.length) {
+                element === null || element === void 0 ? void 0 : element.setAttribute('aria-describedby', newDescribedBy.join(' '));
+            }
+            else {
+                element === null || element === void 0 ? void 0 : element.removeAttribute('aria-describedby');
+            }
+        }
+        if (show) {
+            removeAriaDescribedBy(previousActiveAnchor);
+            const currentDescribedBy = getAriaDescribedBy(activeAnchor);
+            const describedBy = [...new Set([...currentDescribedBy, id])].filter(Boolean).join(' ');
+            activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.setAttribute('aria-describedby', describedBy);
+        }
+        else {
+            removeAriaDescribedBy(activeAnchor);
+        }
+        // eslint-disable-next-line consistent-return
+        return () => {
+            // cleanup aria-describedby when the tooltip is closed
+            removeAriaDescribedBy(activeAnchor);
+            removeAriaDescribedBy(previousActiveAnchor);
+        };
+    }, [activeAnchor, show, id, previousActiveAnchor]);
     /**
      * this replicates the effect from `handleShow()`
      * when `isOpen` is changed from outside
@@ -657,9 +690,6 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             border,
             arrowSize,
         }).then((computedStylesData) => {
-            if (!mounted.current) {
-                return;
-            }
             handleComputedPosition(computedStylesData);
         });
     };
@@ -1035,29 +1065,17 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         updateTooltipPosition();
     }, [updateTooltipPosition]);
     useEffect(() => {
-        if (!rendered || !(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
+        if (!(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
             return () => null;
         }
-        const timeoutIds = new Set();
         const contentObserver = new ResizeObserver(() => {
-            const timeoutId = setTimeout(() => {
-                timeoutIds.delete(timeoutId);
-                if (!mounted.current) {
-                    return;
-                }
-                updateTooltipPosition();
-            });
-            timeoutIds.add(timeoutId);
+            setTimeout(() => updateTooltipPosition());
         });
         contentObserver.observe(contentWrapperRef.current);
         return () => {
             contentObserver.disconnect();
-            timeoutIds.forEach((timeoutId) => {
-                clearTimeout(timeoutId);
-            });
-            timeoutIds.clear();
         };
-    }, [rendered, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
+    }, [content, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
     useEffect(() => {
         var _a;
         const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1078,7 +1096,6 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         return () => {
             clearTimeoutRef(tooltipShowDelayTimerRef);
             clearTimeoutRef(tooltipHideDelayTimerRef);
-            clearTimeoutRef(tooltipShowTimerRef);
         };
     }, []);
     useEffect(() => {
@@ -1188,6 +1205,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy);
     const [tooltipClassName, setTooltipClassName] = useState(null);
     const [activeAnchor, setActiveAnchor] = useState(null);
+    const previousActiveAnchorRef = useRef(null);
     const styleInjectionRef = useRef(disableStyleInjection);
     /**
      * @todo Remove this in a future version (provider/wrapper method is deprecated)
@@ -1449,7 +1467,15 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         afterHide,
         disableTooltip,
         activeAnchor,
-        setActiveAnchor: (anchor) => setActiveAnchor(anchor),
+        previousActiveAnchor: previousActiveAnchorRef.current,
+        setActiveAnchor: (anchor) => {
+            setActiveAnchor((prev) => {
+                if (!(anchor === null || anchor === void 0 ? void 0 : anchor.isSameNode(prev))) {
+                    previousActiveAnchorRef.current = prev;
+                }
+                return anchor;
+            });
+        },
         role,
     };
     return React.createElement(Tooltip, { ...props });