react-tooltip 5.7.4 → 5.8.0-beta.0

package/README.md

@@ -46,9 +46,12 @@ yarn add react-tooltip
 
 ## Usage
 
-### Using NPM
+> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
+In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
 
-1 . Import the CSS file to set default styling
+### Using NPM package
+
+1 . Import the CSS file to set default styling.
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
@@ -56,7 +59,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
 
-2 . Import `react-tooltip` after installation
+2 . Import `react-tooltip` after installation.
 
 ```js
 import { Tooltip } from 'react-tooltip'
@@ -68,20 +71,41 @@ or if you want to still use the name ReactTooltip as V4:
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 ```
 
-3 . Add `data-tooltip-content="your placeholder"` to your element
+3 . Add `data-tooltip-id="<tooltip id>"` and `data-tooltip-content="<your placeholder>"` to your element.
+
+> `data-tooltip-id` is the equivalent of V4's `data-for`.
 
 ```jsx
-<p id="my-element" data-tooltip-content="hello world">
-  Tooltip
-</p>
+<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
+  ◕‿‿◕
+</a>
 ```
 
-4 . Include react-tooltip component
+4 . Include the `<Tooltip />` element.
+
+> Don't forget to set the id, it won't work without it!
 
 ```jsx
-<ReactTooltip anchorId="my-element" />
+<Tooltip id="my-tooltip" />
 ```
 
+#### Using multiple anchor elements
+
+You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them.
+`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
+
+```jsx
+<a className="my-anchor-element" data-tooltip-content="Hello world!">
+  ◕‿‿◕
+</a>
+<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
+  ◕‿‿◕
+</a>
+<Tooltip anchorSelect=".my-anchor-element" />
+```
+
+Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
+
 ### Standalone
 
 You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
@@ -98,27 +122,26 @@ PS: all the files have a minified version and a non-minified version.
 
 For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
 
-### Security Note
+### Security note
 
 The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
 
-#### JSX Note
+#### JSX note
 
-You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
+You can use [`React.renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
 **Example:**
 
 ```jsx
 import ReactDOMServer from 'react-dom/server';
 [...]
-<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
-  Hover me
-</p>
+<a 
+  data-tooltip-id="my-tooltip"
+  data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
+>
+  ◕‿‿◕
+</a>
 ```
 
-#### Note
-
-- **id** is necessary, because `<ReactTooltip anchorId="my-element" />` finds the tooltip via this attribute
-
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

package/dist/react-tooltip.cjs.js

