npm - klun-ui - Versions diffs - 0.1.8 → 0.1.10 - Mend

klun-ui 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +25 -0
package/dist/{chunk-LDENBMG5.cjs → chunk-VFEV4TOL.cjs} +456 -51
package/dist/chunk-VFEV4TOL.cjs.map +1 -0
package/dist/{chunk-Z2TY6K3O.js → chunk-Y5BGEO2J.js} +454 -52
package/dist/chunk-Y5BGEO2J.js.map +1 -0
package/dist/index.cjs +156 -144
package/dist/index.d.cts +87 -3
package/dist/index.d.ts +87 -3
package/dist/index.js +1 -1
package/dist/styles.css +210 -0
package/dist/templates/index.cjs +82 -82
package/dist/templates/index.js +1 -1
package/package.json +1 -1
package/dist/chunk-LDENBMG5.cjs.map +0 -1
package/dist/chunk-Z2TY6K3O.js.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,31 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
+## [0.1.10] — 2026-06-21
+### Added
+- **`ImageViewer` — a full-screen image lightbox.** Single image or gallery
+  (prev/next + counter), wheel & button zoom, rotate, drag-to-pan when zoomed,
+  double-click to toggle fit/100%, optional download, and keyboard control
+  (Esc / ←→ / `+` `-` / `0`). Portals to `<body>` and locks body scroll.
+- **`ContextMenu` + `useContextMenu` — a cursor-positioned right-click menu.**
+  Nested submenus via `item.children` (open on hover or `→`, any depth, each
+  level flips to stay on-screen), clamps/flips to the viewport, keyboard
+  navigation (↑ ↓ → ← Enter Esc Home End), disabled items, shortcuts, dividers
+  and danger items. The `useContextMenu` hook wires up `onContextMenu` →
+  open-at-cursor.
+## [0.1.9] — 2026-06-21
+### Fixed
+- **`Popconfirm` bubble is no longer clipped by scroll containers.** The bubble
+  rendered as an `absolute` child of the trigger, so when the trigger sat inside
+  a scrollable/`overflow` pane (e.g. an app content area) the bubble was clipped
+  at that pane's edge — near the left edge its title/description got cut off. It
+  is now portaled to `<body>`, positioned with fixed viewport coordinates, and
+  clamped to stay fully on-screen (recomputed on scroll/resize). Outside-click
+  and Escape dismissal still work across the portal boundary.
 ## [0.1.8] — 2026-06-21
 ### Fixed

package/dist/{chunk-LDENBMG5.cjs → chunk-VFEV4TOL.cjs} RENAMED Viewed

