@payloadcms/ui 3.0.0-canary.9beaa28 → 3.0.0-canary.9f64534

package/dist/fields/Relationship/index.js

@@ -1,24 +1,25 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { wordBoundariesRegex } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { AddNewRelation } from '../../elements/AddNewRelation/index.js';
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
+import { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
-import { AddNewRelation } from './AddNew/index.js';
 import { createRelationMap } from './createRelationMap.js';
 import { findOptionsByValue } from './findOptionsByValue.js';
 import './index.scss';
@@ -28,57 +29,39 @@ import { SingleValue } from './select-components/SingleValue/index.js';
 const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
 const RelationshipFieldComponent = props => {
-  const $ = _c(76);
   const {
-    descriptionProps,
-    errorProps,
-    field,
-    field: t0,
-    labelProps,
-    readOnly: readOnlyFromTopLevelProps,
+    field: {
+      name,
+      admin: {
+        allowCreate = true,
+        allowEdit = true,
+        className,
+        description,
+        isSortable = true,
+        sortOptions,
+        style,
+        width
+      } = {},
+      hasMany,
+      label,
+      localized,
+      relationTo,
+      required
+    },
+    path,
+    readOnly,
     validate
   } = props;
-  const {
-    name,
-    _path: pathFromProps,
-    admin: t1,
-    hasMany,
-    label,
-    relationTo,
-    required
-  } = t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? {} : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const {
-    allowCreate: t3,
-    className,
-    description,
-    isSortable: t4,
-    readOnly: readOnlyFromAdmin,
-    sortOptions,
-    style,
-    width
-  } = t2;
-  const allowCreate = t3 === undefined ? true : t3;
-  const isSortable = t4 === undefined ? true : t4;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
   const {
     config
   } = useConfig();
   const {
     collections,
-    routes: t5,
+    routes: {
+      api
+    },
     serverURL
   } = config;
-  const {
-    api
-  } = t5;
   const {
     i18n,
     t
@@ -90,371 +73,267 @@ const RelationshipFieldComponent = props => {
     code: locale
   } = useLocale();
   const hasMultipleRelations = Array.isArray(relationTo);
-  let t6;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = [];
-    $[2] = t6;
-  } else {
-    t6 = $[2];
-  }
-  const [options, dispatchOptions] = useReducer(optionsReducer, t6);
+  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
+    id: undefined,
+    collectionSlug: undefined,
+    hasReadPermission: false
+  });
   const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
-  let t7;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = {};
-    $[3] = t7;
-  } else {
-    t7 = $[3];
-  }
-  const [lastLoadedPage, setLastLoadedPage] = useState(t7);
-  const [errorLoading, setErrorLoading] = useState("");
-  const [search, setSearch] = useState("");
+  const [lastLoadedPage, setLastLoadedPage] = useState({});
+  const [errorLoading, setErrorLoading] = useState('');
+  const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
-  const menuIsOpen = useRef(false);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const hasLoadedFirstPageRef = useRef(false);
-  let t8;
-  if ($[4] !== validate || $[5] !== required) {
-    t8 = (value, validationOptions) => {
-      if (typeof validate === "function") {
-        return validate(value, {
-          ...validationOptions,
-          required
-        });
-      }
-    };
-    $[4] = validate;
-    $[5] = required;
-    $[6] = t8;
-  } else {
-    t8 = $[6];
-  }
-  const memoizedValidate = t8;
-  const {
-    path: pathFromContext,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  const t9 = pathFromContext ?? pathFromProps ?? name;
-  let t10;
-  if ($[7] !== t9 || $[8] !== memoizedValidate) {
-    t10 = {
-      path: t9,
-      validate: memoizedValidate
-    };
-    $[7] = t9;
-    $[8] = memoizedValidate;
-    $[9] = t10;
-  } else {
-    t10 = $[9];
-  }
+  const memoizedValidate = useCallback((value, validationOptions) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...validationOptions,
+        required
+      });
+    }
+  }, [validate, required]);
   const {
+    customComponents: {
+      Description,
+      Error,
+      Label
+    } = {},
     filterOptions,
-    formInitializing,
-    formProcessing,
     initialValue,
-    path,
     setValue,
     showError,
     value: value_0
-  } = useField(t10);
-  const readOnly = readOnlyFromProps || readOnlyFromContext || formInitializing;
+  } = useField({
+    path,
+    validate: memoizedValidate
+  });
+  const [options, dispatchOptions] = useReducer(optionsReducer, []);
   const valueRef = useRef(value_0);
   valueRef.current = value_0;
