Make MenuTrigger render menus in a Tray on mobile (#333)

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Danni <drobinson@livefyre.com>

Author: 3 people

packages/@react-spectrum/menu/src/MenuTrigger.tsx

@@ -14,12 +14,12 @@ import {DOMRefValue} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
 import {FocusStrategy, SpectrumMenuTriggerProps} from '@react-types/menu';
 import {MenuContext} from './context';
-import {Overlay, Popover} from '@react-spectrum/overlays';
+import {Overlay, Popover, Tray} from '@react-spectrum/overlays';
 import {Placement, useOverlayPosition} from '@react-aria/overlays';
 import {PressResponder} from '@react-aria/interactions';
 import {Provider} from '@react-spectrum/provider';
 import React, {Fragment, useRef, useState} from 'react';
-import {unwrapDOMRef} from '@react-spectrum/utils';
+import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
 import {useControlledState} from '@react-stately/utils';
 import {useMenuTrigger} from '@react-aria/menu';
 
@@ -67,14 +67,43 @@ export function MenuTrigger(props: SpectrumMenuTriggerProps) {
     isOpen
   });
 
+  let isMobile = useMediaQuery('(max-width: 700px)');
   let menuContext = {
     ...menuProps,
     focusStrategy,
     onClose,
     closeOnSelect,
     autoFocus: true,
-    wrapAround: true
+    wrapAround: true,
+    UNSAFE_style: {
+      width: isMobile ? '100%' : undefined
+    }
   };
+
+  // On small screen devices, the menu is rendered in a tray, otherwise a popover.
+  let overlay;
+  if (isMobile) {
+    overlay = (
+      <Tray isOpen={isOpen} onClose={() => setOpen(false)}>
+        <FocusScope restoreFocus>
+          {menu}
+        </FocusScope>
+      </Tray>
+    );
+  } else {
+    overlay = (
+      <Popover 
+        {...overlayProps}
+        ref={menuPopoverRef}
+        placement={placement}
+        hideArrow
+        onClose={() => setOpen(false)}>
+        <FocusScope restoreFocus>
+          {menu}
+        </FocusScope>
+      </Popover>
+    );
+  }
 
   return (
     <Fragment>
@@ -85,11 +114,7 @@ export function MenuTrigger(props: SpectrumMenuTriggerProps) {
       </Provider>
       <MenuContext.Provider value={menuContext}>
         <Overlay isOpen={isOpen} ref={containerRef}>
-          <Popover {...overlayProps} ref={menuPopoverRef} hideArrow placement={placement} onClose={onClose}>
-            <FocusScope restoreFocus>
-              {menu}
-            </FocusScope>
-          </Popover>
+          {overlay}
         </Overlay>
       </MenuContext.Provider>
     </Fragment>