Merge pull request #40865 from Expensify/revert-35226-fix/34442

[CP Staging] Revert "Implement suggestion for edit composer"

(cherry picked from commit 95aa19a)

src/App.tsx

@@ -33,7 +33,6 @@ import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
-import {SuggestionsContextProvider} from './pages/home/report/ReportActionCompose/ComposerWithSuggestionsEdit/SuggestionsContext';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 import type {Route} from './ROUTES';
 
@@ -80,7 +79,6 @@ function App({url}: AppProps) {
                         ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
                         PlaybackContextProvider,
-                        SuggestionsContextProvider,
                         FullScreenContextProvider,
                         VolumeContextProvider,
                         VideoPopoverMenuContextProvider,

src/CONST.ts

@@ -72,7 +72,6 @@ type OnboardingPurposeType = ValueOf<typeof onboardingChoices>;
 const CONST = {
     MERGED_ACCOUNT_PREFIX: 'MERGED_',
     DEFAULT_POLICY_ROOM_CHAT_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL],
-    DEFAULT_COMPOSER_PORTAL_HOST_NAME: 'suggestions_0',
 
     // Note: Group and Self-DM excluded as these are not tied to a Workspace
     WORKSPACE_ROOM_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL, chatTypes.POLICY_ROOM, chatTypes.POLICY_EXPENSE_CHAT],
@@ -1172,7 +1171,6 @@ const CONST = {
     EMOJI_PICKER_HEADER_HEIGHT: 32,
     RECIPIENT_LOCAL_TIME_HEIGHT: 25,
     AUTO_COMPLETE_SUGGESTER: {
-        EDIT_SUGGESTER_PADDING: 8,
         SUGGESTER_PADDING: 6,
         SUGGESTER_INNER_PADDING: 8,
         SUGGESTION_ROW_HEIGHT: 40,

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

@@ -10,7 +10,6 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import {useSuggestionsContext} from '@pages/home/report/ReportActionCompose/ComposerWithSuggestionsEdit/SuggestionsContext';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
@@ -40,7 +39,6 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
         suggestions,
         isSuggestionPickerLarge,
         keyExtractor,
-        shouldBeDisplayedBelowParentContainer = false,
     }: AutoCompleteSuggestionsProps<TSuggestion>,
     ref: ForwardedRef<View | HTMLDivElement>,
 ) {
@@ -49,7 +47,6 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     const StyleUtils = useStyleUtils();
     const rowHeight = useSharedValue(0);
     const scrollRef = useRef<FlashList<TSuggestion>>(null);
-    const {activeID} = useSuggestionsContext();
     /**
      * Render a suggestion menu item component.
      */
@@ -71,7 +68,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     );
 
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
-    const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value, shouldBeDisplayedBelowParentContainer, Boolean(activeID)));
+    const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value));
     const estimatedListSize = useMemo(
         () => ({
             height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length,

src/components/AutoCompleteSuggestions/index.native.tsx

@@ -1,14 +1,11 @@
 import {Portal} from '@gorhom/portal';
 import React from 'react';
-import {useSuggestionsContext} from '@pages/home/report/ReportActionCompose/ComposerWithSuggestionsEdit/SuggestionsContext';
-import CONST from '@src/CONST';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import type {AutoCompleteSuggestionsProps} from './types';
 
 function AutoCompleteSuggestions<TSuggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
-    const {activeID} = useSuggestionsContext();
     return (
-        <Portal hostName={activeID ? `suggestions_${activeID}` : CONST.DEFAULT_COMPOSER_PORTAL_HOST_NAME}>
+        <Portal hostName="suggestions">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
             <BaseAutoCompleteSuggestions<TSuggestion> {...props} />
         </Portal>

src/components/AutoCompleteSuggestions/index.tsx

@@ -4,7 +4,6 @@ import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import {measureHeightOfSuggestionsContainer} from '@libs/SuggestionUtils';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import type {AutoCompleteSuggestionsProps} from './types';
 
@@ -19,13 +18,11 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
     const StyleUtils = useStyleUtils();
     const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
-    const suggestionsContainerHeight = measureHeightOfSuggestionsContainer(props.suggestions.length, props.isSuggestionPickerLarge);
     const [{width, left, bottom}, setContainerState] = React.useState({
         width: 0,
         left: 0,
         bottom: 0,
     });
-    const [shouldShowBelowContainer, setShouldShowBelowContainer] = React.useState(false);
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
@@ -44,19 +41,13 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
         if (!measureParentContainer) {
             return;
         }
-
-        measureParentContainer((x, y, w, h) => {
-            const currentBottom = y < suggestionsContainerHeight ? windowHeight - y - suggestionsContainerHeight - h : windowHeight - y;
-            setShouldShowBelowContainer(y < suggestionsContainerHeight);
-            setContainerState({left: x, bottom: currentBottom, width: w});
-        });
-    }, [measureParentContainer, windowHeight, windowWidth, suggestionsContainerHeight]);
+        measureParentContainer((x, y, w) => setContainerState({left: x, bottom: windowHeight - y, width: w}));
+    }, [measureParentContainer, windowHeight, windowWidth]);
 
     const componentToRender = (
         <BaseAutoCompleteSuggestions<TSuggestion>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            shouldBeDisplayedBelowParentContainer={shouldShowBelowContainer}
             ref={containerRef}
         />
     );

