Add mentions and emojis suggestions to Home prompt box; fix RHP suggestions

config/eslint/eslint.seatbelt.tsv

@@ -902,6 +902,7 @@
 "../../src/pages/EnablePayments/shared/IdologyQuestions.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/pages/EnablePayments/Wallet/PersonalInfo/substeps/DateOfBirthStep.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	3
 "../../src/pages/EnablePayments/Wallet/utils/getSubstepValues.ts"	"@typescript-eslint/no-unsafe-type-assertion"	2
+"../../src/pages/home/ForYouSection/ConciergePromptBox.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/pages/home/GettingStartedSection/hooks/useGettingStartedItems.ts"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/pages/home/GettingStartedSection/hooks/useGettingStartedItems.ts"	"no-restricted-imports"	1
 "../../src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx

@@ -9,18 +9,21 @@ import CONST from '@src/CONST';
 import htmlDivElementRef from '@src/types/utils/htmlDivElementRef';
 import viewRef from '@src/types/utils/viewRef';
 
-import type {PointerEvent} from 'react-native';
+import type {PointerEvent, StyleProp, ViewStyle} from 'react-native';
 
 import React, {useCallback, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 
 type TransparentOverlayProps = {
     onPress: () => void;
+
+    /** Additional styles for the overlay */
+    style?: StyleProp<ViewStyle>;
 };
 
 type OnPressHandler = PressableProps['onPress'];
 
-function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
+function TransparentOverlay({onPress: onPressProp, style}: TransparentOverlayProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const dropZone = useRef<HTMLDivElement | View>(null);
@@ -54,7 +57,7 @@ function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
     return (
         <View
             onPointerDown={handlePointerDown}
-            style={[styles.fullScreen, isDraggingOver && styles.dNone]}
+            style={[styles.fullScreen, isDraggingOver && styles.dNone, style]}
             ref={viewRef(dropZone)}
         >
             <PressableWithoutFeedback

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.native.ts

@@ -0,0 +1,5 @@
+function getBottomSuggestionPadding(isMenuAbove: boolean): number {
+    return isMenuAbove ? 30 : 0;
+}
+
+export default getBottomSuggestionPadding;

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function getBottomSuggestionPadding(bottom?: number, isInLandscapeMode?: boolean): number {
+function getBottomSuggestionPadding(isMenuAbove: boolean): number {
     return 6;
 }
 

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx

@@ -1,41 +1,75 @@
 import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions';
 
+import useKeyboardState from '@hooks/useKeyboardState';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useWindowDimensionsForAutoCompleteSuggestions from '@hooks/useWindowDimensionsForAutoCompleteSuggestions';
+
+import variables from '@styles/variables';
 
 import {Portal} from '@gorhom/portal';
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
+import React, {useEffect, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
 
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
 import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 
+const zIndexStyle = {zIndex: variables.autoCompleteSuggestionsZIndex};
+
 function AutoCompleteSuggestionsPortal<TSuggestion>({
     left = 0,
     width = 0,
     bottom = 0,
     resetSuggestions = () => {},
-    isInLandscapeMode = false,
+    isMenuAbove = false,
     ...props
 }: AutoCompleteSuggestionsPortalProps<TSuggestion>) {
     const StyleUtils = useStyleUtils();
-    const bottomPadding = getBottomSuggestionPadding(bottom, isInLandscapeMode);
-    const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + bottomPadding}), [StyleUtils, left, width, bottom, bottomPadding]);
+    const {height: windowHeight} = useWindowDimensionsForAutoCompleteSuggestions();
+    const {keyboardHeight} = useKeyboardState();
+    const hostFrameRef = useRef<View>(null);
+
+    const [hostBottomInset, setHostBottomInset] = useState<number | null>(null);
+
+    const measureHostFrame = () => {
+        hostFrameRef.current?.measureInWindow((x, y, frameWidth, height) => setHostBottomInset(windowHeight - y - height));
+    };
+
+    useEffect(measureHostFrame, [windowHeight, keyboardHeight]);
 
     if (!width) {
         return null;
     }
 
     return (
         <Portal hostName="suggestions">
-            <TransparentOverlay onPress={resetSuggestions} />
-            <View style={styles}>
-                <BaseAutoCompleteSuggestions<TSuggestion>
-                    width={width}
-                    {...props}
-                />
-            </View>
+            {/* Zero-cost probe filling the portal host, so the host's position in the window is known before positioning the suggestions. */}
+            <View
+                ref={hostFrameRef}
+                pointerEvents="none"
+                style={StyleSheet.absoluteFill}
+                onLayout={measureHostFrame}
+            />
+            {hostBottomInset !== null && (
+                <>
+                    <TransparentOverlay
+                        onPress={resetSuggestions}
+                        style={zIndexStyle}
+                    />
+                    <View
+                        style={[
+                            StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - hostBottomInset + getBottomSuggestionPadding(isMenuAbove)}),
+                            zIndexStyle,
+                        ]}
+                    >
+                        <BaseAutoCompleteSuggestions<TSuggestion>
+                            width={width}
+                            {...props}
+                        />
+                    </View>
+                </>
+            )}
         </Portal>
     );
 }

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