@@ -4372,9 +4372,9 @@ function useExpandedRows({
       list.forEach((row, i) => {
         const id = getRowId(row, i);
         const kids = row[childrenKey];
-        const hasChildren = Array.isArray(kids) && kids.length > 0;
-        out.push({ row, id, depth, hasChildren });
-        if (hasChildren && treeOpen.has(id)) walk(kids, depth + 1);
+        const hasChildren2 = Array.isArray(kids) && kids.length > 0;
+        out.push({ row, id, depth, hasChildren: hasChildren2 });
+        if (hasChildren2 && treeOpen.has(id)) walk(kids, depth + 1);
       });
     };
     walk(pageRows, 0);
@@ -4912,7 +4912,7 @@ var Tree = react.forwardRef(function Tree2({
       className: chunkTPGAXYFU_cjs.cx("klun-tree", showLine && "klun-tree--line", className),
       ...props,
       children: rows.filter((r) => !r.hidden).map(({ node, level }) => {
-        const hasChildren = !!(node.children && node.children.length);
+        const hasChildren2 = !!(node.children && node.children.length);
         const isExpanded = exp.includes(node.key);
         const selected = selectedKey === node.key;
         const cs = checkable ? checkState(node) : null;
@@ -4920,7 +4920,7 @@ var Tree = react.forwardRef(function Tree2({
           "div",
           {
             role: "treeitem",
-            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-expanded": hasChildren2 ? isExpanded : void 0,
             "aria-selected": selected,
             className: chunkTPGAXYFU_cjs.cx(
               "klun-tree__item",
@@ -4939,12 +4939,12 @@ var Tree = react.forwardRef(function Tree2({
                 {
                   className: chunkTPGAXYFU_cjs.cx(
                     "klun-tree__caret",
-                    hasChildren && isExpanded && "klun-tree__caret--expanded"
+                    hasChildren2 && isExpanded && "klun-tree__caret--expanded"
                   ),
-                  "data-leaf": hasChildren ? void 0 : "",
+                  "data-leaf": hasChildren2 ? void 0 : "",
                   onClick: (e) => {
                     e.stopPropagation();
-                    if (hasChildren) toggle(node.key);
+                    if (hasChildren2) toggle(node.key);
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" })
                 }
@@ -5920,7 +5920,7 @@ var Cascader = react.forwardRef(function Cascader2({
             ),
             children: col.map((opt) => {
               const selected = active[ci] === opt.value;
-              const hasChildren = !!(opt.children && opt.children.length);
+              const hasChildren2 = !!(opt.children && opt.children.length);
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -5931,7 +5931,7 @@ var Cascader = react.forwardRef(function Cascader2({
                   "data-selected": selected || void 0,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cascader__option-label", children: opt.label }),
-                    hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
+                    hasChildren2 ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
                   ]
                 },
                 opt.value
@@ -9838,6 +9838,203 @@ function Confirm(opts = {}) {
     root.render(/* @__PURE__ */ jsxRuntime.jsx(ConfirmDialog, { opts, onClose: close }));
   });
 }
+var isSelectable = (it) => !it.divider && !it.disabled;
+var hasChildren = (it) => !!it.children && it.children.length > 0;
+var GAP2 = 8;
+function place(w, h, opts) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let left;
+  let top;
+  if (opts.rect) {
+    const r = opts.rect;
+    left = r.right - 4 + w > vw - GAP2 ? r.left - w + 4 : r.right - 4;
+    top = r.top - 4;
+  } else {
+    const p = opts.point ?? { x: 0, y: 0 };
+    left = p.x + w > vw - GAP2 ? p.x - w : p.x;
+    top = p.y + h > vh - GAP2 ? p.y - h : p.y;
+  }
+  left = Math.min(Math.max(GAP2, left), vw - w - GAP2);
+  top = Math.min(Math.max(GAP2, top), vh - h - GAP2);
+  return { left, top };
+}
+function MenuPanel({ items: items2, width, className, point, anchorEl, autoActive, depth, onCloseAll, onCloseSelf }) {
+  const ref = react.useRef(null);
+  const itemEls = react.useRef([]);
+  const [pos, setPos] = react.useState(null);
+  const [active, setActive] = react.useState(autoActive ? items2.findIndex(isSelectable) : -1);
+  const [sub, setSub] = react.useState(null);
+  const isLeaf = sub === null;
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    const w = el?.offsetWidth ?? width;
+    const h = el?.offsetHeight ?? 0;
+    setPos(place(w, h, anchorEl ? { rect: anchorEl.getBoundingClientRect() } : { point }));
+  }, [width, point?.x, point?.y, anchorEl, items2]);
+  const move = react.useCallback(
+    (dir) => {
+      setActive((cur) => {
+        const n = items2.length;
+        for (let s = 1; s <= n; s++) {
+          const i = (cur + dir * s + n * s) % n;
+          if (isSelectable(items2[i])) return i;
+        }
+        return cur;
+      });
+    },
+    [items2]
+  );
+  const activate = react.useCallback(
+    (i, viaKeyboard) => {
+      const it = items2[i];
+      if (!it || !isSelectable(it)) return;
+      if (hasChildren(it)) setSub({ i, kbd: viaKeyboard });
+      else {
+        onCloseAll();
+        it.onClick?.();
+      }
+    },
+    [items2, onCloseAll]
+  );
+  react.useEffect(() => {
+    if (!isLeaf) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        move(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        move(-1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(items2.findIndex(isSelectable));
+      } else if (e.key === "End") {
+        e.preventDefault();
+        for (let i = items2.length - 1; i >= 0; i--)
+          if (isSelectable(items2[i])) {
+            setActive(i);
+            break;
+          }
+      } else if (e.key === "ArrowRight") {
+        if (active >= 0 && hasChildren(items2[active])) {
+          e.preventDefault();
+          setSub({ i: active, kbd: true });
+        }
+      } else if (e.key === "ArrowLeft") {
+        if (depth > 0) {
+          e.preventDefault();
+          onCloseSelf?.();
+        }
+      } else if (e.key === "Enter") {
+        if (active >= 0) {
+          e.preventDefault();
+          activate(active, true);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseAll();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [isLeaf, active, items2, depth, move, activate, onCloseAll, onCloseSelf]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "menu",
+      className: chunkTPGAXYFU_cjs.cx("klun-context-menu", className),
+      style: pos ? { left: pos.left, top: pos.top, width } : { left: -9999, top: -9999, width },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        items2.map(
+          (it, i) => it.divider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-context-menu__divider", role: "separator" }, i) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: (el) => {
+                itemEls.current[i] = el;
+              },
+              type: "button",
+              role: "menuitem",
+              "aria-haspopup": hasChildren(it) || void 0,
+              "aria-expanded": hasChildren(it) ? sub?.i === i : void 0,
+              disabled: it.disabled,
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-context-menu__item",
+                it.danger && "klun-context-menu__item--danger",
+                i === active && "is-active"
+              ),
+              onMouseEnter: () => {
+                setActive(i);
+                if (isSelectable(it)) setSub(hasChildren(it) ? { i, kbd: false } : null);
+              },
+              onClick: () => activate(i, false),
+              children: [
+                it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__icon", children: it.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__label", children: it.label }),
+                hasChildren(it) ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-context-menu__arrow" }) : it.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__shortcut", children: it.shortcut }) : null
+              ]
+            },
+            i
+          )
+        ),
+        sub && items2[sub.i]?.children ? /* @__PURE__ */ jsxRuntime.jsx(
+          MenuPanel,
+          {
+            items: items2[sub.i].children,
+            width,
+            anchorEl: itemEls.current[sub.i],
+            autoActive: sub.kbd,
+            depth: depth + 1,
+            onCloseAll,
+            onCloseSelf: () => setSub(null)
+          },
+          `sub-${sub.i}`
+        ) : null
+      ]
+    }
+  );
+}
+function ContextMenu2({ open, x, y, items: items2, onClose, width = 208, className }) {
+  if (!open || typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "klun-context-menu__layer",
+        onMouseDown: onClose,
+        onContextMenu: (e) => {
+          e.preventDefault();
+          onClose();
+        },
+        onWheel: onClose,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          MenuPanel,
+          {
+            items: items2,
+            width,
+            className,
+            point: { x, y },
+            depth: 0,
+            onCloseAll: onClose
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+ContextMenu2.displayName = "ContextMenu";
+function useContextMenu() {
+  const [state, setState] = react.useState(null);
+  const open = react.useCallback((e, items2) => {
+    e.preventDefault();
+    setState({ x: e.clientX, y: e.clientY, items: items2 });
+  }, []);
+  const close = react.useCallback(() => setState(null), []);
+  return { state, open, close };
+}
 var Drawer = react.forwardRef(function Drawer2({
   open,
   onClose,
@@ -9861,8 +10058,8 @@ var Drawer = react.forwardRef(function Drawer2({
   ...props
 }, ref) {
   const { drawer } = useLocale();
-  const place = placement ?? side ?? "right";
-  const horizontal = place === "left" || place === "right";
+  const place2 = placement ?? side ?? "right";
+  const horizontal = place2 === "left" || place2 === "right";
   const prevOpen = react.useRef(open);
   react.useEffect(() => {
     if (!open) return;
@@ -9889,7 +10086,7 @@ var Drawer = react.forwardRef(function Drawer2({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${place}`, !mask && "klun-drawer--no-mask"),
+      className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${place2}`, !mask && "klun-drawer--no-mask"),
       style: zIndex != null ? { zIndex } : void 0,
       onClick: maskClosable ? onClose : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9972,6 +10169,146 @@ var Dropdown = react.forwardRef(function Dropdown2({ trigger, items: items2 = []
   ] });
 });
 Dropdown.displayName = "Dropdown";
+var MIN = 0.25;
+var MAX = 6;
+var clampScale = (s) => Math.min(MAX, Math.max(MIN, +s.toFixed(2)));
+function ImageViewer({
+  open,
+  src,
+  alt,
+  items: items2,
+  index,
+  onIndexChange,
+  onClose,
+  onDownload,
+  title,
+  zoomable = true,
+  rotatable = true,
+  closeOnBackdrop = true,
+  className
+}) {
+  const gallery = items2 && items2.length > 0 ? items2 : src != null ? [{ src, alt }] : [];
+  const [innerIndex, setInnerIndex] = react.useState(0);
+  const idx = index ?? innerIndex;
+  const safeIdx = Math.min(Math.max(idx, 0), Math.max(0, gallery.length - 1));
+  const current = gallery[safeIdx];
+  const [scale, setScale] = react.useState(1);
+  const [rot, setRot] = react.useState(0);
+  const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const drag = react.useRef(null);
+  const reset = react.useCallback(() => {
+    setScale(1);
+    setRot(0);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  const goTo = react.useCallback(
+    (next) => {
+      if (gallery.length < 2) return;
+      const n = (next + gallery.length) % gallery.length;
+      if (index === void 0) setInnerIndex(n);
+      onIndexChange?.(n);
+      reset();
+    },
+    [gallery.length, index, onIndexChange, reset]
+  );
+  react.useEffect(() => {
+    reset();
+  }, [safeIdx, open, reset]);
+  react.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowLeft") goTo(safeIdx - 1);
+      else if (e.key === "ArrowRight") goTo(safeIdx + 1);
+      else if (zoomable && (e.key === "+" || e.key === "=")) setScale((s) => clampScale(s + 0.25));
+      else if (zoomable && (e.key === "-" || e.key === "_")) setScale((s) => clampScale(s - 0.25));
+      else if (e.key === "0") reset();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, safeIdx, zoomable, onClose, goTo, reset]);
+  if (!open || !current || typeof document === "undefined") return null;
+  const onWheel = (e) => {
+    if (!zoomable) return;
+    e.preventDefault();
+    setScale((s) => clampScale(s + (e.deltaY < 0 ? 0.2 : -0.2)));
+  };
+  const onImgDown = (e) => {
+    if (scale <= 1) return;
+    e.preventDefault();
+    drag.current = { x: e.clientX, y: e.clientY, px: pan.x, py: pan.y };
+  };
+  const onMove = (e) => {
+    if (!drag.current) return;
+    setPan({ x: drag.current.px + (e.clientX - drag.current.x), y: drag.current.py + (e.clientY - drag.current.y) });
+  };
+  const endDrag = () => {
+    drag.current = null;
+  };
+  const toggleZoom = () => scale > 1 ? reset() : setScale(2);
+  const heading = title ?? current.title ?? current.alt;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkTPGAXYFU_cjs.cx("klun-image-viewer", className),
+        onMouseDown: (e) => {
+          if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+        },
+        onMouseMove: onMove,
+        onMouseUp: endDrag,
+        onMouseLeave: endDrag,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__bar", onMouseDown: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__title", children: [
+              heading,
+              gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-image-viewer__counter", children: [
+                safeIdx + 1,
+                " / ",
+                gallery.length
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__tools", children: [
+              zoomable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Zoom out", onClick: () => setScale((s) => clampScale(s - 0.25)), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-zoom-out-line" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-image-viewer__zoom", children: [
+                  Math.round(scale * 100),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Zoom in", onClick: () => setScale((s) => clampScale(s + 0.25)), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-zoom-in-line" }) })
+              ] }) : null,
+              rotatable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Rotate", onClick: () => setRot((r) => (r + 90) % 360), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-anticlockwise-line" }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Reset", onClick: reset, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-aspect-ratio-line" }) }),
+              onDownload ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Download", onClick: () => onDownload(current, safeIdx), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-line" }) })
+            ] })
+          ] }),
+          gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__nav klun-image-viewer__nav--prev", "aria-label": "Previous", onMouseDown: (e) => e.stopPropagation(), onClick: () => goTo(safeIdx - 1), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-s-line" }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-image-viewer__stage", onMouseDown: (e) => e.stopPropagation(), onWheel, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              className: chunkTPGAXYFU_cjs.cx("klun-image-viewer__img", scale > 1 && "is-zoomed"),
+              src: current.src,
+              alt: current.alt ?? "",
+              draggable: false,
+              onDoubleClick: toggleZoom,
+              onMouseDown: onImgDown,
+              style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale}) rotate(${rot}deg)` }
+            }
+          ) }),
+          gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__nav klun-image-viewer__nav--next", "aria-label": "Next", onMouseDown: (e) => e.stopPropagation(), onClick: () => goTo(safeIdx + 1), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }) }) : null
+        ]
+      }
+    ),
+    document.body
+  );
+}
+ImageViewer.displayName = "ImageViewer";
 var Modal = react.forwardRef(function Modal2({
   open,
   onClose,
@@ -10101,6 +10438,8 @@ var Modal = react.forwardRef(function Modal2({
   );
 });
 Modal.displayName = "Modal";
+var GAP3 = 8;
+var MARGIN = 8;
 var Popconfirm = react.forwardRef(function Popconfirm2({
   title: titleProp,
   description,
@@ -10123,11 +10462,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 +10482,51 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
       document.removeEventListener("keydown", k);
     };
   }, [open]);
+  react.useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const place2 = () => {
+      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 + GAP3;
+          left = tr.left + tr.width / 2 - bw / 2;
+          break;
+        case "left":
+          left = tr.left - bw - GAP3;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        case "right":
+          left = tr.right + GAP3;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        default:
+          top = tr.top - bh - GAP3;
+          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 });
+    };
+    place2();
+    window.addEventListener("scroll", place2, true);
+    window.addEventListener("resize", place2);
+    return () => {
+      window.removeEventListener("scroll", place2, true);
+      window.removeEventListener("resize", place2);
+    };
+  }, [open, placement, title, description]);
   const setRefs = (node) => {
     innerRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -10157,6 +10545,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 +10567,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
   ] });
 });
@@ -10243,6 +10645,7 @@ exports.CompactSelectForInput = CompactSelectForInput;
 exports.ConfigProvider = ConfigProvider;
 exports.Confirm = Confirm;
 exports.ContentLabel = ContentLabel;
+exports.ContextMenu = ContextMenu2;
 exports.CopyButton = CopyButton;
 exports.CounterInput = CounterInput;
 exports.DatePicker = DatePicker;
@@ -10265,6 +10668,7 @@ exports.Grid = Grid;
 exports.Hint = Hint;
 exports.HorizontalFilter = HorizontalFilter;
 exports.ImageUpload = ImageUpload;
+exports.ImageViewer = ImageViewer;
 exports.InlineInput = InlineInput;
 exports.InlineSelect = InlineSelect;
 exports.Input = Input;
@@ -10344,6 +10748,7 @@ exports.toast = toast;
 exports.trTR = trTR;
 exports.useBreakpoint = useBreakpoint;
 exports.useConfig = useConfig;
+exports.useContextMenu = useContextMenu;
 exports.useForm = useForm;
 exports.useLocale = useLocale;
 exports.useMappedSize = useMappedSize;
@@ -10353,5 +10758,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-VFEV4TOL.cjs.map
+//# sourceMappingURL=chunk-VFEV4TOL.cjs.map