tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 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
This commit is contained in:
Jacob Fletcher
2024-09-11 15:47:56 -04:00
committed by GitHub
parent 9561aa3f79
commit 8b307012f3
38 changed files with 477 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/admin/fields.mdx
View File

@@ -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 } }) => {
const result = await payload.find({
collection: 'myCollection',
depth: 1,
})
// ...
export const MyServerField: TextFieldServerComponent = ({ clientField }) => {
return <TextField field={clientField} />
}
```
<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 } }) => {
return (
<p>
{`This field's name is ${name}`}
</p>
)
export const MyTextField: TextFieldClientComponent = ({ field }) => {
return <TextField field={field} />
}
```
@@ -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>

22
packages/payload/src/admin/fields/Array.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Blocks.ts
View File

@@ -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>

25
packages/payload/src/admin/fields/Checkbox.ts
View File

@@ -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>

19
packages/payload/src/admin/fields/Code.ts
View File

@@ -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>

26
packages/payload/src/admin/fields/Collapsible.ts
View File

@@ -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 =
FieldDescriptionServerComponent<CollapsibleField>
export type CollapsibleFieldDescriptionServerComponent = FieldDescriptionServerComponent<
CollapsibleField,
CollapsibleFieldClientWithoutType
>
export type CollapsibleFieldDescriptionClientComponent =
FieldDescriptionClientComponent<CollapsibleFieldClientWithoutType>
export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent<CollapsibleField>
export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent<
CollapsibleField,
CollapsibleFieldClientWithoutType
>
export type CollapsibleFieldErrorClientComponent =
FieldErrorClientComponent<CollapsibleFieldClientWithoutType>

19
packages/payload/src/admin/fields/Date.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Email.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Group.ts
View File

@@ -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>

19
packages/payload/src/admin/fields/JSON.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Number.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Point.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Radio.ts
View File

@@ -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>

26
packages/payload/src/admin/fields/Relationship.ts
View File

@@ -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 =
FieldDescriptionServerComponent<RelationshipField>
export type RelationshipFieldDescriptionServerComponent = FieldDescriptionServerComponent<
RelationshipField,
RelationshipFieldClientWithoutType
>
export type RelationshipFieldDescriptionClientComponent =
FieldDescriptionClientComponent<RelationshipFieldClientWithoutType>
export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent<RelationshipField>
export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent<
RelationshipField,
RelationshipFieldClientWithoutType
>
export type RelationshipFieldErrorClientComponent =
FieldErrorClientComponent<RelationshipFieldClientWithoutType>

25
packages/payload/src/admin/fields/RichText.ts
View File

@@ -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>

19
packages/payload/src/admin/fields/Row.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Select.ts
View File

@@ -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>

19
packages/payload/src/admin/fields/Tabs.ts
View File

@@ -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>

19
packages/payload/src/admin/fields/Text.ts
View File

@@ -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>

25
packages/payload/src/admin/fields/Textarea.ts
View File

@@ -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>

22
packages/payload/src/admin/fields/Upload.ts
View File

@@ -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>

14
packages/payload/src/admin/forms/Description.ts
View File

@@ -9,8 +9,10 @@ export type FieldDescriptionClientComponent<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = React.ComponentType<FieldDescriptionClientProps<TFieldClient>>
export type FieldDescriptionServerComponent<TFieldServer extends Field = Field> =
React.ComponentType<FieldDescriptionServerProps<TFieldServer>>
export type FieldDescriptionServerComponent<
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> = {
field: TFieldServer
export type FieldDescriptionServerProps<
TFieldServer extends Field = Field,
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = {
clientField?: TFieldClient
readonly field: TFieldServer
} & GenericDescriptionProps &
Partial<ServerProps>

15
packages/payload/src/admin/forms/Error.ts
View File

@@ -17,8 +17,12 @@ export type FieldErrorClientProps<
field: TFieldClient
} & GenericErrorProps
export type FieldErrorServerProps<TFieldServer extends Field> = {
field: TFieldServer
export type FieldErrorServerProps<
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<
FieldErrorServerProps<TFieldServer>
>
export type FieldErrorServerComponent<
TFieldServer extends Field = Field,
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = React.ComponentType<FieldErrorServerProps<TFieldServer, TFieldClient>>

15
packages/payload/src/admin/forms/Field.ts
View File

@@ -19,11 +19,15 @@ export type ClientFieldBase<
readonly labelProps?: FieldLabelClientProps<TFieldClient>
} & FormFieldBase
export type ServerFieldBase<TFieldServer extends Field = Field> = {
readonly descriptionProps?: FieldDescriptionServerProps<TFieldServer>
readonly errorProps?: FieldErrorServerProps<TFieldServer>
export type ServerFieldBase<
TFieldServer extends Field = Field,
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>>

15
packages/payload/src/admin/forms/Label.ts
View File

@@ -18,8 +18,12 @@ export type FieldLabelClientProps<
field: TFieldClient
} & GenericLabelProps
export type FieldLabelServerProps<TFieldServer extends Field> = {
field: TFieldServer
export type FieldLabelServerProps<
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<
FieldLabelServerProps<TFieldServer>
>
export type FieldLabelServerComponent<
TFieldServer extends Field = Field,
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = React.ComponentType<FieldLabelServerProps<TFieldServer, TFieldClient>>

2
packages/payload/src/admin/types.ts
View File

@@ -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'

12
packages/payload/src/fields/config/types.ts
View File

@@ -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. */

2
packages/ui/src/fields/Password/types.ts
View File

@@ -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'

35
packages/ui/src/providers/Config/createClientConfig/fields.tsx
View File

@@ -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',
)

9
test/_community/collections/Posts/MyClientComponent.tsx
View File

@@ -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>
}

9
test/_community/collections/Posts/MyClientField.tsx Normal file
View File

@@ -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} />
}

13
test/_community/collections/Posts/MyServerComponent.tsx
View File

@@ -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>
)
}

8
test/_community/collections/Posts/MyServerField.tsx Normal file
View File

@@ -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} />
}

4
test/_community/collections/Posts/index.ts
View File

@@ -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',

11
test/databaseAdapter.ts
View File

@@ -1,8 +1,10 @@
// 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({
import { mongooseAdapter } from '@payloadcms/db-mongodb'
export const databaseAdapter = mongooseAdapter({
url:
process.env.MONGODB_MEMORY_SERVER_URI ||
process.env.DATABASE_URI ||
@@ -10,4 +12,5 @@ export const databaseAdapter = mongooseAdapter({
collation: {
strength: 1,
},
})
})

4
test/helpers.ts
View File

@@ -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()
}

2
test/helpers/e2e/openDocControls.ts
View File

@@ -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()

4
test/localization/e2e.spec.ts
View File

@@ -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 (descVal) await page.locator('#field-description').fill(descVal)
if (titleVal) {await page.locator('#field-title').fill(titleVal)}
if (descVal) {await page.locator('#field-description').fill(descVal)}
}