react-tooltip 5.26.4 → 6.0.0-beta.1179.rc.1

package/dist/react-tooltip.mjs

@@ -5,9 +5,9 @@
 * @copyright ReactTooltip Team
 * @license MIT
 */
-import React, { useLayoutEffect, useEffect, createContext, useState, useCallback, useMemo, useContext, useRef, useImperativeHandle } from 'react';
+import React, { useLayoutEffect, useEffect, useRef, useState, useCallback, useImperativeHandle } from 'react';
 import { arrow, computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 // This is the ID for the core styles of ReactTooltip
 const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
@@ -73,28 +73,6 @@ 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;
-}
 
 const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
     offset(Number(offsetValue)),
@@ -178,7 +156,7 @@ const cssSupports = (property, value) => {
 };
 
 const cssTimeToMs = (time) => {
-    const match = time.match(/^([\d.]+)(ms|s)$/);
+    const match = time.match(/^([\d.]+)(m?s)$/);
     if (!match) {
         return 0;
     }
@@ -198,11 +176,8 @@ const debounce = (func, wait, immediate) => {
     const debounced = function debounced(...args) {
         const later = () => {
             timeout = null;
-            if (!immediate) {
-                func.apply(this, args);
-            }
         };
-        if (immediate && !timeout) {
+        if (!timeout) {
             /**
              * there's no need to clear the timeout
              * since we expect it to resolve and set `timeout = null`
@@ -210,12 +185,6 @@ const debounce = (func, wait, immediate) => {
             func.apply(this, args);
             timeout = setTimeout(later, wait);
         }
-        if (!immediate) {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(later, wait);
-        }
     };
     debounced.cancel = () => {
         /* c8 ignore start */
@@ -282,111 +251,13 @@ const getScrollParent = (node) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
-const DEFAULT_CONTEXT_DATA = {
-    anchorRefs: new Set(),
-    activeAnchor: { current: null },
-    attach: () => {
-        /* attach anchor element */
-    },
-    detach: () => {
-        /* detach anchor element */
-    },
-    setActiveAnchor: () => {
-        /* set active anchor */
-    },
-};
-const DEFAULT_CONTEXT_DATA_WRAPPER = {
-    getTooltipData: () => DEFAULT_CONTEXT_DATA,
-};
-const TooltipContext = createContext(DEFAULT_CONTEXT_DATA_WRAPPER);
-/**
- * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
- * See https://react-tooltip.com/docs/getting-started
- */
-const TooltipProvider = ({ children }) => {
-    const [anchorRefMap, setAnchorRefMap] = useState({
-        [DEFAULT_TOOLTIP_ID]: new Set(),
-    });
-    const [activeAnchorMap, setActiveAnchorMap] = useState({
-        [DEFAULT_TOOLTIP_ID]: { current: null },
-    });
-    const attach = (tooltipId, ...refs) => {
-        setAnchorRefMap((oldMap) => {
-            var _a;
-            const tooltipRefs = (_a = oldMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set();
-            refs.forEach((ref) => tooltipRefs.add(ref));
-            // create new object to trigger re-render
-            return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
-        });
-    };
-    const detach = (tooltipId, ...refs) => {
-        setAnchorRefMap((oldMap) => {
-            const tooltipRefs = oldMap[tooltipId];
-            if (!tooltipRefs) {
-                // tooltip not found
-                // maybe thow error?
-                return oldMap;
-            }
-            refs.forEach((ref) => tooltipRefs.delete(ref));
-            // create new object to trigger re-render
-            return { ...oldMap };
-        });
-    };
-    const setActiveAnchor = (tooltipId, ref) => {
-        setActiveAnchorMap((oldMap) => {
-            var _a;
-            if (((_a = oldMap[tooltipId]) === null || _a === void 0 ? void 0 : _a.current) === ref.current) {
-                return oldMap;
-            }
-            // create new object to trigger re-render
-            return { ...oldMap, [tooltipId]: ref };
-        });
-    };
-    const getTooltipData = useCallback((tooltipId = DEFAULT_TOOLTIP_ID) => {
-        var _a, _b;
-        return ({
-            anchorRefs: (_a = anchorRefMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set(),
-            activeAnchor: (_b = activeAnchorMap[tooltipId]) !== null && _b !== void 0 ? _b : { current: null },
-            attach: (...refs) => attach(tooltipId, ...refs),
-            detach: (...refs) => detach(tooltipId, ...refs),
-            setActiveAnchor: (ref) => setActiveAnchor(tooltipId, ref),
-        });
-    }, [anchorRefMap, activeAnchorMap, attach, detach]);
-    const context = useMemo(() => {
-        return {
-            getTooltipData,
-        };
-    }, [getTooltipData]);
-    return React.createElement(TooltipContext.Provider, { value: context }, children);
-};
-function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
-    return useContext(TooltipContext).getTooltipData(tooltipId);
-}
-
-/**
- * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
- * See https://react-tooltip.com/docs/getting-started
- */
-const TooltipWrapper = ({ tooltipId, children, className, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
-    const { attach, detach } = useTooltip(tooltipId);
-    const anchorRef = useRef(null);
-    useEffect(() => {
-        attach(anchorRef);
-        return () => {
-            detach(anchorRef);
-        };
-    }, []);
-    return (React.createElement("span", { ref: anchorRef, className: classNames('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
-};
-
 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"};
 
 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, 
+forwardRef, id, className, classNameArrow, variant = 'dark', anchorSelect, place = 'top', offset = 10, openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, 
 // props handled by controller
 content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
     var _a;
@@ -405,79 +276,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
     const [imperativeOptions, setImperativeOptions] = useState(null);
     const wasShowing = useRef(false);
     const lastFloatPosition = useRef(null);
-    /**
-     * @todo Remove this in a future version (provider/wrapper method is deprecated)
-     */
-    const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
     const hoveringTooltip = useRef(false);
-    const [anchorsBySelect, setAnchorsBySelect] = useState([]);
+    const [anchorElements, setAnchorElements] = useState([]);
     const mounted = useRef(false);
-    /**
-     * @todo Update when deprecated stuff gets removed.
-     */
-    const shouldOpenOnClick = openOnClick || events.includes('click');
-    const hasClickEvent = shouldOpenOnClick || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.click) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.dblclick) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.mousedown);
-    const actualOpenEvents = openEvents
-        ? { ...openEvents }
-        : {
-            mouseenter: true,
-            focus: true,
-            click: false,
-            dblclick: false,
-            mousedown: false,
-        };
-    if (!openEvents && shouldOpenOnClick) {
-        Object.assign(actualOpenEvents, {
-            mouseenter: false,
-            focus: false,
-            click: true,
-        });
-    }
-    const actualCloseEvents = closeEvents
-        ? { ...closeEvents }
-        : {
-            mouseleave: true,
-            blur: true,
-            click: false,
-            dblclick: false,
-            mouseup: false,
-        };
-    if (!closeEvents && shouldOpenOnClick) {
-        Object.assign(actualCloseEvents, {
-            mouseleave: false,
-            blur: false,
-        });
-    }
-    const actualGlobalCloseEvents = globalCloseEvents
-        ? { ...globalCloseEvents }
-        : {
-            escape: closeOnEsc || false,
-            scroll: closeOnScroll || false,
-            resize: closeOnResize || false,
-            clickOutsideAnchor: hasClickEvent || false,
-        };
-    if (imperativeModeOnly) {
-        Object.assign(actualOpenEvents, {
-            mouseenter: false,
-            focus: false,
-            click: false,
-            dblclick: false,
-            mousedown: false,
-        });
-        Object.assign(actualCloseEvents, {
-            mouseleave: false,
-            blur: false,
-            click: false,
-            dblclick: false,
-            mouseup: false,
-        });
-        Object.assign(actualGlobalCloseEvents, {
-            escape: false,
-            scroll: false,
-            resize: false,
-            clickOutsideAnchor: false,
-        });
-    }
     /**
      * useLayoutEffect runs before useEffect,
      * but should be used carefully because of caveats
@@ -489,7 +290,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             mounted.current = false;
         };
     }, []);
-    const handleShow = (value) => {
+    const handleShow = useCallback((value) => {
         if (!mounted.current) {
             return;
         }
@@ -509,7 +310,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 setShow(value);
             }
         }, 10);
-    };
+    }, [isOpen, setIsOpen]);
     /**
      * this replicates the effect from `handleShow()`
      * when `isOpen` is changed from outside
@@ -556,13 +357,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 // +25ms just to make sure `onTransitionEnd` (if it gets fired) has time to run
             }, transitionShowDelay + 25);
         }
-    }, [show]);
+    }, [afterHide, afterShow, show]);
     const handleComputedPosition = (newComputedPosition) => {
         setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
             ? oldComputedPosition
             : newComputedPosition);
     };
-    const handleShowTooltipDelayed = (delay = delayShow) => {
+    const handleShowTooltipDelayed = useCallback((delay = delayShow) => {
         if (tooltipShowDelayTimerRef.current) {
             clearTimeout(tooltipShowDelayTimerRef.current);
         }
@@ -574,8 +375,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         tooltipShowDelayTimerRef.current = setTimeout(() => {
             handleShow(true);
         }, delay);
-    };
-    const handleHideTooltipDelayed = (delay = delayHide) => {
+    }, [delayShow, handleShow, rendered]);
+    const handleHideTooltipDelayed = useCallback((delay = delayHide) => {
         if (tooltipHideDelayTimerRef.current) {
             clearTimeout(tooltipHideDelayTimerRef.current);
         }
@@ -585,50 +386,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }
             handleShow(false);
         }, delay);
-    };
-    const handleShowTooltip = (event) => {
-        var _a;
-        if (!event) {
-            return;
-        }
-        const target = ((_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target);
-        if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
-            /**
-             * this happens when the target is removed from the DOM
-             * at the same time the tooltip gets triggered
-             */
-            setActiveAnchor(null);
-            setProviderActiveAnchor({ current: null });
-            return;
-        }
-        if (delayShow) {
-            handleShowTooltipDelayed();
-        }
-        else {
-            handleShow(true);
-        }
-        setActiveAnchor(target);
-        setProviderActiveAnchor({ current: target });
-        if (tooltipHideDelayTimerRef.current) {
-            clearTimeout(tooltipHideDelayTimerRef.current);
-        }
-    };
-    const handleHideTooltip = () => {
-        if (clickable) {
-            // allow time for the mouse to reach the tooltip, in case there's a gap
-            handleHideTooltipDelayed(delayHide || 100);
-        }
-        else if (delayHide) {
-            handleHideTooltipDelayed();
-        }
-        else {
-            handleShow(false);
-        }
-        if (tooltipShowDelayTimerRef.current) {
-            clearTimeout(tooltipShowDelayTimerRef.current);
-        }
-    };
-    const handleTooltipPosition = ({ x, y }) => {
+    }, [delayHide, handleShow]);
+    const handleTooltipPosition = useCallback(({ x, y }) => {
         var _a;
         const virtualElement = {
             getBoundingClientRect() {
@@ -656,58 +415,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }).then((computedStylesData) => {
             handleComputedPosition(computedStylesData);
         });
-    };
-    const handlePointerMove = (event) => {
-        if (!event) {
-            return;
-        }
-        const mouseEvent = event;
-        const mousePosition = {
-            x: mouseEvent.clientX,
-            y: mouseEvent.clientY,
-        };
-        handleTooltipPosition(mousePosition);
-        lastFloatPosition.current = mousePosition;
-    };
-    const handleClickOutsideAnchors = (event) => {
-        var _a;
-        if (!show) {
-            return;
-        }
-        const target = event.target;
-        if (!target.isConnected) {
-            return;
-        }
-        if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-            return;
-        }
-        const anchorById = document.querySelector(`[id='${anchorId}']`);
-        const anchors = [anchorById, ...anchorsBySelect];
-        if (anchors.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
-            return;
-        }
-        handleShow(false);
-        if (tooltipShowDelayTimerRef.current) {
-            clearTimeout(tooltipShowDelayTimerRef.current);
-        }
-    };
-    // debounce handler to prevent call twice when
-    // mouse enter and focus events being triggered toggether
-    const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
-    const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
-    // If either of the functions is called while the other is still debounced,
-    // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)
-    // sequence of events, the tooltip will stay open because the hide debounce
-    // from leave A prevented the leave B event from calling it, leaving the
-    // tooltip visible.
-    const debouncedHandleShowTooltip = (e) => {
-        internalDebouncedHandleHideTooltip.cancel();
-        internalDebouncedHandleShowTooltip(e);
-    };
-    const debouncedHandleHideTooltip = () => {
-        internalDebouncedHandleShowTooltip.cancel();
-        internalDebouncedHandleHideTooltip();
-    };
+    }, [imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place, place, offset, positionStrategy, middlewares, border]);
     const updateTooltipPosition = useCallback(() => {
         var _a, _b;
         const actualPosition = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position) !== null && _a !== void 0 ? _a : position;
@@ -750,33 +458,184 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             handleComputedPosition(computedStylesData);
         });
     }, [
-        show,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
+        position,
+        float,
         activeAnchor,
-        content,
-        externalStyles,
         place,
-        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
         offset,
         positionStrategy,
-        position,
-        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
-        float,
+        middlewares,
+        border,
+        handleTooltipPosition,
     ]);
     useEffect(() => {
-        var _a, _b;
-        const elementRefs = new Set(anchorRefs);
-        anchorsBySelect.forEach((anchor) => {
-            elementRefs.add({ current: anchor });
-        });
-        const anchorById = document.querySelector(`[id='${anchorId}']`);
-        if (anchorById) {
-            elementRefs.add({ current: anchorById });
-        }
+        /**
+         * TODO(V6): break this effect down into callbacks for clarity
+         *   - `handleKeyboardEvents()`
+         *   - `handleMouseEvents()`
+         *   - `handleGlobalCloseEvents()`
+         *   - `handleAnchorEvents()`
+         *   - ...
+         */
+        const handlePointerMove = (event) => {
+            if (!event) {
+                return;
+            }
+            const mouseEvent = event;
+            const mousePosition = {
+                x: mouseEvent.clientX,
+                y: mouseEvent.clientY,
+            };
+            handleTooltipPosition(mousePosition);
+            lastFloatPosition.current = mousePosition;
+        };
+        const handleClickOutsideAnchors = (event) => {
+            var _a;
+            if (!show) {
+                return;
+            }
+            const target = event.target;
+            if (!target.isConnected) {
+                return;
+            }
+            if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+                return;
+            }
+            if (anchorElements.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
+                return;
+            }
+            handleShow(false);
+            if (tooltipShowDelayTimerRef.current) {
+                clearTimeout(tooltipShowDelayTimerRef.current);
+            }
+        };
+        const handleShowTooltip = (event) => {
+            var _a;
+            if (!event) {
+                return;
+            }
+            const target = ((_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target);
+            if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
+                /**
+                 * this happens when the target is removed from the DOM
+                 * at the same time the tooltip gets triggered
+                 */
+                setActiveAnchor(null);
+                return;
+            }
+            if (delayShow) {
+                handleShowTooltipDelayed();
+            }
+            else {
+                handleShow(true);
+            }
+            setActiveAnchor(target);
+            if (tooltipHideDelayTimerRef.current) {
+                clearTimeout(tooltipHideDelayTimerRef.current);
+            }
+        };
+        const handleHideTooltip = () => {
+            if (clickable) {
+                // allow time for the mouse to reach the tooltip, in case there's a gap
+                handleHideTooltipDelayed(delayHide || 100);
+            }
+            else if (delayHide) {
+                handleHideTooltipDelayed();
+            }
+            else {
+                handleShow(false);
+            }
+            if (tooltipShowDelayTimerRef.current) {
+                clearTimeout(tooltipShowDelayTimerRef.current);
+            }
+        };
+        // debounce handler to prevent call twice when
+        // mouse enter and focus events being triggered toggether
+        const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
+        const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
+        // If either of the functions is called while the other is still debounced,
+        // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)
+        // sequence of events, the tooltip will stay open because the hide debounce
+        // from leave A prevented the leave B event from calling it, leaving the
+        // tooltip visible.
+        const debouncedHandleShowTooltip = (e) => {
+            internalDebouncedHandleHideTooltip.cancel();
+            internalDebouncedHandleShowTooltip(e);
+        };
+        const debouncedHandleHideTooltip = () => {
+            internalDebouncedHandleShowTooltip.cancel();
+            internalDebouncedHandleHideTooltip();
+        };
         const handleScrollResize = () => {
             handleShow(false);
         };
-        const anchorScrollParent = getScrollParent(activeAnchor);
+        const hasClickEvent = openOnClick || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.click) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.dblclick) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.mousedown);
+        const actualOpenEvents = openEvents
+            ? { ...openEvents }
+            : {
+                mouseenter: true,
+                focus: true,
+                click: false,
+                dblclick: false,
+                mousedown: false,
+            };
+        if (!openEvents && openOnClick) {
+            Object.assign(actualOpenEvents, {
+                mouseenter: false,
+                focus: false,
+                click: true,
+            });
+        }
+        const actualCloseEvents = closeEvents
+            ? { ...closeEvents }
+            : {
+                mouseleave: true,
+                blur: true,
+                click: false,
+                dblclick: false,
+                mouseup: false,
+            };
+        if (!closeEvents && openOnClick) {
+            Object.assign(actualCloseEvents, {
+                mouseleave: false,
+                blur: false,
+            });
+        }
+        const actualGlobalCloseEvents = globalCloseEvents
+            ? { ...globalCloseEvents }
+            : {
+                escape: false,
+                scroll: false,
+                resize: false,
+                clickOutsideAnchor: hasClickEvent || false,
+            };
+        if (imperativeModeOnly) {
+            Object.assign(actualOpenEvents, {
+                mouseenter: false,
+                focus: false,
+                click: false,
+                dblclick: false,
+                mousedown: false,
+            });
+            Object.assign(actualCloseEvents, {
+                mouseleave: false,
+                blur: false,
+                click: false,
+                dblclick: false,
+                mouseup: false,
+            });
+            Object.assign(actualGlobalCloseEvents, {
+                escape: false,
+                scroll: false,
+                resize: false,
+                clickOutsideAnchor: false,
+            });
+        }
+        const tooltipElement = tooltipRef.current;
         const tooltipScrollParent = getScrollParent(tooltipRef.current);
