react-tooltip 5.1.0-beta.0 → 5.1.0

package/dist/react-tooltip.umd.js

@@ -1392,9 +1392,7 @@
 
   var classNames = classnames.exports;
 
-  /* eslint-disable func-names */
-  /* eslint-disable prefer-rest-params */
-  /* eslint-disable @typescript-eslint/no-this-alias */
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   /**
    * This function debounce the received function
    * @param { function } 	func				Function to be debounced
@@ -1402,19 +1400,17 @@
    * @param { boolean } 	immediate		Param to define if the function will be executed immediately
    */
   const debounce = (func, wait, immediate) => {
-      let timeout;
-      return function () {
-          // @ts-ignore
-          const context = this;
-          const args = arguments;
+      let timeout = null;
+      return function debounced(...args) {
           const later = () => {
               timeout = null;
               if (!immediate) {
-                  func.apply(context, args);
+                  func.apply(this, args);
               }
           };
-          // @ts-ignore
-          clearTimeout(timeout);
+          if (timeout) {
+              clearTimeout(timeout);
+          }
           timeout = setTimeout(later, wait);
       };
   };
@@ -1423,6 +1419,101 @@
       return jsxRuntime.exports.jsx("span", { dangerouslySetInnerHTML: { __html: content } });
   };
 
