refactor(common-adapters): give each popup mode its own module

shared/chat/conversation/info-panel/settings/min-writer-role.tsx

@@ -140,7 +140,7 @@ const Dropdown = (p: DropdownProps) => {
         direction="horizontal"
         alignItems="center"
         style={styles.dropdown}
-        ref={isMobile ? null : popupAnchor}
+        ref={popupAnchor}
         onClick={showPopup}
       >
         <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.label}>

shared/chat/conversation/input-area/normal/input.tsx

@@ -548,7 +548,7 @@ const EmojiButton = function EmojiButton(p: EmojiButtonProps) {
   const makePopup = (p: Kb.Popup2Parms) => {
     const {attachTo, hidePopup} = p
     return (
-      <Kb.Popup attachTo={attachTo} visible={true} onHidden={hidePopup} position="top right">
+      <Kb.Popup intent="menu" attachTo={attachTo} onHidden={hidePopup} position="top right">
         <EmojiPickerDesktop
           conversationIDKey={conversationIDKey}
           onPickAction={insertEmoji}

shared/chat/conversation/input-area/suggestors/index.test.tsx

@@ -26,7 +26,7 @@ jest.mock('../../thread-context', () => ({useConversationThreadID: () => 'conv'}
 jest.mock('../input-state', () => ({useConversationInput: () => false}))
 jest.mock('@/common-adapters', () => {
   const actual = jest.requireActual<Record<string, unknown>>('@/common-adapters')
-  return {...actual, Popup: (p: {children: React.ReactNode}) => <>{p.children}</>}
+  return {...actual, AnchoredPopup: (p: {children: React.ReactNode}) => <>{p.children}</>}
 })
 
 // the suggestors read the caret through the input ref; drive it directly so the

shared/chat/conversation/input-area/suggestors/index.tsx

@@ -479,20 +479,18 @@ const Popup = (p: PopupProps) => {
   const attachRef = inputRef as React.RefObject<Kb.MeasureRef | null>
 
   return (
-    <Kb.Popup
+    <Kb.AnchoredPopup
       attachTo={attachRef}
-      mobileAnchored={true}
       matchDimension={true}
       position="top center"
       positionFallbacks={positionFallbacks}
-      visible={true}
       propagateOutsideClicks={false}
       onHidden={setInactive}
       containerStyle={suggestionOverlayStyle}
       style={suggestionOverlayStyle}
     >
       {isMobile ? <MobileSuggestionArea>{children}</MobileSuggestionArea> : children}
-    </Kb.Popup>
+    </Kb.AnchoredPopup>
   )
 }
 

shared/chat/conversation/messages/emoji-row.tsx

@@ -193,6 +193,7 @@ function EmojiRowContainer(p: OwnProps) {
       </Kb.Box2>
       {showingPicker && message && hasMessageID && (
         <Kb.Popup
+          intent="menu"
           attachTo={popupAnchor}
           containerStyle={styles.pickerContainer}
           position="top right"

shared/chat/conversation/messages/reaction-tooltip.tsx

@@ -135,7 +135,7 @@ const ReactionTooltip = (p: OwnProps) => {
 
   if (isMobile) {
     return (
-      <Kb.Popup
+      <Kb.Sheet
         onHidden={onHidden}
         style={styles.sheet}
         footer={
@@ -173,12 +173,12 @@ const ReactionTooltip = (p: OwnProps) => {
             ))}
           </Kb.Box2>
         </MessageContext>
-      </Kb.Popup>
+      </Kb.Sheet>
     )
   }
 
   return (
-    <Kb.Popup
+    <Kb.AnchoredPopup
       attachTo={attachmentRef}
       onHidden={onHidden}
       position="top center"
@@ -205,7 +205,7 @@ const ReactionTooltip = (p: OwnProps) => {
           />
         </Kb.Box2>
       </MessageContext>
-    </Kb.Popup>
+    </Kb.AnchoredPopup>
   )
 }
 

shared/chat/send-to-chat/conversation-list/choose-conversation.tsx

@@ -17,11 +17,11 @@ const ChooseConversation = (props: Props) => {
     const {attachTo, hidePopup} = p
     return (
       <Kb.Popup
+        intent="menu"
         attachTo={attachTo}
         onHidden={hidePopup}
         position="center center"
         style={styles.overlay}
-        visible={true}
       >
         <ConversationList onSelect={onSelect} onDone={hidePopup} />
       </Kb.Popup>

shared/common-adapters/dropdown.tsx

@@ -115,9 +115,9 @@ function Dropdown<N extends React.ReactNode>(p: Props<N>) {
     ))
     return (
       <Kb.Popup
+        intent="menu"
         style={Styles.collapseStyles([styles.overlay, overlayStyle])}
         attachTo={attachTo}
-        visible={true}
         onHidden={hidePopup}
         position={position || 'center center'}
       >

shared/common-adapters/floating-menu/index.test.tsx

@@ -0,0 +1,26 @@
+/** @jest-environment jsdom */
+/// <reference types="jest" />
+
+import {cleanup, render} from '@testing-library/react'
+import FloatingMenu from '.'
+
+const items = [{onClick: () => {}, title: 'an item'}]
+
+describe('FloatingMenu visibility', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  // 'modal' used to skip this guard and rely on Popup dropping an invisible
+  // popup on the way past. Popup no longer takes visible, so the guard is the
+  // only thing keeping a hidden menu off the screen.
+  test.each([undefined, 'bottomsheet', 'modal'] as const)(
+    'renders nothing when hidden in %s mode',
+    mode => {
+      const {container} = render(
+        <FloatingMenu closeOnSelect={true} items={items} mode={mode} onHidden={() => {}} visible={false} />
+      )
+      expect(container.innerHTML).toBe('')
+    }
+  )
+})

shared/common-adapters/floating-menu/index.tsx

@@ -50,9 +50,9 @@ function FloatingMenu(props: Props) {
     return unsub
   }, [navigation, onHidden])
 
-  // modal mode callers control mounting themselves; sheets present on mount so
-  // they must unmount when not visible
-  if (!visible && mode !== 'modal') {
+  // sheets present on mount, so an invisible menu must not render at all. Popup
+  // used to catch the modal case on the way past; it no longer takes visible.
+  if (!visible) {
     return null
   }
 
@@ -77,9 +77,9 @@ function FloatingMenu(props: Props) {
 
   return (
     <Popup
+      intent="menu"
       attachTo={props.attachTo}
       onHidden={onHidden}
-      visible={props.visible}
       position={props.position}
       positionFallbacks={props.positionFallbacks}
       propagateOutsideClicks={props.propagateOutsideClicks}

shared/common-adapters/floating-picker.tsx

@@ -3,7 +3,7 @@ import * as Styles from '@/styles'
 import SafeAreaView from './safe-area-view'
 import {Picker} from '@react-native-picker/picker'
 import {Box2} from './box'
-import Popup from './popup'
+import {Sheet} from './popup/sheet'
 import Text from './text'
 
 type PickerItem<T> = {
@@ -24,7 +24,7 @@ export type Props<T> = {
   visible: boolean
 }
 
-const Kb = {Box2, Picker, Popup, SafeAreaView, Text}
+const Kb = {Box2, Picker, SafeAreaView, Sheet, Text}
 
 function WrapPicker<T>(p: {
   initialValue?: T
@@ -68,10 +68,7 @@ const FloatingPicker = <T extends string | number>(props: Props<T>): React.React
   }
 
   return (
-    <Kb.Popup
-      key={isAndroid ? props.selectedValue || 0 : undefined}
-      onHidden={props.onHidden}
-    >
+    <Kb.Sheet key={isAndroid ? props.selectedValue || 0 : undefined} onHidden={props.onHidden}>
       <Kb.Box2 direction="vertical" fullWidth={true} alignItems="stretch" justifyContent="flex-end" style={styles.menu}>
         {props.header}
         <Kb.Box2
@@ -100,7 +97,7 @@ const FloatingPicker = <T extends string | number>(props: Props<T>): React.React
         />
         <Kb.SafeAreaView style={styles.safeArea} />
       </Kb.Box2>
-    </Kb.Popup>
+    </Kb.Sheet>
   )
 }
 

shared/common-adapters/index.tsx

@@ -74,6 +74,10 @@ export {default as Markdown} from './markdown'
 export {default as Meta} from './meta'
 export {default as NameWithIcon} from './name-with-icon'
 export {default as Popup, type PopupProps} from './popup/index'
+export {AnchoredPopup, type AnchoredPopupProps} from './popup/anchored'
+export {ModalCover, type ModalCoverProps} from './popup/modal-cover'
+export {Sheet, type SheetProps} from './popup/sheet'
+export {Portal} from './portal'
 export {default as PhoneInput} from './phone-input'
 export {default as Placeholder} from './placeholder'
 export {default as ProgressBar} from './progress-bar'

shared/common-adapters/popup/anchored.tsx

@@ -0,0 +1,56 @@
+import * as Styles from '@/styles'
+import {Box2} from '../box'
+import FloatingBox from './floating-box'
+import type {AnchoredPopupProps} from './index.shared'
+export type {AnchoredPopupProps} from './index.shared'
+
+export const AnchoredPopup = (props: AnchoredPopupProps) => {
+  const {attachTo, children, containerStyle, hideKeyboard, matchDimension, offset, onHidden} = props
+  const {position, positionFallbacks, propagateOutsideClicks, remeasureHint, style} = props
+  const styles = useStyles()
+
+  if (isMobile) {
+    // on mobile FloatingBox is the portal + keyboard-dismiss overlay this needs,
+    // and there is no positioner, so the anchor and placement props go unused
+    return (
+      <FloatingBox containerStyle={containerStyle} hideKeyboard={hideKeyboard}>
+        {children}
+      </FloatingBox>
+    )
+  }
+
+  return (
+    <FloatingBox
+      attachTo={attachTo}
+      containerStyle={containerStyle}
+      matchDimension={!!matchDimension}
+      onHidden={onHidden}
+      remeasureHint={remeasureHint}
+      position={position}
+      positionFallbacks={positionFallbacks}
+      propagateOutsideClicks={propagateOutsideClicks}
+      offset={offset}
+    >
+      {onHidden ? (
+        <Box2 direction="vertical" style={Styles.collapseStyles([styles.positioned, style])}>
+          {children}
+        </Box2>
+      ) : (
+        children
+      )}
+    </FloatingBox>
+  )
+}
+
+const useStyles = Styles.createStyleHook(() => ({
+  positioned: Styles.platformStyles({
+    isElectron: {
+      ...Styles.desktopStyles.boxShadow,
+      ...Styles.globalStyles.rounded,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+    },
+  }),
+}))
+
+export default AnchoredPopup