fix: extends server props onto field component types (#8155)

packages/payload/src/admin/forms/Field.ts

@@ -1,7 +1,7 @@
 import type { MarkOptional } from 'ts-essentials'
 
 import type { User } from '../../auth/types.js'
-import type { Locale } from '../../config/types.js'
+import type { Locale, ServerProps } from '../../config/types.js'
 import type { ClientField, Field, Validate } from '../../fields/config/types.js'
 import type { DocumentPreferences } from '../../preferences/types.js'
 import type { FieldDescriptionClientProps, FieldDescriptionServerProps } from './Description.js'
@@ -24,7 +24,8 @@ export type ServerFieldBase<TFieldServer extends Field = Field> = {
   readonly errorProps?: FieldErrorServerProps<TFieldServer>
   readonly field: TFieldServer
   readonly labelProps?: FieldLabelServerProps<TFieldServer>
-} & FormFieldBase
+} & FormFieldBase &
+  Partial<ServerProps>
 
 export type FormFieldBase = {
   readonly docPreferences?: DocumentPreferences

packages/payload/src/fields/config/types.ts

@@ -5,6 +5,7 @@ import type { JSONSchema4 } from 'json-schema'
 import type { CSSProperties } from 'react'
 import type { DeepUndefinable } from 'ts-essentials'
 
+import type { FieldClientComponent, FieldServerComponent } from '../../admin/forms/Field.js'
 import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
 import type {
   ArrayFieldClientProps,
@@ -233,7 +234,7 @@ type Admin = {
   components?: {
     Cell?: CustomComponent
     Description?: CustomComponent<FieldDescriptionClientComponent | FieldDescriptionServerComponent>
-    Field?: CustomComponent
+    Field?: CustomComponent<FieldClientComponent | FieldServerComponent>
     /**
      * The Filter component has to be a client component
      */

test/_community/collections/Posts/MyClientComponent.tsx

@@ -1,9 +1,9 @@
 'use client'
-import type { TextFieldClientComponent } from 'payload'
+import type { TextFieldLabelClientComponent } from 'payload'
 
 import React from 'react'
 
-export const MyClientComponent: TextFieldClientComponent = (props) => {
+export const MyClientComponent: TextFieldLabelClientComponent = (props) => {
   const { field } = props
   return <p>{`The name of this field is: ${field.name}`}</p>
 }

test/_community/collections/Posts/MyServerComponent.tsx

@@ -1,9 +1,13 @@
-import type { TextFieldServerComponent } from 'payload'
+import type { TextFieldLabelServerComponent } from 'payload'
 
 import React from 'react'
 
-export const MyServerComponent: TextFieldServerComponent = (props) => {
+export const MyServerComponent: TextFieldLabelServerComponent = (props) => {
   const { field } = props
 
-  return <p>{`The name of this field is: ${field.name}`}</p>
+  return (
+    <div>
+      <p>{`The name of this field is: ${field.name}`}</p>
+    </div>
+  )
 }