fix ts errors

src/components/EmojiPicker/EmojiPicker.tsx

@@ -9,8 +9,8 @@ import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
 import type {AnchorOrigin, EmojiPickerRef, EmojiPopoverAnchor, OnEmojiSelected, OnModalHideValue, OnWillShowPicker} from '@libs/actions/EmojiPickerAction';
+import * as Browser from '@libs/Browser';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';

src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

@@ -19,6 +19,10 @@ type EmojiPickerButtonDropdownProps = {
     /** Flag to disable the emoji picker button */
     isDisabled?: boolean;
 
+    accessibilityLabel?: string;
+
+    role?: string;
+
     onModalHide: EmojiPickerAction.OnModalHideValue;
 
     onInputChange: (emoji: string) => void;
@@ -31,7 +35,8 @@ type EmojiPickerButtonDropdownProps = {
 };
 
 function EmojiPickerButtonDropdown(
-    {isDisabled = false, onModalHide, onInputChange, value, disabled, style}: EmojiPickerButtonDropdownProps,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    {isDisabled = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ref: ForwardedRef<AnimatedTextInputRef>,
 ) {

src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx

@@ -4,6 +4,7 @@ import React, {useMemo} from 'react';
 import type {ForwardedRef} from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import CategoryShortcutBar from '@components/EmojiPicker/CategoryShortcutBar';
 import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
@@ -12,7 +13,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {EmojiPickerList, EmojiPickerListItem, HeaderIndice} from '@libs/EmojiUtils';
 import CONST from '@src/CONST';
-import type {OnyxValue} from '@src/ONYXKEYS';
 
 type BaseEmojiPickerMenuProps = {
     /** Indicates if the emoji list is filtered or not */
@@ -34,7 +34,7 @@ type BaseEmojiPickerMenuProps = {
     renderItem: ListRenderItem<EmojiPickerListItem>;
 
     /** Extra data to be passed to the list for re-rendering */
-    extraData?: Array<EmojiPickerList | OnyxValue<'preferredEmojiSkinTone'> | ((skinTone: number) => void)>;
+    extraData?: Array<EmojiPickerList | OnyxEntry<string | number> | ((skinTone: number) => void)>;
 
     /** Array of indices for the sticky headers */
     stickyHeaderIndices?: number[];

src/components/Form/types.ts

@@ -9,6 +9,7 @@ import type AmountTextInput from '@components/AmountTextInput';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
 import type CountrySelector from '@components/CountrySelector';
 import type DatePicker from '@components/DatePicker';
+import type EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
 import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type RoomNameInput from '@components/RoomNameInput';
@@ -47,7 +48,8 @@ type ValidInputs =
     | typeof RadioButtons
     | typeof AmountPicker
     | typeof TextPicker
-    | typeof AddPlaidBankAccount;
+    | typeof AddPlaidBankAccount
+    | typeof EmojiPickerButtonDropdown;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country';
 type ValueTypeMap = {

src/pages/home/report/ReportActionItem.tsx

@@ -187,7 +187,7 @@ function ReportActionItem({
     const reactionListRef = useContext(ReactionListContext);
     const {updateHiddenAttachments} = useContext(ReportAttachmentsContext);
     const textInputRef = useRef<TextInput & HTMLTextAreaElement>();
-    const popoverAnchorRef = useRef<ReportActionContextMenu.ContextMenuAnchor>(null);
+    const popoverAnchorRef = useRef<Exclude<ReportActionContextMenu.ContextMenuAnchor, TextInput>>(null);
     const downloadedPreviews = useRef<string[]>([]);
     const prevDraftMessage = usePrevious(draftMessage);
     const originalReportID = ReportUtils.getOriginalReportID(report.reportID, action);

src/pages/settings/Profile/CustomStatus/StatusPage.tsx

@@ -162,11 +162,13 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
                         <InputWrapper
                             InputComponent={EmojiPickerButtonDropdown}
                             inputID={INPUT_IDS.EMOJI_CODE}
-                            // @ts-expect-error TODO: Remove ts-expect-error when EmojiPickerButtonDropdown migration is done
                             accessibilityLabel={INPUT_IDS.EMOJI_CODE}
                             role={CONST.ROLE.PRESENTATION}
                             defaultValue={defaultEmoji}
                             style={styles.mb3}
+                            onModalHide={() => {}}
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            onInputChange={(emoji: string): void => {}}
                         />
                         <InputWrapper
                             InputComponent={TextInput}