+        const anchorScrollParent = getScrollParent(activeAnchor);
         if (actualGlobalCloseEvents.scroll) {
             window.addEventListener('scroll', handleScrollResize);
             anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
@@ -869,17 +728,15 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         if (clickable && !hasClickEvent) {
             // used to keep the tooltip open when hovering content.
             // not needed if using click events.
-            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
-            (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', handleMouseEnterTooltip);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', handleMouseLeaveTooltip);
         }
         enabledEvents.forEach(({ event, listener }) => {
-            elementRefs.forEach((ref) => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
+            anchorElements.forEach((anchor) => {
+                anchor.addEventListener(event, listener);
             });
         });
         return () => {
-            var _a, _b;
             if (actualGlobalCloseEvents.scroll) {
                 window.removeEventListener('scroll', handleScrollResize);
                 anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
@@ -898,13 +755,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 window.removeEventListener('keydown', handleEsc);
             }
             if (clickable && !hasClickEvent) {
-                (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', handleMouseEnterTooltip);
-                (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', handleMouseLeaveTooltip);
+                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', handleMouseEnterTooltip);
+                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', handleMouseLeaveTooltip);
             }
             enabledEvents.forEach(({ event, listener }) => {
-                elementRefs.forEach((ref) => {
-                    var _a;
-                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
+                anchorElements.forEach((anchor) => {
+                    anchor.removeEventListener(event, listener);
                 });
             });
         };
@@ -914,61 +770,62 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
          */
     }, [
         activeAnchor,
-        updateTooltipPosition,
-        rendered,
-        anchorRefs,
-        anchorsBySelect,
-        // the effect uses the `actual*Events` objects, but this should work
-        openEvents,
+        anchorElements,
+        clickable,
         closeEvents,
-        globalCloseEvents,
-        shouldOpenOnClick,
-        delayShow,
         delayHide,
+        delayShow,
+        float,
+        globalCloseEvents,
+        handleHideTooltipDelayed,
+        handleShow,
+        handleShowTooltipDelayed,
+        handleTooltipPosition,
+        imperativeModeOnly,
+        openEvents,
+        openOnClick,
+        setActiveAnchor,
+        show,
+        updateTooltipPosition,
     ]);
     useEffect(() => {
         var _a, _b;
+        /**
+         * TODO(V6): break down observer callback for clarity
+         *   - `handleAddedAnchors()`
+         *   - `handleRemovedAnchors()`
+         */
         let selector = (_b = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect) !== null && _b !== void 0 ? _b : '';
         if (!selector && id) {
             selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
         }
         const documentObserverCallback = (mutationList) => {
-            const newAnchors = [];
-            const removedAnchors = [];
+            const addedAnchors = new Set();
+            const removedAnchors = new Set();
             mutationList.forEach((mutation) => {
                 if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {
-                    const newId = mutation.target.getAttribute('data-tooltip-id');
+                    const target = mutation.target;
+                    const newId = target.getAttribute('data-tooltip-id');
                     if (newId === id) {
-                        newAnchors.push(mutation.target);
+                        addedAnchors.add(target);
                     }
                     else if (mutation.oldValue === id) {
                         // data-tooltip-id has now been changed, so we need to remove this anchor
-                        removedAnchors.push(mutation.target);
+                        removedAnchors.add(target);
                     }
                 }
                 if (mutation.type !== 'childList') {
                     return;
                 }
+                const removedNodes = [...mutation.removedNodes].filter((node) => node.nodeType === 1);
                 if (activeAnchor) {
-                    const elements = [...mutation.removedNodes].filter((node) => node.nodeType === 1);
-                    if (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) => {
+                    removedNodes.some((node) => {
                         var _a;
+                        /**
+                         * TODO(V6)
+                         *   - isn't `!activeAnchor.isConnected` better?
+                         *   - maybe move to `handleDisconnectedAnchor()`
+                         */
                         if ((_a = node === null || node === void 0 ? void 0 : node.contains) === null || _a === void 0 ? void 0 : _a.call(node, activeAnchor)) {
                             setRendered(false);
                             handleShow(false);
@@ -988,25 +845,67 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                     return;
                 }
                 try {
-                    const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
-                    newAnchors.push(
-                    // the element itself is an anchor
-                    ...elements.filter((element) => element.matches(selector)));
-                    newAnchors.push(
-                    // the element has children which are anchors
-                    ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
+                    removedNodes.forEach((node) => {
+                        const element = node;
+                        if (element.matches(selector)) {
+                            // the element itself is an anchor
+                            removedAnchors.add(element);
+                        }
+                        else {
+                            /**
+                             * TODO(V6): do we care if an element which is an anchor,
+                             * has children which are also anchors?
+                             * (i.e. should we remove `else` and always do this)
+                             */
+                            // the element has children which are anchors
+                            element
+                                .querySelectorAll(selector)
+                                .forEach((innerNode) => removedAnchors.add(innerNode));
+                        }
+                    });
+                }
+                catch (_a) {
+                    /* c8 ignore start */
+                    {
+                        // eslint-disable-next-line no-console
+                        console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
+                    }
+                    /* c8 ignore end */
+                }
+                try {
+                    const addedNodes = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
+                    addedNodes.forEach((node) => {
+                        const element = node;
+                        if (element.matches(selector)) {
+                            // the element itself is an anchor
+                            addedAnchors.add(element);
+                        }
+                        else {
+                            /**
+                             * TODO(V6): do we care if an element which is an anchor,
+                             * has children which are also anchors?
+                             * (i.e. should we remove `else` and always do this)
+                             */
+                            // the element has children which are anchors
+                            element
+                                .querySelectorAll(selector)
+                                .forEach((innerNode) => addedAnchors.add(innerNode));
+                        }
+                    });
                 }
                 catch (_b) {
-                    /**
-                     * invalid CSS selector.
-                     * already warned on tooltip controller
-                     */
+                    /* c8 ignore start */
+                    {
+                        // eslint-disable-next-line no-console
+                        console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
+                    }
+                    /* c8 ignore end */
                 }
             });
-            if (newAnchors.length || removedAnchors.length) {
-                setAnchorsBySelect((anchors) => [
-                    ...anchors.filter((anchor) => !removedAnchors.includes(anchor)),
-                    ...newAnchors,
+            if (addedAnchors.size || removedAnchors.size) {
+                setAnchorElements((anchors) => [
+                    ...anchors.filter((anchor) => !removedAnchors.has(anchor)),
+                    ...addedAnchors,
                 ]);
             }
         };
@@ -1023,7 +922,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         return () => {
             documentObserver.disconnect();
         };
-    }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor]);
+    }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor, handleShow, setActiveAnchor]);
     useEffect(() => {
         updateTooltipPosition();
     }, [updateTooltipPosition]);
@@ -1038,20 +937,18 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         return () => {
             contentObserver.disconnect();
         };
-    }, [content, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
+    }, [content, contentWrapperRef, updateTooltipPosition]);
     useEffect(() => {
         var _a;
-        const anchorById = document.querySelector(`[id='${anchorId}']`);
-        const anchors = [...anchorsBySelect, anchorById];
-        if (!activeAnchor || !anchors.includes(activeAnchor)) {
+        if (!activeAnchor || !anchorElements.includes(activeAnchor)) {
             /**
              * if there is no active anchor,
              * or if the current active anchor is not amongst the allowed ones,
              * reset it
              */
-            setActiveAnchor((_a = anchorsBySelect[0]) !== null && _a !== void 0 ? _a : anchorById);
+            setActiveAnchor((_a = anchorElements[0]) !== null && _a !== void 0 ? _a : null);
         }
-    }, [anchorId, anchorsBySelect, activeAnchor]);
+    }, [anchorElements, activeAnchor, setActiveAnchor]);
     useEffect(() => {
         if (defaultIsOpen) {
             handleShow(true);
@@ -1064,7 +961,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 clearTimeout(tooltipHideDelayTimerRef.current);
             }
         };
-    }, []);
+    }, [defaultIsOpen, handleShow]);
     useEffect(() => {
         var _a;
         let selector = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect;
@@ -1076,11 +973,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
         try {
             const anchors = Array.from(document.querySelectorAll(selector));
-            setAnchorsBySelect(anchors);
+            setAnchorElements(anchors);
         }
         catch (_b) {
             // warning was already issued in the controller
-            setAnchorsBySelect([]);
+            setAnchorElements([]);
         }
     }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
     useEffect(() => {
@@ -1088,7 +985,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             clearTimeout(tooltipShowDelayTimerRef.current);
             handleShowTooltipDelayed(delayShow);
         }
-    }, [delayShow]);
+    }, [delayShow, handleShowTooltipDelayed]);
     const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
     const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
     useImperativeHandle(forwardRef, () => ({
@@ -1125,7 +1022,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         place: computedPosition.place,
         isOpen: Boolean(rendered && !hidden && actualContent && canShow),
     }));