+  const defaultContextData = {
+      anchorRefs: new Set(),
+      activeAnchor: { current: null },
+      attach: () => {
+          /* attach anchor element */
+      },
+      detach: () => {
+          /* detach anchor element */
+      },
+      setActiveAnchor: () => {
+          /* set active anchor */
+      },
+  };
+  const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData);
+  const TooltipContext = require$$0.createContext(defaultContextWrapper);
+  const TooltipProvider = ({ children }) => {
+      const defaultTooltipId = require$$0.useId();
+      const [anchorRefMap, setAnchorRefMap] = require$$0.useState({
+          [defaultTooltipId]: new Set(),
+      });
+      const [activeAnchorMap, setActiveAnchorMap] = require$$0.useState({
+          [defaultTooltipId]: { 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 = require$$0.useCallback((tooltipId) => {
+          var _a, _b;
+          return ({
+              anchorRefs: (_a = anchorRefMap[tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId]) !== null && _a !== void 0 ? _a : new Set(),
+              activeAnchor: (_b = activeAnchorMap[tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId]) !== null && _b !== void 0 ? _b : { current: null },
+              attach: (...refs) => attach(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ...refs),
+              detach: (...refs) => detach(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ...refs),
+              setActiveAnchor: (ref) => setActiveAnchor(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ref),
+          });
+      }, [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach]);
+      const context = require$$0.useMemo(() => {
+          const contextData = getTooltipData(defaultTooltipId);
+          const contextWrapper = Object.assign((tooltipId) => getTooltipData(tooltipId), contextData);
+          return contextWrapper;
+      }, [getTooltipData]);
+      return jsxRuntime.exports.jsx(TooltipContext.Provider, { value: context, children: children });
+  };
+  /*
+    // this will use the "global" tooltip (same as `useTooltip()()`)
+    const { anchorRefs, attach, detach } = useTooltip()
+
+    // this will use the tooltip with id `tooltip-id`
+    const { anchorRefs, attach, detach } = useTooltip()('tooltip-id')
+  */
+  function useTooltip() {
+      return require$$0.useContext(TooltipContext);
+  }
+
+  const TooltipWrapper = ({ tooltipId, children, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
+      const { attach, detach } = useTooltip()(tooltipId);
+      const anchorRef = require$$0.useRef(null);
+      require$$0.useEffect(() => {
+          attach(anchorRef);
+          return () => {
+              detach(anchorRef);
+          };
+      }, []);
+      return (jsxRuntime.exports.jsx("span", { ref: anchorRef, "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: children }));
+  };
+
   function getSide(placement) {
     return placement.split('-')[0];
   }
@@ -2608,7 +2699,7 @@
     ...options
   });
 
-  const computeToolTipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', }) => {
+  const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', }) => {
       if (!elementReference) {
           // elementReference can be null or undefined and we will not compute the position
           // eslint-disable-next-line no-console
@@ -2626,21 +2717,20 @@
               strategy,
               middleware,
           }).then(({ x, y, placement, middlewareData }) => {
+              var _a, _b;
               const styles = { left: `${x}px`, top: `${y}px` };
-              // @ts-ignore
-              const { x: arrowX, y: arrowY } = middlewareData.arrow;
-              const staticSide = {
+              const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+              const staticSide = (_b = {
                   top: 'bottom',
                   right: 'left',
                   bottom: 'top',
                   left: 'right',
-              }[placement.split('-')[0]];
+              }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
               const arrowStyle = {
                   left: arrowX != null ? `${arrowX}px` : '',
                   top: arrowY != null ? `${arrowY}px` : '',
                   right: '',
                   bottom: '',
-                  // @ts-ignore
                   [staticSide]: '-4px',
               };
               return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle };
@@ -2660,16 +2750,19 @@
 
   const Tooltip = ({ 
   // props
-  id = require$$0.useId(), className, classNameArrow, variant = 'dark', anchorId, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', wrapper: WrapperElement = 'div', children = null, delayShow = 0, delayHide = 0, style: externalStyles, 
+  id, className, classNameArrow, variant = 'dark', anchorId, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', wrapper: WrapperElement = 'div', children = null, delayShow = 0, delayHide = 0, style: externalStyles, 
   // props handled by controller
   isHtmlContent = false, content, isOpen, setIsOpen, }) => {
-      const tooltipRef = require$$0.createRef();
-      const tooltipArrowRef = require$$0.createRef();
-      const tooltipShowDelayTimerRef = require$$0.useRef();
-      const tooltipHideDelayTimerRef = require$$0.useRef();
+      const tooltipRef = require$$0.useRef(null);
+      const tooltipArrowRef = require$$0.useRef(null);
+      const tooltipShowDelayTimerRef = require$$0.useRef(null);
+      const tooltipHideDelayTimerRef = require$$0.useRef(null);
       const [inlineStyles, setInlineStyles] = require$$0.useState({});
       const [inlineArrowStyles, setInlineArrowStyles] = require$$0.useState({});
       const [show, setShow] = require$$0.useState(false);
+      const [calculatingPosition, setCalculatingPosition] = require$$0.useState(false);
+      const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id);
+      const [activeAnchor, setActiveAnchor] = require$$0.useState({ current: null });
       const handleShow = (value) => {
           if (setIsOpen) {
               setIsOpen(value);
@@ -2694,13 +2787,18 @@
               handleShow(false);
           }, delayHide);
       };
-      const handleShowTooltip = () => {
+      const handleShowTooltip = (event) => {
+          if (!event) {
+              return;
+          }
           if (delayShow) {
               handleShowTooltipDelayed();
           }
           else {
               handleShow(true);
           }
+          setActiveAnchor((anchor) => anchor.current === event.target ? anchor : { current: event.target });
+          setProviderActiveAnchor({ current: event.target });
           if (tooltipHideDelayTimerRef.current) {
               clearTimeout(tooltipHideDelayTimerRef.current);
           }
@@ -2712,16 +2810,9 @@
           else {
               handleShow(false);
           }
-          if (show && tooltipShowDelayTimerRef.current) {
+          if (tooltipShowDelayTimerRef.current) {
               clearTimeout(tooltipShowDelayTimerRef.current);
           }
-          else if (!show && tooltipShowDelayTimerRef.current) {
-              // workaround to prevent tooltip being show forever
-              // when we remove the mouse before show tooltip with `delayShow`
-              tooltipHideDelayTimerRef.current = setTimeout(() => {
-                  handleShow(false);
-              }, delayShow * 2);
-          }
       };
       const handleClickTooltipAnchor = () => {
           if (setIsOpen) {
@@ -2736,8 +2827,13 @@
       const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
       const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
       require$$0.useEffect(() => {
-          const elementReference = document.querySelector(`#${anchorId}`);
-          if (!elementReference) {
+          const elementRefs = new Set(anchorRefs);
+          const anchorById = document.querySelector(`[id='${anchorId}']`);
+          if (anchorById) {
+              setActiveAnchor((anchor) => anchor.current === anchorById ? anchor : { current: anchorById });
+              elementRefs.add({ current: anchorById });
+          }
+          if (!elementRefs.size) {
               // eslint-disable-next-line @typescript-eslint/no-empty-function
               return () => { };
           }
@@ -2749,17 +2845,29 @@
               enabledEvents.push({ event: 'mouseenter', listener: debouncedHandleShowTooltip }, { event: 'mouseleave', listener: debouncedHandleHideTooltip }, { event: 'focus', listener: debouncedHandleShowTooltip }, { event: 'blur', listener: debouncedHandleHideTooltip });
           }
           enabledEvents.forEach(({ event, listener }) => {
-              elementReference === null || elementReference === void 0 ? void 0 : elementReference.addEventListener(event, listener);
+              elementRefs.forEach((ref) => {
+                  var _a;
+                  (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
+              });
           });
           return () => {
               enabledEvents.forEach(({ event, listener }) => {
-                  elementReference === null || elementReference === void 0 ? void 0 : elementReference.removeEventListener(event, listener);
+                  elementRefs.forEach((ref) => {
+                      var _a;
+                      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
+                  });
               });
           };
-      }, [anchorId, events, delayHide, delayShow]);
+      }, [anchorRefs, anchorId, events, delayHide, delayShow]);
       require$$0.useEffect(() => {
-          const elementReference = document.querySelector(`#${anchorId}`);
-          computeToolTipPosition({
+          let elementReference = activeAnchor.current;
+          if (anchorId) {
+              // `anchorId` element takes precedence
+              elementReference = document.querySelector(`[id='${anchorId}']`);
+          }
+          setCalculatingPosition(true);
+          let mounted = true;
+          computeTooltipPosition({
               place,
               offset,
               elementReference,
@@ -2767,6 +2875,11 @@
               tooltipArrowReference: tooltipArrowRef.current,
               strategy: positionStrategy,
           }).then((computedStylesData) => {
+              if (!mounted) {
+                  // invalidate computed positions after remount
+                  return;
+              }
+              setCalculatingPosition(false);
               if (Object.keys(computedStylesData.tooltipStyles).length) {
                   setInlineStyles(computedStylesData.tooltipStyles);
               }
@@ -2775,29 +2888,26 @@
               }
           });
           return () => {
-              tooltipShowDelayTimerRef.current = undefined;
-              tooltipHideDelayTimerRef.current = undefined;
+              mounted = false;
           };
-      }, [show, isOpen, anchorId]);
+      }, [show, isOpen, anchorId, activeAnchor, place, offset, positionStrategy]);
+      require$$0.useEffect(() => {
+          return () => {
+              if (tooltipShowDelayTimerRef.current) {
+                  clearTimeout(tooltipShowDelayTimerRef.current);
+              }
+              if (tooltipHideDelayTimerRef.current) {
+                  clearTimeout(tooltipHideDelayTimerRef.current);
+              }
+          };
+      }, []);
       return (jsxRuntime.exports.jsxs(WrapperElement, { id: id, role: "tooltip", className: classNames(styles['tooltip'], styles[variant], className, {
-              [styles['show']]: isOpen || show,
+              [styles['show']]: !calculatingPosition && (isOpen || show),
               [styles['fixed']]: positionStrategy === 'fixed',
           }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef, children: [children || (isHtmlContent ? jsxRuntime.exports.jsx(TooltipContent, { content: content }) : content), jsxRuntime.exports.jsx("div", { className: classNames(styles['arrow'], classNameArrow), style: inlineArrowStyles, ref: tooltipArrowRef })] }));
   };
 
-  const dataAttributesKeys = [
-      'place',
-      'content',
-      'html',
-      'variant',
-      'offset',
-      'wrapper',
-      'events',
-      'delay-show',
-      'delay-hide', // delay to hide tooltip
-  ];
-
-  const TooltipController = ({ id, anchorId, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', delayShow = 0, delayHide = 0, style, getContent, isOpen, setIsOpen, }) => {
+  const TooltipController = ({ id, anchorId, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', delayShow = 0, delayHide = 0, style, isOpen, setIsOpen, }) => {
       const [tooltipContent, setTooltipContent] = require$$0.useState(content || html);
       const [tooltipPlace, setTooltipPlace] = require$$0.useState(place);
       const [tooltipVariant, setTooltipVariant] = require$$0.useState(variant);
@@ -2808,112 +2918,116 @@
       const [tooltipEvents, setTooltipEvents] = require$$0.useState(events);
       const [tooltipPositionStrategy, setTooltipPositionStrategy] = require$$0.useState(positionStrategy);
       const [isHtmlContent, setIsHtmlContent] = require$$0.useState(Boolean(html));
+      const { anchorRefs, activeAnchor } = useTooltip()(id);
       const getDataAttributesFromAnchorElement = (elementReference) => {
           const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
-              if (name.includes('data-tooltip-')) {
-                  acc[name] = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name);
+              var _a;
+              if (name.startsWith('data-tooltip-')) {
+                  const parsedAttribute = name.replace(/^data-tooltip-/, '');
+                  acc[parsedAttribute] = (_a = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name)) !== null && _a !== void 0 ? _a : null;
               }
               return acc;
           }, {});
           return dataAttributes;
       };
       const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
-          const keys = Object.keys(dataAttributes);
-          let formatedKey = null;
           const handleDataAttributes = {
               place: (value) => {
-                  setTooltipPlace(value);
+                  var _a;
+                  setTooltipPlace((_a = value) !== null && _a !== void 0 ? _a : place);
               },
               content: (value) => {
-                  setIsHtmlContent(true);
-                  if (getContent) {
-                      setTooltipContent(getContent(value));
-                  }
-                  else {
-                      setTooltipContent(value);
-                  }
+                  setIsHtmlContent(false);
+                  setTooltipContent(value !== null && value !== void 0 ? value : content);
               },
               html: (value) => {
-                  setIsHtmlContent(true);
-                  if (getContent) {
-                      setTooltipContent(getContent(value));
-                  }
-                  else {
-                      setTooltipContent(value);
-                  }
+                  var _a;
+                  setIsHtmlContent(!!value);
+                  setTooltipContent((_a = value !== null && value !== void 0 ? value : html) !== null && _a !== void 0 ? _a : content);
               },
               variant: (value) => {
-                  setTooltipVariant(value);
+                  var _a;
+                  setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
               },
               offset: (value) => {
-                  setTooltipOffset(value);
+                  setTooltipOffset(value === null ? offset : Number(value));
               },
               wrapper: (value) => {
-                  setTooltipWrapper(value);
+                  var _a;
+                  setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : 'div');
               },
               events: (value) => {
-                  const parsedEvents = value.split(' ');
-                  setTooltipEvents(parsedEvents);
+                  const parsed = value === null || value === void 0 ? void 0 : value.split(' ');
+                  setTooltipEvents(parsed !== null && parsed !== void 0 ? parsed : events);
               },
-              positionStrategy: (value) => {
-                  setTooltipPositionStrategy(value);
+              'position-strategy': (value) => {
+                  var _a;
+                  setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
               },
               'delay-show': (value) => {
-                  setTooltipDelayShow(Number(value));
+                  setTooltipDelayShow(value === null ? delayShow : Number(value));
               },
               'delay-hide': (value) => {
-                  setTooltipDelayHide(Number(value));
+                  setTooltipDelayHide(value === null ? delayHide : Number(value));
               },
           };
-          keys.forEach((key) => {
-              formatedKey = key.replace('data-tooltip-', '');
-              if (dataAttributesKeys.includes(formatedKey)) {
-                  // @ts-ignore
-                  handleDataAttributes[formatedKey](dataAttributes[key]);
-              }
+          // reset unset data attributes to default values
+          // without this, data attributes from the last active anchor will still be used
+          Object.values(handleDataAttributes).forEach((handler) => handler(null));
+          Object.entries(dataAttributes).forEach(([key, value]) => {
+              var _a;
+              (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
           });
       };
-      const getElementSpecificAttributeKeyAndValueParsed = ({ element, attributeName, }) => {
-          return { [attributeName]: element.getAttribute(attributeName) };
-      };
       require$$0.useEffect(() => {
-          if (!anchorId) {
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              return () => { };
+          if (content) {
+              setTooltipContent(content);
+          }
+          if (html) {
+              setTooltipContent(html);
+          }
+      }, [content, html]);
+      require$$0.useEffect(() => {
+          var _a;
+          const elementRefs = new Set(anchorRefs);
+          const anchorById = document.querySelector(`[id='${anchorId}']`);
+          if (anchorById) {
+              elementRefs.add({ current: anchorById });
           }
-          const elementReference = document.querySelector(`#${anchorId}`);
-          if (!elementReference) {
+          if (!elementRefs.size) {
               // eslint-disable-next-line @typescript-eslint/no-empty-function
               return () => { };
           }
-          if (content && getContent) {
-              setTooltipContent(getContent(content));
-          }
-          // 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 };
           const observerCallback = (mutationList) => {
               mutationList.forEach((mutation) => {
-                  if (mutation.type === 'attributes') {
-                      const attributeKeyAndValue = getElementSpecificAttributeKeyAndValueParsed({
-                          element: elementReference,
-                          attributeName: mutation.attributeName,
-                      });
-                      applyAllDataAttributesFromAnchorElement(attributeKeyAndValue);
+                  var _a;
+                  if (!activeAnchor.current ||
+                      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(activeAnchor.current);
+                  applyAllDataAttributesFromAnchorElement(dataAttributes);
               });
           };
           // Create an observer instance linked to the callback function
           const observer = new MutationObserver(observerCallback);
-          // Start observing the target node for configured mutations
-          observer.observe(elementReference, observerConfig);
-          const dataAttributes = getDataAttributesFromAnchorElement(elementReference);
-          applyAllDataAttributesFromAnchorElement(dataAttributes);
+          // 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 };
+          const element = (_a = activeAnchor.current) !== null && _a !== void 0 ? _a : anchorById;
+          if (element) {
+              const dataAttributes = getDataAttributesFromAnchorElement(element);
+              applyAllDataAttributesFromAnchorElement(dataAttributes);
+              // Start observing the target node for configured mutations
+              observer.observe(element, observerConfig);
+          }
           return () => {
               // Remove the observer when the tooltip is destroyed
               observer.disconnect();
           };
-      }, [anchorId]);
+      }, [anchorRefs, activeAnchor, anchorId]);
       const props = {
           id,
           anchorId,
@@ -2937,6 +3051,8 @@
   };
 
   exports.Tooltip = TooltipController;
+  exports.TooltipProvider = TooltipProvider;
+  exports.TooltipWrapper = TooltipWrapper;
 
   Object.defineProperty(exports, '__esModule', { value: true });