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

package/dist/react-tooltip.esm.js

@@ -100,6 +100,13 @@ var debounce = (func, wait, immediate) => {
 };
 var debounce_default = debounce;
 
+// src/components/TooltipContent/TooltipContent.tsx
+import { jsx } from "react/jsx-runtime";
+var TooltipContent = ({ content }) => {
+  return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: content } });
+};
+var TooltipContent_default = TooltipContent;
+
 // src/components/TooltipProvider/TooltipProvider.tsx
 import {
   createContext,
@@ -108,7 +115,7 @@ import {
   useMemo,
   useState
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DEFAULT_TOOLTIP_ID = "DEFAULT_TOOLTIP_ID";
 var DEFAULT_CONTEXT_DATA = {
   anchorRefs: /* @__PURE__ */ new Set(),
@@ -176,7 +183,7 @@ var TooltipProvider = ({ children }) => {
       getTooltipData
     };
   }, [getTooltipData]);
-  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: context, children });
 };
 function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
   return useContext(TooltipContext).getTooltipData(tooltipId);
@@ -186,7 +193,7 @@ var TooltipProvider_default = TooltipProvider;
 // src/components/TooltipProvider/TooltipWrapper.tsx
 var import_classnames = __toESM(require_classnames());
 import { useEffect, useRef } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var TooltipWrapper = ({
   tooltipId,
   children,
@@ -210,7 +217,7 @@ var TooltipWrapper = ({
       detach(anchorRef);
     };
   }, []);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ref: anchorRef,
@@ -702,7 +709,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
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var Tooltip = ({
   // props
   id,
@@ -714,9 +721,11 @@ var Tooltip = ({
   place = "top",
   offset = 10,
   events = ["hover"],
+  openOnClick = false,
   positionStrategy = "absolute",
   middlewares,
   wrapper: WrapperElement,
+  children = null,
   delayShow = 0,
   delayHide = 0,
   float = false,
@@ -729,6 +738,7 @@ var Tooltip = ({
   afterHide,
   // props handled by controller
   content,
+  html,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -749,6 +759,7 @@ var Tooltip = ({
   const hoveringTooltip = useRef2(false);
   const [anchorsBySelect, setAnchorsBySelect] = useState2([]);
   const mounted = useRef2(false);
+  const shouldOpenOnClick = openOnClick || events.includes("click");
   use_isomorphic_layout_effect_default(() => {
     mounted.current = true;
     return () => {
@@ -908,11 +919,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);
@@ -939,11 +952,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 },
@@ -964,7 +976,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);
     }
@@ -976,13 +988,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);
       }
@@ -1087,7 +1099,7 @@ var Tooltip = ({
       }
       setActualPlacement(computedStylesData.place);
     });
-  }, [show, activeAnchor, content, place, offset, positionStrategy, position]);
+  }, [show, activeAnchor, content, html, place, offset, positionStrategy, position]);
   useEffect3(() => {
     var _a;
     const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1121,7 +1133,8 @@ var Tooltip = ({
       setAnchorsBySelect([]);
     }
   }, [id, anchorSelect]);
-  const canShow = content && show && Object.keys(inlineStyles).length > 0;
+  const hasContentOrChildren = Boolean(html || content || children);
+  const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0;
   return rendered ? /* @__PURE__ */ jsxs(
     WrapperElement,
     {
@@ -1142,8 +1155,8 @@ var Tooltip = ({
       style: { ...externalStyles, ...inlineStyles },
       ref: tooltipRef,
       children: [
-        content,
-        /* @__PURE__ */ jsx3(
+        html && /* @__PURE__ */ jsx4(TooltipContent_default, { content: html }) || content || children,
+        /* @__PURE__ */ jsx4(
           WrapperElement,
           {
             className: (0, import_classnames2.default)("react-tooltip-arrow", styles_module_default["arrow"], classNameArrow, {
@@ -1163,13 +1176,6 @@ var Tooltip = ({
 };
 var Tooltip_default = Tooltip;
 
-// src/components/TooltipContent/TooltipContent.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var TooltipContent = ({ content }) => {
-  return /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: content } });
-};
-var TooltipContent_default = TooltipContent;
-
 // src/components/TooltipController/TooltipController.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var TooltipController = ({
@@ -1178,7 +1184,6 @@ var TooltipController = ({
   anchorSelect,
   content,
   html,
-  render,
   className,
   classNameArrow,
   variant = "dark",
@@ -1187,6 +1192,7 @@ var TooltipController = ({
   wrapper = "div",
   children = null,
   events = ["hover"],
+  openOnClick = false,
   positionStrategy = "absolute",
   middlewares,
   delayShow = 0,
@@ -1326,27 +1332,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__ */ jsx5(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,
@@ -1364,7 +1363,7 @@ var TooltipController = ({
     activeAnchor,
     setActiveAnchor: (anchor) => setActiveAnchor(anchor)
   };
-  return /* @__PURE__ */ jsx5(Tooltip_default, { ...props });
+  return children ? /* @__PURE__ */ jsx5(Tooltip_default, { ...props, children }) : /* @__PURE__ */ jsx5(Tooltip_default, { ...props });
 };
 var TooltipController_default = TooltipController;
 export {