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

package/dist/react-tooltip.umd.js

@@ -6,15 +6,10 @@
 * @license MIT
 */
 (function (global, factory) {
-    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 }; }
-
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-    var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@floating-ui/dom'), require('clsx')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@floating-ui/dom', 'clsx'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.FloatingUIDOM, global.clsx));
+})(this, (function (exports, React, dom, clsx) { 'use strict';
 
     // This is the ID for the core styles of ReactTooltip
     const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
@@ -80,28 +75,6 @@
         }
         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 = [
         dom.offset(Number(offsetValue)),
@@ -185,7 +158,7 @@
     };
 
     const cssTimeToMs = (time) => {
-        const match = time.match(/^([\d.]+)(ms|s)$/);
+        const match = time.match(/^([\d.]+)(m?s)$/);
         if (!match) {
             return 0;
         }
@@ -205,11 +178,8 @@
         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`
@@ -217,12 +187,6 @@
                 func.apply(this, args);
                 timeout = setTimeout(later, wait);
             }
-            if (!immediate) {
-                if (timeout) {
-                    clearTimeout(timeout);
-                }
-                timeout = setTimeout(later, wait);
-            }
         };
         debounced.cancel = () => {
             /* c8 ignore start */
@@ -289,111 +253,13 @@
 
     const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.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 = React.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] = React.useState({
-            [DEFAULT_TOOLTIP_ID]: new Set(),
-        });
-        const [activeAnchorMap, setActiveAnchorMap] = React.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 = React.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 = React.useMemo(() => {
-            return {
-                getTooltipData,
-            };
-        }, [getTooltipData]);
-        return React__default["default"].createElement(TooltipContext.Provider, { value: context }, children);
-    };
-    function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
-        return React.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 = React.useRef(null);
-        React.useEffect(() => {
-            attach(anchorRef);
-            return () => {
-                detach(anchorRef);
-            };
-        }, []);
-        return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('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;
@@ -412,79 +278,9 @@
         const [imperativeOptions, setImperativeOptions] = React.useState(null);
         const wasShowing = React.useRef(false);
         const lastFloatPosition = React.useRef(null);
-        /**
-         * @todo Remove this in a future version (provider/wrapper method is deprecated)
-         */
-        const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
         const hoveringTooltip = React.useRef(false);
-        const [anchorsBySelect, setAnchorsBySelect] = React.useState([]);
+        const [anchorElements, setAnchorElements] = React.useState([]);
         const mounted = React.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
@@ -496,7 +292,7 @@
                 mounted.current = false;
             };
         }, []);
-        const handleShow = (value) => {
+        const handleShow = React.useCallback((value) => {
             if (!mounted.current) {
                 return;
             }
@@ -516,7 +312,7 @@
                     setShow(value);
                 }
             }, 10);
-        };
+        }, [isOpen, setIsOpen]);
         /**
          * this replicates the effect from `handleShow()`
          * when `isOpen` is changed from outside
@@ -563,13 +359,13 @@
                     // +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 = React.useCallback((delay = delayShow) => {
             if (tooltipShowDelayTimerRef.current) {
                 clearTimeout(tooltipShowDelayTimerRef.current);
             }
@@ -581,8 +377,8 @@
             tooltipShowDelayTimerRef.current = setTimeout(() => {
                 handleShow(true);
             }, delay);
-        };
-        const handleHideTooltipDelayed = (delay = delayHide) => {
+        }, [delayShow, handleShow, rendered]);
+        const handleHideTooltipDelayed = React.useCallback((delay = delayHide) => {
             if (tooltipHideDelayTimerRef.current) {
                 clearTimeout(tooltipHideDelayTimerRef.current);
             }
@@ -592,50 +388,8 @@
                 }
                 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 = React.useCallback(({ x, y }) => {
             var _a;
             const virtualElement = {
                 getBoundingClientRect() {
@@ -663,58 +417,7 @@
             }).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 = React.useCallback(() => {
             var _a, _b;
             const actualPosition = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position) !== null && _a !== void 0 ? _a : position;
@@ -757,33 +460,184 @@
                 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,
         ]);
         React.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);
@@ -876,17 +730,15 @@
             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);
@@ -905,13 +757,12 @@
                     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);
                     });
                 });
             };
@@ -921,61 +772,62 @@
              */
         }, [
             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,
         ]);
         React.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);
@@ -995,25 +847,67 @@
                         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,
                     ]);
                 }
             };
@@ -1030,7 +924,7 @@
             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]);
         React.useEffect(() => {
             updateTooltipPosition();
         }, [updateTooltipPosition]);
@@ -1045,20 +939,18 @@
             return () => {
                 contentObserver.disconnect();
             };
-        }, [content, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
+        }, [content, contentWrapperRef, updateTooltipPosition]);
         React.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]);
         React.useEffect(() => {
             if (defaultIsOpen) {
                 handleShow(true);
@@ -1071,7 +963,7 @@
                     clearTimeout(tooltipHideDelayTimerRef.current);
                 }
             };
-        }, []);
+        }, [defaultIsOpen, handleShow]);
         React.useEffect(() => {
             var _a;
             let selector = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect;
@@ -1083,11 +975,11 @@
             }
             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]);
         React.useEffect(() => {
@@ -1095,7 +987,7 @@
                 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;
         React.useImperativeHandle(forwardRef, () => ({
@@ -1132,7 +1024,7 @@
             place: computedPosition.place,
             isOpen: Boolean(rendered && !hidden && actualContent && canShow),
         }));
-        return rendered && !hidden && actualContent ? (React__default["default"].createElement(WrapperElement, { id: id, role: role, className: classNames__default["default"]('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);
                 }
@@ -1148,7 +1040,7 @@
                 opacity: opacity !== undefined && canShow ? opacity : undefined,
             }, ref: tooltipRef },
             actualContent,
-            React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('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%)`
@@ -1156,14 +1048,8 @@
                 }, ref: tooltipArrowRef }))) : null;
     };
 
