@idds/react 1.2.2 → 1.2.4

package/dist/index.es.js

@@ -5941,77 +5941,50 @@ function Tooltip({
   image,
   content,
   children,
-  customContent,
   variant = "basic",
-  placement = "bottom",
+  placement = "top",
   showArrow = true,
-  className = "",
-  enterDelay = 0,
-  leaveDelay = 0,
-  onClose
+  onClose,
+  onNext,
+  customContent = false,
+  className = ""
 }) {
-  const [visible, setVisible] = useState(false);
-  const [finalPlacement, setFinalPlacement] = useState(placement);
-  const enterTimeout = useRef();
-  const leaveTimeout = useRef();
-  const triggerRef = useRef(null);
-  const tooltipRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      window.clearTimeout(enterTimeout.current);
-      window.clearTimeout(leaveTimeout.current);
-    };
-  }, []);
-  const show = () => {
-    window.clearTimeout(leaveTimeout.current);
-    enterTimeout.current = window.setTimeout(() => {
-      setVisible(true);
-      requestAnimationFrame(checkAndFlip);
-    }, enterDelay);
-  };
-  const hide = () => {
-    window.clearTimeout(enterTimeout.current);
-    leaveTimeout.current = window.setTimeout(() => {
-      setVisible(false);
-      setFinalPlacement(placement);
-    }, leaveDelay);
-  };
-  function checkAndFlip() {
-    const trg = triggerRef.current;
-    const tip = tooltipRef.current;
-    if (!trg || !tip) return;
-    const tipRect = tip.getBoundingClientRect();
-    let newPlacement = placement;
-    if ((placement === "top" || placement.startsWith("top-")) && tipRect.top < 0) {
-      newPlacement = placement.replace("top", "bottom");
-    }
-    if ((placement === "bottom" || placement.startsWith("bottom-")) && tipRect.bottom > window.innerHeight) {
-      newPlacement = placement.replace("bottom", "top");
-    }
-    if ((placement === "left" || placement.startsWith("left-")) && tipRect.left < 0) {
-      newPlacement = placement.replace("left", "bottom");
-    }
-    if ((placement === "right" || placement.startsWith("right-")) && tipRect.right > window.innerWidth) {
-      newPlacement = placement.replace("right", "top");
-    }
-    if (newPlacement !== finalPlacement) {
-      setFinalPlacement(newPlacement);
+  const [isClosed, setIsClosed] = useState(false);
+  const handleClose = () => {
+    setIsClosed(true);
+    if (onClose) {
+      onClose();
     }
-  }
-  const tooltipContainerClasses = clsx("ina-tooltip", className);
-  const tooltipContentClasses = clsx(
-    "ina-tooltip__content",
-    `ina-tooltip--placement-${finalPlacement}`,
-    `ina-tooltip--variant-${variant}`,
+  };
+  const handleNext = () => {
+    setIsClosed(true);
+    if (onNext) {
+      onNext();
+    }
+  };
+  const handleMouseEnter = () => {
+    if (isClosed) {
+      setIsClosed(false);
+    }
+  };
+  const tooltipClasses = clsx(
+    "ina-tooltip",
+    `ina-tooltip--placement-${placement}`,
+    className,
     {
-      "ina-tooltip__content--visible": visible,
-      "ina-tooltip__content--hidden": !visible,
-      "ina-tooltip__content--show-arrow": showArrow
+      "ina-tooltip--closed": isClosed
     }
   );
+  const contentClasses = clsx("ina-tooltip__content", {
+    "ina-tooltip__content--show-arrow": showArrow,
+    "ina-tooltip--variant-basic": variant === "basic",
+    "ina-tooltip--variant-light": variant === "light",
+    "ina-tooltip--variant-dark": variant === "dark",
+    "ina-tooltip--variant-media": variant === "media"
+  });
   const renderContent = () => {
-    if (variant === "custom") {
-      return customContent || null;
+    if (customContent && content) {
+      return content;
     }
     if (variant === "basic") {
       return /* @__PURE__ */ jsx("div", { className: "ina-tooltip__bubble ina-tooltip__bubble--basic", children: title });
@@ -6024,49 +5997,69 @@ function Tooltip({
           className: "ina-tooltip__close",
           onClick: (e) => {
             e.stopPropagation();
-            window.clearTimeout(leaveTimeout.current);
-            window.clearTimeout(enterTimeout.current);
-            setVisible(false);
-            setFinalPlacement(placement);
-            onClose();
+            handleClose();
           },
           "aria-label": "Close tooltip",
-          children: /* @__PURE__ */ jsx(IconX, { size: 16 })
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M18 6L6 18M6 6L18 18",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
         }
       ),
       variant === "media" && image && /* @__PURE__ */ jsx("div", { className: "ina-tooltip__image", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { src: image, alt: "" }) : image }),
       /* @__PURE__ */ jsxs("div", { className: "ina-tooltip__content-section", children: [
         title && /* @__PURE__ */ jsx("div", { className: "ina-tooltip__title", children: title }),
         description && /* @__PURE__ */ jsx("div", { className: "ina-tooltip__description", children: description }),
-        content && /* @__PURE__ */ jsx("div", { className: "ina-tooltip__custom-content", children: content })
+        content && /* @__PURE__ */ jsx("div", { className: "ina-tooltip__custom-content", children: content }),
+        (onClose || onNext) && /* @__PURE__ */ jsxs("div", { className: "ina-tooltip__actions", children: [
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ina-tooltip__action ina-tooltip__action--close",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleClose();
+              },
+              children: "Tutup"
+            }
+          ),
+          onNext && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ina-tooltip__action ina-tooltip__action--next",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleNext();
+              },
+              children: "Lanjut"
+            }
+          )
+        ] })
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: triggerRef,
-      className: tooltipContainerClasses,
-      "data-hover": visible ? "true" : void 0,
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      children: [
-        children,
-        visible && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: tooltipRef,
-            className: tooltipContentClasses,
-            onMouseEnter: show,
-            onMouseLeave: hide,
-            children: renderContent()
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: tooltipClasses, onMouseEnter: handleMouseEnter, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: contentClasses, role: "tooltip", children: renderContent() })
+  ] });
 }
 function ThemeToggle({
   className = "",