From 4835faf35a477f768e58070ce15a8a652a305ce7 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 8 Nov 2023 16:17:55 +0100
Subject: [PATCH 01/11] [TS migration] Migrate 'AutoCompleteSuggestions'
 component

---
 ...ons.js => BaseAutoCompleteSuggestions.tsx} | 79 ++++++++-----------
 .../autoCompleteSuggestionsPropTypes.js       | 36 ---------
 .../{index.native.js => index.native.tsx}     |  5 +-
 .../{index.js => index.tsx}                   | 14 ++--
 .../AutoCompleteSuggestions/types.ts          | 55 +++++++++++++
 5 files changed, 99 insertions(+), 90 deletions(-)
 rename src/components/AutoCompleteSuggestions/{BaseAutoCompleteSuggestions.js => BaseAutoCompleteSuggestions.tsx} (64%)
 delete mode 100644 src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js
 rename src/components/AutoCompleteSuggestions/{index.native.js => index.native.tsx} (81%)
 rename src/components/AutoCompleteSuggestions/{index.js => index.tsx} (79%)
 create mode 100644 src/components/AutoCompleteSuggestions/types.ts

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
similarity index 64%
rename from src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
rename to src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index c024b025c80e..097a495eb212 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -1,4 +1,5 @@
-import React, {useEffect, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactElement, useEffect, useRef} from 'react';
+import {FlatListProps} from 'react-native';
 // We take FlatList from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {FlatList} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -6,14 +7,16 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
+import type {AutoCompleteSuggestionsProps, Suggestion} from './types';
 
-/**
- * @param {Number} numRows
- * @param {Boolean} isSuggestionPickerLarge
- * @returns {Number}
- */
-const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
+type RenderSuggestionMenuItemProps = {
+    item: Suggestion;
+    index: number;
+};
+
+type GetItemLayout = FlatListProps<Suggestion>['getItemLayout'];
+
+const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
         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
@@ -28,26 +31,25 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
 };
 
