feat: passes client field config to server components (#8166)

## Description

### TL;DR:

It's currently not possible to render our field components from a server
component because their `field` prop is the original field config, not
the _client_ config which our components require. Currently, the `field`
prop passed into custom fields changes type depending on whether it's a
server or client component, leaving server components without any access
to the client field config or mechanism to acquire it.

This PR passes the client config to all server field components through
a new `clientField` prop. This allows the following in a server
component, which is very similar to how client field components
currently work:

Server component:

```tsx
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'

export const MyCustomServerField: TextFieldServerComponent = ({ clientField }) => {
  return <TextField field={clientField} />
}
```

Client component:

```tsx
'use client'
import { TextField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'

export const MyCustomClientField: TextFieldClientComponent = ({ field }) => {
  return <TextField field={field} />
}
```

### Full Background

If you have a custom field component, and it's a server component, there
is currently no way to pass the field prop into Payload's client-side
field components.

Here's an example of the problem:

```tsx
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'

import React from 'react'

export const MyServerComponent: TextFieldServerComponent = (props) => {
  const { field } = props

  return (
    <TextField field={field} /> // This is not possible
  )
}
```

The config needs to be transformed into a client config, however,
because of the sheer number of hard-to-find arguments that the
`createClientField` requires, we cannot use it in its raw form.

Here is another example of the problem:

```tsx
import { TextField } from '@payloadcms/ui'
import { createClientField } from '@payloadcms/ui/utilities/createClientField'
import type { TextFieldServerComponent } from 'payload'

import React from 'react'

export const MyServerComponent: TextFieldServerComponent = ({ createClientField }) => {
  const clientField = createClientField({...}) // Not a good option bc it requires many hard-to-find args

  return (
    <TextField field={clientField} />
  )
}
```

Theoretically, we could preformat a `createFieldConfig` function so it
can simply be called without arguments:

```tsx
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'

import React from 'react'

export const MyServerComponent: TextFieldServerComponent = ({ createClientField }) => {
  return <TextField field={createClientField()} />
}
```

But this means the field config would be evaluated twice unnecessarily,
including label functions, etc.

The right way to fix this is to simply pass the client config to server
components through a new `clientField` prop:

```tsx
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'

import React from 'react'

export const MyServerComponent: TextFieldServerComponent = ({ clientField }) => {
  return <TextField field={clientField} />
}
```

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## Checklist:

- [x] Existing test suite passes locally with my changes
- [x] I have made corresponding changes to the documentation

docs/admin/fields.mdx

@@ -136,7 +136,8 @@ All Field Components receive the following props:
 | Property         | Description                                                                                                                                                                                                                      |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`docPreferences`** | An object that contains the [Preferences](./preferences) for the document.
-| **`field`** | The field's config. [More details](#the-field-prop) |
+| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). |
+| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). |
 | **`locale`**     | The locale of the field. [More details](../configuration/localization).                                                                                                                                                                   |
 | **`readOnly`**   | A boolean value that represents if the field is read-only or not.                                                                                                                                                                  |
 | **`user`**       | The currently authenticated user. [More details](../authentication/overview). |
@@ -189,24 +190,27 @@ import type {
 
 ### The `field` Prop
 
-All Field Components are passed their own Field Config through a common `field` prop. Within a Server Component, this is the raw Field Config. Within Client Components, however, the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types). Instead, Client Components receives a [Client Config](./components#accessing-the-payload-config), which is a sanitizes version of the Field Config that is safe to pass into Client Components.
+All Field Components are passed their own Field Config through a common `field` prop. Within Server Components, this is the original Field Config as written within your Payload Config. Within Client Components, however, this is a "Client Config", which is a sanitized, client-friendly version of the Field Config. This is because the original Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types), meaning it cannot be passed into Client Components without first being transformed.
 
-The exact shape of this prop is unique to the specific [Field Type](../fields/overview) being rendered, minus all non-serializable properties. Any [Custom Components](../components) are also resolved into a "mapped component" that is safe to pass.
+The Client Field Config is an exact copy of the original Field Config, minus all non-serializable properties, plus all evaluated functions such as field labels, [Custom Components](../components), etc.
+
+Server Component:
 
 ```tsx
 import React from 'react'
 import type { TextFieldServerComponent } from 'payload'
+import { TextField } from '@payloadcms/ui'
 
-export const MyServerTextField: TextFieldServerComponent = ({ payload, field: { name } }) => {
+export const MyServerField: TextFieldServerComponent = ({ clientField }) => {
-  const result = await payload.find({
+  return <TextField field={clientField} />
-    collection: 'myCollection',
-    depth: 1,
-  })
-
-  // ...
 }
 ```
 
+<Banner type="info">
+  <strong>Tip:</strong>
+  Server Components can still access the original Field Config through the `field` prop.
+</Banner>
+
 Client Component:
 
 ```tsx
@@ -214,12 +218,8 @@ Client Component:
 import React from 'react'
 import type { TextFieldClientComponent } from 'payload'
 
-export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => {
+export const MyTextField: TextFieldClientComponent = ({ field }) => {
-  return (
+  return <TextField field={field} />
-    <p>
-      {`This field's name is ${name}`}
-    </p>
-  )
 }
 ```
 
@@ -276,7 +276,8 @@ All Cell Components receive the following props:
 
 | Property         | Description                                                       |
 | ---------------- | ----------------------------------------------------------------- |
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). |
+| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). |
 | **`link`** | A boolean representing whether this cell should be wrapped in a link. |
 | **`onClick`** | A function that is called when the cell is clicked. |
 
@@ -316,7 +317,8 @@ Custom Label Components receive all [Field Component](#the-field-component) prop
 
 | Property       | Description                                                      |
 | -------------- | ---------------------------------------------------------------- |
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). |
+| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). |
 
 <Banner type="success">
   <strong>Reminder:</strong>
@@ -361,7 +363,8 @@ Custom Error Components receive all [Field Component](#the-field-component) prop
 
 | Property        | Description                                                   |
 | --------------- | ------------------------------------------------------------- |
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). |
+| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). |
 
 <Banner type="success">
   <strong>Reminder:</strong>
@@ -477,7 +480,8 @@ Custom Description Components receive all [Field Component](#the-field-component
 
 | Property       | Description                                                      |
 | -------------- | ---------------------------------------------------------------- |
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). |
+| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). |
 
 <Banner type="success">
   <strong>Reminder:</strong>

packages/payload/src/admin/fields/Array.ts

@@ -27,24 +27,36 @@ type ArrayFieldBaseClientProps = {
 export type ArrayFieldClientProps = ArrayFieldBaseClientProps &
   ClientFieldBase<ArrayFieldClientWithoutType>
 
-export type ArrayFieldServerProps = ServerFieldBase<ArrayField>
+export type ArrayFieldServerProps = ServerFieldBase<ArrayField, ArrayFieldClientWithoutType>
 
-export type ArrayFieldServerComponent = FieldServerComponent<ArrayField>
+export type ArrayFieldServerComponent = FieldServerComponent<
+  ArrayField,
+  ArrayFieldClientWithoutType
+>
 
 export type ArrayFieldClientComponent = FieldClientComponent<
   ArrayFieldClientWithoutType,
   ArrayFieldBaseClientProps
 >
 
-export type ArrayFieldLabelServerComponent = FieldLabelServerComponent<ArrayField>
+export type ArrayFieldLabelServerComponent = FieldLabelServerComponent<
+  ArrayField,
+  ArrayFieldClientWithoutType
+>
 
 export type ArrayFieldLabelClientComponent = FieldLabelClientComponent<ArrayFieldClientWithoutType>
 
-export type ArrayFieldDescriptionServerComponent = FieldDescriptionServerComponent<ArrayField>
+export type ArrayFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  ArrayField,
+  ArrayFieldClientWithoutType
+>
 
 export type ArrayFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<ArrayFieldClientWithoutType>
 
-export type ArrayFieldErrorServerComponent = FieldErrorServerComponent<ArrayField>
+export type ArrayFieldErrorServerComponent = FieldErrorServerComponent<
+  ArrayField,
+  ArrayFieldClientWithoutType
+>
 
 export type ArrayFieldErrorClientComponent = FieldErrorClientComponent<ArrayFieldClientWithoutType>

packages/payload/src/admin/fields/Blocks.ts

@@ -25,26 +25,38 @@ type BlocksFieldBaseClientProps = {
 export type BlocksFieldClientProps = BlocksFieldBaseClientProps &
   ClientFieldBase<BlocksFieldClientWithoutType>
 
-export type BlocksFieldServerProps = ServerFieldBase<BlocksField>
+export type BlocksFieldServerProps = ServerFieldBase<BlocksField, BlocksFieldClientWithoutType>
 
-export type BlocksFieldServerComponent = FieldServerComponent<BlocksField>
+export type BlocksFieldServerComponent = FieldServerComponent<
+  BlocksField,
+  BlocksFieldClientWithoutType
+>
 
 export type BlocksFieldClientComponent = FieldClientComponent<
   BlocksFieldClientWithoutType,
   BlocksFieldBaseClientProps
 >
 
-export type BlocksFieldLabelServerComponent = FieldLabelServerComponent<BlocksField>
+export type BlocksFieldLabelServerComponent = FieldLabelServerComponent<
+  BlocksField,
+  BlocksFieldClientWithoutType
+>
 
 export type BlocksFieldLabelClientComponent =
   FieldLabelClientComponent<BlocksFieldClientWithoutType>
 
-export type BlocksFieldDescriptionServerComponent = FieldDescriptionServerComponent<BlocksField>
+export type BlocksFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  BlocksField,
+  BlocksFieldClientWithoutType
+>
 
 export type BlocksFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<BlocksFieldClientWithoutType>
 
-export type BlocksFieldErrorServerComponent = FieldErrorServerComponent<BlocksField>
+export type BlocksFieldErrorServerComponent = FieldErrorServerComponent<
+  BlocksField,
+  BlocksFieldClientWithoutType
+>
 
 export type BlocksFieldErrorClientComponent =
   FieldErrorClientComponent<BlocksFieldClientWithoutType>

packages/payload/src/admin/fields/Checkbox.ts

@@ -30,26 +30,41 @@ type CheckboxFieldBaseClientProps = {
 export type CheckboxFieldClientProps = CheckboxFieldBaseClientProps &
   ClientFieldBase<CheckboxFieldClientWithoutType>
 
-export type CheckboxFieldServerProps = ServerFieldBase<CheckboxField>
+export type CheckboxFieldServerProps = ServerFieldBase<
+  CheckboxField,
+  CheckboxFieldClientWithoutType
+>
 
-export type CheckboxFieldServerComponent = FieldServerComponent<CheckboxField>
+export type CheckboxFieldServerComponent = FieldServerComponent<
+  CheckboxField,
+  CheckboxFieldClientWithoutType
+>
 
 export type CheckboxFieldClientComponent = FieldClientComponent<
   CheckboxFieldClientWithoutType,
   CheckboxFieldBaseClientProps
 >
 
-export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent<CheckboxField>
+export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent<
+  CheckboxField,
+  CheckboxFieldClientWithoutType
+>
 
 export type CheckboxFieldLabelClientComponent =
   FieldLabelClientComponent<CheckboxFieldClientWithoutType>
 
-export type CheckboxFieldDescriptionServerComponent = FieldDescriptionServerComponent<CheckboxField>
+export type CheckboxFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  CheckboxField,
+  CheckboxFieldClientWithoutType
+>
 
 export type CheckboxFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<CheckboxFieldClientWithoutType>
 
-export type CheckboxFieldErrorServerComponent = FieldErrorServerComponent<CheckboxField>
+export type CheckboxFieldErrorServerComponent = FieldErrorServerComponent<
+  CheckboxField,
+  CheckboxFieldClientWithoutType
+>
 
 export type CheckboxFieldErrorClientComponent =
   FieldErrorClientComponent<CheckboxFieldClientWithoutType>

packages/payload/src/admin/fields/Code.ts

@@ -26,24 +26,33 @@ type CodeFieldBaseClientProps = {
 export type CodeFieldClientProps = ClientFieldBase<CodeFieldClientWithoutType> &
   CodeFieldBaseClientProps
 
-export type CodeFieldServerProps = ServerFieldBase<CodeField>
+export type CodeFieldServerProps = ServerFieldBase<CodeField, CodeFieldClientWithoutType>
 
-export type CodeFieldServerComponent = FieldServerComponent<CodeField>
+export type CodeFieldServerComponent = FieldServerComponent<CodeField, CodeFieldClientWithoutType>
 
 export type CodeFieldClientComponent = FieldClientComponent<
   CodeFieldClientWithoutType,
   CodeFieldBaseClientProps
 >
 
-export type CodeFieldLabelServerComponent = FieldLabelServerComponent<CodeField>
+export type CodeFieldLabelServerComponent = FieldLabelServerComponent<
+  CodeField,
+  CodeFieldClientWithoutType
+>
 
 export type CodeFieldLabelClientComponent = FieldLabelClientComponent<CodeFieldClientWithoutType>
 
-export type CodeFieldDescriptionServerComponent = FieldDescriptionServerComponent<CodeField>
+export type CodeFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  CodeField,
+  CodeFieldClientWithoutType
+>
 
 export type CodeFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<CodeFieldClientWithoutType>
 
-export type CodeFieldErrorServerComponent = FieldErrorServerComponent<CodeField>
+export type CodeFieldErrorServerComponent = FieldErrorServerComponent<
+  CodeField,
+  CodeFieldClientWithoutType
+>
 
 export type CodeFieldErrorClientComponent = FieldErrorClientComponent<CodeFieldClientWithoutType>

packages/payload/src/admin/fields/Collapsible.ts

@@ -19,25 +19,39 @@ type CollapsibleFieldClientWithoutType = MarkOptional<CollapsibleFieldClient, 't
 
 export type CollapsibleFieldClientProps = ClientFieldBase<CollapsibleFieldClientWithoutType>
 
-export type CollapsibleFieldServerProps = ServerFieldBase<CollapsibleField>
+export type CollapsibleFieldServerProps = ServerFieldBase<
+  CollapsibleField,
+  CollapsibleFieldClientWithoutType
+>
 
-export type CollapsibleFieldServerComponent = FieldServerComponent<CollapsibleField>
+export type CollapsibleFieldServerComponent = FieldServerComponent<
+  CollapsibleField,
+  CollapsibleFieldClientWithoutType
+>
 
 export type CollapsibleFieldClientComponent =
   FieldClientComponent<CollapsibleFieldClientWithoutType>
 
-export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent<CollapsibleField>
+export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent<
+  CollapsibleField,
+  CollapsibleFieldClientWithoutType
+>
 
 export type CollapsibleFieldLabelClientComponent =
   FieldLabelClientComponent<CollapsibleFieldClientWithoutType>
 
-export type CollapsibleFieldDescriptionServerComponent =
+export type CollapsibleFieldDescriptionServerComponent = FieldDescriptionServerComponent<
-  FieldDescriptionServerComponent<CollapsibleField>
+  CollapsibleField,
+  CollapsibleFieldClientWithoutType
+>
 
 export type CollapsibleFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<CollapsibleFieldClientWithoutType>
 
-export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent<CollapsibleField>
+export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent<
+  CollapsibleField,
+  CollapsibleFieldClientWithoutType
+>
 
 export type CollapsibleFieldErrorClientComponent =
   FieldErrorClientComponent<CollapsibleFieldClientWithoutType>

packages/payload/src/admin/fields/Date.ts

@@ -25,24 +25,33 @@ type DateFieldBaseClientProps = {
 export type DateFieldClientProps = ClientFieldBase<DateFieldClientWithoutType> &
   DateFieldBaseClientProps
 
-export type DateFieldServerProps = ServerFieldBase<DateField>
+export type DateFieldServerProps = ServerFieldBase<DateField, DateFieldClientWithoutType>
 
-export type DateFieldServerComponent = FieldServerComponent<DateField>
+export type DateFieldServerComponent = FieldServerComponent<DateField, DateFieldClientWithoutType>
 
 export type DateFieldClientComponent = FieldClientComponent<
   DateFieldClientWithoutType,
   DateFieldBaseClientProps
 >
 
-export type DateFieldLabelServerComponent = FieldLabelServerComponent<DateField>
+export type DateFieldLabelServerComponent = FieldLabelServerComponent<
+  DateField,
+  DateFieldClientWithoutType
+>
 
 export type DateFieldLabelClientComponent = FieldLabelClientComponent<DateFieldClientWithoutType>
 
-export type DateFieldDescriptionServerComponent = FieldDescriptionServerComponent<DateField>
+export type DateFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  DateField,
+  DateFieldClientWithoutType
+>
 
 export type DateFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<DateFieldClientWithoutType>
 
-export type DateFieldErrorServerComponent = FieldErrorServerComponent<DateField>
+export type DateFieldErrorServerComponent = FieldErrorServerComponent<
+  DateField,
+  DateFieldClientWithoutType
+>
 
 export type DateFieldErrorClientComponent = FieldErrorClientComponent<DateFieldClientWithoutType>

packages/payload/src/admin/fields/Email.ts

@@ -26,24 +26,36 @@ type EmailFieldBaseClientProps = {
 export type EmailFieldClientProps = ClientFieldBase<EmailFieldClientWithoutType> &
   EmailFieldBaseClientProps
 
-export type EmailFieldServerProps = ServerFieldBase<EmailField>
+export type EmailFieldServerProps = ServerFieldBase<EmailField, EmailFieldClientWithoutType>
 
-export type EmailFieldServerComponent = FieldServerComponent<EmailField>
+export type EmailFieldServerComponent = FieldServerComponent<
+  EmailField,
+  EmailFieldClientWithoutType
+>
 
 export type EmailFieldClientComponent = FieldClientComponent<
   EmailFieldClientWithoutType,
   EmailFieldBaseClientProps
 >
 
-export type EmailFieldLabelServerComponent = FieldLabelServerComponent<EmailField>
+export type EmailFieldLabelServerComponent = FieldLabelServerComponent<
+  EmailField,
+  EmailFieldClientWithoutType
+>
 
 export type EmailFieldLabelClientComponent = FieldLabelClientComponent<EmailFieldClientWithoutType>
 
-export type EmailFieldDescriptionServerComponent = FieldDescriptionServerComponent<EmailField>
+export type EmailFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  EmailField,
+  EmailFieldClientWithoutType
+>
 
 export type EmailFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<EmailFieldClientWithoutType>
 
-export type EmailFieldErrorServerComponent = FieldErrorServerComponent<EmailField>
+export type EmailFieldErrorServerComponent = FieldErrorServerComponent<
+  EmailField,
+  EmailFieldClientWithoutType
+>
 
 export type EmailFieldErrorClientComponent = FieldErrorClientComponent<EmailFieldClientWithoutType>

packages/payload/src/admin/fields/Group.ts

@@ -19,21 +19,33 @@ type GroupFieldClientWithoutType = MarkOptional<GroupFieldClient, 'type'>
 
 export type GroupFieldClientProps = ClientFieldBase<GroupFieldClientWithoutType>
 
-export type GroupFieldServerProps = ServerFieldBase<GroupField>
+export type GroupFieldServerProps = ServerFieldBase<GroupField, GroupFieldClientWithoutType>
 
-export type GroupFieldServerComponent = FieldServerComponent<GroupField>
+export type GroupFieldServerComponent = FieldServerComponent<
+  GroupField,
+  GroupFieldClientWithoutType
+>
 
 export type GroupFieldClientComponent = FieldClientComponent<GroupFieldClientWithoutType>
 
-export type GroupFieldLabelServerComponent = FieldLabelServerComponent<GroupField>
+export type GroupFieldLabelServerComponent = FieldLabelServerComponent<
+  GroupField,
+  GroupFieldClientWithoutType
+>
 
 export type GroupFieldLabelClientComponent = FieldLabelClientComponent<GroupFieldClientWithoutType>
 
-export type GroupFieldDescriptionServerComponent = FieldDescriptionServerComponent<GroupField>
+export type GroupFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  GroupField,
+  GroupFieldClientWithoutType
+>
 
 export type GroupFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<GroupFieldClientWithoutType>
 
-export type GroupFieldErrorServerComponent = FieldErrorServerComponent<GroupField>
+export type GroupFieldErrorServerComponent = FieldErrorServerComponent<
+  GroupField,
+  GroupFieldClientWithoutType
+>
 
 export type GroupFieldErrorClientComponent = FieldErrorClientComponent<GroupFieldClientWithoutType>

packages/payload/src/admin/fields/JSON.ts

@@ -25,24 +25,33 @@ type JSONFieldBaseClientProps = {
 export type JSONFieldClientProps = ClientFieldBase<JSONFieldClientWithoutType> &
   JSONFieldBaseClientProps
 
-export type JSONFieldServerProps = ServerFieldBase<JSONField>
+export type JSONFieldServerProps = ServerFieldBase<JSONField, JSONFieldClientWithoutType>
 
-export type JSONFieldServerComponent = FieldServerComponent<JSONField>
+export type JSONFieldServerComponent = FieldServerComponent<JSONField, JSONFieldClientWithoutType>
 
 export type JSONFieldClientComponent = FieldClientComponent<
   JSONFieldClientWithoutType,
   JSONFieldBaseClientProps
 >
 
-export type JSONFieldLabelServerComponent = FieldLabelServerComponent<JSONField>
+export type JSONFieldLabelServerComponent = FieldLabelServerComponent<
+  JSONField,
+  JSONFieldClientWithoutType
+>
 
 export type JSONFieldLabelClientComponent = FieldLabelClientComponent<JSONFieldClientWithoutType>
 
-export type JSONFieldDescriptionServerComponent = FieldDescriptionServerComponent<JSONField>
+export type JSONFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  JSONField,
+  JSONFieldClientWithoutType
+>
 
 export type JSONFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<JSONFieldClientWithoutType>
 
-export type JSONFieldErrorServerComponent = FieldErrorServerComponent<JSONField>
+export type JSONFieldErrorServerComponent = FieldErrorServerComponent<
+  JSONField,
+  JSONFieldClientWithoutType
+>
 
 export type JSONFieldErrorClientComponent = FieldErrorClientComponent<JSONFieldClientWithoutType>

packages/payload/src/admin/fields/Number.ts

@@ -26,26 +26,38 @@ type NumberFieldBaseClientProps = {
 export type NumberFieldClientProps = ClientFieldBase<NumberFieldClientWithoutType> &
   NumberFieldBaseClientProps
 
-export type NumberFieldServerProps = ServerFieldBase<NumberField>
+export type NumberFieldServerProps = ServerFieldBase<NumberField, NumberFieldClientWithoutType>
 
-export type NumberFieldServerComponent = FieldServerComponent<NumberField>
+export type NumberFieldServerComponent = FieldServerComponent<
+  NumberField,
+  NumberFieldClientWithoutType
+>
 
 export type NumberFieldClientComponent = FieldClientComponent<
   NumberFieldClientWithoutType,
   NumberFieldBaseClientProps
 >
 
-export type NumberFieldLabelServerComponent = FieldLabelServerComponent<NumberField>
+export type NumberFieldLabelServerComponent = FieldLabelServerComponent<
+  NumberField,
+  NumberFieldClientWithoutType
+>
 
 export type NumberFieldLabelClientComponent =
   FieldLabelClientComponent<NumberFieldClientWithoutType>
 
-export type NumberFieldDescriptionServerComponent = FieldDescriptionServerComponent<NumberField>
+export type NumberFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  NumberField,
+  NumberFieldClientWithoutType
+>
 
 export type NumberFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<NumberFieldClientWithoutType>
 
-export type NumberFieldErrorServerComponent = FieldErrorServerComponent<NumberField>
+export type NumberFieldErrorServerComponent = FieldErrorServerComponent<
+  NumberField,
+  NumberFieldClientWithoutType
+>
 
 export type NumberFieldErrorClientComponent =
   FieldErrorClientComponent<NumberFieldClientWithoutType>

packages/payload/src/admin/fields/Point.ts

@@ -25,24 +25,36 @@ type PointFieldBaseClientProps = {
 export type PointFieldClientProps = ClientFieldBase<PointFieldClientWithoutType> &
   PointFieldBaseClientProps
 
-export type PointFieldServerProps = ServerFieldBase<PointField>
+export type PointFieldServerProps = ServerFieldBase<PointField, PointFieldClientWithoutType>
 
-export type PointFieldServerComponent = FieldServerComponent<PointField>
+export type PointFieldServerComponent = FieldServerComponent<
+  PointField,
+  PointFieldClientWithoutType
+>
 
 export type PointFieldClientComponent = FieldClientComponent<
   PointFieldClientWithoutType,
   PointFieldBaseClientProps
 >
 
-export type PointFieldLabelServerComponent = FieldLabelServerComponent<PointField>
+export type PointFieldLabelServerComponent = FieldLabelServerComponent<
+  PointField,
+  PointFieldClientWithoutType
+>
 
 export type PointFieldLabelClientComponent = FieldLabelClientComponent<PointFieldClientWithoutType>
 
-export type PointFieldDescriptionServerComponent = FieldDescriptionServerComponent<PointField>
+export type PointFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  PointField,
+  PointFieldClientWithoutType
+>
 
 export type PointFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<PointFieldClientWithoutType>
 
-export type PointFieldErrorServerComponent = FieldErrorServerComponent<PointField>
+export type PointFieldErrorServerComponent = FieldErrorServerComponent<
+  PointField,
+  PointFieldClientWithoutType
+>
 
 export type PointFieldErrorClientComponent = FieldErrorClientComponent<PointFieldClientWithoutType>

packages/payload/src/admin/fields/Radio.ts

@@ -27,9 +27,12 @@ type RadioFieldBaseClientProps = {
 export type RadioFieldClientProps = ClientFieldBase<RadioFieldClientWithoutType> &
   RadioFieldBaseClientProps
 
-export type RadioFieldServerProps = ServerFieldBase<RadioField>
+export type RadioFieldServerProps = ServerFieldBase<RadioField, RadioFieldClientWithoutType>
 
-export type RadioFieldServerComponent = FieldServerComponent<RadioField>
+export type RadioFieldServerComponent = FieldServerComponent<
+  RadioField,
+  RadioFieldClientWithoutType
+>
 
 export type RadioFieldClientComponent = FieldClientComponent<
   RadioFieldClientWithoutType,
@@ -38,15 +41,24 @@ export type RadioFieldClientComponent = FieldClientComponent<
 
 export type OnChange<T = string> = (value: T) => void
 
-export type RadioFieldLabelServerComponent = FieldLabelServerComponent<RadioField>
+export type RadioFieldLabelServerComponent = FieldLabelServerComponent<
+  RadioField,
+  RadioFieldClientWithoutType
+>
 
 export type RadioFieldLabelClientComponent = FieldLabelClientComponent<RadioFieldClientWithoutType>
 
-export type RadioFieldDescriptionServerComponent = FieldDescriptionServerComponent<RadioField>
+export type RadioFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  RadioField,
+  RadioFieldClientWithoutType
+>
 
 export type RadioFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<RadioFieldClientWithoutType>
 
-export type RadioFieldErrorServerComponent = FieldErrorServerComponent<RadioField>
+export type RadioFieldErrorServerComponent = FieldErrorServerComponent<
+  RadioField,
+  RadioFieldClientWithoutType
+>
 
 export type RadioFieldErrorClientComponent = FieldErrorClientComponent<RadioFieldClientWithoutType>

packages/payload/src/admin/fields/Relationship.ts

@@ -25,27 +25,41 @@ type RelationshipFieldBaseClientProps = {
 export type RelationshipFieldClientProps = ClientFieldBase<RelationshipFieldClientWithoutType> &
   RelationshipFieldBaseClientProps
 
-export type RelationshipFieldServerProps = ServerFieldBase<RelationshipField>
+export type RelationshipFieldServerProps = ServerFieldBase<
+  RelationshipField,
+  RelationshipFieldClientWithoutType
+>
 
-export type RelationshipFieldServerComponent = FieldServerComponent<RelationshipField>
+export type RelationshipFieldServerComponent = FieldServerComponent<
+  RelationshipField,
+  RelationshipFieldClientWithoutType
+>
 
 export type RelationshipFieldClientComponent = FieldClientComponent<
   RelationshipFieldClientWithoutType,
   RelationshipFieldBaseClientProps
 >
 
-export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent<RelationshipField>
+export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent<
+  RelationshipField,
+  RelationshipFieldClientWithoutType
+>
 
 export type RelationshipFieldLabelClientComponent =
   FieldLabelClientComponent<RelationshipFieldClientWithoutType>
 
-export type RelationshipFieldDescriptionServerComponent =
+export type RelationshipFieldDescriptionServerComponent = FieldDescriptionServerComponent<
-  FieldDescriptionServerComponent<RelationshipField>
+  RelationshipField,
+  RelationshipFieldClientWithoutType
+>
 
 export type RelationshipFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<RelationshipFieldClientWithoutType>
 
-export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent<RelationshipField>
+export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent<
+  RelationshipField,
+  RelationshipFieldClientWithoutType
+>
 
 export type RelationshipFieldErrorClientComponent =
   FieldErrorClientComponent<RelationshipFieldClientWithoutType>

packages/payload/src/admin/fields/RichText.ts

@@ -33,26 +33,41 @@ export type RichTextFieldClientProps<
 > = ClientFieldBase<RichTextFieldClientWithoutType> &
   RichTextFieldBaseClientProps<TValue, TAdapterProps, TExtraProperties>
 
-export type RichTextFieldServerProps = ServerFieldBase<RichTextField>
+export type RichTextFieldServerProps = ServerFieldBase<
+  RichTextField,
+  RichTextFieldClientWithoutType
+>
 
-export type RichTextFieldServerComponent = FieldServerComponent<RichTextField>
+export type RichTextFieldServerComponent = FieldServerComponent<
+  RichTextField,
+  RichTextFieldClientWithoutType
+>
 
 export type RichTextFieldClientComponent = FieldClientComponent<
   RichTextFieldClientWithoutType,
   RichTextFieldBaseClientProps
 >
 
-export type RichTextFieldLabelServerComponent = FieldLabelServerComponent<RichTextField>
+export type RichTextFieldLabelServerComponent = FieldLabelServerComponent<
+  RichTextField,
+  RichTextFieldClientWithoutType
+>
 
 export type RichTextFieldLabelClientComponent =
   FieldLabelClientComponent<RichTextFieldClientWithoutType>
 
-export type RichTextFieldDescriptionServerComponent = FieldDescriptionServerComponent<RichTextField>
+export type RichTextFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  RichTextField,
+  RichTextFieldClientWithoutType
+>
 
 export type RichTextFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<RichTextFieldClientWithoutType>
 
-export type RichTextFieldErrorServerComponent = FieldErrorServerComponent<RichTextField>
+export type RichTextFieldErrorServerComponent = FieldErrorServerComponent<
+  RichTextField,
+  RichTextFieldClientWithoutType
+>
 
 export type RichTextFieldErrorClientComponent =
   FieldErrorClientComponent<RichTextFieldClientWithoutType>

packages/payload/src/admin/fields/Row.ts

@@ -26,24 +26,33 @@ type RowFieldBaseClientProps = {
 export type RowFieldClientProps = ClientFieldBase<RowFieldClientWithoutType> &
   RowFieldBaseClientProps
 
-export type RowFieldServerProps = ServerFieldBase<RowField>
+export type RowFieldServerProps = ServerFieldBase<RowField, RowFieldClientWithoutType>
 
-export type RowFieldServerComponent = FieldServerComponent<RowField>
+export type RowFieldServerComponent = FieldServerComponent<RowField, RowFieldClientWithoutType>
 
 export type RowFieldClientComponent = FieldClientComponent<
   RowFieldClientWithoutType,
   RowFieldBaseClientProps
 >
 
-export type RowFieldLabelServerComponent = FieldLabelServerComponent<RowField>
+export type RowFieldLabelServerComponent = FieldLabelServerComponent<
+  RowField,
+  RowFieldClientWithoutType
+>
 
 export type RowFieldLabelClientComponent = FieldLabelClientComponent<RowFieldClientWithoutType>
 
-export type RowFieldDescriptionServerComponent = FieldDescriptionServerComponent<RowField>
+export type RowFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  RowField,
+  RowFieldClientWithoutType
+>
 
 export type RowFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<RowFieldClientWithoutType>
 
-export type RowFieldErrorServerComponent = FieldErrorServerComponent<RowField>
+export type RowFieldErrorServerComponent = FieldErrorServerComponent<
+  RowField,
+  RowFieldClientWithoutType
+>
 
 export type RowFieldErrorClientComponent = FieldErrorClientComponent<RowFieldClientWithoutType>

packages/payload/src/admin/fields/Select.ts

@@ -27,26 +27,38 @@ type SelectFieldBaseClientProps = {
 export type SelectFieldClientProps = ClientFieldBase<SelectFieldClientWithoutType> &
   SelectFieldBaseClientProps
 
-export type SelectFieldServerProps = ServerFieldBase<SelectField>
+export type SelectFieldServerProps = ServerFieldBase<SelectField, SelectFieldClientWithoutType>
 
-export type SelectFieldServerComponent = FieldServerComponent<SelectField>
+export type SelectFieldServerComponent = FieldServerComponent<
+  SelectField,
+  SelectFieldClientWithoutType
+>
 
 export type SelectFieldClientComponent = FieldClientComponent<
   SelectFieldClientWithoutType,
   SelectFieldBaseClientProps
 >
 
-export type SelectFieldLabelServerComponent = FieldLabelServerComponent<SelectField>
+export type SelectFieldLabelServerComponent = FieldLabelServerComponent<
+  SelectField,
+  SelectFieldClientWithoutType
+>
 
 export type SelectFieldLabelClientComponent =
   FieldLabelClientComponent<SelectFieldClientWithoutType>
 
-export type SelectFieldDescriptionServerComponent = FieldDescriptionServerComponent<SelectField>
+export type SelectFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  SelectField,
+  SelectFieldClientWithoutType
+>
 
 export type SelectFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<SelectFieldClientWithoutType>
 
-export type SelectFieldErrorServerComponent = FieldErrorServerComponent<SelectField>
+export type SelectFieldErrorServerComponent = FieldErrorServerComponent<
+  SelectField,
+  SelectFieldClientWithoutType
+>
 
 export type SelectFieldErrorClientComponent =
   FieldErrorClientComponent<SelectFieldClientWithoutType>

packages/payload/src/admin/fields/Tabs.ts

@@ -29,21 +29,30 @@ type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
 
 export type TabsFieldClientProps = ClientFieldBase<TabsFieldClientWithoutType>
 
-export type TabsFieldServerProps = ServerFieldBase<TabsField>
+export type TabsFieldServerProps = ServerFieldBase<TabsField, TabsFieldClientWithoutType>
 
-export type TabsFieldServerComponent = FieldServerComponent<TabsField>
+export type TabsFieldServerComponent = FieldServerComponent<TabsField, TabsFieldClientWithoutType>
 
 export type TabsFieldClientComponent = FieldClientComponent<TabsFieldClientWithoutType>
 
-export type TabsFieldLabelServerComponent = FieldLabelServerComponent<TabsField>
+export type TabsFieldLabelServerComponent = FieldLabelServerComponent<
+  TabsField,
+  TabsFieldClientWithoutType
+>
 
 export type TabsFieldLabelClientComponent = FieldLabelClientComponent<TabsFieldClientWithoutType>
 
-export type TabsFieldDescriptionServerComponent = FieldDescriptionServerComponent<TabsField>
+export type TabsFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  TabsField,
+  TabsFieldClientWithoutType
+>
 
 export type TabsFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<TabsFieldClientWithoutType>
 
-export type TabsFieldErrorServerComponent = FieldErrorServerComponent<TabsField>
+export type TabsFieldErrorServerComponent = FieldErrorServerComponent<
+  TabsField,
+  TabsFieldClientWithoutType
+>
 
 export type TabsFieldErrorClientComponent = FieldErrorClientComponent<TabsFieldClientWithoutType>

packages/payload/src/admin/fields/Text.ts

@@ -28,24 +28,33 @@ type TextFieldBaseClientProps = {
 export type TextFieldClientProps = ClientFieldBase<TextFieldClientWithoutType> &
   TextFieldBaseClientProps
 
-export type TextFieldServerProps = ServerFieldBase<TextField>
+export type TextFieldServerProps = ServerFieldBase<TextField, TextFieldClientWithoutType>
 
-export type TextFieldServerComponent = FieldServerComponent<TextField>
+export type TextFieldServerComponent = FieldServerComponent<TextField, TextFieldClientWithoutType>
 
 export type TextFieldClientComponent = FieldClientComponent<
   TextFieldClientWithoutType,
   TextFieldBaseClientProps
 >
 
-export type TextFieldLabelServerComponent = FieldLabelServerComponent<TextField>
+export type TextFieldLabelServerComponent = FieldLabelServerComponent<
+  TextField,
+  TextFieldClientWithoutType
+>
 
 export type TextFieldLabelClientComponent = FieldLabelClientComponent<TextFieldClientWithoutType>
 
-export type TextFieldDescriptionServerComponent = FieldDescriptionServerComponent<TextField>
+export type TextFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  TextField,
+  TextFieldClientWithoutType
+>
 
 export type TextFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<TextFieldClientWithoutType>
 
-export type TextFieldErrorServerComponent = FieldErrorServerComponent<TextField>
+export type TextFieldErrorServerComponent = FieldErrorServerComponent<
+  TextField,
+  TextFieldClientWithoutType
+>
 
 export type TextFieldErrorClientComponent = FieldErrorClientComponent<TextFieldClientWithoutType>

packages/payload/src/admin/fields/Textarea.ts

@@ -28,26 +28,41 @@ type TextareaFieldBaseClientProps = {
 export type TextareaFieldClientProps = ClientFieldBase<TextareaFieldClientWithoutType> &
   TextareaFieldBaseClientProps
 
-export type TextareaFieldServerProps = ServerFieldBase<TextareaField>
+export type TextareaFieldServerProps = ServerFieldBase<
+  TextareaField,
+  TextareaFieldClientWithoutType
+>
 
-export type TextareaFieldServerComponent = FieldServerComponent<TextareaField>
+export type TextareaFieldServerComponent = FieldServerComponent<
+  TextareaField,
+  TextareaFieldClientWithoutType
+>
 
 export type TextareaFieldClientComponent = FieldClientComponent<
   TextareaFieldClientWithoutType,
   TextareaFieldBaseClientProps
 >
 
-export type TextareaFieldLabelServerComponent = FieldLabelServerComponent<TextareaField>
+export type TextareaFieldLabelServerComponent = FieldLabelServerComponent<
+  TextareaField,
+  TextareaFieldClientWithoutType
+>
 
 export type TextareaFieldLabelClientComponent =
   FieldLabelClientComponent<TextareaFieldClientWithoutType>
 
-export type TextareaFieldDescriptionServerComponent = FieldDescriptionServerComponent<TextareaField>
+export type TextareaFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  TextareaField,
+  TextareaFieldClientWithoutType
+>
 
 export type TextareaFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<TextareaFieldClientWithoutType>
 
-export type TextareaFieldErrorServerComponent = FieldErrorServerComponent<TextareaField>
+export type TextareaFieldErrorServerComponent = FieldErrorServerComponent<
+  TextareaField,
+  TextareaFieldClientWithoutType
+>
 
 export type TextareaFieldErrorClientComponent =
   FieldErrorClientComponent<TextareaFieldClientWithoutType>

packages/payload/src/admin/fields/Upload.ts

@@ -25,26 +25,38 @@ type UploadFieldBaseClientProps = {
 export type UploadFieldClientProps = ClientFieldBase<UploadFieldClientWithoutType> &
   UploadFieldBaseClientProps
 
-export type UploadFieldServerProps = ServerFieldBase<UploadField>
+export type UploadFieldServerProps = ServerFieldBase<UploadField, UploadFieldClientWithoutType>
 
-export type UploadFieldServerComponent = FieldServerComponent<UploadField>
+export type UploadFieldServerComponent = FieldServerComponent<
+  UploadField,
+  UploadFieldClientWithoutType
+>
 
 export type UploadFieldClientComponent = FieldClientComponent<
   UploadFieldClientWithoutType,
   UploadFieldBaseClientProps
 >
 
-export type UploadFieldLabelServerComponent = FieldLabelServerComponent<UploadField>
+export type UploadFieldLabelServerComponent = FieldLabelServerComponent<
+  UploadField,
+  UploadFieldClientWithoutType
+>
 
 export type UploadFieldLabelClientComponent =
   FieldLabelClientComponent<UploadFieldClientWithoutType>
 
-export type UploadFieldDescriptionServerComponent = FieldDescriptionServerComponent<UploadField>
+export type UploadFieldDescriptionServerComponent = FieldDescriptionServerComponent<
+  UploadField,
+  UploadFieldClientWithoutType
+>
 
 export type UploadFieldDescriptionClientComponent =
   FieldDescriptionClientComponent<UploadFieldClientWithoutType>
 
-export type UploadFieldErrorServerComponent = FieldErrorServerComponent<UploadField>
+export type UploadFieldErrorServerComponent = FieldErrorServerComponent<
+  UploadField,
+  UploadFieldClientWithoutType
+>
 
 export type UploadFieldErrorClientComponent =
   FieldErrorClientComponent<UploadFieldClientWithoutType>

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

@@ -9,8 +9,10 @@ export type FieldDescriptionClientComponent<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = React.ComponentType<FieldDescriptionClientProps<TFieldClient>>
 
-export type FieldDescriptionServerComponent<TFieldServer extends Field = Field> =
+export type FieldDescriptionServerComponent<
-  React.ComponentType<FieldDescriptionServerProps<TFieldServer>>
+  TFieldServer extends Field = Field,
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = React.ComponentType<FieldDescriptionServerProps<TFieldServer, TFieldClient>>
 
 export type StaticDescription = Record<string, string> | string
 
@@ -23,8 +25,12 @@ export type GenericDescriptionProps = {
   readonly marginPlacement?: 'bottom' | 'top'
 }
 
-export type FieldDescriptionServerProps<TFieldServer extends Field = Field> = {
+export type FieldDescriptionServerProps<
-  field: TFieldServer
+  TFieldServer extends Field = Field,
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = {
+  clientField?: TFieldClient
+  readonly field: TFieldServer
 } & GenericDescriptionProps &
   Partial<ServerProps>
 

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

@@ -17,8 +17,12 @@ export type FieldErrorClientProps<
   field: TFieldClient
 } & GenericErrorProps
 
-export type FieldErrorServerProps<TFieldServer extends Field> = {
+export type FieldErrorServerProps<
-  field: TFieldServer
+  TFieldServer extends Field,
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = {
+  clientField?: TFieldClient
+  readonly field: TFieldServer
 } & GenericErrorProps &
   Partial<ServerProps>
 
@@ -26,6 +30,7 @@ export type FieldErrorClientComponent<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = React.ComponentType<FieldErrorClientProps<TFieldClient>>
 
-export type FieldErrorServerComponent<TFieldServer extends Field = Field> = React.ComponentType<
+export type FieldErrorServerComponent<
-  FieldErrorServerProps<TFieldServer>
+  TFieldServer extends Field = Field,
->
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = React.ComponentType<FieldErrorServerProps<TFieldServer, TFieldClient>>

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

@@ -19,11 +19,15 @@ export type ClientFieldBase<
   readonly labelProps?: FieldLabelClientProps<TFieldClient>
 } & FormFieldBase
 
-export type ServerFieldBase<TFieldServer extends Field = Field> = {
+export type ServerFieldBase<
-  readonly descriptionProps?: FieldDescriptionServerProps<TFieldServer>
+  TFieldServer extends Field = Field,
-  readonly errorProps?: FieldErrorServerProps<TFieldServer>
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = {
+  readonly clientField: TFieldClient
+  readonly descriptionProps?: FieldDescriptionServerProps<TFieldServer, TFieldClient>
+  readonly errorProps?: FieldErrorServerProps<TFieldServer, TFieldClient>
   readonly field: TFieldServer
-  readonly labelProps?: FieldLabelServerProps<TFieldServer>
+  readonly labelProps?: FieldLabelServerProps<TFieldServer, TFieldClient>
 } & FormFieldBase &
   Partial<ServerProps>
 
@@ -49,5 +53,6 @@ export type FieldClientComponent<
 
 export type FieldServerComponent<
   TFieldServer extends Field = Field,
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
   AdditionalProps extends Record<string, unknown> = Record<string, unknown>,
-> = React.ComponentType<AdditionalProps & ServerFieldBase<TFieldServer>>
+> = React.ComponentType<AdditionalProps & ServerFieldBase<TFieldServer, TFieldClient>>

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

@@ -18,8 +18,12 @@ export type FieldLabelClientProps<
   field: TFieldClient
 } & GenericLabelProps
 
-export type FieldLabelServerProps<TFieldServer extends Field> = {
+export type FieldLabelServerProps<
-  field: TFieldServer
+  TFieldServer extends Field,
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = {
+  clientField?: TFieldClient
+  readonly field: TFieldServer
 } & GenericLabelProps &
   Partial<ServerProps>
 
@@ -32,6 +36,7 @@ export type FieldLabelClientComponent<
   TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
 > = React.ComponentType<FieldLabelClientProps<TFieldClient>>
 
-export type FieldLabelServerComponent<TFieldServer extends Field = Field> = React.ComponentType<
+export type FieldLabelServerComponent<
-  FieldLabelServerProps<TFieldServer>
+  TFieldServer extends Field = Field,
->
+  TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
+> = React.ComponentType<FieldLabelServerProps<TFieldServer, TFieldClient>>

packages/payload/src/admin/types.ts

@@ -305,7 +305,7 @@ export type {
   GenericErrorProps,
 } from './forms/Error.js'
 
-export type { FormFieldBase } from './forms/Field.js'
+export type { FormFieldBase, ServerFieldBase } from './forms/Field.js'
 
 export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js'
 

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { EditorProps } from '@monaco-editor/react'
+import type { I18nClient } from '@payloadcms/translations'
 import type { JSONSchema4 } from 'json-schema'
 import type { CSSProperties } from 'react'
 import type { DeepUndefinable } from 'ts-essentials'
@@ -31,6 +32,7 @@ import type {
   CollapsibleFieldLabelClientComponent,
   CollapsibleFieldLabelServerComponent,
   ConditionalDateProps,
+  CreateMappedComponent,
   DateFieldClientProps,
   DateFieldErrorClientComponent,
   DateFieldErrorServerComponent,
@@ -104,9 +106,15 @@ import type {
 } from '../../config/types.js'
 import type { DBIdentifierName } from '../../database/types.js'
 import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
-import type { CollectionSlug } from '../../index.js'
+import type { CollectionSlug, ImportMap } from '../../index.js'
 import type { DocumentPreferences } from '../../preferences/types.js'
-import type { Operation, PayloadRequest, RequestContext, Where } from '../../types/index.js'
+import type {
+  Operation,
+  Payload,
+  PayloadRequest,
+  RequestContext,
+  Where,
+} from '../../types/index.js'
 
 export type FieldHookArgs<TData extends TypeWithID = any, TValue = any, TSiblingData = any> = {
   /** The collection which the field belongs to. If the field belongs to a global, this will be null. */

packages/ui/src/fields/Password/types.ts

@@ -9,7 +9,7 @@ import type {
   StaticDescription,
   TextFieldClient,
 } from 'payload'
-import type { CSSProperties, ChangeEvent } from 'react'
+import type { ChangeEvent, CSSProperties } from 'react'
 import type React from 'react'
 import type { MarkOptional } from 'ts-essentials'
 

packages/ui/src/providers/Config/createClientConfig/fields.tsx

@@ -19,6 +19,7 @@ import type {
   RowFieldClient,
   RowLabelComponent,
   SelectFieldClient,
+  ServerFieldBase,
   ServerOnlyFieldAdminProperties,
   ServerOnlyFieldProperties,
   TabsFieldClient,
@@ -113,7 +114,14 @@ export const createClientField = ({
     'Label' in incomingField.admin.components &&
     incomingField.admin.components.Label
 
-  const serverProps = { serverProps: { field: incomingField } }
+  const serverProps: {
+    serverProps: ServerFieldBase
+  } = {
+    serverProps: {
+      clientField: undefined,
+      field: incomingField,
+    },
+  }
 
   if ('admin' in incomingField && 'width' in incomingField.admin) {
     clientField.admin.style = {
@@ -352,6 +360,15 @@ export const createClientField = ({
     }
   })
 
+  const fieldServerProps: {
+    serverProps: ServerFieldBase
+  } = {
+    serverProps: {
+      clientField,
+      field: incomingField,
+    },
+  }
+
   type FieldWithDescription = {
     admin: AdminClient
   } & ClientField
@@ -372,7 +389,7 @@ export const createClientField = ({
   if (incomingField?.admin?.components?.Cell !== undefined) {
     clientField.admin.components.Cell = createMappedComponent(
       incomingField.admin.components.Cell,
-      serverProps,
+      fieldServerProps,
       undefined,
       'incomingField.admin.components.Cell',
     )
@@ -390,7 +407,7 @@ export const createClientField = ({
     ;(clientField as FieldWithDescriptionComponent).admin.components.Description =
       createMappedComponent(
         incomingField.admin.components.Description,
-        serverProps,
+        fieldServerProps,
         undefined,
         'incomingField.admin.components.Description',
       )
@@ -410,7 +427,7 @@ export const createClientField = ({
   ) {
     ;(clientField as FieldWithErrorComponent).admin.components.Error = createMappedComponent(
       incomingField.admin.components.Error,
-      serverProps,
+      fieldServerProps,
       undefined,
       'incomingField.admin.components.Error',
     )
@@ -419,7 +436,7 @@ export const createClientField = ({
   if (incomingField?.admin?.components?.Field !== undefined) {
     clientField.admin.components.Field = createMappedComponent(
       incomingField.admin.components.Field,
-      serverProps,
+      fieldServerProps,
       undefined,
       'incomingField.admin.components.Field',
     )
@@ -432,7 +449,7 @@ export const createClientField = ({
   ) {
     clientField.admin.components.Filter = createMappedComponent(
       incomingField.admin.components.Filter,
-      serverProps,
+      fieldServerProps,
       undefined,
       'incomingField.admin.components.Filter',
     )
@@ -452,7 +469,7 @@ export const createClientField = ({
   ) {
     ;(clientField as FieldWithLabelComponent).admin.components.Label = createMappedComponent(
       CustomLabel,
-      serverProps,
+      fieldServerProps,
       undefined,
       'incomingField.admin.components.Label',
     )
@@ -473,7 +490,7 @@ export const createClientField = ({
     ;(clientField as FieldWithBeforeInputComponent).admin.components.beforeInput =
       createMappedComponent(
         incomingField.admin?.components?.beforeInput,
-        serverProps,
+        fieldServerProps,
         undefined,
         'incomingField.admin.components.beforeInput',
       )
@@ -494,7 +511,7 @@ export const createClientField = ({
     ;(clientField as FieldWithAfterInputComponent).admin.components.afterInput =
       createMappedComponent(
         incomingField.admin?.components?.afterInput,
-        serverProps,
+        fieldServerProps,
         undefined,
         'incomingField.admin.components.afterInput',
       )

test/_community/collections/Posts/MyClientComponent.tsx

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

test/_community/collections/Posts/MyClientField.tsx

@@ -0,0 +1,9 @@
+'use client'
+import type { TextFieldClientComponent } from 'payload'
+
+import { TextField } from '@payloadcms/ui'
+import React from 'react'
+
+export const MyClientFieldComponent: TextFieldClientComponent = ({ field }) => {
+  return <TextField field={field} />
+}

test/_community/collections/Posts/MyServerComponent.tsx

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

test/_community/collections/Posts/MyServerField.tsx

@@ -0,0 +1,8 @@
+import type { TextFieldServerComponent } from 'payload'
+
+import { TextField } from '@payloadcms/ui'
+import React from 'react'
+
+export const MyServerFieldComponent: TextFieldServerComponent = ({ clientField }) => {
+  return <TextField field={clientField} />
+}

test/_community/collections/Posts/index.ts

@@ -11,7 +11,7 @@ export const PostsCollection: CollectionConfig = {
     {
       admin: {
         components: {
-          Label: '/collections/Posts/MyClientComponent.js#MyClientComponent',
+          Field: '/collections/Posts/MyClientField.js#MyClientFieldComponent',
         },
       },
       name: 'text',
@@ -21,7 +21,7 @@ export const PostsCollection: CollectionConfig = {
     {
       admin: {
         components: {
-          Label: '/collections/Posts/MyServerComponent.js#MyServerComponent',
+          Field: '/collections/Posts/MyServerField.js#MyServerFieldComponent',
         },
       },
       name: 'serverTextField',

test/databaseAdapter.ts

@@ -1,13 +1,16 @@
-// DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts
 
-import { mongooseAdapter } from '@payloadcms/db-mongodb'
+  // DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts
 
-export const databaseAdapter = mongooseAdapter({
+  
-  url:
+  import { mongooseAdapter } from '@payloadcms/db-mongodb'
-    process.env.MONGODB_MEMORY_SERVER_URI ||
+
-    process.env.DATABASE_URI ||
+  export const databaseAdapter = mongooseAdapter({
-    'mongodb://127.0.0.1/payloadtests',
+    url:
-  collation: {
+      process.env.MONGODB_MEMORY_SERVER_URI ||
-    strength: 1,
+      process.env.DATABASE_URI ||
-  },
+      'mongodb://127.0.0.1/payloadtests',
-})
+    collation: {
+      strength: 1,
+    },
+  })
+  

test/helpers.ts

@@ -198,7 +198,7 @@ export async function openNav(page: Page): Promise<void> {
   // check to see if the nav is already open and if not, open it
   // use the `--nav-open` modifier class to check if the nav is open
   // this will prevent clicking nav links that are bleeding off the screen
-  if (await page.locator('.template-default.template-default--nav-open').isVisible()) return
+  if (await page.locator('.template-default.template-default--nav-open').isVisible()) {return}
   // playwright: get first element with .nav-toggler which is VISIBLE (not hidden), could be 2 elements with .nav-toggler on mobile and desktop but only one is visible
   await page.locator('.nav-toggler >> visible=true').click()
   await expect(page.locator('.template-default.template-default--nav-open')).toBeVisible()
@@ -221,7 +221,7 @@ export async function openCreateDocDrawer(page: Page, fieldSelector: string): Pr
 }
 
 export async function closeNav(page: Page): Promise<void> {
-  if (!(await page.locator('.template-default.template-default--nav-open').isVisible())) return
+  if (!(await page.locator('.template-default.template-default--nav-open').isVisible())) {return}
   await page.locator('.nav-toggler >> visible=true').click()
   await expect(page.locator('.template-default.template-default--nav-open')).toBeHidden()
 }

test/helpers/e2e/openDocControls.ts

@@ -1,4 +1,4 @@
-import { type Locator, type Page, expect } from '@playwright/test'
+import { expect, type Locator, type Page } from '@playwright/test'
 
 export async function openDocControls(page: Locator | Page): Promise<void> {
   await page.locator('.doc-controls__popup >> .popup-button').click()

test/localization/e2e.spec.ts

@@ -256,6 +256,6 @@ describe('Localization', () => {
 async function fillValues(data: Partial<LocalizedPost>) {
   const { description: descVal, title: titleVal } = data
 
-  if (titleVal) await page.locator('#field-title').fill(titleVal)
+  if (titleVal) {await page.locator('#field-title').fill(titleVal)}
-  if (descVal) await page.locator('#field-description').fill(descVal)
+  if (descVal) {await page.locator('#field-description').fill(descVal)}
 }