Merge pull request Expensify#50380 from Expensify/revert-41071-fix/34442

[CP Staging] Revert "Fix padding for edit composer suggestions"

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

@@ -0,0 +1,5 @@
+function getBottomSuggestionPadding(): number {
+    return 16;
+}
+
+export default getBottomSuggestionPadding;

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

@@ -1,5 +1,5 @@
 function getBottomSuggestionPadding(): number {
-    return 8;
+    return 6;
 }
 
 export default getBottomSuggestionPadding;

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

@@ -3,12 +3,13 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
 function AutoCompleteSuggestionsPortal<TSuggestion>({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps<TSuggestion>) {
     const StyleUtils = useStyleUtils();
-    const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom}), [StyleUtils, left, width, bottom]);
+    const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]);
 
     if (!width) {
         return null;

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import {View} from 'react-native';
 import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
@@ -39,7 +40,7 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
         ReactDOM.createPortal(
             <>
                 <TransparentOverlay onPress={resetSuggestions} />
-                <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>
+                <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View>
             </>,
             bodyElement,
         )

src/components/AutoCompleteSuggestions/index.tsx

@@ -7,7 +7,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal';
-import getBottomSuggestionPadding from './AutoCompleteSuggestionsPortal/getBottomSuggestionPadding';
 import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from './types';
 
 const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean): number => {
@@ -90,15 +89,15 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             return;
         }
 
-        measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates, height}: MeasureParentContainerAndCursor) => {
+        measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => {
             const xCoordinatesOfCursor = x + cursorCoordinates.x;
             const bigScreenLeftOffset =
                 xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth
                     ? windowWidth - CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH
                     : xCoordinatesOfCursor;
             const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
             const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
-            let bottomValue = windowHeight - (y - scrollValue) - keyboardHeight + getBottomSuggestionPadding();
+            let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
             const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
 
             const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMaxHeight, topInset});
@@ -124,7 +123,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             } else {
                 // calculation for big suggestion box below the cursor
                 measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
-                bottomValue = bottomValue - (measuredHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING) - height - 2 * getBottomSuggestionPadding();
+                bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight;
             }
             setSuggestionHeight(measuredHeight);
             setContainerState({

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -51,7 +51,6 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems';
 import ComposerWithSuggestions from './ComposerWithSuggestions';
 import type {ComposerRef, ComposerWithSuggestionsProps} from './ComposerWithSuggestions/ComposerWithSuggestions';
-import RNMeasureContainer from './measureContainer';
 import SendButton from './SendButton';
 
 type SuggestionsRef = {
@@ -212,7 +211,10 @@ function ReportActionCompose({
     const containerRef = useRef<View>(null);
     const measureContainer = useCallback(
         (callback: MeasureInWindowOnSuccessCallback) => {
-            RNMeasureContainer(containerRef, callback);
+            if (!containerRef.current) {
+                return;
+            }
+            containerRef.current.measureInWindow(callback);
         },
         // We added isComposerFullSize in dependencies so that when this value changes, we recalculate the position of the popup
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -47,7 +47,6 @@ import type * as OnyxTypes from '@src/types/onyx';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import getCursorPosition from './ReportActionCompose/getCursorPosition';
 import getScrollPosition from './ReportActionCompose/getScrollPosition';
-import RNMeasureContainer from './ReportActionCompose/measureContainer';
 import type {SuggestionsRef} from './ReportActionCompose/ReportActionCompose';
 import Suggestions from './ReportActionCompose/Suggestions';
 import shouldUseEmojiPickerSelection from './shouldUseEmojiPickerSelection';
@@ -403,7 +402,10 @@ function ReportActionItemMessageEdit(
     );
 
     const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => {
-        RNMeasureContainer(containerRef, callback);
+        if (!containerRef.current) {
+            return;
+        }
+        containerRef.current.measureInWindow(callback);
     }, []);
 
     const measureParentContainerAndReportCursor = useCallback(