Implement suggestion for edit composer

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

@@ -39,6 +39,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
         suggestions,
         isSuggestionPickerLarge,
         keyExtractor,
+        shouldBeDisplayedBelowParentContainer = false,
     }: AutoCompleteSuggestionsProps<TSuggestion>,
     ref: ForwardedRef<View | HTMLDivElement>,
 ) {
@@ -67,7 +68,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     );
 
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
-    const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value));
+    const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value, shouldBeDisplayedBelowParentContainer));
     const estimatedListSize = useMemo(
         () => ({
             height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length,

src/components/AutoCompleteSuggestions/index.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -18,11 +19,13 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
     const StyleUtils = useStyleUtils();
     const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
+    const suggestionContainerHeight = measureHeightOfSuggestionsContainer(props.suggestions.length, props.isSuggestionPickerLarge);
     const [{width, left, bottom}, setContainerState] = React.useState({
         width: 0,
         left: 0,
         bottom: 0,
     });
+    const [shouldBelowContainer, setShouldBelowContainer] = React.useState(false);
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
@@ -41,13 +44,19 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
         if (!measureParentContainer) {
             return;
         }
-        measureParentContainer((x, y, w) => setContainerState({left: x, bottom: windowHeight - y, width: w}));
-    }, [measureParentContainer, windowHeight, windowWidth]);
+
+        measureParentContainer((x, y, w, h) => {
+            const currenBottom = y < suggestionContainerHeight ? windowHeight - y - suggestionContainerHeight - h : windowHeight - y;
+            setShouldBelowContainer(y < suggestionContainerHeight);
+            setContainerState({left: x, bottom: currenBottom, width: w});
+        });
+    }, [measureParentContainer, windowHeight, windowWidth, suggestionContainerHeight]);
 
     const componentToRender = (
         <BaseAutoCompleteSuggestions<TSuggestion>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            shouldBeDisplayedBelowParentContainer={shouldBelowContainer}
             ref={containerRef}
         />
     );

src/components/AutoCompleteSuggestions/types.ts

@@ -1,6 +1,6 @@
 import type {ReactElement} from 'react';
 