@@ -2543,6 +2543,10 @@ const DEFAULT_CONTEXT_DATA_WRAPPER = {
     getTooltipData: () => DEFAULT_CONTEXT_DATA,
 };
 const TooltipContext = require$$0.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] = require$$0.useState({
         [DEFAULT_TOOLTIP_ID]: new Set(),
@@ -2603,6 +2607,10 @@ function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
     return require$$0.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 = require$$0.useRef(null);
@@ -2666,9 +2674,9 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","fixed":"styles-module_fi
 
 const Tooltip = ({ 
 // props
-id, className, classNameArrow, variant = 'dark', anchorId, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, children = null, delayShow = 0, delayHide = 0, float = false, noArrow = false, clickable = false, closeOnEsc = false, style: externalStyles, position, afterShow, afterHide, 
+id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, children = null, delayShow = 0, delayHide = 0, float = false, noArrow = false, clickable = false, closeOnEsc = false, style: externalStyles, position, afterShow, afterHide, 
 // props handled by controller
-content, html, isOpen, setIsOpen, }) => {
+content, html, isOpen, setIsOpen, activeAnchor, setActiveAnchor, }) => {
     const tooltipRef = require$$0.useRef(null);
     const tooltipArrowRef = require$$0.useRef(null);
     const tooltipShowDelayTimerRef = require$$0.useRef(null);
@@ -2676,20 +2684,98 @@ content, html, isOpen, setIsOpen, }) => {
     const [inlineStyles, setInlineStyles] = require$$0.useState({});
     const [inlineArrowStyles, setInlineArrowStyles] = require$$0.useState({});
     const [show, setShow] = require$$0.useState(false);
+    const [rendered, setRendered] = require$$0.useState(false);
     const wasShowing = require$$0.useRef(false);
-    const [calculatingPosition, setCalculatingPosition] = require$$0.useState(false);
     const lastFloatPosition = require$$0.useRef(null);
+    /**
+     * @todo Remove this in a future version (provider/wrapper method is deprecated)
+     */
     const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
-    const [activeAnchor, setActiveAnchor] = require$$0.useState({ current: null });
     const hoveringTooltip = require$$0.useRef(false);
-    const handleShow = (value) => {
-        if (setIsOpen) {
-            setIsOpen(value);
+    const [anchorsBySelect, setAnchorsBySelect] = require$$0.useState([]);
+    const mounted = require$$0.useRef(false);
+    require$$0.useEffect(() => {
+        let selector = anchorSelect;
+        if (!selector && id) {
+            selector = `[data-tooltip-id='${id}']`;
+        }
+        if (!selector) {
+            return;
         }
-        else if (isOpen === undefined) {
-            setShow(value);
+        try {
+            const anchors = Array.from(document.querySelectorAll(selector));
+            setAnchorsBySelect(anchors);
+        }
+        catch (_a) {
+            // warning was already issued in the controller
+            setAnchorsBySelect([]);
+        }
+    }, [anchorSelect]);
+    /**
+     * useLayoutEffect runs before useEffect,
+     * but should be used carefully because of caveats
+     * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
+     */
+    require$$0.useLayoutEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    require$$0.useEffect(() => {
+        if (!show) {
+            /**
+             * this fixes weird behavior when switching between two anchor elements very quickly
+             * remove the timeout and switch quickly between two adjancent anchor elements to see it
+             *
+             * in practice, this means the tooltip is not immediately removed from the DOM on hide
+             */
+            const timeout = setTimeout(() => {
+                setRendered(false);
+            }, 150);
+            return () => {
+                clearTimeout(timeout);
+            };
         }
+        return () => null;
+    }, [show]);
+    const handleShow = (value) => {
+        if (!mounted.current) {
+            return;
+        }
+        setRendered(true);
+        /**
+         * wait for the component to render and calculate position
+         * before actually showing
+         */
+        setTimeout(() => {
+            if (!mounted.current) {
+                return;
+            }
+            setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
+            if (isOpen === undefined) {
+                setShow(value);
+            }
+        }, 10);
     };
+    /**
+     * this replicates the effect from `handleShow()`
+     * when `isOpen` is changed from outside
+     */
+    require$$0.useEffect(() => {
+        if (isOpen === undefined) {
+            return () => null;
+        }
+        if (isOpen) {
+            setRendered(true);
+        }
+        const timeout = setTimeout(() => {
+            setShow(isOpen);
+        }, 10);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [isOpen]);
     require$$0.useEffect(() => {
         if (show === wasShowing.current) {
             return;
@@ -2733,7 +2819,7 @@ content, html, isOpen, setIsOpen, }) => {
             handleShow(true);
         }
         const target = (_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target;
-        setActiveAnchor((anchor) => anchor.current === target ? anchor : { current: target });
+        setActiveAnchor(target);
         setProviderActiveAnchor({ current: target });
         if (tooltipHideDelayTimerRef.current) {
             clearTimeout(tooltipHideDelayTimerRef.current);
@@ -2742,7 +2828,7 @@ content, html, isOpen, setIsOpen, }) => {
     const handleHideTooltip = () => {
         if (clickable) {
             // allow time for the mouse to reach the tooltip, in case there's a gap
-            handleHideTooltipDelayed(delayHide || 50);
+            handleHideTooltipDelayed(delayHide || 100);
         }
         else if (delayHide) {
             handleHideTooltipDelayed();
@@ -2769,7 +2855,6 @@ content, html, isOpen, setIsOpen, }) => {
                 };
             },
         };
-        setCalculatingPosition(true);
         computeTooltipPosition({
             place,
             offset,
@@ -2779,7 +2864,6 @@ content, html, isOpen, setIsOpen, }) => {
             strategy: positionStrategy,
             middlewares,
         }).then((computedStylesData) => {
-            setCalculatingPosition(false);
             if (Object.keys(computedStylesData.tooltipStyles).length) {
                 setInlineStyles(computedStylesData.tooltipStyles);
             }
@@ -2806,9 +2890,12 @@ content, html, isOpen, setIsOpen, }) => {
             handleHideTooltipDelayed();
         }
     };
-    const handleClickOutsideAnchor = (event) => {
-        var _a;
-        if ((_a = activeAnchor.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+    const handleClickOutsideAnchors = (event) => {
+        const anchorById = document.querySelector(`[id='${anchorId}']`);
+        if (anchorById === null || anchorById === void 0 ? void 0 : anchorById.contains(event.target)) {
+            return;
+        }
+        if (anchorsBySelect.some((anchor) => anchor.contains(event.target))) {
             return;
         }
         handleShow(false);
@@ -2826,9 +2913,11 @@ content, html, isOpen, setIsOpen, }) => {
     require$$0.useEffect(() => {
         var _a, _b;
         const elementRefs = new Set(anchorRefs);
+        anchorsBySelect.forEach((anchor) => {
+            elementRefs.add({ current: anchor });
+        });
         const anchorById = document.querySelector(`[id='${anchorId}']`);
         if (anchorById) {
-            setActiveAnchor((anchor) => anchor.current === anchorById ? anchor : { current: anchorById });
             elementRefs.add({ current: anchorById });
         }
         if (!elementRefs.size) {
@@ -2839,7 +2928,7 @@ content, html, isOpen, setIsOpen, }) => {
         }
         const enabledEvents = [];
         if (events.find((event) => event === 'click')) {
-            window.addEventListener('click', handleClickOutsideAnchor);
+            window.addEventListener('click', handleClickOutsideAnchors);
             enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor });
         }
         if (events.find((event) => event === 'hover')) {
@@ -2868,9 +2957,8 @@ content, html, isOpen, setIsOpen, }) => {
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
             });
         });
-        const anchorElement = anchorById !== null && anchorById !== void 0 ? anchorById : activeAnchor.current;
         const parentObserverCallback = (mutationList) => {
-            if (!anchorElement) {
+            if (!activeAnchor) {
                 return;
             }
             mutationList.some((mutation) => {
@@ -2878,7 +2966,7 @@ content, html, isOpen, setIsOpen, }) => {
                     return false;
                 }
                 return [...mutation.removedNodes].some((node) => {
-                    if (node.contains(anchorElement)) {
+                    if (node.contains(activeAnchor)) {
                         handleShow(false);
                         return true;
                     }
@@ -2892,7 +2980,7 @@ content, html, isOpen, setIsOpen, }) => {
         return () => {
             var _a, _b;
             if (events.find((event) => event === 'click')) {
-                window.removeEventListener('click', handleClickOutsideAnchor);
+                window.removeEventListener('click', handleClickOutsideAnchors);
             }
             if (closeOnEsc) {
                 window.removeEventListener('keydown', handleEsc);
@@ -2909,12 +2997,16 @@ content, html, isOpen, setIsOpen, }) => {
             });
             parentObserver.disconnect();
         };
-    }, [anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow]);
+        /**
+         * rendered is also a dependency to ensure anchor observers are re-registered
+         * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
+         */
+    }, [rendered, anchorRefs, activeAnchor, closeOnEsc, events, delayHide, delayShow]);
     require$$0.useEffect(() => {
         if (position) {
             // if `position` is set, override regular and `float` positioning
             handleTooltipPosition(position);
-            return () => null;
+            return;
         }
         if (float) {
             if (lastFloatPosition.current) {
@@ -2928,29 +3020,21 @@ content, html, isOpen, setIsOpen, }) => {
                 handleTooltipPosition(lastFloatPosition.current);
             }
             // if `float` is set, override regular positioning
-            return () => null;
-        }
-        let elementReference = activeAnchor.current;
-        if (anchorId) {
-            // `anchorId` element takes precedence
-            elementReference = document.querySelector(`[id='${anchorId}']`);
+            return;
         }
-        setCalculatingPosition(true);
-        let mounted = true;
         computeTooltipPosition({
             place,
             offset,
-            elementReference,
+            elementReference: activeAnchor,
             tooltipReference: tooltipRef.current,
             tooltipArrowReference: tooltipArrowRef.current,
             strategy: positionStrategy,
             middlewares,
         }).then((computedStylesData) => {
-            if (!mounted) {
+            if (!mounted.current) {
                 // invalidate computed positions after remount
                 return;
             }
-            setCalculatingPosition(false);
             if (Object.keys(computedStylesData.tooltipStyles).length) {
                 setInlineStyles(computedStylesData.tooltipStyles);
             }
@@ -2958,21 +3042,20 @@ content, html, isOpen, setIsOpen, }) => {
                 setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
             }
         });
