klun-ui 0.1.7 → 0.1.9

package/dist/{chunk-LDENBMG5.cjs → chunk-PRDLMM4A.cjs}

@@ -10101,6 +10101,8 @@ var Modal = react.forwardRef(function Modal2({
   );
 });
 Modal.displayName = "Modal";
+var GAP2 = 8;
+var MARGIN = 8;
 var Popconfirm = react.forwardRef(function Popconfirm2({
   title: titleProp,
   description,
@@ -10123,11 +10125,15 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
   const cancelText = cancelTextProp ?? popconfirm.cancel;
   const [open, setOpen] = react.useState(false);
   const [busy, setBusy] = react.useState(false);
+  const [pos, setPos] = react.useState(null);
   const innerRef = react.useRef(null);
+  const bubbleRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const h = (e) => {
-      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
+      const t = e.target;
+      if (innerRef.current?.contains(t) || bubbleRef.current?.contains(t)) return;
+      setOpen(false);
     };
     const k = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -10139,6 +10145,51 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
       document.removeEventListener("keydown", k);
     };
   }, [open]);
+  react.useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const place = () => {
+      const trigger = innerRef.current;
+      const bubble = bubbleRef.current;
+      if (!trigger || !bubble) return;
+      const tr = trigger.getBoundingClientRect();
+      const bw = bubble.offsetWidth;
+      const bh = bubble.offsetHeight;
+      const vw = document.documentElement.clientWidth;
+      const vh = document.documentElement.clientHeight;
+      let top;
+      let left;
+      switch (placement) {
+        case "bottom":
+          top = tr.bottom + GAP2;
+          left = tr.left + tr.width / 2 - bw / 2;
+          break;
+        case "left":
+          left = tr.left - bw - GAP2;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        case "right":
+          left = tr.right + GAP2;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        default:
+          top = tr.top - bh - GAP2;
+          left = tr.left + tr.width / 2 - bw / 2;
+      }
+      left = Math.max(MARGIN, Math.min(left, vw - bw - MARGIN));
+      top = Math.max(MARGIN, Math.min(top, vh - bh - MARGIN));
+      setPos({ top, left });
+    };
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open, placement, title, description]);
   const setRefs = (node) => {
     innerRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -10157,6 +10208,16 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
     onCancel?.();
     setOpen(false);
   };
+  const bubbleStyle = {
+    position: "fixed",
+    top: pos ? pos.top : 0,
+    left: pos ? pos.left : 0,
+    right: "auto",
+    bottom: "auto",
+    transform: "none",
+    visibility: pos ? "visible" : "hidden",
+    ["--klun-popconfirm-tint"]: `var(--klun-state-${status}-base)`
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: setRefs, className: chunkTPGAXYFU_cjs.cx("klun-popconfirm", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -10169,42 +10230,46 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
         children
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "dialog",
-        className: chunkTPGAXYFU_cjs.cx("klun-popconfirm__bubble", `klun-popconfirm__bubble--${placement}`),
-        style: { ["--klun-popconfirm-tint"]: `var(--klun-state-${status}-base)` },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__head", children: [
-            icon ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: chunkTPGAXYFU_cjs.cx("klun-popconfirm__icon", icon) }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__body", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-popconfirm__title", children: title }),
-              description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-popconfirm__desc", children: description }) : null
+    open && typeof document !== "undefined" ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: bubbleRef,
+          role: "dialog",
+          className: chunkTPGAXYFU_cjs.cx("klun-popconfirm__bubble", `klun-popconfirm__bubble--${placement}`),
+          style: bubbleStyle,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__head", children: [
+              icon ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: chunkTPGAXYFU_cjs.cx("klun-popconfirm__icon", icon) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__body", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-popconfirm__title", children: title }),
+                description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-popconfirm__desc", children: description }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__actions", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-popconfirm__cancel", onClick: cancel, children: cancelText }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: chunkTPGAXYFU_cjs.cx(
+                    "klun-popconfirm__confirm",
+                    okDanger && "klun-popconfirm__confirm--danger"
+                  ),
+                  onClick: confirm,
+                  disabled: busy,
+                  children: [
+                    busy ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-loader-4-line klun-popconfirm__spinner" }) : null,
+                    okText
+                  ]
+                }
+              )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-popconfirm__actions", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-popconfirm__cancel", onClick: cancel, children: cancelText }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                className: chunkTPGAXYFU_cjs.cx(
-                  "klun-popconfirm__confirm",
-                  okDanger && "klun-popconfirm__confirm--danger"
-                ),
-                onClick: confirm,
-                disabled: busy,
-                children: [
-                  busy ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-loader-4-line klun-popconfirm__spinner" }) : null,
-                  okText
-                ]
-              }
-            )
-          ] })
-        ]
-      }
+          ]
+        }
+      ),
+      document.body
     ) : null
   ] });
 });
@@ -10353,5 +10418,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-LDENBMG5.cjs.map
-//# sourceMappingURL=chunk-LDENBMG5.cjs.map
+//# sourceMappingURL=chunk-PRDLMM4A.cjs.map
+//# sourceMappingURL=chunk-PRDLMM4A.cjs.map