@underverse-ui/underverse 2.0.17 → 2.0.18

package/dist/{menu-bar-7MPCNTHR.js → menu-bar-JXYQ5CH5.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Modal_default
-} from "./chunk-HEXF4EOB.js";
+} from "./chunk-NJ53GV74.js";
 import {
   DEFAULT_TABLE_ROW_HEIGHT,
   DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
@@ -21,11 +21,11 @@ import {
   sanitizeUEditorUrl,
   useDropdownMenuClose,
   useSharedEditorUiRenderState
-} from "./chunk-23VKHYEB.js";
+} from "./chunk-RSLY7UU2.js";
 import {
   cn,
   useSmartTranslations
-} from "./chunk-EPBYGZHZ.js";
+} from "./chunk-PZCD342B.js";
 import "./chunk-NSBPE2FW.js";
 
 // src/components/UEditor/menu-bar.tsx
@@ -945,4 +945,4 @@ var MenuBar = ({
 export {
   MenuBar
 };
-//# sourceMappingURL=menu-bar-7MPCNTHR.js.map
+//# sourceMappingURL=menu-bar-JXYQ5CH5.js.map

package/dist/ueditor.cjs

@@ -2061,21 +2061,23 @@ var init_cn = __esm({
 });
 
 // src/utils/animations.ts
-function ensureAnimationStylesInjected() {
-  if (typeof document !== "undefined") {
+function ensureAnimationStylesInjected(targetDocument) {
+  const resolvedDocument = targetDocument ?? (typeof document !== "undefined" ? document : void 0);
+  if (resolvedDocument) {
     const styleId = "shadcn-animations";
-    if (!document.getElementById(styleId)) {
-      const styleElement = document.createElement("style");
+    if (!resolvedDocument.getElementById(styleId)) {
+      const styleElement = resolvedDocument.createElement("style");
       styleElement.id = styleId;
       styleElement.textContent = shadcnAnimationStyles;
-      document.head.appendChild(styleElement);
+      resolvedDocument.head.appendChild(styleElement);
     }
   }
 }
-function useShadCNAnimations() {
+function useShadCNAnimations(targetDocument) {
   (0, import_react.useEffect)(() => {
-    ensureAnimationStylesInjected();
-  }, []);
+    if (targetDocument === null) return;
+    ensureAnimationStylesInjected(targetDocument);
+  }, [targetDocument]);
 }
 var import_react, shadcnAnimationStyles;
 var init_animations = __esm({
@@ -2331,11 +2333,13 @@ function UEditorPortalProvider({
 function useUEditorPortalContainerGetter() {
   return React6.useContext(UEditorPortalContext);
 }
-function resolveUEditorPortalContainer(getPortalContainer) {
+function resolveUEditorPortalContainer(getPortalContainer, fallbackGetPortalContainer) {
   if (typeof document === "undefined") return null;
-  if (getPortalContainer) {
+  const getters = [getPortalContainer, fallbackGetPortalContainer];
+  for (const getter of getters) {
+    if (!getter) continue;
     try {
-      const container = getPortalContainer();
+      const container = getter();
       if (container) return container;
     } catch {
     }
@@ -2384,20 +2388,30 @@ function overflowAmount(left, width, viewportWidth, padding) {
   return overflowLeft + overflowRight;
 }
 function computePopoverPosition(args) {
-  const { triggerRect, contentSize, placement, offset, padding, viewport } = args;
+  const { triggerRect, contentSize, placement, offset, padding, viewport, constrainToAvailableHeight } = args;
   let { side, align } = normalizePlacement(placement);
+  const availableBelow = Math.max(0, viewport.height - padding - triggerRect.bottom - offset);
+  const availableAbove = Math.max(0, triggerRect.top - padding - offset);
   if (side === "bottom") {
-    const bottomTop = triggerRect.bottom + offset;
-    const overflowsBottom = bottomTop + contentSize.height > viewport.height - padding;
-    const topTop = triggerRect.top - offset - contentSize.height;
-    const fitsTop = topTop >= padding;
-    if (overflowsBottom && fitsTop) side = "top";
+    if (constrainToAvailableHeight) {
+      if (contentSize.height > availableBelow && availableAbove > availableBelow) side = "top";
+    } else {
+      const bottomTop = triggerRect.bottom + offset;
+      const overflowsBottom = bottomTop + contentSize.height > viewport.height - padding;
+      const topTop = triggerRect.top - offset - contentSize.height;
+      const fitsTop = topTop >= padding;
+      if (overflowsBottom && fitsTop) side = "top";
+    }
   } else if (side === "top") {
-    const topTop = triggerRect.top - offset - contentSize.height;
-    const overflowsTop = topTop < padding;
-    const bottomTop = triggerRect.bottom + offset;
-    const fitsBottom = bottomTop + contentSize.height <= viewport.height - padding;
-    if (overflowsTop && fitsBottom) side = "bottom";
+    if (constrainToAvailableHeight) {
+      if (contentSize.height > availableAbove && availableBelow > availableAbove) side = "bottom";
+    } else {
+      const topTop = triggerRect.top - offset - contentSize.height;
+      const overflowsTop = topTop < padding;
+      const bottomTop = triggerRect.bottom + offset;
+      const fitsBottom = bottomTop + contentSize.height <= viewport.height - padding;
+      if (overflowsTop && fitsBottom) side = "bottom";
+    }
   } else if (side === "right") {
     const rightLeft = triggerRect.right + offset;
     const overflowsRight = rightLeft + contentSize.width > viewport.width - padding;
@@ -2421,16 +2435,18 @@ function computePopoverPosition(args) {
     if (align === "start" && startOverflow > 0 && endOverflow < startOverflow) align = "end";
     if (align === "end" && endOverflow > 0 && startOverflow < endOverflow) align = "start";
     left = align === "end" ? leftEnd : leftStart;
-    top = side === "top" ? triggerRect.top - offset - contentSize.height : triggerRect.bottom + offset;
+    const availableHeight = side === "top" ? availableAbove : availableBelow;
+    const renderedHeight = constrainToAvailableHeight ? Math.min(contentSize.height, availableHeight) : contentSize.height;
+    top = side === "top" ? triggerRect.top - offset - renderedHeight : triggerRect.bottom + offset;
     left = clamp(left, padding, viewport.width - contentSize.width - padding);
-    top = clamp(top, padding, viewport.height - contentSize.height - padding);
-    return { top, left, side, align };
+    top = clamp(top, padding, viewport.height - renderedHeight - padding);
+    return { top, left, side, align, availableHeight };
   }
   top = triggerRect.top;
   left = side === "left" ? triggerRect.left - offset - contentSize.width : triggerRect.right + offset;
   left = clamp(left, padding, viewport.width - contentSize.width - padding);
   top = clamp(top, padding, viewport.height - contentSize.height - padding);
-  return { top, left, side, align };
+  return { top, left, side, align, availableHeight: Math.max(0, viewport.height - padding * 2) };
 }
 var React7, import_react_dom, import_jsx_runtime7, clamp, Popover;
 var init_Popover = __esm({
@@ -2461,7 +2477,9 @@ var init_Popover = __esm({
       onOpenChange,
       matchTriggerWidth = false,
       contentWidth,
-      borderMode
+      borderMode,
+      getPortalContainer,
+      constrainToAvailableHeight = false
     }) => {
       const isControlled = open !== void 0;
       const [internalOpen, setInternalOpen] = React7.useState(false);
@@ -2469,14 +2487,14 @@ var init_Popover = __esm({
       const positionerRef = React7.useRef(null);
       const panelRef = React7.useRef(null);
       const lastAppliedRef = React7.useRef(null);
-      useShadCNAnimations();
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.popover?.borderMode ?? globalConfig.borderMode;
       const isOpen = isControlled ? open : internalOpen;
-      const getPortalContainer = useUEditorPortalContainerGetter();
-      const portalContainer = isOpen ? resolveUEditorPortalContainer(getPortalContainer) : null;
+      const contextGetPortalContainer = useUEditorPortalContainerGetter();
+      const portalContainer = isOpen ? resolveUEditorPortalContainer(getPortalContainer, contextGetPortalContainer) : null;
       const portalDocument = portalContainer?.ownerDocument ?? null;
       const portalWindow = portalDocument?.defaultView ?? null;
+      useShadCNAnimations(portalDocument);
       const setIsOpen = React7.useCallback(
         (next) => {
           if (!isControlled) setInternalOpen(next);
@@ -2486,20 +2504,14 @@ var init_Popover = __esm({
       );
       const offset = 4;
       const padding = 8;
-      const triggerSelector = React7.useId();
       const initialPlacement = React7.useMemo(() => normalizePlacement(placement), [placement]);
-      React7.useLayoutEffect(() => {
-        if (typeof document === "undefined") return;
-        const triggerEl = document.querySelector(`[data-underverse-popover-trigger="${triggerSelector}"]`);
-        if (triggerEl) {
-          triggerRef.current = triggerEl;
-        }
-      }, [triggerSelector, trigger]);
       const updatePosition = React7.useCallback(() => {
         const triggerEl = triggerRef.current;
         const positionerEl = positionerRef.current;
         const panelEl = panelRef.current;
-        if (!triggerEl || !positionerEl || !panelEl) return;
+        if (!triggerEl || !positionerEl || !panelEl || !portalWindow) 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));
@@ -2513,7 +2525,7 @@ var init_Popover = __esm({
         const measuredHeight = positionerEl.offsetHeight;
         const contentRect = positionerEl.getBoundingClientRect();
         const contentBoxWidth = measuredWidth || contentRect.width;
-        const contentBoxHeight = measuredHeight || contentRect.height;
+        const contentBoxHeight = Math.max(measuredHeight, contentRect.height, contentEl.scrollHeight);
         const next = computePopoverPosition({
           triggerRect,
           contentSize: { width: contentBoxWidth, height: contentBoxHeight },
@@ -2521,20 +2533,31 @@ var init_Popover = __esm({
           offset,
           padding,
           viewport: {
-            width: portalWindow?.innerWidth ?? window.innerWidth,
-            height: portalWindow?.innerHeight ?? window.innerHeight
-          }
+            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;
+        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 };
+        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 = getTransformOrigin(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]);
+      }, [placement, matchTriggerWidth, contentWidth, portalWindow, constrainToAvailableHeight]);
       React7.useLayoutEffect(() => {
         if (!isOpen || !portalWindow) return;
         updatePosition();
@@ -2683,7 +2706,6 @@ var init_Popover = __esm({
             ref: mergeRefs(childRef, (node) => {
               triggerRef.current = node;
             }),
-            "data-underverse-popover-trigger": triggerSelector,
             onClick: chainEventHandlers(
               (e) => {
                 triggerRef.current = e.currentTarget;