-        return () => {
-            mounted = false;
-        };
-    }, [
-        show,
-        isOpen,
-        anchorId,
-        activeAnchor,
-        content,
-        html,
-        place,
-        offset,
-        positionStrategy,
-        position,
-    ]);
+    }, [show, activeAnchor, content, html, place, offset, positionStrategy, position]);
+    require$$0.useEffect(() => {
+        var _a;
+        const anchorById = document.querySelector(`[id='${anchorId}']`);
+        const anchors = [...anchorsBySelect, anchorById];
+        if (!activeAnchor || !anchors.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);
+        }
+    }, [anchorId, anchorsBySelect, activeAnchor]);
     require$$0.useEffect(() => {
         return () => {
             if (tooltipShowDelayTimerRef.current) {
@@ -2984,16 +3067,17 @@ content, html, isOpen, setIsOpen, }) => {
         };
     }, []);
     const hasContentOrChildren = Boolean(html || content || children);
-    return (jsxRuntime.exports.jsxs(WrapperElement, { id: id, role: "tooltip", className: classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
-            [styles['show']]: hasContentOrChildren && !calculatingPosition && (isOpen || show),
+    const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0;
+    return rendered ? (jsxRuntime.exports.jsxs(WrapperElement, { id: id, role: "tooltip", className: classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
+            [styles['show']]: canShow,
             [styles['fixed']]: positionStrategy === 'fixed',
             [styles['clickable']]: clickable,
-        }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef, children: [children || (html && jsxRuntime.exports.jsx(TooltipContent, { content: html })) || content, jsxRuntime.exports.jsx(WrapperElement, { className: classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
+        }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef, children: [(html && jsxRuntime.exports.jsx(TooltipContent, { content: html })) || content || children, jsxRuntime.exports.jsx(WrapperElement, { className: classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
                     [styles['no-arrow']]: noArrow,
-                }), style: inlineArrowStyles, ref: tooltipArrowRef })] }));
+                }), style: inlineArrowStyles, ref: tooltipArrowRef })] })) : null;
 };
 
