react-tooltip 5.10.0-beta.0 → 5.10.0-beta.1

package/dist/react-tooltip.iife.js

@@ -109,9 +109,16 @@
   };
   var debounce_default = debounce;
 
+  // src/components/TooltipContent/TooltipContent.tsx
+  var import_jsx_runtime = __require("react/jsx-runtime");
+  var TooltipContent = ({ content }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: content } });
+  };
+  var TooltipContent_default = TooltipContent;
+
   // src/components/TooltipProvider/TooltipProvider.tsx
   var import_react = __require("react");
-  var import_jsx_runtime = __require("react/jsx-runtime");
+  var import_jsx_runtime2 = __require("react/jsx-runtime");
   var DEFAULT_TOOLTIP_ID = "DEFAULT_TOOLTIP_ID";
   var DEFAULT_CONTEXT_DATA = {
     anchorRefs: /* @__PURE__ */ new Set(),
@@ -179,7 +186,7 @@
         getTooltipData
       };
     }, [getTooltipData]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContext.Provider, { value: context, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipContext.Provider, { value: context, children });
   };
   function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
     return (0, import_react.useContext)(TooltipContext).getTooltipData(tooltipId);
@@ -189,7 +196,7 @@
   // 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 import_jsx_runtime3 = __require("react/jsx-runtime");
   var TooltipWrapper = ({
     tooltipId,
     children,
@@ -213,7 +220,7 @@
         detach(anchorRef);
       };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         ref: anchorRef,
@@ -705,7 +712,7 @@
   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 import_jsx_runtime4 = __require("react/jsx-runtime");
   var Tooltip = ({
     // props
     id,
@@ -717,9 +724,11 @@
     place = "top",
     offset = 10,
     events = ["hover"],
+    openOnClick = false,
     positionStrategy = "absolute",
     middlewares,
     wrapper: WrapperElement,
+    children = null,
     delayShow = 0,
     delayHide = 0,
     float = false,
@@ -732,6 +741,7 @@
     afterHide,
     // props handled by controller
     content,
+    html,
     isOpen,
     setIsOpen,
     activeAnchor,
@@ -752,6 +762,7 @@
     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 () => {
@@ -911,11 +922,13 @@
       }
     };
     const handleClickOutsideAnchors = (event) => {
+      var _a;
       const anchorById = document.querySelector(`[id='${anchorId}']`);
-      if (anchorById == null ? void 0 : anchorById.contains(event.target)) {
+      const anchors = [anchorById, ...anchorsBySelect];
+      if (anchors.some((anchor) => anchor == null ? void 0 : anchor.contains(event.target))) {
         return;
       }
-      if (anchorsBySelect.some((anchor) => anchor.contains(event.target))) {
+      if ((_a = tooltipRef.current) == null ? void 0 : _a.contains(event.target)) {
         return;
       }
       handleShow(false);
@@ -942,11 +955,10 @@
         window.addEventListener("keydown", handleEsc);
       }
       const enabledEvents = [];
-      if (events.find((event) => event === "click")) {
+      if (shouldOpenOnClick) {
         window.addEventListener("click", handleClickOutsideAnchors);
         enabledEvents.push({ event: "click", listener: handleClickTooltipAnchor });
-      }
-      if (events.find((event) => event === "hover")) {
+      } else {
         enabledEvents.push(
           { event: "mouseenter", listener: debouncedHandleShowTooltip },
           { event: "mouseleave", listener: debouncedHandleHideTooltip },
@@ -967,7 +979,7 @@
         hoveringTooltip.current = false;
         handleHideTooltip();
       };
-      if (clickable) {
+      if (clickable && !shouldOpenOnClick) {
         (_a = tooltipRef.current) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnterTooltip);
         (_b = tooltipRef.current) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeaveTooltip);
       }
@@ -979,13 +991,13 @@
       });
       return () => {
         var _a2, _b2;
-        if (events.find((event) => event === "click")) {
+        if (shouldOpenOnClick) {
           window.removeEventListener("click", handleClickOutsideAnchors);
         }
         if (closeOnEsc) {
           window.removeEventListener("keydown", handleEsc);
         }
-        if (clickable) {
+        if (clickable && !shouldOpenOnClick) {
           (_a2 = tooltipRef.current) == null ? void 0 : _a2.removeEventListener("mouseenter", handleMouseEnterTooltip);
           (_b2 = tooltipRef.current) == null ? void 0 : _b2.removeEventListener("mouseleave", handleMouseLeaveTooltip);
         }
@@ -1090,7 +1102,7 @@
         }
         setActualPlacement(computedStylesData.place);
       });
-    }, [show, activeAnchor, content, place, offset, positionStrategy, position]);
+    }, [show, activeAnchor, content, html, place, offset, positionStrategy, position]);
     (0, import_react4.useEffect)(() => {
       var _a;
       const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1124,8 +1136,9 @@
         setAnchorsBySelect([]);
       }
     }, [id, anchorSelect]);
-    const canShow = content && show && Object.keys(inlineStyles).length > 0;
-    return rendered ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    const hasContentOrChildren = Boolean(html || content || children);
+    const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0;
+    return rendered ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       WrapperElement,
       {
         id,
@@ -1145,8 +1158,8 @@
         style: { ...externalStyles, ...inlineStyles },
         ref: tooltipRef,
         children: [
-          content,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          html && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipContent_default, { content: html }) || content || children,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             WrapperElement,
             {
               className: (0, import_classnames2.default)("react-tooltip-arrow", styles_module_default["arrow"], classNameArrow, {
@@ -1166,13 +1179,6 @@
   };
   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 = ({
@@ -1181,7 +1187,6 @@
     anchorSelect,
     content,
     html,
-    render,
     className,
     classNameArrow,
     variant = "dark",
@@ -1190,6 +1195,7 @@
     wrapper = "div",
     children = null,
     events = ["hover"],
+    openOnClick = false,
     positionStrategy = "absolute",
     middlewares,
     delayShow = 0,
@@ -1329,27 +1335,20 @@
         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,
+      content: tooltipContent,
+      html: tooltipHtml,
       place: tooltipPlace,
       variant: tooltipVariant,
       offset: tooltipOffset,
       wrapper: tooltipWrapper,
       events: tooltipEvents,
+      openOnClick,
       positionStrategy: tooltipPositionStrategy,
       middlewares,
       delayShow: tooltipDelayShow,
@@ -1367,7 +1366,7 @@
       activeAnchor,
       setActiveAnchor: (anchor) => setActiveAnchor(anchor)
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip_default, { ...props });
+    return children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip_default, { ...props, children }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip_default, { ...props });
   };
   var TooltipController_default = TooltipController;
 })();