feat(fuselage): Adds detached prop to render Menu on the document…

… body (#1087)

Co-authored-by: dougfabris <devfabris@gmail.com>

.changeset/eleven-mails-fail.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Adds detached prop to render Menu on the document body

packages/fuselage/src/components/Menu/V2/Menu.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps, ElementType } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { AriaMenuProps } from 'react-aria';
 import { useButton, useMenuTrigger } from 'react-aria';
+import { createPortal } from 'react-dom';
 import type { MenuTriggerProps } from 'react-stately';
 import { useMenuTriggerState } from 'react-stately';
 
@@ -21,6 +22,7 @@ interface MenuButtonProps<T> extends AriaMenuProps<T>, MenuTriggerProps {
   mini?: boolean;
   placement?: UsePositionOptions['placement'];
   title?: string;
+  detached?: boolean;
   /**
    * A component that renders an IconButton
    */
@@ -39,6 +41,7 @@ const Menu = <T extends object>({
   pressed,
   maxWidth = 'x250',
   button,
+  detached,
   ...props
 }: MenuButtonProps<T>) => {
   const state = useMenuTriggerState(props);
@@ -55,6 +58,17 @@ const Menu = <T extends object>({
   const sizes = { large, medium, tiny, mini };
   const defaultSmall = !large && !medium && !tiny && !mini;
 
+  const popover = state.isOpen && (
+    <MenuPopover
+      state={state}
+      triggerRef={ref}
+      placement={getPlacement(placement)}
+      maxWidth={maxWidth}
+    >
+      <MenuDropDown {...props} {...menuProps} />
+    </MenuPopover>
+  );
+
   return (
     <>
       {button ? (
@@ -78,16 +92,7 @@ const Menu = <T extends object>({
           {...sizes}
         />
       )}
-      {state.isOpen && (
-        <MenuPopover
-          state={state}
-          triggerRef={ref}
-          placement={getPlacement(placement)}
-          maxWidth={maxWidth}
-        >
-          <MenuDropDown {...props} {...menuProps} />
-        </MenuPopover>
-      )}
+      {detached ? createPortal(popover, document.body) : popover}
     </>
   );
 };