ref(js): Avoid ForwardRefRenderFunction type (#47064)

You can simply just define the parameters of the function

This is in support of unifying our component function declaration style

static/app/components/autoSelectText.tsx

@@ -13,10 +13,10 @@ type AutoSelectHandle = {
   selectText: () => void;
 };
 
-const AutoSelectText: React.ForwardRefRenderFunction<AutoSelectHandle, Props> = (
-  {children, className, ...props},
-  forwardedRef
-) => {
+function AutoSelectText(
+  {children, className, ...props}: Props,
+  forwardedRef: React.Ref<AutoSelectHandle>
+) {
   const element = useRef<HTMLSpanElement>(null);
 
   // We need to expose a selectText method to parent components
@@ -45,6 +45,6 @@ const AutoSelectText: React.ForwardRefRenderFunction<AutoSelectHandle, Props> =
       <span ref={element}>{children}</span>
     </div>
   );
-};
+}
 
 export default forwardRef(AutoSelectText);

static/app/components/dropdownMenu/item.tsx

@@ -90,13 +90,18 @@ interface DropdownMenuItemProps {
  * Can also be used as a trigger button for a submenu. See:
  * https://react-spectrum.adobe.com/react-aria/useMenu.html
  */
-const BaseDropdownMenuItem: React.ForwardRefRenderFunction<
-  HTMLLIElement,
-  DropdownMenuItemProps
-> = (
-  {node, state, closeOnSelect, onClose, showDivider, renderAs = 'li', ...props},
-  forwardedRef
-) => {
+function BaseDropdownMenuItem(
+  {
+    node,
+    state,
+    closeOnSelect,
+    onClose,
+    showDivider,
+    renderAs = 'li',
+    ...props
+  }: DropdownMenuItemProps,
+  forwardedRef: React.Ref<HTMLLIElement>
+) {
   const ref = useRef<HTMLLIElement | null>(null);
   const isDisabled = state.disabledKeys.has(node.key);
   const isFocused = state.selectionManager.focusedKey === node.key;
@@ -219,7 +224,7 @@ const BaseDropdownMenuItem: React.ForwardRefRenderFunction<
       })}
     />
   );
-};
+}
 
 const DropdownMenuItem = forwardRef(BaseDropdownMenuItem);
 

static/app/components/numberInput.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, ForwardRefRenderFunction, useRef} from 'react';
+import {forwardRef, useRef} from 'react';
 import styled from '@emotion/styled';
 import {useButton} from '@react-aria/button';
 import {useLocale} from '@react-aria/i18n';
@@ -24,7 +24,7 @@ export interface NumberInputProps
   max?: number;
   min?: number;
 }
-const BaseNumberInput: ForwardRefRenderFunction<HTMLInputElement, NumberInputProps> = (
+function BaseNumberInput(
   {
     disabled,
     readOnly,
@@ -36,9 +36,9 @@ const BaseNumberInput: ForwardRefRenderFunction<HTMLInputElement, NumberInputPro
     nativeSize,
     className,
     ...props
-  },
-  forwardedRef
-) => {
+  }: NumberInputProps,
+  forwardedRef: React.Ref<HTMLInputElement>
+) {
   const ref = useRef<HTMLInputElement>(null);
 
   const ariaProps = {
@@ -89,7 +89,7 @@ const BaseNumberInput: ForwardRefRenderFunction<HTMLInputElement, NumberInputPro
       </InputGroup.TrailingItems>
     </InputGroup>
   );
-};
+}
 
 const NumberInput = forwardRef(BaseNumberInput);
 

static/app/components/overlayArrow.tsx

@@ -13,7 +13,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
   strokeWidth?: number;
 };
 
-const BaseOverlayArrow: React.ForwardRefRenderFunction<HTMLDivElement, Props> = (
+function BaseOverlayArrow(
   {
     size = 16,
     strokeWidth = 1,
@@ -21,9 +21,9 @@ const BaseOverlayArrow: React.ForwardRefRenderFunction<HTMLDivElement, Props> =
     background = 'backgroundElevated',
     border = 'translucentBorder',
     ...props
-  },
-  ref
-) => {
+  }: Props,
+  ref: React.Ref<HTMLDivElement>
+) {
   /**
    * SVG height
    */
@@ -74,7 +74,7 @@ const BaseOverlayArrow: React.ForwardRefRenderFunction<HTMLDivElement, Props> =
       </SVG>
     </Wrap>
   );
-};
+}
 
 const OverlayArrow = forwardRef(BaseOverlayArrow);