Add popovers without overlay

src/App.js

@@ -12,6 +12,7 @@ import Expensify from './Expensify';
 import {LocaleContextProvider} from './components/withLocalize';
 import OnyxProvider from './components/OnyxProvider';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
+import PopoverContextProvider from './components/PopoverProvider';
 import ComposeProviders from './components/ComposeProviders';
 import SafeArea from './components/SafeArea';
 import * as Environment from './libs/Environment/Environment';
@@ -44,6 +45,7 @@ const App = () => (
                 HTMLEngineProvider,
                 WindowDimensionsProvider,
                 KeyboardStateProvider,
+                PopoverContextProvider,
                 PickerStateProvider,
             ]}
         >

src/CONST.js

@@ -549,6 +549,7 @@ const CONST = {
             CENTERED_SMALL: 'centered_small',
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
+            POPOVER_WITHOUT_OVERLAY: 'popover_without_overlay',
             RIGHT_DOCKED: 'right_docked',
         },
         ANCHOR_ORIGIN_VERTICAL: {
@@ -664,7 +665,6 @@ const CONST = {
             VALIDATE_CODE_FAILED: 'Validate code failed',
         },
     },
-
     PUSHER: {
         PRIVATE_USER_CHANNEL_PREFIX: 'private-encrypted-user-accountID-',
         PRIVATE_REPORT_CHANNEL_PREFIX: 'private-report-reportID-',

src/components/AddPaymentMethodMenu.js

@@ -28,6 +28,9 @@ const propTypes = {
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
+    /** Popover anchor ref */
+    anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
     ...withLocalizePropTypes,
 };
 
@@ -36,13 +39,15 @@ const defaultProps = {
     payPalMeData: {},
     shouldShowPaypal: true,
     betas: [],
+    anchorRef: () => {},
 };
 
 const AddPaymentMethodMenu = (props) => (
     <PopoverMenu
         isVisible={props.isVisible}
         onClose={props.onClose}
         anchorPosition={props.anchorPosition}
+        anchorRef={props.anchorRef}
         onItemSelected={() => props.onClose()}
         menuItems={[
             {
@@ -71,6 +76,7 @@ const AddPaymentMethodMenu = (props) => (
                   ]
                 : []),
         ]}
+        withoutOverlay
     />
 );
 

src/components/AvatarWithImagePicker.js

@@ -99,6 +99,7 @@ class AvatarWithImagePicker extends React.Component {
             imageUri: '',
             imageType: '',
         };
+        this.anchorRef = React.createRef();
     }
 
     componentDidMount() {
@@ -256,7 +257,16 @@ class AvatarWithImagePicker extends React.Component {
 
         return (
             <View style={[styles.alignItemsCenter, ...additionalStyles]}>
-                <Pressable onPress={() => this.setState({isMenuVisible: true})}>
+                <Pressable
+                    ref={this.anchorRef}
+                    onPress={(e) => {
+                        if (e.nativeEvent.anchorRef && e.nativeEvent.anchorRef.current === this.anchorRef.current) {
+                            return;
+                        }
+
+                        this.setState((prev) => ({isMenuVisible: !prev.isMenuVisible}));
+                    }}
+                >
                     <View style={[styles.pRelative, styles.avatarLarge]}>
                         <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
                             {this.props.source ? (
@@ -294,6 +304,8 @@ class AvatarWithImagePicker extends React.Component {
                                         onItemSelected={() => this.setState({isMenuVisible: false})}
                                         menuItems={this.createMenuItems(openPicker)}
                                         anchorPosition={this.props.anchorPosition}
+                                        withoutOverlay
+                                        anchorRef={this.anchorRef}
                                     />
                                 </>
                             )}

src/components/Button/index.js

@@ -109,6 +109,9 @@ const propTypes = {
 
     /** Accessibility label for the component */
     accessibilityLabel: PropTypes.string,
+
+    /** React ref being forwarded to the Button */
+    forwardedRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -141,6 +144,7 @@ const defaultProps = {
     shouldEnableHapticFeedback: false,
     nativeID: '',
     accessibilityLabel: '',
+    forwardedRef: () => {},
 };
 
 class Button extends Component {
@@ -240,6 +244,7 @@ class Button extends Component {
     render() {
         return (
             <PressableWithFeedback
+                ref={this.props.forwardedRef}
                 onPress={(e) => {
                     if (e && e.type === 'click') {
                         e.currentTarget.blur();
@@ -303,4 +308,12 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default compose(withNavigationFallback, withNavigationFocus)(Button);
+const ComposedButton = compose(withNavigationFallback, withNavigationFocus)(Button);
+
+export default React.forwardRef((props, ref) => (
+    <ComposedButton
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));

src/components/ButtonWithDropdown.js

@@ -22,13 +22,17 @@ const propTypes = {
 
     /** Should the button be disabled */
     isDisabled: PropTypes.bool,
+
+    /** Ref to the dropdown button */
+    dropdownButtonRef: PropTypes.func,
 };
 
 const defaultProps = {
     onButtonPress: () => {},
     onDropdownPress: () => {},
     isDisabled: false,
     isLoading: false,
+    dropdownButtonRef: () => {},
 };
 
 const ButtonWithDropdown = (props) => (
@@ -50,6 +54,7 @@ const ButtonWithDropdown = (props) => (
             style={[styles.pl0]}
             onPress={props.onDropdownPress}
             shouldRemoveLeftBorderRadius
+            ref={props.dropdownButtonRef}
         >
             <Icon
                 src={Expensicons.DownArrow}

src/components/ButtonWithMenu.js

@@ -48,6 +48,8 @@ class ButtonWithMenu extends PureComponent {
             selectedItemIndex: 0,
             isMenuVisible: false,
         };
+
+        this.anchorRef = React.createRef();
     }
 
     setMenuVisibility(isMenuVisible) {
@@ -64,9 +66,13 @@ class ButtonWithMenu extends PureComponent {
                         isLoading={this.props.isLoading}
                         isDisabled={this.props.isDisabled}
                         onButtonPress={(event) => this.props.onPress(event, selectedItem.value)}
-                        onDropdownPress={() => {
-                            this.setMenuVisibility(true);
+                        onDropdownPress={(e) => {
+                            if (e.nativeEvent.anchorRef && e.nativeEvent.anchorRef.current === this.anchorRef.current) {
+                                return;
+                            }
+                            this.setMenuVisibility(!this.state.isMenuVisible);
                         }}
+                        dropdownButtonRef={this.anchorRef}
                     />
                 ) : (
                     <Button
@@ -92,6 +98,8 @@ class ButtonWithMenu extends PureComponent {
                                 this.setState({selectedItemIndex: index});
                             },
                         }))}
+                        withoutOverlay
+                        anchorRef={this.anchorRef}
                     />
                 )}
             </View>

src/components/EmojiPicker/EmojiPicker.js

@@ -35,6 +35,8 @@ class EmojiPicker extends React.Component {
 
             emojiPopoverAnchorOrigin: DEFAULT_ANCHOR_ORIGIN,
         };
+
+        this.emojiPopoverAnchor = React.createRef();
     }
 
     componentDidMount() {
@@ -68,7 +70,7 @@ class EmojiPicker extends React.Component {
         // The first click will hide the emoji picker by calling the hideEmojiPicker() function
         // and in that function the emojiPopoverAnchor prop to will be set to null (synchronously)
         // thus we rely on that prop to prevent fast click / multiple emoji selection
-        if (!this.emojiPopoverAnchor) {
+        if (!this.emojiPopoverAnchor.current) {
             return;
         }
 
@@ -87,7 +89,6 @@ class EmojiPicker extends React.Component {
         if (isNavigating) {
             this.onModalHide = () => {};
         }
-        this.emojiPopoverAnchor = null;
         this.setState({isEmojiPickerVisible: false});
     }
 
@@ -103,9 +104,9 @@ class EmojiPicker extends React.Component {
     showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow = () => {}) {
         this.onModalHide = onModalHide;
         this.onEmojiSelected = onEmojiSelected;
-        this.emojiPopoverAnchor = emojiPopoverAnchor;
+        this.emojiPopoverAnchor.current = emojiPopoverAnchor;
 
-        if (this.emojiPopoverAnchor) {
+        if (this.emojiPopoverAnchor.current) {
             // Drop focus to avoid blue focus ring.
             emojiPopoverAnchor.blur();
         }
@@ -118,10 +119,10 @@ class EmojiPicker extends React.Component {
 
     measureEmojiPopoverAnchorPosition() {
         return new Promise((resolve) => {
-            if (!this.emojiPopoverAnchor) {
+            if (!this.emojiPopoverAnchor.current) {
                 return resolve({horizontal: 0, vertical: 0});
             }
-            this.emojiPopoverAnchor.measureInWindow((x, y, width) => resolve({horizontal: x + width, vertical: y}));
+            this.emojiPopoverAnchor.current.measureInWindow((x, y, width) => resolve({horizontal: x + width, vertical: y}));
         });
     }
 
@@ -177,7 +178,9 @@ class EmojiPicker extends React.Component {
                     height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
                 }}
                 anchorOrigin={this.state.emojiPopoverAnchorOrigin}
+                anchorRef={this.emojiPopoverAnchor}
                 measureContent={this.measureContent}
+                withoutOverlay
             >
                 <EmojiPickerMenu
                     onEmojiSelected={this.selectEmoji}

src/components/EmojiPicker/EmojiPickerButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -26,17 +26,27 @@ const defaultProps = {
 };
 
 const EmojiPickerButton = (props) => {
-    let emojiPopoverAnchor = null;
+    const emojiPopoverAnchor = useRef(null);
     return (
         <Tooltip
             containerStyles={[styles.alignSelfEnd]}
             text={props.translate('reportActionCompose.emoji')}
         >
             <Pressable
-                ref={(el) => (emojiPopoverAnchor = el)}
+                ref={emojiPopoverAnchor}
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
-                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)}
+                onPress={(e) => {
+                    if (e.nativeEvent.anchorRef && e.nativeEvent.anchorRef.current === emojiPopoverAnchor.current) {
+                        return;
+                    }
+
+                    if (!EmojiPickerAction.emojiPickerRef.current.state.isEmojiPickerVisible) {
+                        EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current);
+                    } else {
+                        EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
+                    }
+                }}
                 nativeID={props.nativeID}
             >
                 {({hovered, pressed}) => (

src/components/Popover/index.js

@@ -4,6 +4,7 @@ import {propTypes, defaultProps} from './popoverPropTypes';
 import CONST from '../../CONST';
 import Modal from '../Modal';
 import withWindowDimensions from '../withWindowDimensions';
+import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
@@ -24,6 +25,12 @@ const Popover = (props) => {
             document.body,
         );
     }
+
+    if (props.withoutOverlay && !props.isSmallScreenWidth) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return createPortal(<PopoverWithoutOverlay {...props} />, document.body);
+    }
+
     return (
         <Modal
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/Popover/popoverPropTypes.js

@@ -14,6 +14,9 @@ const propTypes = {
         left: PropTypes.number,
     }),
 
+    /** The anchor ref of the popover */
+    anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
     /** A react-native-animatable animation timing for the modal display animation. */
     animationInTiming: PropTypes.number,
 
@@ -30,6 +33,7 @@ const defaultProps = {
 
     // Anchor position is optional only because it is not relevant on mobile
     anchorPosition: {},
+    anchorRef: () => {},
     disableAnimation: true,
 };
 

src/components/PopoverMenu/index.js

@@ -90,6 +90,7 @@ class PopoverMenu extends PureComponent {
         return (
             <Popover
                 anchorPosition={this.props.anchorPosition}
+                anchorRef={this.props.anchorRef}
                 onClose={this.props.onClose}
                 isVisible={this.props.isVisible}
                 onModalHide={this.resetFocusAndHideModal}
@@ -98,6 +99,7 @@ class PopoverMenu extends PureComponent {
                 animationInTiming={this.props.animationInTiming}
                 disableAnimation={this.props.disableAnimation}
                 fromSidebarMediumScreen={this.props.fromSidebarMediumScreen}
+                withoutOverlay={this.props.withoutOverlay}
             >
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                     {!_.isEmpty(this.props.headerText) && (

src/components/PopoverMenu/popoverMenuPropTypes.js

@@ -33,6 +33,9 @@ const propTypes = {
         left: PropTypes.number,
     }).isRequired,
 
+    /** The anchor reference of the CreateMenu popover */
+    anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+
     /** A react-native-animatable animation definition for the modal display animation. */
     animationIn: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),