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

feat!: explicitly types field components (#8136)

Browse Source 
## Description

Currently, there is no way of typing custom server field components.
This is because internally, all field components are client components,
and so these were never fully typed. For example, the docs currently
indicate for all custom fields to be typed in this way:

Old:
    
```tsx
export const MyClientTextFieldComponent: React.FC<TextFieldProps>
```

But if your component is a server component, you will never receive the
fully typed `field` prop, `payload` prop, etc. unless you've typed that
yourself using some of the underlying utilities. So to fix this, every
field now explicitly exports a type for each environment:

New:

- Client component:
    ```tsx
    'use client'
    export const MyClientTextFieldComponent: TextFieldClientComponent
    ```

- Server component:
    ```tsx
    export const MyServerTextFieldComponent: TextFieldServerComponent
    ```

This pattern applies to every field type, where the field name is
prepended onto the component type.

```ts
import type {
  TextFieldClientComponent,
  TextFieldServerComponent,
  TextFieldClientProps,
  TextFieldServerProps,
  TextareaFieldClientComponent,
  TextareaFieldServerComponent,
  TextareaFieldClientProps,
  TextareaFieldServerProps,
  // ...and so on for each field type
} from 'payload'
```

## BREAKING CHANGES

We are no longer exporting `TextFieldProps` etc. for each field type.
Instead, we now export props for each client/server environment
explicitly. If you were previously importing one of these types into
your custom component, simply change the import name to reflect your
environment.

Old:

```tsx
import type { TextFieldProps } from 'payload'
``` 

New:

```tsx
import type { TextFieldClientProps, TextFieldServerProps } from 'payload'
``` 

Related: #7754. 

- [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)
- [x] This change requires a documentation update

## 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-09 16:15:10 -04:00
committed by GitHub
parent a8c60c1c02
commit 8e1a5c8dba
63 changed files with 693 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/admin/components.mdx
View File

@@ -431,14 +431,14 @@ export const MyClientComponent: React.FC = () => {
See [Using Hooks](#using-hooks) for more details.
</Banner>
All [Field Components](./fields) automatically receive their respective Client Field Config through a common [`field`](./fields#the-field-prop) prop:
All [Field Components](./fields) automatically receive their respective Field Config through a common [`field`](./fields#the-field-prop) prop:
```tsx
'use client'
import React from 'react'
import type { TextFieldProps } from 'payload'
import type { TextFieldClientComponent } from 'payload'
export const MyClientFieldComponent = ({ field: { name } }: TextFieldProps) => {
export const MyClientFieldComponent: TextFieldClientComponent = ({ field: { name } }) => {
return (
<p>
{`This field's name is ${name}`}

88
docs/admin/fields.mdx
View File

@@ -136,7 +136,7 @@ All Field Components receive the following props:
| Property | Description |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`docPreferences`** | An object that contains the [Preferences](./preferences) for the document.
| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
| **`field`** | The field's config. [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). |
@@ -175,46 +175,46 @@ export const CustomTextField: React.FC = () => {
#### TypeScript
When building Custom Field Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Props` to the type of field, i.e. `TextFieldProps`.
When building Custom Field Components, you can import the component type to ensure type safety. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and for every client/server environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
```tsx
import type {
ArrayFieldProps,
BlocksFieldProps,
CheckboxFieldProps,
CodeFieldProps,
CollapsibleFieldProps,
DateFieldProps,
EmailFieldProps,
GroupFieldProps,
HiddenFieldProps,
JSONFieldProps,
NumberFieldProps,
PointFieldProps,
RadioFieldProps,
RelationshipFieldProps,
RichTextFieldProps,
RowFieldProps,
SelectFieldProps,
TabsFieldProps,
TextFieldProps,
TextareaFieldProps,
UploadFieldProps
TextFieldClientComponent,
TextFieldServerComponent,
TextFieldClientProps,
TextFieldServerProps,
// ...and so on for each Field Type
} from 'payload'
```
### The `field` Prop
All Field Components are passed a client-friendly version of their Field Config through a common `field` prop. Since the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types), Payload sanitized it into a [Client Config](./components#accessing-the-payload-config) that is safe to pass into Client Components.
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.
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.
```tsx
import React from 'react'
import type { TextFieldServerComponent } from 'payload'
export const MyServerTextField: TextFieldServerComponent = ({ payload, field: { name } }) => {
const result = await payload.find({
collection: 'myCollection',
depth: 1,
})
// ...
}
```
Client Component:
```tsx
'use client'
import React from 'react'
import type { TextFieldProps } from 'payload'
import type { TextFieldClientComponent } from 'payload'
export const MyClientFieldComponent: React.FC<TextFieldProps> = ({ field: { name } }) => {
export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => {
return (
<p>
{`This field's name is ${name}`}
@@ -238,40 +238,18 @@ The following additional properties are also provided to the `field` prop:
#### TypeScript
When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Client` to the type of field, i.e. `TextFieldClient`.
When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and server/client environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
```tsx
import type {
ArrayFieldClient,
BlocksFieldClient,
CheckboxFieldClient,
CodeFieldClient,
CollapsibleFieldClient,
DateFieldClient,
EmailFieldClient,
GroupFieldClient,
HiddenFieldClient,
JSONFieldClient,
NumberFieldClient,
PointFieldClient,
RadioFieldClient,
RelationshipFieldClient,
RichTextFieldClient,
RowFieldClient,
SelectFieldClient,
TabsFieldClient,
TextFieldClient,
TextareaFieldClient,
UploadFieldClient
TextFieldClientComponent,
TextFieldServerComponent,
TextFieldClientProps,
TextFieldServerProps,
// ...and so on for each Field Type
} from 'payload'
```
When working on the client, you will never have access to objects of type `Field`. This is reserved for the server-side. Instead, you can use `ClientField` which is a union type of all the client fields:
```tsx
import type { ClientField } from 'payload'
```
### The Cell Component
The Cell Component is rendered in the table of the List View. It represents the value of the field when displayed in a table cell.
@@ -353,7 +331,7 @@ When building Custom Label Components, you can import the component props to ens
import type {
TextFieldLabelServerComponent,
TextFieldLabelClientComponent,
// And so on for each Field Type
// ...and so on for each Field Type
} from 'payload'
```

4
packages/payload/src/admin/RichText.ts
View File

@@ -13,7 +13,7 @@ import type {
} from '../fields/config/types.js'
import type { SanitizedGlobalConfig } from '../globals/config/types.js'
import type { JsonObject, Payload, PayloadRequest, RequestContext } from '../types/index.js'
import type { RichTextFieldProps } from './fields/RichText.js'
import type { RichTextFieldClientProps } from './fields/RichText.js'
import type { CreateMappedComponent } from './types.js'
export type AfterReadRichTextHookArgs<
@@ -261,7 +261,7 @@ export type RichTextAdapter<
ExtraFieldProperties = any,
> = {
CellComponent: PayloadComponent<never>
FieldComponent: PayloadComponent<never, RichTextFieldProps>
FieldComponent: PayloadComponent<never, RichTextFieldClientProps>
} & RichTextAdapterBase<Value, AdapterProps, ExtraFieldProperties>
export type RichTextAdapterProvider<

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

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
import type { ArrayField, ArrayFieldClient } from '../../fields/config/types.js'
import type { ArrayFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
MappedComponent,
} from '../types.js'
type ArrayFieldClientWithoutType = MarkOptional<ArrayFieldClient, 'type'>
export type ArrayFieldProps = {
type ArrayFieldBaseClientProps = {
readonly CustomRowLabel?: MappedComponent
readonly validate?: ArrayFieldValidation
} & Omit<FormFieldBase<ArrayFieldClientWithoutType>, 'validate'>
}
export type ArrayFieldClientProps = ArrayFieldBaseClientProps &
ClientFieldBase<ArrayFieldClientWithoutType>
export type ArrayFieldServerProps = ServerFieldBase<ArrayField>
export type ArrayFieldServerComponent = FieldServerComponent<ArrayField>
export type ArrayFieldClientComponent = FieldClientComponent<
ArrayFieldClientWithoutType,
ArrayFieldBaseClientProps
>
export type ArrayFieldLabelServerComponent = FieldLabelServerComponent<ArrayField>

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { BlockField, BlockFieldClient } from '../../fields/config/types.js'
import type { BlockFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type BlocksFieldClientWithoutType = MarkOptional<BlockFieldClient, 'type'>
export type BlockFieldProps = {
type BlocksFieldBaseClientProps = {
readonly validate?: BlockFieldValidation
} & Omit<FormFieldBase<BlocksFieldClientWithoutType>, 'validate'>
}
export type BlocksFieldClientProps = BlocksFieldBaseClientProps &
ClientFieldBase<BlocksFieldClientWithoutType>
export type BlocksFieldServerProps = ServerFieldBase<BlockField>
export type BlocksFieldServerComponent = FieldServerComponent<BlockField>
export type BlocksFieldClientComponent = FieldClientComponent<
BlocksFieldClientWithoutType,
BlocksFieldBaseClientProps
>
export type BlockFieldLabelServerComponent = FieldLabelServerComponent<BlockField>

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

@@ -3,24 +3,41 @@ import type { MarkOptional } from 'ts-essentials'
import type { CheckboxField, CheckboxFieldClient } from '../../fields/config/types.js'
import type { CheckboxFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type CheckboxFieldClientWithoutType = MarkOptional<CheckboxFieldClient, 'type'>
export type CheckboxFieldProps = {
type CheckboxFieldBaseClientProps = {
readonly checked?: boolean
readonly disableFormData?: boolean
readonly id?: string
readonly onChange?: (value: boolean) => void
readonly partialChecked?: boolean
readonly validate?: CheckboxFieldValidation
} & Omit<FormFieldBase<CheckboxFieldClientWithoutType>, 'validate'>
}
export type CheckboxFieldClientProps = CheckboxFieldBaseClientProps &
ClientFieldBase<CheckboxFieldClientWithoutType>
export type CheckboxFieldServerProps = ServerFieldBase<CheckboxField>
export type CheckboxFieldServerComponent = FieldServerComponent<CheckboxField>
export type CheckboxFieldClientComponent = FieldClientComponent<
CheckboxFieldClientWithoutType,
CheckboxFieldBaseClientProps
>
export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent<CheckboxField>

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

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
import type { CodeField, CodeFieldClient } from '../../fields/config/types.js'
import type { CodeFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type CodeFieldClientWithoutType = MarkOptional<CodeFieldClient, 'type'>
export type CodeFieldProps = {
type CodeFieldBaseClientProps = {
readonly autoComplete?: string
readonly validate?: CodeFieldValidation
} & Omit<FormFieldBase<CodeFieldClientWithoutType>, 'validate'>
readonly valiCode?: CodeFieldValidation
}
export type CodeFieldClientProps = ClientFieldBase<CodeFieldClientWithoutType> &
CodeFieldBaseClientProps
export type CodeFieldServerProps = ServerFieldBase<CodeField>
export type CodeFieldServerComponent = FieldServerComponent<CodeField>
export type CodeFieldClientComponent = FieldClientComponent<
CodeFieldClientWithoutType,
CodeFieldBaseClientProps
>
export type CodeFieldLabelServerComponent = FieldLabelServerComponent<CodeField>

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

@@ -2,17 +2,29 @@ import type { MarkOptional } from 'ts-essentials'
import type { CollapsibleField, CollapsibleFieldClient } from '../../fields/config/types.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type CollapsibleFieldClientWithoutType = MarkOptional<CollapsibleFieldClient, 'type'>
export type CollapsibleFieldProps = FormFieldBase<CollapsibleFieldClientWithoutType>
export type CollapsibleFieldClientProps = ClientFieldBase<CollapsibleFieldClientWithoutType>
export type CollapsibleFieldServerProps = ServerFieldBase<CollapsibleField>
export type CollapsibleFieldServerComponent = FieldServerComponent<CollapsibleField>
export type CollapsibleFieldClientComponent =
FieldClientComponent<CollapsibleFieldClientWithoutType>
export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent<CollapsibleField>

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { DateField, DateFieldClient } from '../../fields/config/types.js'
import type { DateFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type DateFieldClientWithoutType = MarkOptional<DateFieldClient, 'type'>
export type DateFieldProps = {
type DateFieldBaseClientProps = {
readonly validate?: DateFieldValidation
} & Omit<FormFieldBase<DateFieldClientWithoutType>, 'validate'>
}
export type DateFieldClientProps = ClientFieldBase<DateFieldClientWithoutType> &
DateFieldBaseClientProps
export type DateFieldServerProps = ServerFieldBase<DateField>
export type DateFieldServerComponent = FieldServerComponent<DateField>
export type DateFieldClientComponent = FieldClientComponent<
DateFieldClientWithoutType,
DateFieldBaseClientProps
>
export type DateFieldLabelServerComponent = FieldLabelServerComponent<DateField>

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

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
import type { EmailField, EmailFieldClient } from '../../fields/config/types.js'
import type { EmailFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type EmailFieldClientWithoutType = MarkOptional<EmailFieldClient, 'type'>
export type EmailFieldProps = {
type EmailFieldBaseClientProps = {
readonly autoComplete?: string
readonly validate?: EmailFieldValidation
} & Omit<FormFieldBase<EmailFieldClientWithoutType>, 'validate'>
}
export type EmailFieldClientProps = ClientFieldBase<EmailFieldClientWithoutType> &
EmailFieldBaseClientProps
export type EmailFieldServerProps = ServerFieldBase<EmailField>
export type EmailFieldServerComponent = FieldServerComponent<EmailField>
export type EmailFieldClientComponent = FieldClientComponent<
EmailFieldClientWithoutType,
EmailFieldBaseClientProps
>
export type EmailFieldLabelServerComponent = FieldLabelServerComponent<EmailField>

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

@@ -2,17 +2,28 @@ import type { MarkOptional } from 'ts-essentials'
import type { GroupField, GroupFieldClient } from '../../fields/config/types.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type GroupFieldClientWithoutType = MarkOptional<GroupFieldClient, 'type'>
export type GroupFieldProps = FormFieldBase<GroupFieldClientWithoutType>
export type GroupFieldClientProps = ClientFieldBase<GroupFieldClientWithoutType>
export type GroupFieldServerProps = ServerFieldBase<GroupField>
export type GroupFieldServerComponent = FieldServerComponent<GroupField>
export type GroupFieldClientComponent = FieldClientComponent<GroupFieldClientWithoutType>
export type GroupFieldLabelServerComponent = FieldLabelServerComponent<GroupField>

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { JSONField, JSONFieldClient } from '../../fields/config/types.js'
import type { JSONFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type JSONFieldClientWithoutType = MarkOptional<JSONFieldClient, 'type'>
export type JSONFieldProps = {
type JSONFieldBaseClientProps = {
readonly validate?: JSONFieldValidation
} & Omit<FormFieldBase<JSONFieldClientWithoutType>, 'validate'>
}
export type JSONFieldClientProps = ClientFieldBase<JSONFieldClientWithoutType> &
JSONFieldBaseClientProps
export type JSONFieldServerProps = ServerFieldBase<JSONField>
export type JSONFieldServerComponent = FieldServerComponent<JSONField>
export type JSONFieldClientComponent = FieldClientComponent<
JSONFieldClientWithoutType,
JSONFieldBaseClientProps
>
export type JSONFieldLabelServerComponent = FieldLabelServerComponent<JSONField>

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

@@ -3,20 +3,37 @@ import type { MarkOptional } from 'ts-essentials'
import type { NumberField, NumberFieldClient } from '../../fields/config/types.js'
import type { NumberFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type NumberFieldClientWithoutType = MarkOptional<NumberFieldClient, 'type'>
export type NumberFieldProps = {
type NumberFieldBaseClientProps = {
readonly onChange?: (e: number) => void
readonly validate?: NumberFieldValidation
} & Omit<FormFieldBase<NumberFieldClientWithoutType>, 'validate'>
}
export type NumberFieldClientProps = ClientFieldBase<NumberFieldClientWithoutType> &
NumberFieldBaseClientProps
export type NumberFieldServerProps = ServerFieldBase<NumberField>
export type NumberFieldServerComponent = FieldServerComponent<NumberField>
export type NumberFieldClientComponent = FieldClientComponent<
NumberFieldClientWithoutType,
NumberFieldBaseClientProps
>
export type NumberFieldLabelServerComponent = FieldLabelServerComponent<NumberField>

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { PointField, PointFieldClient } from '../../fields/config/types.js'
import type { PointFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type PointFieldClientWithoutType = MarkOptional<PointFieldClient, 'type'>
export type PointFieldProps = {
type PointFieldBaseClientProps = {
readonly validate?: PointFieldValidation
} & Omit<FormFieldBase<PointFieldClientWithoutType>, 'validate'>
}
export type PointFieldClientProps = ClientFieldBase<PointFieldClientWithoutType> &
PointFieldBaseClientProps
export type PointFieldServerProps = ServerFieldBase<PointField>
export type PointFieldServerComponent = FieldServerComponent<PointField>
export type PointFieldClientComponent = FieldClientComponent<
PointFieldClientWithoutType,
PointFieldBaseClientProps
>
export type PointFieldLabelServerComponent = FieldLabelServerComponent<PointField>

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

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
import type { RadioField, RadioFieldClient } from '../../fields/config/types.js'
import type { RadioFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type RadioFieldClientWithoutType = MarkOptional<RadioFieldClient, 'type'>
export type RadioFieldProps = {
type RadioFieldBaseClientProps = {
readonly onChange?: OnChange
readonly validate?: RadioFieldValidation
readonly value?: string
} & Omit<FormFieldBase<RadioFieldClientWithoutType>, 'validate'>
}
export type RadioFieldClientProps = ClientFieldBase<RadioFieldClientWithoutType> &
RadioFieldBaseClientProps
export type RadioFieldServerProps = ServerFieldBase<RadioField>
export type RadioFieldServerComponent = FieldServerComponent<RadioField>
export type RadioFieldClientComponent = FieldClientComponent<
RadioFieldClientWithoutType,
RadioFieldBaseClientProps
>
export type OnChange<T = string> = (value: T) => void

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { RelationshipField, RelationshipFieldClient } from '../../fields/config/types.js'
import type { RelationshipFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type RelationshipFieldClientWithoutType = MarkOptional<RelationshipFieldClient, 'type'>
export type RelationshipFieldProps = {
type RelationshipFieldBaseClientProps = {
readonly validate?: RelationshipFieldValidation
} & Omit<FormFieldBase<RelationshipFieldClientWithoutType>, 'validate'>
}
export type RelationshipFieldClientProps = ClientFieldBase<RelationshipFieldClientWithoutType> &
RelationshipFieldBaseClientProps
export type RelationshipFieldServerProps = ServerFieldBase<RelationshipField>
export type RelationshipFieldServerComponent = FieldServerComponent<RelationshipField>
export type RelationshipFieldClientComponent = FieldClientComponent<
RelationshipFieldClientWithoutType,
RelationshipFieldBaseClientProps
>
export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent<RelationshipField>

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

@@ -3,23 +3,44 @@ import type { MarkOptional } from 'ts-essentials'
import type { RichTextField, RichTextFieldClient } from '../../fields/config/types.js'
import type { RichTextFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type RichTextFieldClientWithoutType = MarkOptional<RichTextFieldClient, 'type'>
export type RichTextFieldProps<
type RichTextFieldBaseClientProps<
TValue extends object = any,
TAdapterProps = any,
TExtraProperties = object,
> = {
readonly validate?: RichTextFieldValidation
} & Omit<FormFieldBase<RichTextFieldClientWithoutType>, 'validate'>
}
export type RichTextFieldClientProps<
TValue extends object = any,
TAdapterProps = any,
TExtraProperties = object,
> = ClientFieldBase<RichTextFieldClientWithoutType> &
RichTextFieldBaseClientProps<TValue, TAdapterProps, TExtraProperties>
export type RichTextFieldServerProps = ServerFieldBase<RichTextField>
export type RichTextFieldServerComponent = FieldServerComponent<RichTextField>
export type RichTextFieldClientComponent = FieldClientComponent<
RichTextFieldClientWithoutType,
RichTextFieldBaseClientProps
>
export type RichTextFieldLabelServerComponent = FieldLabelServerComponent<RichTextField>

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

@@ -1,6 +1,12 @@
import type { MarkOptional } from 'ts-essentials'
import type { RowField, RowFieldClient } from '../../fields/config/types.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
@@ -8,15 +14,26 @@ import type {
FieldErrorServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type RowFieldClientWithoutType = MarkOptional<RowFieldClient, 'type'>
export type RowFieldProps = {
type RowFieldBaseClientProps = {
readonly forceRender?: boolean
readonly indexPath: string
} & FormFieldBase<RowFieldClientWithoutType>
}
export type RowFieldClientProps = ClientFieldBase<RowFieldClientWithoutType> &
RowFieldBaseClientProps
export type RowFieldServerProps = ServerFieldBase<RowField>
export type RowFieldServerComponent = FieldServerComponent<RowField>
export type RowFieldClientComponent = FieldClientComponent<
RowFieldClientWithoutType,
RowFieldBaseClientProps
>
export type RowFieldLabelServerComponent = FieldLabelServerComponent<RowField>

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

@@ -3,21 +3,38 @@ import type { MarkOptional } from 'ts-essentials'
import type { SelectField, SelectFieldClient } from '../../fields/config/types.js'
import type { SelectFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type SelectFieldClientWithoutType = MarkOptional<SelectFieldClient, 'type'>
export type SelectFieldProps = {
type SelectFieldBaseClientProps = {
readonly onChange?: (e: string | string[]) => void
readonly validate?: SelectFieldValidation
readonly value?: string
} & Omit<FormFieldBase<SelectFieldClientWithoutType>, 'validate'>
}
export type SelectFieldClientProps = ClientFieldBase<SelectFieldClientWithoutType> &
SelectFieldBaseClientProps
export type SelectFieldServerProps = ServerFieldBase<SelectField>
export type SelectFieldServerComponent = FieldServerComponent<SelectField>
export type SelectFieldClientComponent = FieldClientComponent<
SelectFieldClientWithoutType,
SelectFieldBaseClientProps
>
export type SelectFieldLabelServerComponent = FieldLabelServerComponent<SelectField>

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

@@ -8,21 +8,32 @@ import type {
UnnamedTab,
} from '../../fields/config/types.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
export type ClientTab =
| ({ fields: ClientField[] } & Omit<NamedTab, 'fields'>)
| ({ fields: ClientField[] } & Omit<UnnamedTab, 'fields'>)
export type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
export type TabsFieldProps = FormFieldBase<TabsFieldClientWithoutType>
export type TabsFieldClientProps = ClientFieldBase<TabsFieldClientWithoutType>
export type TabsFieldServerProps = ServerFieldBase<TabsField>
export type TabsFieldServerComponent = FieldServerComponent<TabsField>
export type TabsFieldClientComponent = FieldClientComponent<TabsFieldClientWithoutType>
export type TabsFieldLabelServerComponent = FieldLabelServerComponent<TabsField>

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

@@ -4,21 +4,38 @@ import type { MarkOptional } from 'ts-essentials'
import type { TextField, TextFieldClient } from '../../fields/config/types.js'
import type { TextFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type TextFieldClientWithoutType = MarkOptional<TextFieldClient, 'type'>
export type TextFieldProps = {
type TextFieldBaseClientProps = {
readonly inputRef?: React.RefObject<HTMLInputElement>
readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
readonly validate?: TextFieldValidation
} & Omit<FormFieldBase<TextFieldClientWithoutType>, 'validate'>
}
export type TextFieldClientProps = ClientFieldBase<TextFieldClientWithoutType> &
TextFieldBaseClientProps
export type TextFieldServerProps = ServerFieldBase<TextField>
export type TextFieldServerComponent = FieldServerComponent<TextField>
export type TextFieldClientComponent = FieldClientComponent<
TextFieldClientWithoutType,
TextFieldBaseClientProps
>
export type TextFieldLabelServerComponent = FieldLabelServerComponent<TextField>

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

@@ -4,21 +4,38 @@ import type { MarkOptional } from 'ts-essentials'
import type { TextareaField, TextareaFieldClient } from '../../fields/config/types.js'
import type { TextareaFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type TextareaFieldClientWithoutType = MarkOptional<TextareaFieldClient, 'type'>
export type TextareaFieldProps = {
type TextareaFieldBaseClientProps = {
readonly inputRef?: React.Ref<HTMLInputElement>
readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
readonly validate?: TextareaFieldValidation
} & Omit<FormFieldBase<TextareaFieldClientWithoutType>, 'validate'>
}
export type TextareaFieldClientProps = ClientFieldBase<TextareaFieldClientWithoutType> &
TextareaFieldBaseClientProps
export type TextareaFieldServerProps = ServerFieldBase<TextareaField>
export type TextareaFieldServerComponent = FieldServerComponent<TextareaField>
export type TextareaFieldClientComponent = FieldClientComponent<
TextareaFieldClientWithoutType,
TextareaFieldBaseClientProps
>
export type TextareaFieldLabelServerComponent = FieldLabelServerComponent<TextareaField>

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

@@ -3,19 +3,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { UploadField, UploadFieldClient } from '../../fields/config/types.js'
import type { UploadFieldValidation } from '../../fields/validations.js'
import type { FieldErrorClientComponent, FieldErrorServerComponent } from '../forms/Error.js'
import type {
ClientFieldBase,
FieldClientComponent,
FieldServerComponent,
ServerFieldBase,
} from '../forms/Field.js'
import type {
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
FieldLabelClientComponent,
FieldLabelServerComponent,
FormFieldBase,
} from '../types.js'
type UploadFieldClientWithoutType = MarkOptional<UploadFieldClient, 'type'>
export type UploadFieldProps = {
type UploadFieldBaseClientProps = {
readonly validate?: UploadFieldValidation
} & Omit<FormFieldBase<UploadFieldClientWithoutType>, 'validate'>
}
export type UploadFieldClientProps = ClientFieldBase<UploadFieldClientWithoutType> &
UploadFieldBaseClientProps
export type UploadFieldServerProps = ServerFieldBase<UploadField>
export type UploadFieldServerComponent = FieldServerComponent<UploadField>
export type UploadFieldClientComponent = FieldClientComponent<
UploadFieldClientWithoutType,
UploadFieldBaseClientProps
>
export type UploadFieldLabelServerComponent = FieldLabelServerComponent<UploadField>

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

@@ -1,13 +1,10 @@
import type { MarkOptional } from 'ts-essentials'
import type { LabelFunction, ServerProps } from '../../config/types.js'
import type { ClientField, Field } from '../../fields/config/types.js'
import type { Field } from '../../fields/config/types.js'
import type { MappedComponent } from '../types.js'
import type { ClientFieldWithOptionalType } from './Field.js'
export type DescriptionFunction = LabelFunction
type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
export type FieldDescriptionClientComponent<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = React.ComponentType<FieldDescriptionClientProps<TFieldClient>>

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

@@ -1,8 +1,7 @@
import type { MarkOptional } from 'ts-essentials'
import type { ServerProps } from '../../config/types.js'
import type { ClientField, Field } from '../../fields/config/types.js'
import type { Field } from '../../fields/config/types.js'
import type { MappedComponent } from '../types.js'
import type { ClientFieldWithOptionalType } from './Field.js'
export type GenericErrorProps = {
readonly alignCaret?: 'center' | 'left' | 'right'
@@ -12,8 +11,6 @@ export type GenericErrorProps = {
readonly showError?: boolean
}
type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
export type FieldErrorClientProps<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = {

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

@@ -2,24 +2,36 @@ import type { MarkOptional } from 'ts-essentials'
import type { User } from '../../auth/types.js'
import type { Locale } from '../../config/types.js'
import type { ClientField, Validate } from '../../fields/config/types.js'
import type { ClientField, Field, Validate } from '../../fields/config/types.js'
import type { DocumentPreferences } from '../../preferences/types.js'
import type { FieldDescriptionClientProps } from './Description.js'
import type { FieldErrorClientProps } from './Error.js'
import type { FieldLabelClientProps } from './Label.js'
import type { FieldDescriptionClientProps, FieldDescriptionServerProps } from './Description.js'
import type { FieldErrorClientProps, FieldErrorServerProps } from './Error.js'
import type { FieldLabelClientProps, FieldLabelServerProps } from './Label.js'
export type FormFieldBase<
TFieldClient extends MarkOptional<ClientField, 'type'> = MarkOptional<ClientField, 'type'>,
export type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
export type ClientFieldBase<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = {
readonly descriptionProps?: FieldDescriptionClientProps<TFieldClient>
readonly docPreferences?: DocumentPreferences
readonly errorProps?: FieldErrorClientProps<TFieldClient>
readonly field: TFieldClient
readonly labelProps?: FieldLabelClientProps<TFieldClient>
} & FormFieldBase
export type ServerFieldBase<TFieldServer extends Field = Field> = {
readonly descriptionProps?: FieldDescriptionServerProps<TFieldServer>
readonly errorProps?: FieldErrorServerProps<TFieldServer>
readonly field: TFieldServer
readonly labelProps?: FieldLabelServerProps<TFieldServer>
} & FormFieldBase
export type FormFieldBase = {
readonly docPreferences?: DocumentPreferences
/**
* `forceRender` is added by RenderField automatically.
*/
readonly forceRender?: boolean
readonly labelProps?: FieldLabelClientProps<TFieldClient>
readonly locale?: Locale
/**
* `readOnly` is added by RenderField automatically. This should be used instead of `field.admin.readOnly`.
@@ -28,3 +40,13 @@ export type FormFieldBase<
readonly user?: User
readonly validate?: Validate
}
export type FieldClientComponent<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
AdditionalProps extends Record<string, unknown> = Record<string, unknown>,
> = React.ComponentType<AdditionalProps & ClientFieldBase<TFieldClient>>
export type FieldServerComponent<
TFieldServer extends Field = Field,
AdditionalProps extends Record<string, unknown> = Record<string, unknown>,
> = React.ComponentType<AdditionalProps & ServerFieldBase<TFieldServer>>

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

@@ -1,8 +1,7 @@
import type { MarkOptional } from 'ts-essentials'
import type { ServerProps, StaticLabel } from '../../config/types.js'
import type { ClientField, Field } from '../../fields/config/types.js'
import type { MappedComponent } from '../types.js'
import type { ClientFieldWithOptionalType } from './Field.js'
export type GenericLabelProps = {
readonly as?: 'label' | 'span'
@@ -13,8 +12,6 @@ export type GenericLabelProps = {
readonly unstyled?: boolean
}
type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
export type FieldLabelClientProps<
TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType,
> = {

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

@@ -24,13 +24,16 @@ export type {
} from './elements/WithServerSideProps.js'
export type {
ArrayFieldClientComponent,
ArrayFieldClientProps,
ArrayFieldDescriptionClientComponent,
ArrayFieldDescriptionServerComponent,
ArrayFieldErrorClientComponent,
ArrayFieldErrorServerComponent,
ArrayFieldLabelClientComponent,
ArrayFieldLabelServerComponent,
ArrayFieldProps,
ArrayFieldServerComponent,
ArrayFieldServerProps,
} from './fields/Array.js'
export type {
@@ -40,190 +43,247 @@ export type {
BlockFieldErrorServerComponent,
BlockFieldLabelClientComponent,
BlockFieldLabelServerComponent,
BlockFieldProps,
BlocksFieldClientComponent,
BlocksFieldClientProps,
BlocksFieldServerComponent,
BlocksFieldServerProps,
} from './fields/Blocks.js'
export type {
CheckboxFieldClientComponent,
CheckboxFieldClientProps,
CheckboxFieldDescriptionClientComponent,
CheckboxFieldDescriptionServerComponent,
CheckboxFieldErrorClientComponent,
CheckboxFieldErrorServerComponent,
CheckboxFieldLabelClientComponent,
CheckboxFieldLabelServerComponent,
CheckboxFieldProps,
CheckboxFieldServerComponent,
CheckboxFieldServerProps,
} from './fields/Checkbox.js'
export type {
CodeFieldClientComponent,
CodeFieldClientProps,
CodeFieldDescriptionClientComponent,
CodeFieldDescriptionServerComponent,
CodeFieldErrorClientComponent,
CodeFieldErrorServerComponent,
CodeFieldLabelClientComponent,
CodeFieldLabelServerComponent,
CodeFieldProps,
CodeFieldServerComponent,
CodeFieldServerProps,
} from './fields/Code.js'
export type {
CollapsibleFieldClientComponent,
CollapsibleFieldClientProps,
CollapsibleFieldDescriptionClientComponent,
CollapsibleFieldDescriptionServerComponent,
CollapsibleFieldErrorClientComponent,
CollapsibleFieldErrorServerComponent,
CollapsibleFieldLabelClientComponent,
CollapsibleFieldLabelServerComponent,
CollapsibleFieldProps,
CollapsibleFieldServerComponent,
CollapsibleFieldServerProps,
} from './fields/Collapsible.js'
export type {
DateFieldClientComponent,
DateFieldClientProps,
DateFieldDescriptionClientComponent,
DateFieldDescriptionServerComponent,
DateFieldErrorClientComponent,
DateFieldErrorServerComponent,
DateFieldLabelClientComponent,
DateFieldLabelServerComponent,
DateFieldProps,
DateFieldServerComponent,
DateFieldServerProps,
} from './fields/Date.js'
export type {
EmailFieldClientComponent,
EmailFieldClientProps,
EmailFieldDescriptionClientComponent,
EmailFieldDescriptionServerComponent,
EmailFieldErrorClientComponent,
EmailFieldErrorServerComponent,
EmailFieldLabelClientComponent,
EmailFieldLabelServerComponent,
EmailFieldProps,
EmailFieldServerComponent,
EmailFieldServerProps,
} from './fields/Email.js'
export type {
GroupFieldClientComponent,
GroupFieldClientProps,
GroupFieldDescriptionClientComponent,
GroupFieldDescriptionServerComponent,
GroupFieldErrorClientComponent,
GroupFieldErrorServerComponent,
GroupFieldLabelClientComponent,
GroupFieldLabelServerComponent,
GroupFieldProps,
GroupFieldServerComponent,
GroupFieldServerProps,
} from './fields/Group.js'
export type { HiddenFieldProps } from './fields/Hidden.js'
export type {
JSONFieldClientComponent,
JSONFieldClientProps,
JSONFieldDescriptionClientComponent,
JSONFieldDescriptionServerComponent,
JSONFieldErrorClientComponent,
JSONFieldErrorServerComponent,
JSONFieldLabelClientComponent,
JSONFieldLabelServerComponent,
JSONFieldProps,
JSONFieldServerComponent,
JSONFieldServerProps,
} from './fields/JSON.js'
export type {
NumberFieldClientComponent,
NumberFieldClientProps,
NumberFieldDescriptionClientComponent,
NumberFieldDescriptionServerComponent,
NumberFieldErrorClientComponent,
NumberFieldErrorServerComponent,
NumberFieldLabelClientComponent,
NumberFieldLabelServerComponent,
NumberFieldProps,
NumberFieldServerComponent,
NumberFieldServerProps,
} from './fields/Number.js'
export type {
PointFieldClientComponent,
PointFieldClientProps,
PointFieldDescriptionClientComponent,
PointFieldDescriptionServerComponent,
PointFieldErrorClientComponent,
PointFieldErrorServerComponent,
PointFieldLabelClientComponent,
PointFieldLabelServerComponent,
PointFieldProps,
PointFieldServerComponent,
PointFieldServerProps,
} from './fields/Point.js'
export type {
RadioFieldClientComponent,
RadioFieldClientProps,
RadioFieldDescriptionClientComponent,
RadioFieldDescriptionServerComponent,
RadioFieldErrorClientComponent,
RadioFieldErrorServerComponent,
RadioFieldLabelClientComponent,
RadioFieldLabelServerComponent,
RadioFieldProps,
RadioFieldServerComponent,
RadioFieldServerProps,
} from './fields/Radio.js'
export type {
RelationshipFieldClientComponent,
RelationshipFieldClientProps,
RelationshipFieldDescriptionClientComponent,
RelationshipFieldDescriptionServerComponent,
RelationshipFieldErrorClientComponent,
RelationshipFieldErrorServerComponent,
RelationshipFieldLabelClientComponent,
RelationshipFieldLabelServerComponent,
RelationshipFieldProps,
RelationshipFieldServerComponent,
RelationshipFieldServerProps,
} from './fields/Relationship.js'
export type {
RichTextFieldClientComponent,
RichTextFieldClientProps,
RichTextFieldDescriptionClientComponent,
RichTextFieldDescriptionServerComponent,
RichTextFieldErrorClientComponent,
RichTextFieldErrorServerComponent,
RichTextFieldLabelClientComponent,
RichTextFieldLabelServerComponent,
RichTextFieldProps,
RichTextFieldServerComponent,
RichTextFieldServerProps,
} from './fields/RichText.js'
export type {
RowFieldClientComponent,
RowFieldClientProps,
RowFieldDescriptionClientComponent,
RowFieldDescriptionServerComponent,
RowFieldErrorClientComponent,
RowFieldErrorServerComponent,
RowFieldLabelClientComponent,
RowFieldLabelServerComponent,
RowFieldProps,
RowFieldServerComponent,
RowFieldServerProps,
} from './fields/Row.js'
export type {
SelectFieldClientComponent,
SelectFieldClientProps,
SelectFieldDescriptionClientComponent,
SelectFieldDescriptionServerComponent,
SelectFieldErrorClientComponent,
SelectFieldErrorServerComponent,
SelectFieldLabelClientComponent,
SelectFieldLabelServerComponent,
SelectFieldProps,
SelectFieldServerComponent,
SelectFieldServerProps,
} from './fields/Select.js'
export type {
ClientTab,
TabsFieldClientComponent,
TabsFieldClientProps,
TabsFieldDescriptionClientComponent,
TabsFieldDescriptionServerComponent,
TabsFieldErrorClientComponent,
TabsFieldErrorServerComponent,
TabsFieldLabelClientComponent,
TabsFieldLabelServerComponent,
TabsFieldProps,
TabsFieldServerComponent,
TabsFieldServerProps,
} from './fields/Tabs.js'
export type {
TextFieldClientComponent,
TextFieldClientProps,
TextFieldDescriptionClientComponent,
TextFieldDescriptionServerComponent,
TextFieldErrorClientComponent,
TextFieldErrorServerComponent,
TextFieldLabelClientComponent,
TextFieldLabelServerComponent,
TextFieldProps,
TextFieldServerComponent,
TextFieldServerProps,
} from './fields/Text.js'
export type {
TextareaFieldClientComponent,
TextareaFieldClientProps,
TextareaFieldDescriptionClientComponent,
TextareaFieldDescriptionServerComponent,
TextareaFieldErrorClientComponent,
TextareaFieldErrorServerComponent,
TextareaFieldLabelClientComponent,
TextareaFieldLabelServerComponent,
TextareaFieldProps,
TextareaFieldServerComponent,
TextareaFieldServerProps,
} from './fields/Textarea.js'
export type {
UploadFieldClientComponent,
UploadFieldClientProps,
UploadFieldDescriptionClientComponent,
UploadFieldDescriptionServerComponent,
UploadFieldErrorClientComponent,
UploadFieldErrorServerComponent,
UploadFieldLabelClientComponent,
UploadFieldLabelServerComponent,
UploadFieldProps,
UploadFieldServerComponent,
UploadFieldServerProps,
} from './fields/Upload.js'
export type {

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

@@ -7,92 +7,92 @@ import type { DeepUndefinable } from 'ts-essentials'
import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
import type {
ArrayFieldClientProps,
ArrayFieldErrorClientComponent,
ArrayFieldErrorServerComponent,
ArrayFieldLabelClientComponent,
ArrayFieldLabelServerComponent,
ArrayFieldProps,
BlockFieldErrorClientComponent,
BlockFieldErrorServerComponent,
BlockFieldProps,
BlocksFieldClientProps,
CheckboxFieldClientProps,
CheckboxFieldErrorClientComponent,
CheckboxFieldErrorServerComponent,
CheckboxFieldLabelClientComponent,
CheckboxFieldLabelServerComponent,
CheckboxFieldProps,
ClientTab,
CodeFieldClientProps,
CodeFieldErrorClientComponent,
CodeFieldErrorServerComponent,
CodeFieldLabelClientComponent,
CodeFieldLabelServerComponent,
CodeFieldProps,
CollapsibleFieldClientProps,
CollapsibleFieldLabelClientComponent,
CollapsibleFieldLabelServerComponent,
CollapsibleFieldProps,
ConditionalDateProps,
DateFieldClientProps,
DateFieldErrorClientComponent,
DateFieldErrorServerComponent,
DateFieldLabelClientComponent,
DateFieldLabelServerComponent,
DateFieldProps,
Description,
EmailFieldClientProps,
EmailFieldErrorClientComponent,
EmailFieldErrorServerComponent,
EmailFieldLabelClientComponent,
EmailFieldLabelServerComponent,
EmailFieldProps,
FieldDescriptionClientComponent,
FieldDescriptionServerComponent,
GroupFieldClientProps,
GroupFieldLabelClientComponent,
GroupFieldLabelServerComponent,
GroupFieldProps,
HiddenFieldProps,
JSONFieldClientProps,
JSONFieldErrorClientComponent,
JSONFieldErrorServerComponent,
JSONFieldLabelClientComponent,
JSONFieldLabelServerComponent,
JSONFieldProps,
MappedComponent,
NumberFieldClientProps,
NumberFieldErrorClientComponent,
NumberFieldErrorServerComponent,
NumberFieldLabelClientComponent,
NumberFieldLabelServerComponent,
NumberFieldProps,
PointFieldClientProps,
PointFieldErrorClientComponent,
PointFieldErrorServerComponent,
PointFieldLabelClientComponent,
PointFieldLabelServerComponent,
PointFieldProps,
RadioFieldClientProps,
RadioFieldErrorClientComponent,
RadioFieldErrorServerComponent,
RadioFieldLabelClientComponent,
RadioFieldLabelServerComponent,
RadioFieldProps,
RelationshipFieldClientProps,
RelationshipFieldErrorClientComponent,
RelationshipFieldErrorServerComponent,
RelationshipFieldLabelClientComponent,
RelationshipFieldLabelServerComponent,
RelationshipFieldProps,
RichTextFieldProps,
RowFieldProps,
RichTextFieldClientProps,
RowFieldClientProps,
RowLabelComponent,
SelectFieldClientProps,
SelectFieldErrorClientComponent,
SelectFieldErrorServerComponent,
SelectFieldLabelClientComponent,
SelectFieldLabelServerComponent,
SelectFieldProps,
StaticDescription,
TabsFieldProps,
TabsFieldClientProps,
TextareaFieldClientProps,
TextareaFieldErrorClientComponent,
TextareaFieldErrorServerComponent,
TextareaFieldLabelClientComponent,
TextareaFieldLabelServerComponent,
TextareaFieldProps,
TextFieldErrorClientComponent,
TextFieldErrorServerComponent,
TextFieldLabelClientComponent,
TextFieldLabelServerComponent,
UploadFieldProps,
UploadFieldClientProps,
} from '../../admin/types.js'
import type { SanitizedCollectionConfig, TypeWithID } from '../../collections/config/types.js'
import type {
@@ -1425,26 +1425,26 @@ export type ClientField =
| UploadFieldClient
export type ClientFieldProps =
| ArrayFieldProps
| BlockFieldProps
| CheckboxFieldProps
| CodeFieldProps
| CollapsibleFieldProps
| DateFieldProps
| EmailFieldProps
| GroupFieldProps
| ArrayFieldClientProps
| BlocksFieldClientProps
| CheckboxFieldClientProps
| CodeFieldClientProps
| CollapsibleFieldClientProps
| DateFieldClientProps
| EmailFieldClientProps
| GroupFieldClientProps
| HiddenFieldProps
| JSONFieldProps
| NumberFieldProps
| PointFieldProps
| RadioFieldProps
| RelationshipFieldProps
| RichTextFieldProps
| RowFieldProps
| SelectFieldProps
| TabsFieldProps
| TextareaFieldProps
| UploadFieldProps
| JSONFieldClientProps
| NumberFieldClientProps
| PointFieldClientProps
| RadioFieldClientProps
| RelationshipFieldClientProps
| RichTextFieldClientProps
| RowFieldClientProps
| SelectFieldClientProps
| TabsFieldClientProps
| TextareaFieldClientProps
| UploadFieldClientProps
type ExtractFieldTypes<T> = T extends { type: infer U } ? U : never

4
packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { SelectFieldProps, SelectFieldValidation } from 'payload'
import type { SelectFieldClientProps, SelectFieldValidation } from 'payload'
import { SelectField, useForm } from '@payloadcms/ui'
import React, { useEffect, useState } from 'react'
@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'
import type { SelectFieldOption } from '../../types.js'
export const DynamicFieldSelector: React.FC<
{ validate: SelectFieldValidation } & SelectFieldProps
{ validate: SelectFieldValidation } & SelectFieldClientProps
> = (props) => {
const { fields, getDataByPath } = useForm()

4
packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { Data, TextFieldProps } from 'payload'
import type { Data, TextFieldClientComponent } from 'payload'
import { TextField, useLocale, useWatchForm } from '@payloadcms/ui'
import React, { useEffect, useState } from 'react'
@@ -10,7 +10,7 @@ type FieldWithID = {
name: string
}
export const DynamicPriceSelector: React.FC<TextFieldProps> = (props) => {
export const DynamicPriceSelector: TextFieldClientComponent = (props) => {
const { field } = props
const { fields, getData, getDataByPath } = useWatchForm()

4
packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { FieldType, Options } from '@payloadcms/ui'
import type { TextareaFieldProps } from 'payload'
import type { TextareaFieldClientProps } from 'payload'
import {
FieldLabel,
@@ -25,7 +25,7 @@ const { maxLength, minLength } = defaults.description
type MetaDescriptionProps = {
readonly hasGenerateDescriptionFn: boolean
} & TextareaFieldProps
} & TextareaFieldClientProps
export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {
const {

4
packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { FieldType, Options } from '@payloadcms/ui'
import type { UploadFieldProps } from 'payload'
import type { UploadFieldClientProps } from 'payload'
import {
FieldLabel,
@@ -23,7 +23,7 @@ import { Pill } from '../../ui/Pill.js'
type MetaImageProps = {
readonly hasGenerateImageFn: boolean
} & UploadFieldProps
} & UploadFieldClientProps
export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
const {

4
packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { FieldType, Options } from '@payloadcms/ui'
import type { TextFieldProps } from 'payload'
import type { TextFieldClientProps } from 'payload'
import {
FieldLabel,
@@ -26,7 +26,7 @@ const { maxLength, minLength } = defaults.title
type MetaTitleProps = {
readonly hasGenerateTitleFn: boolean
} & TextFieldProps
} & TextFieldClientProps
export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
const {

4
packages/richtext-lexical/src/types.ts
View File

@@ -1,5 +1,5 @@
import type { EditorConfig as LexicalEditorConfig, SerializedEditorState } from 'lexical'
import type { RichTextAdapter, RichTextFieldProps, SanitizedConfig } from 'payload'
import type { RichTextAdapter, RichTextFieldClientProps, SanitizedConfig } from 'payload'
import type {
BaseClientFeatureProps,
@@ -74,7 +74,7 @@ export type LexicalRichTextAdapterProvider =
export type LexicalRichTextFieldProps = {
admin: LexicalFieldAdminProps
lexicalEditorConfig: LexicalEditorConfig
} & RichTextFieldProps<SerializedEditorState, AdapterProps, object>
} & RichTextFieldClientProps<SerializedEditorState, AdapterProps, object>
export type AdapterProps = {
editorConfig: SanitizedServerEditorConfig

4
packages/richtext-slate/src/types.ts
View File

@@ -1,4 +1,4 @@
import type { Field, PayloadComponent, RichTextFieldProps, SanitizedConfig } from 'payload'
import type { Field, PayloadComponent, RichTextFieldClientProps, SanitizedConfig } from 'payload'
import type { Editor } from 'slate'
export type TextNode = { [x: string]: unknown; text: string }
@@ -70,4 +70,4 @@ export type AdapterArguments = {
}
}
export type SlateFieldProps = RichTextFieldProps<any[], AdapterArguments, AdapterArguments>
export type SlateFieldProps = RichTextFieldClientProps<any[], AdapterArguments, AdapterArguments>

10
packages/ui/src/fields/Array/index.tsx
View File

@@ -1,5 +1,9 @@
'use client'
import type { ArrayFieldProps, ArrayField as ArrayFieldType } from 'payload'
import type {
ArrayFieldClientComponent,
ArrayFieldClientProps,
ArrayField as ArrayFieldType,
} from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -29,7 +33,7 @@ import './index.scss'
const baseClass = 'array-field'
export const ArrayFieldComponent: React.FC<ArrayFieldProps> = (props) => {
export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,
@@ -88,7 +92,7 @@ export const ArrayFieldComponent: React.FC<ArrayFieldProps> = (props) => {
})()
// Handle labeling for Arrays, Global Arrays, and Blocks
const getLabels = (p: ArrayFieldProps): Partial<ArrayFieldType['labels']> => {
const getLabels = (p: ArrayFieldClientProps): Partial<ArrayFieldType['labels']> => {
if ('labels' in p && p?.labels) {
return p.labels
}

4
packages/ui/src/fields/Blocks/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { BlockFieldProps } from 'payload'
import type { BlocksFieldClientComponent } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { Fragment, useCallback } from 'react'
@@ -32,7 +32,7 @@ import './index.scss'
const baseClass = 'blocks-field'
const BlocksFieldComponent: React.FC<BlockFieldProps> = (props) => {
const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
const { i18n, t } = useTranslation()
const {

14
packages/ui/src/fields/Checkbox/index.tsx
View File

@@ -1,5 +1,9 @@
'use client'
import type { CheckboxFieldProps, CheckboxFieldValidation } from 'payload'
import type {
CheckboxFieldClientComponent,
CheckboxFieldClientProps,
CheckboxFieldValidation,
} from 'payload'
import React, { useCallback } from 'react'
@@ -19,9 +23,9 @@ import { CheckboxInput } from './Input.js'
const baseClass = 'checkbox'
export { CheckboxFieldProps, CheckboxInput, type CheckboxInputProps }
export { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps }
const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
const {
id,
checked: checkedFromProps,
@@ -38,10 +42,10 @@ const CheckboxFieldComponent: React.FC<CheckboxFieldProps> = (props) => {
readOnly: readOnlyFromAdmin,
style,
width,
} = {} as CheckboxFieldProps['field']['admin'],
} = {} as CheckboxFieldClientProps['field']['admin'],
label,
required,
} = {} as CheckboxFieldProps['field'],
} = {} as CheckboxFieldClientProps['field'],
labelProps,
onChange: onChangeFromProps,
partialChecked,

4
packages/ui/src/fields/Code/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { CodeFieldProps } from 'payload'
import type { CodeFieldClientComponent } from 'payload'
import React, { useCallback } from 'react'
@@ -21,7 +21,7 @@ const prismToMonacoLanguageMap = {
const baseClass = 'code-field'
const CodeFieldComponent: React.FC<CodeFieldProps> = (props) => {
const CodeFieldComponent: CodeFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

4
packages/ui/src/fields/Collapsible/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { CollapsibleFieldProps, DocumentPreferences } from 'payload'
import type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'
import React, { Fragment, useCallback, useEffect, useState } from 'react'
@@ -21,7 +21,7 @@ const baseClass = 'collapsible-field'
import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
import { FieldDescription } from '../FieldDescription/index.js'
const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {
const {
descriptionProps,
field,

4
packages/ui/src/fields/DateTime/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { DateFieldProps, DateFieldValidation } from 'payload'
import type { DateFieldClientComponent, DateFieldValidation } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -19,7 +19,7 @@ import { RenderComponent } from '../../providers/Config/RenderComponent.js'
import { FieldDescription } from '../FieldDescription/index.js'
import { FieldError } from '../FieldError/index.js'
const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

12
packages/ui/src/fields/Email/index.tsx
View File

@@ -1,5 +1,9 @@
'use client'
import type { EmailFieldProps, EmailFieldValidation } from 'payload'
import type {
EmailFieldClientComponent,
EmailFieldClientProps,
EmailFieldValidation,
} from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -15,7 +19,7 @@ import { FieldLabel } from '../FieldLabel/index.js'
import { fieldBaseClass } from '../shared/index.js'
import './index.scss'
const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
const EmailFieldComponent: EmailFieldClientComponent = (props) => {
const {
autoComplete,
descriptionProps,
@@ -31,10 +35,10 @@ const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
placeholder,
style,
width,
} = {} as EmailFieldProps['field']['admin'],
} = {} as EmailFieldClientProps['field']['admin'],
label,
required,
} = {} as EmailFieldProps['field'],
} = {} as EmailFieldClientProps['field'],
field,
labelProps,
readOnly: readOnlyFromTopLevelProps,

4
packages/ui/src/fields/Group/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { GroupFieldProps } from 'payload'
import type { GroupFieldClientComponent } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
@@ -27,7 +27,7 @@ import { GroupProvider, useGroup } from './provider.js'
const baseClass = 'group-field'
export const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
const {
descriptionProps,
field,

4
packages/ui/src/fields/JSON/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { JSONFieldProps } from 'payload'
import type { JSONFieldClientComponent } from 'payload'
import React, { useCallback, useEffect, useState } from 'react'
@@ -17,7 +17,7 @@ import { RenderComponent } from '../../providers/Config/RenderComponent.js'
import { FieldDescription } from '../FieldDescription/index.js'
import { FieldError } from '../FieldError/index.js'
const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
const JSONFieldComponent: JSONFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

6
packages/ui/src/fields/Number/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { NumberFieldProps } from 'payload'
import type { NumberFieldClientComponent, NumberFieldClientProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import { isNumber } from 'payload/shared'
@@ -19,7 +19,7 @@ import { FieldLabel } from '../FieldLabel/index.js'
import { fieldBaseClass } from '../shared/index.js'
import './index.scss'
const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
const NumberFieldComponent: NumberFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,
@@ -35,7 +35,7 @@ const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
step = 1,
style,
width,
} = {} as NumberFieldProps['field']['admin'],
} = {} as NumberFieldClientProps['field']['admin'],
hasMany = false,
label,
max = Infinity,

4
packages/ui/src/fields/Point/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { PointFieldProps, PointFieldValidation } from 'payload'
import type { PointFieldClientComponent, PointFieldValidation } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -18,7 +18,7 @@ import { FieldDescription } from '../FieldDescription/index.js'
import { FieldError } from '../FieldError/index.js'
import { FieldLabel } from '../FieldLabel/index.js'
export const PointFieldComponent: React.FC<PointFieldProps> = (props) => {
export const PointFieldComponent: PointFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

4
packages/ui/src/fields/RadioGroup/Radio/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { OptionObject, RadioFieldProps } from 'payload'
import type { OptionObject, RadioFieldClientProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
@@ -13,7 +13,7 @@ const baseClass = 'radio-input'
export const Radio: React.FC<{
id: string
isSelected: boolean
onChange: RadioFieldProps['onChange']
onChange: RadioFieldClientProps['onChange']
option: OptionObject
path: string
readOnly?: boolean

8
packages/ui/src/fields/RadioGroup/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { RadioFieldProps } from 'payload'
import type { RadioFieldClientComponent, RadioFieldClientProps } from 'payload'
import { optionIsObject } from 'payload/shared'
import React, { useCallback } from 'react'
@@ -18,7 +18,7 @@ import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { FieldDescription } from '../FieldDescription/index.js'
import { FieldError } from '../FieldError/index.js'
const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,
@@ -33,11 +33,11 @@ const RadioGroupFieldComponent: React.FC<RadioFieldProps> = (props) => {
readOnly: readOnlyFromAdmin,
style,
width,
} = {} as RadioFieldProps['field']['admin'],
} = {} as RadioFieldClientProps['field']['admin'],
label,
options = [],
required,
} = {} as RadioFieldProps['field'],
} = {} as RadioFieldClientProps['field'],
labelProps,
onChange: onChangeFromProps,
readOnly: readOnlyFromTopLevelProps,

4
packages/ui/src/fields/Relationship/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { PaginatedDocs, RelationshipFieldProps, Where } from 'payload'
import type { PaginatedDocs, RelationshipFieldClientComponent, Where } from 'payload'
import { wordBoundariesRegex } from 'payload/shared'
import * as qs from 'qs-esm'
@@ -36,7 +36,7 @@ const maxResultsPerRequest = 10
const baseClass = 'relationship'
const RelationshipFieldComponent: React.FC<RelationshipFieldProps> = (props) => {
const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

4
packages/ui/src/fields/RichText/index.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { RichTextFieldProps } from 'payload'
import type { RichTextFieldClientProps } from 'payload'
import type React from 'react'
export const RichTextField: React.FC<RichTextFieldProps> = () => {
export const RichTextField: React.FC<RichTextFieldClientProps> = () => {
return null
}

4
packages/ui/src/fields/Row/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { RowFieldProps } from 'payload'
import type { RowFieldClientComponent } from 'payload'
import React from 'react'
@@ -14,7 +14,7 @@ export { RowProvider, useRow }
const baseClass = 'row'
const RowFieldComponent: React.FC<RowFieldProps> = (props) => {
const RowFieldComponent: RowFieldClientComponent = (props) => {
const {
field: { admin: { className } = {}, fields },
forceRender = false,

11
packages/ui/src/fields/Select/index.tsx
View File

@@ -1,5 +1,10 @@
'use client'
import type { Option, OptionObject, SelectFieldProps } from 'payload'
import type {
Option,
OptionObject,
SelectFieldClientComponent,
SelectFieldClientProps,
} from 'payload'
import React, { useCallback } from 'react'
@@ -23,7 +28,7 @@ const formatOptions = (options: Option[]): OptionObject[] =>
} as OptionObject
})
const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
const SelectFieldComponent: SelectFieldClientComponent = (props) => {
const {
field,
field: {
@@ -37,7 +42,7 @@ const SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {
readOnly: readOnlyFromAdmin,
style,
width,
} = {} as SelectFieldProps['field']['admin'],
} = {} as SelectFieldClientProps['field']['admin'],
hasMany = false,
label,
options: optionsFromProps = [],

4
packages/ui/src/fields/Tabs/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { DocumentPreferences, TabsFieldProps } from 'payload'
import type { DocumentPreferences, TabsFieldClientComponent } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import { tabHasName, toKebabCase } from 'payload/shared'
@@ -22,7 +22,7 @@ const baseClass = 'tabs-field'
export { TabsProvider }
const TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {
const TabsFieldComponent: TabsFieldClientComponent = (props) => {
const {
field,
field: {

4
packages/ui/src/fields/Text/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { TextFieldProps } from 'payload'
import type { TextFieldClientComponent } from 'payload'
import React, { useCallback, useEffect, useState } from 'react'
@@ -17,7 +17,7 @@ import { TextInput } from './Input.js'
export { TextInput, TextInputProps }
const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
const TextFieldComponent: TextFieldClientComponent = (props) => {
const {
field,
field: {

4
packages/ui/src/fields/Textarea/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { TextareaFieldProps, TextareaFieldValidation } from 'payload'
import type { TextareaFieldClientComponent, TextareaFieldValidation } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -17,7 +17,7 @@ import { TextareaInput } from './Input.js'
export { TextareaInput, TextAreaInputProps }
const TextareaFieldComponent: React.FC<TextareaFieldProps> = (props) => {
const TextareaFieldComponent: TextareaFieldClientComponent = (props) => {
const {
descriptionProps,
errorProps,

4
packages/ui/src/fields/Upload/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { UploadFieldProps } from 'payload'
import type { UploadFieldClientProps } from 'payload'
import React from 'react'
@@ -15,7 +15,7 @@ export type { UploadInputProps } from './Input.js'
export const baseClass = 'upload'
export function UploadComponent(props: UploadFieldProps) {
export function UploadComponent(props: UploadFieldClientProps) {
const {
field: {
_path,

5
templates/website/src/fields/slug/SlugComponent.tsx
View File

@@ -10,15 +10,14 @@ import {
useFormFields,
} from '@payloadcms/ui'
import type { TextFieldProps } from 'payload'
import { formatSlug } from './formatSlug'
import './index.scss'
import { TextFieldClientProps } from 'payload'
type SlugComponentProps = {
fieldToUse: string
checkboxFieldPath: string
} & TextFieldProps
} & TextFieldClientProps
export const SlugComponent: React.FC<SlugComponentProps> = ({
field,

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

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

6
test/_community/collections/Posts/MyComponent.tsx
View File

@@ -1,6 +0,0 @@
'use client'
import React from 'react'
export const MyComponent: React.FC = () => {
return <p>Some custom label</p>
}

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

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

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

@@ -11,11 +11,20 @@ export const PostsCollection: CollectionConfig = {
{
admin: {
components: {
Label: '/collections/Posts/MyComponent.js#MyComponent',
Label: '/collections/Posts/MyClientComponent.js#MyClientComponent',
},
description: 'This is a description',
},
name: 'text',
label: 'Client Text Field',
type: 'text',
},
{
admin: {
components: {
Label: '/collections/Posts/MyServerComponent.js#MyServerComponent',
},
},
name: 'serverTextField',
type: 'text',
},
{

3
test/_community/payload-types.ts
View File

@@ -54,7 +54,8 @@ export interface UserAuthOperations {
*/
export interface Post {
id: string;
text?: string | null;
customClientField?: string | null;
customServerField?: string | null;
richText?: {
root: {
type: string;