feat(fuselage): Implement OwnerDocument context and update document references (#1947)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: gabriellsh

.changeset/khaki-pants-exist.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Implement `OwnerDocument` context and update `document` references

packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx

@@ -3,28 +3,33 @@ import type { TrackHTMLAttributes } from 'react';
 import { useState, useRef, forwardRef } from 'react';
 
 import { Box, Button, IconButton, Margins } from '../..';
+import { useOwnerDocument } from '../../contexts';
 import { Slider } from '../Slider';
 
 const getMaskTime = (durationTime: number) =>
   new Date(durationTime * 1000)
     .toISOString()
     .slice(durationTime > 60 * 60 ? 11 : 14, 19);
 
-function forceDownload(url: string, fileName?: string) {
+function forceDownload(
+  ownerDocument: Document,
+  url: string,
+  fileName?: string,
+) {
   const xhr = new XMLHttpRequest();
   xhr.open('GET', url, true);
   xhr.responseType = 'blob';
   xhr.onload = function () {
     const urlCreator = window.URL || window.webkitURL;
     const imageUrl = urlCreator.createObjectURL(this.response);
-    const tag = document.createElement('a');
+    const tag = ownerDocument.createElement('a');
     tag.href = imageUrl;
     if (fileName) {
       tag.download = fileName;
     }
-    document.body.appendChild(tag);
+    ownerDocument.body.appendChild(tag);
     tag.click();
-    document.body.removeChild(tag);
+    ownerDocument.body.removeChild(tag);
   };
   xhr.send();
 }
@@ -126,6 +131,8 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
       handlePlaybackSpeed(1);
     };
 
+    const { document: ownerDocument } = useOwnerDocument();
+
     return (
       <Box
         borderWidth='default'
@@ -188,9 +195,9 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
             medium
             onClick={(e) => {
               const { host } = new URL(src);
-              if (host !== window.location.host) {
+              if (host !== ownerDocument.defaultView?.location.host) {
                 e.preventDefault();
-                forceDownload(src);
+                forceDownload(ownerDocument, src);
               }
             }}
           />

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 { useOwnerDocument } from '../../contexts';
 import type { BoxProps } from '../Box';
 import { IconButton } from '../Button';
 import type { IconButtonProps } from '../Button/IconButton';
@@ -65,6 +66,8 @@ const Menu = <T extends object>({
   const sizes = { large, medium, tiny, mini };
   const defaultSmall = !large && !medium && !tiny && !mini;
 
+  const { document: ownerDocument } = useOwnerDocument();
+
   const popover = state.isOpen && (
     <MenuPopover
       state={state}
@@ -99,7 +102,9 @@ const Menu = <T extends object>({
           {...sizes}
         />
       )}
-      {detached ? createPortal(popover, document.body) : popover}
+      {detached
+        ? createPortal(popover, ownerDocument?.body || document.body)
+        : popover}
     </>
   );
 };

packages/fuselage/src/components/PaletteStyleTag/hooks/useCreateStyleContainer.ts

@@ -1,20 +1,25 @@
 import { useMemo } from 'react';
 
-export const useCreateStyleContainer = (id: string) =>
-  useMemo(() => {
+import { useOwnerDocument } from '../../../contexts';
+
+export const useCreateStyleContainer = (id: string) => {
+  const { document: ownerDocument } = useOwnerDocument();
+  return useMemo(() => {
     const refElement =
-      document.getElementById('rcx-styles') || document.head.lastChild;
+      ownerDocument.getElementById('rcx-styles') ||
+      ownerDocument.head.lastChild;
 
-    const el = document.getElementById(id);
+    const el = ownerDocument.getElementById(id);
 
     if (el) {
       return el;
     }
 
-    const styleElement = document.createElement('style');
+    const styleElement = ownerDocument.createElement('style');
     styleElement.setAttribute('id', id);
 
-    document.head.insertBefore(styleElement, refElement);
-    document.head.appendChild(document.createElement('style'));
+    ownerDocument.head.insertBefore(styleElement, refElement);
+    ownerDocument.head.appendChild(ownerDocument.createElement('style'));
     return styleElement;
-  }, [id]);
+  }, [id, ownerDocument]);
+};

packages/fuselage/src/components/Popover/Popover.tsx

@@ -4,25 +4,31 @@ import type { AriaPopoverProps } from 'react-aria';
 import { usePopover, DismissButton, Overlay } from 'react-aria';
 import type { OverlayTriggerState } from 'react-stately';
 
+import { useOwnerDocument } from '../../contexts';
+
 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;
 
+  const { document: ownerDocument } = useOwnerDocument();
+
   const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
       popoverRef,
+      boundaryElement: ownerDocument?.body,
     },
     state,
   );
 
   return (
-    <Overlay>
+    <Overlay portalContainer={ownerDocument?.body}>
       {!isNonModal && <div {...underlayProps} />}
       <div {...popoverProps} ref={popoverRef}>
         {!isNonModal && <DismissButton onDismiss={state.close} />}

packages/fuselage/src/components/Position/Position.tsx

@@ -4,6 +4,7 @@ import type { RefObject, ReactElement } from 'react';
 import { useRef, useMemo, cloneElement, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useOwnerDocument } from '../../contexts';
 import type { BoxProps } from '../Box';
 
 export type PositionProps = {
@@ -33,26 +34,29 @@ const Position = ({
     () => ({ position: 'fixed', ...positionStyle }),
     [positionStyle],
   );
+
+  const { document: ownerDocument } = useOwnerDocument();
+
   const [portalContainer] = useState(() => {
-    const prev = document.getElementById('position-container');
+    const prev = ownerDocument.getElementById('position-container');
     if (prev) {
       return prev;
     }
-    const element = document.createElement('div');
+    const element = ownerDocument.createElement('div');
 
     element.id = 'position-container';
 
-    document.body.appendChild(element);
+    ownerDocument.body.appendChild(element);
     return element;
   });
 
   useEffect(
     () => () => {
       if (portalContainer.childNodes.length === 0) {
-        document.body.removeChild(portalContainer);
+        ownerDocument.body.removeChild(portalContainer);
       }
     },
-    [portalContainer],
+    [portalContainer, ownerDocument],
   );
 
   return createPortal(

packages/fuselage/src/contexts/OwnerDocument.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export const OwnerDocument = createContext<{
+  document: Document;
+}>({ document: window.document });
+
+export const useOwnerDocument = () => {
+  return useContext(OwnerDocument);
+};

packages/fuselage/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './OwnerDocument';

packages/fuselage/src/hooks/useStyle.ts

@@ -7,6 +7,8 @@ import {
 } from '@rocket.chat/css-in-js';
 import { useDebugValue, useInsertionEffect, useMemo } from 'react';
 
+import { useOwnerDocument } from '../contexts';
+
 export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
   const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
 
@@ -20,19 +22,21 @@ export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
 
   useDebugValue(className);
 
+  const { document } = useOwnerDocument();
+
   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;
 };

packages/fuselage/src/index.ts

@@ -2,6 +2,7 @@ import './index.scss';
 
 export * from './components';
 export * from './styleTokens';
+export * from './contexts';
 
 export { Palette, __setThrowErrorOnInvalidToken__ } from './Theme';
 export { useArrayLikeClassNameProp } from './hooks/useArrayLikeClassNameProp';