react-tooltip 5.10.2-beta.1 → 5.10.2-beta.2

package/dist/react-tooltip.cjs.js

@@ -0,0 +1,923 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Tooltip: () => TooltipController_default,
+  TooltipProvider: () => TooltipProvider_default,
+  TooltipWrapper: () => TooltipWrapper_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/TooltipController/TooltipController.tsx
+var import_react5 = require("react");
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react4 = require("react");
+var import_classnames2 = __toESM(require("classnames"));
+
+// src/utils/debounce.ts
+var debounce = (func, wait, immediate) => {
+  let timeout = null;
+  return function debounced(...args) {
+    const later = () => {
+      timeout = null;
+      if (!immediate) {
+        func.apply(this, args);
+      }
+    };
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+};
+var debounce_default = debounce;
+
+// src/components/TooltipProvider/TooltipProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_TOOLTIP_ID = "DEFAULT_TOOLTIP_ID";
+var DEFAULT_CONTEXT_DATA = {
+  anchorRefs: /* @__PURE__ */ new Set(),
+  activeAnchor: { current: null },
+  attach: () => {
+  },
+  detach: () => {
+  },
+  setActiveAnchor: () => {
+  }
+};
+var DEFAULT_CONTEXT_DATA_WRAPPER = {
+  getTooltipData: () => DEFAULT_CONTEXT_DATA
+};
+var TooltipContext = (0, import_react.createContext)(DEFAULT_CONTEXT_DATA_WRAPPER);
+var TooltipProvider = ({ children }) => {
+  const [anchorRefMap, setAnchorRefMap] = (0, import_react.useState)({
+    [DEFAULT_TOOLTIP_ID]: /* @__PURE__ */ new Set()
+  });
+  const [activeAnchorMap, setActiveAnchorMap] = (0, import_react.useState)({
+    [DEFAULT_TOOLTIP_ID]: { current: null }
+  });
+  const attach = (tooltipId, ...refs) => {
+    setAnchorRefMap((oldMap) => {
+      var _a;
+      const tooltipRefs = (_a = oldMap[tooltipId]) != null ? _a : /* @__PURE__ */ new Set();
+      refs.forEach((ref) => tooltipRefs.add(ref));
+      return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
+    });
+  };
+  const detach = (tooltipId, ...refs) => {
+    setAnchorRefMap((oldMap) => {
+      const tooltipRefs = oldMap[tooltipId];
+      if (!tooltipRefs) {
+        return oldMap;
+      }
+      refs.forEach((ref) => tooltipRefs.delete(ref));
+      return { ...oldMap };
+    });
+  };
+  const setActiveAnchor = (tooltipId, ref) => {
+    setActiveAnchorMap((oldMap) => {
+      var _a;
+      if (((_a = oldMap[tooltipId]) == null ? void 0 : _a.current) === ref.current) {
+        return oldMap;
+      }
+      return { ...oldMap, [tooltipId]: ref };
+    });
+  };
+  const getTooltipData = (0, import_react.useCallback)(
+    (tooltipId = DEFAULT_TOOLTIP_ID) => {
+      var _a, _b;
+      return {
+        anchorRefs: (_a = anchorRefMap[tooltipId]) != null ? _a : /* @__PURE__ */ new Set(),
+        activeAnchor: (_b = activeAnchorMap[tooltipId]) != null ? _b : { current: null },
+        attach: (...refs) => attach(tooltipId, ...refs),
+        detach: (...refs) => detach(tooltipId, ...refs),
+        setActiveAnchor: (ref) => setActiveAnchor(tooltipId, ref)
+      };
+    },
+    [anchorRefMap, activeAnchorMap, attach, detach]
+  );
+  const context = (0, import_react.useMemo)(() => {
+    return {
+      getTooltipData
+    };
+  }, [getTooltipData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContext.Provider, { value: context, children });
+};
+function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
+  return (0, import_react.useContext)(TooltipContext).getTooltipData(tooltipId);
+}
+var TooltipProvider_default = TooltipProvider;
+
+// src/components/TooltipProvider/TooltipWrapper.tsx
+var import_react2 = require("react");
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TooltipWrapper = ({
+  tooltipId,
+  children,
+  className,
+  place,
+  content,
+  html,
+  variant,
+  offset: offset2,
+  wrapper,
+  events,
+  positionStrategy,
+  delayShow,
+  delayHide
+}) => {
+  const { attach, detach } = useTooltip(tooltipId);
+  const anchorRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    attach(anchorRef);
+    return () => {
+      detach(anchorRef);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      ref: anchorRef,
+      className: (0, import_classnames.default)("react-tooltip-wrapper", className),
+      "data-tooltip-place": place,
+      "data-tooltip-content": content,
+      "data-tooltip-html": html,
+      "data-tooltip-variant": variant,
+      "data-tooltip-offset": offset2,
+      "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 TooltipWrapper_default = TooltipWrapper;
+
+// src/utils/use-isomorphic-layout-effect.ts
+var import_react3 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
+var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect;
+
+// src/utils/compute-positions.ts
+var import_dom = require("@floating-ui/dom");
+var computeTooltipPosition = async ({
+  elementReference = null,
+  tooltipReference = null,
+  tooltipArrowReference = null,
+  place = "top",
+  offset: offsetValue = 10,
+  strategy = "absolute",
+  middlewares = [(0, import_dom.offset)(Number(offsetValue)), (0, import_dom.flip)(), (0, import_dom.shift)({ padding: 5 })]
+}) => {
+  if (!elementReference) {
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+  }
+  if (tooltipReference === null) {
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+  }
+  const middleware = middlewares;
+  if (tooltipArrowReference) {
+    middleware.push((0, import_dom.arrow)({ element: tooltipArrowReference, padding: 5 }));
+    return (0, import_dom.computePosition)(elementReference, tooltipReference, {
+      placement: place,
+      strategy,
+      middleware
+    }).then(({ x, y, placement, middlewareData }) => {
+      var _a, _b;
+      const styles = { left: `${x}px`, top: `${y}px` };
+      const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) != null ? _a : { x: 0, y: 0 };
+      const staticSide = (_b = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[placement.split("-")[0]]) != null ? _b : "bottom";
+      const arrowStyle = {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px"
+      };
+      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
+    });
+  }
+  return (0, import_dom.computePosition)(elementReference, tooltipReference, {
+    placement: "bottom",
+    strategy,
+    middleware
+  }).then(({ x, y, placement }) => {
+    const styles = { left: `${x}px`, top: `${y}px` };
+    return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
+  });
+};
+
+// esbuild-css-modules-plugin-namespace:./src/components/Tooltip/styles.module.css?esbuild-css-modules-plugin-building
+var styles_module_default = { "arrow": "react-tooltip__arrow_KtSkBq", "clickable": "react-tooltip__clickable_KtSkBq", "dark": "react-tooltip__dark_KtSkBq", "error": "react-tooltip__error_KtSkBq", "fixed": "react-tooltip__fixed_KtSkBq", "info": "react-tooltip__info_KtSkBq", "light": "react-tooltip__light_KtSkBq", "noArrow": "react-tooltip__no-arrow_KtSkBq", "show": "react-tooltip__show_KtSkBq", "success": "react-tooltip__success_KtSkBq", "tooltip": "react-tooltip__tooltip_KtSkBq", "warning": "react-tooltip__warning_KtSkBq" };
+
+// src/components/Tooltip/Tooltip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({
+  // props
+  id,
+  className,
+  classNameArrow,
+  variant = "dark",
+  anchorId,
+  anchorSelect,
+  place = "top",
+  offset: offset2 = 10,
+  events = ["hover"],
+  openOnClick = false,
+  positionStrategy = "absolute",
+  middlewares,
+  wrapper: WrapperElement,
+  delayShow = 0,
+  delayHide = 0,
+  float = false,
+  noArrow = false,
+  clickable = false,
+  closeOnEsc = false,
+  style: externalStyles,
+  position,
+  afterShow,
+  afterHide,
+  // props handled by controller
+  content,
+  isOpen,
+  setIsOpen,
+  activeAnchor,
+  setActiveAnchor
+}) => {
+  const tooltipRef = (0, import_react4.useRef)(null);
+  const tooltipArrowRef = (0, import_react4.useRef)(null);
+  const tooltipShowDelayTimerRef = (0, import_react4.useRef)(null);
+  const tooltipHideDelayTimerRef = (0, import_react4.useRef)(null);
+  const [actualPlacement, setActualPlacement] = (0, import_react4.useState)(place);
+  const [inlineStyles, setInlineStyles] = (0, import_react4.useState)({});
+  const [inlineArrowStyles, setInlineArrowStyles] = (0, import_react4.useState)({});
+  const [show, setShow] = (0, import_react4.useState)(false);
+  const [rendered, setRendered] = (0, import_react4.useState)(false);
+  const wasShowing = (0, import_react4.useRef)(false);
+  const lastFloatPosition = (0, import_react4.useRef)(null);
+  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
+  const hoveringTooltip = (0, import_react4.useRef)(false);
+  const [anchorsBySelect, setAnchorsBySelect] = (0, import_react4.useState)([]);
+  const mounted = (0, import_react4.useRef)(false);
+  const shouldOpenOnClick = openOnClick || events.includes("click");
+  use_isomorphic_layout_effect_default(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!show) {
+      const timeout = setTimeout(() => {
+        setRendered(false);
+      }, 150);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return () => null;
+  }, [show]);
+  const handleShow = (value) => {
+    if (!mounted.current) {
+      return;
+    }
+    if (value) {
+      setRendered(true);
+    }
+    setTimeout(() => {
+      if (!mounted.current) {
+        return;
+      }
+      setIsOpen == null ? void 0 : setIsOpen(value);
+      if (isOpen === void 0) {
+        setShow(value);
+      }
+    }, 10);
+  };
+  (0, import_react4.useEffect)(() => {
+    if (isOpen === void 0) {
+      return () => null;
+    }
+    if (isOpen) {
+      setRendered(true);
+    }
+    const timeout = setTimeout(() => {
+      setShow(isOpen);
+    }, 10);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isOpen]);
+  (0, import_react4.useEffect)(() => {
+    if (show === wasShowing.current) {
+      return;
+    }
+    wasShowing.current = show;
+    if (show) {
+      afterShow == null ? void 0 : afterShow();
+    } else {
+      afterHide == null ? void 0 : afterHide();
+    }
+  }, [show]);
+  const handleShowTooltipDelayed = () => {
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current);
+    }
+    tooltipShowDelayTimerRef.current = setTimeout(() => {
+      handleShow(true);
+    }, delayShow);
+  };
+  const handleHideTooltipDelayed = (delay = delayHide) => {
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current);
+    }
+    tooltipHideDelayTimerRef.current = setTimeout(() => {
+      if (hoveringTooltip.current) {
+        return;
+      }
+      handleShow(false);
+    }, delay);
+  };
+  const handleShowTooltip = (event) => {
+    var _a;
+    if (!event) {
+      return;
+    }
+    if (delayShow) {
+      handleShowTooltipDelayed();
+    } else {
+      handleShow(true);
+    }
+    const target = (_a = event.currentTarget) != null ? _a : event.target;
+    setActiveAnchor(target);
+    setProviderActiveAnchor({ current: target });
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current);
+    }
+  };
+  const handleHideTooltip = () => {
+    if (clickable) {
+      handleHideTooltipDelayed(delayHide || 100);
+    } else if (delayHide) {
+      handleHideTooltipDelayed();
+    } else {
+      handleShow(false);
+    }
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current);
+    }
+  };
+  const handleTooltipPosition = ({ x, y }) => {
+    const virtualElement = {
+      getBoundingClientRect() {
+        return {
+          x,
+          y,
+          width: 0,
+          height: 0,
+          top: y,
+          left: x,
+          right: x,
+          bottom: y
+        };
+      }
+    };
+    computeTooltipPosition({
+      place,
+      offset: offset2,
+      elementReference: virtualElement,
+      tooltipReference: tooltipRef.current,
+      tooltipArrowReference: tooltipArrowRef.current,
+      strategy: positionStrategy,
+      middlewares
+    }).then((computedStylesData) => {
+      if (Object.keys(computedStylesData.tooltipStyles).length) {
+        setInlineStyles(computedStylesData.tooltipStyles);
+      }
+      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+        setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
+      }
+      setActualPlacement(computedStylesData.place);
+    });
+  };
+  const handleMouseMove = (event) => {
+    if (!event) {
+      return;
+    }
+    const mouseEvent = event;
+    const mousePosition = {
+      x: mouseEvent.clientX,
+      y: mouseEvent.clientY
+    };
+    handleTooltipPosition(mousePosition);
+    lastFloatPosition.current = mousePosition;
+  };
+  const handleClickTooltipAnchor = (event) => {
+    handleShowTooltip(event);
+    if (delayHide) {
+      handleHideTooltipDelayed();
+    }
+  };
+  const handleClickOutsideAnchors = (event) => {
+    var _a;
+    const anchorById = document.querySelector(`[id='${anchorId}']`);
+    const anchors = [anchorById, ...anchorsBySelect];
+    if (anchors.some((anchor) => anchor == null ? void 0 : anchor.contains(event.target))) {
+      return;
+    }
+    if ((_a = tooltipRef.current) == null ? void 0 : _a.contains(event.target)) {
+      return;
+    }
+    handleShow(false);
+  };
+  const handleEsc = (event) => {
+    if (event.key !== "Escape") {
+      return;
+    }
+    handleShow(false);
+  };
+  const debouncedHandleShowTooltip = debounce_default(handleShowTooltip, 50);
+  const debouncedHandleHideTooltip = debounce_default(handleHideTooltip, 50);
+  (0, import_react4.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 });
+    }
+    if (closeOnEsc) {
+      window.addEventListener("keydown", handleEsc);
+    }
+    const enabledEvents = [];
+    if (shouldOpenOnClick) {
+      window.addEventListener("click", handleClickOutsideAnchors);
+      enabledEvents.push({ event: "click", listener: handleClickTooltipAnchor });
+    } else {
+      enabledEvents.push(
+        { event: "mouseenter", listener: debouncedHandleShowTooltip },
+        { event: "mouseleave", listener: debouncedHandleHideTooltip },
+        { event: "focus", listener: debouncedHandleShowTooltip },
+        { event: "blur", listener: debouncedHandleHideTooltip }
+      );
+      if (float) {
+        enabledEvents.push({
+          event: "mousemove",
+          listener: handleMouseMove
+        });
+      }
+    }
+    const handleMouseEnterTooltip = () => {
+      hoveringTooltip.current = true;
+    };
+    const handleMouseLeaveTooltip = () => {
+      hoveringTooltip.current = false;
+      handleHideTooltip();
+    };
+    if (clickable && !shouldOpenOnClick) {
+      (_a = tooltipRef.current) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnterTooltip);
+      (_b = tooltipRef.current) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeaveTooltip);
+    }
+    enabledEvents.forEach(({ event, listener }) => {
+      elementRefs.forEach((ref) => {
+        var _a2;
+        (_a2 = ref.current) == null ? void 0 : _a2.addEventListener(event, listener);
+      });
+    });
+    return () => {
+      var _a2, _b2;
+      if (shouldOpenOnClick) {
+        window.removeEventListener("click", handleClickOutsideAnchors);
+      }
+      if (closeOnEsc) {
+        window.removeEventListener("keydown", handleEsc);
+      }
+      if (clickable && !shouldOpenOnClick) {
+        (_a2 = tooltipRef.current) == null ? void 0 : _a2.removeEventListener("mouseenter", handleMouseEnterTooltip);
+        (_b2 = tooltipRef.current) == null ? void 0 : _b2.removeEventListener("mouseleave", handleMouseLeaveTooltip);
+      }
+      enabledEvents.forEach(({ event, listener }) => {
+        elementRefs.forEach((ref) => {
+          var _a3;
+          (_a3 = ref.current) == null ? void 0 : _a3.removeEventListener(event, listener);
+        });
+      });
+    };
+  }, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
+  (0, import_react4.useEffect)(() => {
+    let selector = anchorSelect != null ? anchorSelect : "";
+    if (!selector && id) {
+      selector = `[data-tooltip-id='${id}']`;
+    }
+    const documentObserverCallback = (mutationList) => {
+      const newAnchors = [];
+      mutationList.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-tooltip-id") {
+          const newId = mutation.target.getAttribute("data-tooltip-id");
+          if (newId === id) {
+            newAnchors.push(mutation.target);
+          }
+        }
+        if (mutation.type !== "childList") {
+          return;
+        }
+        if (activeAnchor) {
+          ;
+          [...mutation.removedNodes].some((node) => {
+            var _a;
+            if ((_a = node == null ? void 0 : node.contains) == null ? void 0 : _a.call(node, activeAnchor)) {
+              setRendered(false);
+              handleShow(false);
+              setActiveAnchor(null);
+              return true;
+            }
+            return false;
+          });
+        }
+        if (!selector) {
+          return;
+        }
+        try {
+          const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
+          newAnchors.push(
+            ...elements.filter(
+              (element) => element.matches(selector)
+            )
+          );
+          newAnchors.push(
+            ...elements.flatMap(
+              (element) => [...element.querySelectorAll(selector)]
+            )
+          );
+        } catch (e) {
+        }
+      });
+      if (newAnchors.length) {
+        setAnchorsBySelect((anchors) => [...anchors, ...newAnchors]);
+      }
+    };
+    const documentObserver = new MutationObserver(documentObserverCallback);
+    documentObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-tooltip-id"]
+    });
+    return () => {
+      documentObserver.disconnect();
+    };
+  }, [id, anchorSelect, activeAnchor]);
+  (0, import_react4.useEffect)(() => {
+    if (position) {
+      handleTooltipPosition(position);
+      return;
+    }
+    if (float) {
+      if (lastFloatPosition.current) {
+        handleTooltipPosition(lastFloatPosition.current);
+      }
+      return;
+    }
+    computeTooltipPosition({
+      place,
+      offset: offset2,
+      elementReference: activeAnchor,
+      tooltipReference: tooltipRef.current,
+      tooltipArrowReference: tooltipArrowRef.current,
+      strategy: positionStrategy,
+      middlewares
+    }).then((computedStylesData) => {
+      if (!mounted.current) {
+        return;
+      }
+      if (Object.keys(computedStylesData.tooltipStyles).length) {
+        setInlineStyles(computedStylesData.tooltipStyles);
+      }
+      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+        setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
+      }
+      setActualPlacement(computedStylesData.place);
+    });
+  }, [show, activeAnchor, content, externalStyles, place, offset2, positionStrategy, position]);
+  (0, import_react4.useEffect)(() => {
+    var _a;
+    const anchorById = document.querySelector(`[id='${anchorId}']`);
+    const anchors = [...anchorsBySelect, anchorById];
+    if (!activeAnchor || !anchors.includes(activeAnchor)) {
+      setActiveAnchor((_a = anchorsBySelect[0]) != null ? _a : anchorById);
+    }
+  }, [anchorId, anchorsBySelect, activeAnchor]);
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      if (tooltipShowDelayTimerRef.current) {
+        clearTimeout(tooltipShowDelayTimerRef.current);
+      }
+      if (tooltipHideDelayTimerRef.current) {
+        clearTimeout(tooltipHideDelayTimerRef.current);
+      }
+    };
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    let selector = anchorSelect;
+    if (!selector && id) {
+      selector = `[data-tooltip-id='${id}']`;
+    }
+    if (!selector) {
+      return;
+    }
+    try {
+      const anchors = Array.from(document.querySelectorAll(selector));
+      setAnchorsBySelect(anchors);
+    } catch (e) {
+      setAnchorsBySelect([]);
+    }
+  }, [id, anchorSelect]);
+  const canShow = content && show && Object.keys(inlineStyles).length > 0;
+  return rendered ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    WrapperElement,
+    {
+      id,
+      role: "tooltip",
+      className: (0, import_classnames2.default)(
+        "react-tooltip",
+        styles_module_default["tooltip"],
+        styles_module_default[variant],
+        className,
+        `react-tooltip__place-${actualPlacement}`,
+        {
+          [styles_module_default["show"]]: canShow,
+          [styles_module_default["fixed"]]: positionStrategy === "fixed",
+          [styles_module_default["clickable"]]: clickable
+        }
+      ),
+      style: { ...externalStyles, ...inlineStyles },
+      ref: tooltipRef,
+      children: [
+        content,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          WrapperElement,
+          {
+            className: (0, import_classnames2.default)("react-tooltip-arrow", styles_module_default["arrow"], classNameArrow, {
+              /**
+               * changed from dash `no-arrow` to camelcase because of:
+               * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
+               */
+              [styles_module_default["noArrow"]]: noArrow
+            }),
+            style: inlineArrowStyles,
+            ref: tooltipArrowRef
+          }
+        )
+      ]
+    }
+  ) : null;
+};
+var Tooltip_default = Tooltip;
+
+// src/components/TooltipContent/TooltipContent.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TooltipContent = ({ content }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: content } });
+};
+var TooltipContent_default = TooltipContent;
+
+// src/components/TooltipController/TooltipController.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TooltipController = ({
+  id,
+  anchorId,
+  anchorSelect,
+  content,
+  html,
+  render,
+  className,
+  classNameArrow,
+  variant = "dark",
+  place = "top",
+  offset: offset2 = 10,
+  wrapper = "div",
+  children = null,
+  events = ["hover"],
+  openOnClick = false,
+  positionStrategy = "absolute",
+  middlewares,
+  delayShow = 0,
+  delayHide = 0,
+  float = false,
+  noArrow = false,
+  clickable = false,
+  closeOnEsc = false,
+  style,
+  position,
+  isOpen,
+  setIsOpen,
+  afterShow,
+  afterHide
+}) => {
+  const [tooltipContent, setTooltipContent] = (0, import_react5.useState)(content);
+  const [tooltipHtml, setTooltipHtml] = (0, import_react5.useState)(html);
+  const [tooltipPlace, setTooltipPlace] = (0, import_react5.useState)(place);
+  const [tooltipVariant, setTooltipVariant] = (0, import_react5.useState)(variant);
+  const [tooltipOffset, setTooltipOffset] = (0, import_react5.useState)(offset2);
+  const [tooltipDelayShow, setTooltipDelayShow] = (0, import_react5.useState)(delayShow);
+  const [tooltipDelayHide, setTooltipDelayHide] = (0, import_react5.useState)(delayHide);
+  const [tooltipFloat, setTooltipFloat] = (0, import_react5.useState)(float);
+  const [tooltipWrapper, setTooltipWrapper] = (0, import_react5.useState)(wrapper);
+  const [tooltipEvents, setTooltipEvents] = (0, import_react5.useState)(events);
+  const [tooltipPositionStrategy, setTooltipPositionStrategy] = (0, import_react5.useState)(positionStrategy);
+  const [activeAnchor, setActiveAnchor] = (0, import_react5.useState)(null);
+  const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id);
+  const getDataAttributesFromAnchorElement = (elementReference) => {
+    const dataAttributes = elementReference == null ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
+      var _a;
+      if (name.startsWith("data-tooltip-")) {
+        const parsedAttribute = name.replace(/^data-tooltip-/, "");
+        acc[parsedAttribute] = (_a = elementReference == null ? void 0 : elementReference.getAttribute(name)) != null ? _a : null;
+      }
+      return acc;
+    }, {});
+    return dataAttributes;
+  };
+  const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
+    const handleDataAttributes = {
+      place: (value) => {
+        setTooltipPlace(value != null ? value : place);
+      },
+      content: (value) => {
+        setTooltipContent(value != null ? value : content);
+      },
+      html: (value) => {
+        setTooltipHtml(value != null ? value : html);
+      },
+      variant: (value) => {
+        setTooltipVariant(value != null ? value : variant);
+      },
+      offset: (value) => {
+        setTooltipOffset(value === null ? offset2 : Number(value));
+      },
+      wrapper: (value) => {
+        setTooltipWrapper(value != null ? value : wrapper);
+      },
+      events: (value) => {
+        const parsed = value == null ? void 0 : value.split(" ");
+        setTooltipEvents(parsed != null ? parsed : events);
+      },
+      "position-strategy": (value) => {
+        setTooltipPositionStrategy(value != null ? value : positionStrategy);
+      },
+      "delay-show": (value) => {
+        setTooltipDelayShow(value === null ? delayShow : Number(value));
+      },
+      "delay-hide": (value) => {
+        setTooltipDelayHide(value === null ? delayHide : Number(value));
+      },
+      float: (value) => {
+        setTooltipFloat(value === null ? float : value === "true");
+      }
+    };
+    Object.values(handleDataAttributes).forEach((handler) => handler(null));
+    Object.entries(dataAttributes).forEach(([key, value]) => {
+      var _a;
+      (_a = handleDataAttributes[key]) == null ? void 0 : _a.call(handleDataAttributes, value);
+    });
+  };
+  (0, import_react5.useEffect)(() => {
+    setTooltipContent(content);
+  }, [content]);
+  (0, import_react5.useEffect)(() => {
+    setTooltipHtml(html);
+  }, [html]);
+  (0, import_react5.useEffect)(() => {
+    setTooltipPlace(place);
+  }, [place]);
+  (0, import_react5.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 (e) {
+        if (true) {
+          console.warn(`[react-tooltip] "${anchorSelect}" is not a valid CSS selector`);
+        }
+      }
+    }
+    const anchorById = document.querySelector(`[id='${anchorId}']`);
+    if (anchorById) {
+      elementRefs.add({ current: anchorById });
+    }
+    if (!elementRefs.size) {
+      return () => null;
+    }
+    const anchorElement = (_a = activeAnchor != null ? activeAnchor : anchorById) != null ? _a : providerActiveAnchor.current;
+    const observerCallback = (mutationList) => {
+      mutationList.forEach((mutation) => {
+        var _a2;
+        if (!anchorElement || mutation.type !== "attributes" || !((_a2 = mutation.attributeName) == null ? void 0 : _a2.startsWith("data-tooltip-"))) {
+          return;
+        }
+        const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
+        applyAllDataAttributesFromAnchorElement(dataAttributes);
+      });
+    };
+    const observer = new MutationObserver(observerCallback);
+    const observerConfig = { attributes: true, childList: false, subtree: false };
+    if (anchorElement) {
+      const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
+      applyAllDataAttributesFromAnchorElement(dataAttributes);
+      observer.observe(anchorElement, observerConfig);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
+  let renderedContent = children;
+  if (render) {
+    renderedContent = render({ content: tooltipContent != null ? tooltipContent : null, activeAnchor });
+  } else if (tooltipContent) {
+    renderedContent = tooltipContent;
+  }
+  if (tooltipHtml) {
+    renderedContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent_default, { content: tooltipHtml });
+  }
+  const props = {
+    id,
+    anchorId,
+    anchorSelect,
+    className,
+    classNameArrow,
+    content: renderedContent,
+    place: tooltipPlace,
+    variant: tooltipVariant,
+    offset: tooltipOffset,
+    wrapper: tooltipWrapper,
+    events: tooltipEvents,
+    openOnClick,
+    positionStrategy: tooltipPositionStrategy,
+    middlewares,
+    delayShow: tooltipDelayShow,
+    delayHide: tooltipDelayHide,
+    float: tooltipFloat,
+    noArrow,
+    clickable,
+    closeOnEsc,
+    style,
+    position,
+    isOpen,
+    setIsOpen,
+    afterShow,
+    afterHide,
+    activeAnchor,
+    setActiveAnchor: (anchor) => setActiveAnchor(anchor)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip_default, { ...props });
+};
+var TooltipController_default = TooltipController;
+//# sourceMappingURL=react-tooltip.cjs.js.map