-    /* eslint-disable react/no-danger */
-    const TooltipContent = ({ content }) => {
-        return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
-    };
-
-    const TooltipController = React__default["default"].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] = React.useState(content);
-        const [tooltipHtml, setTooltipHtml] = React.useState(html);
         const [tooltipPlace, setTooltipPlace] = React.useState(place);
         const [tooltipVariant, setTooltipVariant] = React.useState(variant);
         const [tooltipOffset, setTooltipOffset] = React.useState(offset);
@@ -1172,15 +1058,10 @@
         const [tooltipFloat, setTooltipFloat] = React.useState(float);
         const [tooltipHidden, setTooltipHidden] = React.useState(hidden);
         const [tooltipWrapper, setTooltipWrapper] = React.useState(wrapper);
-        const [tooltipEvents, setTooltipEvents] = React.useState(events);
         const [tooltipPositionStrategy, setTooltipPositionStrategy] = React.useState(positionStrategy);
         const [tooltipClassName, setTooltipClassName] = React.useState(null);
         const [activeAnchor, setActiveAnchor] = React.useState(null);
         const styleInjectionRef = React.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;
@@ -1192,7 +1073,7 @@
             }, {});
             return dataAttributes;
         };
-        const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
+        const applyAllDataAttributesFromAnchorElement = React.useCallback((dataAttributes) => {
             const handleDataAttributes = {
                 place: (value) => {
                     var _a;
@@ -1201,9 +1082,6 @@
                 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);
@@ -1215,10 +1093,6 @@
                     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);
@@ -1246,13 +1120,21 @@
                 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,
+        ]);
         React.useEffect(() => {
             setTooltipContent(content);
         }, [content]);
-        React.useEffect(() => {
-            setTooltipHtml(html);
-        }, [html]);
         React.useEffect(() => {
             setTooltipPlace(place);
         }, [place]);
@@ -1297,48 +1179,19 @@
                     },
                 }));
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React.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);
                 });
             };
@@ -1347,17 +1200,17 @@
             // 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]);
         React.useEffect(() => {
             /* c8 ignore end */
             if (style === null || style === void 0 ? void 0 : style.border) {
@@ -1376,7 +1229,7 @@
                 // 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
@@ -1386,20 +1239,16 @@
         if (render) {
             const actualContent = (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.getAttribute('data-tooltip-content')) || tooltipContent || null;
             const rendered = render({ content: actualContent, activeAnchor });
-            renderedContent = rendered ? (React__default["default"].createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
+            renderedContent = rendered ? (React.createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
         }
         else if (tooltipContent) {
             renderedContent = tooltipContent;
         }
-        if (tooltipHtml) {
-            renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
-        }
         const props = {
             forwardRef: ref,
             id,
-            anchorId,
             anchorSelect,
-            className: classNames__default["default"](className, tooltipClassName),
+            className: clsx(className, tooltipClassName),
             classNameArrow,
             content: renderedContent,
             contentWrapperRef,
@@ -1407,7 +1256,6 @@
             variant: tooltipVariant,
             offset: tooltipOffset,
             wrapper: tooltipWrapper,
-            events: tooltipEvents,
             openOnClick,
             positionStrategy: tooltipPositionStrategy,
             middlewares,
@@ -1417,9 +1265,6 @@
             hidden: tooltipHidden,
             noArrow,
             clickable,
-            closeOnEsc,
-            closeOnScroll,
-            closeOnResize,
             openEvents,
             closeEvents,
             globalCloseEvents,
@@ -1435,10 +1280,10 @@
             afterShow,
             afterHide,
             activeAnchor,
-            setActiveAnchor: (anchor) => setActiveAnchor(anchor),
+            setActiveAnchor,
             role,
         };
-        return React__default["default"].createElement(Tooltip, { ...props });
+        return React.createElement(Tooltip, { ...props });
     });
 
     // those content will be replaced in build time with the `react-tooltip.css` builded content
@@ -1564,10 +1409,6 @@
     }
 
     exports.Tooltip = TooltipController;
-    exports.TooltipProvider = TooltipProvider;
-    exports.TooltipWrapper = TooltipWrapper;
-    exports.removeStyle = removeStyle;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
+//# sourceMappingURL=react-tooltip.umd.js.map