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

package/dist/react-tooltip.umd.js

@@ -399,14 +399,13 @@
     // 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 = React.useRef(null);
         const tooltipArrowRef = React.useRef(null);
         const tooltipShowDelayTimerRef = React.useRef(null);
         const tooltipHideDelayTimerRef = React.useRef(null);
         const missedTransitionTimerRef = React.useRef(null);
-        const tooltipShowTimerRef = React.useRef(null);
         const [computedPosition, setComputedPosition] = React.useState({
             tooltipStyles: {},
             tooltipArrowStyles: {},
@@ -518,8 +517,7 @@
              * wait for the component to render and calculate position
              * before actually showing
              */
-            clearTimeoutRef(tooltipShowTimerRef);
-            tooltipShowTimerRef.current = setTimeout(() => {
+            setTimeout(() => {
                 if (!mounted.current) {
                     return;
                 }
@@ -529,6 +527,41 @@
                 }
             }, 10);
         };
+        /**
+         * Add aria-describedby to activeAnchor when tooltip is active
+         */
+        React.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
@@ -664,9 +697,6 @@
                 border,
                 arrowSize,
             }).then((computedStylesData) => {
-                if (!mounted.current) {
-                    return;
-                }
                 handleComputedPosition(computedStylesData);
             });
         };
@@ -1042,29 +1072,17 @@
             updateTooltipPosition();
         }, [updateTooltipPosition]);
         React.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]);
         React.useEffect(() => {
             var _a;
             const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1085,7 +1103,6 @@
             return () => {
                 clearTimeoutRef(tooltipShowDelayTimerRef);
                 clearTimeoutRef(tooltipHideDelayTimerRef);
-                clearTimeoutRef(tooltipShowTimerRef);
             };
         }, []);
         React.useEffect(() => {
@@ -1195,6 +1212,7 @@
         const [tooltipPositionStrategy, setTooltipPositionStrategy] = React.useState(positionStrategy);
         const [tooltipClassName, setTooltipClassName] = React.useState(null);
         const [activeAnchor, setActiveAnchor] = React.useState(null);
+        const previousActiveAnchorRef = React.useRef(null);
         const styleInjectionRef = React.useRef(disableStyleInjection);
         /**
          * @todo Remove this in a future version (provider/wrapper method is deprecated)
@@ -1456,7 +1474,15 @@
             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__default["default"].createElement(Tooltip, { ...props });