@underverse-ui/underverse 2.0.16 → 2.0.18

package/dist/{chunk-23VKHYEB.js → chunk-RSLY7UU2.js}

@@ -11,7 +11,7 @@ import {
   setRefValue,
   useSmartTranslations,
   useUEditorPortalContainerGetter
-} from "./chunk-EPBYGZHZ.js";
+} from "./chunk-PZCD342B.js";
 
 // src/contexts/UnderverseConfigContext.tsx
 import * as React from "react";
@@ -192,24 +192,26 @@ var shadcnAnimationStyles = `
     transition: backdrop-filter 200ms ease, background-color 200ms ease;
   }
 `;
-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) {
   useEffect(() => {
-    ensureAnimationStylesInjected();
-  }, []);
+    if (targetDocument === null) return;
+    ensureAnimationStylesInjected(targetDocument);
+  }, [targetDocument]);
 }
-function injectAnimationStyles() {
-  ensureAnimationStylesInjected();
+function injectAnimationStyles(targetDocument) {
+  ensureAnimationStylesInjected(targetDocument);
 }
 function getAnimationStyles() {
   return shadcnAnimationStyles;
@@ -277,20 +279,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;
@@ -314,16 +326,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 Popover = ({
   trigger,
@@ -339,7 +353,9 @@ var Popover = ({
   onOpenChange,
   matchTriggerWidth = false,
   contentWidth,
-  borderMode
+  borderMode,
+  getPortalContainer,
+  constrainToAvailableHeight = false
 }) => {
   const isControlled = open !== void 0;
   const [internalOpen, setInternalOpen] = React2.useState(false);
@@ -347,14 +363,14 @@ var Popover = ({
   const positionerRef = React2.useRef(null);
   const panelRef = React2.useRef(null);
   const lastAppliedRef = React2.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 = React2.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
@@ -364,20 +380,14 @@ var Popover = ({
   );
   const offset = 4;
   const padding = 8;
-  const triggerSelector = React2.useId();
   const initialPlacement = React2.useMemo(() => normalizePlacement(placement), [placement]);
-  React2.useLayoutEffect(() => {
-    if (typeof document === "undefined") return;
-    const triggerEl = document.querySelector(`[data-underverse-popover-trigger="${triggerSelector}"]`);
-    if (triggerEl) {
-      triggerRef.current = triggerEl;
-    }
-  }, [triggerSelector, trigger]);
   const updatePosition = React2.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));
@@ -391,7 +401,7 @@ var Popover = ({
     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 },
@@ -399,20 +409,31 @@ var Popover = ({
       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]);
   React2.useLayoutEffect(() => {
     if (!isOpen || !portalWindow) return;
     updatePosition();
@@ -561,7 +582,6 @@ var Popover = ({
         ref: mergeRefs(childRef, (node) => {
           triggerRef.current = node;
         }),
-        "data-underverse-popover-trigger": triggerSelector,
         onClick: chainEventHandlers(
           (e) => {
             triggerRef.current = e.currentTarget;
@@ -1891,7 +1911,7 @@ var ClipboardImages = Extension.create({
 });
 
 // src/components/UEditor/inputs.tsx
-import { useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
 import { Check, X } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function normalizeUrl(raw) {
@@ -1906,7 +1926,7 @@ var LinkInput = ({
   const [url, setUrl] = useState3(initialUrl);
   const [error, setError] = useState3("");
   const inputRef = useRef2(null);
-  const errorId = useId2();
+  const errorId = useId();
   useEffect3(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
@@ -4658,4 +4678,4 @@ export {
   EditorToolbar,
   UEDITOR_PROSEMIRROR_CLASS_NAME
 };
-//# sourceMappingURL=chunk-23VKHYEB.js.map
+//# sourceMappingURL=chunk-RSLY7UU2.js.map