@underverse-ui/underverse 2.0.24 → 2.0.25

package/dist/index.cjs

@@ -4696,7 +4696,8 @@ var init_DropdownMenu = __esm({
       openOnHover = false,
       hoverCloseDelay = 120,
       items,
-      borderMode
+      borderMode,
+      getPortalContainer
     }) => {
       const [internalOpen, setInternalOpen] = (0, import_react17.useState)(false);
       const open = isOpen !== void 0 ? isOpen : internalOpen;
@@ -4929,6 +4930,7 @@ var init_DropdownMenu = __esm({
           placement,
           disabled,
           borderMode: resolvedBorderMode,
+          getPortalContainer,
           contentClassName: cn("p-1", contentClassName),
           children: menuBody
         }
@@ -4989,7 +4991,7 @@ var init_DropdownMenu = __esm({
       );
     };
     DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("h-px bg-border my-1", className) });
-    DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, children }) => {
+    DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, getPortalContainer, children }) => {
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -5017,11 +5019,21 @@ var init_DropdownMenu = __esm({
           ),
           placement: "right",
           openOnHover: true,
+          getPortalContainer,
           children
         }
       );
     };
-    SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className, borderMode, size = "md" }) => {
+    SelectDropdown = ({
+      options,
+      value,
+      onChange,
+      placeholder = "Select...",
+      className,
+      borderMode,
+      size = "md",
+      getPortalContainer
+    }) => {
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -5049,7 +5061,8 @@ var init_DropdownMenu = __esm({
             label: option,
             onClick: () => onChange(option)
           })),
-          borderMode: resolvedBorderMode
+          borderMode: resolvedBorderMode,
+          getPortalContainer
         }
       );
     };
@@ -13508,7 +13521,11 @@ init_cn();
 init_GlobalI18nContext();
 var import_lucide_react10 = require("lucide-react");
 init_UnderverseConfigContext();
+init_portal_context();
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function setDocumentBodyStyles(ownerDocument, styles) {
+  Object.assign(ownerDocument.body.style, styles);
+}
 var sizeStyles4 = {
   sm: {
     right: "w-75",
@@ -13588,7 +13605,8 @@ var Sheet = ({
   resizable = false,
   minSize = 280,
   maxSize,
-  onResize
+  onResize,
+  getPortalContainer
 }) => {
   const gi18n = useGlobalI18n();
   const [mounted, setMounted] = React26.useState(false);
@@ -13598,6 +13616,7 @@ var Sheet = ({
   const [sheetSize, setSheetSize] = React26.useState(null);
   const sheetRef = React26.useRef(null);
   const resizeStateRef = React26.useRef(null);
+  const portalContainer = mounted ? resolveUEditorPortalContainer(getPortalContainer) : null;
   const isHorizontalSheet = side === "left" || side === "right";
   const canResize = resizable && size !== "full";
   React26.useEffect(() => {
@@ -13605,31 +13624,33 @@ var Sheet = ({
   }, []);
   React26.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]);
   React26.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]);
   React26.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(() => {
@@ -13637,7 +13658,7 @@ var Sheet = ({
       }, 300);
       return () => clearTimeout(hideTimer);
     }
-  }, [open, isVisible]);
+  }, [open, isVisible, portalContainer]);
   const handleOverlayClick = (e) => {
     if (closeOnOutsideClick && e.target === e.currentTarget) {
       onOpenChange(false);
@@ -13647,7 +13668,8 @@ var Sheet = ({
     onOpenChange(false);
   };
   const clampResizeSize = React26.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]);
@@ -13655,8 +13677,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 = React26.useCallback((event) => {
     const resizeState = resizeStateRef.current;
@@ -13673,13 +13697,15 @@ var Sheet = ({
   }, [endResize]);
   React26.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]);
   React26.useEffect(() => {
@@ -13698,8 +13724,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();
   };
@@ -13786,7 +13817,7 @@ var Sheet = ({
       }
     )
   ] });
