@underverse-ui/underverse 2.0.24 → 2.0.25

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-HGOTCQXL.js";
+} from "./chunk-XMAOZQJO.js";
 import {
   EmojiPicker_default
 } from "./chunk-F7MX3XXK.js";
@@ -16,7 +16,7 @@ import {
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-ZQWVWDGS.js";
+} from "./chunk-FFVBGTHU.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -31,7 +31,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-O7AAN6W6.js";
+} from "./chunk-OJF3XRN7.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -49,6 +49,7 @@ import {
   getUnderverseDefaultTranslation,
   ja_default,
   ko_default,
+  resolveUEditorPortalContainer,
   useGlobalI18n,
   useHydrated,
   useNextIntlBridge,
@@ -3671,6 +3672,9 @@ import * as React15 from "react";
 import { createPortal } from "react-dom";
 import { X as X6 } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function setDocumentBodyStyles(ownerDocument, styles) {
+  Object.assign(ownerDocument.body.style, styles);
+}
 var sizeStyles3 = {
   sm: {
     right: "w-75",
@@ -3750,7 +3754,8 @@ var Sheet = ({
   resizable = false,
   minSize = 280,
   maxSize,
-  onResize
+  onResize,
+  getPortalContainer
 }) => {
   const gi18n = useGlobalI18n();
   const [mounted, setMounted] = React15.useState(false);
@@ -3760,6 +3765,7 @@ var Sheet = ({
   const [sheetSize, setSheetSize] = React15.useState(null);
   const sheetRef = React15.useRef(null);
   const resizeStateRef = React15.useRef(null);
+  const portalContainer = mounted ? resolveUEditorPortalContainer(getPortalContainer) : null;
   const isHorizontalSheet = side === "left" || side === "right";
   const canResize = resizable && size !== "full";
   React15.useEffect(() => {
@@ -3767,31 +3773,33 @@ var Sheet = ({
   }, []);
   React15.useEffect(() => {
     if (!closeOnEscape) return;
+    const portalDocument = portalContainer?.ownerDocument;
     const handleEscape = (e) => {
       if (e.key === "Escape" && open) {
         onOpenChange(false);
       }
     };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open, closeOnEscape, onOpenChange]);
+    if (!portalDocument) return;
+    portalDocument.addEventListener("keydown", handleEscape);
+    return () => portalDocument.removeEventListener("keydown", handleEscape);
+  }, [open, closeOnEscape, onOpenChange, portalContainer]);
   React15.useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "unset";
-    }
+    const portalDocument = portalContainer?.ownerDocument;
+    if (!portalDocument || !open) return;
+    const body = portalDocument.body;
+    const previousOverflow = body.style.overflow;
+    setDocumentBodyStyles(portalDocument, { overflow: "hidden" });
     return () => {
-      document.body.style.overflow = "unset";
+      setDocumentBodyStyles(portalDocument, { overflow: previousOverflow });
     };
-  }, [open]);
+  }, [open, portalContainer]);
   React15.useEffect(() => {
+    const portalWindow = portalContainer?.ownerDocument.defaultView;
     if (open) {
       setIsVisible(true);
       setIsAnimating(true);
-      requestAnimationFrame(() => {
-        setIsAnimating(false);
-      });
+      if (portalWindow) portalWindow.requestAnimationFrame(() => setIsAnimating(false));
+      else setIsAnimating(false);
     } else if (isVisible) {
       setIsAnimating(true);
       const hideTimer = setTimeout(() => {
@@ -3799,7 +3807,7 @@ var Sheet = ({
       }, 300);
       return () => clearTimeout(hideTimer);
     }
-  }, [open, isVisible]);
+  }, [open, isVisible, portalContainer]);
   const handleOverlayClick = (e) => {
     if (closeOnOutsideClick && e.target === e.currentTarget) {
       onOpenChange(false);
@@ -3809,7 +3817,8 @@ var Sheet = ({
     onOpenChange(false);
   };
   const clampResizeSize = React15.useCallback((nextSize) => {
-    const viewportSize = isHorizontalSheet ? window.innerWidth : window.innerHeight;
+    const portalWindow = sheetRef.current?.ownerDocument.defaultView;
+    const viewportSize = portalWindow ? isHorizontalSheet ? portalWindow.innerWidth : portalWindow.innerHeight : nextSize;
     const resolvedMaxSize = maxSize ?? Math.round(viewportSize * 0.9);
     return Math.min(Math.max(nextSize, minSize), resolvedMaxSize);
   }, [isHorizontalSheet, maxSize, minSize]);
@@ -3817,8 +3826,10 @@ var Sheet = ({
     if (!resizeStateRef.current) return;
     resizeStateRef.current = null;
     setIsResizing(false);
-    document.body.style.cursor = "";
-    document.body.style.userSelect = "";
+    const portalDocument = sheetRef.current?.ownerDocument;
+    if (portalDocument) {
+      setDocumentBodyStyles(portalDocument, { cursor: "", userSelect: "" });
+    }
   }, []);
   const handleResizePointerMove = React15.useCallback((event) => {
     const resizeState = resizeStateRef.current;
@@ -3835,13 +3846,15 @@ var Sheet = ({
   }, [endResize]);
   React15.useEffect(() => {
     if (!isResizing) return void 0;
-    window.addEventListener("pointermove", handleResizePointerMove);
-    window.addEventListener("pointerup", handleResizePointerUp);
-    window.addEventListener("pointercancel", handleResizePointerUp);
+    const portalWindow = sheetRef.current?.ownerDocument.defaultView;
+    if (!portalWindow) return;
+    portalWindow.addEventListener("pointermove", handleResizePointerMove);
+    portalWindow.addEventListener("pointerup", handleResizePointerUp);
+    portalWindow.addEventListener("pointercancel", handleResizePointerUp);
     return () => {
-      window.removeEventListener("pointermove", handleResizePointerMove);
-      window.removeEventListener("pointerup", handleResizePointerUp);
-      window.removeEventListener("pointercancel", handleResizePointerUp);
+      portalWindow.removeEventListener("pointermove", handleResizePointerMove);
+      portalWindow.removeEventListener("pointerup", handleResizePointerUp);
+      portalWindow.removeEventListener("pointercancel", handleResizePointerUp);
     };
   }, [handleResizePointerMove, handleResizePointerUp, isResizing]);
   React15.useEffect(() => {
@@ -3860,8 +3873,13 @@ var Sheet = ({
     };
     setIsResizing(true);
     event.currentTarget.setPointerCapture(event.pointerId);
-    document.body.style.cursor = isHorizontalSheet ? "col-resize" : "row-resize";
-    document.body.style.userSelect = "none";
+    const portalDocument = event.currentTarget.ownerDocument;
+    if (portalDocument) {
+      setDocumentBodyStyles(portalDocument, {
+        cursor: isHorizontalSheet ? "col-resize" : "row-resize",
+        userSelect: "none"
+      });
+    }
     event.preventDefault();
     event.stopPropagation();
   };
@@ -3948,7 +3966,7 @@ var Sheet = ({
       }
     )
   ] });
-  return typeof window !== "undefined" ? createPortal(sheetContent, document.body) : null;
+  return portalContainer ? createPortal(sheetContent, portalContainer) : null;
 };
 var Drawer = ({ placement = "right", ...props }) => {
   return /* @__PURE__ */ jsx17(Sheet, { ...props, side: placement, variant: "overlay" });
@@ -5985,7 +6003,8 @@ var DatePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const t = useSmartTranslations("DatePicker");
@@ -6476,6 +6495,7 @@ var DatePicker = ({
     /* @__PURE__ */ jsx27(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -6618,7 +6638,8 @@ var DateRangePicker = ({
   maxDate,
   size: requestedSize = "md",
   disabled = false,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
@@ -7237,6 +7258,7 @@ var DateRangePicker = ({
     /* @__PURE__ */ jsx27(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -7325,7 +7347,7 @@ var DateRangePicker = ({
     effectiveError && /* @__PURE__ */ jsx27("div", { className: "text-xs text-destructive", children: effectiveError })
   ] });
 };
-var CompactDatePicker = ({ value, onChange, className }) => {
+var CompactDatePicker = ({ value, onChange, className, getPortalContainer }) => {
   return /* @__PURE__ */ jsx27(
     DatePicker,
     {
@@ -7333,7 +7355,8 @@ var CompactDatePicker = ({ value, onChange, className }) => {
       onChange,
       size: "sm",
       className: cn("max-w-56", className),
-      placeholder: "Date"
+      placeholder: "Date",
+      getPortalContainer
     }
   );
 };
@@ -7648,7 +7671,8 @@ var LunarDatePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
@@ -8177,6 +8201,7 @@ var LunarDatePicker = ({
     /* @__PURE__ */ jsx28(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -8325,7 +8350,8 @@ var LunarDateRangePicker = ({
   maxDate,
   size: requestedSize = "md",
   disabled = false,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
@@ -8808,6 +8834,7 @@ var LunarDateRangePicker = ({
     /* @__PURE__ */ jsxs21(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -9361,6 +9388,7 @@ function MonthYearPicker({
   columnLabels = { month: "Month", year: "Year" },
   className,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
@@ -9746,6 +9774,7 @@ function MonthYearPicker({
     /* @__PURE__ */ jsx29(
       Popover,
       {
+        getPortalContainer,
         trigger,
         open,
         onOpenChange: handleOpenChange,
@@ -10898,6 +10927,7 @@ function TimePicker({
   onClose,
   className,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
@@ -11678,6 +11708,7 @@ function TimePicker({
     /* @__PURE__ */ jsx31(
       Popover,
       {
+        getPortalContainer,
         trigger,
         open,
         onOpenChange: handleOpenChange,
@@ -11730,7 +11761,8 @@ var DateTimePicker = ({
   doneLabel,
   clearLabel,
   size: requestedSize = "md",
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
@@ -11922,6 +11954,7 @@ var DateTimePicker = ({
     /* @__PURE__ */ jsxs25(
       Popover,
       {
+        getPortalContainer,
         open,
         onOpenChange: setOpen,
         contentProps: { id: panelId },
@@ -12637,6 +12670,7 @@ function CalendarTimelineHeader(props) {
     sizeConfig,
     navigate,
     now,
+    getPortalContainer,
     onApplyDateTime,
     setView,
     effectiveResourceColumnWidth,
@@ -12728,6 +12762,7 @@ function CalendarTimelineHeader(props) {
           /* @__PURE__ */ jsx34(
             Popover,
             {
+              getPortalContainer,
               open: todayOpen,
               onOpenChange: setTodayOpen,
               placement: "bottom-start",
@@ -12778,6 +12813,7 @@ function CalendarTimelineHeader(props) {
                     /* @__PURE__ */ jsx34(
                       TimePicker,
                       {
+                        getPortalContainer,
                         variant: "inline",
                         value: getTimeString(tempDate),
                         onChange: handleTimeChange,
@@ -13506,6 +13542,7 @@ function CalendarTimeline({
   workHours,
   maxLanesPerRow = 3,
   now,
+  getPortalContainer,
   renderResource,
   renderGroup,
   renderEvent,
@@ -14540,7 +14577,8 @@ function CalendarTimeline({
       canResizeColumn,
       beginResizeColumn,
       headerRef,
-      slotHeaderNodes
+      slotHeaderNodes,
+      getPortalContainer
     }
   );
   const layoutsByResource = useLayoutsByResource({
@@ -14868,6 +14906,7 @@ function CalendarTimeline({
             onOpenChange: setEventSheetOpen,
             side: "right",
             size: eventSheetSize,
+            getPortalContainer,
             overlayOpacity: eventSheetOverlayOpacity,
             title: selectedEvent.title ?? "Event",
             description: selectedTimeText || void 0,
@@ -14897,6 +14936,7 @@ function CalendarTimeline({
             onOpenChange: setCreateOpen,
             side: "right",
             size: "md",
+            getPortalContainer,
             title: l.createEventTitle,
             description: activeView === "day" ? l.day : activeView === "week" ? l.week : l.month,
             children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
@@ -14908,18 +14948,19 @@ function CalendarTimeline({
                     options: resourceOptions,
                     value: createResourceId,
                     onChange: (v) => setCreateResourceId(v),
-                    placeholder: l.resource
+                    placeholder: l.resource,
+                    getPortalContainer
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-3", children: [
                 /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsx38("div", { className: "text-xs text-muted-foreground", children: l.start }),
-                  /* @__PURE__ */ jsx38(Combobox, { options: createStartOptions, value: createStartIdx, onChange: (v) => setCreateStartIdx(Number(v)), placeholder: l.start })
+                  /* @__PURE__ */ jsx38(Combobox, { options: createStartOptions, value: createStartIdx, onChange: (v) => setCreateStartIdx(Number(v)), placeholder: l.start, getPortalContainer })
                 ] }),
                 /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsx38("div", { className: "text-xs text-muted-foreground", children: l.end }),
-                  /* @__PURE__ */ jsx38(Combobox, { options: createEndOptions, value: createEndIdx, onChange: (v) => setCreateEndIdx(Number(v)), placeholder: l.end })
+                  /* @__PURE__ */ jsx38(Combobox, { options: createEndOptions, value: createEndIdx, onChange: (v) => setCreateEndIdx(Number(v)), placeholder: l.end, getPortalContainer })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
@@ -15005,7 +15046,8 @@ var MultiCombobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  getPortalContainer
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -15562,6 +15604,7 @@ var MultiCombobox = ({
     /* @__PURE__ */ jsx39(
       Popover,
       {
+        getPortalContainer,
         open,
         onOpenChange: setOpen,
         trigger: triggerButton,
@@ -17055,7 +17098,8 @@ function CategoryTreeSelect(props) {
     showTreeLines = true,
     renderItemActions,
     singleSelect = false,
-    borderMode
+    borderMode,
+    getPortalContainer
   } = props;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
@@ -17745,6 +17789,7 @@ function CategoryTreeSelect(props) {
     /* @__PURE__ */ jsx43(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: handleOpenChange,
         disabled,
@@ -20392,6 +20437,7 @@ function ColorPicker({
   showHarmony = false,
   maxRecent = 8,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const globalConfig = useUnderverseUIConfig();
@@ -20529,6 +20575,7 @@ function ColorPicker({
   return /* @__PURE__ */ jsx51("div", { className: cn("inline-block w-full", className), ...rest, children: /* @__PURE__ */ jsx51(
     Popover,
     {
+      getPortalContainer,
       trigger,
       open,
       onOpenChange: setOpen,
@@ -21736,7 +21783,8 @@ function DataTableHeader({
   getStickyHeaderCellStyle,
   sortByLabel,
   t,
-  columnColorGroups
+  columnColorGroups,
+  getPortalContainer
 }) {
   const gi18n = useGlobalI18n();
   const renderFilterControl = React50.useCallback(
@@ -21779,6 +21827,7 @@ function DataTableHeader({
         return /* @__PURE__ */ jsx58(
           DatePicker,
           {
+            getPortalContainer,
             size,
             placeholder: col.filter.placeholder || `Select ${columnLabel}`,
             value: filters[key] || null,
@@ -21791,7 +21840,7 @@ function DataTableHeader({
       }
       return null;
     },
-    [filters, setCurPage, setFilters, size]
+    [filters, getPortalContainer, setCurPage, setFilters, size]
   );
   const renderHeaderContent = React50.useCallback(
     (col, isLeaf) => {
@@ -21896,6 +21945,7 @@ function DataTableHeader({
       const filterContent = col.filter ? /* @__PURE__ */ jsx58(
         Popover,
         {
+          getPortalContainer,
           placement: "bottom-start",
           trigger: /* @__PURE__ */ jsx58("span", { className: "inline-flex", children: /* @__PURE__ */ jsx58(
             Tooltip,
@@ -21959,6 +22009,7 @@ function DataTableHeader({
     },
     [
       filters,
+      getPortalContainer,
       gi18n,
       headerAlign,
       headerMinHeightClass,
@@ -22310,7 +22361,8 @@ function DataTableToolbar({
   labels,
   t,
   columnColorGroups,
-  defaultVisibleKeys
+  defaultVisibleKeys,
+  getPortalContainer
 }) {
   const controlButtonSize = size === "lg" ? "md" : "sm";
   const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
@@ -22334,7 +22386,8 @@ function DataTableToolbar({
             { label: labels?.compact || t("compact"), onClick: () => setDensity("compact") },
             { label: labels?.normal || t("normal"), onClick: () => setDensity("normal") },
             { label: labels?.comfortable || t("comfortable"), onClick: () => setDensity("comfortable") }
-          ]
+          ],
+          getPortalContainer
         }
       ),
       enableColumnVisibilityToggle && /* @__PURE__ */ jsxs52(
@@ -22352,6 +22405,7 @@ function DataTableToolbar({
             ) }),
             labels?.columns || t("columns")
           ] }),
+          getPortalContainer,
           children: [
             /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 px-2 py-1.5 mb-1", children: [
               /* @__PURE__ */ jsx60(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleSelectAll, children: labels?.selectAll || t("selectAll") || "Select All" }),
@@ -22408,7 +22462,8 @@ function DataTableToolbar({
             { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
             { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
             { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
-          ]
+          ],
+          getPortalContainer
         }
       ),
       toolbar
@@ -22902,6 +22957,7 @@ function DataTable({
   labels,
   columnColorGroups,
   borderMode,
+  getPortalContainer,
   paginationVariant = "default"
 }) {
   const t = useSmartTranslations("Common");
@@ -23057,7 +23113,8 @@ function DataTable({
         labels,
         t,
         columnColorGroups,
-        defaultVisibleKeys
+        defaultVisibleKeys,
+        getPortalContainer
       }
     ),
     /* @__PURE__ */ jsx61(
@@ -23109,7 +23166,8 @@ function DataTable({
                       getStickyHeaderCellStyle,
                       sortByLabel: labels?.sortBy,
                       t,
-                      columnColorGroups
+                      columnColorGroups,
+                      getPortalContainer
                     }
                   ) }),
                   /* @__PURE__ */ jsx61(
@@ -23664,19 +23722,20 @@ function AccessDenied({
 
 // src/components/ThemeToggleHeadless.tsx
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
-import { useRef as useRef23, useState as useState37 } from "react";
+import { useState as useState37 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment23, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
-  className
+  className,
+  getPortalContainer
 }) {
   const [isOpen, setIsOpen] = useState37(false);
   const isHydrated = useHydrated();
-  const triggerRef = useRef23(null);
   const [dropdownPosition, setDropdownPosition] = useState37(null);
+  const [portalContainer, setPortalContainer] = useState37(null);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: Sun2 },
     { value: "dark", label: labels?.dark ?? "Dark", icon: Moon2 },
@@ -23684,15 +23743,19 @@ function ThemeToggleHeadless({
   ];
   const current = isHydrated ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
   const CurrentIcon = current.icon;
-  const calculatePosition = () => {
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (!rect) return null;
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  const prepareOpen = (trigger) => {
+    const rect = trigger.getBoundingClientRect();
+    const ownerDocument = trigger.ownerDocument;
+    const ownerWindow = ownerDocument?.defaultView;
+    if (!ownerWindow) return;
+    const scrollTop = ownerWindow.pageYOffset || ownerDocument.documentElement.scrollTop;
+    const scrollLeft = ownerWindow.pageXOffset || ownerDocument.documentElement.scrollLeft;
     const width = 192;
     const left = rect.right + scrollLeft - width;
     const top = rect.bottom + scrollTop + 8;
-    return { top, left, width };
+    const requestedContainer = resolveUEditorPortalContainer(getPortalContainer, void 0, ownerDocument);
+    setDropdownPosition({ top, left, width });
+    setPortalContainer(requestedContainer?.ownerDocument === ownerDocument ? requestedContainer : ownerDocument.body);
   };
   return /* @__PURE__ */ jsxs57("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx65(
@@ -23700,13 +23763,9 @@ function ThemeToggleHeadless({
       {
         variant: "ghost",
         size: "icon",
-        ref: triggerRef,
-        onClick: () => {
+        onClick: (event) => {
           const next = !isOpen;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
-          }
+          if (next) prepareOpen(event.currentTarget);
           setIsOpen(next);
         },
         className: "bg-muted hover:bg-accent",
@@ -23717,8 +23776,8 @@ function ThemeToggleHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ jsxs57(Fragment23, { children: [
-      typeof window !== "undefined" && createPortal3(/* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && createPortal3(
+      portalContainer && createPortal3(/* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), portalContainer),
+      portalContainer && dropdownPosition && createPortal3(
         /* @__PURE__ */ jsx65(
           "div",
           {
@@ -23758,14 +23817,14 @@ function ThemeToggleHeadless({
             ] })
           }
         ),
-        document.body
+        portalContainer
       )
     ] })
   ] });
 }
 
 // src/components/LanguageSwitcherHeadless.tsx
-import { useRef as useRef24, useState as useState38 } from "react";
+import { useState as useState38 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Globe } from "lucide-react";
 import { Fragment as Fragment24, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
@@ -23774,21 +23833,26 @@ function LanguageSwitcherHeadless({
   currentLocale,
   onSwitch,
   labels,
-  className
+  className,
+  getPortalContainer
 }) {
   const [isOpen, setIsOpen] = useState38(false);
   const [dropdownPosition, setDropdownPosition] = useState38(null);
-  const triggerButtonRef = useRef24(null);
+  const [portalContainer, setPortalContainer] = useState38(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
-  const calculatePosition = () => {
-    const rect = triggerButtonRef.current?.getBoundingClientRect();
-    if (!rect) return null;
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  const prepareOpen = (trigger) => {
+    const rect = trigger.getBoundingClientRect();
+    const ownerDocument = trigger.ownerDocument;
+    const ownerWindow = ownerDocument?.defaultView;
+    if (!ownerWindow) return;
+    const scrollTop = ownerWindow.pageYOffset || ownerDocument.documentElement.scrollTop;
+    const scrollLeft = ownerWindow.pageXOffset || ownerDocument.documentElement.scrollLeft;
     const width = 192;
     const left = rect.right + scrollLeft - width;
     const top = rect.bottom + scrollTop + 8;
-    return { top, left, width };
+    const requestedContainer = resolveUEditorPortalContainer(getPortalContainer, void 0, ownerDocument);
+    setDropdownPosition({ top, left, width });
+    setPortalContainer(requestedContainer?.ownerDocument === ownerDocument ? requestedContainer : ownerDocument.body);
   };
   return /* @__PURE__ */ jsxs58("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx66(
@@ -23796,13 +23860,9 @@ function LanguageSwitcherHeadless({
       {
         variant: "ghost",
         size: "icon",
-        ref: triggerButtonRef,
-        onClick: () => {
+        onClick: (event) => {
           const next = !isOpen;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
-          }
+          if (next) prepareOpen(event.currentTarget);
           setIsOpen(next);
         },
         className: "bg-muted hover:bg-accent",
@@ -23814,8 +23874,8 @@ function LanguageSwitcherHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ jsxs58(Fragment24, { children: [
-      typeof window !== "undefined" && createPortal4(/* @__PURE__ */ jsx66("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && createPortal4(
+      portalContainer && createPortal4(/* @__PURE__ */ jsx66("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), portalContainer),
+      portalContainer && dropdownPosition && createPortal4(
         /* @__PURE__ */ jsx66(
           "div",
           {
@@ -23848,7 +23908,7 @@ function LanguageSwitcherHeadless({
             ] })
           }
         ),
-        document.body
+        portalContainer
       )
     ] })
   ] });