Payload CMS Release: 3.0.0-beta.71

v3.0.0-beta.71 (2024-07-29)

Features

• ui: passes field props to custom components (#7360) (97837f0)
• adds keepAfterRead to plugin-relationship-objectid (#7388) (f9e5573)

Bug Fixes

• db-sqlite: migration template errors (#7404) (6d066c2)
• db-postgres: migration template type error (#7403) (1dc4288)
• merges headers safely in nextjs route handlers (#7399) (c8da9b1)
• ui: stacking drawers (#7397) (2021028)
• docs: update import path for validation functions for fields (#7392) (2ea56fe)
• ui: handle abort() call signal error (#7390) (5655266)
• ui: spacing in row fields by using gap instead of inner margins (#7387) (e823051)

BREAKING CHANGES

• ui: passes field props to custom components (#7360) (97837f0)

  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:

  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:

  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:

  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:

  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:

  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:

  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

• ui: update the names of internal components so that they respect eslint rules (#7362) (e734d51)

So _Upload becomes UploadComponent which doesnt break the naming
convention of react components and we no longer export these internal
components

Contributors

• Dan Ribbens (@DanRibbens)
• James Mikrut (@jmikrut)
• Jacob Fletcher (@jacobsfletch)
• Paul (@paulpopus)
• Patrik (@PatrikKozak)