-  const [drawerIsOpen, setDrawerIsOpen] = useState(false);
-  let t11;
-  if ($[10] !== permissions || $[11] !== relationTo || $[12] !== hasMany || $[13] !== errorLoading || $[14] !== filterOptions || $[15] !== search || $[16] !== collections || $[17] !== sortOptions || $[18] !== locale || $[19] !== serverURL || $[20] !== api || $[21] !== i18n || $[22] !== config || $[23] !== t) {
-    t11 = async t12 => {
-      const {
-        lastFullyLoadedRelation: lastFullyLoadedRelationArg,
-        lastLoadedPage: lastLoadedPageArg,
-        onSuccess,
-        search: searchArg,
-        sort,
-        value: valueArg
-      } = t12;
-      if (!permissions) {
-        return;
-      }
-      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;
-      resultsFetched = 0;
-      const relationMap = createRelationMap({
-        hasMany,
-        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] + 1;
-          }
-          await priorRelation;
-          if (relationFilterOption === false) {
-            setLastFullyLoadedRelation(relations.indexOf(relation));
-            return Promise.resolve();
-          }
-          if (resultsFetched < 10) {
-            const collection = collections.find(coll => coll.slug === 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,
-              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);
-            }
-            const response = await fetch(`${serverURL}${api}/${relation}`, {
-              body: qs.stringify(query),
-              credentials: "include",
-              headers: {
-                "Accept-Language": i18n.language,
-                "Content-Type": "application/x-www-form-urlencoded",
-                "X-HTTP-Method-Override": "GET"
-              },
-              method: "POST"
-            });
-            if (response.ok) {
-              const data = await response.json();
-              setLastLoadedPage(prevState => ({
-                ...prevState,
-                [relation]: lastLoadedPageToUse
-              }));
-              if (!data.nextPage) {
-                setLastFullyLoadedRelation(relations.indexOf(relation));
-              }
-              if (data.docs.length > 0) {
-                resultsFetched = resultsFetched + data.docs.length;
-                resultsFetched;
-                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 [DocumentDrawer,, {
+    isDrawerOpen,
+    openDrawer
+  }] = useDocumentDrawer({
+    id: currentlyOpenRelationship.id,
+    collectionSlug: currentlyOpenRelationship.collectionSlug
+  });
+  const openDrawerWhenRelationChanges = useRef(false);
+  const getResults = useCallback(async ({
+    filterOptions: filterOptions_0,
+    lastFullyLoadedRelation: lastFullyLoadedRelationArg,
+    lastLoadedPage: lastLoadedPageArg,
+    onSuccess,
+    search: searchArg,
+    sort,
+    value: valueArg
+  }) => {
+    if (!permissions) {
+      return;
+    }
+    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({
+      hasMany,
+      relationTo,
+      value: valueArg
+    });
+    if (!errorLoading) {
+      await relationsToFetch.reduce(async (priorRelation, relation) => {
+        const relationFilterOption = filterOptions_0?.[relation];
+        let lastLoadedPageToUse;
+        if (search !== searchArg) {
+          lastLoadedPageToUse = 1;
+        } else {
+          lastLoadedPageToUse = lastLoadedPageArg[relation] + 1;
         }
-      }
-    };
-    $[10] = permissions;
-    $[11] = relationTo;
-    $[12] = hasMany;
-    $[13] = errorLoading;
-    $[14] = filterOptions;
-    $[15] = search;
-    $[16] = collections;
-    $[17] = sortOptions;
-    $[18] = locale;
-    $[19] = serverURL;
-    $[20] = api;
-    $[21] = i18n;
-    $[22] = config;
-    $[23] = t;
-    $[24] = t11;
-  } else {
-    t11 = $[24];
-  }
-  const getResults = t11;
-  let t12;
-  if ($[25] !== getResults) {
-    t12 = (searchArg_0, valueArg_0) => {
-      getResults({
-        lastLoadedPage: {},
-        search: searchArg_0,
-        sort: true,
-        value: valueArg_0
-      });
-      setSearch(searchArg_0);
-    };
-    $[25] = getResults;
-    $[26] = t12;
-  } else {
-    t12 = $[26];
-  }
-  const updateSearch = useDebouncedCallback(t12, 300);
-  let t13;
-  if ($[27] !== search || $[28] !== updateSearch) {
-    t13 = (searchArg_1, valueArg_1) => {
-      if (search !== searchArg_1) {
-        setLastLoadedPage({});
-        updateSearch(searchArg_1, valueArg_1, searchArg_1 !== "");
-      }
-    };
-    $[27] = search;
-    $[28] = updateSearch;
-    $[29] = t13;
-  } else {
-    t13 = $[29];
-  }
-  const handleInputChange = t13;
-  let t14;
-  if ($[30] !== hasMany || $[31] !== relationTo || $[32] !== value_0 || $[33] !== options || $[34] !== locale || $[35] !== errorLoading || $[36] !== serverURL || $[37] !== api || $[38] !== i18n || $[39] !== collections || $[40] !== config) {
-    t14 = () => {
-      const relationMap_0 = createRelationMap({
-        hasMany,
-        relationTo,
-        value: value_0
-      });
-      Object.entries(relationMap_0).reduce(async (priorRelation_0, t15) => {
-        const [relation_0, ids] = t15;
-        await priorRelation_0;
-        const idsToLoad = ids.filter(id => !options.find(optionGroup => optionGroup?.options?.find(option => option.value === id && option.relationTo === relation_0)));
-        if (idsToLoad.length > 0) {
-          const query_0 = {
+        await priorRelation;
+        if (relationFilterOption === false) {
+          setLastFullyLoadedRelation(relations.indexOf(relation));
+          return Promise.resolve();
+        }
+        if (resultsFetched < 10) {
+          const collection = collections.find(coll => coll.slug === 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: idsToLoad.length,
+            limit: maxResultsPerRequest,
             locale,
+            page: lastLoadedPageToUse,
+            sort: fieldToSort,
             where: {
-              id: {
-                in: idsToLoad
-              }
+              and: [{
+                id: {
+                  not_in: relationMap[relation]
+                }
+              }]
             }
           };
-          if (!errorLoading) {
-            const response_0 = await fetch(`${serverURL}${api}/${relation_0}`, {
-              body: qs.stringify(query_0),
-              credentials: "include",
-              headers: {
-                "Accept-Language": i18n.language,
-                "Content-Type": "application/x-www-form-urlencoded",
-                "X-HTTP-Method-Override": "GET"
-              },
-              method: "POST"
+          if (searchArg) {
+            query.where.and.push({
+              [fieldToSearch]: {
+                like: searchArg
+              }
+            });
+          }
+          if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
+            query.where.and.push(relationFilterOption);
+          }
+          const response = await fetch(`${serverURL}${api}/${relation}`, {
+            body: qs.stringify(query),
+            credentials: 'include',
+            headers: {
+              'Accept-Language': i18n.language,
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-HTTP-Method-Override': 'GET'
+            },
+            method: 'POST'
+          });
+          if (response.ok) {
+            const data = await response.json();
+            setLastLoadedPage(prevState => {
+              return {
+                ...prevState,
+                [relation]: lastLoadedPageToUse
+              };
             });
-            const collection_0 = collections.find(coll_0 => coll_0.slug === relation_0);
-            let docs = [];
-            if (response_0.ok) {
-              const data_0 = await response_0.json();
-              docs = data_0.docs;
+            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: collection_0,
+              type: 'ADD',
+              collection,
               config,
-              docs,
+              docs: [],
               i18n,
-              ids: idsToLoad,
-              sort: true
+              ids: relationMap[relation],
+              sort
             });
+          } else {
+            setErrorLoading(t('error:unspecific'));
           }
         }
       }, Promise.resolve());
-    };
-    $[30] = hasMany;
-    $[31] = relationTo;
-    $[32] = value_0;
-    $[33] = options;
-    $[34] = locale;
-    $[35] = errorLoading;
-    $[36] = serverURL;
-    $[37] = api;
-    $[38] = i18n;
-    $[39] = collections;
-    $[40] = config;
-    $[41] = t14;
-  } else {
-    t14 = $[41];
-  }
-  let t15;
-  if ($[42] !== options || $[43] !== value_0 || $[44] !== hasMany || $[45] !== errorLoading || $[46] !== collections || $[47] !== hasMultipleRelations || $[48] !== serverURL || $[49] !== api || $[50] !== i18n || $[51] !== relationTo || $[52] !== locale || $[53] !== config) {
-    t15 = [options, value_0, hasMany, errorLoading, collections, hasMultipleRelations, serverURL, api, i18n, relationTo, locale, config];
-    $[42] = options;
-    $[43] = value_0;
-    $[44] = hasMany;
-    $[45] = errorLoading;
-    $[46] = collections;
-    $[47] = hasMultipleRelations;
-    $[48] = serverURL;
-    $[49] = api;
-    $[50] = i18n;
-    $[51] = relationTo;
-    $[52] = locale;
-    $[53] = config;
-    $[54] = t15;
-  } else {
-    t15 = $[54];
-  }
-  useEffect(t14, t15);
-  let t16;
-  let t17;
-  if ($[55] !== relationTo || $[56] !== collections) {
-    t16 = () => {
-      const relations_0 = Array.isArray(relationTo) ? relationTo : [relationTo];
-      const isIdOnly = relations_0.reduce((idOnly, relation_1) => {
-        const collection_1 = collections.find(coll_1 => coll_1.slug === relation_1);
-        const fieldToSearch_0 = collection_1?.admin?.useAsTitle || "id";
-        return fieldToSearch_0 === "id" && idOnly;
-      }, true);
-      setEnableWordBoundarySearch(!isIdOnly);
-    };
-    t17 = [relationTo, collections];
-    $[55] = relationTo;
-    $[56] = collections;
-    $[57] = t16;
-    $[58] = t17;
-  } else {
-    t16 = $[57];
-    t17 = $[58];
-  }
-  useEffect(t16, t17);
+      if (typeof onSuccess === 'function') {
+        onSuccess();
+      }
+    }
+  }, [permissions, relationTo, hasMany, errorLoading, search, collections, locale, serverURL, sortOptions, api, i18n, config, t]);
+  const updateSearch = useDebouncedCallback((searchArg_0, valueArg_0) => {
+    void getResults({
+      filterOptions,
+      lastLoadedPage: {},
+      search: searchArg_0,
+      sort: true,
+      value: valueArg_0
+    });
+    setSearch(searchArg_0);
+  }, 300);
+  const handleInputChange = useCallback((searchArg_1, valueArg_1) => {
+    if (search !== searchArg_1) {
+      setLastLoadedPage({});
+      updateSearch(searchArg_1, valueArg_1, searchArg_1 !== '');
+    }
+  }, [search, updateSearch]);
+  // ///////////////////////////////////
+  // Ensure we have an option for each value
+  // ///////////////////////////////////
+  useIgnoredEffect(() => {
+    const relationMap_0 = createRelationMap({
+      hasMany,
+      relationTo,
+      value: value_0
+    });
+    void Object.entries(relationMap_0).reduce(async (priorRelation_0, [relation_0, ids]) => {
+      await priorRelation_0;
+      const idsToLoad = ids.filter(id => {
+        return !options.find(optionGroup => optionGroup?.options?.find(option => option.value === id && option.relationTo === relation_0));
+      });
+      if (idsToLoad.length > 0) {
+        const query_0 = {
+          depth: 0,
+          draft: true,
+          limit: idsToLoad.length,
+          locale,
+          where: {
+            id: {
+              in: idsToLoad
+            }
+          }
+        };
+        if (!errorLoading) {
+          const response_0 = await fetch(`${serverURL}${api}/${relation_0}`, {
+            body: qs.stringify(query_0),
+            credentials: 'include',
+            headers: {
+              'Accept-Language': i18n.language,
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-HTTP-Method-Override': 'GET'
+            },
+            method: 'POST'
+          });
+          const collection_0 = collections.find(coll_0 => coll_0.slug === relation_0);
+          let docs = [];
+          if (response_0.ok) {
+            const data_0 = await response_0.json();
+            docs = data_0.docs;
+          }
+          dispatchOptions({
+            type: 'ADD',
+            collection: collection_0,
+            config,
+            docs,
+            i18n,
+            ids: idsToLoad,
+            sort: true
+          });
+        }
+      }
+    }, Promise.resolve());
+  }, [value_0], [options, hasMany, errorLoading, collections, hasMultipleRelations, serverURL, api, i18n, relationTo, locale, config]);
+  // Determine if we should switch to word boundary search
   useEffect(() => {
-    if (hasLoadedFirstPageRef.current && menuIsOpen.current) {
+    const relations_0 = Array.isArray(relationTo) ? relationTo : [relationTo];
+    const isIdOnly = relations_0.reduce((idOnly, relation_1) => {
+      const collection_1 = collections.find(coll_1 => coll_1.slug === relation_1);
+      const fieldToSearch_0 = collection_1?.admin?.useAsTitle || 'id';
+      return fieldToSearch_0 === 'id' && idOnly;
+    }, true);
+    setEnableWordBoundarySearch(!isIdOnly);
+  }, [relationTo, collections]);
+  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
+  // Note - effect should not run on first run
+  useIgnoredEffect(() => {
+    // 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);
-      getResults({
+      void getResults({
+        filterOptions,
         lastLoadedPage: {},
         onSuccess: () => {
           hasLoadedFirstPageRef.current = true;
@@ -463,172 +342,203 @@ const RelationshipFieldComponent = props => {
         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"
+      type: 'CLEAR',
+      exemptValues: valueRef.current
     });
     setLastFullyLoadedRelation(-1);
     setLastLoadedPage({});
-    hasLoadedFirstPageRef.current = false;
-  }, [relationTo, filterOptions, locale, menuIsOpen, getResults, valueRef, hasLoadedFirstPageRef, path]);
-  let t18;
-  if ($[59] !== config || $[60] !== i18n) {
-    t18 = args => {
-      dispatchOptions({
-        type: "UPDATE",
-        collection: args.collectionConfig,
-        config,
-        doc: args.doc,
-        i18n
+  }, [relationTo, filterOptions, locale, path, menuIsOpen], [getResults]);
+  const onSave = useCallback(args => {
+    dispatchOptions({
+      type: 'UPDATE',
+      collection: args.collectionConfig,
+      config,
+      doc: args.doc,
+      i18n
+    });
+    const currentValue = valueRef.current;
+    const docId = args.doc.id;
+    if (hasMany) {
+      const unchanged = currentValue.some(option_0 => typeof option_0 === 'string' ? option_0 === docId : option_0.value === docId);
+      const valuesToSet = currentValue.map(option_1 => option_1.value === docId ? {
+        relationTo: args.collectionConfig.slug,
+        value: docId
+      } : option_1);
+      setValue(valuesToSet, unchanged);
+    } else {
+      const unchanged_0 = currentValue === docId;
+      setValue({
+        relationTo: args.collectionConfig.slug,
+        value: docId
+      }, unchanged_0);
+    }
+  }, [i18n, config, hasMany, setValue]);
+  const onDuplicate = useCallback(args_0 => {
+    dispatchOptions({
+      type: 'ADD',
+      collection: args_0.collectionConfig,
+      config,
+      docs: [args_0.doc],
+      i18n,
+      sort: true
+    });
+    if (hasMany) {
+      setValue(valueRef.current ? valueRef.current.concat({
+        relationTo: args_0.collectionConfig.slug,
+        value: args_0.doc.id
+      }) : null);
+    } else {
+      setValue({
+        relationTo: args_0.collectionConfig.slug,
+        value: args_0.doc.id
       });
-    };
-    $[59] = config;
-    $[60] = i18n;
-    $[61] = t18;
-  } else {
-    t18 = $[61];
-  }
-  const onSave = t18;
-  const filterOption = _temp;
+    }
+  }, [i18n, config, hasMany, setValue]);
+  const onDelete = useCallback(args_1 => {
+    dispatchOptions({
+      id: args_1.id,
+      type: 'REMOVE',
+      collection: args_1.collectionConfig,
+      config,
+      i18n
+    });
+    if (hasMany) {
+      setValue(valueRef.current ? valueRef.current.filter(option_2 => {
+        return option_2.value !== args_1.id;
+      }) : null);
+    } else {
+      setValue(null);
+    }
+    return;
+  }, [i18n, config, hasMany, setValue]);
+  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 onDocumentDrawerOpen = useCallback(({
+    id: id_0,
+    collectionSlug,
+    hasReadPermission
+  }) => {
+    openDrawerWhenRelationChanges.current = true;
+    setCurrentlyOpenRelationship({
+      id: id_0,
+      collectionSlug,
+      hasReadPermission
+    });
+  }, []);
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawer();
+      openDrawerWhenRelationChanges.current = false;
+    }
+  }, [openDrawer, currentlyOpenRelationship]);
   const valueToRender = findOptionsByValue({
+    allowEdit,
     options,
     value: value_0
   });
-  if (!Array.isArray(valueToRender) && valueToRender?.value === "null") {
+  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
     valueToRender.value = null;
   }
-  const t19 = showError && "error";
-  const t20 = errorLoading && "error-loading";
-  const t21 = readOnly && `${baseClass}--read-only`;
-  const t22 = !readOnly && allowCreate && `${baseClass}--allow-create`;
-  let t23;
-  if ($[62] !== className || $[63] !== t19 || $[64] !== t20 || $[65] !== t21 || $[66] !== t22) {
-    t23 = [fieldBaseClass, baseClass, className, t19, t20, t21, t22].filter(Boolean);
-    $[62] = className;
-    $[63] = t19;
-    $[64] = t20;
-    $[65] = t21;
-    $[66] = t22;
-    $[67] = t23;
-  } else {
-    t23 = $[67];
-  }
-  let t24;
-  if ($[68] !== labelProps) {
-    t24 = labelProps || {};
-    $[68] = labelProps;
-    $[69] = t24;
-  } else {
-    t24 = $[69];
-  }
-  let t25;
-  if ($[70] !== errorProps) {
-    t25 = errorProps || {};
-    $[70] = errorProps;
-    $[71] = t25;
-  } else {
-    t25 = $[71];
-  }
-  let t26;
-  if ($[72] !== errorLoading) {
-    t26 = errorLoading && _jsx("div", {
-      className: `${baseClass}__error-loading`,
-      children: errorLoading
-    });
-    $[72] = errorLoading;
-    $[73] = t26;
-  } else {
-    t26 = $[73];
-  }
-  let t27;
-  if ($[74] !== descriptionProps) {
-    t27 = descriptionProps || {};
-    $[74] = descriptionProps;
-    $[75] = t27;
-  } else {
-    t27 = $[75];
-  }
-  return _jsxs("div", {
-    className: t23.join(" "),
-    id: `field-${path.replace(/\./g, "__")}`,
+  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,
       width
     },
-    children: [_jsx(FieldLabel, {
-      Label: field?.admin?.components?.Label,
-      field,
-      label,
-      required,
-      ...t24
-    }), _jsxs("div", {
+    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: [_jsx(FieldError, {
-        CustomError: field?.admin?.components?.Error,
-        field,
-        path,
-        ...t25
-      }), !errorLoading && _jsxs("div", {
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), !errorLoading && /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__wrap`,
-        children: [_jsx(ReactSelect, {
-          backspaceRemovesValue: !drawerIsOpen,
+        children: [/*#__PURE__*/_jsx(ReactSelect, {
+          backspaceRemovesValue: !isDrawerOpen,
           components: {
             MultiValueLabel,
             SingleValue
           },
           customProps: {
-            disableKeyDown: drawerIsOpen,
-            disableMouseDown: drawerIsOpen,
-            onSave,
-            setDrawerIsOpen
+            disableKeyDown: isDrawerOpen,
+            disableMouseDown: isDrawerOpen,
+            onDocumentDrawerOpen,
+            onSave
           },
-          disabled: readOnly || formProcessing || drawerIsOpen,
+          disabled: readOnly || isDrawerOpen,
           filterOption: enableWordBoundarySearch ? filterOption : undefined,
-          getOptionValue: option_0 => {
-            if (!option_0) {
-              return;
+          getOptionValue: option_3 => {
+            if (!option_3) {
+              return undefined;
             }
-            return hasMany && Array.isArray(relationTo) ? `${option_0.relationTo}_${option_0.value}` : option_0.value;
+            return hasMany && Array.isArray(relationTo) ? `${option_3.relationTo}_${option_3.value}` : option_3.value;
           },
-          isLoading,
+          isLoading: isLoading,
           isMulti: hasMany,
-          isSortable,
+          isSortable: isSortable,
           onChange: !readOnly ? selected => {
             if (selected === null) {
               setValue(hasMany ? [] : null);
-            } else {
-              if (hasMany && Array.isArray(selected)) {
-                setValue(selected ? selected.map(option_1 => {
-                  if (hasMultipleRelations) {
-                    return {
-                      relationTo: option_1.relationTo,
-                      value: option_1.value
-                    };
-                  }
-                  return option_1.value;
-                }) : null);
-              } else {
-                if (hasMultipleRelations && !Array.isArray(selected)) {
-                  setValue({
-                    relationTo: selected.relationTo,
-                    value: selected.value
-                  });
-                } else {
-                  if (!Array.isArray(selected)) {
-                    setValue(selected.value);
-                  }
+            } else if (hasMany && Array.isArray(selected)) {
+              setValue(selected ? selected.map(option_4 => {
+                if (hasMultipleRelations) {
+                  return {
+                    relationTo: option_4.relationTo,
+                    value: option_4.value
+                  };
                 }
-              }
+                return option_4.value;
+              }) : null);
+            } else if (hasMultipleRelations && !Array.isArray(selected)) {
+              setValue({
+                relationTo: selected.relationTo,
+                value: selected.value
+              });
+            } else if (!Array.isArray(selected)) {
+              setValue(selected.value);
             }
           } : undefined,
           onInputChange: newSearch => handleInputChange(newSearch, value_0),
           onMenuClose: () => {
-            menuIsOpen.current = false;
+            setMenuIsOpen(false);
           },
           onMenuOpen: () => {
-            menuIsOpen.current = true;
+            setMenuIsOpen(true);
             if (!hasLoadedFirstPageRef.current) {
               setIsLoading(true);
-              getResults({
+              void getResults({
+                filterOptions,
                 lastLoadedPage: {},
                 onSuccess: () => {
                   hasLoadedFirstPageRef.current = true;
@@ -639,7 +549,8 @@ const RelationshipFieldComponent = props => {
             }
           },
           onMenuScrollToBottom: () => {
-            getResults({
+            void getResults({
+              filterOptions,
               lastFullyLoadedRelation,
               lastLoadedPage,
               search,
@@ -647,41 +558,32 @@ const RelationshipFieldComponent = props => {
               value: initialValue
             });
           },
-          options,
-          showError,
+          options: options,
+          showError: showError,
           value: valueToRender ?? null
-        }), !readOnly && allowCreate && _jsx(AddNewRelation, {
-          dispatchOptions,
-          hasMany,
-          options,
-          path,
-          relationTo,
-          setValue,
+        }), !readOnly && allowCreate && /*#__PURE__*/_jsx(AddNewRelation, {
+          hasMany: hasMany,
+          path: path,
+          relationTo: relationTo,
+          setValue: setValue,
           value: value_0
         })]
-      }), t26, _jsx(FieldDescription, {
-        Description: field?.admin?.components?.Description,
-        description,
-        field,
-        ...t27
+      }), errorLoading && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__error-loading`,
+        children: errorLoading
+      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
       })]
+    }), currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && /*#__PURE__*/_jsx(DocumentDrawer, {
+      onDelete: onDelete,
+      onDuplicate: onDuplicate,
+      onSave: onSave
     })]
   });
 };
 export const RelationshipField = withCondition(RelationshipFieldComponent);
-function _temp(item, searchFilter) {
-  if (!searchFilter) {
-    return true;
-  }
-  const r = wordBoundariesRegex(searchFilter || "");
-  let string = item.label;
-  while (string.length > 250) {
-    const indexOfSpace = string.indexOf(" ", searchFilter.length);
-    if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
-      return true;
-    }
-    string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
-  }
-  return r.test(string.slice(-250));
-}
 //# sourceMappingURL=index.js.map