Merge branch 'feat/next-poc' of github.com:payloadcms/payload into chore/next-rte

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -54,21 +54,9 @@ const Content: React.FC<DocumentDrawerProps> = ({ collectionSlug, Header, drawer
   const { schemaPath } = useFieldPath()
   const { id, docPermissions } = useDocumentInfo()
 
-  // The component definition could come from multiple places in the config
-  // we need to cascade into the proper component from the top-down
-  // 1. "components.Edit"
-  // 2. "components.Edit.Default"
-  // 3. "components.Edit.Default.Component"
-  // const CustomEditView =
-  //   typeof Edit === 'function'
-  //     ? Edit
-  //     : typeof Edit === 'object' && typeof Edit.Default === 'function'
-  //     ? Edit.Default
-  //     : typeof Edit?.Default === 'object' &&
-  //       'Component' in Edit.Default &&
-  //       typeof Edit.Default.Component === 'function'
-  //     ? Edit.Default.Component
-  //     : undefined
+  // If they are replacing the entire edit view, use that.
+  // Else let the DefaultEdit determine what to render.
+  // const CustomEditView = typeof Edit === 'function' ? Edit : undefined
 
   const [fields, setFields] = useState(() => formatFields(fieldsFromConfig, true))
 

packages/ui/src/forms/fields/Relationship/AddNew/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from '../../../../providers/Translation'
 
@@ -15,9 +16,10 @@ import { Tooltip } from '../../../../elements/Tooltip'
 import { Plus } from '../../../../icons/Plus'
 import { useAuth } from '../../../../providers/Auth'
 import { useConfig } from '../../../../providers/Config'
-import './index.scss'
 import { useRelatedCollections } from './useRelatedCollections'
 
+import './index.scss'
+
 const baseClass = 'relationship-add-new'
 
 export const AddNewRelation: React.FC<Props> = ({

packages/ui/src/forms/fields/Relationship/index.tsx

@@ -15,19 +15,18 @@ import { useAuth } from '../../../providers/Auth'
 import { useConfig } from '../../../providers/Config'
 import { GetFilterOptions } from '../../../elements/GetFilterOptions'
 import { useLocale } from '../../../providers/Locale'
-import DefaultError from '../../Error'
-import FieldDescription from '../../FieldDescription'
 import { useFormProcessing } from '../../Form/context'
-import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import { fieldBaseClass } from '../shared'
 import { AddNewRelation } from './AddNew'
 import { createRelationMap } from './createRelationMap'
 import { findOptionsByValue } from './findOptionsByValue'
-import './index.scss'
 import optionsReducer from './optionsReducer'
 import { MultiValueLabel } from './select-components/MultiValueLabel'
 import { SingleValue } from './select-components/SingleValue'
+import { withCondition } from '../../withCondition'
+
+import './index.scss'
 
 const maxResultsPerRequest = 10
 
@@ -36,30 +35,18 @@ const baseClass = 'relationship'
 const Relationship: React.FC<Props> = (props) => {
   const {
     name,
-    admin: {
-      allowCreate = true,
-      className,
-      components: { Error, Label } = {},
-      condition,
-      description,
-      isSortable = true,
-      readOnly,
-      sortOptions,
-      style,
-      width,
-    } = {},
-    filterOptions,
-    hasMany,
-    label,
-    path,
-    relationTo,
+    className,
+    style,
+    width,
+    readOnly,
+    Description,
+    Error,
+    Label,
+    path: pathFromProps,
     required,
     validate,
   } = props
 
-  const ErrorComp = Error || DefaultError
-  const LabelComp = Label || DefaultLabel
-
   const config = useConfig()
 
   const {
@@ -68,6 +55,13 @@ const Relationship: React.FC<Props> = (props) => {
     serverURL,
   } = config
 
+  const relationTo = 'relationTo' in props ? props?.relationTo : undefined
+  const hasMany = 'hasMany' in props ? props?.hasMany : undefined
+  const filterOptions = 'filterOptions' in props ? props?.filterOptions : undefined
+  const sortOptions = 'sortOptions' in props ? props?.sortOptions : undefined
+  const isSortable = 'isSortable' in props ? props?.isSortable : true
+  const allowCreate = 'allowCreate' in props ? props?.allowCreate : true
+
   const { i18n, t } = useTranslation()
   const { permissions } = useAuth()
   const { code: locale } = useLocale()
@@ -83,17 +77,18 @@ const Relationship: React.FC<Props> = (props) => {
   const [hasLoadedFirstPage, setHasLoadedFirstPage] = useState(false)
   const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)
   const firstRun = useRef(true)
-  const pathOrName = path || name
 
   const memoizedValidate = useCallback(
     (value, validationOptions) => {
-      return validate(value, { ...validationOptions, required })
+      if (typeof validate === 'function') {
+        return validate(value, { ...validationOptions, required })
+      }
     },
     [validate, required],
   )
 
-  const { errorMessage, initialValue, setValue, showError, value } = useField<Value | Value[]>({
-    path: pathOrName,
+  const { initialValue, setValue, showError, value, path } = useField<Value | Value[]>({
+    path: pathFromProps || name,
     validate: memoizedValidate,
   })
 
@@ -430,19 +425,19 @@ const Relationship: React.FC<Props> = (props) => {
       ]
         .filter(Boolean)
         .join(' ')}
-      id={`field-${pathOrName.replace(/\./g, '__')}`}
+      id={`field-${path.replace(/\./g, '__')}`}
       style={{
         ...style,
         width,
       }}
     >
-      <ErrorComp message={errorMessage} showError={showError} />
-      <LabelComp htmlFor={pathOrName} label={label} required={required} />
+      {Error}
+      {Label}
       <GetFilterOptions
         {...{
           filterOptions,
           filterOptionsResult,
-          path: pathOrName,
+          path,
           relationTo,
           setFilterOptionsResult,
         }}
@@ -528,7 +523,7 @@ const Relationship: React.FC<Props> = (props) => {
                 dispatchOptions,
                 hasMany,
                 options,
-                path: pathOrName,
+                path,
                 relationTo,
                 setValue,
                 value,
@@ -538,9 +533,9 @@ const Relationship: React.FC<Props> = (props) => {
         </div>
       )}
       {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
-      <FieldDescription description={description} path={path} value={value} />
+      {Description}
     </div>
   )
 }
 
-export default Relationship
+export default withCondition(Relationship)

packages/ui/src/forms/fields/Relationship/select-components/MultiValueLabel/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { MultiValueProps } from 'react-select'
 
 import React, { Fragment, useEffect, useState } from 'react'

packages/ui/src/forms/fields/Relationship/select-components/SingleValue/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SingleValueProps } from 'react-select'
 
 import React, { Fragment, useEffect, useState } from 'react'

packages/ui/src/forms/fields/Relationship/types.ts

@@ -1,11 +1,11 @@
 import { I18n } from '@payloadcms/translations'
 import type { SanitizedCollectionConfig } from 'payload/types'
 import type { SanitizedConfig } from 'payload/types'
-import type { RelationshipField } from 'payload/types'
 import type { Where } from 'payload/types'
+import { FormFieldBase } from '../shared'
 
-export type Props = Omit<RelationshipField, 'type'> & {
-  path?: string
+export type Props = FormFieldBase & {
+  name: string
 }
 
 export type Option = {

packages/ui/src/forms/fields/shared.ts

@@ -113,6 +113,9 @@ export type FormFieldBase = {
   | {
       // For `relationship` fields
       relationTo?: RelationshipField['relationTo']
+      filterOptions?: RelationshipField['filterOptions']
+      sortOptions?: RelationshipField['admin']['sortOptions']
+      allowCreate?: RelationshipField['admin']['allowCreate']
     }
   | {
       // For `richText` fields