-function BaseAutoCompleteSuggestions(props) {
+function BaseAutoCompleteSuggestions(
+    {highlightedSuggestionIndex, onSelect, accessibilityLabelExtractor, renderSuggestionMenuItem, suggestions, isSuggestionPickerLarge, keyExtractor}: AutoCompleteSuggestionsProps,
+    ref: ForwardedRef<Animated.View | HTMLDivElement>,
+) {
     const rowHeight = useSharedValue(0);
-    const scrollRef = useRef(null);
+    const scrollRef = useRef<FlatList>(null);
     /**
      * Render a suggestion menu item component.
-     * @param {Object} params
-     * @param {Object} params.item
-     * @param {Number} params.index
-     * @returns {JSX.Element}
      */
-    const renderSuggestionMenuItem = ({item, index}) => (
+    const renderItem = ({item, index}: RenderSuggestionMenuItemProps): ReactElement => (
         <PressableWithFeedback
-            style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(props.highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
+            style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
             hoverDimmingValue={1}
             onMouseDown={(e) => e.preventDefault()}
-            onPress={() => props.onSelect(index)}
+            onPress={() => onSelect(index)}
             onLongPress={() => {}}
-            accessibilityLabel={props.accessibilityLabelExtractor(item, index)}
+            accessibilityLabel={accessibilityLabelExtractor(item, index)}
         >
-            {props.renderSuggestionMenuItem(item, index)}
+            {renderSuggestionMenuItem(item, index)}
         </PressableWithFeedback>
     );
 
@@ -58,46 +60,44 @@ function BaseAutoCompleteSuggestions(props) {
      *
      * Also, `scrollToIndex` should be used in conjunction with `getItemLayout`, otherwise there is no way to know the location of offscreen indices or handle failures.
      *
-     * @param {Array} data - This is the same as the data we pass into the component
-     * @param {Number} index the current item's index in the set of data
-     *
-     * @returns {Object}
+     * @param data - This is the same as the data we pass into the component
+     * @param index the current item's index in the set of data
      */
-    const getItemLayout = (data, index) => ({
+    const getItemLayout: GetItemLayout = (data, index) => ({
         length: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         offset: index * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         index,
     });
 
-    const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * props.suggestions.length;
+    const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
     const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value));
 
     useEffect(() => {
-        rowHeight.value = withTiming(measureHeightOfSuggestionRows(props.suggestions.length, props.isSuggestionPickerLarge), {
+        rowHeight.value = withTiming(measureHeightOfSuggestionRows(suggestions.length, isSuggestionPickerLarge), {
             duration: 100,
             easing: Easing.inOut(Easing.ease),
         });
-    }, [props.suggestions.length, props.isSuggestionPickerLarge, rowHeight]);
+    }, [suggestions.length, isSuggestionPickerLarge, rowHeight]);
 
     useEffect(() => {
         if (!scrollRef.current) {
             return;
         }
-        scrollRef.current.scrollToIndex({index: props.highlightedSuggestionIndex, animated: true});
-    }, [props.highlightedSuggestionIndex]);
+        scrollRef.current.scrollToIndex({index: highlightedSuggestionIndex, animated: true});
+    }, [highlightedSuggestionIndex]);
 
     return (
         <Animated.View
-            ref={props.forwardedRef}
+            ref={ref as ForwardedRef<Animated.View>}
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
             <FlatList
                 ref={scrollRef}
                 keyboardShouldPersistTaps="handled"
-                data={props.suggestions}
-                renderItem={renderSuggestionMenuItem}
-                keyExtractor={props.keyExtractor}
+                data={suggestions}
+                renderItem={renderItem}
+                keyExtractor={keyExtractor}
                 removeClippedSubviews={false}
                 showsVerticalScrollIndicator={innerHeight > rowHeight.value}
                 style={{flex: 1}}
@@ -107,17 +107,6 @@ function BaseAutoCompleteSuggestions(props) {
     );
 }
 
-BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
-const BaseAutoCompleteSuggestionsWithRef = React.forwardRef((props, ref) => (
-    <BaseAutoCompleteSuggestions
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-BaseAutoCompleteSuggestionsWithRef.displayName = 'BaseAutoCompleteSuggestionsWithRef';
-
-export default BaseAutoCompleteSuggestionsWithRef;
+export default forwardRef(BaseAutoCompleteSuggestions);
diff --git a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js b/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js
deleted file mode 100644
index 8c6dca1902c5..000000000000
--- a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-
-const propTypes = {
-    /** Array of suggestions */
-    // eslint-disable-next-line react/forbid-prop-types
-    suggestions: PropTypes.arrayOf(PropTypes.object).isRequired,
-
-    /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
-    renderSuggestionMenuItem: PropTypes.func.isRequired,
-
-    /** Create unique keys for each suggestion item */
-    keyExtractor: PropTypes.func.isRequired,
-
-    /** The index of the highlighted suggestion */
-    highlightedSuggestionIndex: PropTypes.number.isRequired,
-
-    /** Fired when the user selects a suggestion */
-    onSelect: PropTypes.func.isRequired,
-
-    /** Show that we can use large auto-complete suggestion picker.
-     * Depending on available space and whether the input is expanded, we can have a small or large mention suggester.
-     * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
-    isSuggestionPickerLarge: PropTypes.bool.isRequired,
-
-    /** create accessibility label for each item */
-    accessibilityLabelExtractor: PropTypes.func.isRequired,
-
-    /** Meaures the parent container's position and dimensions. */
-    measureParentContainer: PropTypes.func,
-};
-
-const defaultProps = {
-    measureParentContainer: () => {},
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.tsx
similarity index 81%
rename from src/components/AutoCompleteSuggestions/index.native.js
rename to src/components/AutoCompleteSuggestions/index.native.tsx
index 439fa45eae78..bb7dd3e46558 100644
--- a/src/components/AutoCompleteSuggestions/index.native.js
+++ b/src/components/AutoCompleteSuggestions/index.native.tsx
@@ -1,9 +1,9 @@
 import {Portal} from '@gorhom/portal';
 import React from 'react';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import type {AutoCompleteSuggestionsProps} from './types';
 
-function AutoCompleteSuggestions({measureParentContainer, ...props}) {
+function AutoCompleteSuggestions({measureParentContainer, ...props}: AutoCompleteSuggestionsProps) {
     return (
         <Portal hostName="suggestions">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
@@ -12,7 +12,6 @@ function AutoCompleteSuggestions({measureParentContainer, ...props}) {
     );
 }
 
-AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
 
 export default AutoCompleteSuggestions;
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.tsx
similarity index 79%
rename from src/components/AutoCompleteSuggestions/index.js
rename to src/components/AutoCompleteSuggestions/index.tsx
index 30654caf5708..2a8e37e17d2e 100644
--- a/src/components/AutoCompleteSuggestions/index.js
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import type {AutoCompleteSuggestionsProps} from './types';
 
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
@@ -14,8 +14,8 @@ import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-function AutoCompleteSuggestions({measureParentContainer, ...props}) {
-    const containerRef = React.useRef(null);
+function AutoCompleteSuggestions({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
     const [{width, left, bottom}, setContainerState] = React.useState({
         width: 0,
@@ -25,7 +25,7 @@ function AutoCompleteSuggestions({measureParentContainer, ...props}) {
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
-            return;
+            return () => {};
         }
         container.onpointerdown = (e) => {
             if (DeviceCapabilities.hasHoverSupport()) {
@@ -53,11 +53,13 @@ function AutoCompleteSuggestions({measureParentContainer, ...props}) {
 
     return (
         Boolean(width) &&
-        ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, document.querySelector('body'))
+        ReactDOM.createPortal(
+            <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>,
+            document.querySelector('body') as unknown as HTMLBodyElement,
+        )
     );
 }
 
-AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
 
 export default AutoCompleteSuggestions;
diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
new file mode 100644
index 000000000000..c9b38880752f
--- /dev/null
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -0,0 +1,55 @@
+import {ReactElement} from 'react';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
+
+// TODO: remove when MentionSuggestions will be merged
+type Mention = {
+    /** Display name of the user */
+    text: string;
+
+    /** Email/phone number of the user */
+    alternateText: string;
+
+    /** Array of icons of the user. We use the first element of this array */
+    icons: Icon[];
+};
+
+// TODO: remove when EmojiSuggestions will be merged
+type SimpleEmoji = {
+    code: string;
+    name: string;
+    types?: string[];
+};
+
+type Suggestion = Mention | SimpleEmoji;
+
+type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
+
+type AutoCompleteSuggestionsProps = {
+    /** Array of suggestions */
+    suggestions: Suggestion[];
+
+    /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
+    renderSuggestionMenuItem: (item: Suggestion, index: number) => ReactElement;
+
+    /** Create unique keys for each suggestion item */
+    keyExtractor: () => string;
+
+    /** The index of the highlighted suggestion */
+    highlightedSuggestionIndex: number;
+
+    /** Fired when the user selects a suggestion */
+    onSelect: (index: number) => void;
+
+    /** Show that we can use large auto-complete suggestion picker.
+     * Depending on available space and whether the input is expanded, we can have a small or large mention suggester.
+     * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
+    isSuggestionPickerLarge: boolean;
+
+    /** create accessibility label for each item */
+    accessibilityLabelExtractor: (item: Suggestion, index: number) => string;
+
+    /** Meaures the parent container's position and dimensions. */
+    measureParentContainer?: (callback: MeasureParentContainerCallback) => void;
+};
+
+export type {AutoCompleteSuggestionsProps, Suggestion};

From e5d1bee04995dcbbca30f521f6fdcf85c74b6d1c Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Tue, 14 Nov 2023 10:15:52 +0100
Subject: [PATCH 02/11] Use SimpleEmoji type from EmojiTrie

---
 src/components/AutoCompleteSuggestions/types.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
index c9b38880752f..0e828629987d 100644
--- a/src/components/AutoCompleteSuggestions/types.ts
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -1,7 +1,7 @@
 import {ReactElement} from 'react';
+import type {SimpleEmoji} from '@libs/EmojiTrie';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 
-// TODO: remove when MentionSuggestions will be merged
 type Mention = {
     /** Display name of the user */
     text: string;
@@ -13,13 +13,6 @@ type Mention = {
     icons: Icon[];
 };
 
-// TODO: remove when EmojiSuggestions will be merged
-type SimpleEmoji = {
-    code: string;
-    name: string;
-    types?: string[];
-};
-
 type Suggestion = Mention | SimpleEmoji;
 
 type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;

From f1a56d81221769676576968d3e1df7da4785062d Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Tue, 14 Nov 2023 12:18:26 +0100
Subject: [PATCH 03/11] Update AutoCompleteSuggestionsProps type to be generic

---
 .../BaseAutoCompleteSuggestions.tsx           | 22 +++++++++++++------
 .../AutoCompleteSuggestions/index.native.tsx  |  6 ++---
 .../AutoCompleteSuggestions/index.tsx         |  6 ++---
 .../AutoCompleteSuggestions/types.ts          | 21 +++---------------
 src/components/EmojiSuggestions.tsx           |  2 +-
 5 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 097a495eb212..4f875176ea2c 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -7,14 +7,14 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
-import type {AutoCompleteSuggestionsProps, Suggestion} from './types';
+import type AutoCompleteSuggestionsProps from './types';
 
-type RenderSuggestionMenuItemProps = {
+type RenderSuggestionMenuItemProps<Suggestion> = {
     item: Suggestion;
     index: number;
 };
 
-type GetItemLayout = FlatListProps<Suggestion>['getItemLayout'];
+type GetItemLayout<Suggestion> = FlatListProps<Suggestion>['getItemLayout'];
 
 const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
@@ -31,8 +31,16 @@ const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge:
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
 };
 
-function BaseAutoCompleteSuggestions(
-    {highlightedSuggestionIndex, onSelect, accessibilityLabelExtractor, renderSuggestionMenuItem, suggestions, isSuggestionPickerLarge, keyExtractor}: AutoCompleteSuggestionsProps,
+function BaseAutoCompleteSuggestions<Suggestion>(
+    {
+        highlightedSuggestionIndex,
+        onSelect,
+        accessibilityLabelExtractor,
+        renderSuggestionMenuItem,
+        suggestions,
+        isSuggestionPickerLarge,
+        keyExtractor,
+    }: AutoCompleteSuggestionsProps<Suggestion>,
     ref: ForwardedRef<Animated.View | HTMLDivElement>,
 ) {
     const rowHeight = useSharedValue(0);
@@ -40,7 +48,7 @@ function BaseAutoCompleteSuggestions(
     /**
      * Render a suggestion menu item component.
      */
-    const renderItem = ({item, index}: RenderSuggestionMenuItemProps): ReactElement => (
+    const renderItem = ({item, index}: RenderSuggestionMenuItemProps<Suggestion>): ReactElement => (
         <PressableWithFeedback
             style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
             hoverDimmingValue={1}
@@ -63,7 +71,7 @@ function BaseAutoCompleteSuggestions(
      * @param data - This is the same as the data we pass into the component
      * @param index the current item's index in the set of data
      */
-    const getItemLayout: GetItemLayout = (data, index) => ({
+    const getItemLayout: GetItemLayout<Suggestion> = (data, index) => ({
         length: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         offset: index * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         index,
diff --git a/src/components/AutoCompleteSuggestions/index.native.tsx b/src/components/AutoCompleteSuggestions/index.native.tsx
index bb7dd3e46558..8ca1348b7e76 100644
--- a/src/components/AutoCompleteSuggestions/index.native.tsx
+++ b/src/components/AutoCompleteSuggestions/index.native.tsx
@@ -1,13 +1,13 @@
 import {Portal} from '@gorhom/portal';
 import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
-import type {AutoCompleteSuggestionsProps} from './types';
+import type AutoCompleteSuggestionsProps from './types';
 
-function AutoCompleteSuggestions({measureParentContainer, ...props}: AutoCompleteSuggestionsProps) {
+function AutoCompleteSuggestions<Suggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<Suggestion>) {
     return (
         <Portal hostName="suggestions">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <BaseAutoCompleteSuggestions {...props} />
+            <BaseAutoCompleteSuggestions<Suggestion> {...props} />
         </Portal>
     );
 }
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 2a8e37e17d2e..2e9b41eb375d 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -5,7 +5,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
-import type {AutoCompleteSuggestionsProps} from './types';
+import type AutoCompleteSuggestionsProps from './types';
 
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
@@ -14,7 +14,7 @@ import type {AutoCompleteSuggestionsProps} from './types';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-function AutoCompleteSuggestions({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps) {
+function AutoCompleteSuggestions<Suggestion>({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps<Suggestion>) {
     const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
     const [{width, left, bottom}, setContainerState] = React.useState({
@@ -44,7 +44,7 @@ function AutoCompleteSuggestions({measureParentContainer = () => {}, ...props}:
     }, [measureParentContainer, windowHeight, windowWidth]);
 
     const componentToRender = (
-        <BaseAutoCompleteSuggestions
+        <BaseAutoCompleteSuggestions<Suggestion>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={containerRef}
diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
index 0e828629987d..2e45dc98b353 100644
--- a/src/components/AutoCompleteSuggestions/types.ts
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -1,23 +1,8 @@
 import {ReactElement} from 'react';
-import type {SimpleEmoji} from '@libs/EmojiTrie';
-import type {Icon} from '@src/types/onyx/OnyxCommon';
-
-type Mention = {
-    /** Display name of the user */
-    text: string;
-
-    /** Email/phone number of the user */
-    alternateText: string;
-
-    /** Array of icons of the user. We use the first element of this array */
-    icons: Icon[];
-};
-
-type Suggestion = Mention | SimpleEmoji;
 
 type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
 
-type AutoCompleteSuggestionsProps = {
+type AutoCompleteSuggestionsProps<Suggestion> = {
     /** Array of suggestions */
     suggestions: Suggestion[];
 
@@ -25,7 +10,7 @@ type AutoCompleteSuggestionsProps = {
     renderSuggestionMenuItem: (item: Suggestion, index: number) => ReactElement;
 
     /** Create unique keys for each suggestion item */
-    keyExtractor: () => string;
+    keyExtractor: (item: Suggestion, index: number) => string;
 
     /** The index of the highlighted suggestion */
     highlightedSuggestionIndex: number;
@@ -45,4 +30,4 @@ type AutoCompleteSuggestionsProps = {
     measureParentContainer?: (callback: MeasureParentContainerCallback) => void;
 };
 
-export type {AutoCompleteSuggestionsProps, Suggestion};
+export default AutoCompleteSuggestionsProps;
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 8ab20cf13ad6..9a754473e5d4 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -71,7 +71,7 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr
     };
 
     return (
-        <AutoCompleteSuggestions
+        <AutoCompleteSuggestions<SimpleEmoji>
             suggestions={emojis}
             renderSuggestionMenuItem={renderSuggestionMenuItem}
             keyExtractor={keyExtractor}

From 2909eb54e8fa5f6adf34e86026f7995767608446 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Tue, 14 Nov 2023 12:39:47 +0100
Subject: [PATCH 04/11] Update generic param name

---
 .../BaseAutoCompleteSuggestions.tsx                | 14 +++++++-------
 .../AutoCompleteSuggestions/index.native.tsx       |  4 ++--
 src/components/AutoCompleteSuggestions/index.tsx   |  4 ++--
 src/components/AutoCompleteSuggestions/types.ts    | 10 +++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 4f875176ea2c..8e370da8b07a 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -9,12 +9,12 @@ import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
 import type AutoCompleteSuggestionsProps from './types';
 
-type RenderSuggestionMenuItemProps<Suggestion> = {
-    item: Suggestion;
+type RenderSuggestionMenuItemProps<TSuggestion> = {
+    item: TSuggestion;
     index: number;
 };
 
-type GetItemLayout<Suggestion> = FlatListProps<Suggestion>['getItemLayout'];
+type GetItemLayout<TSuggestion> = FlatListProps<TSuggestion>['getItemLayout'];
 
 const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
@@ -31,7 +31,7 @@ const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge:
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
 };
 
-function BaseAutoCompleteSuggestions<Suggestion>(
+function BaseAutoCompleteSuggestions<TSuggestion>(
     {
         highlightedSuggestionIndex,
         onSelect,
@@ -40,7 +40,7 @@ function BaseAutoCompleteSuggestions<Suggestion>(
         suggestions,
         isSuggestionPickerLarge,
         keyExtractor,
-    }: AutoCompleteSuggestionsProps<Suggestion>,
+    }: AutoCompleteSuggestionsProps<TSuggestion>,
     ref: ForwardedRef<Animated.View | HTMLDivElement>,
 ) {
     const rowHeight = useSharedValue(0);
@@ -48,7 +48,7 @@ function BaseAutoCompleteSuggestions<Suggestion>(
     /**
      * Render a suggestion menu item component.
      */
-    const renderItem = ({item, index}: RenderSuggestionMenuItemProps<Suggestion>): ReactElement => (
+    const renderItem = ({item, index}: RenderSuggestionMenuItemProps<TSuggestion>): ReactElement => (
         <PressableWithFeedback
             style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
             hoverDimmingValue={1}
@@ -71,7 +71,7 @@ function BaseAutoCompleteSuggestions<Suggestion>(
      * @param data - This is the same as the data we pass into the component
      * @param index the current item's index in the set of data
      */
-    const getItemLayout: GetItemLayout<Suggestion> = (data, index) => ({
+    const getItemLayout: GetItemLayout<TSuggestion> = (data, index) => ({
         length: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         offset: index * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
         index,
diff --git a/src/components/AutoCompleteSuggestions/index.native.tsx b/src/components/AutoCompleteSuggestions/index.native.tsx
index 8ca1348b7e76..f08ab8c8850c 100644
--- a/src/components/AutoCompleteSuggestions/index.native.tsx
+++ b/src/components/AutoCompleteSuggestions/index.native.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import type AutoCompleteSuggestionsProps from './types';
 
-function AutoCompleteSuggestions<Suggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<Suggestion>) {
+function AutoCompleteSuggestions<TSuggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
     return (
         <Portal hostName="suggestions">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <BaseAutoCompleteSuggestions<Suggestion> {...props} />
+            <BaseAutoCompleteSuggestions<TSuggestion> {...props} />
         </Portal>
     );
 }
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 2e9b41eb375d..0f4ea4bee211 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -14,7 +14,7 @@ import type AutoCompleteSuggestionsProps from './types';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-function AutoCompleteSuggestions<Suggestion>({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps<Suggestion>) {
+function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
     const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
     const [{width, left, bottom}, setContainerState] = React.useState({
@@ -44,7 +44,7 @@ function AutoCompleteSuggestions<Suggestion>({measureParentContainer = () => {},
     }, [measureParentContainer, windowHeight, windowWidth]);
 
     const componentToRender = (
-        <BaseAutoCompleteSuggestions<Suggestion>
+        <BaseAutoCompleteSuggestions<TSuggestion>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={containerRef}
diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
index 2e45dc98b353..f452bce96ce0 100644
--- a/src/components/AutoCompleteSuggestions/types.ts
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -2,15 +2,15 @@ import {ReactElement} from 'react';
 
 type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
 
-type AutoCompleteSuggestionsProps<Suggestion> = {
+type AutoCompleteSuggestionsProps<TSuggestion> = {
     /** Array of suggestions */
-    suggestions: Suggestion[];
+    suggestions: TSuggestion[];
 
     /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
-    renderSuggestionMenuItem: (item: Suggestion, index: number) => ReactElement;
+    renderSuggestionMenuItem: (item: TSuggestion, index: number) => ReactElement;
 
     /** Create unique keys for each suggestion item */
-    keyExtractor: (item: Suggestion, index: number) => string;
+    keyExtractor: (item: TSuggestion, index: number) => string;
 
     /** The index of the highlighted suggestion */
     highlightedSuggestionIndex: number;
@@ -24,7 +24,7 @@ type AutoCompleteSuggestionsProps<Suggestion> = {
     isSuggestionPickerLarge: boolean;
 
     /** create accessibility label for each item */
-    accessibilityLabelExtractor: (item: Suggestion, index: number) => string;
+    accessibilityLabelExtractor: (item: TSuggestion, index: number) => string;
 
     /** Meaures the parent container's position and dimensions. */
     measureParentContainer?: (callback: MeasureParentContainerCallback) => void;

From 51c9f6cfba941f7d6272b58b8326b93aa2c2040d Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 15 Nov 2023 10:19:06 +0100
Subject: [PATCH 05/11] Update type assertion

---
 src/components/AutoCompleteSuggestions/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 0f4ea4bee211..13267de58704 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -55,7 +55,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
         Boolean(width) &&
         ReactDOM.createPortal(
             <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>,
-            document.querySelector('body') as unknown as HTMLBodyElement,
+            document.querySelector('body') as Element,
         )
     );
 }

From c55f675379de8ac671713dbc8d6daaa0b91dcba5 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 15 Nov 2023 10:26:43 +0100
Subject: [PATCH 06/11] Minor update after merging main

---
 src/components/MentionSuggestions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 2d0f3bf32b41..6170e0930b48 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -105,7 +105,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
     };
 
     return (
-        <AutoCompleteSuggestions
+        <AutoCompleteSuggestions<Mention>
             suggestions={mentions}
             renderSuggestionMenuItem={renderSuggestionMenuItem}
             keyExtractor={keyExtractor}

From bafc7270a9e526d1403d4d6ba618345ee67d5759 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 17 Nov 2023 17:31:36 +0100
Subject: [PATCH 07/11] Update ref typing

---
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx   | 4 +++-
 src/components/EmojiSuggestions.tsx                           | 2 +-
 src/components/MentionSuggestions.tsx                         | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 8e370da8b07a..7d02cc1b0472 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -16,6 +16,8 @@ type RenderSuggestionMenuItemProps<TSuggestion> = {
 
 type GetItemLayout<TSuggestion> = FlatListProps<TSuggestion>['getItemLayout'];
 
+const viewForwardedRef = (ref: ForwardedRef<Animated.View | HTMLDivElement>) => ref as ForwardedRef<Animated.View>;
+
 const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
         if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) {
@@ -96,7 +98,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
 
     return (
         <Animated.View
-            ref={ref as ForwardedRef<Animated.View>}
+            ref={viewForwardedRef(ref)}
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 9a754473e5d4..8ab20cf13ad6 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -71,7 +71,7 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr
     };
 
     return (
-        <AutoCompleteSuggestions<SimpleEmoji>
+        <AutoCompleteSuggestions
             suggestions={emojis}
             renderSuggestionMenuItem={renderSuggestionMenuItem}
             keyExtractor={keyExtractor}
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 6170e0930b48..2d0f3bf32b41 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -105,7 +105,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
     };
 
     return (
-        <AutoCompleteSuggestions<Mention>
+        <AutoCompleteSuggestions
             suggestions={mentions}
             renderSuggestionMenuItem={renderSuggestionMenuItem}
             keyExtractor={keyExtractor}

From 27bda1d6ec41652babeefa5ac8594d5912ac12d1 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 17 Nov 2023 18:23:03 +0100
Subject: [PATCH 08/11] Get rid of assertion

---
 src/components/AutoCompleteSuggestions/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 13267de58704..daeef8fb7831 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -51,12 +51,12 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
         />
     );
 
+    const bodyElement = document.querySelector('body');
+
     return (
         Boolean(width) &&
-        ReactDOM.createPortal(
-            <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>,
-            document.querySelector('body') as Element,
-        )
+        bodyElement &&
+        ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, bodyElement)
     );
 }
 

From f7b17455d15211c56a4d454958faa4285f591317 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 22 Nov 2023 10:35:04 +0100
Subject: [PATCH 09/11] TS updates after merging main

---
 .../BaseAutoCompleteSuggestions.tsx           | 58 +++++++------------
 .../AutoCompleteSuggestions/index.native.tsx  |  2 +-
 .../AutoCompleteSuggestions/index.tsx         |  2 +-
 .../AutoCompleteSuggestions/types.ts          |  7 ++-
 4 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index ec53507d4d8e..fa0dc5267360 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -1,5 +1,5 @@
 import {FlashList} from '@shopify/flash-list';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactElement, useCallback, useEffect, useRef} from 'react';
 // We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -7,14 +7,11 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
+import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
 
-/**
- * @param {Number} numRows
- * @param {Boolean} isSuggestionPickerLarge
- * @returns {Number}
- */
-const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
+const viewForwardedRef = (ref: ForwardedRef<Animated.View | HTMLDivElement>) => ref as ForwardedRef<Animated.View>;
+
+const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
         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
@@ -29,28 +26,26 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
 };
 
-function BaseAutoCompleteSuggestions({
-    highlightedSuggestionIndex,
-    onSelect,
-    renderSuggestionMenuItem,
-    suggestions,
-    accessibilityLabelExtractor,
-    keyExtractor,
-    isSuggestionPickerLarge,
-    forwardedRef,
-}) {
+function BaseAutoCompleteSuggestions<TSuggestion>(
+    {
+        highlightedSuggestionIndex,
+        onSelect,
+        accessibilityLabelExtractor,
+        renderSuggestionMenuItem,
+        suggestions,
+        isSuggestionPickerLarge,
+        keyExtractor,
+    }: AutoCompleteSuggestionsProps<TSuggestion>,
+    ref: ForwardedRef<Animated.View | HTMLDivElement>,
+) {
     const styles = useThemeStyles();
     const rowHeight = useSharedValue(0);
-    const scrollRef = useRef(null);
+    const scrollRef = useRef<FlashList<TSuggestion>>(null);
     /**
      * Render a suggestion menu item component.
-     * @param {Object} params
-     * @param {Object} params.item
-     * @param {Number} params.index
-     * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item, index}) => (
+        ({item, index}: RenderSuggestionMenuItemProps<TSuggestion>): ReactElement => (
             <PressableWithFeedback
                 style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
                 hoverDimmingValue={1}
@@ -84,7 +79,7 @@ function BaseAutoCompleteSuggestions({
 
     return (
         <Animated.View
-            ref={forwardedRef}
+            ref={viewForwardedRef(ref)}
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
@@ -104,17 +99,6 @@ function BaseAutoCompleteSuggestions({
     );
 }
 
-BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
-const BaseAutoCompleteSuggestionsWithRef = React.forwardRef((props, ref) => (
-    <BaseAutoCompleteSuggestions
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-BaseAutoCompleteSuggestionsWithRef.displayName = 'BaseAutoCompleteSuggestionsWithRef';
-
-export default BaseAutoCompleteSuggestionsWithRef;
+export default forwardRef(BaseAutoCompleteSuggestions);
diff --git a/src/components/AutoCompleteSuggestions/index.native.tsx b/src/components/AutoCompleteSuggestions/index.native.tsx
index f08ab8c8850c..fbfa7d953581 100644
--- a/src/components/AutoCompleteSuggestions/index.native.tsx
+++ b/src/components/AutoCompleteSuggestions/index.native.tsx
@@ -1,7 +1,7 @@
 import {Portal} from '@gorhom/portal';
 import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
-import type AutoCompleteSuggestionsProps from './types';
+import type {AutoCompleteSuggestionsProps} from './types';
 
 function AutoCompleteSuggestions<TSuggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
     return (
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index daeef8fb7831..2632e181c6cb 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -5,7 +5,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
-import type AutoCompleteSuggestionsProps from './types';
+import type {AutoCompleteSuggestionsProps} from './types';
 
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
index f452bce96ce0..9130f5139d71 100644
--- a/src/components/AutoCompleteSuggestions/types.ts
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -2,6 +2,11 @@ import {ReactElement} from 'react';
 
 type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
 
+type RenderSuggestionMenuItemProps<TSuggestion> = {
+    item: TSuggestion;
+    index: number;
+};
+
 type AutoCompleteSuggestionsProps<TSuggestion> = {
     /** Array of suggestions */
     suggestions: TSuggestion[];
@@ -30,4 +35,4 @@ type AutoCompleteSuggestionsProps<TSuggestion> = {
     measureParentContainer?: (callback: MeasureParentContainerCallback) => void;
 };
 
-export default AutoCompleteSuggestionsProps;
+export type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps};

From a2a9e1ce3ea5aff7ccff6fdd662f7b83c8022ef5 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 24 Nov 2023 17:21:53 +0100
Subject: [PATCH 10/11] Put viewForwardedRef in utils file

---
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx | 6 +++---
 src/components/AutoCompleteSuggestions/index.tsx            | 4 +---
 src/components/FocusTrapView/index.tsx                      | 2 +-
 src/types/utils/viewRef.ts                                  | 5 ++++-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index fa0dc5267360..86740fd8573f 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -1,5 +1,6 @@
 import {FlashList} from '@shopify/flash-list';
 import React, {ForwardedRef, forwardRef, ReactElement, useCallback, useEffect, useRef} from 'react';
+import {View} from 'react-native';
 // We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -7,10 +8,9 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {viewForwardedRef} from '@src/types/utils/viewRef';
 import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
 
-const viewForwardedRef = (ref: ForwardedRef<Animated.View | HTMLDivElement>) => ref as ForwardedRef<Animated.View>;
-
 const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
         if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) {
@@ -36,7 +36,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
         isSuggestionPickerLarge,
         keyExtractor,
     }: AutoCompleteSuggestionsProps<TSuggestion>,
-    ref: ForwardedRef<Animated.View | HTMLDivElement>,
+    ref: ForwardedRef<View | HTMLDivElement>,
 ) {
     const styles = useThemeStyles();
     const rowHeight = useSharedValue(0);
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 2632e181c6cb..24b846c265a9 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -54,9 +54,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}
     const bodyElement = document.querySelector('body');
 
     return (
-        Boolean(width) &&
-        bodyElement &&
-        ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, bodyElement)
+        !!width && bodyElement && ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, bodyElement)
     );
 }
 
diff --git a/src/components/FocusTrapView/index.tsx b/src/components/FocusTrapView/index.tsx
index 6b52512c2e63..a2f67470195b 100644
--- a/src/components/FocusTrapView/index.tsx
+++ b/src/components/FocusTrapView/index.tsx
@@ -4,7 +4,7 @@
 import FocusTrap from 'focus-trap-react';
 import React, {useRef} from 'react';
 import {View} from 'react-native';
-import viewRef from '@src/types/utils/viewRef';
+import {viewRef} from '@src/types/utils/viewRef';
 import FocusTrapViewProps from './types';
 
 function FocusTrapView({isEnabled = true, isActive = true, shouldEnableAutoFocus = false, ...props}: FocusTrapViewProps) {
diff --git a/src/types/utils/viewRef.ts b/src/types/utils/viewRef.ts
index 015d88cc5a8b..c7b721ab8200 100644
--- a/src/types/utils/viewRef.ts
+++ b/src/types/utils/viewRef.ts
@@ -1,5 +1,8 @@
+import {ForwardedRef} from 'react';
 import {View} from 'react-native';
 
 const viewRef = (ref: React.RefObject<View | HTMLDivElement>) => ref as React.RefObject<View>;
 
-export default viewRef;
+const viewForwardedRef = (ref: ForwardedRef<View | HTMLDivElement>) => ref as ForwardedRef<View>;
+
+export {viewRef, viewForwardedRef};

From 1292c4058f88a947a974aca8b8281fed105f4df9 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 24 Nov 2023 17:28:18 +0100
Subject: [PATCH 11/11] Put viewForwardedRef in utils file after merging main

---
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx | 2 +-
 src/types/utils/viewForwardedRef.ts                         | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/types/utils/viewForwardedRef.ts

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 86740fd8573f..3e5e7b4fdd9a 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -8,7 +8,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {viewForwardedRef} from '@src/types/utils/viewRef';
+import viewForwardedRef from '@src/types/utils/viewForwardedRef';
 import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
 
 const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
diff --git a/src/types/utils/viewForwardedRef.ts b/src/types/utils/viewForwardedRef.ts
new file mode 100644
index 000000000000..3bc18495b153
--- /dev/null
+++ b/src/types/utils/viewForwardedRef.ts
@@ -0,0 +1,6 @@
+import {ForwardedRef} from 'react';
+import {View} from 'react-native';
+
+const viewForwardedRef = (ref: ForwardedRef<View | HTMLDivElement>) => ref as ForwardedRef<View>;
+
+export default viewForwardedRef;