@payloadcms/ui 3.70.0-canary.9 → 3.71.0-internal-debug.80dab4c

package/dist/fields/Relationship/Input.js

@@ -1,6 +1,5 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { dequal } from 'dequal/lite';
 import { formatAdminURL, wordBoundariesRegex } from 'payload/shared';
 import * as qs from 'qs-esm';
@@ -30,765 +29,844 @@ 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] = [];
+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]
+                            }
+                        } : {}
+                    }
+                };
+            });
         }
-        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
+        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
             });
-            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
+        }
+        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
+            });
+            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();
                 }
-              });
             }
-            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
-              query.where.and.push(relationFilterOption);
+        });
+    }, [
+        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
             }
-            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'
+        });
+        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));
             });
-            if (response.ok) {
-              const data = await response.json();
-              setLastLoadedPage(prevState => {
-                return {
-                  ...prevState,
-                  [relation_0]: lastLoadedPageToUse
-                };
-              });
-              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
+            if (idsToLoad.length > 0) {
+                const collection = getEntityConfig({
+                    collectionSlug: relation
                 });
-              }
-            } 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'));
+                const fieldToSelect = collection?.admin?.useAsTitle || 'id';
+                const query = {
+                    depth: 0,
+                    draft: true,
+                    limit: idsToLoad.length,
+                    locale,
+                    select: {
+                        [fieldToSelect]: true
+                    },
+                    where: {
+                        id: {
+                            in: idsToLoad
+                        }
+                    }
+                };
+                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());
-        if (typeof onSuccess === 'function') {
-          onSuccess();
-        }
-      }
-    });
-  }, [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
+    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;
+                });
+            } else if (hasMany === false) {
+                isMatchingUpdate = value?.value === docID && value?.relationTo === mostRecentUpdate.entitySlug;
             }
-          }
-        };
-        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({
+        } 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
+            });
+        }
+    });
+    /**
+   * 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: collection_0,
+            collection: args.collectionConfig,
             config,
-            docs,
+            docs: [
+                args.doc
+            ],
             i18n,
-            ids: idsToLoad,
             sort: true
-          });
-        }
-      }
-    }, 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 ? {
+        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)=>{
+        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
-      });
-    }
-    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;
+    ]);
+    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;
             }
-            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);
-              }
+            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');
             }
-          } : 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: () => {
+        } 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: ()=>{
                     hasLoadedFirstPageRef.current = true;
                     setIsLoading(false);
-                  },
-                  ...(hasMany === true ? {
+                },
+                ...hasMany === true ? {
                     hasMany,
-                    value
-                  } : {
+                    value: valueRef.current
+                } : {
                     hasMany,
-                    value
-                  })
-                });
-              }
-            }
-          },
-          onMenuScrollToBottom: () => {
-            setIsLoading(true);
-            updateResultsEffectEvent({
-              filterOptions,
-              lastFullyLoadedRelation,
-              lastLoadedPage,
-              onSuccess: () => {
-                setIsLoading(false);
-              },
-              search,
-              sort: false,
-              ...(hasMany === true ? {
+                    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,
-                value: initialValue
-              } : {
+                value
+            } : {
                 hasMany,
-                value: initialValue
-              })
+                value
             });
-          },
-          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
-    })]
-  });
+        }
+        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
+            });
+            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);
 };
+
 //# sourceMappingURL=Input.js.map