@underverse-ui/underverse 2.0.17 → 2.0.18

package/dist/{chunk-SKCO2GFM.js → chunk-SBDZKVUJ.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-EPBYGZHZ.js";
+} from "./chunk-PZCD342B.js";
 
 // src/components/emoji-ui.tsx
 import React from "react";
@@ -71,4 +71,4 @@ export {
   getEmojiImageUrl,
   EmojiGridButton
 };
-//# sourceMappingURL=chunk-SKCO2GFM.js.map
+//# sourceMappingURL=chunk-SBDZKVUJ.js.map

package/dist/index.cjs

@@ -2416,11 +2416,13 @@ function UEditorPortalProvider({
 function useUEditorPortalContainerGetter() {
   return React12.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 {
     }
@@ -3967,24 +3969,26 @@ var init_Modal = __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_react14.useEffect)(() => {
-    ensureAnimationStylesInjected();
-  }, []);
+    if (targetDocument === null) return;
+    ensureAnimationStylesInjected(targetDocument);
+  }, [targetDocument]);
 }
-function injectAnimationStyles() {
-  ensureAnimationStylesInjected();
+function injectAnimationStyles(targetDocument) {
+  ensureAnimationStylesInjected(targetDocument);
 }
 function getAnimationStyles() {
   return shadcnAnimationStyles;
@@ -4193,20 +4197,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;
@@ -4230,16 +4244,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 = clamp2(left, padding, viewport.width - contentSize.width - padding);
-    top = clamp2(top, padding, viewport.height - contentSize.height - padding);
-    return { top, left, side, align };
+    top = clamp2(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 = clamp2(left, padding, viewport.width - contentSize.width - padding);
   top = clamp2(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 React25, import_react_dom3, import_jsx_runtime27, clamp2, Popover;
 var init_Popover = __esm({
@@ -4270,7 +4286,9 @@ var init_Popover = __esm({
       onOpenChange,
       matchTriggerWidth = false,
       contentWidth,
-      borderMode
+      borderMode,
+      getPortalContainer,
+      constrainToAvailableHeight = false
     }) => {
       const isControlled = open !== void 0;
       const [internalOpen, setInternalOpen] = React25.useState(false);
@@ -4278,14 +4296,14 @@ var init_Popover = __esm({
       const positionerRef = React25.useRef(null);
       const panelRef = React25.useRef(null);
       const lastAppliedRef = React25.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 = React25.useCallback(
         (next) => {
           if (!isControlled) setInternalOpen(next);
@@ -4295,20 +4313,14 @@ var init_Popover = __esm({
       );
       const offset = 4;
       const padding = 8;
-      const triggerSelector = React25.useId();
       const initialPlacement = React25.useMemo(() => normalizePlacement(placement), [placement]);
-      React25.useLayoutEffect(() => {
-        if (typeof document === "undefined") return;
-        const triggerEl = document.querySelector(`[data-underverse-popover-trigger="${triggerSelector}"]`);
-        if (triggerEl) {
-          triggerRef.current = triggerEl;
-        }
-      }, [triggerSelector, trigger]);
       const updatePosition = React25.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));
@@ -4322,7 +4334,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 },
@@ -4330,20 +4342,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 = 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]);
+      }, [placement, matchTriggerWidth, contentWidth, portalWindow, constrainToAvailableHeight]);
       React25.useLayoutEffect(() => {
         if (!isOpen || !portalWindow) return;
         updatePosition();
@@ -4492,7 +4515,6 @@ var init_Popover = __esm({
             ref: mergeRefs(childRef, (node) => {
               triggerRef.current = node;
             }),
-            "data-underverse-popover-trigger": triggerSelector,
             onClick: chainEventHandlers(
               (e) => {
                 triggerRef.current = e.currentTarget;
@@ -14366,6 +14388,7 @@ var Combobox = ({
   variant = "default",
   allowClear = false,
   usePortal = true,
+  getPortalContainer,
   label,
   labelClassName,
   required,
@@ -14407,7 +14430,6 @@ var Combobox = ({
   const [activeIndex, setActiveIndex] = React31.useState(null);
   const [localRequiredError, setLocalRequiredError] = React31.useState();
   const [triggerBackgroundColor, setTriggerBackgroundColor] = React31.useState();
-  useShadCNAnimations();
   const inputRef = React31.useRef(null);
   const optionsViewportRef = React31.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: open && useOverlayScrollbar && !virtualized });
@@ -14448,10 +14470,16 @@ var Combobox = ({
   });
   const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
   const triggerRef = React31.useRef(null);
+  React31.useEffect(() => {
+    const triggerDocument = triggerRef.current?.ownerDocument;
+    if (triggerDocument) injectAnimationStyles(triggerDocument);
+  }, []);
   const updateTriggerBackgroundColor = React31.useCallback(() => {
     const trigger = triggerRef.current;
     if (!trigger) return;
-    const backgroundColor = window.getComputedStyle(trigger).backgroundColor;
+    const triggerWindow = trigger.ownerDocument.defaultView;
+    if (!triggerWindow) return;
+    const backgroundColor = triggerWindow.getComputedStyle(trigger).backgroundColor;
     setTriggerBackgroundColor((current) => current === backgroundColor ? current : backgroundColor);
   }, []);
   const scrollVirtualListToIndex = React31.useCallback((index) => {
@@ -14491,15 +14519,21 @@ var Combobox = ({
       setActiveIndex(null);
       scrollVirtualListToStart();
     } else if (enableSearch) {
-      setTimeout(() => {
+      const triggerWindow = triggerRef.current?.ownerDocument.defaultView;
+      if (!triggerWindow) return void 0;
+      const timeoutId = triggerWindow.setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
+      return () => triggerWindow.clearTimeout(timeoutId);
     }
+    return void 0;
   }, [enableSearch, open, scrollVirtualListToStart]);
   React31.useEffect(() => {
     if (!onSearchChange) return void 0;
-    const timeoutId = window.setTimeout(() => onSearchChange(query), searchDebounceMs);
-    return () => window.clearTimeout(timeoutId);
+    const triggerWindow = triggerRef.current?.ownerDocument.defaultView;
+    if (!triggerWindow) return void 0;
+    const timeoutId = triggerWindow.setTimeout(() => onSearchChange(query), searchDebounceMs);
+    return () => triggerWindow.clearTimeout(timeoutId);
   }, [onSearchChange, query, searchDebounceMs]);
   React31.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && options.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
@@ -14513,13 +14547,15 @@ var Combobox = ({
       setTriggerBackgroundColor(void 0);
       return void 0;
     }
+    const triggerWindow = triggerRef.current?.ownerDocument.defaultView;
+    if (!triggerWindow) return void 0;
     let raf = 0;
     const tick = () => {
       updateTriggerBackgroundColor();
-      raf = window.requestAnimationFrame(tick);
+      raf = triggerWindow.requestAnimationFrame(tick);
     };
     tick();
-    return () => window.cancelAnimationFrame(raf);
+    return () => triggerWindow.cancelAnimationFrame(raf);
   }, [matchTriggerBackground, open, updateTriggerBackgroundColor]);
   const selectedOption = findOptionByValue(options, value) ?? (selectedOptionProp && getOptionValue(selectedOptionProp) === value ? selectedOptionProp : void 0);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
@@ -14631,9 +14667,10 @@ var Combobox = ({
     {
       "data-combobox-dropdown": true,
       "data-state": open ? "open" : "closed",
-      className: cn("w-full overflow-hidden", getPanelBorderRadiusClass(resolvedBorderMode)),
+      style: usePortal ? { maxHeight: "var(--underverse-popover-available-height)" } : void 0,
+      className: cn("w-full overflow-hidden", usePortal && "flex min-h-0 flex-col", getPanelBorderRadiusClass(resolvedBorderMode)),
       children: [
-        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("relative border-b border-border/30", size === "xs" ? "p-1.5" : size === "sm" ? "p-2" : size === "lg" ? "p-3" : size === "xl" ? "p-3.5" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
+        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("relative shrink-0 border-b border-border/30", size === "xs" ? "p-1.5" : size === "sm" ? "p-2" : size === "lg" ? "p-3" : size === "xl" ? "p-3.5" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_lucide_react15.Search,
             {
@@ -14703,7 +14740,7 @@ var Combobox = ({
             role: "listbox",
             "aria-labelledby": labelId,
             "data-os-ignore": virtualized ? "" : void 0,
-            className: cn("overflow-y-auto overscroll-contain", (!useOverlayScrollbar || virtualized) && comboboxScrollClassName),
+            className: cn("overflow-y-auto overscroll-contain", usePortal && "min-h-0", (!useOverlayScrollbar || virtualized) && comboboxScrollClassName),
             style: { maxHeight },
             children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(size === "xs" ? "p-1" : size === "sm" ? "p-1" : size === "lg" || size === "xl" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
@@ -14911,6 +14948,8 @@ var Combobox = ({
         matchTriggerWidth: true,
         className: "z-50",
         borderMode: resolvedBorderMode,
+        getPortalContainer,
+        constrainToAvailableHeight: true,
         contentClassName: "p-0 overflow-hidden",
         contentProps: { style: dropdownBackgroundStyle },
         children: dropdownBody