-type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
+type MeasureParentContainerCallback = (x: number, y: number, width: number, height: number) => void;
 
 type RenderSuggestionMenuItemProps<TSuggestion> = {
     item: TSuggestion;
@@ -33,6 +33,9 @@ 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/Composer/types.ts

@@ -1,4 +1,4 @@
-import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle} from 'react-native';
+import type {LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle} from 'react-native';
 
 type TextSelection = {
     start: number;
@@ -80,6 +80,8 @@ type ComposerProps = {
 
     onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
+    onLayout?: (event: LayoutChangeEvent) => void;
+
     /** Should make the input only scroll inside the element avoid scroll out to parent */
     shouldContainScroll?: boolean;
 };

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) => void;
+type MeasureParentContainerCallback = (x: number, y: number, width: number, height: number) => void;
 
 type EmojiSuggestionsProps = {
     /** The index of the highlighted emoji */

src/libs/SuggestionUtils.ts

@@ -20,4 +20,24 @@ function hasEnoughSpaceForLargeSuggestionMenu(listHeight: number, composerHeight
     return availableHeight > menuHeight;
 }
 
-export {trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu};
+const measureHeightOfSuggestionsContainer = (numRows: number, isSuggestionsPickerLarge: boolean): number => {
+    const borderAndPadding = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_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};

src/libs/actions/SuggestionsActions.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type {NativeSyntheticEvent, TextInputKeyPressEventData, TextInputSelectionChangeEventData} from 'react-native';
+
+type SuggestionsRef = {
+    getSuggestions: () => void;
+    resetSuggestions: () => void;
+    triggerHotkeyActions: (event: NativeSyntheticEvent<TextInputKeyPressEventData> | KeyboardEvent) => boolean;
+    onSelectionChange: (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+    updateShouldShowSuggestionMenuToFalse: () => void;
+    setShouldBlockSuggestionCalc: () => void;
+};
+
+const suggestionsRef = React.createRef<SuggestionsRef>();
+
+function resetSuggestions() {
+    if (!suggestionsRef.current) {
+        return;
+    }
+
+    suggestionsRef.current.resetSuggestions();
+}
+
+function triggerHotkeyActions(event: NativeSyntheticEvent<TextInputKeyPressEventData> | KeyboardEvent): boolean {
+    if (!suggestionsRef.current) {
+        return false;
+    }
+
+    return suggestionsRef.current.triggerHotkeyActions(event);
+}
+
+function updateShouldShowSuggestionMenuToFalse() {
+    if (!suggestionsRef.current) {
+        return;
+    }
+
+    suggestionsRef.current.updateShouldShowSuggestionMenuToFalse();
+}
+
+function onSelectionChange(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) {
+    if (!suggestionsRef.current) {
+        return;
+    }
+
+    suggestionsRef.current.onSelectionChange(event);
+}
+
+export {suggestionsRef, resetSuggestions, triggerHotkeyActions, onSelectionChange, updateShouldShowSuggestionMenuToFalse};
+
+// eslint-disable-next-line import/prefer-default-export
+export type {SuggestionsRef};

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

@@ -0,0 +1,94 @@
+import type {Dispatch, ForwardedRef, RefObject, SetStateAction} from 'react';
+import React, {useState} from 'react';
+import type {TextInput} from 'react-native';
+import Composer from '@components/Composer';
+import type {ComposerProps} from '@components/Composer/types';
+import type {SuggestionsRef} from '@libs/actions/SuggestionsActions';
+import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
+
+type ComposerWithSuggestionsEditProps = {
+    setValue: Dispatch<SetStateAction<string>>;
+    setSelection: Dispatch<
+        SetStateAction<{
+            start: number;
+            end: number;
+        }>
+    >;
+    resetKeyboardInput: () => void;
+    isComposerFocused: boolean;
+    suggestionsRef: RefObject<SuggestionsRef>;
+    updateDraft: (newValue: string) => void;
+    measureParentContainer: (callback: () => void) => void;
+};
+
+function ComposerWithSuggestionsEdit(
+    {
+        value,
+        maxLines = -1,
+        onKeyPress = () => {},
+        style,
+        onSelectionChange = () => {},
+        selection = {
+            start: 0,
+            end: 0,
+        },
+        onBlur = () => {},
+        onFocus = () => {},
+        onChangeText = () => {},
+        setValue = () => {},
+        setSelection = () => {},
+        resetKeyboardInput = () => {},
+        isComposerFocused,
+        suggestionsRef,
+        updateDraft,
+        measureParentContainer,
+        id = undefined,
+    }: ComposerWithSuggestionsEditProps & ComposerProps,
+    ref: ForwardedRef<TextInput>,
+) {
+    const [composerHeight, setComposerHeight] = useState(0);
+
+    return (
+        <>
+            <Composer
+                multiline
+                ref={ref}
+                id={id}
+                onChangeText={onChangeText} // Debounced saveDraftComment
+                onKeyPress={onKeyPress}
+                value={value}
+                maxLines={maxLines} // This is the same that slack has
+                style={style}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                selection={selection}
+                onSelectionChange={onSelectionChange}
+                onLayout={(e) => {
+                    const composerLayoutHeight = e.nativeEvent.layout.height;
+                    if (composerHeight === composerLayoutHeight) {
+                        return;
+                    }
+                    setComposerHeight(composerLayoutHeight);
+                }}
+            />
+
+            <Suggestions
+                ref={suggestionsRef}
+                // @ts-expect-error TODO: Remove this once Suggestions is migrated to TypeScript.
+                isComposerFullSize={false}
+                isComposerFocused={isComposerFocused}
+                updateComment={updateDraft}
+                composerHeight={composerHeight}
+                measureParentContainer={measureParentContainer}
+                isAutoSuggestionPickerLarge
+                value={value}
+                setValue={setValue}
+                selection={selection}
+                setSelection={setSelection}
+                resetKeyboardInput={resetKeyboardInput}
+            />
+        </>
+    );
+}
+
+export default React.forwardRef(ComposerWithSuggestionsEdit);