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

feat(ui)!: passes field props to custom components (#7360)

Browse Source 
## Description

Currently, there is no way to read field props from within a custom
field component, i.e. `admin.components.Description`. For example, if
you set `maxLength: 100` on your field, your custom description
component cannot read it from `props.maxLength` or any other methods.
Because these components are rendered on the server, there is also no
way of using `admin.component.Field` to inject custom props yourself,
either. To support this, we can simply pass the base component props
into these components on the server, as expected. This has also led to
custom field component props becoming more strictly typed within the
config.

This change is considered breaking only because the types have changed.
This only affects you if you were previously importing the following
types into your own custom components. To migrate, simply change the
import paths for that type.

Old:
```ts
import type {
  ArrayFieldProps,
  ReducedBlock,
  BlocksFieldProps,
  CheckboxFieldProps,
  CodeFieldProps,
  CollapsibleFieldProps,
  DateFieldProps,
  EmailFieldProps,
  GroupFieldProps,
  HiddenFieldProps,
  JSONFieldProps,
  NumberFieldProps,
  PointFieldProps,
  RadioFieldProps,
  RelationshipFieldProps,
  RichTextComponentProps,
  RowFieldProps,
  SelectFieldProps,
  TabsFieldProps,
  TextFieldProps,
  TextareaFieldProps,
  UploadFieldProps,
  ErrorProps,
  FormFieldBase, 
  FieldComponentProps,
  FieldMap,
  MappedField,
  MappedTab,
  ReducedBlock,
} from '@payloadcms/ui'
```

New:
```ts
import type {
  FormFieldBase, 
  // etc.
} from 'payload'
```

Custom field components are now much more strongly typed. To make this
happen, an explicit type for every custom component has been generated
for every field type. The convention is to append
`DescriptionComponent`, `LabelComponent`, and `ErrorComponent` onto the
end of the field name, i.e. `TextFieldDescriptionComponent`. Here's an
example:

```ts
import type { TextFieldDescriptionComponent } from 'payload'

import React from 'react'

export const CustomDescription: TextFieldDescriptionComponent = (props) => {
  return (
    <div id="custom-field-description">{`The max length of this field is: ${props?.maxLength}`}</div>
  )
}
```

Here's the full list of all new types:

Label Components:

```ts
import type {
  ArrayFieldLabelComponent,
  BlocksFieldLabelComponent,
  CheckboxFieldLabelComponent,
  CodeFieldLabelComponent,
  CollapsibleFieldLabelComponent,
  DateFieldLabelComponent,
  EmailFieldLabelComponent,
  GroupFieldLabelComponent,
  HiddenFieldLabelComponent,
  JSONFieldLabelComponent,
  NumberFieldLabelComponent,
  PointFieldLabelComponent,
  RadioFieldLabelComponent,
  RelationshipFieldLabelComponent,
  RichTextFieldLabelComponent,
  RowFieldLabelComponent,
  SelectFieldLabelComponent,
  TabsFieldLabelComponent,
  TextFieldLabelComponent,
  TextareaFieldLabelComponent,
  UploadFieldLabelComponent
} from 'payload'
```

Error Components:

```tsx
import type {
  ArrayFieldErrorComponent,
  BlocksFieldErrorComponent,
  CheckboxFieldErrorComponent,
  CodeFieldErrorComponent,
  CollapsibleFieldErrorComponent,
  DateFieldErrorComponent,
  EmailFieldErrorComponent,
  GroupFieldErrorComponent,
  HiddenFieldErrorComponent,
  JSONFieldErrorComponent,
  NumberFieldErrorComponent,
  PointFieldErrorComponent,
  RadioFieldErrorComponent,
  RelationshipFieldErrorComponent,
  RichTextFieldErrorComponent,
  RowFieldErrorComponent,
  SelectFieldErrorComponent,
  TabsFieldErrorComponent,
  TextFieldErrorComponent,
  TextareaFieldErrorComponent,
  UploadFieldErrorComponent
} from 'payload'
```

Description Components:

```tsx
import type {
  ArrayFieldDescriptionComponent,
  BlocksFieldDescriptionComponent,
  CheckboxFieldDescriptionComponent,
  CodeFieldDescriptionComponent,
  CollapsibleFieldDescriptionComponent,
  DateFieldDescriptionComponent,
  EmailFieldDescriptionComponent,
  GroupFieldDescriptionComponent,
  HiddenFieldDescriptionComponent,
  JSONFieldDescriptionComponent,
  NumberFieldDescriptionComponent,
  PointFieldDescriptionComponent,
  RadioFieldDescriptionComponent,
  RelationshipFieldDescriptionComponent,
  RichTextFieldDescriptionComponent,
  RowFieldDescriptionComponent,
  SelectFieldDescriptionComponent,
  TabsFieldDescriptionComponent,
  TextFieldDescriptionComponent,
  TextareaFieldDescriptionComponent,
  UploadFieldDescriptionComponent
} from 'payload'
```

This PR also:
- Standardizes the `FieldBase['label']` type with a new `LabelStatic`
type. This makes type usage much more consistent across components.
- Simplifies some of the typings in the field component map, removes
unneeded `<Omit>`, etc.
- Fixes misc. linting issues around voiding promises

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

## Type of change

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

## Checklist:

- [x] I have added tests that prove my fix is effective or that my
feature works
- [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-07-26 14:03:25 -04:00
committed by GitHub
parent e734d51760
commit 97837f0708
154 changed files with 1525 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
docs/admin/fields.mdx
View File

@@ -266,12 +266,10 @@ export const myField: Field = {
_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
All Label Components receive the following props:
Custom Label Components receive all [Field Component](#the-field-component) props, plus the following props:
| Property | Description |
| -------------- | ---------------------------------------------------------------- |
| **`label`** | Label value provided in field, it can be used with i18n. |
| **`required`** | The `admin.required` property defined in the [Field Config](../fields/overview). |
| **`schemaPath`** | The path to the field in the schema. Similar to `path`, but without dynamic indices. |
<Banner type="success">
@@ -279,6 +277,36 @@ All Label Components receive the following props:
All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
</Banner>
#### TypeScript
When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
```tsx
import type {
ArrayFieldLabelComponent,
BlocksFieldLabelComponent,
CheckboxFieldLabelComponent,
CodeFieldLabelComponent,
CollapsibleFieldLabelComponent,
DateFieldLabelComponent,
EmailFieldLabelComponent,
GroupFieldLabelComponent,
HiddenFieldLabelComponent,
JSONFieldLabelComponent,
NumberFieldLabelComponent,
PointFieldLabelComponent,
RadioFieldLabelComponent,
RelationshipFieldLabelComponent,
RichTextFieldLabelComponent,
RowFieldLabelComponent,
SelectFieldLabelComponent,
TabsFieldLabelComponent,
TextFieldLabelComponent,
TextareaFieldLabelComponent,
UploadFieldLabelComponent
} from 'payload'
```
### The Error Component
The Error Component is rendered when a field fails validation. It is typically displayed beneath the field input in a visually-compelling style.
@@ -301,7 +329,7 @@ export const myField: Field = {
_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
All Error Components receive the following props:
Custom Error Components receive all [Field Component](#the-field-component) props, plus the following props:
| Property | Description |
| --------------- | ------------------------------------------------------------- |
@@ -312,6 +340,36 @@ All Error Components receive the following props:
All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
</Banner>
#### TypeScript
When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
```tsx
import type {
ArrayFieldErrorComponent,
BlocksFieldErrorComponent,
CheckboxFieldErrorComponent,
CodeFieldErrorComponent,
CollapsibleFieldErrorComponent,
DateFieldErrorComponent,
EmailFieldErrorComponent,
GroupFieldErrorComponent,
HiddenFieldErrorComponent,
JSONFieldErrorComponent,
NumberFieldErrorComponent,
PointFieldErrorComponent,
RadioFieldErrorComponent,
RelationshipFieldErrorComponent,
RichTextFieldErrorComponent,
RowFieldErrorComponent,
SelectFieldErrorComponent,
TabsFieldErrorComponent,
TextFieldErrorComponent,
TextareaFieldErrorComponent,
UploadFieldErrorComponent
} from 'payload'
```
### The Description Property
Field Descriptions are used to provide additional information to the editor about a field, such as special instructions. Their placement varies from field to field, but typically are displayed with subtle style differences beneath the field inputs.
@@ -406,7 +464,7 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
_For details on how to build a Custom Description, see [Building Custom Components](./components#building-custom-components)._
All Description Components receive the following props:
Custom Description Components receive all [Field Component](#the-field-component) props, plus the following props:
| Property | Description |
| -------------- | ---------------------------------------------------------------- |
@@ -417,6 +475,36 @@ All Description Components receive the following props:
All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
</Banner>
#### TypeScript
When building Custom Description Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Description Component, one for every [Field Type](../fields/overview). The convention is to append `DescriptionComponent` to the type of field, i.e. `TextFieldDescriptionComponent`.
```tsx
import type {
ArrayFieldDescriptionComponent,
BlocksFieldDescriptionComponent,
CheckboxFieldDescriptionComponent,
CodeFieldDescriptionComponent,
CollapsibleFieldDescriptionComponent,
DateFieldDescriptionComponent,
EmailFieldDescriptionComponent,
GroupFieldDescriptionComponent,
HiddenFieldDescriptionComponent,
JSONFieldDescriptionComponent,
NumberFieldDescriptionComponent,
PointFieldDescriptionComponent,
RadioFieldDescriptionComponent,
RelationshipFieldDescriptionComponent,
RichTextFieldDescriptionComponent,
RowFieldDescriptionComponent,
SelectFieldDescriptionComponent,
TabsFieldDescriptionComponent,
TextFieldDescriptionComponent,
TextareaFieldDescriptionComponent,
UploadFieldDescriptionComponent
} from 'payload'
```
### afterInput and beforeInput
With these properties you can add multiple components _before_ and _after_ the input element, as their name suggests. This is useful when you need to render additional elements alongside the field without replacing the entire field component.

1
docs/migration-guide/overview.mdx
View File

@@ -335,7 +335,6 @@ import {
FieldMap,
File,
Form,
FormFieldBase,
FormLoadingOverlayToggle,
FormSubmit,
GenerateConfirmation,

2
packages/create-payload-app/src/lib/wrap-next-config.ts
View File

@@ -138,7 +138,7 @@ export async function parseAndModifyConfigContent(
(m) =>
m.type === 'ExportDefaultExpression' &&
(m.expression.type === 'Identifier' || m.expression.type === 'CallExpression'),
) as ExportDefaultExpression | undefined
)
if (exportDefaultDeclaration) {
if (!('span' in exportDefaultDeclaration.expression)) {

1
packages/drizzle/src/transform/read/traverseFields.ts
View File

@@ -1,4 +1,3 @@
import type { Field, SanitizedConfig, TabAsField } from 'payload'
import { fieldAffectsData } from 'payload/shared'

2
packages/next/src/views/LivePreview/index.client.tsx
View File

@@ -1,11 +1,11 @@
'use client'
import type { FormProps } from '@payloadcms/ui'
import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
import type {
ClientCollectionConfig,
ClientConfig,
ClientGlobalConfig,
Data,
FieldMap,
LivePreviewConfig,
} from 'payload'

3
packages/next/src/views/Version/Default/SetStepNav.tsx
View File

@@ -1,6 +1,5 @@
import type { StepNavItem } from '@payloadcms/ui'
import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
import type { ClientCollectionConfig, ClientGlobalConfig, FieldMap } from 'payload'
import type React from 'react'
import { getTranslation } from '@payloadcms/translations'

2
packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
View File

@@ -1,4 +1,4 @@
import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
import type { MappedField } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import { getUniqueListBy } from 'payload/shared'

4
packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
View File

@@ -1,8 +1,8 @@
'use client'
import type { ClientCollectionConfig } from 'payload'
import type { ClientCollectionConfig, MappedField } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import { type MappedField, useConfig } from '@payloadcms/ui'
import { useConfig } from '@payloadcms/ui'
import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared'
import React from 'react'
import ReactDiffViewerImport from 'react-diff-viewer-continued'

4
packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx
View File

@@ -1,7 +1,5 @@
import type { I18nClient } from '@payloadcms/translations'
import type { SelectFieldProps } from '@payloadcms/ui'
import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
import type { OptionObject, SelectField } from 'payload'
import type { MappedField, OptionObject, SelectField, SelectFieldProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'

2
packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx
View File

@@ -1,4 +1,4 @@
import type { MappedField, TabsFieldProps } from '@payloadcms/ui'
import type { MappedField, TabsFieldProps } from 'payload'
import React from 'react'

3
packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts
View File

@@ -1,6 +1,5 @@
import type { I18nClient } from '@payloadcms/translations'
import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
import type { FieldPermissions } from 'payload'
import type { FieldMap, FieldPermissions, MappedField } from 'payload'
import type React from 'react'
import type { DiffMethod } from 'react-diff-viewer-continued'

3
packages/next/src/views/Version/RenderFieldsToDiff/types.ts
View File

@@ -1,6 +1,5 @@
import type { I18nClient } from '@payloadcms/translations'
import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
import type { FieldPermissions } from 'payload'
import type { FieldMap, FieldPermissions, MappedField } from 'payload'
import type { DiffMethod } from 'react-diff-viewer-continued'
import type { DiffComponents } from './fields/types.js'

3
packages/payload/src/admin/elements/Cell.ts
View File

@@ -8,6 +8,7 @@ import type {
RelationshipField,
SelectField,
} from '../../fields/config/types.js'
import type { FormFieldBase } from '../types.js'
export type RowData = Record<string, any>
@@ -20,7 +21,7 @@ export type CellComponentProps = {
dateDisplayFormat?: DateField['admin']['date']['displayFormat']
fieldType?: Field['type']
isFieldAffectingData?: boolean
label?: Record<string, string> | string
label?: FormFieldBase['label']
labels?: Labels
link?: boolean
name: FieldBase['name']

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

@@ -0,0 +1,22 @@
import type { ArrayField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type ArrayFieldProps = {
CustomRowLabel?: React.ReactNode
fieldMap: FieldMap
forceRender?: boolean
isSortable?: boolean
labels?: ArrayField['labels']
maxRows?: ArrayField['maxRows']
minRows?: ArrayField['minRows']
name?: string
width?: string
} & FormFieldBase
export type ArrayFieldLabelComponent = LabelComponent<'array'>
export type ArrayFieldDescriptionComponent = DescriptionComponent<'array'>
export type ArrayFieldErrorComponent = ErrorComponent<'array'>

32
packages/payload/src/admin/fields/Blocks.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { Block, BlockField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type BlocksFieldProps = {
blocks?: ReducedBlock[]
forceRender?: boolean
isSortable?: boolean
labels?: BlockField['labels']
maxRows?: number
minRows?: number
name?: string
slug?: string
width?: string
} & FormFieldBase
export type ReducedBlock = {
LabelComponent: Block['admin']['components']['Label']
custom?: Record<any, string>
fieldMap: FieldMap
imageAltText?: string
imageURL?: string
labels: BlockField['labels']
slug: string
}
export type BlocksFieldLabelComponent = LabelComponent<'blocks'>
export type BlocksFieldDescriptionComponent = DescriptionComponent<'blocks'>
export type BlocksFieldErrorComponent = ErrorComponent<'blocks'>

19
packages/payload/src/admin/fields/Checkbox.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type CheckboxFieldProps = {
checked?: boolean
disableFormData?: boolean
id?: string
name?: string
onChange?: (val: boolean) => void
partialChecked?: boolean
path?: string
width?: string
} & FormFieldBase
export type CheckboxFieldLabelComponent = LabelComponent<'checkbox'>
export type CheckboxFieldDescriptionComponent = DescriptionComponent<'checkbox'>
export type CheckboxFieldErrorComponent = ErrorComponent<'checkbox'>

17
packages/payload/src/admin/fields/Code.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { CodeField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type CodeFieldProps = {
editorOptions?: CodeField['admin']['editorOptions']
language?: CodeField['admin']['language']
name?: string
path?: string
width: string
} & FormFieldBase
export type CodeFieldLabelComponent = LabelComponent<'code'>
export type CodeFieldDescriptionComponent = DescriptionComponent<'code'>
export type CodeFieldErrorComponent = ErrorComponent<'code'>

15
packages/payload/src/admin/fields/Collapsible.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type CollapsibleFieldProps = {
fieldMap: FieldMap
initCollapsed?: boolean
width?: string
} & FormFieldBase
export type CollapsibleFieldLabelComponent = LabelComponent<'collapsible'>
export type CollapsibleFieldDescriptionComponent = DescriptionComponent<'collapsible'>
export type CollapsibleFieldErrorComponent = ErrorComponent<'collapsible'>

17
packages/payload/src/admin/fields/Date.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { DateField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type DateFieldProps = {
date?: DateField['admin']['date']
name?: string
path?: string
placeholder?: DateField['admin']['placeholder'] | string
width?: string
} & FormFieldBase
export type DateFieldLabelComponent = LabelComponent<'date'>
export type DateFieldDescriptionComponent = DescriptionComponent<'date'>
export type DateFieldErrorComponent = ErrorComponent<'date'>

17
packages/payload/src/admin/fields/Email.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { EmailField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type EmailFieldProps = {
autoComplete?: string
name?: string
path?: string
placeholder?: EmailField['admin']['placeholder']
width?: string
} & FormFieldBase
export type EmailFieldLabelComponent = LabelComponent<'email'>
export type EmailFieldDescriptionComponent = DescriptionComponent<'email'>
export type EmailFieldErrorComponent = ErrorComponent<'email'>

17
packages/payload/src/admin/fields/Group.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type GroupFieldProps = {
fieldMap: FieldMap
forceRender?: boolean
hideGutter?: boolean
name?: string
width?: string
} & FormFieldBase
export type GroupFieldLabelComponent = LabelComponent<'group'>
export type GroupFieldDescriptionComponent = DescriptionComponent<'group'>
export type GroupFieldErrorComponent = ErrorComponent<'group'>

16
packages/payload/src/admin/fields/Hidden.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type HiddenFieldProps = {
disableModifyingForm?: false
forceUsePathFromProps?: boolean
name?: string
path?: string
value?: unknown
} & FormFieldBase
export type HiddenFieldLabelComponent = LabelComponent<'hidden'>
export type HiddenFieldDescriptionComponent = DescriptionComponent<'hidden'>
export type HiddenFieldErrorComponent = ErrorComponent<'hidden'>

17
packages/payload/src/admin/fields/JSON.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { JSONField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type JSONFieldProps = {
editorOptions?: JSONField['admin']['editorOptions']
jsonSchema?: Record<string, unknown>
name?: string
path?: string
width?: string
} & FormFieldBase
export type JSONFieldLabelComponent = LabelComponent<'json'>
export type JSONFieldDescriptionComponent = DescriptionComponent<'json'>
export type JSONFieldErrorComponent = ErrorComponent<'json'>

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

@@ -0,0 +1,22 @@
import type { NumberField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type NumberFieldProps = {
hasMany?: boolean
max?: number
maxRows?: number
min?: number
name?: string
onChange?: (e: number) => void
path?: string
placeholder?: NumberField['admin']['placeholder']
step?: number
width?: string
} & FormFieldBase
export type NumberFieldLabelComponent = LabelComponent<'number'>
export type NumberFieldDescriptionComponent = DescriptionComponent<'number'>
export type NumberFieldErrorComponent = ErrorComponent<'number'>

16
packages/payload/src/admin/fields/Point.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type PointFieldProps = {
name?: string
path?: string
placeholder?: string
step?: number
width?: string
} & FormFieldBase
export type PointFieldLabelComponent = LabelComponent<'point'>
export type PointFieldDescriptionComponent = DescriptionComponent<'point'>
export type PointFieldErrorComponent = ErrorComponent<'point'>

21
packages/payload/src/admin/fields/Radio.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { Option } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type RadioFieldProps = {
layout?: 'horizontal' | 'vertical'
name?: string
onChange?: OnChange
options?: Option[]
path?: string
value?: string
width?: string
} & FormFieldBase
export type OnChange<T = string> = (value: T) => void
export type RadioFieldLabelComponent = LabelComponent<'radio'>
export type RadioFieldDescriptionComponent = DescriptionComponent<'radio'>
export type RadioFieldErrorComponent = ErrorComponent<'radio'>

19
packages/payload/src/admin/fields/Relationship.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { RelationshipField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type RelationshipFieldProps = {
allowCreate?: RelationshipField['admin']['allowCreate']
hasMany?: boolean
isSortable?: boolean
name: string
relationTo?: RelationshipField['relationTo']
sortOptions?: RelationshipField['admin']['sortOptions']
width?: string
} & FormFieldBase
export type RelationshipFieldLabelComponent = LabelComponent<'relationship'>
export type RelationshipFieldDescriptionComponent = DescriptionComponent<'relationship'>
export type RelationshipFieldErrorComponent = ErrorComponent<'relationship'>

15
packages/payload/src/admin/fields/RichText.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { ErrorComponent } from '../forms/Error.js'
import type { MappedField } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type RichTextComponentProps = {
name: string
richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>
width?: string
} & FormFieldBase
export type RichTextFieldLabelComponent = LabelComponent<'richText'>
export type RichTextFieldDescriptionComponent = DescriptionComponent<'richText'>
export type RichTextFieldErrorComponent = ErrorComponent<'richText'>

18
packages/payload/src/admin/fields/Row.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { DescriptionComponent, FormFieldBase, LabelComponent } from 'payload'
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
export type RowFieldProps = {
fieldMap: FieldMap
forceRender?: boolean
indexPath: string
path?: string
width?: string
} & FormFieldBase
export type RowFieldLabelComponent = LabelComponent<'row'>
export type RowFieldDescriptionComponent = DescriptionComponent<'row'>
export type RowFieldErrorComponent = ErrorComponent<'row'>

21
packages/payload/src/admin/fields/Select.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { Option } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type SelectFieldProps = {
hasMany?: boolean
isClearable?: boolean
isSortable?: boolean
name?: string
onChange?: (e: string | string[]) => void
options?: Option[]
path?: string
value?: string
width?: string
} & FormFieldBase
export type SelectFieldLabelComponent = LabelComponent<'select'>
export type SelectFieldDescriptionComponent = DescriptionComponent<'select'>
export type SelectFieldErrorComponent = ErrorComponent<'select'>

24
packages/payload/src/admin/fields/Tabs.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { TabsField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { FieldMap } from '../forms/FieldMap.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type TabsFieldProps = {
forceRender?: boolean
name?: string
path?: string
tabs?: MappedTab[]
width?: string
} & FormFieldBase
export type MappedTab = {
fieldMap?: FieldMap
label: TabsField['tabs'][0]['label']
name?: string
}
export type TabsFieldLabelComponent = LabelComponent<'tabs'>
export type TabsFieldDescriptionComponent = DescriptionComponent<'tabs'>
export type TabsFieldErrorComponent = ErrorComponent<'tabs'>

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

@@ -0,0 +1,23 @@
import type { TextField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type TextFieldProps = {
hasMany?: boolean
inputRef?: React.MutableRefObject<HTMLInputElement>
maxLength?: number
maxRows?: number
minLength?: number
minRows?: number
name?: string
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
path?: string
placeholder?: TextField['admin']['placeholder']
width?: string
} & FormFieldBase
export type TextFieldLabelComponent = LabelComponent<'text'>
export type TextFieldDescriptionComponent = DescriptionComponent<'text'>
export type TextFieldErrorComponent = ErrorComponent<'text'>

19
packages/payload/src/admin/fields/Textarea.ts Normal file
View File

@@ -0,0 +1,19 @@
import type { TextareaField } from '../../fields/config/types.js'
import type { ErrorComponent } from '../forms/Error.js'
import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
export type TextareaFieldProps = {
maxLength?: number
minLength?: number
name?: string
path?: string
placeholder?: TextareaField['admin']['placeholder']
rows?: number
width?: string
} & FormFieldBase
export type TextareaFieldLabelComponent = LabelComponent<'textarea'>
export type TextareaFieldDescriptionComponent = DescriptionComponent<'textarea'>
export type TextareaFieldErrorComponent = ErrorComponent<'textarea'>

17
packages/payload/src/admin/fields/Upload.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { DescriptionComponent, FormFieldBase, LabelComponent, UploadField } from 'payload'
import type { ErrorComponent } from '../forms/Error.js'
export type UploadFieldProps = {
filterOptions?: UploadField['filterOptions']
name?: string
path?: string
relationTo?: UploadField['relationTo']
width?: string
} & FormFieldBase
export type UploadFieldLabelComponent = LabelComponent<'upload'>
export type UploadFieldDescriptionComponent = DescriptionComponent<'upload'>
export type UploadFieldErrorComponent = ErrorComponent<'upload'>

86
packages/payload/src/admin/fields/index.ts Normal file
View File

@@ -0,0 +1,86 @@
import type { ArrayFieldProps } from './Array.js'
import type { BlocksFieldProps } from './Blocks.js'
import type { CheckboxFieldProps } from './Checkbox.js'
import type { CodeFieldProps } from './Code.js'
import type { CollapsibleFieldProps } from './Collapsible.js'
import type { DateFieldProps } from './Date.js'
import type { EmailFieldProps } from './Email.js'
import type { GroupFieldProps } from './Group.js'
import type { HiddenFieldProps } from './Hidden.js'
import type { JSONFieldProps } from './JSON.js'
import type { NumberFieldProps } from './Number.js'
import type { PointFieldProps } from './Point.js'
import type { RadioFieldProps } from './Radio.js'
import type { RelationshipFieldProps } from './Relationship.js'
import type { RichTextComponentProps } from './RichText.js'
import type { RowFieldProps } from './Row.js'
import type { SelectFieldProps } from './Select.js'
import type { TabsFieldProps } from './Tabs.js'
import type { TextFieldProps } from './Text.js'
import type { TextareaFieldProps } from './Textarea.js'
import type { UploadFieldProps } from './Upload.js'
export type FieldComponentProps =
| ({
type: 'array'
} & ArrayFieldProps)
| ({
type: 'blocks'
} & BlocksFieldProps)
| ({
type: 'checkbox'
} & CheckboxFieldProps)
| ({
type: 'code'
} & CodeFieldProps)
| ({
type: 'collapsible'
} & CollapsibleFieldProps)
| ({
type: 'date'
} & DateFieldProps)
| ({
type: 'email'
} & EmailFieldProps)
| ({
type: 'group'
} & GroupFieldProps)
| ({
type: 'hidden'
} & HiddenFieldProps)
| ({
type: 'json'
} & JSONFieldProps)
| ({
type: 'number'
} & NumberFieldProps)
| ({
type: 'point'
} & PointFieldProps)
| ({
type: 'radio'
} & RadioFieldProps)
| ({
type: 'relationship'
} & RelationshipFieldProps)
| ({
type: 'richText'
} & RichTextComponentProps)
| ({
type: 'row'
} & RowFieldProps)
| ({
type: 'select'
} & SelectFieldProps)
| ({
type: 'tabs'
} & TabsFieldProps)
| ({
type: 'text'
} & TextFieldProps)
| ({
type: 'textarea'
} & TextareaFieldProps)
| ({
type: 'upload'
} & UploadFieldProps)

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

@@ -1,7 +1,19 @@
export type ErrorProps = {
import type { CustomComponent, ServerProps } from '../../config/types.js'
import type { FieldComponentProps } from '../types.js'
import type { FieldTypes } from './FieldTypes.js'
export type GenericErrorProps = {
CustomError?: React.ReactNode
alignCaret?: 'center' | 'left' | 'right'
message?: string
path?: string
showError?: boolean
}
export type ErrorProps<T extends keyof FieldTypes = any> = {
type: T
} & FieldComponentProps &
GenericErrorProps &
Partial<ServerProps>
export type ErrorComponent<T extends keyof FieldTypes = any> = CustomComponent<ErrorProps<T>>

32
packages/payload/src/admin/forms/Field.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { User } from '../../auth/types.js'
import type { LabelStatic, Locale } from '../../config/types.js'
import type { Validate } from '../../fields/config/types.js'
import type { DocumentPreferences } from '../../preferences/types.js'
import type { ErrorProps } from './Error.js'
import type { FieldDescriptionProps } from './FieldDescription.js'
import type { SanitizedLabelProps } from './Label.js'
export type FormFieldBase = {
AfterInput?: React.ReactNode
BeforeInput?: React.ReactNode
CustomDescription?: React.ReactNode
CustomError?: React.ReactNode
CustomLabel?: React.ReactNode
className?: string
custom?: Record<string, any>
descriptionProps?: Omit<FieldDescriptionProps, 'type'>
disabled?: boolean
docPreferences?: DocumentPreferences
errorProps?: Omit<ErrorProps, 'type'>
label?: LabelStatic | false
labelProps?: SanitizedLabelProps
locale?: Locale
localized?: boolean
path?: string
readOnly?: boolean
required?: boolean
rtl?: boolean
style?: React.CSSProperties
user?: User
validate?: Validate
}

18
packages/payload/src/admin/forms/FieldDescription.ts
View File

@@ -1,18 +1,24 @@
import type React from 'react'
import type { CustomComponent, LabelFunction } from '../../config/types.js'
import type { Payload } from '../../index.js'
import type { CustomComponent, LabelFunction, ServerProps } from '../../config/types.js'
import type { FieldComponentProps } from '../types.js'
import type { FieldTypes } from './FieldTypes.js'
export type DescriptionFunction = LabelFunction
export type DescriptionComponent = CustomComponent<FieldDescriptionProps>
export type DescriptionComponent<T extends keyof FieldTypes = any> = CustomComponent<
FieldDescriptionProps<T>
>
export type Description = DescriptionFunction | Record<string, string> | string
export type FieldDescriptionProps = {
export type GenericDescriptionProps = {
CustomDescription?: React.ReactNode
className?: string
description?: Record<string, string> | string
marginPlacement?: 'bottom' | 'top'
payload?: Payload
}
export type FieldDescriptionProps<T extends keyof FieldTypes = any> = {
type: T
} & FieldComponentProps &
GenericDescriptionProps &
Partial<ServerProps>

24
packages/payload/src/admin/forms/FieldMap.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { CellComponentProps, FieldComponentProps } from '../types.js'
import type { FieldTypes } from './FieldTypes.js'
export type MappedField = {
CustomCell?: React.ReactNode
CustomField?: React.ReactNode
cellComponentProps: CellComponentProps
custom?: Record<any, string>
disableBulkEdit?: boolean
disableListColumn?: boolean
disableListFilter?: boolean
disabled?: boolean
fieldComponentProps: FieldComponentProps
fieldIsPresentational: boolean
isFieldAffectingData: boolean
isHidden?: boolean
isSidebar?: boolean
localized: boolean
name?: string
type: keyof FieldTypes
unique?: boolean
}
export type FieldMap = MappedField[]

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

@@ -1,11 +1,24 @@
export type LabelProps = {
CustomLabel?: React.ReactNode
import type { CustomComponent, ServerProps } from '../../config/types.js'
import type { FieldComponentProps } from '../fields/index.js'
import type { FormFieldBase } from './Field.js'
import type { FieldTypes } from './FieldTypes.js'
export type GenericLabelProps = {
as?: 'label' | 'span'
htmlFor?: string
label?: Record<string, string> | string
required?: boolean
schemaPath?: string
unstyled?: boolean
}
} & FormFieldBase
export type SanitizedLabelProps = Omit<LabelProps, 'label' | 'required'>
export type LabelProps<T extends keyof FieldTypes = any> = {
type: T
} & FieldComponentProps &
GenericLabelProps &
Partial<ServerProps>
export type SanitizedLabelProps<T extends keyof FieldTypes = any> = Omit<
LabelProps<T>,
'label' | 'required'
>
export type LabelComponent<T extends keyof FieldTypes = any> = CustomComponent<LabelProps<T>>

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

@@ -7,6 +7,7 @@ export type { CustomPreviewButton } from './elements/PreviewButton.js'
export type { CustomPublishButton } from './elements/PublishButton.js'
export type { CustomSaveButton } from './elements/SaveButton.js'
export type { CustomSaveDraftButton } from './elements/SaveDraftButton.js'
export type {
DocumentTab,
DocumentTabComponent,
@@ -14,20 +15,191 @@ export type {
DocumentTabConfig,
DocumentTabProps,
} from './elements/Tab.js'
export type { CustomUpload } from './elements/Upload.js'
export type {
WithServerSidePropsComponent,
WithServerSidePropsComponentProps,
} from './elements/WithServerSideProps.js'
export type { ErrorProps } from './forms/Error.js'
export type {
ArrayFieldDescriptionComponent,
ArrayFieldErrorComponent,
ArrayFieldLabelComponent,
ArrayFieldProps,
} from './fields/Array.js'
export type { ReducedBlock } from './fields/Blocks.js'
export type {
BlocksFieldDescriptionComponent,
BlocksFieldErrorComponent,
BlocksFieldLabelComponent,
BlocksFieldProps,
} from './fields/Blocks.js'
export type {
CheckboxFieldDescriptionComponent,
CheckboxFieldErrorComponent,
CheckboxFieldLabelComponent,
CheckboxFieldProps,
} from './fields/Checkbox.js'
export type {
CodeFieldDescriptionComponent,
CodeFieldErrorComponent,
CodeFieldLabelComponent,
CodeFieldProps,
} from './fields/Code.js'
export type {
CollapsibleFieldDescriptionComponent,
CollapsibleFieldErrorComponent,
CollapsibleFieldLabelComponent,
CollapsibleFieldProps,
} from './fields/Collapsible.js'
export type {
DateFieldDescriptionComponent,
DateFieldErrorComponent,
DateFieldLabelComponent,
DateFieldProps,
} from './fields/Date.js'
export type {
EmailFieldDescriptionComponent,
EmailFieldErrorComponent,
EmailFieldLabelComponent,
EmailFieldProps,
} from './fields/Email.js'
export type {
GroupFieldDescriptionComponent,
GroupFieldErrorComponent,
GroupFieldLabelComponent,
GroupFieldProps,
} from './fields/Group.js'
export type {
HiddenFieldDescriptionComponent,
HiddenFieldErrorComponent,
HiddenFieldLabelComponent,
HiddenFieldProps,
} from './fields/Hidden.js'
export type {
JSONFieldDescriptionComponent,
JSONFieldErrorComponent,
JSONFieldLabelComponent,
JSONFieldProps,
} from './fields/JSON.js'
export type {
NumberFieldDescriptionComponent,
NumberFieldErrorComponent,
NumberFieldLabelComponent,
NumberFieldProps,
} from './fields/Number.js'
export type {
PointFieldDescriptionComponent,
PointFieldErrorComponent,
PointFieldLabelComponent,
PointFieldProps,
} from './fields/Point.js'
export type {
RadioFieldDescriptionComponent,
RadioFieldErrorComponent,
RadioFieldLabelComponent,
RadioFieldProps,
} from './fields/Radio.js'
export type {
RelationshipFieldDescriptionComponent,
RelationshipFieldErrorComponent,
RelationshipFieldLabelComponent,
RelationshipFieldProps,
} from './fields/Relationship.js'
export type {
RichTextComponentProps,
RichTextFieldDescriptionComponent,
RichTextFieldErrorComponent,
RichTextFieldLabelComponent,
} from './fields/RichText.js'
export type {
RowFieldDescriptionComponent,
RowFieldErrorComponent,
RowFieldLabelComponent,
RowFieldProps,
} from './fields/Row.js'
export type {
SelectFieldDescriptionComponent,
SelectFieldErrorComponent,
SelectFieldLabelComponent,
SelectFieldProps,
} from './fields/Select.js'
export type { MappedTab } from './fields/Tabs.js'
export type {
TabsFieldDescriptionComponent,
TabsFieldErrorComponent,
TabsFieldLabelComponent,
TabsFieldProps,
} from './fields/Tabs.js'
export type {
TextFieldDescriptionComponent,
TextFieldErrorComponent,
TextFieldLabelComponent,
TextFieldProps,
} from './fields/Text.js'
export type {
TextareaFieldDescriptionComponent,
TextareaFieldErrorComponent,
TextareaFieldLabelComponent,
TextareaFieldProps,
} from './fields/Textarea.js'
export type {
UploadFieldDescriptionComponent,
UploadFieldErrorComponent,
UploadFieldLabelComponent,
UploadFieldProps,
} from './fields/Upload.js'
export type { FieldComponentProps } from './fields/index.js'
export type { ErrorComponent, ErrorProps, GenericErrorProps } from './forms/Error.js'
export type { FormFieldBase } from './forms/Field.js'
export type {
Description,
DescriptionComponent,
DescriptionFunction,
FieldDescriptionProps,
GenericDescriptionProps,
} from './forms/FieldDescription.js'
export type { MappedField } from './forms/FieldMap.js'
export type { FieldMap } from './forms/FieldMap.js'
export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js'
export type { LabelProps, SanitizedLabelProps } from './forms/Label.js'
export type {
GenericLabelProps,
LabelComponent,
LabelProps,
SanitizedLabelProps,
} from './forms/Label.js'
export type { RowLabel, RowLabelComponent } from './forms/RowLabel.js'

5
packages/payload/src/collections/config/types.ts
View File

@@ -23,6 +23,7 @@ import type {
EntityDescriptionComponent,
GeneratePreviewURL,
LabelFunction,
LabelStatic,
LivePreviewConfig,
OpenGraphConfig,
} from '../../config/types.js'
@@ -438,8 +439,8 @@ export type CollectionConfig<TSlug extends CollectionSlug = any> = {
* Label configuration
*/
labels?: {
plural?: LabelFunction | Record<string, string> | string
singular?: LabelFunction | Record<string, string> | string
plural?: LabelFunction | LabelStatic
singular?: LabelFunction | LabelStatic
}
slug: string
/**

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

@@ -423,6 +423,8 @@ export type LocalizationConfig = Prettify<
export type LabelFunction = ({ t }: { t: TFunction }) => string
export type LabelStatic = Record<string, string> | string
export type SharpDependency = (
input?:
| ArrayBuffer

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

@@ -9,16 +9,16 @@ import type { JSONSchema4 } from 'json-schema'
import type React from 'react'
import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
import type { ErrorComponent } from '../../admin/forms/Error.js'
import type {
ConditionalDateProps,
Description,
DescriptionComponent,
ErrorProps,
LabelProps,
LabelComponent,
RowLabelComponent,
} from '../../admin/types.js'
import type { SanitizedCollectionConfig, TypeWithID } from '../../collections/config/types.js'
import type { CustomComponent, LabelFunction } from '../../config/types.js'
import type { CustomComponent, LabelFunction, LabelStatic } from '../../config/types.js'
import type { DBIdentifierName } from '../../database/types.js'
import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
import type { CollectionSlug } from '../../index.js'
@@ -171,8 +171,8 @@ type Admin = {
}
export type Labels = {
plural: LabelFunction | Record<string, string> | string
singular: LabelFunction | Record<string, string> | string
plural: LabelFunction | LabelStatic
singular: LabelFunction | LabelStatic
}
export type BaseValidateOptions<TData, TSiblingData> = {
@@ -203,7 +203,7 @@ export type Validate<
export type ClientValidate = Omit<Validate, 'req'>
export type OptionObject = {
label: LabelFunction | Record<string, string> | string
label: LabelFunction | LabelStatic
value: string
}
@@ -231,7 +231,7 @@ export interface FieldBase {
beforeValidate?: FieldHook[]
}
index?: boolean
label?: LabelFunction | Record<string, string> | false | string
label?: LabelFunction | LabelStatic | false
localized?: boolean
/**
* The name of the field. Must be alphanumeric and cannot contain ' . '
@@ -256,8 +256,8 @@ export type NumberField = {
/** Set this property to a string that will be used for browser autocomplete. */
autoComplete?: string
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -295,8 +295,8 @@ export type TextField = {
admin?: {
autoComplete?: string
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -330,8 +330,8 @@ export type EmailField = {
admin?: {
autoComplete?: string
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -343,8 +343,8 @@ export type EmailField = {
export type TextareaField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -360,8 +360,8 @@ export type TextareaField = {
export type CheckboxField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -372,8 +372,8 @@ export type CheckboxField = {
export type DateField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
afterInput?: CustomComponent[]
beforeInput?: CustomComponent[]
}
@@ -508,8 +508,8 @@ export type UIField = {
export type UploadField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
}
filterOptions?: FilterOptions
@@ -525,8 +525,8 @@ export type UploadField = {
type CodeAdmin = {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
editorOptions?: EditorProps['options']
language?: string
@@ -541,8 +541,8 @@ export type CodeField = {
type JSONAdmin = {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
editorOptions?: EditorProps['options']
} & Admin
@@ -560,8 +560,8 @@ export type JSONField = {
export type SelectField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
isClearable?: boolean
isSortable?: boolean
@@ -622,8 +622,8 @@ type SharedRelationshipProperties = {
type RelationshipAdmin = {
allowCreate?: boolean
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
isSortable?: boolean
} & Admin
@@ -663,8 +663,8 @@ export type RichTextField<
> = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
} & Admin
editor?:
@@ -712,8 +712,8 @@ export type ArrayField = {
export type RadioField = {
admin?: {
components?: {
Error?: CustomComponent<ErrorProps>
Label?: CustomComponent<LabelProps>
Error?: ErrorComponent
Label?: LabelComponent
}
layout?: 'horizontal' | 'vertical'
} & Admin

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

@@ -1,6 +1,6 @@
'use client'
import type { TextFieldProps } from '@payloadcms/ui'
import type { TextFieldProps } from 'payload'
import { SelectField, useForm } from '@payloadcms/ui'
import React, { useEffect, useState } from 'react'
@@ -34,7 +34,5 @@ export const DynamicFieldSelector: React.FC<TextFieldProps> = (props) => {
}
}, [fields, getDataByPath])
// TODO: label from config is Record<string, string> | false | string
// but the FormFieldBase type has only label?: string, changing FormFieldBase breaks other ui components
return <SelectField {...props} options={options} />
}

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

@@ -1,7 +1,6 @@
'use client'
import type { TextFieldProps } from '@payloadcms/ui'
import type { Data } from 'payload'
import type { Data, TextFieldProps } from 'payload'
import { TextField, useLocale, useWatchForm } from '@payloadcms/ui'
import React, { useEffect, useState } from 'react'

2
packages/plugin-form-builder/src/collections/Forms/index.ts
View File

@@ -2,7 +2,7 @@ import type { Block, CollectionConfig, Field } from 'payload'
import { deepMergeWithSourceArrays } from 'payload'
import type { FieldConfig, FormBuilderPluginConfig } from '../../types.js'
import type { FormBuilderPluginConfig } from '../../types.js'
import { fields } from './fields.js'

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

@@ -1,6 +1,7 @@
'use client'
import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
import type { FieldType, Options } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import {
FieldLabel,
@@ -82,7 +83,9 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
<React.Fragment>
&nbsp; &mdash; &nbsp;
<button
onClick={regenerateDescription}
onClick={() => {
void regenerateDescription()
}}
style={{
background: 'none',
backgroundColor: 'transparent',

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

@@ -85,7 +85,9 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
<React.Fragment>
&nbsp; &mdash; &nbsp;
<button
onClick={regenerateImage}
onClick={() => {
void regenerateImage()
}}
style={{
background: 'none',
backgroundColor: 'transparent',

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

@@ -1,6 +1,7 @@
'use client'
import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
import type { FieldType, Options } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import {
FieldLabel,
@@ -82,7 +83,9 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
<React.Fragment>
&nbsp; &mdash; &nbsp;
<button
onClick={regenerateTitle}
onClick={() => {
void regenerateTitle()
}}
style={{
background: 'none',
backgroundColor: 'transparent',

4
packages/richtext-lexical/src/features/blocks/component/BlockContent.tsx
View File

@@ -1,6 +1,4 @@
import type { FormFieldBase } from '@payloadcms/ui'
import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
import type { CollapsedPreferences, Data, FormState } from 'payload'
import type { CollapsedPreferences, Data, FieldMap, FormFieldBase, FormState } from 'payload'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
import { getTranslation } from '@payloadcms/translations'

3
packages/richtext-lexical/src/features/blocks/feature.client.tsx
View File

@@ -1,7 +1,6 @@
'use client'
import type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'
import type { Block } from 'payload'
import type { Block, ReducedBlock } from 'payload'
import { getTranslation } from '@payloadcms/translations'

2
packages/richtext-lexical/src/field/Field.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { SerializedEditorState } from 'lexical'
import type { FormFieldBase } from 'payload'
import {
FieldDescription,

2
packages/richtext-lexical/src/field/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { EditorConfig as LexicalEditorConfig } from 'lexical'
import type { FormFieldBase } from 'payload'
import { ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'
import React, { Suspense, lazy, useEffect, useState } from 'react'

2
packages/richtext-lexical/src/lexical/LexicalProvider.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
import type { FormFieldBase } from '@payloadcms/ui'
import type { EditorState, LexicalEditor, SerializedEditorState } from 'lexical'
import type { FormFieldBase } from 'payload'
import { LexicalComposer } from '@lexical/react/LexicalComposer.js'
import * as React from 'react'

2
packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { LexicalEditor } from 'lexical'
import type { FormFieldBase } from 'payload'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
import * as React from 'react'

3
packages/richtext-slate/src/field/RichText.tsx
View File

@@ -1,7 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { ClientValidate } from 'payload'
import type { ClientValidate, FormFieldBase } from 'payload'
import type { BaseEditor, BaseOperation } from 'slate'
import type { HistoryEditor } from 'slate-history'
import type { ReactEditor } from 'slate-react'

3
packages/richtext-slate/src/field/elements/link/LinkDrawer/types.ts
View File

@@ -1,5 +1,4 @@
import type { FieldMap } from '@payloadcms/ui'
import type { FormState } from 'payload'
import type { FieldMap, FormState } from 'payload'
export type Props = {
drawerSlug: string

2
packages/richtext-slate/src/field/elements/relationship/Element/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import {

4
packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import type { FormFieldBase, FormProps } from '@payloadcms/ui'
import type { ClientCollectionConfig } from 'payload'
import type { FormProps } from '@payloadcms/ui'
import type { ClientCollectionConfig, FormFieldBase } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import {

2
packages/richtext-slate/src/field/elements/upload/Element/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import type { ClientCollectionConfig } from 'payload'
import { getTranslation } from '@payloadcms/translations'

2
packages/richtext-slate/src/field/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import { ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'
import React, { Suspense, lazy, useEffect, useState } from 'react'

2
packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import React from 'react'

2
packages/richtext-slate/src/field/providers/ElementProvider.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import type { Element } from 'slate'
import React from 'react'

2
packages/richtext-slate/src/field/providers/LeafButtonProvider.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import React from 'react'

2
packages/richtext-slate/src/field/providers/LeafProvider.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { FormFieldBase } from '@payloadcms/ui'
import type { FormFieldBase } from 'payload'
import React from 'react'

4
packages/ui/src/elements/ArrayAction/index.tsx
View File

@@ -13,7 +13,7 @@ import './index.scss'
const baseClass = 'array-actions'
export type Props = {
addRow: (current: number, blockType?: string) => void
addRow: (current: number, blockType?: string) => Promise<void> | void
duplicateRow: (current: number) => void
hasMaxRows: boolean
index: number
@@ -77,7 +77,7 @@ export const ArrayAction: React.FC<Props> = ({
<PopupList.Button
className={`${baseClass}__action ${baseClass}__add`}
onClick={() => {
addRow(index + 1)
void addRow(index + 1)
close()
}}
>

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

@@ -26,7 +26,7 @@ export type Props = {
header?: React.ReactNode
initCollapsed?: boolean
isCollapsed?: boolean
onToggle?: (collapsed: boolean) => void
onToggle?: (collapsed: boolean) => Promise<void> | void
}
export const Collapsible: React.FC<Props> = ({
@@ -48,7 +48,7 @@ export const Collapsible: React.FC<Props> = ({
const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal
const toggleCollapsible = React.useCallback(() => {
if (typeof onToggle === 'function') onToggle(!isCollapsed)
if (typeof onToggle === 'function') void onToggle(!isCollapsed)
setCollapsedLocal(!isCollapsed)
}, [onToggle, isCollapsed])

4
packages/ui/src/elements/DocumentFields/index.tsx
View File

@@ -1,10 +1,8 @@
'use client'
import type { Description, DocumentPermissions } from 'payload'
import type { Description, DocumentPermissions, FieldMap } from 'payload'
import React from 'react'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { RenderFields } from '../../forms/RenderFields/index.js'
import { Gutter } from '../Gutter/index.js'
import './index.scss'

4
packages/ui/src/elements/EditMany/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { ClientCollectionConfig, FormState } from 'payload'
import type { ClientCollectionConfig, FieldMap, FormState } from 'payload'
import { useModal } from '@faceless-ui/modal'
import { getTranslation } from '@payloadcms/translations'
@@ -28,8 +28,6 @@ import './index.scss'
const baseClass = 'edit-many'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
export type EditManyProps = {
collection: ClientCollectionConfig
fieldMap: FieldMap

4
packages/ui/src/elements/FieldSelect/index.tsx
View File

@@ -1,10 +1,8 @@
'use client'
import type { FieldWithPath } from 'payload'
import type { FieldMap, FieldWithPath, MappedField } from 'payload'
import React, { Fragment, type JSX, useState } from 'react'
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { FieldLabel } from '../../fields/FieldLabel/index.js'
import { useForm } from '../../forms/Form/context.js'
import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'

2
packages/ui/src/elements/ListControls/getTextFieldsToBeSearched.ts
View File

@@ -1,4 +1,4 @@
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FieldMap, MappedField } from 'payload'
import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'

4
packages/ui/src/elements/ListControls/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { ClientCollectionConfig, Where } from 'payload'
import type { ClientCollectionConfig, FieldMap, Where } from 'payload'
import { useWindowInfo } from '@faceless-ui/window-info'
import { getTranslation } from '@payloadcms/translations'
@@ -11,8 +11,6 @@ const AnimateHeight = (AnimateHeightImport.default ||
import { useListInfo } from '@payloadcms/ui'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
import { ChevronIcon } from '../../icons/Chevron/index.js'
import { useListQuery } from '../../providers/ListQuery/index.js'

16
packages/ui/src/elements/SortColumn/index.tsx
View File

@@ -1,7 +1,15 @@
'use client'
import type { FieldBase } from 'payload'
// TODO: abstract the `next/navigation` dependency out from this component
import React, { useCallback } from 'react'
import { ChevronIcon } from '../../icons/Chevron/index.js'
import { useListQuery } from '../../providers/ListQuery/index.js'
import { useSearchParams } from '../../providers/SearchParams/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
import './index.scss'
export type SortColumnProps = {
Label: React.ReactNode
disable?: boolean
@@ -9,14 +17,6 @@ export type SortColumnProps = {
name: string
}
import type { FieldBase } from 'payload'
import { ChevronIcon } from '../../icons/Chevron/index.js'
import { useListQuery } from '../../providers/ListQuery/index.js'
import { useSearchParams } from '../../providers/SearchParams/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
import './index.scss'
const baseClass = 'sort-column'
export const SortColumn: React.FC<SortColumnProps> = (props) => {

4
packages/ui/src/elements/StepNav/types.ts
View File

@@ -1,7 +1,7 @@
import type { LabelFunction } from 'payload'
import type { LabelFunction, LabelStatic } from 'payload'
export type StepNavItem = {
label: LabelFunction | Record<string, string> | string
label: LabelFunction | LabelStatic
url?: string
}

4
packages/ui/src/elements/Table/index.tsx
View File

@@ -1,12 +1,10 @@
'use client'
import type { CellComponentProps, FieldBase, FieldTypes } from 'payload'
import type { CellComponentProps, FieldBase, FieldMap, FieldTypes } from 'payload'
import React from 'react'
export * from './TableCellProvider/index.js'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { useTableColumns } from '../TableColumns/index.js'
import { TableCellProvider } from './TableCellProvider/index.js'
import './index.scss'

4
packages/ui/src/elements/TableColumns/buildColumnState.tsx
View File

@@ -1,8 +1,8 @@
'use client'
import { type CellComponentProps, type SanitizedCollectionConfig } from 'payload'
import type { CellComponentProps, FieldMap, MappedField, SanitizedCollectionConfig } from 'payload'
import React from 'react'
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
import type { Column } from '../Table/index.js'

2
packages/ui/src/elements/TableColumns/filterFields.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FieldMap, MappedField } from 'payload'
// 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)
// 2. Maps through top-level `tabs` fields and filters out the same

3
packages/ui/src/elements/TableColumns/getInitialColumns.ts
View File

@@ -1,4 +1,5 @@
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FieldMap, MappedField } from 'payload'
import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
export function fieldAffectsData(field: MappedField): boolean {

12
packages/ui/src/elements/WhereBuilder/reduceFieldMap.tsx
View File

@@ -1,10 +1,9 @@
'use client'
import type { ClientTranslationKeys, I18nClient } from '@payloadcms/translations'
import type { FieldMap } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import type { FieldMap } from '../../utilities/buildComponentMap.js'
import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'
import { combineLabel } from '../FieldSelect/index.js'
import fieldTypes from './field-types.js'
@@ -26,9 +25,11 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {
const tabs = field.fieldComponentProps.tabs
tabs.forEach((tab) => {
if (typeof tab.label !== 'boolean') {
const localizedTabLabel = getTranslation(tab.label, i18n)
const labelWithPrefix = labelPrefix
? labelPrefix + ' > ' + localizedTabLabel
: localizedTabLabel
@@ -69,7 +70,8 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
}
if (field.type === 'collapsible' && 'fieldMap' in field.fieldComponentProps) {
const localizedTabLabel = getTranslation(field.fieldComponentProps.label, i18n)
const localizedTabLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
const labelWithPrefix = labelPrefix
? labelPrefix + ' > ' + localizedTabLabel
: localizedTabLabel
@@ -86,7 +88,7 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
}
if (field.type === 'group' && 'fieldMap' in field.fieldComponentProps) {
const translatedLabel = getTranslation(field.fieldComponentProps.label, i18n)
const translatedLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
const labelWithPrefix = labelPrefix
? translatedLabel
@@ -126,7 +128,7 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
return acc
}, [])
const localizedLabel = getTranslation(field.fieldComponentProps.label, i18n)
const localizedLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
const formattedLabel = labelPrefix
? combineLabel({

4
packages/ui/src/elements/WhereBuilder/types.ts
View File

@@ -1,6 +1,4 @@
import type { Field, Operator, SanitizedCollectionConfig, Where } from 'payload'
import type { FieldMap } from '../../utilities/buildComponentMap.js'
import type { Field, FieldMap, Operator, SanitizedCollectionConfig, Where } from 'payload'
export type WhereBuilderProps = {
collectionPluralLabel: SanitizedCollectionConfig['labels']['plural']

14
packages/ui/src/exports/client/index.ts
View File

@@ -104,13 +104,13 @@ export { RadioGroupField } from '../../fields/RadioGroup/index.js'
export { RelationshipField } from '../../fields/Relationship/index.js'
export { RichTextField } from '../../fields/RichText/index.js'
export { RowField } from '../../fields/Row/index.js'
export { SelectField, type SelectFieldProps, SelectInput } from '../../fields/Select/index.js'
export { TabsField, type TabsFieldProps } from '../../fields/Tabs/index.js'
export { SelectField, SelectInput } from '../../fields/Select/index.js'
export { TabsField } from '../../fields/Tabs/index.js'
export { TextField, TextInput } from '../../fields/Text/index.js'
export type { TextFieldProps, TextInputProps } from '../../fields/Text/index.js'
export type { TextInputProps } from '../../fields/Text/index.js'
export { TextareaField, TextareaInput } from '../../fields/Textarea/index.js'
export type { TextAreaInputProps, TextareaFieldProps } from '../../fields/Textarea/index.js'
export type { TextAreaInputProps } from '../../fields/Textarea/index.js'
export { UIField } from '../../fields/UI/index.js'
export { UploadField, UploadInput } from '../../fields/Upload/index.js'
@@ -140,7 +140,6 @@ export { RowLabelProvider, useRowLabel } from '../../forms/RowLabel/Context/inde
export { FormSubmit } from '../../forms/Submit/index.js'
export { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'
export { useField } from '../../forms/useField/index.js'
export type { FormFieldBase } from '../../fields/shared/index.js'
export type { FieldType, Options } from '../../forms/useField/types.js'
export { withCondition } from '../../forms/withCondition/index.js'
@@ -180,12 +179,7 @@ export type {
CollectionComponentMap,
ComponentMap,
ConfigComponentMapBase,
FieldComponentProps,
FieldMap,
GlobalComponentMap,
MappedField,
MappedTab,
ReducedBlock,
} from '../../providers/ComponentMap/buildComponentMap/types.js'
export { ComponentMapProvider, useComponentMap } from '../../providers/ComponentMap/index.js'
export { ConfigProvider, useConfig } from '../../providers/Config/index.js'

5
packages/ui/src/fields/Array/ArrayRow.tsx
View File

@@ -1,11 +1,10 @@
'use client'
import type { ArrayField, FieldPermissions, Row } from 'payload'
import type { ArrayField, FieldMap, FieldPermissions, Row } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { ArrayAction } from '../../elements/ArrayAction/index.js'
import { Collapsible } from '../../elements/Collapsible/index.js'
@@ -20,7 +19,7 @@ const baseClass = 'array-field'
type ArrayRowProps = {
CustomRowLabel?: React.ReactNode
addRow: (rowIndex: number) => void
addRow: (rowIndex: number) => Promise<void> | void
duplicateRow: (rowIndex: number) => void
errorCount: number
fieldMap: FieldMap

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

@@ -1,12 +1,9 @@
'use client'
import type { ArrayField as ArrayFieldType } from 'payload'
import type { ArrayFieldProps, ArrayField as ArrayFieldType } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FormFieldBase } from '../shared/index.js'
import { Banner } from '../../elements/Banner/index.js'
import { Button } from '../../elements/Button/index.js'
import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
@@ -31,18 +28,6 @@ import './index.scss'
const baseClass = 'array-field'
export type ArrayFieldProps = {
CustomRowLabel?: React.ReactNode
fieldMap: FieldMap
forceRender?: boolean
isSortable?: boolean
labels?: ArrayFieldType['labels']
maxRows?: ArrayFieldType['maxRows']
minRows?: ArrayFieldType['minRows']
name?: string
width?: string
} & FormFieldBase
export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
const {
name,
@@ -73,6 +58,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
permissions,
readOnly: readOnlyFromContext,
} = useFieldProps()
const minRows = minRowsProp ?? required ? 1 : 0
const { setDocFieldPreferences } = useDocumentInfo()
@@ -132,7 +118,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing
const addRow = useCallback(
async (rowIndex: number) => {
async (rowIndex: number): Promise<void> => {
await addFieldRow({ path, rowIndex, schemaPath })
setModified(true)
@@ -317,7 +303,9 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
icon="plus"
iconPosition="left"
iconStyle="with-border"
onClick={() => addRow(value || 0)}
onClick={() => {
void addRow(value || 0)
}}
>
{t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}
</Button>

5
packages/ui/src/fields/Blocks/BlockRow.tsx
View File

@@ -1,11 +1,10 @@
'use client'
import type { FieldPermissions, Labels, Row } from 'payload'
import type { FieldPermissions, Labels, ReducedBlock, Row } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
import { Collapsible } from '../../elements/Collapsible/index.js'
import { ErrorPill } from '../../elements/ErrorPill/index.js'
@@ -19,7 +18,7 @@ import { SectionTitle } from './SectionTitle/index.js'
const baseClass = 'blocks-field'
type BlockFieldProps = {
addRow: (rowIndex: number, blockType: string) => void
addRow: (rowIndex: number, blockType: string) => Promise<void> | void
block: ReducedBlock
blocks: ReducedBlock[]
duplicateRow: (rowIndex: number) => void

8
packages/ui/src/fields/Blocks/BlocksDrawer/index.tsx
View File

@@ -1,13 +1,11 @@
'use client'
import type { I18nClient } from '@payloadcms/translations'
import type { Labels } from 'payload'
import type { Labels, ReducedBlock } from 'payload'
import { useModal } from '@faceless-ui/modal'
import { getTranslation } from '@payloadcms/translations'
import React, { useEffect, useState } from 'react'
import type { ReducedBlock } from '../../../providers/ComponentMap/buildComponentMap/types.js'
import { Drawer } from '../../../elements/Drawer/index.js'
import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js'
import { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js'
@@ -16,7 +14,7 @@ import { BlockSearch } from './BlockSearch/index.js'
import './index.scss'
export type Props = {
addRow: (index: number, blockType?: string) => void
addRow: (index: number, blockType?: string) => Promise<void> | void
addRowIndex: number
blocks: ReducedBlock[]
drawerSlug: string
@@ -76,7 +74,7 @@ export const BlocksDrawer: React.FC<Props> = (props) => {
alignLabel="center"
label={getTranslation(blockLabels?.singular, i18n)}
onClick={() => {
addRow(addRowIndex, slug)
void addRow(addRowIndex, slug)
closeModal(drawerSlug)
}}
thumbnail={

11
packages/ui/src/fields/Blocks/RowActions.tsx
View File

@@ -1,20 +1,15 @@
'use client'
import type { Labels } from 'payload'
import type { FieldMap, Labels, ReducedBlock } from 'payload'
import { useModal } from '@faceless-ui/modal'
import React from 'react'
import type {
FieldMap,
ReducedBlock,
} from '../../providers/ComponentMap/buildComponentMap/types.js'
import { ArrayAction } from '../../elements/ArrayAction/index.js'
import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'
import { BlocksDrawer } from './BlocksDrawer/index.js'
export const RowActions: React.FC<{
addRow: (rowIndex: number, blockType: string) => void
addRow: (rowIndex: number, blockType: string) => Promise<void> | void
blockType: string
blocks: ReducedBlock[]
duplicateRow: (rowIndex: number, blockType: string) => void
@@ -51,7 +46,7 @@ export const RowActions: React.FC<{
<BlocksDrawer
addRow={(_, rowBlockType) => {
if (typeof addRow === 'function') {
addRow(indexToAdd, rowBlockType)
void addRow(indexToAdd, rowBlockType)
}
closeModal(drawerSlug)
}}

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

@@ -1,12 +1,9 @@
'use client'
import type { BlockField } from 'payload'
import type { BlocksFieldProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { Fragment, useCallback } from 'react'
import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FormFieldBase } from '../shared/index.js'
import { Banner } from '../../elements/Banner/index.js'
import { Button } from '../../elements/Button/index.js'
import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
@@ -34,18 +31,6 @@ import './index.scss'
const baseClass = 'blocks-field'
export type BlocksFieldProps = {
blocks?: ReducedBlock[]
forceRender?: boolean
isSortable?: boolean
labels?: BlockField['labels']
maxRows?: number
minRows?: number
name?: string
slug?: string
width?: string
} & FormFieldBase
const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
const { i18n, t } = useTranslation()
@@ -132,7 +117,7 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing
const addRow = useCallback(
async (rowIndex: number, blockType: string) => {
async (rowIndex: number, blockType: string): Promise<void> => {
await addFieldRow({
data: { blockType },
path,
@@ -278,7 +263,6 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
{(draggableSortableItemProps) => (
<BlockRow
{...draggableSortableItemProps}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
addRow={addRow}
block={blockToRender}
blocks={blocks}
@@ -342,7 +326,6 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
</Button>
</DrawerToggler>
<BlocksDrawer
// eslint-disable-next-line @typescript-eslint/no-misused-promises
addRow={addRow}
addRowIndex={rows?.length || 0}
blocks={blocks}

2
packages/ui/src/fields/Checkbox/Input.tsx
View File

@@ -15,7 +15,7 @@ export type CheckboxInputProps = {
className?: string
id?: string
inputRef?: React.RefObject<HTMLInputElement | null>
label?: LabelProps['label']
label?: LabelProps<'checkbox'>['label']
labelProps?: SanitizedLabelProps
name?: string
onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void

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

@@ -1,10 +1,9 @@
'use client'
import type { ClientValidate } from 'payload'
import type { CheckboxFieldProps, ClientValidate } from 'payload'
import React, { useCallback } from 'react'
import type { CheckboxInputProps } from './Input.js'
import type { CheckboxFieldProps } from './types.js'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { useForm } from '../../forms/Form/context.js'

12
packages/ui/src/fields/Checkbox/types.ts
View File

@@ -1,12 +0,0 @@
import type { FormFieldBase } from '../shared/index.js'
export type CheckboxFieldProps = {
checked?: boolean
disableFormData?: boolean
id?: string
name?: string
onChange?: (val: boolean) => void
partialChecked?: boolean
path?: string
width?: string
} & FormFieldBase

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

@@ -1,10 +1,8 @@
'use client'
import type { CodeField as CodeFieldType } from 'payload'
import type { CodeFieldProps } from 'payload'
import React, { useCallback } from 'react'
import type { FormFieldBase } from '../shared/index.js'
import { CodeEditor } from '../../elements/CodeEditor/index.js'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { useField } from '../../forms/useField/index.js'
@@ -15,14 +13,6 @@ import { FieldLabel } from '../FieldLabel/index.js'
import { fieldBaseClass } from '../shared/index.js'
import './index.scss'
export type CodeFieldProps = {
editorOptions?: CodeFieldType['admin']['editorOptions']
language?: CodeFieldType['admin']['language']
name?: string
path?: string
width: string
} & FormFieldBase
const prismToMonacoLanguageMap = {
js: 'javascript',
ts: 'typescript',

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

@@ -1,5 +1,5 @@
'use client'
import type { DocumentPreferences, FieldPermissions } from 'payload'
import type { CollapsibleFieldProps, DocumentPreferences } from 'payload'
import React, { Fragment, useCallback, useEffect, useState } from 'react'
@@ -18,18 +18,9 @@ import './index.scss'
const baseClass = 'collapsible-field'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FormFieldBase } from '../shared/index.js'
import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
import { FieldDescription } from '../FieldDescription/index.js'
export type CollapsibleFieldProps = {
fieldMap: FieldMap
initCollapsed?: boolean
width?: string
} & FormFieldBase
const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
const {
CustomDescription,
@@ -65,7 +56,7 @@ const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
const fieldHasErrors = errorCount > 0
const onToggle = useCallback(
async (newCollapsedState: boolean) => {
async (newCollapsedState: boolean): Promise<void> => {
const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)
if (preferencesKey) {
@@ -145,7 +136,6 @@ const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
</div>
}
initCollapsed={collapsedOnMount}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onToggle={onToggle}
>
<RenderFields

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

@@ -1,5 +1,5 @@
'use client'
import type { ClientValidate, DateField } from 'payload'
import type { ClientValidate, DateField, DateFieldProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
@@ -13,21 +13,11 @@ import './index.scss'
const baseClass = 'date-time-field'
import type { FormFieldBase } from '../shared/index.js'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { withCondition } from '../../forms/withCondition/index.js'
import { FieldDescription } from '../FieldDescription/index.js'
import { FieldError } from '../FieldError/index.js'
export type DateFieldProps = {
date?: DateField['admin']['date']
name?: string
path?: string
placeholder?: DateField['admin']['placeholder'] | string
width?: string
} & FormFieldBase
const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
const {
name,

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

@@ -1,11 +1,9 @@
'use client'
import type { ClientValidate, EmailField as EmailFieldType } from 'payload'
import type { ClientValidate, EmailFieldProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { useCallback } from 'react'
import type { FormFieldBase } from '../shared/index.js'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { useField } from '../../forms/useField/index.js'
import { withCondition } from '../../forms/withCondition/index.js'
@@ -16,14 +14,6 @@ import { FieldLabel } from '../FieldLabel/index.js'
import { fieldBaseClass } from '../shared/index.js'
import './index.scss'
export type EmailFieldProps = {
autoComplete?: string
name?: string
path?: string
placeholder?: EmailFieldType['admin']['placeholder']
width?: string
} & FormFieldBase
const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
const {
name,

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

@@ -1,5 +1,5 @@
'use client'
import type { FieldDescriptionProps } from 'payload'
import type { GenericDescriptionProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
@@ -10,7 +10,7 @@ import './index.scss'
const baseClass = 'field-description'
const DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {
const DefaultFieldDescription: React.FC<GenericDescriptionProps> = (props) => {
const { className, description, marginPlacement } = props
const { path } = useFieldProps()
@@ -37,7 +37,7 @@ const DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {
return null
}
export const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {
export const FieldDescription: React.FC<GenericDescriptionProps> = (props) => {
const { CustomDescription } = props
if (CustomDescription !== undefined) {

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

@@ -1,6 +1,6 @@
'use client'
import type { ErrorProps } from 'payload'
import type { GenericErrorProps } from 'payload'
import React from 'react'
@@ -11,7 +11,7 @@ import './index.scss'
const baseClass = 'field-error'
const DefaultFieldError: React.FC<ErrorProps> = (props) => {
const DefaultFieldError: React.FC<GenericErrorProps> = (props) => {
const {
alignCaret = 'right',
message: messageFromProps,
@@ -41,7 +41,7 @@ const DefaultFieldError: React.FC<ErrorProps> = (props) => {
return null
}
export const FieldError: React.FC<ErrorProps> = (props) => {
export const FieldError: React.FC<GenericErrorProps> = (props) => {
const { CustomError } = props
if (CustomError !== undefined) {

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

@@ -1,6 +1,6 @@
'use client'
import type { LabelProps } from 'payload'
import type { GenericLabelProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React from 'react'
@@ -12,7 +12,7 @@ import { useTranslation } from '../../providers/Translation/index.js'
import { generateFieldID } from '../../utilities/generateFieldID.js'
import './index.scss'
const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
const DefaultFieldLabel: React.FC<GenericLabelProps> = (props) => {
const {
as: Element = 'label',
htmlFor: htmlForFromProps,
@@ -40,7 +40,7 @@ const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
return null
}
export const FieldLabel: React.FC<LabelProps> = (props) => {
export const FieldLabel: React.FC<GenericLabelProps> = (props) => {
const { CustomLabel } = props
if (CustomLabel !== undefined) {

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

@@ -1,11 +1,10 @@
'use client'
import type { GroupFieldProps } from 'payload'
import { getTranslation } from '@payloadcms/translations'
import React, { Fragment } from 'react'
import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FormFieldBase } from '../shared/index.js'
import { useCollapsible } from '../../elements/Collapsible/provider.js'
import { ErrorPill } from '../../elements/ErrorPill/index.js'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
@@ -27,15 +26,7 @@ import { GroupProvider, useGroup } from './provider.js'
const baseClass = 'group-field'
export type GroupFieldProps = {
fieldMap: FieldMap
forceRender?: boolean
hideGutter?: boolean
name?: string
width?: string
} & FormFieldBase
const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
export const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
const {
CustomDescription,
CustomLabel,

15
packages/ui/src/fields/Hidden/index.tsx
View File

@@ -1,25 +1,18 @@
'use client'
import React, { useEffect } from 'react'
import type { FormFieldBase } from '../index.js'
import type { HiddenFieldProps } from 'payload'
import React, { useEffect } from 'react'
import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
import { useField } from '../../forms/useField/index.js'
import { withCondition } from '../../forms/withCondition/index.js'
export type HiddenInputFieldProps = {
disableModifyingForm?: false
forceUsePathFromProps?: boolean
name?: string
path?: string
value?: unknown
} & FormFieldBase
/**
* This is mainly used to save a value on the form that is not visible to the user.
* For example, this sets the `ìd` property of a block in the Blocks field.
*/
const HiddenFieldComponent: React.FC<HiddenInputFieldProps> = (props) => {
const HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {
const {
name,
disableModifyingForm = true,

Some files were not shown because too many files have changed in this diff Show More