-const TooltipController = ({ id, anchorId, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, noArrow = false, clickable = false, closeOnEsc = false, style, position, isOpen, setIsOpen, afterShow, afterHide, }) => {
+const TooltipController = ({ id, anchorId, anchorSelect, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, noArrow = false, clickable = false, closeOnEsc = false, style, position, isOpen, setIsOpen, afterShow, afterHide, }) => {
     const [tooltipContent, setTooltipContent] = require$$0.useState(content);
     const [tooltipHtml, setTooltipHtml] = require$$0.useState(html);
     const [tooltipPlace, setTooltipPlace] = require$$0.useState(place);
@@ -3005,7 +3089,11 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
     const [tooltipWrapper, setTooltipWrapper] = require$$0.useState(wrapper);
     const [tooltipEvents, setTooltipEvents] = require$$0.useState(events);
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = require$$0.useState(positionStrategy);
-    const { anchorRefs, activeAnchor } = useTooltip(id);
+    const [activeAnchor, setActiveAnchor] = require$$0.useState(null);
+    /**
+     * @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;
@@ -3072,9 +3160,30 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
     require$$0.useEffect(() => {
         setTooltipHtml(html);
     }, [html]);
+    require$$0.useEffect(() => {
+        setTooltipPlace(place);
+    }, [place]);
     require$$0.useEffect(() => {
         var _a;
         const elementRefs = new Set(anchorRefs);
+        let selector = anchorSelect;
+        if (!selector && id) {
+            selector = `[data-tooltip-id='${id}']`;
+        }
+        if (selector) {
+            try {
+                const anchorsBySelect = document.querySelectorAll(selector);
+                anchorsBySelect.forEach((anchor) => {
+                    elementRefs.add({ current: anchor });
+                });
+            }
+            catch (_b) {
+                {
+                    // eslint-disable-next-line no-console
+                    console.warn(`[react-tooltip] "${anchorSelect}" is not a valid CSS selector`);
+                }
+            }
+        }
         const anchorById = document.querySelector(`[id='${anchorId}']`);
         if (anchorById) {
             elementRefs.add({ current: anchorById });
@@ -3082,7 +3191,7 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
         if (!elementRefs.size) {
             return () => null;
         }
-        const anchorElement = (_a = activeAnchor.current) !== null && _a !== void 0 ? _a : anchorById;
+        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;
@@ -3111,10 +3220,11 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
             // Remove the observer when the tooltip is destroyed
             observer.disconnect();
         };
-    }, [anchorRefs, activeAnchor, anchorId]);
+    }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
     const props = {
         id,
         anchorId,
+        anchorSelect,
         className,
         classNameArrow,
         content: tooltipContent,
@@ -3138,6 +3248,8 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
         setIsOpen,
         afterShow,
         afterHide,
+        activeAnchor,
+        setActiveAnchor: (anchor) => setActiveAnchor(anchor),
     };
     return children ? jsxRuntime.exports.jsx(Tooltip, { ...props, children: children }) : jsxRuntime.exports.jsx(Tooltip, { ...props });
 };