-  return typeof window !== "undefined" ? (0, import_react_dom4.createPortal)(sheetContent, document.body) : null;
+  return portalContainer ? (0, import_react_dom4.createPortal)(sheetContent, portalContainer) : null;
 };
 var Drawer = ({ placement = "right", ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Sheet, { ...props, side: placement, variant: "overlay" });
@@ -15857,7 +15888,8 @@ var DatePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const t = useSmartTranslations("DatePicker");
@@ -16348,6 +16380,7 @@ var DatePicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -16490,7 +16523,8 @@ var DateRangePicker = ({
   maxDate,
   size: requestedSize = "md",
   disabled = false,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
@@ -17109,6 +17143,7 @@ var DateRangePicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -17197,7 +17232,7 @@ var DateRangePicker = ({
     effectiveError && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-xs text-destructive", children: effectiveError })
   ] });
 };
-var CompactDatePicker = ({ value, onChange, className }) => {
+var CompactDatePicker = ({ value, onChange, className, getPortalContainer }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     DatePicker,
     {
@@ -17205,7 +17240,8 @@ var CompactDatePicker = ({ value, onChange, className }) => {
       onChange,
       size: "sm",
       className: cn("max-w-56", className),
-      placeholder: "Date"
+      placeholder: "Date",
+      getPortalContainer
     }
   );
 };
@@ -17527,7 +17563,8 @@ var LunarDatePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
@@ -18056,6 +18093,7 @@ var LunarDatePicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -18204,7 +18242,8 @@ var LunarDateRangePicker = ({
   maxDate,
   size: requestedSize = "md",
   disabled = false,
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
@@ -18687,6 +18726,7 @@ var LunarDateRangePicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: setIsOpen,
         contentProps: { id: panelId },
@@ -19250,6 +19290,7 @@ function MonthYearPicker({
   columnLabels = { month: "Month", year: "Year" },
   className,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
@@ -19635,6 +19676,7 @@ function MonthYearPicker({
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Popover,
       {
+        getPortalContainer,
         trigger,
         open,
         onOpenChange: handleOpenChange,
@@ -20794,6 +20836,7 @@ function TimePicker({
   onClose,
   className,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
@@ -21574,6 +21617,7 @@ function TimePicker({
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Popover,
       {
+        getPortalContainer,
         trigger,
         open,
         onOpenChange: handleOpenChange,
@@ -21630,7 +21674,8 @@ var DateTimePicker = ({
   doneLabel,
   clearLabel,
   size: requestedSize = "md",
-  borderMode
+  borderMode,
+  getPortalContainer
 }) => {
   const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
@@ -21822,6 +21867,7 @@ var DateTimePicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       Popover,
       {
+        getPortalContainer,
         open,
         onOpenChange: setOpen,
         contentProps: { id: panelId },
@@ -22544,6 +22590,7 @@ function CalendarTimelineHeader(props) {
     sizeConfig,
     navigate,
     now,
+    getPortalContainer,
     onApplyDateTime,
     setView,
     effectiveResourceColumnWidth,
@@ -22635,6 +22682,7 @@ function CalendarTimelineHeader(props) {
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Popover,
             {
+              getPortalContainer,
               open: todayOpen,
               onOpenChange: setTodayOpen,
               placement: "bottom-start",
@@ -22685,6 +22733,7 @@ function CalendarTimelineHeader(props) {
                     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       TimePicker,
                       {
+                        getPortalContainer,
                         variant: "inline",
                         value: getTimeString(tempDate),
                         onChange: handleTimeChange,
@@ -23417,6 +23466,7 @@ function CalendarTimeline({
   workHours,
   maxLanesPerRow = 3,
   now,
+  getPortalContainer,
   renderResource,
   renderGroup,
   renderEvent,
@@ -24451,7 +24501,8 @@ function CalendarTimeline({
       canResizeColumn,
       beginResizeColumn,
       headerRef,
-      slotHeaderNodes
+      slotHeaderNodes,
+      getPortalContainer
     }
   );
   const layoutsByResource = useLayoutsByResource({
@@ -24779,6 +24830,7 @@ function CalendarTimeline({
             onOpenChange: setEventSheetOpen,
             side: "right",
             size: eventSheetSize,
+            getPortalContainer,
             overlayOpacity: eventSheetOverlayOpacity,
             title: selectedEvent.title ?? "Event",
             description: selectedTimeText || void 0,
@@ -24808,6 +24860,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__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-4", children: [
@@ -24819,18 +24872,19 @@ function CalendarTimeline({
                     options: resourceOptions,
                     value: createResourceId,
                     onChange: (v) => setCreateResourceId(v),
-                    placeholder: l.resource
+                    placeholder: l.resource,
+                    getPortalContainer
                   }
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-xs text-muted-foreground", children: l.start }),
-                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Combobox, { options: createStartOptions, value: createStartIdx, onChange: (v) => setCreateStartIdx(Number(v)), placeholder: l.start })
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Combobox, { options: createStartOptions, value: createStartIdx, onChange: (v) => setCreateStartIdx(Number(v)), placeholder: l.start, getPortalContainer })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-xs text-muted-foreground", children: l.end }),
-                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Combobox, { options: createEndOptions, value: createEndIdx, onChange: (v) => setCreateEndIdx(Number(v)), placeholder: l.end })
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Combobox, { options: createEndOptions, value: createEndIdx, onChange: (v) => setCreateEndIdx(Number(v)), placeholder: l.end, getPortalContainer })
                 ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
@@ -24924,7 +24978,8 @@ var MultiCombobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  getPortalContainer
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -25481,6 +25536,7 @@ var MultiCombobox = ({
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Popover,
       {
+        getPortalContainer,
         open,
         onOpenChange: setOpen,
         trigger: triggerButton,
@@ -26989,7 +27045,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";
@@ -27679,6 +27736,7 @@ function CategoryTreeSelect(props) {
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Popover,
       {
+        getPortalContainer,
         open: isOpen,
         onOpenChange: handleOpenChange,
         disabled,
@@ -30327,6 +30385,7 @@ function ColorPicker({
   showHarmony = false,
   maxRecent = 8,
   borderMode,
+  getPortalContainer,
   ...rest
 }) {
   const globalConfig = useUnderverseUIConfig();
@@ -30464,6 +30523,7 @@ function ColorPicker({
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cn("inline-block w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Popover,
     {
+      getPortalContainer,
       trigger,
       open,
       onOpenChange: setOpen,
@@ -31687,7 +31747,8 @@ function DataTableHeader({
   getStickyHeaderCellStyle,
   sortByLabel,
   t,
-  columnColorGroups
+  columnColorGroups,
+  getPortalContainer
 }) {
   const gi18n = useGlobalI18n();
   const renderFilterControl = import_react34.default.useCallback(
@@ -31730,6 +31791,7 @@ function DataTableHeader({
         return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           DatePicker,
           {
+            getPortalContainer,
             size,
             placeholder: col.filter.placeholder || `Select ${columnLabel}`,
             value: filters[key] || null,
@@ -31742,7 +31804,7 @@ function DataTableHeader({
       }
       return null;
     },
-    [filters, setCurPage, setFilters, size]
+    [filters, getPortalContainer, setCurPage, setFilters, size]
   );
   const renderHeaderContent = import_react34.default.useCallback(
     (col, isLeaf) => {
@@ -31847,6 +31909,7 @@ function DataTableHeader({
       const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         Popover,
         {
+          getPortalContainer,
           placement: "bottom-start",
           trigger: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             Tooltip,
@@ -31910,6 +31973,7 @@ function DataTableHeader({
     },
     [
       filters,
+      getPortalContainer,
       gi18n,
       headerAlign,
       headerMinHeightClass,
@@ -32264,7 +32328,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";
@@ -32288,7 +32353,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__ */ (0, import_jsx_runtime72.jsxs)(
@@ -32306,6 +32372,7 @@ function DataTableToolbar({
             ) }),
             labels?.columns || t("columns")
           ] }),
+          getPortalContainer,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1.5 mb-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleSelectAll, children: labels?.selectAll || t("selectAll") || "Select All" }),
@@ -32362,7 +32429,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
@@ -32857,6 +32925,7 @@ function DataTable({
   labels,
   columnColorGroups,
   borderMode,
+  getPortalContainer,
   paginationVariant = "default"
 }) {
   const t = useSmartTranslations("Common");
@@ -33012,7 +33081,8 @@ function DataTable({
         labels,
         t,
         columnColorGroups,
-        defaultVisibleKeys
+        defaultVisibleKeys,
+        getPortalContainer
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -33064,7 +33134,8 @@ function DataTable({
                       getStickyHeaderCellStyle,
                       sortByLabel: labels?.sortBy,
                       t,
-                      columnColorGroups
+                      columnColorGroups,
+                      getPortalContainer
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -33628,17 +33699,19 @@ init_cn();
 var import_react44 = require("react");
 var import_react_dom6 = require("react-dom");
 init_useHydrated();
+init_portal_context();
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
-  className
+  className,
+  getPortalContainer
 }) {
   const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
   const isHydrated = useHydrated();
-  const triggerRef = (0, import_react44.useRef)(null);
   const [dropdownPosition, setDropdownPosition] = (0, import_react44.useState)(null);
+  const [portalContainer, setPortalContainer] = (0, import_react44.useState)(null);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react40.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react40.Moon },
@@ -33646,15 +33719,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__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
@@ -33662,13 +33739,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",
@@ -33679,8 +33752,8 @@ function ThemeToggleHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom6.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom6.createPortal)(
+      portalContainer && (0, import_react_dom6.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), portalContainer),
+      portalContainer && dropdownPosition && (0, import_react_dom6.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
@@ -33720,7 +33793,7 @@ function ThemeToggleHeadless({
             ] })
           }
         ),
-        document.body
+        portalContainer
       )
     ] })
   ] });
@@ -33731,27 +33804,33 @@ var import_react45 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_lucide_react41 = require("lucide-react");
 init_cn();
+init_portal_context();
 var import_jsx_runtime78 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
   onSwitch,
   labels,
-  className
+  className,
+  getPortalContainer
 }) {
   const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
   const [dropdownPosition, setDropdownPosition] = (0, import_react45.useState)(null);
-  const triggerButtonRef = (0, import_react45.useRef)(null);
+  const [portalContainer, setPortalContainer] = (0, import_react45.useState)(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__ */ (0, import_jsx_runtime78.jsxs)("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -33759,13 +33838,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",
@@ -33777,8 +33852,8 @@ function LanguageSwitcherHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom7.createPortal)(
+      portalContainer && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), portalContainer),
+      portalContainer && dropdownPosition && (0, import_react_dom7.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
@@ -33811,7 +33886,7 @@ function LanguageSwitcherHeadless({
             ] })
           }
         ),
-        document.body
+        portalContainer
       )
     ] })
   ] });