refactor(ui): migrates away from React.forwardRef

packages/next/src/views/LivePreview/IFrame/index.tsx

@@ -1,18 +1,19 @@
 'use client'
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import { useLivePreviewContext } from '../Context/context.js'
 import './index.scss'
 
 const baseClass = 'live-preview-iframe'
 
 type Props = {
+  ref: React.RefObject<HTMLIFrameElement>
   setIframeHasLoaded: (value: boolean) => void
   url: string
 }
 
-export const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {
-  const { setIframeHasLoaded, url } = props
+export const IFrame: React.FC<Props> = (props) => {
+  const { ref, setIframeHasLoaded, url } = props
 
   const { zoom } = useLivePreviewContext()
 
@@ -30,4 +31,4 @@ export const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {
       title={url}
     />
   )
-})
+}

packages/ui/src/elements/Button/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef, Fragment, isValidElement } from 'react'
+import React, { Fragment, isValidElement } from 'react'
 
 import type { Props } from './types.js'
 
@@ -47,7 +47,7 @@ export const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {
   )
 }
 
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {
+export const Button: React.FC<Props> = (props) => {
   const {
     id,
     type = 'button',
@@ -64,6 +64,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
     newTab,
     onClick,
     onMouseDown,
+    ref,
     round,
     size = 'medium',
     SubMenuPopupContent,
@@ -131,7 +132,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
         <a
           {...buttonProps}
           href={!disabled ? url : undefined}
-          ref={ref as React.Ref<HTMLAnchorElement>}
+          ref={ref as React.RefObject<HTMLAnchorElement>}
         >
           <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>
             {children}
@@ -195,4 +196,4 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
   }
 
   return buttonElement
-})
+}

packages/ui/src/elements/Button/types.ts

@@ -5,6 +5,7 @@ type secondaryAction = {
   label: string
   onClick: (event: MouseEvent) => void
 }
+
 export type Props = {
   'aria-label'?: string
   buttonId?: string
@@ -29,6 +30,7 @@ export type Props = {
    * @default false
    */
   programmaticSubmit?: boolean
+  ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>
   round?: boolean
   secondaryActions?: secondaryAction | secondaryAction[]
   size?: 'large' | 'medium' | 'small'

packages/ui/src/elements/EditUpload/index.tsx

@@ -3,7 +3,7 @@
 import type { UploadEdits } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
-import React, { forwardRef, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import ReactCrop from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
 
@@ -18,11 +18,12 @@ const baseClass = 'edit-upload'
 type Props = {
   name: string
   onChange: (value: string) => void
+  ref?: React.RefObject<HTMLInputElement>
   value: string
 }
 
-const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
-  const { name, onChange, value } = props
+const Input: React.FC<Props> = (props) => {
+  const { name, onChange, ref, value } = props
 
   return (
     <div className={`${baseClass}__input`}>
@@ -36,7 +37,7 @@ const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
       />
     </div>
   )
-})
+}
 
 type FocalPosition = {
   x: number

packages/ui/src/elements/Gutter/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import './index.scss'
 
@@ -9,18 +9,20 @@ export type GutterProps = {
   left?: boolean
   negativeLeft?: boolean
   negativeRight?: boolean
+  ref?: React.RefObject<HTMLDivElement>
   right?: boolean
 }
 
 const baseClass = 'gutter'
 
-export const Gutter = forwardRef<HTMLDivElement, GutterProps>((props, ref) => {
+export const Gutter: React.FC<GutterProps> = (props) => {
   const {
     children,
     className,
     left = true,
     negativeLeft = false,
     negativeRight = false,
+    ref,
     right = true,
   } = props
 
@@ -43,6 +45,6 @@ export const Gutter = forwardRef<HTMLDivElement, GutterProps>((props, ref) => {
       {children}
     </div>
   )
-})
+}
 
 Gutter.displayName = 'Gutter'

packages/ui/src/forms/Submit/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import type { Props } from '../../elements/Button/types.js'
 
@@ -9,15 +9,17 @@ import './index.scss'
 
 const baseClass = 'form-submit'
 
-export const FormSubmit = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+export const FormSubmit: React.FC<Props> = (props) => {
   const {
     type = 'submit',
     buttonId: id,
     children,
     disabled: disabledFromProps,
     onClick,
     programmaticSubmit,
+    ref,
   } = props
+
   const processing = useFormProcessing()
   const initializing = useFormInitializing()
   const { disabled, submit } = useForm()
@@ -46,4 +48,4 @@ export const FormSubmit = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       </Button>
     </div>
   )
-})
+}

packages/ui/src/utilities/getClientConfig.ts

@@ -15,13 +15,15 @@ export const getClientConfig = cache(
     if (cachedClientConfig && !global._payload_doNotCacheClientConfig) {
       return cachedClientConfig
     }
+
     const { config, i18n, importMap } = args
 
     cachedClientConfig = createClientConfig({
       config,
       i18n,
       importMap,
     })
+
     global._payload_clientConfig = cachedClientConfig
 
     global._payload_doNotCacheClientConfig = false