v3.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:
  ```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
  
• 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)