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

@@ -552,7 +552,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

@@ -470,20 +470,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

@@ -11,7 +11,7 @@ import {useConversationThreadID, useConversationThreadMessage, useConversationTh
 const positionFallbacks = ['bottom center', 'left center'] as const
 
 type OwnProps = {
-  attachmentRef?: React.RefObject<Kb.MeasureRef | null>
+  attachmentRef: React.RefObject<Kb.MeasureRef | null>
   emoji?: string
   onHidden: () => void
   onMouseLeave?: (syntheticEvent: React.SyntheticEvent) => void
@@ -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,31 @@
+/** @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()
+  })
+
+  test.each([undefined, 'bottomsheet'] 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('')
+    }
+  )
+
+  // modal callers mount the menu themselves, so visible doesn't gate it
+  test('renders when hidden in modal mode', () => {
+    const {container} = render(
+      <FloatingMenu closeOnSelect={true} items={items} mode="modal" onHidden={() => {}} visible={false} />
+    )
+    expect(container.innerHTML).not.toBe('')
+  })
+})

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

@@ -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,54 @@
+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',
+    },
+  }),
+}))

shared/common-adapters/popup/floating-box/index.native.tsx

@@ -7,13 +7,11 @@ import {Portal} from '../../portal'
 
 const NativeFloatingBox = (p: Props) => {
   const {hideKeyboard, children, containerStyle} = p
-  const [lastHK, setLastHK] = React.useState(hideKeyboard)
-  if (lastHK !== hideKeyboard) {
-    setLastHK(hideKeyboard)
+  React.useEffect(() => {
     if (hideKeyboard) {
       Keyboard.dismiss()
     }
-  }
+  }, [hideKeyboard])
 
   return (
     <Portal hostName="popup-root">