Fix Unavailable Menu Item's Popover positioning (#4917)

* show overflow of popover

* detect if scroll is prevented in position calc

* add docs example to see fix

* only overflow when submenus are shown

* Fix menu clipping corners

* only make overflow visible on menus

* update type

* revert docs change

---------

Co-authored-by: Rob Snow <[email protected]>

Author: reidbarber

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -143,7 +143,9 @@ function getDelta(
   containerDimensions: Dimensions,
   padding: number
 ) {
-  let containerScroll = containerDimensions.scroll[axis];
+  let root = document.scrollingElement || document.documentElement;
+  let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
+  let containerScroll = isScrollPrevented ? 0 : containerDimensions.scroll[axis];
   let containerHeight = containerDimensions[AXIS_SIZE[axis]];
 
   let startEdgeOffset = offset - padding - containerScroll;

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

@@ -39,43 +39,45 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLULi
   return (
     <MenuStateContext.Provider value={{state, container: scopedRef, menu: domRef}}>
       <FocusScope contain={state.expandedKeys.size > 0}>
-        <ul
-          {...menuProps}
-          {...styleProps}
-          ref={domRef}
-          className={
-            classNames(
-              styles,
-              'spectrum-Menu',
-              styleProps.className
-            )
-          }>
-          {[...state.collection].map(item => {
-            if (item.type === 'section') {
-              return (
-                <MenuSection
+        <div style={{overflow: 'hidden', maxHeight: '100%', display: 'inline-flex', borderRadius: 'var(--spectrum-alias-border-radius-regular)'}}>
+          <ul
+            {...menuProps}
+            {...styleProps}
+            ref={domRef}
+            className={
+              classNames(
+                styles,
+                'spectrum-Menu',
+                styleProps.className
+              )
+            }>
+            {[...state.collection].map(item => {
+              if (item.type === 'section') {
+                return (
+                  <MenuSection
+                    key={item.key}
+                    item={item}
+                    state={state}
+                    onAction={completeProps.onAction} />
+                );
+              }
+
+              let menuItem = (
+                <MenuItem
                   key={item.key}
                   item={item}
                   state={state}
                   onAction={completeProps.onAction} />
               );
-            }
-
-            let menuItem = (
-              <MenuItem
-                key={item.key}
-                item={item}
-                state={state}
-                onAction={completeProps.onAction} />
-            );
 
-            if (item.wrapper) {
-              menuItem = item.wrapper(menuItem);
-            }
+              if (item.wrapper) {
+                menuItem = item.wrapper(menuItem);
+              }
 
-            return menuItem;
-          })}
-        </ul>
+              return menuItem;
+            })}
+          </ul>
+        </div>
         <div ref={scopedRef} />
       </FocusScope>
     </MenuStateContext.Provider>

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

@@ -81,7 +81,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
   } else {
     overlay = (
       <Popover
-        UNSAFE_style={{clipPath: 'unset'}}
+        UNSAFE_style={{clipPath: 'unset', overflow: 'visible'}}
         state={state}
         triggerRef={menuTriggerRef}
         scrollRef={menuRef}