src/components/AutoCompleteSuggestions/types.ts

@@ -1,6 +1,6 @@
 import type {ReactElement} from 'react';
 
-type MeasureParentContainerCallback = (x: number, y: number, width: number, height: number) => void;
+type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
 
 type RenderSuggestionMenuItemProps<TSuggestion> = {
     item: TSuggestion;
@@ -33,9 +33,6 @@ type AutoCompleteSuggestionsProps<TSuggestion> = {
 
     /** Meaures the parent container's position and dimensions. */
     measureParentContainer?: (callback: MeasureParentContainerCallback) => void;
-
-    /** Whether suggestion should be displayed below the parent container or not */
-    shouldBeDisplayedBelowParentContainer?: boolean;
 };
 
 export type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps};

src/components/EmojiSuggestions.tsx

@@ -9,7 +9,7 @@ import getStyledTextArray from '@libs/GetStyledTextArray';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
 
-type MeasureParentContainerCallback = (x: number, y: number, width: number, height: number) => void;
+type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
 
 type EmojiSuggestionsProps = {
     /** The index of the highlighted emoji */

src/libs/SuggestionUtils.ts

@@ -20,25 +20,4 @@ function hasEnoughSpaceForLargeSuggestionMenu(listHeight: number, composerHeight
     return availableHeight > menuHeight;
 }
 
-const measureHeightOfSuggestionsContainer = (numRows: number, isSuggestionsPickerLarge: boolean): number => {
-    // Autocomplete suggestions has inner padding 8px and border-width 1px
-    const borderAndPadding = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING + 2;
-    let suggestionsHeight = 0;
-
-    if (isSuggestionsPickerLarge) {
-        if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) {
-            // On large screens, if there are more than 5 suggestions, we display a scrollable window with a height of 5 items, indicating that there are more items available
-            suggestionsHeight = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
-        } else {
-            suggestionsHeight = numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
-        }
-    } else if (numRows > 2) {
-        // On small screens, we display a scrollable window with a height of 2.5 items, indicating that there are more items available beyond what is currently visible
-        suggestionsHeight = CONST.AUTO_COMPLETE_SUGGESTER.SMALL_CONTAINER_HEIGHT_FACTOR * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
-    } else {
-        suggestionsHeight = numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
-    }
-    return suggestionsHeight + borderAndPadding;
-};
-
-export {trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu, measureHeightOfSuggestionsContainer};
+export {trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu};

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

@@ -61,7 +61,6 @@ type SuggestionsRef = {
     updateShouldShowSuggestionMenuToFalse: (shouldShowSuggestionMenu?: boolean) => void;
     setShouldBlockSuggestionCalc: (shouldBlock: boolean) => void;
     getSuggestions: () => Mention[] | Emoji[];
-    updateShouldShowSuggestionMenuAfterScrolling: () => void;
 };
 
 type ReportActionComposeOnyxProps = {
@@ -379,7 +378,7 @@ function ReportActionCompose({
                 {shouldShowReportRecipientLocalTime && hasReportRecipient && <ParticipantLocalTime participant={reportRecipient} />}
             </OfflineWithFeedback>
             <View style={isComposerFullSize ? styles.flex1 : {}}>
-                <PortalHost name={CONST.DEFAULT_COMPOSER_PORTAL_HOST_NAME} />
+                <PortalHost name="suggestions" />
                 <OfflineWithFeedback
                     pendingAction={pendingAction}
                     style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}

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

@@ -118,10 +118,6 @@ function SuggestionEmoji(
         });
     }, []);
 
-    const updateShouldShowSuggestionMenuAfterScrolling = useCallback(() => {
-        setSuggestionValues((prevState) => ({...prevState, shouldShowSuggestionMenu: !!prevState.suggestedEmojis.length}));
-    }, []);
-
     /**
      * Listens for keyboard shortcuts and applies the action
      */
@@ -219,17 +215,8 @@ function SuggestionEmoji(
             setShouldBlockSuggestionCalc,
             updateShouldShowSuggestionMenuToFalse,
             getSuggestions,
-            updateShouldShowSuggestionMenuAfterScrolling,
         }),
-        [
-            onSelectionChange,
-            resetSuggestions,
-            setShouldBlockSuggestionCalc,
-            triggerHotkeyActions,
-            updateShouldShowSuggestionMenuToFalse,
-            getSuggestions,
-            updateShouldShowSuggestionMenuAfterScrolling,
-        ],
+        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
     if (!isEmojiSuggestionsMenuVisible) {