@underverse-ui/underverse 2.0.21 → 2.0.22

package/dist/index.cjs

@@ -2416,8 +2416,7 @@ function UEditorPortalProvider({
 function useUEditorPortalContainerGetter() {
   return React12.useContext(UEditorPortalContext);
 }
-function resolveUEditorPortalContainer(getPortalContainer, fallbackGetPortalContainer) {
-  if (typeof document === "undefined") return null;
+function resolveUEditorPortalContainer(getPortalContainer, fallbackGetPortalContainer, fallbackDocument) {
   const getters = [getPortalContainer, fallbackGetPortalContainer];
   for (const getter of getters) {
     if (!getter) continue;
@@ -2427,7 +2426,8 @@ function resolveUEditorPortalContainer(getPortalContainer, fallbackGetPortalCont
     } catch {
     }
   }
-  return document.body;
+  if (fallbackDocument) return fallbackDocument.body;
+  return typeof document !== "undefined" ? document.body : null;
 }
 var React12, import_jsx_runtime13, UEditorPortalContext;
 var init_portal_context = __esm({
@@ -4196,6 +4196,26 @@ function overflowAmount(left, width, viewportWidth, padding) {
   const overflowRight = Math.max(0, left + width - max);
   return overflowLeft + overflowRight;
 }
+function getScrollAncestors(trigger, ownerWindow) {
+  const ancestors = [];
+  let current = trigger.parentElement;
+  while (current) {
+    try {
+      const style = ownerWindow.getComputedStyle(current);
+      const overflow = `${style.overflow} ${style.overflowX} ${style.overflowY}`;
+      if (/(auto|scroll|overlay|hidden)/.test(overflow)) ancestors.push(current);
+    } catch {
+    }
+    current = current.parentElement;
+  }
+  return ancestors;
+}
+function isFiniteRect(rect) {
+  return [rect.top, rect.right, rect.bottom, rect.left, rect.width, rect.height].every(Number.isFinite);
+}
+function isFullyOutsideViewport(rect, viewportWidth, viewportHeight) {
+  return rect.bottom < 0 || rect.right < 0 || rect.top > viewportHeight || rect.left > viewportWidth;
+}
 function computePopoverPosition(args) {
   const { triggerRect, contentSize, placement, offset, padding, viewport, constrainToAvailableHeight } = args;
   let { side, align } = normalizePlacement(placement);
@@ -4293,17 +4313,19 @@ var init_Popover = __esm({
       const isControlled = open !== void 0;
       const [internalOpen, setInternalOpen] = React25.useState(false);
       const triggerRef = React25.useRef(null);
+      const [triggerDocument, setTriggerDocument] = React25.useState(null);
       const positionerRef = React25.useRef(null);
       const panelRef = React25.useRef(null);
+      const pendingFrameRef = React25.useRef(null);
+      const closeRequestedRef = React25.useRef(false);
       const lastAppliedRef = React25.useRef(null);
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.popover?.borderMode ?? globalConfig.borderMode;
       const isOpen = isControlled ? open : internalOpen;
       const contextGetPortalContainer = useUEditorPortalContainerGetter();
-      const portalContainer = isOpen ? resolveUEditorPortalContainer(getPortalContainer, contextGetPortalContainer) : null;
-      const portalDocument = portalContainer?.ownerDocument ?? null;
-      const portalWindow = portalDocument?.defaultView ?? null;
-      useShadCNAnimations(portalDocument);
+      const requestedPortalContainer = isOpen && triggerDocument ? resolveUEditorPortalContainer(getPortalContainer, contextGetPortalContainer, triggerDocument) : null;
+      const portalContainer = requestedPortalContainer?.ownerDocument === triggerDocument ? requestedPortalContainer : triggerDocument?.body ?? null;
+      useShadCNAnimations(isOpen ? triggerDocument : null);
       const setIsOpen = React25.useCallback(
         (next) => {
           if (!isControlled) setInternalOpen(next);
@@ -4314,126 +4336,205 @@ var init_Popover = __esm({
       const offset = 4;
       const padding = 8;
       const initialPlacement = React25.useMemo(() => normalizePlacement(placement), [placement]);
+      const cancelScheduledPositionUpdate = React25.useCallback(() => {
+        const pending = pendingFrameRef.current;
+        if (!pending) return;
+        pendingFrameRef.current = null;
+        try {
+          pending.ownerWindow.cancelAnimationFrame(pending.frameId);
+        } catch {
+        }
+      }, []);
+      const closeWhenPositioningIsUnsafe = React25.useCallback(() => {
+        const positionerEl = positionerRef.current;
+        if (positionerEl) {
+          positionerEl.style.visibility = "hidden";
+          positionerEl.style.pointerEvents = "none";
+        }
+        if (closeRequestedRef.current) return;
+        closeRequestedRef.current = true;
+        setIsOpen(false);
+      }, [setIsOpen]);
       const updatePosition = React25.useCallback(() => {
         const triggerEl = triggerRef.current;
         const positionerEl = positionerRef.current;
         const panelEl = panelRef.current;
-        if (!triggerEl || !positionerEl || !panelEl || !portalWindow) return;
+        if (!triggerEl || !positionerEl || !panelEl) return;
+        const ownerDocument = triggerEl.ownerDocument;
+        const ownerWindow = ownerDocument.defaultView;
+        if (!ownerWindow || ownerWindow.closed || !triggerEl.isConnected || !positionerEl.isConnected || positionerEl.ownerDocument !== ownerDocument || panelEl.ownerDocument !== ownerDocument) {
+          closeWhenPositioningIsUnsafe();
+          return;
+        }
         const contentEl = panelEl.firstElementChild;
-        if (!contentEl) return;
-        const triggerRect = triggerEl.getBoundingClientRect();
-        const widthWanted = matchTriggerWidth ? triggerRect.width : contentWidth;
-        const widthPx = widthWanted == null ? void 0 : Math.max(0, Math.round(widthWanted));
-        if (widthPx == null) {
-          if (positionerEl.style.width) positionerEl.style.width = "";
-        } else if (positionerEl.style.width !== `${widthPx}px`) {
-          positionerEl.style.width = `${widthPx}px`;
-        }
-        const prevApplied = lastAppliedRef.current;
-        const measuredWidth = positionerEl.offsetWidth;
-        const measuredHeight = positionerEl.offsetHeight;
-        const contentRect = positionerEl.getBoundingClientRect();
-        const contentBoxWidth = measuredWidth || contentRect.width;
-        const contentBoxHeight = Math.max(measuredHeight, contentRect.height, contentEl.scrollHeight);
-        const next = computePopoverPosition({
-          triggerRect,
-          contentSize: { width: contentBoxWidth, height: contentBoxHeight },
-          placement,
-          offset,
-          padding,
-          viewport: {
-            width: portalWindow.innerWidth,
-            height: portalWindow.innerHeight
-          },
-          constrainToAvailableHeight
-        });
-        const top = Math.round(next.top);
-        const left = Math.round(next.left);
-        const applied = prevApplied && Math.abs(prevApplied.top - top) < 0.5 && Math.abs(prevApplied.left - left) < 0.5 && prevApplied.side === next.side && prevApplied.align === next.align && prevApplied.width === widthPx && prevApplied.availableHeight === next.availableHeight;
-        if (applied) return;
-        lastAppliedRef.current = {
-          top,
-          left,
-          side: next.side,
-          align: next.align,
-          width: widthPx,
-          availableHeight: next.availableHeight
-        };
-        positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-        positionerEl.style.setProperty("--underverse-popover-available-height", `${next.availableHeight}px`);
-        positionerEl.dataset.side = next.side;
-        positionerEl.dataset.align = next.align;
-        panelEl.style.transformOrigin = getTransformOrigin2(next.side, next.align);
-        if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
-        if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
-      }, [placement, matchTriggerWidth, contentWidth, portalWindow, constrainToAvailableHeight]);
+        if (!contentEl) {
+          closeWhenPositioningIsUnsafe();
+          return;
+        }
+        try {
+          const triggerRect = triggerEl.getBoundingClientRect();
+          const viewportWidth = ownerWindow.innerWidth;
+          const viewportHeight = ownerWindow.innerHeight;
+          if (!isFiniteRect(triggerRect) || !Number.isFinite(viewportWidth) || !Number.isFinite(viewportHeight) || viewportWidth <= 0 || viewportHeight <= 0 || isFullyOutsideViewport(triggerRect, viewportWidth, viewportHeight)) {
+            closeWhenPositioningIsUnsafe();
+            return;
+          }
+          const widthWanted = matchTriggerWidth ? triggerRect.width : contentWidth;
+          const widthPx = widthWanted == null ? void 0 : Math.max(0, Math.round(widthWanted));
+          if (widthPx == null) {
+            if (positionerEl.style.width) positionerEl.style.width = "";
+          } else if (positionerEl.style.width !== `${widthPx}px`) {
+            positionerEl.style.width = `${widthPx}px`;
+          }
+          const prevApplied = lastAppliedRef.current;
+          const measuredWidth = positionerEl.offsetWidth;
+          const measuredHeight = positionerEl.offsetHeight;
+          const contentRect = positionerEl.getBoundingClientRect();
+          const contentBoxWidth = measuredWidth || contentRect.width;
+          const contentBoxHeight = Math.max(measuredHeight, contentRect.height, contentEl.scrollHeight);
+          const next = computePopoverPosition({
+            triggerRect,
+            contentSize: { width: contentBoxWidth, height: contentBoxHeight },
+            placement,
+            offset,
+            padding,
+            viewport: {
+              width: viewportWidth,
+              height: viewportHeight
+            },
+            constrainToAvailableHeight
+          });
+          const top = Math.round(next.top);
+          const left = Math.round(next.left);
+          const applied = prevApplied && prevApplied.positioner === positionerEl && Math.abs(prevApplied.top - top) < 0.5 && Math.abs(prevApplied.left - left) < 0.5 && prevApplied.side === next.side && prevApplied.align === next.align && prevApplied.width === widthPx && prevApplied.availableHeight === next.availableHeight;
+          if (applied) return;
+          lastAppliedRef.current = {
+            positioner: positionerEl,
+            top,
+            left,
+            side: next.side,
+            align: next.align,
+            width: widthPx,
+            availableHeight: next.availableHeight
+          };
+          positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+          positionerEl.style.setProperty("--underverse-popover-available-height", `${next.availableHeight}px`);
+          positionerEl.dataset.side = next.side;
+          positionerEl.dataset.align = next.align;
+          panelEl.style.transformOrigin = getTransformOrigin2(next.side, next.align);
+          if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
+          if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
+        } catch {
+          closeWhenPositioningIsUnsafe();
+        }
+      }, [placement, matchTriggerWidth, contentWidth, constrainToAvailableHeight, closeWhenPositioningIsUnsafe]);
+      const schedulePositionUpdate = React25.useCallback(() => {
+        if (pendingFrameRef.current) return;
+        const triggerEl = triggerRef.current;
+        const ownerWindow = triggerEl?.ownerDocument.defaultView;
+        if (!triggerEl || !ownerWindow || ownerWindow.closed) {
+          closeWhenPositioningIsUnsafe();
+          return;
+        }
+        try {
+          const frameId = ownerWindow.requestAnimationFrame(() => {
+            pendingFrameRef.current = null;
+            updatePosition();
+          });
+          pendingFrameRef.current = { ownerWindow, frameId };
+        } catch {
+          closeWhenPositioningIsUnsafe();
+        }
+      }, [closeWhenPositioningIsUnsafe, updatePosition]);
       React25.useLayoutEffect(() => {
-        if (!isOpen || !portalWindow) return;
+        if (isOpen) {
+          closeRequestedRef.current = false;
+          return;
+        }
+        lastAppliedRef.current = null;
+        cancelScheduledPositionUpdate();
+      }, [cancelScheduledPositionUpdate, isOpen]);
+      React25.useLayoutEffect(() => {
+        if (!isOpen || !portalContainer) return;
         updatePosition();
-        let raf1 = 0;
-        let raf2 = 0;
-        raf1 = portalWindow.requestAnimationFrame(() => {
-          updatePosition();
-          raf2 = portalWindow.requestAnimationFrame(() => updatePosition());
-        });
-        return () => {
-          portalWindow.cancelAnimationFrame(raf1);
-          portalWindow.cancelAnimationFrame(raf2);
-        };
-      }, [isOpen, portalWindow, updatePosition]);
+        schedulePositionUpdate();
+        return cancelScheduledPositionUpdate;
+      }, [cancelScheduledPositionUpdate, isOpen, portalContainer, schedulePositionUpdate, updatePosition]);
       React25.useEffect(() => {
-        if (!isOpen || !portalWindow) return;
-        let raf = 0;
-        const tick = () => {
-          updatePosition();
-          raf = portalWindow.requestAnimationFrame(tick);
-        };
-        raf = portalWindow.requestAnimationFrame(tick);
-        return () => portalWindow.cancelAnimationFrame(raf);
-      }, [isOpen, portalWindow, updatePosition]);
-      React25.useEffect(() => {
-        if (!isOpen || !portalDocument || !portalWindow) return;
-        let raf = 0;
-        const handler = () => {
-          portalWindow.cancelAnimationFrame(raf);
-          raf = portalWindow.requestAnimationFrame(() => updatePosition());
-        };
-        handler();
-        portalWindow.addEventListener("resize", handler);
-        portalWindow.addEventListener("scroll", handler, true);
-        portalDocument.addEventListener("scroll", handler, true);
+        const triggerEl = triggerRef.current;
+        const positionerEl = positionerRef.current;
+        if (!isOpen || !triggerEl || !positionerEl || !portalContainer) return;
+        const ownerDocument = triggerEl.ownerDocument;
+        const ownerWindow = ownerDocument.defaultView;
+        if (!ownerWindow || ownerWindow.closed || portalContainer.ownerDocument !== ownerDocument) {
+          closeWhenPositioningIsUnsafe();
+          return;
+        }
+        const scrollAncestors = getScrollAncestors(triggerEl, ownerWindow);
+        const passiveOptions = { passive: true };
+        for (const ancestor of scrollAncestors) {
+          ancestor.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
+        }
+        ownerWindow.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
+        ownerWindow.addEventListener("resize", schedulePositionUpdate);
+        ownerDocument.addEventListener("scroll", schedulePositionUpdate, { capture: true, passive: true });
+        const visualViewport = ownerWindow.visualViewport;
+        visualViewport?.addEventListener("scroll", schedulePositionUpdate, passiveOptions);
+        visualViewport?.addEventListener("resize", schedulePositionUpdate);
+        const ResizeObserverCtor = ownerWindow.ResizeObserver;
+        const resizeObserver = ResizeObserverCtor ? new ResizeObserverCtor(schedulePositionUpdate) : null;
+        resizeObserver?.observe(triggerEl);
+        resizeObserver?.observe(positionerEl);
+        const contentEl = panelRef.current?.firstElementChild;
+        if (contentEl) resizeObserver?.observe(contentEl);
+        const MutationObserverCtor = ownerWindow.MutationObserver;
+        const mutationObserver = MutationObserverCtor ? new MutationObserverCtor(() => {
+          const currentTrigger = triggerRef.current;
+          if (!currentTrigger || !currentTrigger.isConnected || currentTrigger.ownerDocument !== ownerDocument) {
+            closeWhenPositioningIsUnsafe();
+          }
+        }) : null;
+        if (mutationObserver && ownerDocument.documentElement) {
+          mutationObserver.observe(ownerDocument.documentElement, { childList: true, subtree: true });
+        }
+        schedulePositionUpdate();
         return () => {
-          portalWindow.cancelAnimationFrame(raf);
-          portalWindow.removeEventListener("resize", handler);
-          portalWindow.removeEventListener("scroll", handler, true);
-          portalDocument.removeEventListener("scroll", handler, true);
+          for (const ancestor of scrollAncestors) {
+            ancestor.removeEventListener("scroll", schedulePositionUpdate);
+          }
+          ownerWindow.removeEventListener("scroll", schedulePositionUpdate);
+          ownerWindow.removeEventListener("resize", schedulePositionUpdate);
+          ownerDocument.removeEventListener("scroll", schedulePositionUpdate, true);
+          visualViewport?.removeEventListener("scroll", schedulePositionUpdate);
+          visualViewport?.removeEventListener("resize", schedulePositionUpdate);
+          resizeObserver?.disconnect();
+          mutationObserver?.disconnect();
+          cancelScheduledPositionUpdate();
         };
-      }, [isOpen, portalDocument, portalWindow, updatePosition]);
+      }, [
+        cancelScheduledPositionUpdate,
+        closeWhenPositioningIsUnsafe,
+        isOpen,
+        portalContainer,
+        schedulePositionUpdate
+      ]);
       React25.useEffect(() => {
-        if (!isOpen || !portalWindow) return;
-        const ResizeObserverCtor = portalWindow.ResizeObserver;
-        if (!ResizeObserverCtor) return;
-        const ro = new ResizeObserverCtor(() => updatePosition());
-        if (positionerRef.current) ro.observe(positionerRef.current);
-        if (triggerRef.current) ro.observe(triggerRef.current);
-        return () => ro.disconnect();
-      }, [isOpen, portalWindow, updatePosition]);
-      React25.useLayoutEffect(() => {
-        if (!isOpen) {
-          lastAppliedRef.current = null;
+        const triggerEl = triggerRef.current;
+        if (!isOpen || !triggerEl || !portalContainer) return;
+        const ownerDocument = triggerEl.ownerDocument;
+        const ownerWindow = ownerDocument.defaultView;
+        if (!ownerWindow || portalContainer.ownerDocument !== ownerDocument) {
+          closeWhenPositioningIsUnsafe();
           return;
         }
-      }, [isOpen]);
-      React25.useEffect(() => {
-        if (!isOpen || !portalDocument || !portalWindow) return;
         const handleClickOutside = (event) => {
           const target = event.target;
-          const triggerEl = triggerRef.current;
+          const currentTrigger = triggerRef.current;
           const popoverEl = positionerRef.current;
-          if (!triggerEl || !popoverEl) return;
-          if (triggerEl.contains(target)) return;
+          if (!currentTrigger || !popoverEl) return;
+          if (currentTrigger.contains(target)) return;
           if (popoverEl.contains(target)) return;
-          if (target instanceof portalWindow.Element && target.closest("[data-popover]")) return;
+          if (target instanceof ownerWindow.Element && target.closest("[data-popover]")) return;
           setIsOpen(false);
         };
         const handleEscape = (event) => {
@@ -4441,18 +4542,30 @@ var init_Popover = __esm({
             setIsOpen(false);
           }
         };
-        portalDocument.addEventListener("mousedown", handleClickOutside);
-        portalDocument.addEventListener("keydown", handleEscape);
+        ownerDocument.addEventListener("mousedown", handleClickOutside);
+        ownerDocument.addEventListener("keydown", handleEscape);
         return () => {
-          portalDocument.removeEventListener("mousedown", handleClickOutside);
-          portalDocument.removeEventListener("keydown", handleEscape);
+          ownerDocument.removeEventListener("mousedown", handleClickOutside);
+          ownerDocument.removeEventListener("keydown", handleEscape);
         };
-      }, [isOpen, portalDocument, portalWindow, setIsOpen]);
+      }, [closeWhenPositioningIsUnsafe, isOpen, portalContainer, setIsOpen]);
       const handleTriggerClick = () => {
         if (!disabled) {
           setIsOpen(!isOpen);
         }
       };
+      const triggerProps = trigger.props;
+      const childRef = triggerProps.ref;
+      const setTriggerNode = React25.useCallback((node) => {
+        triggerRef.current = node;
+        if (node) {
+          setTriggerDocument((currentDocument) => currentDocument === node.ownerDocument ? currentDocument : node.ownerDocument);
+        }
+      }, []);
+      const composedTriggerRef = React25.useMemo(
+        () => mergeRefs(childRef, setTriggerNode),
+        [childRef, setTriggerNode]
+      );
       const popoverContent = isOpen && portalContainer ? (0, import_react_dom3.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
@@ -4508,13 +4621,9 @@ var init_Popover = __esm({
       ) : null;
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
         (() => {
-          const triggerProps = trigger.props;
-          const childRef = triggerProps.ref;
           return React25.cloneElement(trigger, {
             ...triggerProps,
-            ref: mergeRefs(childRef, (node) => {
-              triggerRef.current = node;
-            }),
+            ref: composedTriggerRef,
             onClick: chainEventHandlers(
               (e) => {
                 triggerRef.current = e.currentTarget;
@@ -4565,7 +4674,6 @@ var init_DropdownMenu = __esm({
     "use strict";
     "use client";
     init_cn();
-    init_animations();
     import_react17 = __toESM(require("react"), 1);
     init_react_compose();
     init_Popover();
@@ -4573,7 +4681,6 @@ var init_DropdownMenu = __esm({
     init_radius();
     init_UnderverseConfigContext();
     init_form_control_size();
-    init_portal_context();
     import_jsx_runtime33 = require("react/jsx-runtime");
     DropdownMenuContext = import_react17.default.createContext(null);
     DropdownMenu = ({
@@ -4608,7 +4715,6 @@ var init_DropdownMenu = __esm({
       const [activeIndex, setActiveIndex] = useResettingIndex(open);
       const parentMenu = import_react17.default.useContext(DropdownMenuContext);
       const hoverCloseTimeoutRef = import_react17.default.useRef(null);
-      const getPortalContainer = useUEditorPortalContainerGetter();
       const cancelHoverClose = import_react17.default.useCallback(() => {
         if (hoverCloseTimeoutRef.current === null) return;
         clearTimeout(hoverCloseTimeoutRef.current);
@@ -4641,7 +4747,6 @@ var init_DropdownMenu = __esm({
         item.focus();
         item.scrollIntoView({ block: "nearest" });
       }, [getEnabledMenuItems, setActiveIndex]);
-      useShadCNAnimations();
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
       import_react17.default.useEffect(() => {
@@ -4762,8 +4867,11 @@ var init_DropdownMenu = __esm({
         triggerRef.current = node;
       }, [childRef]);
       const handleTriggerKeyDown = import_react17.default.useCallback((event) => {
-        const portalWindow = resolveUEditorPortalContainer(getPortalContainer)?.ownerDocument.defaultView;
-        const scheduleFrame = portalWindow?.requestAnimationFrame.bind(portalWindow) ?? requestAnimationFrame;
+        const triggerWindow = event.currentTarget.ownerDocument.defaultView;
+        const scheduleFrame = (callback) => {
+          if (triggerWindow) triggerWindow.requestAnimationFrame(callback);
+          else callback(0);
+        };
         if (!disabled) {
           if (event.key === "ArrowDown") {
             event.preventDefault();
@@ -4782,7 +4890,7 @@ var init_DropdownMenu = __esm({
           }
         }
         triggerOnKeyDown?.(event);
-      }, [disabled, focusMenuItem, getEnabledMenuItems, getPortalContainer, setOpen, triggerOnKeyDown]);
+      }, [disabled, focusMenuItem, getEnabledMenuItems, setOpen, triggerOnKeyDown]);
       const handleTriggerClick = import_react17.default.useCallback((event) => {
         if (openOnHover && !disabled) {
           cancelHoverClose();