Improve types

src/components/Button/index.tsx

@@ -200,7 +200,7 @@ function Button(
         accessibilityLabel = '',
         ...rest
     }: ButtonProps,
-    ref: ForwardedRef<View | HTMLDivElement>,
+    ref: ForwardedRef<View>,
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();

src/components/ButtonWithDropdownMenu/index.tsx

@@ -40,7 +40,7 @@ function ButtonWithDropdownMenu<IValueType>({
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [popoverAnchorPosition, setPopoverAnchorPosition] = useState<AnchorPosition | null>(null);
     const {windowWidth, windowHeight} = useWindowDimensions();
-    const caretButton = useRef<View & HTMLDivElement>(null);
+    const caretButton = useRef<View>(null);
     const selectedItem = options[selectedItemIndex] || options[0];
     const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
     const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;

src/components/DragAndDrop/NoDropZone/index.tsx

@@ -2,20 +2,22 @@ import React, {useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
 import useThemeStyles from '@hooks/useThemeStyles';
+import htmlDivElementRef from '@src/types/utils/htmlDivElementRef';
+import viewRef from '@src/types/utils/viewRef';
 import type NoDropZoneProps from './types';
 
 function NoDropZone({children}: NoDropZoneProps) {
     const styles = useThemeStyles();
-    const noDropZone = useRef<View>(null);
+    const noDropZone = useRef<HTMLDivElement | View>(null);
 
     useDragAndDrop({
-        dropZone: noDropZone,
+        dropZone: htmlDivElementRef(noDropZone),
         shouldAllowDrop: false,
     });
 
     return (
         <View
-            ref={noDropZone}
+            ref={viewRef(noDropZone)}
             style={[styles.fullScreen]}
         >
             {children}

src/components/DragAndDrop/Provider/index.tsx

@@ -4,6 +4,8 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
 import useThemeStyles from '@hooks/useThemeStyles';
+import htmlDivElementRef from '@src/types/utils/htmlDivElementRef';
+import viewRef from '@src/types/utils/viewRef';
 import type {DragAndDropContextParams, DragAndDropProviderProps, SetOnDropHandlerCallback} from './types';
 
 const DragAndDropContext = React.createContext<DragAndDropContextParams>({});
@@ -14,7 +16,7 @@ function shouldAcceptDrop(event: DragEvent): boolean {
 
 function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver = () => {}}: DragAndDropProviderProps) {
     const styles = useThemeStyles();
-    const dropZone = useRef<View>(null);
+    const dropZone = useRef<HTMLDivElement | View>(null);
     const dropZoneID = useRef(Str.guid('drag-n-drop'));
 
     const onDropHandler = useRef<SetOnDropHandlerCallback>(() => {});
@@ -23,7 +25,7 @@ function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver =
     }, []);
 
     const {isDraggingOver} = useDragAndDrop({
-        dropZone,
+        dropZone: htmlDivElementRef(dropZone),
         onDrop: onDropHandler.current,
         shouldAcceptDrop,
         isDisabled,
@@ -38,7 +40,7 @@ function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver =
     return (
         <DragAndDropContext.Provider value={contextValue}>
             <View
-                ref={dropZone}
+                ref={viewRef(dropZone)}
                 style={[styles.flex1, styles.w100, styles.h100]}
             >
                 {isDraggingOver && (

src/components/KYCWall/BaseKYCWall.tsx

@@ -69,7 +69,7 @@ function KYCWall({
     walletTerms,
     shouldShowPersonalBankAccountOption = false,
 }: BaseKYCWallProps) {
-    const anchorRef = useRef<HTMLDivElement | View | null>(null);
+    const anchorRef = useRef<HTMLDivElement | View>(null);
     const transferBalanceButtonRef = useRef<HTMLDivElement | View | null>(null);
 
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);

src/hooks/useDragAndDrop/index.native.ts

@@ -0,0 +1,3 @@
+const useDragAndDrop = () => {};
+
+export default useDragAndDrop;

src/hooks/useDragAndDrop.ts → src/hooks/useDragAndDrop/index.ts

@@ -1,8 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
-import type React from 'react';
 import {useCallback, useContext, useEffect, useRef, useState} from 'react';
-import type {View} from 'react-native';
 import {PopoverContext} from '@components/PopoverProvider';
+import type UseDragAndDrop from './types';
 
 const COPY_DROP_EFFECT = 'copy';
 const NONE_DROP_EFFECT = 'none';
@@ -11,22 +10,10 @@ const DRAG_OVER_EVENT = 'dragover';
 const DRAG_LEAVE_EVENT = 'dragleave';
 const DROP_EVENT = 'drop';
 
-type DragAndDropParams = {
-    dropZone: React.MutableRefObject<HTMLDivElement | View | null>;
-    onDrop?: (event: DragEvent) => void;
-    shouldAllowDrop?: boolean;
-    isDisabled?: boolean;
-    shouldAcceptDrop?: (event: DragEvent) => boolean;
-};
-
-type DragAndDropOptions = {
-    isDraggingOver: boolean;
-};
-
 /**
  * @param dropZone – ref to the dropZone component
  */
-export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}: DragAndDropParams): DragAndDropOptions {
+const useDragAndDrop: UseDragAndDrop = ({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}) => {
     const isFocused = useIsFocused();
     const [isDraggingOver, setIsDraggingOver] = useState(false);
     const {close: closePopover} = useContext(PopoverContext);
@@ -111,7 +98,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
             return;
         }
 
-        const dropZoneRef = dropZone.current as HTMLDivElement;
+        const dropZoneRef = dropZone.current;
 
         // Note that the dragover event needs to be called with `event.preventDefault` in order for the drop event to be fired:
         // https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome
@@ -133,4 +120,6 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
     }, [dropZone, dropZoneDragHandler]);
 
     return {isDraggingOver};
-}
+};
+
+export default useDragAndDrop;

src/hooks/useDragAndDrop/types.ts

@@ -0,0 +1,15 @@
+type DragAndDropParams = {
+    dropZone: React.MutableRefObject<HTMLDivElement | null>;
+    onDrop?: (event: DragEvent) => void;
+    shouldAllowDrop?: boolean;
+    isDisabled?: boolean;
+    shouldAcceptDrop?: (event: DragEvent) => boolean;
+};
+
+type DragAndDropOptions = {
+    isDraggingOver: boolean;
+};
+
+type UseDragAndDrop = (params: DragAndDropParams) => DragAndDropOptions;
+
+export default UseDragAndDrop;

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -87,7 +87,6 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
     const prevPersonalDetails = usePrevious(personalDetails);
     const {translate, formatPhoneNumber, preferredLocale} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const dropdownButtonRef = useRef(null);
     const isPolicyAdmin = PolicyUtils.isPolicyAdmin(policy);
     const isLoading = useMemo(
         () => !isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) || isEmptyObject(policy?.employeeList)),
@@ -515,7 +514,6 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
                         buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                         onPress={() => null}
                         options={getBulkActionsButtonOptions()}
-                        buttonRef={dropdownButtonRef}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                     />
                 ) : (

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -1,6 +1,6 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -61,7 +61,6 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
     const theme = useTheme();
     const {translate} = useLocalize();
     const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
-    const dropdownButtonRef = useRef(null);
     const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
     const isFocused = useIsFocused();
 
@@ -208,7 +207,6 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
 
             return (
                 <ButtonWithDropdownMenu
-                    buttonRef={dropdownButtonRef}
                     onPress={() => null}
                     shouldAlwaysShowDropdownMenu
                     pressOnEnter

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -1,6 +1,6 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -54,7 +54,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     const [selectedDistanceRates, setSelectedDistanceRates] = useState<Rate[]>([]);
     const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
-    const dropdownButtonRef = useRef(null);
     const policyID = route.params.policyID;
     const isFocused = useIsFocused();
 
@@ -257,7 +256,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                     buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     onPress={() => null}
                     options={getBulkActionsButtonOptions()}
-                    buttonRef={dropdownButtonRef}
                     style={[isSmallScreenWidth && styles.flexGrow1]}
                     wrapperStyle={styles.w100}
                 />

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -1,7 +1,7 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import lodashSortBy from 'lodash/sortBy';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -68,7 +68,6 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const [selectedTags, setSelectedTags] = useState<Record<string, boolean>>({});
-    const dropdownButtonRef = useRef(null);
     const [deleteTagsConfirmModalVisible, setDeleteTagsConfirmModalVisible] = useState(false);
     const isFocused = useIsFocused();
 
@@ -221,7 +220,6 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
 
             return (
                 <ButtonWithDropdownMenu
-                    buttonRef={dropdownButtonRef}
                     onPress={() => null}
                     shouldAlwaysShowDropdownMenu
                     pressOnEnter

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -1,6 +1,6 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -53,7 +53,6 @@ function WorkspaceTaxesPage({
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const defaultExternalID = policy?.taxRates?.defaultExternalID;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
-    const dropdownButtonRef = useRef(null);
     const isFocused = useIsFocused();
 
     const fetchTaxes = useCallback(() => {
@@ -226,7 +225,6 @@ function WorkspaceTaxesPage({
         </View>
     ) : (
         <ButtonWithDropdownMenu<WorkspaceTaxRatesBulkActionType>
-            buttonRef={dropdownButtonRef}
             onPress={() => {}}
             options={dropdownMenuOptions}
             buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}

src/types/utils/htmlDivElementRef.ts

@@ -0,0 +1,5 @@
+import type {View} from 'react-native';
+
+const htmlDivElementRef = (ref: React.RefObject<View | HTMLDivElement>) => ref as React.RefObject<HTMLDivElement>;
+
+export default htmlDivElementRef;