fix(core): menu not scrollable when opening in modal (#8179)

fix AF-1360

When menu (with modal = false) is rendered in Modal, the [RemoveScroll utility wrapped by Modal](https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/dialog/src/Dialog.tsx#L203) will prevent menu from scrolling.

The reason why menu is scrollable within a dialog is because it is also wrapped a RemoveScroll [when modal is on. ](https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/menu/src/Menu.tsx#L305)

In this fix, added a `useWithinModal` utility hook so that menu will automatically assign noportal mode for menu when it is rendered inside of a modal.

packages/frontend/component/src/ui/menu/desktop/root.tsx

@@ -1,5 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
+import React from 'react';
 
 import type { MenuProps } from '../menu.types';
 import * as styles from '../styles.css';
@@ -9,6 +10,7 @@ import * as desktopStyles from './styles.css';
 export const DesktopMenu = ({
   children,
   items,
+  noPortal,
   portalOptions,
   rootOptions: {
     onOpenChange,
@@ -33,6 +35,7 @@ export const DesktopMenu = ({
       side,
       sideOffset: (sideOffset ?? 0) + 5,
     });
+  const ContentWrapper = noPortal ? React.Fragment : DropdownMenu.Portal;
   return (
     <DropdownMenu.Root
       onOpenChange={handleOpenChange}
@@ -51,7 +54,7 @@ export const DesktopMenu = ({
         {children}
       </DropdownMenu.Trigger>
 
-      <DropdownMenu.Portal {...portalOptions}>
+      <ContentWrapper {...portalOptions}>
         <DropdownMenu.Content
           className={clsx(
             styles.menuContent,
@@ -68,7 +71,7 @@ export const DesktopMenu = ({
         >
           {items}
         </DropdownMenu.Content>
-      </DropdownMenu.Portal>
+      </ContentWrapper>
     </DropdownMenu.Root>
   );
 };

packages/frontend/component/src/ui/modal/modal.tsx

@@ -9,7 +9,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { startScopedViewTransition } from '../../utils';
@@ -142,7 +142,6 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       overlayOptions: {
         className: overlayClassName,
         style: overlayStyle,
-        onClick: onOverlayClick,
         ...otherOverlayOptions
       } = {},
       closeButtonOptions,
@@ -191,19 +190,6 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       [onEscapeKeyDown, persistent]
     );
 
-    const handleOverlayClick = useCallback(
-      (e: MouseEvent<HTMLDivElement>) => {
-        onOverlayClick?.(e);
-        if (persistent) {
-          e.preventDefault();
-        } else {
-          e.stopPropagation();
-          onOpenChange?.(false);
-        }
-      },
-      [onOpenChange, onOverlayClick, persistent]
-    );
-
     if (!container) {
       return;
     }
@@ -226,9 +212,8 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
             style={{
               ...overlayStyle,
             }}
-            onClick={handleOverlayClick}
             {...otherOverlayOptions}
-          />
+          >
             <div
               data-full-screen={fullScreen}
               data-modal={modal}
@@ -294,6 +279,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
                 {children}
               </Dialog.Content>
             </div>
+          </Dialog.Overlay>
         </Dialog.Portal>
       </Dialog.Root>
     );