@payloadcms/ui 3.71.0-internal-debug.80dab4c → 3.71.0-internal.27e1e08

package/dist/fields/Relationship/Input.js

@@ -1,5 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dequal } from 'dequal/lite';
 import { formatAdminURL, wordBoundariesRegex } from 'payload/shared';
 import * as qs from 'qs-esm';
@@ -29,844 +30,765 @@ import './index.scss';
 import { MultiValueLabel } from './select-components/MultiValueLabel/index.js';
 import { SingleValue } from './select-components/SingleValue/index.js';
 const baseClass = 'relationship';
-export const RelationshipInput = (props)=>{
-    const { AfterInput, allowCreate = true, allowEdit = true, appearance = 'select', BeforeInput, className, description, Description, Error, filterOptions, formatDisplayedOptions, hasMany, initialValue, isSortable = true, label, Label, localized, maxResultsPerRequest = 10, onChange, path, placeholder, readOnly, relationTo, required, showError, sortOptions, style, value } = props;
-    const { config, getEntityConfig } = useConfig();
-    const { routes: { api }, serverURL } = config;
-    const { i18n, t } = useTranslation();
-    const { permissions } = useAuth();
-    const { code: locale } = useLocale();
-    const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
-        id: undefined,
-        collectionSlug: undefined,
-        hasReadPermission: false
-    });
-    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
-    const [lastLoadedPage, setLastLoadedPage] = useState({});
-    const [errorLoading, setErrorLoading] = useState('');
-    const [search, setSearch] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
-    const [menuIsOpen, setMenuIsOpen] = useState(false);
-    const hasLoadedFirstPageRef = useRef(false);
-    const { queueTask } = useQueue();
-    const [options, dispatchOptions] = useReducer(optionsReducer, []);
-    const valueRef = useRef(value);
-    const [DocumentDrawer, , { drawerSlug, isDrawerOpen, openDrawer }] = useDocumentDrawer({
-        id: currentlyOpenRelationship.id,
-        collectionSlug: currentlyOpenRelationship.collectionSlug
-    });
-    // Filter selected values from displaying in the list drawer
-    const listDrawerFilterOptions = useMemo(()=>{
-        let newFilterOptions = filterOptions;
-        if (value) {
-            const valuesByRelation = (hasMany === false ? [
-                value
-            ] : value).reduce((acc, val)=>{
-                if (!acc[val.relationTo]) {
-                    acc[val.relationTo] = [];
-                }
-                acc[val.relationTo].push(val.value);
-                return acc;
-            }, {});
-            (Array.isArray(relationTo) ? relationTo : [
-                relationTo
-            ]).forEach((relation)=>{
-                newFilterOptions = {
-                    ...newFilterOptions || {},
-                    [relation]: {
-                        ...typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {},
-                        ...valuesByRelation[relation] ? {
-                            id: {
-                                not_in: valuesByRelation[relation]
-                            }
-                        } : {}
-                    }
-                };
-            });
-        }
-        return newFilterOptions;
-    }, [
-        filterOptions,
-        value,
-        hasMany,
-        relationTo
-    ]);
-    const [ListDrawer, , { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer }] = useListDrawer({
-        collectionSlugs: relationTo,
-        filterOptions: listDrawerFilterOptions
-    });
-    const onListSelect = useCallback(({ collectionSlug, doc })=>{
-        if (hasMany) {
-            onChange([
-                ...Array.isArray(value) ? value : [],
-                {
-                    relationTo: collectionSlug,
-                    value: doc.id
-                }
-            ]);
-        } else if (hasMany === false) {
-            onChange({
-                relationTo: collectionSlug,
-                value: doc.id
-            });
+export const RelationshipInput = props => {
+  const {
+    AfterInput,
+    allowCreate = true,
+    allowEdit = true,
+    appearance = 'select',
+    BeforeInput,
+    className,
+    description,
+    Description,
+    Error,
+    filterOptions,
+    formatDisplayedOptions,
+    hasMany,
+    initialValue,
+    isSortable = true,
+    label,
+    Label,
+    localized,
+    maxResultsPerRequest = 10,
+    onChange,
+    path,
+    placeholder,
+    readOnly,
+    relationTo,
+    required,
+    showError,
+    sortOptions,
+    style,
+    value
+  } = props;
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    routes: {
+      api
+    },
+    serverURL
+  } = config;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    code: locale
+  } = useLocale();
+  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
+    id: undefined,
+    collectionSlug: undefined,
+    hasReadPermission: false
+  });
+  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
+  const [lastLoadedPage, setLastLoadedPage] = useState({});
+  const [errorLoading, setErrorLoading] = useState('');
+  const [search, setSearch] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const hasLoadedFirstPageRef = useRef(false);
+  const {
+    queueTask
+  } = useQueue();
+  const [options, dispatchOptions] = useReducer(optionsReducer, []);
+  const valueRef = useRef(value);
+  const [DocumentDrawer,, {
+    drawerSlug,
+    isDrawerOpen,
+    openDrawer
+  }] = useDocumentDrawer({
+    id: currentlyOpenRelationship.id,
+    collectionSlug: currentlyOpenRelationship.collectionSlug
+  });
+  // Filter selected values from displaying in the list drawer
+  const listDrawerFilterOptions = useMemo(() => {
+    let newFilterOptions = filterOptions;
+    if (value) {
+      const valuesByRelation = (hasMany === false ? [value] : value).reduce((acc, val) => {
+        if (!acc[val.relationTo]) {
+          acc[val.relationTo] = [];
         }
-        closeListDrawer();
-    }, [
-        hasMany,
-        onChange,
-        closeListDrawer,
-        value
-    ]);
-    const openDrawerWhenRelationChanges = useRef(false);
-    const updateResults = useCallback(({ filterOptions, hasMany: hasManyArg, lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, onSuccess, search: searchArg, sort, value: valueArg })=>{
-        if (!permissions) {
-            return;
-        }
-        queueTask(async ()=>{
-            const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
-            const relations = Array.isArray(relationTo) ? relationTo : [
-                relationTo
-            ];
-            const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
-            let resultsFetched = 0;
-            const relationMap = createRelationMap(hasManyArg === true ? {
-                hasMany: true,
-                relationTo,
-                value: valueArg
-            } : {
-                hasMany: false,
-                relationTo,
-                value: valueArg
+        acc[val.relationTo].push(val.value);
+        return acc;
+      }, {});
+      (Array.isArray(relationTo) ? relationTo : [relationTo]).forEach(relation => {
+        newFilterOptions = {
+          ...(newFilterOptions || {}),
+          [relation]: {
+            ...(typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {}),
+            ...(valuesByRelation[relation] ? {
+              id: {
+                not_in: valuesByRelation[relation]
+              }
+            } : {})
+          }
+        };
+      });
+    }
+    return newFilterOptions;
+  }, [filterOptions, value, hasMany, relationTo]);
+  const [ListDrawer,, {
+    closeDrawer: closeListDrawer,
+    isDrawerOpen: isListDrawerOpen,
+    openDrawer: openListDrawer
+  }] = useListDrawer({
+    collectionSlugs: relationTo,
+    filterOptions: listDrawerFilterOptions
+  });
+  const onListSelect = useCallback(({
+    collectionSlug,
+    doc
+  }) => {
+    if (hasMany) {
+      onChange([...(Array.isArray(value) ? value : []), {
+        relationTo: collectionSlug,
+        value: doc.id
+      }]);
+    } else if (hasMany === false) {
+      onChange({
+        relationTo: collectionSlug,
+        value: doc.id
+      });
+    }
+    closeListDrawer();
+  }, [hasMany, onChange, closeListDrawer, value]);
+  const openDrawerWhenRelationChanges = useRef(false);
+  const updateResults = useCallback(({
+    filterOptions: filterOptions_0,
+    hasMany: hasManyArg,
+    lastFullyLoadedRelation: lastFullyLoadedRelationArg,
+    lastLoadedPage: lastLoadedPageArg,
+    onSuccess,
+    search: searchArg,
+    sort,
+    value: valueArg
+  }) => {
+    if (!permissions) {
+      return;
+    }
+    queueTask(async () => {
+      const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
+      const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+      const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
+      let resultsFetched = 0;
+      const relationMap = createRelationMap(hasManyArg === true ? {
+        hasMany: true,
+        relationTo,
+        value: valueArg
+      } : {
+        hasMany: false,
+        relationTo,
+        value: valueArg
+      });
+      if (!errorLoading) {
+        await relationsToFetch.reduce(async (priorRelation, relation_0) => {
+          const relationFilterOption = filterOptions_0?.[relation_0];
+          let lastLoadedPageToUse;
+          if (search !== searchArg) {
+            lastLoadedPageToUse = 1;
+          } else {
+            lastLoadedPageToUse = (lastLoadedPageArg[relation_0] || 0) + 1;
+          }
+          await priorRelation;
+          if (relationFilterOption === false) {
+            setLastFullyLoadedRelation(relations.indexOf(relation_0));
+            return Promise.resolve();
+          }
+          if (resultsFetched < 10) {
+            const collection = getEntityConfig({
+              collectionSlug: relation_0
             });
-            if (!errorLoading) {
-                await relationsToFetch.reduce(async (priorRelation, relation)=>{
-                    const relationFilterOption = filterOptions?.[relation];
-                    let lastLoadedPageToUse;
-                    if (search !== searchArg) {
-                        lastLoadedPageToUse = 1;
-                    } else {
-                        lastLoadedPageToUse = (lastLoadedPageArg[relation] || 0) + 1;
-                    }
-                    await priorRelation;
-                    if (relationFilterOption === false) {
-                        setLastFullyLoadedRelation(relations.indexOf(relation));
-                        return Promise.resolve();
-                    }
-                    if (resultsFetched < 10) {
-                        const collection = getEntityConfig({
-                            collectionSlug: relation
-                        });
-                        const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-                        let fieldToSort = collection?.defaultSort || 'id';
-                        if (typeof sortOptions === 'string') {
-                            fieldToSort = sortOptions;
-                        } else if (sortOptions?.[relation]) {
-                            fieldToSort = sortOptions[relation];
-                        }
-                        const query = {
-                            depth: 0,
-                            draft: true,
-                            limit: maxResultsPerRequest,
-                            locale,
-                            page: lastLoadedPageToUse,
-                            select: {
-                                [fieldToSearch]: true
-                            },
-                            sort: fieldToSort,
-                            where: {
-                                and: [
-                                    {
-                                        id: {
-                                            not_in: relationMap[relation]
-                                        }
-                                    }
-                                ]
-                            }
-                        };
-                        if (searchArg) {
-                            query.where.and.push({
-                                [fieldToSearch]: {
-                                    like: searchArg
-                                }
-                            });
-                        }
-                        if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
-                            query.where.and.push(relationFilterOption);
-                        }
-                        sanitizeFilterOptionsQuery(query.where);
-                        const response = await fetch(formatAdminURL({
-                            apiRoute: api,
-                            path: `/${relation}`
-                        }), {
-                            body: qs.stringify(query),
-                            credentials: 'include',
-                            headers: {
-                                'Accept-Language': i18n.language,
-                                'Content-Type': 'application/x-www-form-urlencoded',
-                                'X-Payload-HTTP-Method-Override': 'GET'
-                            },
-                            method: 'POST'
-                        });
-                        if (response.ok) {
-                            const data = await response.json();
-                            setLastLoadedPage((prevState)=>{
-                                return {
-                                    ...prevState,
-                                    [relation]: lastLoadedPageToUse
-                                };
-                            });
-                            if (!data.nextPage) {
-                                setLastFullyLoadedRelation(relations.indexOf(relation));
-                            }
-                            if (data.docs.length > 0) {
-                                resultsFetched += data.docs.length;
-                                dispatchOptions({
-                                    type: 'ADD',
-                                    collection,
-                                    config,
-                                    docs: data.docs,
-                                    i18n,
-                                    sort
-                                });
-                            }
-                        } else if (response.status === 403) {
-                            setLastFullyLoadedRelation(relations.indexOf(relation));
-                            dispatchOptions({
-                                type: 'ADD',
-                                collection,
-                                config,
-                                docs: [],
-                                i18n,
-                                ids: relationMap[relation],
-                                sort
-                            });
-                        } else {
-                            setErrorLoading(t('error:unspecific'));
-                        }
-                    }
-                }, Promise.resolve());
-                if (typeof onSuccess === 'function') {
-                    onSuccess();
+            const fieldToSearch = collection?.admin?.useAsTitle || 'id';
+            let fieldToSort = collection?.defaultSort || 'id';
+            if (typeof sortOptions === 'string') {
+              fieldToSort = sortOptions;
+            } else if (sortOptions?.[relation_0]) {
+              fieldToSort = sortOptions[relation_0];
+            }
+            const query = {
+              depth: 0,
+              draft: true,
+              limit: maxResultsPerRequest,
+              locale,
+              page: lastLoadedPageToUse,
+              select: {
+                [fieldToSearch]: true
+              },
+              sort: fieldToSort,
+              where: {
+                and: [{
+                  id: {
+                    not_in: relationMap[relation_0]
+                  }
+                }]
+              }
+            };
+            if (searchArg) {
+              query.where.and.push({
+                [fieldToSearch]: {
+                  like: searchArg
                 }
+              });
             }
-        });
-    }, [
-        permissions,
-        queueTask,
-        relationTo,
-        errorLoading,
-        search,
-        getEntityConfig,
-        sortOptions,
-        maxResultsPerRequest,
-        locale,
-        api,
-        i18n,
-        config,
-        t
-    ]);
-    const updateSearch = useDebouncedCallback(({ hasMany: hasManyArg, search: searchArg, value })=>{
-        updateResultsEffectEvent({
-            filterOptions,
-            lastLoadedPage: {},
-            onSuccess: ()=>{
-                setIsLoading(false);
-            },
-            search: searchArg,
-            sort: true,
-            ...hasManyArg === true ? {
-                hasMany: hasManyArg,
-                value
-            } : {
-                hasMany: hasManyArg,
-                value
+            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
+              query.where.and.push(relationFilterOption);
             }
-        });
-        setSearch(searchArg);
-    }, 300);
-    const handleInputChange = useCallback((options)=>{
-        if (search !== options.search) {
-            setIsLoading(true);
-            setLastLoadedPage({});
-            updateSearch(options);
-        }
-    }, [
-        search,
-        updateSearch
-    ]);
-    const handleValueChange = useEffectEvent(({ hasMany: hasManyArg, value })=>{
-        const relationMap = createRelationMap(hasManyArg === true ? {
-            hasMany: hasManyArg,
-            relationTo,
-            value
-        } : {
-            hasMany: hasManyArg,
-            relationTo,
-            value
-        });
-        void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids])=>{
-            await priorRelation;
-            const idsToLoad = ids.filter((id)=>{
-                return !options.find((optionGroup)=>optionGroup?.options?.find((option)=>option.value === id && option.relationTo === relation));
+            sanitizeFilterOptionsQuery(query.where);
+            const response = await fetch(formatAdminURL({
+              apiRoute: api,
+              path: `/${relation_0}`
+            }), {
+              body: qs.stringify(query),
+              credentials: 'include',
+              headers: {
+                'Accept-Language': i18n.language,
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-Payload-HTTP-Method-Override': 'GET'
+              },
+              method: 'POST'
             });
-            if (idsToLoad.length > 0) {
-                const collection = getEntityConfig({
-                    collectionSlug: relation
-                });
-                const fieldToSelect = collection?.admin?.useAsTitle || 'id';
-                const query = {
-                    depth: 0,
-                    draft: true,
-                    limit: idsToLoad.length,
-                    locale,
-                    select: {
-                        [fieldToSelect]: true
-                    },
-                    where: {
-                        id: {
-                            in: idsToLoad
-                        }
-                    }
+            if (response.ok) {
+              const data = await response.json();
+              setLastLoadedPage(prevState => {
+                return {
+                  ...prevState,
+                  [relation_0]: lastLoadedPageToUse
                 };
-                if (!errorLoading) {
-                    const response = await fetch(formatAdminURL({
-                        apiRoute: api,
-                        path: `/${relation}`
-                    }), {
-                        body: qs.stringify(query),
-                        credentials: 'include',
-                        headers: {
-                            'Accept-Language': i18n.language,
-                            'Content-Type': 'application/x-www-form-urlencoded',
-                            'X-Payload-HTTP-Method-Override': 'GET'
-                        },
-                        method: 'POST'
-                    });
-                    let docs = [];
-                    if (response.ok) {
-                        const data = await response.json();
-                        docs = data.docs;
-                    }
-                    dispatchOptions({
-                        type: 'ADD',
-                        collection,
-                        config,
-                        docs,
-                        i18n,
-                        ids: idsToLoad,
-                        sort: true
-                    });
-                }
-            }
-        }, Promise.resolve());
-    });
-    const { mostRecentUpdate } = useDocumentEvents();
-    const handleDocumentUpdateEvent = useEffectEvent((mostRecentUpdate)=>{
-        if (!value) {
-            return false;
-        }
-        const docID = mostRecentUpdate.doc.id;
-        let isMatchingUpdate = false;
-        if (mostRecentUpdate.operation === 'update') {
-            if (hasMany === true) {
-                const currentValue = Array.isArray(value) ? value : [
-                    value
-                ];
-                isMatchingUpdate = currentValue.some((option)=>{
-                    return option.value === docID && option.relationTo === mostRecentUpdate.entitySlug;
+              });
+              if (!data.nextPage) {
+                setLastFullyLoadedRelation(relations.indexOf(relation_0));
+              }
+              if (data.docs.length > 0) {
+                resultsFetched += data.docs.length;
+                dispatchOptions({
+                  type: 'ADD',
+                  collection,
+                  config,
+                  docs: data.docs,
+                  i18n,
+                  sort
                 });
-            } else if (hasMany === false) {
-                isMatchingUpdate = value?.value === docID && value?.relationTo === mostRecentUpdate.entitySlug;
+              }
+            } else if (response.status === 403) {
+              setLastFullyLoadedRelation(relations.indexOf(relation_0));
+              dispatchOptions({
+                type: 'ADD',
+                collection,
+                config,
+                docs: [],
+                i18n,
+                ids: relationMap[relation_0],
+                sort
+              });
+            } else {
+              setErrorLoading(t('error:unspecific'));
             }
-        } else if (mostRecentUpdate.operation === 'create') {
-            // "Create New" drawer operations on the same level as this drawer should
-            // set the value to the newly created document.
-            // See test "should create document within document drawer > has one"
-            isMatchingUpdate = mostRecentUpdate.drawerSlug === drawerSlug;
-        }
-        if (!isMatchingUpdate) {
-            return;
-        }
-        const collectionConfig = getEntityConfig({
-            collectionSlug: mostRecentUpdate.entitySlug
-        });
-        dispatchOptions({
-            type: 'UPDATE',
-            collection: collectionConfig,
-            config,
-            doc: mostRecentUpdate.doc,
-            i18n
-        });
-        if (hasMany) {
-            const currentValue = value ? Array.isArray(value) ? value : [
-                value
-            ] : [];
-            const valuesToSet = currentValue.map((option)=>{
-                return {
-                    relationTo: option.value === docID ? mostRecentUpdate.entitySlug : option.relationTo,
-                    value: option.value
-                };
-            });
-            onChange(valuesToSet);
-        } else if (hasMany === false) {
-            onChange({
-                relationTo: mostRecentUpdate.entitySlug,
-                value: docID
-            });
+          }
+        }, Promise.resolve());
+        if (typeof onSuccess === 'function') {
+          onSuccess();
         }
+      }
     });
-    /**
-   * Listen to document update events. If you edit a related document from a drawer and save it, this event
-   * will be triggered. We then need up update the label of this relationship input, as the useAsLabel field could have changed.
-   *
-   * We listen to this event instead of using the onSave callback on the document drawer, as the onSave callback is not triggered
-   * when you save a document from a drawer opened by a *different* relationship (or any other) field.
-   */ useEffect(()=>{
-        if (mostRecentUpdate) {
-            handleDocumentUpdateEvent(mostRecentUpdate);
-        }
-    }, [
-        mostRecentUpdate
-    ]);
-    const onDuplicate = useCallback((args)=>{
-        dispatchOptions({
+  }, [permissions, queueTask, relationTo, errorLoading, search, getEntityConfig, sortOptions, maxResultsPerRequest, locale, api, i18n, config, t]);
+  const updateSearch = useDebouncedCallback(({
+    hasMany: hasManyArg_0,
+    search: searchArg_0,
+    value: value_0
+  }) => {
+    updateResultsEffectEvent({
+      filterOptions,
+      lastLoadedPage: {},
+      onSuccess: () => {
+        setIsLoading(false);
+      },
+      search: searchArg_0,
+      sort: true,
+      ...(hasManyArg_0 === true ? {
+        hasMany: hasManyArg_0,
+        value: value_0
+      } : {
+        hasMany: hasManyArg_0,
+        value: value_0
+      })
+    });
+    setSearch(searchArg_0);
+  }, 300);
+  const handleInputChange = useCallback(options_0 => {
+    if (search !== options_0.search) {
+      setIsLoading(true);
+      setLastLoadedPage({});
+      updateSearch(options_0);
+    }
+  }, [search, updateSearch]);
+  const handleValueChange = useEffectEvent(({
+    hasMany: hasManyArg_1,
+    value: value_1
+  }) => {
+    const relationMap_0 = createRelationMap(hasManyArg_1 === true ? {
+      hasMany: hasManyArg_1,
+      relationTo,
+      value: value_1
+    } : {
+      hasMany: hasManyArg_1,
+      relationTo,
+      value: value_1
+    });
+    void Object.entries(relationMap_0).reduce(async (priorRelation_0, [relation_1, ids]) => {
+      await priorRelation_0;
+      const idsToLoad = ids.filter(id => {
+        return !options.find(optionGroup => optionGroup?.options?.find(option => option.value === id && option.relationTo === relation_1));
+      });
+      if (idsToLoad.length > 0) {
+        const collection_0 = getEntityConfig({
+          collectionSlug: relation_1
+        });
+        const fieldToSelect = collection_0?.admin?.useAsTitle || 'id';
+        const query_0 = {
+          depth: 0,
+          draft: true,
+          limit: idsToLoad.length,
+          locale,
+          select: {
+            [fieldToSelect]: true
+          },
+          where: {
+            id: {
+              in: idsToLoad
+            }
+          }
+        };
+        if (!errorLoading) {
+          const response_0 = await fetch(formatAdminURL({
+            apiRoute: api,
+            path: `/${relation_1}`
+          }), {
+            body: qs.stringify(query_0),
+            credentials: 'include',
+            headers: {
+              'Accept-Language': i18n.language,
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-Payload-HTTP-Method-Override': 'GET'
+            },
+            method: 'POST'
+          });
+          let docs = [];
+          if (response_0.ok) {
+            const data_0 = await response_0.json();
+            docs = data_0.docs;
+          }
+          dispatchOptions({
             type: 'ADD',
-            collection: args.collectionConfig,
+            collection: collection_0,
             config,
-            docs: [
-                args.doc
-            ],
+            docs,
             i18n,
+            ids: idsToLoad,
             sort: true
-        });
-        if (hasMany) {
-            onChange(value ? value.concat({
-                relationTo: args.collectionConfig.slug,
-                value: args.doc.id
-            }) : null);
-        } else if (hasMany === false) {
-            onChange({
-                relationTo: args.collectionConfig.slug,
-                value: args.doc.id
-            });
+          });
         }
-    }, [
-        i18n,
-        config,
+      }
+    }, Promise.resolve());
+  });
+  const {
+    mostRecentUpdate
+  } = useDocumentEvents();
+  const handleDocumentUpdateEvent = useEffectEvent(mostRecentUpdate_0 => {
+    if (!value) {
+      return false;
+    }
+    const docID = mostRecentUpdate_0.doc.id;
+    let isMatchingUpdate = false;
+    if (mostRecentUpdate_0.operation === 'update') {
+      if (hasMany === true) {
+        const currentValue = Array.isArray(value) ? value : [value];
+        isMatchingUpdate = currentValue.some(option_0 => {
+          return option_0.value === docID && option_0.relationTo === mostRecentUpdate_0.entitySlug;
+        });
+      } else if (hasMany === false) {
+        isMatchingUpdate = value?.value === docID && value?.relationTo === mostRecentUpdate_0.entitySlug;
+      }
+    } else if (mostRecentUpdate_0.operation === 'create') {
+      // "Create New" drawer operations on the same level as this drawer should
+      // set the value to the newly created document.
+      // See test "should create document within document drawer > has one"
+      isMatchingUpdate = mostRecentUpdate_0.drawerSlug === drawerSlug;
+    }
+    if (!isMatchingUpdate) {
+      return;
+    }
+    const collectionConfig = getEntityConfig({
+      collectionSlug: mostRecentUpdate_0.entitySlug
+    });
+    dispatchOptions({
+      type: 'UPDATE',
+      collection: collectionConfig,
+      config,
+      doc: mostRecentUpdate_0.doc,
+      i18n
+    });
+    if (hasMany) {
+      const currentValue_0 = value ? Array.isArray(value) ? value : [value] : [];
+      const valuesToSet = currentValue_0.map(option_1 => {
+        return {
+          relationTo: option_1.value === docID ? mostRecentUpdate_0.entitySlug : option_1.relationTo,
+          value: option_1.value
+        };
+      });
+      onChange(valuesToSet);
+    } else if (hasMany === false) {
+      onChange({
+        relationTo: mostRecentUpdate_0.entitySlug,
+        value: docID
+      });
+    }
+  });
+  /**
+  * Listen to document update events. If you edit a related document from a drawer and save it, this event
+  * will be triggered. We then need up update the label of this relationship input, as the useAsLabel field could have changed.
+  *
+  * We listen to this event instead of using the onSave callback on the document drawer, as the onSave callback is not triggered
+  * when you save a document from a drawer opened by a *different* relationship (or any other) field.
+  */
+  useEffect(() => {
+    if (mostRecentUpdate) {
+      handleDocumentUpdateEvent(mostRecentUpdate);
+    }
+  }, [mostRecentUpdate]);
+  const onDuplicate = useCallback(args => {
+    dispatchOptions({
+      type: 'ADD',
+      collection: args.collectionConfig,
+      config,
+      docs: [args.doc],
+      i18n,
+      sort: true
+    });
+    if (hasMany) {
+      onChange(value ? value.concat({
+        relationTo: args.collectionConfig.slug,
+        value: args.doc.id
+      }) : null);
+    } else if (hasMany === false) {
+      onChange({
+        relationTo: args.collectionConfig.slug,
+        value: args.doc.id
+      });
+    }
+  }, [i18n, config, hasMany, onChange, value]);
+  const onDelete = useCallback(args_0 => {
+    dispatchOptions({
+      id: args_0.id,
+      type: 'REMOVE',
+      collection: args_0.collectionConfig,
+      config,
+      i18n
+    });
+    if (hasMany) {
+      onChange(value ? value.filter(option_2 => {
+        return option_2.value !== args_0.id;
+      }) : null);
+    } else {
+      onChange(null);
+    }
+    return;
+  }, [i18n, config, hasMany, onChange, value]);
+  const filterOption = useCallback((item, searchFilter) => {
+    if (!searchFilter) {
+      return true;
+    }
+    const r = wordBoundariesRegex(searchFilter || '');
+    // breaking the labels to search into smaller parts increases performance
+    const breakApartThreshold = 250;
+    let labelString = String(item.label);
+    // strings less than breakApartThreshold length won't be chunked
+    while (labelString.length > breakApartThreshold) {
+      // slicing by the next space after the length of the search input prevents slicing the string up by partial words
+      const indexOfSpace = labelString.indexOf(' ', searchFilter.length);
+      if (r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
+        return true;
+      }
+      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
+    }
+    return r.test(labelString.slice(-breakApartThreshold));
+  }, []);
+  const onDocumentOpen = useCallback(({
+    id: id_0,
+    collectionSlug: collectionSlug_0,
+    hasReadPermission,
+    openInNewTab
+  }) => {
+    if (openInNewTab) {
+      if (hasReadPermission && id_0 && collectionSlug_0) {
+        const docUrl = formatAdminURL({
+          adminRoute: config.routes.admin,
+          path: `/collections/${collectionSlug_0}/${id_0}`,
+          serverURL
+        });
+        window.open(docUrl, '_blank');
+      }
+    } else {
+      openDrawerWhenRelationChanges.current = true;
+      setCurrentlyOpenRelationship({
+        id: id_0,
+        collectionSlug: collectionSlug_0,
+        hasReadPermission
+      });
+    }
+  }, [config.routes.admin, serverURL]);
+  const updateResultsEffectEvent = useEffectEvent(args_1 => {
+    return updateResults(args_1);
+  });
+  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
+  // Note - effect should not run on first run
+  useEffect(() => {
+    // If the menu is open while filterOptions changes
+    // due to latency of form state and fast clicking into this field,
+    // re-fetch options
+    if (hasLoadedFirstPageRef.current && menuIsOpen) {
+      setIsLoading(true);
+      void updateResultsEffectEvent({
+        filterOptions,
+        lastLoadedPage: {},
+        onSuccess: () => {
+          hasLoadedFirstPageRef.current = true;
+          setIsLoading(false);
+        },
+        ...(hasMany === true ? {
+          hasMany,
+          value: valueRef.current
+        } : {
+          hasMany,
+          value: valueRef.current
+        })
+      });
+    }
+    // If the menu is not open, still reset the field state
+    // because we need to get new options next time the menu opens
+    dispatchOptions({
+      type: 'CLEAR',
+      exemptValues: valueRef.current
+    });
+    setLastFullyLoadedRelation(-1);
+    setLastLoadedPage({});
+  }, [relationTo, filterOptions, locale, path, menuIsOpen, hasMany]);
+  const prevValue = useRef(value);
+  const isFirstRenderRef = useRef(true);
+  // ///////////////////////////////////
+  // Ensure we have an option for each value
+  // ///////////////////////////////////
+  useEffect(() => {
+    if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
+      handleValueChange(hasMany === true ? {
         hasMany,
-        onChange,
         value
-    ]);
-    const onDelete = useCallback((args)=>{
-        dispatchOptions({
-            id: args.id,
-            type: 'REMOVE',
-            collection: args.collectionConfig,
-            config,
-            i18n
-        });
-        if (hasMany) {
-            onChange(value ? value.filter((option)=>{
-                return option.value !== args.id;
-            }) : null);
-        } else {
-            onChange(null);
-        }
-        return;
-    }, [
-        i18n,
-        config,
+      } : {
         hasMany,
-        onChange,
         value
-    ]);
-    const filterOption = useCallback((item, searchFilter)=>{
-        if (!searchFilter) {
-            return true;
-        }
-        const r = wordBoundariesRegex(searchFilter || '');
-        // breaking the labels to search into smaller parts increases performance
-        const breakApartThreshold = 250;
-        let labelString = String(item.label);
-        // strings less than breakApartThreshold length won't be chunked
-        while(labelString.length > breakApartThreshold){
-            // slicing by the next space after the length of the search input prevents slicing the string up by partial words
-            const indexOfSpace = labelString.indexOf(' ', searchFilter.length);
-            if (r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
-                return true;
+      });
+    }
+    isFirstRenderRef.current = false;
+    prevValue.current = value;
+  }, [value, hasMany]);
+  // Determine if we should switch to word boundary search
+  useEffect(() => {
+    const relations_0 = Array.isArray(relationTo) ? relationTo : [relationTo];
+    const isIdOnly = relations_0.reduce((idOnly, relation_2) => {
+      const collection_1 = getEntityConfig({
+        collectionSlug: relation_2
+      });
+      const fieldToSearch_0 = collection_1?.admin?.useAsTitle || 'id';
+      return fieldToSearch_0 === 'id' && idOnly;
+    }, true);
+    setEnableWordBoundarySearch(!isIdOnly);
+  }, [relationTo, getEntityConfig]);
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawer();
+      openDrawerWhenRelationChanges.current = false;
+    }
+  }, [openDrawer, currentlyOpenRelationship]);
+  useEffect(() => {
+    // needed to sync the ref value when other fields influence the value
+    // i.e. when a drawer is opened and the value is set
+    valueRef.current = value;
+  }, [value]);
+  const valueToRender = findOptionsByValue({
+    allowEdit,
+    options,
+    value
+  });
+  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
+    valueToRender.value = null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', errorLoading && 'error-loading', readOnly && `${baseClass}--read-only`, !readOnly && allowCreate && `${baseClass}--allow-create`].filter(Boolean).join(' '),
+    id: `field-${path.replace(/\./g, '__')}`,
+    style: style,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, errorLoading ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__error-loading`,
+        children: errorLoading
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__wrap`,
+        children: [/*#__PURE__*/_jsx(ReactSelect, {
+          backspaceRemovesValue: !(isDrawerOpen || isListDrawerOpen),
+          components: {
+            MultiValueLabel,
+            SingleValue,
+            ...(appearance !== 'select' && {
+              DropdownIndicator: null
+            })
+          },
+          customProps: {
+            disableKeyDown: isDrawerOpen || isListDrawerOpen,
+            disableMouseDown: isDrawerOpen || isListDrawerOpen,
+            onDocumentOpen
+          },
+          disabled: readOnly || isDrawerOpen || isListDrawerOpen,
+          filterOption: enableWordBoundarySearch ? filterOption : undefined,
+          getOptionValue: option_3 => {
+            if (!option_3) {
+              return undefined;
             }
-            labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
-        }
-        return r.test(labelString.slice(-breakApartThreshold));
-    }, []);
-    const onDocumentOpen = useCallback(({ id, collectionSlug, hasReadPermission, openInNewTab })=>{
-        if (openInNewTab) {
-            if (hasReadPermission && id && collectionSlug) {
-                const docUrl = formatAdminURL({
-                    adminRoute: config.routes.admin,
-                    path: `/collections/${collectionSlug}/${id}`,
-                    serverURL
-                });
-                window.open(docUrl, '_blank');
+            return hasMany && Array.isArray(relationTo) ? `${option_3.relationTo}_${option_3.value}` : option_3.value;
+          },
+          isLoading: appearance === 'select' && isLoading,
+          isMulti: hasMany,
+          isSearchable: appearance === 'select',
+          isSortable: isSortable,
+          menuIsOpen: appearance === 'select' ? menuIsOpen : false,
+          onChange: !readOnly ? selected => {
+            if (hasMany) {
+              if (selected === null) {
+                valueRef.current = [];
+                onChange([]);
+              } else {
+                valueRef.current = selected;
+                onChange(selected);
+              }
+            } else if (hasMany === false) {
+              if (selected === null) {
+                valueRef.current = null;
+                onChange(null);
+              } else {
+                valueRef.current = selected;
+                onChange(selected);
+              }
             }
-        } else {
-            openDrawerWhenRelationChanges.current = true;
-            setCurrentlyOpenRelationship({
-                id,
-                collectionSlug,
-                hasReadPermission
-            });
-        }
-    }, [
-        config.routes.admin,
-        serverURL
-    ]);
-    const updateResultsEffectEvent = useEffectEvent((args)=>{
-        return updateResults(args);
-    });
-    // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
-    // Note - effect should not run on first run
-    useEffect(()=>{
-        // If the menu is open while filterOptions changes
-        // due to latency of form state and fast clicking into this field,
-        // re-fetch options
-        if (hasLoadedFirstPageRef.current && menuIsOpen) {
-            setIsLoading(true);
-            void updateResultsEffectEvent({
-                filterOptions,
-                lastLoadedPage: {},
-                onSuccess: ()=>{
+          } : undefined,
+          onInputChange: newSearch => handleInputChange({
+            search: newSearch,
+            ...(hasMany === true ? {
+              hasMany,
+              value
+            } : {
+              hasMany,
+              value
+            })
+          }),
+          onMenuClose: () => {
+            setMenuIsOpen(false);
+          },
+          onMenuOpen: () => {
+            if (appearance === 'drawer') {
+              openListDrawer();
+            } else if (appearance === 'select') {
+              setMenuIsOpen(true);
+              if (!hasLoadedFirstPageRef.current) {
+                setIsLoading(true);
+                updateResultsEffectEvent({
+                  filterOptions,
+                  lastLoadedPage: {},
+                  onSuccess: () => {
                     hasLoadedFirstPageRef.current = true;
                     setIsLoading(false);
-                },
-                ...hasMany === true ? {
+                  },
+                  ...(hasMany === true ? {
                     hasMany,
-                    value: valueRef.current
-                } : {
+                    value
+                  } : {
                     hasMany,
-                    value: valueRef.current
-                }
-            });
-        }
-        // If the menu is not open, still reset the field state
-        // because we need to get new options next time the menu opens
-        dispatchOptions({
-            type: 'CLEAR',
-            exemptValues: valueRef.current
-        });
-        setLastFullyLoadedRelation(-1);
-        setLastLoadedPage({});
-    }, [
-        relationTo,
-        filterOptions,
-        locale,
-        path,
-        menuIsOpen,
-        hasMany
-    ]);
-    const prevValue = useRef(value);
-    const isFirstRenderRef = useRef(true);
-    // ///////////////////////////////////
-    // Ensure we have an option for each value
-    // ///////////////////////////////////
-    useEffect(()=>{
-        if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
-            handleValueChange(hasMany === true ? {
+                    value
+                  })
+                });
+              }
+            }
+          },
+          onMenuScrollToBottom: () => {
+            setIsLoading(true);
+            updateResultsEffectEvent({
+              filterOptions,
+              lastFullyLoadedRelation,
+              lastLoadedPage,
+              onSuccess: () => {
+                setIsLoading(false);
+              },
+              search,
+              sort: false,
+              ...(hasMany === true ? {
                 hasMany,
-                value
-            } : {
+                value: initialValue
+              } : {
                 hasMany,
-                value
-            });
-        }
-        isFirstRenderRef.current = false;
-        prevValue.current = value;
-    }, [
-        value,
-        hasMany
-    ]);
-    // Determine if we should switch to word boundary search
-    useEffect(()=>{
-        const relations = Array.isArray(relationTo) ? relationTo : [
-            relationTo
-        ];
-        const isIdOnly = relations.reduce((idOnly, relation)=>{
-            const collection = getEntityConfig({
-                collectionSlug: relation
+                value: initialValue
+              })
             });
-            const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-            return fieldToSearch === 'id' && idOnly;
-        }, true);
-        setEnableWordBoundarySearch(!isIdOnly);
-    }, [
-        relationTo,
-        getEntityConfig
-    ]);
-    useEffect(()=>{
-        if (openDrawerWhenRelationChanges.current) {
-            openDrawer();
-            openDrawerWhenRelationChanges.current = false;
-        }
-    }, [
-        openDrawer,
-        currentlyOpenRelationship
-    ]);
-    useEffect(()=>{
-        // needed to sync the ref value when other fields influence the value
-        // i.e. when a drawer is opened and the value is set
-        valueRef.current = value;
-    }, [
-        value
-    ]);
-    const valueToRender = findOptionsByValue({
-        allowEdit,
-        options,
-        value
-    });
-    if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
-        valueToRender.value = null;
-    }
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            showError && 'error',
-            errorLoading && 'error-loading',
-            readOnly && `${baseClass}--read-only`,
-            !readOnly && allowCreate && `${baseClass}--allow-create`
-        ].filter(Boolean).join(' '),
-        id: `field-${path.replace(/\./g, '__')}`,
-        style: style,
-        children: [
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Label,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                    label: label,
-                    localized: localized,
-                    path: path,
-                    required: required
-                }, void 0, false, {
-                    fileName: "src/fields/Relationship/Input.tsx",
-                    lineNumber: 767,
-                    columnNumber: 11
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Relationship/Input.tsx",
-                lineNumber: 764,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${fieldBaseClass}__wrap`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Error,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
-                            path: path,
-                            showError: showError
-                        }, void 0, false, {
-                            fileName: "src/fields/Relationship/Input.tsx",
-                            lineNumber: 773,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/Relationship/Input.tsx",
-                        lineNumber: 771,
-                        columnNumber: 9
-                    }, this),
-                    BeforeInput,
-                    errorLoading ? /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__error-loading`,
-                        children: errorLoading
-                    }, void 0, false, {
-                        fileName: "src/fields/Relationship/Input.tsx",
-                        lineNumber: 777,
-                        columnNumber: 11
-                    }, this) : /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__wrap`,
-                        children: [
-                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
-                                backspaceRemovesValue: !(isDrawerOpen || isListDrawerOpen),
-                                components: {
-                                    MultiValueLabel,
-                                    SingleValue,
-                                    ...appearance !== 'select' && {
-                                        DropdownIndicator: null
-                                    }
-                                },
-                                customProps: {
-                                    disableKeyDown: isDrawerOpen || isListDrawerOpen,
-                                    disableMouseDown: isDrawerOpen || isListDrawerOpen,
-                                    onDocumentOpen
-                                },
-                                disabled: readOnly || isDrawerOpen || isListDrawerOpen,
-                                filterOption: enableWordBoundarySearch ? filterOption : undefined,
-                                getOptionValue: (option)=>{
-                                    if (!option) {
-                                        return undefined;
-                                    }
-                                    return hasMany && Array.isArray(relationTo) ? `${option.relationTo}_${option.value}` : option.value;
-                                },
-                                isLoading: appearance === 'select' && isLoading,
-                                isMulti: hasMany,
-                                isSearchable: appearance === 'select',
-                                isSortable: isSortable,
-                                menuIsOpen: appearance === 'select' ? menuIsOpen : false,
-                                onChange: !readOnly ? (selected)=>{
-                                    if (hasMany) {
-                                        if (selected === null) {
-                                            valueRef.current = [];
-                                            onChange([]);
-                                        } else {
-                                            valueRef.current = selected;
-                                            onChange(selected);
-                                        }
-                                    } else if (hasMany === false) {
-                                        if (selected === null) {
-                                            valueRef.current = null;
-                                            onChange(null);
-                                        } else {
-                                            valueRef.current = selected;
-                                            onChange(selected);
-                                        }
-                                    }
-                                } : undefined,
-                                onInputChange: (newSearch)=>handleInputChange({
-                                        search: newSearch,
-                                        ...hasMany === true ? {
-                                            hasMany,
-                                            value
-                                        } : {
-                                            hasMany,
-                                            value
-                                        }
-                                    }),
-                                onMenuClose: ()=>{
-                                    setMenuIsOpen(false);
-                                },
-                                onMenuOpen: ()=>{
-                                    if (appearance === 'drawer') {
-                                        openListDrawer();
-                                    } else if (appearance === 'select') {
-                                        setMenuIsOpen(true);
-                                        if (!hasLoadedFirstPageRef.current) {
-                                            setIsLoading(true);
-                                            updateResultsEffectEvent({
-                                                filterOptions,
-                                                lastLoadedPage: {},
-                                                onSuccess: ()=>{
-                                                    hasLoadedFirstPageRef.current = true;
-                                                    setIsLoading(false);
-                                                },
-                                                ...hasMany === true ? {
-                                                    hasMany,
-                                                    value
-                                                } : {
-                                                    hasMany,
-                                                    value
-                                                }
-                                            });
-                                        }
-                                    }
-                                },
-                                onMenuScrollToBottom: ()=>{
-                                    setIsLoading(true);
-                                    updateResultsEffectEvent({
-                                        filterOptions,
-                                        lastFullyLoadedRelation,
-                                        lastLoadedPage,
-                                        onSuccess: ()=>{
-                                            setIsLoading(false);
-                                        },
-                                        search,
-                                        sort: false,
-                                        ...hasMany === true ? {
-                                            hasMany,
-                                            value: initialValue
-                                        } : {
-                                            hasMany,
-                                            value: initialValue
-                                        }
-                                    });
-                                },
-                                options: typeof formatDisplayedOptions === 'function' ? formatDisplayedOptions(options) : options,
-                                placeholder: placeholder,
-                                showError: showError,
-                                value: valueToRender ?? null
-                            }, void 0, false, {
-                                fileName: "src/fields/Relationship/Input.tsx",
-                                lineNumber: 780,
-                                columnNumber: 13
-                            }, this),
-                            !readOnly && allowCreate && /*#__PURE__*/ _jsxDEV(AddNewRelation, {
-                                path: path,
-                                relationTo: relationTo,
-                                ...hasMany === true ? {
-                                    hasMany,
-                                    onChange,
-                                    value
-                                } : {
-                                    hasMany,
-                                    onChange,
-                                    value
-                                }
-                            }, void 0, false, {
-                                fileName: "src/fields/Relationship/Input.tsx",
-                                lineNumber: 906,
-                                columnNumber: 15
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/fields/Relationship/Input.tsx",
-                        lineNumber: 779,
-                        columnNumber: 11
-                    }, this),
-                    AfterInput,
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Description,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                            description: description,
-                            path: path
-                        }, void 0, false, {
-                            fileName: "src/fields/Relationship/Input.tsx",
-                            lineNumber: 927,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/Relationship/Input.tsx",
-                        lineNumber: 925,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Relationship/Input.tsx",
-                lineNumber: 770,
-                columnNumber: 7
-            }, this),
-            currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
-                onDelete: onDelete,
-                onDuplicate: onDuplicate
-            }, void 0, false, {
-                fileName: "src/fields/Relationship/Input.tsx",
-                lineNumber: 931,
-                columnNumber: 9
-            }, this),
-            appearance === 'drawer' && !readOnly && /*#__PURE__*/ _jsxDEV(ListDrawer, {
-                allowCreate: allowCreate,
-                enableRowSelections: false,
-                onSelect: onListSelect
-            }, void 0, false, {
-                fileName: "src/fields/Relationship/Input.tsx",
-                lineNumber: 934,
-                columnNumber: 9
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/Relationship/Input.tsx",
-        lineNumber: 749,
-        columnNumber: 5
-    }, this);
+          },
+          options: typeof formatDisplayedOptions === 'function' ? formatDisplayedOptions(options) : options,
+          placeholder: placeholder,
+          showError: showError,
+          value: valueToRender ?? null
+        }), !readOnly && allowCreate && /*#__PURE__*/_jsx(AddNewRelation, {
+          path: path,
+          relationTo: relationTo,
+          ...(hasMany === true ? {
+            hasMany,
+            onChange,
+            value
+          } : {
+            hasMany,
+            onChange,
+            value
+          })
+        })]
+      }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
+      })]
+    }), currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && /*#__PURE__*/_jsx(DocumentDrawer, {
+      onDelete: onDelete,
+      onDuplicate: onDuplicate
+    }), appearance === 'drawer' && !readOnly && /*#__PURE__*/_jsx(ListDrawer, {
+      allowCreate: allowCreate,
+      enableRowSelections: false,
+      onSelect: onListSelect
+    })]
+  });
 };
-
 //# sourceMappingURL=Input.js.map