-    return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: role, className: classNames('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
+    return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: role, className: clsx('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
             if (missedTransitionTimerRef.current) {
                 clearTimeout(missedTransitionTimerRef.current);
             }
@@ -1141,7 +1038,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
         actualContent,
-        React.createElement(WrapperElement, { className: classNames('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
+        React.createElement(WrapperElement, { className: clsx('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                 ...computedPosition.tooltipArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
@@ -1149,14 +1046,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }, ref: tooltipArrowRef }))) : null;
 };
 
-/* eslint-disable react/no-danger */
-const TooltipContent = ({ content }) => {
-    return React.createElement("span", { dangerouslySetInnerHTML: { __html: content } });
-};
-
-const TooltipController = React.forwardRef(({ 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, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
+const TooltipController = React.forwardRef(({ id, anchorSelect, content, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
     const [tooltipContent, setTooltipContent] = useState(content);
-    const [tooltipHtml, setTooltipHtml] = useState(html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
     const [tooltipVariant, setTooltipVariant] = useState(variant);
     const [tooltipOffset, setTooltipOffset] = useState(offset);
@@ -1165,15 +1056,10 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
     const [tooltipFloat, setTooltipFloat] = useState(float);
     const [tooltipHidden, setTooltipHidden] = useState(hidden);
     const [tooltipWrapper, setTooltipWrapper] = useState(wrapper);
-    const [tooltipEvents, setTooltipEvents] = useState(events);
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy);
     const [tooltipClassName, setTooltipClassName] = useState(null);
     const [activeAnchor, setActiveAnchor] = useState(null);
     const styleInjectionRef = useRef(disableStyleInjection);
-    /**
-     * @todo Remove this in a future version (provider/wrapper method is deprecated)
-     */
-    const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id);
     const getDataAttributesFromAnchorElement = (elementReference) => {
         const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
             var _a;
@@ -1185,7 +1071,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         }, {});
         return dataAttributes;
     };
-    const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
+    const applyAllDataAttributesFromAnchorElement = useCallback((dataAttributes) => {
         const handleDataAttributes = {
             place: (value) => {
                 var _a;
@@ -1194,9 +1080,6 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
             content: (value) => {
                 setTooltipContent(value !== null && value !== void 0 ? value : content);
             },
-            html: (value) => {
-                setTooltipHtml(value !== null && value !== void 0 ? value : html);
-            },
             variant: (value) => {
                 var _a;
                 setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
@@ -1208,10 +1091,6 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
                 var _a;
                 setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : wrapper);
             },
-            events: (value) => {
-                const parsed = value === null || value === void 0 ? void 0 : value.split(' ');
-                setTooltipEvents(parsed !== null && parsed !== void 0 ? parsed : events);
-            },
             'position-strategy': (value) => {
                 var _a;
                 setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
@@ -1239,13 +1118,21 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
             var _a;
             (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
         });
-    };
+    }, [
+        content,
+        delayHide,
+        delayShow,
+        float,
+        hidden,
+        offset,
+        place,
+        positionStrategy,
+        variant,
+        wrapper,
+    ]);
     useEffect(() => {
         setTooltipContent(content);
     }, [content]);
-    useEffect(() => {
-        setTooltipHtml(html);
-    }, [html]);
     useEffect(() => {
         setTooltipPlace(place);
     }, [place]);
@@ -1290,48 +1177,19 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
                 },
             }));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        var _a;
-        const elementRefs = new Set(anchorRefs);
-        let selector = anchorSelect;
-        if (!selector && id) {
-            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
-        }
-        if (selector) {
-            try {
-                const anchorsBySelect = document.querySelectorAll(selector);
-                anchorsBySelect.forEach((anchor) => {
-                    elementRefs.add({ current: anchor });
-                });
-            }
-            catch (_b) {
-                /* c8 ignore start */
-                {
-                    // eslint-disable-next-line no-console
-                    console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
-                }
-                /* c8 ignore end */
-            }
-        }
-        const anchorById = document.querySelector(`[id='${anchorId}']`);
-        if (anchorById) {
-            elementRefs.add({ current: anchorById });
-        }
-        if (!elementRefs.size) {
-            return () => null;
-        }
-        const anchorElement = (_a = activeAnchor !== null && activeAnchor !== void 0 ? activeAnchor : anchorById) !== null && _a !== void 0 ? _a : providerActiveAnchor.current;
         const observerCallback = (mutationList) => {
             mutationList.forEach((mutation) => {
                 var _a;
-                if (!anchorElement ||
+                if (!activeAnchor ||
                     mutation.type !== 'attributes' ||
                     !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
                     return;
                 }
                 // make sure to get all set attributes, since all unset attributes are reset
-                const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
+                const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor);
                 applyAllDataAttributesFromAnchorElement(dataAttributes);
             });
         };
@@ -1340,17 +1198,17 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         // do not check for subtree and childrens, we only want to know attribute changes
         // to stay watching `data-attributes-*` from anchor element
         const observerConfig = { attributes: true, childList: false, subtree: false };
-        if (anchorElement) {
-            const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
+        if (activeAnchor) {
+            const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor);
             applyAllDataAttributesFromAnchorElement(dataAttributes);
             // Start observing the target node for configured mutations
-            observer.observe(anchorElement, observerConfig);
+            observer.observe(activeAnchor, observerConfig);
         }
         return () => {
             // Remove the observer when the tooltip is destroyed
             observer.disconnect();
         };
-    }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
+    }, [activeAnchor, anchorSelect, applyAllDataAttributesFromAnchorElement]);
     useEffect(() => {
         /* c8 ignore end */
         if (style === null || style === void 0 ? void 0 : style.border) {
@@ -1369,7 +1227,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
             // eslint-disable-next-line no-console
             console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`);
         }
-    }, []);
+    }, [border, opacity, style === null || style === void 0 ? void 0 : style.border, style === null || style === void 0 ? void 0 : style.opacity]);
     /**
      * content priority: children < render or content < html
      * children should be lower priority so that it can be used as the "default" content
@@ -1384,15 +1242,11 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
     else if (tooltipContent) {
         renderedContent = tooltipContent;
     }
-    if (tooltipHtml) {
-        renderedContent = React.createElement(TooltipContent, { content: tooltipHtml });
-    }
     const props = {
         forwardRef: ref,
         id,
-        anchorId,
         anchorSelect,
-        className: classNames(className, tooltipClassName),
+        className: clsx(className, tooltipClassName),
         classNameArrow,
         content: renderedContent,
         contentWrapperRef,
@@ -1400,7 +1254,6 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         variant: tooltipVariant,
         offset: tooltipOffset,
         wrapper: tooltipWrapper,
-        events: tooltipEvents,
         openOnClick,
         positionStrategy: tooltipPositionStrategy,
         middlewares,
@@ -1410,9 +1263,6 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         hidden: tooltipHidden,
         noArrow,
         clickable,
-        closeOnEsc,
-        closeOnScroll,
-        closeOnResize,
         openEvents,
         closeEvents,
         globalCloseEvents,
@@ -1428,7 +1278,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         afterShow,
         afterHide,
         activeAnchor,
-        setActiveAnchor: (anchor) => setActiveAnchor(anchor),
+        setActiveAnchor,
         role,
     };
     return React.createElement(Tooltip, { ...props });
@@ -1556,4 +1406,5 @@ if (typeof window !== 'undefined') {
     }));
 }
 
-export { TooltipController as Tooltip, TooltipProvider, TooltipWrapper, removeStyle };
+export { TooltipController as Tooltip };
+//# sourceMappingURL=react-tooltip.mjs.map