fix: adjusts props to accept components for before and after fields instead of functions (#3820)

packages/payload/src/admin/components/elements/DocumentFields/index.tsx

@@ -14,8 +14,8 @@ import './index.scss'
 const baseClass = 'document-fields'
 
 export const DocumentFields: React.FC<{
-  AfterFields?: React.FC
-  BeforeFields?: React.FC
+  AfterFields?: React.ReactNode
+  BeforeFields?: React.ReactNode
   description?: Description
   fields: FieldWithPath[]
   hasSavePermission: boolean
@@ -52,7 +52,7 @@ export const DocumentFields: React.FC<{
                 </div>
               )}
             </header>
-            {BeforeFields && <BeforeFields />}
+            {BeforeFields || null}
             <RenderFields
               className={`${baseClass}__fields`}
               fieldSchema={fields}
@@ -64,7 +64,7 @@ export const DocumentFields: React.FC<{
               permissions={permissions.fields}
               readOnly={!hasSavePermission}
             />
-            {AfterFields && <AfterFields />}
+            {AfterFields || null}
           </Gutter>
         </div>
         {hasSidebar && (

packages/payload/src/admin/components/views/Account/Default.tsx

@@ -69,8 +69,8 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
               permissions={permissions}
             />
             <DocumentFields
-              AfterFields={() => <Settings className={`${baseClass}__settings`} />}
-              BeforeFields={() => (
+              AfterFields={<Settings className={`${baseClass}__settings`} />}
+              BeforeFields={
                 <Auth
                   className={`${baseClass}__auth`}
                   collection={collection}
@@ -79,7 +79,7 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
                   readOnly={!hasSavePermission}
                   useAPIKey={auth.useAPIKey}
                 />
-              )}
+              }
               fields={fields}
               hasSavePermission={hasSavePermission}
               permissions={permissions}

packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx

@@ -62,7 +62,7 @@ export const DefaultCollectionEdit: React.FC<CollectionEditViewProps> = (props)
         permissions={permissions}
       />
       <DocumentFields
-        BeforeFields={() => (
+        BeforeFields={
           <Fragment>
             {auth && (
               <Auth
@@ -78,7 +78,7 @@ export const DefaultCollectionEdit: React.FC<CollectionEditViewProps> = (props)
             )}
             {upload && <Upload collection={collection} internalState={internalState} />}
           </Fragment>
-        )}
+        }
         fields={fields}
         hasSavePermission={hasSavePermission}
         permissions={permissions}