Revert "Prevent scrolling while popovers are open (#3475)" (#3583)

This reverts commit b10ddaa.

Author: devongovett

packages/@adobe/spectrum-css-temp/components/underlay/index.css

@@ -37,11 +37,6 @@ governing permissions and limitations under the License.
   /* Exit animations */
   transition: opacity var(--spectrum-dialog-background-exit-animation-duration) var(--spectrum-dialog-background-exit-animation-ease) var(--spectrum-dialog-background-exit-animation-delay),
               visibility 0ms linear calc(var(--spectrum-dialog-background-exit-animation-delay) + var(--spectrum-dialog-background-exit-animation-duration));
-
-  &.spectrum-Underlay--isTransparent {
-    transition: none;
-    background: none;
-  }
 }
 
 .spectrum-Underlay.is-open {

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -173,8 +173,7 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, isKeyboa
       placement={placement}
       arrowProps={arrowProps}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-      hideArrow={hideArrow}
-      preventScroll>
+      hideArrow={hideArrow}>
       {typeof content === 'function' ? content(state.close) : content}
     </Popover>
   );

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

@@ -109,8 +109,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
         placement={placement}
         hideArrow
         onClose={state.close}
-        shouldCloseOnBlur
-        preventScroll>
+        shouldCloseOnBlur>
         {contents}
       </Popover>
     );

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

@@ -489,12 +489,12 @@ storiesOf('MenuTrigger', module)
     )
   )
   .add(
-    'menu should prevent scrolling',
+    'menu closes on scroll',
     () => (
       <div style={{height: 100, display: 'flex'}}>
         <div style={{paddingTop: 100, height: 100, overflow: 'auto', background: 'antiquewhite'}}>
           <div style={{height: 200}}>
-            <div>Shouldn't be able to scroll here while Menu is open.</div>
+            <div>Scrolling here will close the Menu</div>
             <MenuTrigger onOpenChange={action('onOpenChange')} defaultOpen>
               <ActionButton
                 onPress={action('press')}
@@ -514,7 +514,7 @@ storiesOf('MenuTrigger', module)
         </div>
         <div style={{paddingTop: 100, height: 100, overflow: 'auto', flex: 1, background: 'grey'}}>
           <div style={{height: 200}}>
-            Also shouldn't be able to scroll here while Menu is open.
+            Scrolling here won't close the Menu
           </div>
         </div>
       </div>

packages/@react-spectrum/overlays/src/Popover.tsx

@@ -11,15 +11,14 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, FocusableElement} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {Overlay} from './Overlay';
 import overrideStyles from './overlays.css';
 import {PlacementAxis, PopoverProps} from '@react-types/overlays';
-import React, {DOMAttributes, forwardRef, HTMLAttributes, ReactNode, RefObject, useRef, useState} from 'react';
+import React, {forwardRef, HTMLAttributes, ReactNode, RefObject, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
-import {Underlay} from './Underlay';
-import {useModal, useOverlay, usePreventScroll} from '@react-aria/overlays';
+import {useModal, useOverlay} from '@react-aria/overlays';
 
 interface PopoverWrapperProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode,
@@ -31,9 +30,7 @@ interface PopoverWrapperProps extends HTMLAttributes<HTMLElement> {
   shouldCloseOnBlur?: boolean,
   isKeyboardDismissDisabled?: boolean,
   isNonModal?: boolean,
-  isDismissable?: boolean,
-  overlayProps: DOMAttributes<FocusableElement>,
-  preventScroll?: boolean
+  isDismissable?: boolean
 }
 
 /**
@@ -61,15 +58,13 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     isKeyboardDismissDisabled,
     isNonModal,
     isDismissable = true,
-    preventScroll,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
   let {styleProps} = useStyleProps(props);
-  let {overlayProps, underlayProps} = useOverlay({...props, isDismissable: isDismissable && props.isOpen}, domRef);
+
   return (
     <Overlay {...otherProps}>
-      {preventScroll && <Underlay isTransparent {...underlayProps} /> }
       <PopoverWrapper
         {...styleProps}
         ref={domRef}
@@ -80,9 +75,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
         isKeyboardDismissDisabled={isKeyboardDismissDisabled}
         hideArrow={hideArrow}
         isNonModal={isNonModal}
-        isDismissable={isDismissable}
-        overlayProps={overlayProps}
-        preventScroll={preventScroll}>
+        isDismissable={isDismissable}>
         {children}
       </PopoverWrapper>
     </Overlay>
@@ -103,14 +96,12 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     isNonModal,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isDismissable,
-    overlayProps,
-    preventScroll,
     ...otherProps
   } = props;
+  let {overlayProps} = useOverlay({...props, isDismissable: isDismissable && isOpen}, ref);
   let {modalProps} = useModal({
     isDisabled: isNonModal
   });
-  usePreventScroll({isDisabled: !preventScroll});
 
   return (
     <div

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -15,12 +15,11 @@ import React from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
 interface UnderlayProps {
-  isOpen?: boolean,
-  isTransparent?: boolean
+  isOpen?: boolean
 }
 
-export function Underlay({isOpen, isTransparent}: UnderlayProps) {
+export function Underlay({isOpen}: UnderlayProps) {
   return (
-    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'spectrum-Underlay--isTransparent': isTransparent}, {'is-open': isOpen})} />
+    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen})} />
   );
 }

packages/@react-spectrum/picker/src/Picker.tsx

@@ -175,8 +175,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
         placement={placement}
         hideArrow
         shouldCloseOnBlur
-        onClose={state.close}
-        preventScroll>
+        onClose={state.close}>
         {listbox}
       </Popover>
     );

packages/@react-types/overlays/src/index.d.ts

@@ -91,8 +91,7 @@ export interface PopoverProps extends StyleProps, OverlayProps {
   onClose?: () => void,
   shouldCloseOnBlur?: boolean,
   isNonModal?: boolean,
-  isDismissable?: boolean,
-  preventScroll?: boolean
+  isDismissable?: boolean
 }
 
 export interface TrayProps extends StyleProps, OverlayProps {