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

package/dist/react-tooltip.cjs.js

@@ -115,9 +115,16 @@ var debounce = (func, wait, immediate) => {
 };
 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(),
@@ -185,7 +192,7 @@ var TooltipProvider = ({ children }) => {
       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);
@@ -195,7 +202,7 @@ 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 import_jsx_runtime3 = require("react/jsx-runtime");
 var TooltipWrapper = ({
   tooltipId,
   children,
@@ -219,7 +226,7 @@ var TooltipWrapper = ({
       detach(anchorRef);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ref: anchorRef,
@@ -711,7 +718,7 @@ var computeTooltipPosition = async ({
 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,
@@ -723,9 +730,11 @@ var Tooltip = ({
   place = "top",
   offset = 10,
   events = ["hover"],
+  openOnClick = false,
   positionStrategy = "absolute",
   middlewares,
   wrapper: WrapperElement,
+  children = null,
   delayShow = 0,
   delayHide = 0,
   float = false,
@@ -738,6 +747,7 @@ var Tooltip = ({
   afterHide,
   // props handled by controller
   content,
+  html,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -758,6 +768,7 @@ var Tooltip = ({
   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 () => {
@@ -917,11 +928,13 @@ var Tooltip = ({
     }
   };
   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);
@@ -948,11 +961,10 @@ var Tooltip = ({
       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 },
@@ -973,7 +985,7 @@ var Tooltip = ({
       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);
     }
@@ -985,13 +997,13 @@ var Tooltip = ({
     });
     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);
       }
@@ -1096,7 +1108,7 @@ var Tooltip = ({
       }
       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}']`);
@@ -1130,8 +1142,9 @@ var Tooltip = ({
       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,
@@ -1151,8 +1164,8 @@ var Tooltip = ({
       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, {
@@ -1172,13 +1185,6 @@ var Tooltip = ({
 };
 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 = ({
@@ -1187,7 +1193,6 @@ var TooltipController = ({
   anchorSelect,
   content,
   html,
-  render,
   className,
   classNameArrow,
   variant = "dark",
@@ -1196,6 +1201,7 @@ var TooltipController = ({
   wrapper = "div",
   children = null,
   events = ["hover"],
+  openOnClick = false,
   positionStrategy = "absolute",
   middlewares,
   delayShow = 0,
@@ -1335,27 +1341,20 @@ var TooltipController = ({
       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,
@@ -1373,7 +1372,7 @@ var TooltipController = ({
     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;
 /*! Bundled license information: