RocketChat · gabriellsh · Apr 13, 2026 · Apr 14, 2026 · Apr 16, 2026
diff --git a/packages/css-in-js/src/sheet.ts b/packages/css-in-js/src/sheet.ts
@@ -1,20 +1,27 @@
 import hash from '@emotion/hash';
 
 const elementId = 'rcx-styles';
-let element: HTMLStyleElement;
-const getStyleTag = (): HTMLStyleElement => {
+const documentStyleElementMap = new Map<Document, HTMLStyleElement>();
+
+const getStyleTag = (document: Document): HTMLStyleElement => {
+  let element = documentStyleElementMap.get(document);
+
   if (!element) {
     const el = document.getElementById(elementId) as HTMLStyleElement;
     if (el) {
-      element = el;
-      return element;
+      documentStyleElementMap.set(document, el);
+      return el;
     }
   }
 
   if (!element) {
     element = document.createElement('style');
+
+    documentStyleElementMap.set(document, element);
+
     element.id = elementId;
     element.appendChild(document.createTextNode(''));
+
     if (document.head) {
       document.head.appendChild(element);
     }
@@ -23,10 +30,13 @@ const getStyleTag = (): HTMLStyleElement => {
   return element;
 };
 
-let styleSheet: CSSStyleSheet;
-const getStyleSheet = (): CSSStyleSheet => {
+// let styleSheet: CSSStyleSheet;
+const documentStyleSheetMap = new Map<Document, CSSStyleSheet>();
+const getStyleSheet = (document: Document): CSSStyleSheet => {
+  let styleSheet = documentStyleSheetMap.get(document);
+
   if (!styleSheet) {
-    const styleTag = getStyleTag();
+    const styleTag = getStyleTag(document);
     const _styleSheet =
       styleTag.sheet ||
       Array.from(document.styleSheets).find(
@@ -40,24 +50,34 @@ const getStyleSheet = (): CSSStyleSheet => {
     styleSheet = _styleSheet;
   }
 
+  documentStyleSheetMap.set(document, styleSheet);
+
   return styleSheet;
 };
 
-type RuleAttacher = (rules: string) => () => void;
+type StrictRuleAttacher = (
+  rules: string,
+  options: { document: Document },
+) => () => void;
+
+type RuleAttacher = (
+  rules: string,
+  options?: { document?: Document },
+) => () => void;
 
 const discardRules: RuleAttacher = () => () => undefined;
 
-const attachRulesIntoElement: RuleAttacher = (rules) => {
-  const element = getStyleTag();
+const attachRulesIntoElement: StrictRuleAttacher = (rules, { document }) => {
+  const element = getStyleTag(document);
 
   const textNode = document.createTextNode(rules);
   element.appendChild(textNode);
 
   return () => textNode.remove();
 };
 
-const attachRulesIntoStyleSheet: RuleAttacher = (rules) => {
-  const styleSheet = getStyleSheet();
+const attachRulesIntoStyleSheet: StrictRuleAttacher = (rules, { document }) => {
+  const styleSheet = getStyleSheet(document);
   const index = styleSheet.insertRule(
     `@media all{${rules}}`,
     styleSheet.cssRules.length,
@@ -73,7 +93,7 @@ const attachRulesIntoStyleSheet: RuleAttacher = (rules) => {
   };
 };
 
-const wrapReferenceCounting = (attacher: RuleAttacher): RuleAttacher => {
+const wrapReferenceCounting = (attacher: StrictRuleAttacher): RuleAttacher => {
   const refs: Record<string, { ref(): void; unref(): void }> = {};
 
   const queueMicrotask = (fn: () => void): void => {
@@ -88,11 +108,14 @@ const wrapReferenceCounting = (attacher: RuleAttacher): RuleAttacher => {
     window.queueMicrotask(fn);
   };
 
-  const enhancedAttacher: RuleAttacher = (content: string) => {
+  const enhancedAttacher: RuleAttacher = (content, options = {}) => {
     const id = hash(content);
 
     if (!refs[id]) {
-      const detach = attacher(content);
+      const detach = attacher(content, {
+        ...options,
+        document: options.document ? options.document : window.document,
+      });
       let count = 0;
 
       const ref = (): void => {

diff --git a/packages/fuselage/src/components/Menu/Menu.tsx b/packages/fuselage/src/components/Menu/Menu.tsx
@@ -7,6 +7,7 @@ import { createPortal } from 'react-dom';
 import type { MenuTriggerProps } from 'react-stately';
 import { useMenuTriggerState } from 'react-stately';
 
+import { useStyleOptions } from '../../hooks/useStyle';
 import type { BoxProps } from '../Box';
 import { IconButton } from '../Button';
 import type { IconButtonProps } from '../Button/IconButton';
@@ -65,12 +66,15 @@ const Menu = <T extends object>({
   const sizes = { large, medium, tiny, mini };
   const defaultSmall = !large && !medium && !tiny && !mini;
 
+  const { document: targetDocument } = useStyleOptions();
+
   const popover = state.isOpen && (
     <MenuPopover
       state={state}
       triggerRef={ref}
       placement={getPlacement(placement)}
       maxWidth={maxWidth}
+      portalContainer={targetDocument?.body}
     >
       <MenuDropDown {...props} {...menuProps} />
     </MenuPopover>
@@ -99,7 +103,9 @@ const Menu = <T extends object>({
           {...sizes}
         />
       )}
-      {detached ? createPortal(popover, document.body) : popover}
+      {detached
+        ? createPortal(popover, targetDocument?.body || document.body)
+        : popover}
     </>
   );
 };

diff --git a/packages/fuselage/src/components/Menu/MenuPopover.tsx b/packages/fuselage/src/components/Menu/MenuPopover.tsx
@@ -11,6 +11,7 @@ interface MenuPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
   children: ReactNode;
   state: OverlayTriggerState;
   maxWidth?: string;
+  portalContainer?: Element;
 }
 
 function MenuPopover({

diff --git a/packages/fuselage/src/components/Popover/Popover.tsx b/packages/fuselage/src/components/Popover/Popover.tsx
@@ -7,9 +7,10 @@ import type { OverlayTriggerState } from 'react-stately';
 export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
   children: ReactNode;
   state: OverlayTriggerState;
+  portalContainer?: Element;
 }
 
-function Popover(props: PopoverProps) {
+function Popover({ portalContainer, ...props }: PopoverProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const { state, children, isNonModal } = props;
 
@@ -22,7 +23,7 @@ function Popover(props: PopoverProps) {
   );
 
   return (
-    <Overlay>
+    <Overlay portalContainer={portalContainer}>
       {!isNonModal && <div {...underlayProps} />}
       <div {...popoverProps} ref={popoverRef}>
         {!isNonModal && <DismissButton onDismiss={state.close} />}

diff --git a/packages/fuselage/src/hooks/useStyle.ts b/packages/fuselage/src/hooks/useStyle.ts
@@ -5,7 +5,21 @@ import {
   transpile,
   attachRules,
 } from '@rocket.chat/css-in-js';
-import { useDebugValue, useInsertionEffect, useMemo } from 'react';
+import {
+  createContext,
+  useContext,
+  useDebugValue,
+  useInsertionEffect,
+  useMemo,
+} from 'react';
+
+export const StyleOptions = createContext<{
+  document?: Document;
+}>({ document: window.document });
+
+export const useStyleOptions = () => {
+  return useContext(StyleOptions);
+};
 
 export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
   const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
@@ -20,19 +34,21 @@ export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
 
   useDebugValue(className);
 
+  const { document } = useStyleOptions();
+
   useInsertionEffect(() => {
     if (!content || !className) {
       return;
     }
 
     const escapedClassName = escapeName(className);
     const transpiledContent = transpile(`.${escapedClassName}`, content);
-    const detach = attachRules(transpiledContent);
+    const detach = attachRules(transpiledContent, { document });
 
     return () => {
       setTimeout(detach, 1000);
     };
-  }, [className, content]);
+  }, [className, content, document]);
 
   return className;
 };
diff --git a/packages/fuselage/src/index.ts b/packages/fuselage/src/index.ts
@@ -3,5 +3,7 @@ import './index.scss';
 export * from './components';
 export * from './styleTokens';
 
+export { StyleOptions } from './hooks/useStyle';
+
 export { Palette, __setThrowErrorOnInvalidToken__ } from './Theme';
 export { useArrayLikeClassNameProp } from './hooks/useArrayLikeClassNameProp';
diff --git a/packages/styled/src/index.ts b/packages/styled/src/index.ts
@@ -1 +1 @@
-export { default } from './styled';
+export { default, StyledOptions } from './styled';
diff --git a/packages/styled/src/styled.ts b/packages/styled/src/styled.ts
@@ -20,8 +20,18 @@ import {
   Fragment,
   useDebugValue,
   useInsertionEffect,
+  createContext,
+  useContext,
 } from 'react';
 
+export const StyledOptions = createContext<{
+  document?: Document;
+}>({ document: window.document });
+
+const useStyledOptions = () => {
+  return useContext(StyledOptions);
+};
+
 export const attachClassName = <P extends { className?: string }>(
   props: P,
   additionalClassName: string,
@@ -85,18 +95,19 @@ const styled =
 
           useDebugValue(computedClassName);
 
+          const { document } = useStyledOptions();
           useInsertionEffect(() => {
             const escapedClassName = escapeName(computedClassName);
             const transpiledContent = transpile(
               `.${escapedClassName}`,
               content,
             );
-            const detach = attachRules(transpiledContent);
+            const detach = attachRules(transpiledContent, { document });
 
             return () => {
               setTimeout(detach, 1000);
             };
-          }, [computedClassName, content]);
+          }, [computedClassName, content, document]);
 
           const newProps = attachClassName(
             { ref, ...props },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default } from './styled';
		export { default, StyledOptions } from './styled';