hide popup on click user/team lookup (#28461)

* hide popup on click

* watch nav events and close modals on mobile

* handle more admins

Author: chrisnojima

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

@@ -1,9 +1,3 @@
-// For stories, all popups using FloatingMenu will need to have a PropProvider
-// decorator added to the story. This is because FloatingMenus are rendered
-// into a GatewayDest component in a storybook context. GatewayDest is only
-// rendered if a PropProvider decorated is used. This is done so that connected
-// components inside of a popup have access to the mocked out Provider component
-
 import * as React from 'react'
 import Overlay from '../overlay'
 import {Box2} from '@/common-adapters/box'
@@ -21,6 +15,7 @@ import {
 import {useSafeAreaInsets} from '@/common-adapters/safe-area-view'
 import {FloatingModalContext} from './context'
 import {FullWindowOverlay} from 'react-native-screens'
+import {useNavigation} from '@react-navigation/native'
 
 const Kb = {
   Box2,
@@ -67,12 +62,22 @@ const FullWindow = ({children}: {children?: React.ReactNode}): React.ReactNode =
 const defaultSnapPoints = ['75%']
 
 const FloatingMenu = React.memo(function FloatingMenu(props: Props) {
-  const {snapPoints, items, visible} = props
+  const {snapPoints, items, visible, onHidden} = props
   const isModal = React.useContext(FloatingModalContext)
   const shownRef = React.useRef(false)
 
   const bottomRef = React.useRef<BottomSheetModal | null>(null)
 
+  const navigation = useNavigation()
+
+  React.useEffect(() => {
+    const unsub = navigation.addListener('state', () => {
+      bottomRef.current?.forceClose()
+      onHidden()
+    })
+    return unsub
+  }, [bottomRef, navigation, onHidden])
+
   React.useEffect(() => {
     return () => {
       bottomRef.current?.forceClose()
@@ -138,7 +143,7 @@ const FloatingMenu = React.memo(function FloatingMenu(props: Props) {
     <Kb.Overlay
       position={props.position}
       positionFallbacks={props.positionFallbacks}
-      onHidden={props.onHidden}
+      onHidden={onHidden}
       visible={props.visible}
       attachTo={props.attachTo}
       remeasureHint={props.remeasureHint}

shared/common-adapters/markdown/maybe-mention/unknown.tsx

@@ -50,11 +50,17 @@ type Props = {
 }
 
 const UnknownMention = (props: Props) => {
+  const {onResolve: _onResolve} = props
   const [showPopup, setShowPopup] = React.useState(false)
   const mentionRef = React.useRef<MeasureRef | null>(null)
 
-  const handleMouseOver = () => setShowPopup(true)
-  const handleMouseLeave = () => setShowPopup(false)
+  const handleMouseOver = React.useCallback(() => setShowPopup(true), [])
+  const handleMouseLeave = React.useCallback(() => setShowPopup(false), [])
+
+  const onResolve = React.useCallback(() => {
+    _onResolve()
+    handleMouseLeave()
+  }, [_onResolve, handleMouseLeave])
 
   let text = `@${props.name}`
   if (props.channel.length > 0) {
@@ -78,7 +84,7 @@ const UnknownMention = (props: Props) => {
     <UnknownMentionPopup
       attachTo={mentionRef}
       onHidden={handleMouseLeave}
-      onResolve={props.onResolve}
+      onResolve={onResolve}
       text={text}
       visible={showPopup}
     />

shared/profile/user/teams/teaminfo.tsx

@@ -125,6 +125,7 @@ const TeamInfo = (props: Props) => {
                   onUsernameClicked="profile"
                   usernames={props.publicAdmins}
                   containerStyle={styles.publicAdmins}
+                  lineClamp={5}
                 />
               }
             </Kb.Text>