@@ -2,6 +2,8 @@ import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/Bas
 
 import useStyleUtils from '@hooks/useStyleUtils';
 
+import variables from '@styles/variables';
+
 import type {ReactElement} from 'react';
 
 import React from 'react';
@@ -13,6 +15,8 @@ import type {AutoCompleteSuggestionsPortalProps} from './types';
 import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 
+const zIndexStyle = {zIndex: variables.autoCompleteSuggestionsZIndex};
+
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
  * we need to prevent focus shifting to avoid blurring the main input (which makes the suggestions picker close and fires the onSelect callback).
@@ -25,9 +29,7 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
     width = 0,
     bottom = 0,
     resetSuggestions = () => {},
-    // isInLandscapeMode is only used on native platforms to adjust the bottom padding
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isInLandscapeMode = false,
+    isMenuAbove = false,
     ...props
 }: AutoCompleteSuggestionsPortalProps<TSuggestion>): ReactElement | null | false {
     const StyleUtils = useStyleUtils();
@@ -46,8 +48,13 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
         bodyElement &&
         ReactDOM.createPortal(
             <>
-                <TransparentOverlay onPress={resetSuggestions} />
-                <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View>
+                <TransparentOverlay
+                    onPress={resetSuggestions}
+                    style={zIndexStyle}
+                />
+                <View style={[StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding(isMenuAbove)}), zIndexStyle]}>
+                    {componentToRender}
+                </View>
             </>,
             bodyElement,
         )

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/types.ts

@@ -7,7 +7,9 @@ type AutoCompleteSuggestionsPortalProps<TSuggestion> = ExternalProps<TSuggestion
     width: number;
     bottom: number;
     measuredHeightOfSuggestionRows: number;
-    isInLandscapeMode?: boolean;
+
+    /** Whether the menu is rendered above the caret, which decides the gap kept between the menu and the caret */
+    isMenuAbove?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/components/AutoCompleteSuggestions/getSuggestionsViewportBottom/index.native.ts

@@ -0,0 +1,10 @@
+/**
+ * There is no DOM to measure on native, and the portal re-bases the menu's `bottom` onto its host's frame, which
+ * already sits above the keyboard, so the window height is used as-is.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function getSuggestionsViewportBottom(windowHeight: number, keyboardHeight: number): number {
+    return windowHeight;
+}
+
+export default getSuggestionsViewportBottom;

src/components/AutoCompleteSuggestions/getSuggestionsViewportBottom/index.ts

@@ -0,0 +1,10 @@
+/**
+ * The menu's `bottom` counts up from the bottom edge of the `html` box, so it has to be measured with the same
+ * `getBoundingClientRect` the caret position comes from - a window height is not interchangeable, because iOS
+ * scrolls the page to reveal the keyboard. The box is then raised by the keyboard so the menu is not covered by it.
+ */
+function getSuggestionsViewportBottom(windowHeight: number, keyboardHeight: number): number {
+    return (document.documentElement?.getBoundingClientRect().bottom ?? windowHeight) - keyboardHeight;
+}
+
+export default getSuggestionsViewportBottom;

