feat(ui): extracts relationship input for external use (#12339)

Author: JarrodMFlesch

packages/create-payload-app/src/lib/manage-env-files.ts

@@ -22,7 +22,9 @@ const updateEnvExampleVariables = (
 
       const [key] = line.split('=')
 
-      if (!key) {return}
+      if (!key) {
+        return
+      }
 
       if (key === 'DATABASE_URI' || key === 'POSTGRES_URL' || key === 'MONGODB_URI') {
         const dbChoice = databaseType ? dbChoiceRecord[databaseType] : null

packages/payload/src/fields/config/types.ts

@@ -1208,7 +1208,7 @@ export type PolymorphicRelationshipField = {
 
 export type PolymorphicRelationshipFieldClient = {
   admin?: {
-    sortOptions?: Pick<PolymorphicRelationshipField['admin'], 'sortOptions'>
+    sortOptions?: PolymorphicRelationshipField['admin']['sortOptions']
   } & RelationshipAdminClient
 } & Pick<PolymorphicRelationshipField, 'relationTo'> &
   SharedRelationshipPropertiesClient

packages/ui/src/elements/AddNewRelation/index.tsx

@@ -4,7 +4,6 @@ import type { ClientCollectionConfig } from 'payload'
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
-import type { Value } from '../../fields/Relationship/types.js'
 import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'
 import type { Props } from './types.js'
 
@@ -24,9 +23,9 @@ const baseClass = 'relationship-add-new'
 export const AddNewRelation: React.FC<Props> = ({
   Button: ButtonFromProps,
   hasMany,
+  onChange,
   path,
   relationTo,
-  setValue,
   unstyled,
   value,
 }) => {
@@ -54,18 +53,15 @@ export const AddNewRelation: React.FC<Props> = ({
   const onSave: DocumentDrawerContextType['onSave'] = useCallback(
     ({ doc, operation }) => {
       if (operation === 'create') {
-        const newValue: Value = Array.isArray(relationTo)
-          ? {
-              relationTo: collectionConfig?.slug,
-              value: doc.id,
-            }
-          : doc.id
-
         // ensure the value is not already in the array
-        const isNewValue =
-          Array.isArray(relationTo) && Array.isArray(value)
-            ? !value.some((v) => v && typeof v === 'object' && v.value === doc.id)
-            : value !== doc.id
+        let isNewValue = false
+        if (!value) {
+          isNewValue = true
+        } else {
+          isNewValue = Array.isArray(value)
+            ? !value.some((v) => v && v.value === doc.id)
+            : value.value !== doc.id
+        }
 
         if (isNewValue) {
           // dispatchOptions({
@@ -79,17 +75,26 @@ export const AddNewRelation: React.FC<Props> = ({
           //   sort: true,
           // })
 
-          if (hasMany) {
-            setValue([...(Array.isArray(value) ? value : []), newValue])
+          if (hasMany === true) {
+            onChange([
+              ...(Array.isArray(value) ? value : []),
+              {
+                relationTo: collectionConfig?.slug,
+                value: doc.id,
+              },
+            ])
           } else {
-            setValue(newValue)
+            onChange({
+              relationTo: relatedCollections[0].slug,
+              value: doc.id,
+            })
           }
         }
 
         setSelectedCollection(undefined)
       }
     },
-    [relationTo, collectionConfig, hasMany, setValue, value],
+    [collectionConfig, hasMany, onChange, value, relatedCollections],
   )
 
   const onPopupToggle = useCallback((state) => {

packages/ui/src/elements/AddNewRelation/types.ts

@@ -1,11 +1,20 @@
-import type { Value } from '../../fields/Relationship/types.js'
+import type { ValueWithRelation } from 'payload'
 
 export type Props = {
   readonly Button?: React.ReactNode
-  readonly hasMany: boolean
   readonly path: string
   readonly relationTo: string | string[]
-  readonly setValue: (value: unknown) => void
   readonly unstyled?: boolean
-  readonly value: Value | Value[]
-}
+} & SharedRelationshipInputProps
+
+type SharedRelationshipInputProps =
+  | {
+      readonly hasMany: false
+      readonly onChange: (value: ValueWithRelation, modifyForm?: boolean) => void
+      readonly value?: null | ValueWithRelation
+    }
+  | {
+      readonly hasMany: true
+      readonly onChange: (value: ValueWithRelation[]) => void
+      readonly value?: null | ValueWithRelation[]
+    }

packages/ui/src/exports/client/index.ts

@@ -176,7 +176,7 @@ export { NumberField } from '../../fields/Number/index.js'
 export { PasswordField } from '../../fields/Password/index.js'
 export { PointField } from '../../fields/Point/index.js'
 export { RadioGroupField } from '../../fields/RadioGroup/index.js'
-export { RelationshipField } from '../../fields/Relationship/index.js'
+export { RelationshipField, RelationshipInput } from '../../fields/Relationship/index.js'
 export { RichTextField } from '../../fields/RichText/index.js'
 export { RowField } from '../../fields/Row/index.js'
 export { SelectField, SelectInput } from '../../fields/Select/index.js'