diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx index 6934fa623..21c296059 100644 --- a/docs/admin/components.mdx +++ b/docs/admin/components.mdx @@ -431,14 +431,14 @@ export const MyClientComponent: React.FC = () => { See [Using Hooks](#using-hooks) for more details. -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 (

{`This field's name is ${name}`} diff --git a/docs/admin/fields.mdx b/docs/admin/fields.mdx index c330f6569..f5d3c9bbf 100644 --- a/docs/admin/fields.mdx +++ b/docs/admin/fields.mdx @@ -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 = ({ field: { name } }) => { +export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => { return (

{`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' ``` diff --git a/packages/payload/src/admin/RichText.ts b/packages/payload/src/admin/RichText.ts index 406f07821..f3f7ae0fd 100644 --- a/packages/payload/src/admin/RichText.ts +++ b/packages/payload/src/admin/RichText.ts @@ -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 - FieldComponent: PayloadComponent + FieldComponent: PayloadComponent } & RichTextAdapterBase export type RichTextAdapterProvider< diff --git a/packages/payload/src/admin/fields/Array.ts b/packages/payload/src/admin/fields/Array.ts index c58a2d380..9b6ac8b07 100644 --- a/packages/payload/src/admin/fields/Array.ts +++ b/packages/payload/src/admin/fields/Array.ts @@ -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 -export type ArrayFieldProps = { +type ArrayFieldBaseClientProps = { readonly CustomRowLabel?: MappedComponent readonly validate?: ArrayFieldValidation -} & Omit, 'validate'> +} + +export type ArrayFieldClientProps = ArrayFieldBaseClientProps & + ClientFieldBase + +export type ArrayFieldServerProps = ServerFieldBase + +export type ArrayFieldServerComponent = FieldServerComponent + +export type ArrayFieldClientComponent = FieldClientComponent< + ArrayFieldClientWithoutType, + ArrayFieldBaseClientProps +> export type ArrayFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Blocks.ts b/packages/payload/src/admin/fields/Blocks.ts index c81d03b7d..ca3502eb4 100644 --- a/packages/payload/src/admin/fields/Blocks.ts +++ b/packages/payload/src/admin/fields/Blocks.ts @@ -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 -export type BlockFieldProps = { +type BlocksFieldBaseClientProps = { readonly validate?: BlockFieldValidation -} & Omit, 'validate'> +} + +export type BlocksFieldClientProps = BlocksFieldBaseClientProps & + ClientFieldBase + +export type BlocksFieldServerProps = ServerFieldBase + +export type BlocksFieldServerComponent = FieldServerComponent + +export type BlocksFieldClientComponent = FieldClientComponent< + BlocksFieldClientWithoutType, + BlocksFieldBaseClientProps +> export type BlockFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Checkbox.ts b/packages/payload/src/admin/fields/Checkbox.ts index 59d8de2dc..6782e4d9c 100644 --- a/packages/payload/src/admin/fields/Checkbox.ts +++ b/packages/payload/src/admin/fields/Checkbox.ts @@ -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 -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, 'validate'> +} + +export type CheckboxFieldClientProps = CheckboxFieldBaseClientProps & + ClientFieldBase + +export type CheckboxFieldServerProps = ServerFieldBase + +export type CheckboxFieldServerComponent = FieldServerComponent + +export type CheckboxFieldClientComponent = FieldClientComponent< + CheckboxFieldClientWithoutType, + CheckboxFieldBaseClientProps +> export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Code.ts b/packages/payload/src/admin/fields/Code.ts index ddf29e04c..9318f03be 100644 --- a/packages/payload/src/admin/fields/Code.ts +++ b/packages/payload/src/admin/fields/Code.ts @@ -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 -export type CodeFieldProps = { +type CodeFieldBaseClientProps = { readonly autoComplete?: string - readonly validate?: CodeFieldValidation -} & Omit, 'validate'> + readonly valiCode?: CodeFieldValidation +} + +export type CodeFieldClientProps = ClientFieldBase & + CodeFieldBaseClientProps + +export type CodeFieldServerProps = ServerFieldBase + +export type CodeFieldServerComponent = FieldServerComponent + +export type CodeFieldClientComponent = FieldClientComponent< + CodeFieldClientWithoutType, + CodeFieldBaseClientProps +> export type CodeFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Collapsible.ts b/packages/payload/src/admin/fields/Collapsible.ts index 360e19a42..0f7b2eb6f 100644 --- a/packages/payload/src/admin/fields/Collapsible.ts +++ b/packages/payload/src/admin/fields/Collapsible.ts @@ -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 -export type CollapsibleFieldProps = FormFieldBase +export type CollapsibleFieldClientProps = ClientFieldBase + +export type CollapsibleFieldServerProps = ServerFieldBase + +export type CollapsibleFieldServerComponent = FieldServerComponent + +export type CollapsibleFieldClientComponent = + FieldClientComponent export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Date.ts b/packages/payload/src/admin/fields/Date.ts index 9c6a30bc8..cb4d36648 100644 --- a/packages/payload/src/admin/fields/Date.ts +++ b/packages/payload/src/admin/fields/Date.ts @@ -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 -export type DateFieldProps = { +type DateFieldBaseClientProps = { readonly validate?: DateFieldValidation -} & Omit, 'validate'> +} + +export type DateFieldClientProps = ClientFieldBase & + DateFieldBaseClientProps + +export type DateFieldServerProps = ServerFieldBase + +export type DateFieldServerComponent = FieldServerComponent + +export type DateFieldClientComponent = FieldClientComponent< + DateFieldClientWithoutType, + DateFieldBaseClientProps +> export type DateFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Email.ts b/packages/payload/src/admin/fields/Email.ts index 2648177f2..e1e37212b 100644 --- a/packages/payload/src/admin/fields/Email.ts +++ b/packages/payload/src/admin/fields/Email.ts @@ -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 -export type EmailFieldProps = { +type EmailFieldBaseClientProps = { readonly autoComplete?: string readonly validate?: EmailFieldValidation -} & Omit, 'validate'> +} + +export type EmailFieldClientProps = ClientFieldBase & + EmailFieldBaseClientProps + +export type EmailFieldServerProps = ServerFieldBase + +export type EmailFieldServerComponent = FieldServerComponent + +export type EmailFieldClientComponent = FieldClientComponent< + EmailFieldClientWithoutType, + EmailFieldBaseClientProps +> export type EmailFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Group.ts b/packages/payload/src/admin/fields/Group.ts index ed360d0f5..b862137d5 100644 --- a/packages/payload/src/admin/fields/Group.ts +++ b/packages/payload/src/admin/fields/Group.ts @@ -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 -export type GroupFieldProps = FormFieldBase +export type GroupFieldClientProps = ClientFieldBase + +export type GroupFieldServerProps = ServerFieldBase + +export type GroupFieldServerComponent = FieldServerComponent + +export type GroupFieldClientComponent = FieldClientComponent export type GroupFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/JSON.ts b/packages/payload/src/admin/fields/JSON.ts index 373498b51..00d8dab99 100644 --- a/packages/payload/src/admin/fields/JSON.ts +++ b/packages/payload/src/admin/fields/JSON.ts @@ -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 -export type JSONFieldProps = { +type JSONFieldBaseClientProps = { readonly validate?: JSONFieldValidation -} & Omit, 'validate'> +} + +export type JSONFieldClientProps = ClientFieldBase & + JSONFieldBaseClientProps + +export type JSONFieldServerProps = ServerFieldBase + +export type JSONFieldServerComponent = FieldServerComponent + +export type JSONFieldClientComponent = FieldClientComponent< + JSONFieldClientWithoutType, + JSONFieldBaseClientProps +> export type JSONFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Number.ts b/packages/payload/src/admin/fields/Number.ts index eed165380..04f6fbf21 100644 --- a/packages/payload/src/admin/fields/Number.ts +++ b/packages/payload/src/admin/fields/Number.ts @@ -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 -export type NumberFieldProps = { +type NumberFieldBaseClientProps = { readonly onChange?: (e: number) => void readonly validate?: NumberFieldValidation -} & Omit, 'validate'> +} + +export type NumberFieldClientProps = ClientFieldBase & + NumberFieldBaseClientProps + +export type NumberFieldServerProps = ServerFieldBase + +export type NumberFieldServerComponent = FieldServerComponent + +export type NumberFieldClientComponent = FieldClientComponent< + NumberFieldClientWithoutType, + NumberFieldBaseClientProps +> export type NumberFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Point.ts b/packages/payload/src/admin/fields/Point.ts index 8033bb063..16869e4bc 100644 --- a/packages/payload/src/admin/fields/Point.ts +++ b/packages/payload/src/admin/fields/Point.ts @@ -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 -export type PointFieldProps = { +type PointFieldBaseClientProps = { readonly validate?: PointFieldValidation -} & Omit, 'validate'> +} + +export type PointFieldClientProps = ClientFieldBase & + PointFieldBaseClientProps + +export type PointFieldServerProps = ServerFieldBase + +export type PointFieldServerComponent = FieldServerComponent + +export type PointFieldClientComponent = FieldClientComponent< + PointFieldClientWithoutType, + PointFieldBaseClientProps +> export type PointFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Radio.ts b/packages/payload/src/admin/fields/Radio.ts index 9095dd064..881fe9206 100644 --- a/packages/payload/src/admin/fields/Radio.ts +++ b/packages/payload/src/admin/fields/Radio.ts @@ -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 -export type RadioFieldProps = { +type RadioFieldBaseClientProps = { readonly onChange?: OnChange readonly validate?: RadioFieldValidation readonly value?: string -} & Omit, 'validate'> +} + +export type RadioFieldClientProps = ClientFieldBase & + RadioFieldBaseClientProps + +export type RadioFieldServerProps = ServerFieldBase + +export type RadioFieldServerComponent = FieldServerComponent + +export type RadioFieldClientComponent = FieldClientComponent< + RadioFieldClientWithoutType, + RadioFieldBaseClientProps +> export type OnChange = (value: T) => void diff --git a/packages/payload/src/admin/fields/Relationship.ts b/packages/payload/src/admin/fields/Relationship.ts index 03b342c92..d51691f68 100644 --- a/packages/payload/src/admin/fields/Relationship.ts +++ b/packages/payload/src/admin/fields/Relationship.ts @@ -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 -export type RelationshipFieldProps = { +type RelationshipFieldBaseClientProps = { readonly validate?: RelationshipFieldValidation -} & Omit, 'validate'> +} + +export type RelationshipFieldClientProps = ClientFieldBase & + RelationshipFieldBaseClientProps + +export type RelationshipFieldServerProps = ServerFieldBase + +export type RelationshipFieldServerComponent = FieldServerComponent + +export type RelationshipFieldClientComponent = FieldClientComponent< + RelationshipFieldClientWithoutType, + RelationshipFieldBaseClientProps +> export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/RichText.ts b/packages/payload/src/admin/fields/RichText.ts index 285c882ec..45c166a7c 100644 --- a/packages/payload/src/admin/fields/RichText.ts +++ b/packages/payload/src/admin/fields/RichText.ts @@ -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 -export type RichTextFieldProps< +type RichTextFieldBaseClientProps< TValue extends object = any, TAdapterProps = any, TExtraProperties = object, > = { readonly validate?: RichTextFieldValidation -} & Omit, 'validate'> +} + +export type RichTextFieldClientProps< + TValue extends object = any, + TAdapterProps = any, + TExtraProperties = object, +> = ClientFieldBase & + RichTextFieldBaseClientProps + +export type RichTextFieldServerProps = ServerFieldBase + +export type RichTextFieldServerComponent = FieldServerComponent + +export type RichTextFieldClientComponent = FieldClientComponent< + RichTextFieldClientWithoutType, + RichTextFieldBaseClientProps +> export type RichTextFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Row.ts b/packages/payload/src/admin/fields/Row.ts index 6b915e293..a78224bdc 100644 --- a/packages/payload/src/admin/fields/Row.ts +++ b/packages/payload/src/admin/fields/Row.ts @@ -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 -export type RowFieldProps = { +type RowFieldBaseClientProps = { readonly forceRender?: boolean readonly indexPath: string -} & FormFieldBase +} + +export type RowFieldClientProps = ClientFieldBase & + RowFieldBaseClientProps + +export type RowFieldServerProps = ServerFieldBase + +export type RowFieldServerComponent = FieldServerComponent + +export type RowFieldClientComponent = FieldClientComponent< + RowFieldClientWithoutType, + RowFieldBaseClientProps +> export type RowFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Select.ts b/packages/payload/src/admin/fields/Select.ts index be84f87ae..f5c57ba8f 100644 --- a/packages/payload/src/admin/fields/Select.ts +++ b/packages/payload/src/admin/fields/Select.ts @@ -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 -export type SelectFieldProps = { +type SelectFieldBaseClientProps = { readonly onChange?: (e: string | string[]) => void readonly validate?: SelectFieldValidation readonly value?: string -} & Omit, 'validate'> +} + +export type SelectFieldClientProps = ClientFieldBase & + SelectFieldBaseClientProps + +export type SelectFieldServerProps = ServerFieldBase + +export type SelectFieldServerComponent = FieldServerComponent + +export type SelectFieldClientComponent = FieldClientComponent< + SelectFieldClientWithoutType, + SelectFieldBaseClientProps +> export type SelectFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Tabs.ts b/packages/payload/src/admin/fields/Tabs.ts index 817621c3e..695b32efe 100644 --- a/packages/payload/src/admin/fields/Tabs.ts +++ b/packages/payload/src/admin/fields/Tabs.ts @@ -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) | ({ fields: ClientField[] } & Omit) -export type TabsFieldClientWithoutType = MarkOptional +type TabsFieldClientWithoutType = MarkOptional -export type TabsFieldProps = FormFieldBase +export type TabsFieldClientProps = ClientFieldBase + +export type TabsFieldServerProps = ServerFieldBase + +export type TabsFieldServerComponent = FieldServerComponent + +export type TabsFieldClientComponent = FieldClientComponent export type TabsFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Text.ts b/packages/payload/src/admin/fields/Text.ts index c8f2f846f..ac4ba61e4 100644 --- a/packages/payload/src/admin/fields/Text.ts +++ b/packages/payload/src/admin/fields/Text.ts @@ -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 -export type TextFieldProps = { +type TextFieldBaseClientProps = { readonly inputRef?: React.RefObject readonly onKeyDown?: React.KeyboardEventHandler readonly validate?: TextFieldValidation -} & Omit, 'validate'> +} + +export type TextFieldClientProps = ClientFieldBase & + TextFieldBaseClientProps + +export type TextFieldServerProps = ServerFieldBase + +export type TextFieldServerComponent = FieldServerComponent + +export type TextFieldClientComponent = FieldClientComponent< + TextFieldClientWithoutType, + TextFieldBaseClientProps +> export type TextFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Textarea.ts b/packages/payload/src/admin/fields/Textarea.ts index a9b74edd5..c321fd6e1 100644 --- a/packages/payload/src/admin/fields/Textarea.ts +++ b/packages/payload/src/admin/fields/Textarea.ts @@ -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 -export type TextareaFieldProps = { +type TextareaFieldBaseClientProps = { readonly inputRef?: React.Ref readonly onKeyDown?: React.KeyboardEventHandler readonly validate?: TextareaFieldValidation -} & Omit, 'validate'> +} + +export type TextareaFieldClientProps = ClientFieldBase & + TextareaFieldBaseClientProps + +export type TextareaFieldServerProps = ServerFieldBase + +export type TextareaFieldServerComponent = FieldServerComponent + +export type TextareaFieldClientComponent = FieldClientComponent< + TextareaFieldClientWithoutType, + TextareaFieldBaseClientProps +> export type TextareaFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/fields/Upload.ts b/packages/payload/src/admin/fields/Upload.ts index ccd36cc71..681a7616d 100644 --- a/packages/payload/src/admin/fields/Upload.ts +++ b/packages/payload/src/admin/fields/Upload.ts @@ -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 -export type UploadFieldProps = { +type UploadFieldBaseClientProps = { readonly validate?: UploadFieldValidation -} & Omit, 'validate'> +} + +export type UploadFieldClientProps = ClientFieldBase & + UploadFieldBaseClientProps + +export type UploadFieldServerProps = ServerFieldBase + +export type UploadFieldServerComponent = FieldServerComponent + +export type UploadFieldClientComponent = FieldClientComponent< + UploadFieldClientWithoutType, + UploadFieldBaseClientProps +> export type UploadFieldLabelServerComponent = FieldLabelServerComponent diff --git a/packages/payload/src/admin/forms/Description.ts b/packages/payload/src/admin/forms/Description.ts index 6dc9d68a7..59605c200 100644 --- a/packages/payload/src/admin/forms/Description.ts +++ b/packages/payload/src/admin/forms/Description.ts @@ -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 - export type FieldDescriptionClientComponent< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = React.ComponentType> diff --git a/packages/payload/src/admin/forms/Error.ts b/packages/payload/src/admin/forms/Error.ts index b87b3969c..565c69af4 100644 --- a/packages/payload/src/admin/forms/Error.ts +++ b/packages/payload/src/admin/forms/Error.ts @@ -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 - export type FieldErrorClientProps< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = { diff --git a/packages/payload/src/admin/forms/Field.ts b/packages/payload/src/admin/forms/Field.ts index c80b32006..f733d2862 100644 --- a/packages/payload/src/admin/forms/Field.ts +++ b/packages/payload/src/admin/forms/Field.ts @@ -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 = MarkOptional, +export type ClientFieldWithOptionalType = MarkOptional + +export type ClientFieldBase< + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = { readonly descriptionProps?: FieldDescriptionClientProps - readonly docPreferences?: DocumentPreferences readonly errorProps?: FieldErrorClientProps readonly field: TFieldClient + readonly labelProps?: FieldLabelClientProps +} & FormFieldBase + +export type ServerFieldBase = { + readonly descriptionProps?: FieldDescriptionServerProps + readonly errorProps?: FieldErrorServerProps + readonly field: TFieldServer + readonly labelProps?: FieldLabelServerProps +} & FormFieldBase + +export type FormFieldBase = { + readonly docPreferences?: DocumentPreferences /** * `forceRender` is added by RenderField automatically. */ readonly forceRender?: boolean - readonly labelProps?: FieldLabelClientProps 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 = Record, +> = React.ComponentType> + +export type FieldServerComponent< + TFieldServer extends Field = Field, + AdditionalProps extends Record = Record, +> = React.ComponentType> diff --git a/packages/payload/src/admin/forms/Label.ts b/packages/payload/src/admin/forms/Label.ts index 088cb607e..844161cc7 100644 --- a/packages/payload/src/admin/forms/Label.ts +++ b/packages/payload/src/admin/forms/Label.ts @@ -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 - export type FieldLabelClientProps< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = { diff --git a/packages/payload/src/admin/types.ts b/packages/payload/src/admin/types.ts index f7a0f5f62..4ea9ff448 100644 --- a/packages/payload/src/admin/types.ts +++ b/packages/payload/src/admin/types.ts @@ -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 { diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts index 505b5300d..dc52341c0 100644 --- a/packages/payload/src/fields/config/types.ts +++ b/packages/payload/src/fields/config/types.ts @@ -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 extends { type: infer U } ? U : never diff --git a/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx b/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx index f8d38f525..309a4400f 100644 --- a/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx +++ b/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx @@ -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() diff --git a/packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx b/packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx index 53d285314..7f582b735 100644 --- a/packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx +++ b/packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx @@ -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 = (props) => { +export const DynamicPriceSelector: TextFieldClientComponent = (props) => { const { field } = props const { fields, getData, getDataByPath } = useWatchForm() diff --git a/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx b/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx index 49cd95908..9cf4a922d 100644 --- a/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx +++ b/packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx @@ -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 = (props) => { const { diff --git a/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx b/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx index f53002ecd..ab85eb541 100644 --- a/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx +++ b/packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx @@ -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 = (props) => { const { diff --git a/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx b/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx index 8f707d1e7..357145ba6 100644 --- a/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx +++ b/packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx @@ -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 = (props) => { const { diff --git a/packages/richtext-lexical/src/types.ts b/packages/richtext-lexical/src/types.ts index fb812009f..e224f45e6 100644 --- a/packages/richtext-lexical/src/types.ts +++ b/packages/richtext-lexical/src/types.ts @@ -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 +} & RichTextFieldClientProps export type AdapterProps = { editorConfig: SanitizedServerEditorConfig diff --git a/packages/richtext-slate/src/types.ts b/packages/richtext-slate/src/types.ts index a6e7a72ff..276a236af 100644 --- a/packages/richtext-slate/src/types.ts +++ b/packages/richtext-slate/src/types.ts @@ -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 +export type SlateFieldProps = RichTextFieldClientProps diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx index b664adfb6..501b3914d 100644 --- a/packages/ui/src/fields/Array/index.tsx +++ b/packages/ui/src/fields/Array/index.tsx @@ -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 = (props) => { +export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => { const { descriptionProps, errorProps, @@ -88,7 +92,7 @@ export const ArrayFieldComponent: React.FC = (props) => { })() // Handle labeling for Arrays, Global Arrays, and Blocks - const getLabels = (p: ArrayFieldProps): Partial => { + const getLabels = (p: ArrayFieldClientProps): Partial => { if ('labels' in p && p?.labels) { return p.labels } diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx index 551cd27c6..5c0fdb784 100644 --- a/packages/ui/src/fields/Blocks/index.tsx +++ b/packages/ui/src/fields/Blocks/index.tsx @@ -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 = (props) => { +const BlocksFieldComponent: BlocksFieldClientComponent = (props) => { const { i18n, t } = useTranslation() const { diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx index ec2fa9c67..e7790ab15 100644 --- a/packages/ui/src/fields/Checkbox/index.tsx +++ b/packages/ui/src/fields/Checkbox/index.tsx @@ -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 = (props) => { +const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => { const { id, checked: checkedFromProps, @@ -38,10 +42,10 @@ const CheckboxFieldComponent: React.FC = (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, diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx index 879794c33..8a4f2074f 100644 --- a/packages/ui/src/fields/Code/index.tsx +++ b/packages/ui/src/fields/Code/index.tsx @@ -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 = (props) => { +const CodeFieldComponent: CodeFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx index 4d0f2b550..309355e25 100644 --- a/packages/ui/src/fields/Collapsible/index.tsx +++ b/packages/ui/src/fields/Collapsible/index.tsx @@ -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 = (props) => { +const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => { const { descriptionProps, field, diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx index 6cf3de8a2..630810cf5 100644 --- a/packages/ui/src/fields/DateTime/index.tsx +++ b/packages/ui/src/fields/DateTime/index.tsx @@ -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 = (props) => { +const DateTimeFieldComponent: DateFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx index 39e948011..1283df7b6 100644 --- a/packages/ui/src/fields/Email/index.tsx +++ b/packages/ui/src/fields/Email/index.tsx @@ -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 = (props) => { +const EmailFieldComponent: EmailFieldClientComponent = (props) => { const { autoComplete, descriptionProps, @@ -31,10 +35,10 @@ const EmailFieldComponent: React.FC = (props) => { placeholder, style, width, - } = {} as EmailFieldProps['field']['admin'], + } = {} as EmailFieldClientProps['field']['admin'], label, required, - } = {} as EmailFieldProps['field'], + } = {} as EmailFieldClientProps['field'], field, labelProps, readOnly: readOnlyFromTopLevelProps, diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx index 952546bf7..5609bbe8c 100644 --- a/packages/ui/src/fields/Group/index.tsx +++ b/packages/ui/src/fields/Group/index.tsx @@ -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 = (props) => { +export const GroupFieldComponent: GroupFieldClientComponent = (props) => { const { descriptionProps, field, diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx index 5c80a284c..e04b95fa7 100644 --- a/packages/ui/src/fields/JSON/index.tsx +++ b/packages/ui/src/fields/JSON/index.tsx @@ -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 = (props) => { +const JSONFieldComponent: JSONFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx index 3dfa8948f..9ecb427ec 100644 --- a/packages/ui/src/fields/Number/index.tsx +++ b/packages/ui/src/fields/Number/index.tsx @@ -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 = (props) => { +const NumberFieldComponent: NumberFieldClientComponent = (props) => { const { descriptionProps, errorProps, @@ -35,7 +35,7 @@ const NumberFieldComponent: React.FC = (props) => { step = 1, style, width, - } = {} as NumberFieldProps['field']['admin'], + } = {} as NumberFieldClientProps['field']['admin'], hasMany = false, label, max = Infinity, diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx index 4a082cb4b..ba5c8ed2a 100644 --- a/packages/ui/src/fields/Point/index.tsx +++ b/packages/ui/src/fields/Point/index.tsx @@ -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 = (props) => { +export const PointFieldComponent: PointFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.tsx b/packages/ui/src/fields/RadioGroup/Radio/index.tsx index ab0083707..5fe62b45d 100644 --- a/packages/ui/src/fields/RadioGroup/Radio/index.tsx +++ b/packages/ui/src/fields/RadioGroup/Radio/index.tsx @@ -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 diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx index c76c5d516..876061b57 100644 --- a/packages/ui/src/fields/RadioGroup/index.tsx +++ b/packages/ui/src/fields/RadioGroup/index.tsx @@ -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 = (props) => { +const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => { const { descriptionProps, errorProps, @@ -33,11 +33,11 @@ const RadioGroupFieldComponent: React.FC = (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, diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx index 31dde81eb..71d9d3c54 100644 --- a/packages/ui/src/fields/Relationship/index.tsx +++ b/packages/ui/src/fields/Relationship/index.tsx @@ -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 = (props) => { +const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/RichText/index.tsx b/packages/ui/src/fields/RichText/index.tsx index 8f878d327..2bf4a740f 100644 --- a/packages/ui/src/fields/RichText/index.tsx +++ b/packages/ui/src/fields/RichText/index.tsx @@ -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 = () => { +export const RichTextField: React.FC = () => { return null } diff --git a/packages/ui/src/fields/Row/index.tsx b/packages/ui/src/fields/Row/index.tsx index 1e6185d51..2633016b5 100644 --- a/packages/ui/src/fields/Row/index.tsx +++ b/packages/ui/src/fields/Row/index.tsx @@ -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 = (props) => { +const RowFieldComponent: RowFieldClientComponent = (props) => { const { field: { admin: { className } = {}, fields }, forceRender = false, diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx index f9f1e711f..5866d7cea 100644 --- a/packages/ui/src/fields/Select/index.tsx +++ b/packages/ui/src/fields/Select/index.tsx @@ -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 = (props) => { +const SelectFieldComponent: SelectFieldClientComponent = (props) => { const { field, field: { @@ -37,7 +42,7 @@ const SelectFieldComponent: React.FC = (props) => { readOnly: readOnlyFromAdmin, style, width, - } = {} as SelectFieldProps['field']['admin'], + } = {} as SelectFieldClientProps['field']['admin'], hasMany = false, label, options: optionsFromProps = [], diff --git a/packages/ui/src/fields/Tabs/index.tsx b/packages/ui/src/fields/Tabs/index.tsx index 9b5cfbf79..fce304258 100644 --- a/packages/ui/src/fields/Tabs/index.tsx +++ b/packages/ui/src/fields/Tabs/index.tsx @@ -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 = (props) => { +const TabsFieldComponent: TabsFieldClientComponent = (props) => { const { field, field: { diff --git a/packages/ui/src/fields/Text/index.tsx b/packages/ui/src/fields/Text/index.tsx index efb34335b..42a0bbc20 100644 --- a/packages/ui/src/fields/Text/index.tsx +++ b/packages/ui/src/fields/Text/index.tsx @@ -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 = (props) => { +const TextFieldComponent: TextFieldClientComponent = (props) => { const { field, field: { diff --git a/packages/ui/src/fields/Textarea/index.tsx b/packages/ui/src/fields/Textarea/index.tsx index 7291e8ee9..5a941fe0a 100644 --- a/packages/ui/src/fields/Textarea/index.tsx +++ b/packages/ui/src/fields/Textarea/index.tsx @@ -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 = (props) => { +const TextareaFieldComponent: TextareaFieldClientComponent = (props) => { const { descriptionProps, errorProps, diff --git a/packages/ui/src/fields/Upload/index.tsx b/packages/ui/src/fields/Upload/index.tsx index 233159ee5..219ac5354 100644 --- a/packages/ui/src/fields/Upload/index.tsx +++ b/packages/ui/src/fields/Upload/index.tsx @@ -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, diff --git a/templates/website/src/fields/slug/SlugComponent.tsx b/templates/website/src/fields/slug/SlugComponent.tsx index 96954a7b4..a37d2bbe6 100644 --- a/templates/website/src/fields/slug/SlugComponent.tsx +++ b/templates/website/src/fields/slug/SlugComponent.tsx @@ -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 = ({ field, diff --git a/test/_community/collections/Posts/MyClientComponent.tsx b/test/_community/collections/Posts/MyClientComponent.tsx new file mode 100644 index 000000000..7062cc393 --- /dev/null +++ b/test/_community/collections/Posts/MyClientComponent.tsx @@ -0,0 +1,9 @@ +'use client' +import type { TextFieldClientComponent } from 'payload' + +import React from 'react' + +export const MyClientComponent: TextFieldClientComponent = (props) => { + const { field } = props + return

{`The name of this field is: ${field.name}`}

+} diff --git a/test/_community/collections/Posts/MyComponent.tsx b/test/_community/collections/Posts/MyComponent.tsx deleted file mode 100644 index 0b90a8f64..000000000 --- a/test/_community/collections/Posts/MyComponent.tsx +++ /dev/null @@ -1,6 +0,0 @@ -'use client' -import React from 'react' - -export const MyComponent: React.FC = () => { - return

Some custom label

-} diff --git a/test/_community/collections/Posts/MyServerComponent.tsx b/test/_community/collections/Posts/MyServerComponent.tsx new file mode 100644 index 000000000..ab733abcb --- /dev/null +++ b/test/_community/collections/Posts/MyServerComponent.tsx @@ -0,0 +1,9 @@ +import type { TextFieldServerComponent } from 'payload' + +import React from 'react' + +export const MyServerComponent: TextFieldServerComponent = (props) => { + const { field } = props + + return

{`The name of this field is: ${field.name}`}

+} diff --git a/test/_community/collections/Posts/index.ts b/test/_community/collections/Posts/index.ts index 327a9ea47..62464553d 100644 --- a/test/_community/collections/Posts/index.ts +++ b/test/_community/collections/Posts/index.ts @@ -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', }, { diff --git a/test/_community/payload-types.ts b/test/_community/payload-types.ts index 2671adb08..710619f2c 100644 --- a/test/_community/payload-types.ts +++ b/test/_community/payload-types.ts @@ -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;