src/components/AutoCompleteSuggestions/index.tsx

@@ -14,6 +14,7 @@ import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from
 
 import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal';
 import getLeftOffset from './getSuggestionsLeftOffset';
+import getSuggestionsViewportBottom from './getSuggestionsViewportBottom';
 
 const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean, isInLandscapeMode: boolean): number => {
     if (isInLandscapeMode) {
@@ -53,6 +54,7 @@ const initialContainerState = {
     width: 0,
     left: 0,
     bottom: 0,
+    isMenuAbove: false,
     cursorCoordinates: {x: 0, y: 0},
 };
 
@@ -112,7 +114,9 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
                     : xCoordinatesOfCursor;
             const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
             const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false, isInLandscapeMode);
-            let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
+            // Read in the same tick as the composer measurement above, so both describe the same layout state.
+            const viewportBottom = getSuggestionsViewportBottom(windowHeight, keyboardHeight);
+            let bottomValue = viewportBottom - (cursorCoordinates.y - scrollValue + y);
             const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
 
             const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({
@@ -137,15 +141,18 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             const newLeftOffset = getLeftOffset(x, insets, bigScreenLeftOffset, shouldUseNarrowLayout, width, windowWidth, isInLandscapeMode);
             // If the suggested word is longer than 150 (approximately half the width of the suggestion popup), then adjust a new position of popup
             const isAdjustmentNeeded = Math.abs(prevLeftValue.current - bigScreenLeftOffset) > 150;
-            if (isInitialRender.current || isAdjustmentNeeded || prevIsInLandscapeModeValue.current !== isInLandscapeMode) {
-                isSuggestionMenuAboveRef.current = isSuggestionMenuRenderedAbove(isEnoughSpaceToRenderMenuAboveForBig, isEnoughSpaceToRenderMenuAboveForSmall);
+            const shouldRenderMenuAbove = isSuggestionMenuRenderedAbove(isEnoughSpaceToRenderMenuAboveForBig, isEnoughSpaceToRenderMenuAboveForSmall);
+            const hasRunOutOfSpaceAbove = isSuggestionMenuAboveRef.current && !shouldRenderMenuAbove;
+            if (isInitialRender.current || isAdjustmentNeeded || prevIsInLandscapeModeValue.current !== isInLandscapeMode || hasRunOutOfSpaceAbove) {
+                isSuggestionMenuAboveRef.current = shouldRenderMenuAbove;
                 leftValue.current = newLeftOffset;
                 isInitialRender.current = false;
                 prevLeftValue.current = newLeftOffset;
                 prevIsInLandscapeModeValue.current = isInLandscapeMode;
             }
 
             let measuredHeight = 0;
+            const isMenuAbove = isSuggestionMenuAboveRef.current && (isEnoughSpaceToRenderMenuAboveForBig || isEnoughSpaceToRenderMenuAboveForSmall);
             if (isSuggestionMenuAboveRef.current && isEnoughSpaceToRenderMenuAboveForBig) {
                 // calculation for big suggestion box above the cursor
                 measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
@@ -155,14 +162,15 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             } else {
                 // calculation for big suggestion box below the cursor
                 measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
-                bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight;
+                bottomValue = viewportBottom - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
             }
 
             setSuggestionHeight(measuredHeight);
             setContainerState({
                 left: leftValue.current,
                 bottom: bottomValue,
                 width: widthValue,
+                isMenuAbove,
                 cursorCoordinates,
             });
         });
@@ -192,7 +200,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             width={containerState.width}
             bottom={containerState.bottom}
             measuredHeightOfSuggestionRows={suggestionHeight}
-            isInLandscapeMode={isInLandscapeMode}
+            isMenuAbove={containerState.isMenuAbove}
         />
     );
 }