@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.90

package/dist/fields/Relationship/index.js

@@ -1,13 +1,13 @@
 'use client';
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
-import { wordBoundariesRegex } from 'payload/utilities';
-import qs from 'qs';
+
+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 { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { useFormProcessing } from '../../forms/Form/context.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
@@ -15,465 +15,671 @@ 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';
 import { optionsReducer } from './optionsReducer.js';
 import { MultiValueLabel } from './select-components/MultiValueLabel/index.js';
 import { SingleValue } from './select-components/SingleValue/index.js';
 const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
-const RelationshipField = (props)=>{
-    const { name, CustomDescription, CustomError, CustomLabel, allowCreate = true, className, descriptionProps, errorProps, hasMany, isSortable = true, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, relationTo, required, sortOptions, style, validate, width } = props;
-    const config = useConfig();
-    const { collections, routes: { api }, serverURL } = config;
-    const { i18n, t } = useTranslation();
-    const { permissions } = useAuth();
-    const { code: locale } = useLocale();
-    const formProcessing = useFormProcessing();
-    const hasMultipleRelations = Array.isArray(relationTo);
-    const [options, dispatchOptions] = useReducer(optionsReducer, []);
-    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 = useRef(false);
-    const hasLoadedFirstPageRef = useRef(false);
-    const memoizedValidate = useCallback((value, validationOptions)=>{
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...validationOptions,
-                required
-            });
-        }
-    }, [
-        validate,
-        required
-    ]);
-    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
-    const readOnly = readOnlyFromProps || readOnlyFromContext;
-    const { filterOptions, initialValue, path, setValue, showError, value } = useField({
-        path: pathFromContext || pathFromProps || name,
-        validate: memoizedValidate
-    });
-    const valueRef = useRef(value);
-    valueRef.current = value;
-    const [drawerIsOpen, setDrawerIsOpen] = useState(false);
-    const getResults = useCallback(async ({ 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
+const RelationshipFieldComponent = props => {
+  const $ = _c(76);
+  const {
+    descriptionProps,
+    errorProps,
+    field,
+    field: t0,
+    labelProps,
+    readOnly: readOnlyFromTopLevelProps,
+    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,
+    serverURL
+  } = config;
+  const {
+    api
+  } = t5;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    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 [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 [isLoading, setIsLoading] = useState(false);
+  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
+  const menuIsOpen = useRef(false);
+  const hasLoadedFirstPageRef = useRef(false);
+  let t8;
+  if ($[4] !== validate || $[5] !== required) {
+    t8 = (value, validationOptions) => {
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...validationOptions,
+          required
         });
-        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);
-                    let fieldToSearch = collection?.defaultSort || collection?.admin?.useAsTitle || 'id';
-                    if (!searchArg) {
-                        if (typeof sortOptions === 'string') {
-                            fieldToSearch = sortOptions;
-                        } else if (sortOptions?.[relation]) {
-                            fieldToSearch = sortOptions[relation];
-                        }
-                    }
-                    const query = {
-                        depth: 0,
-                        draft: true,
-                        limit: maxResultsPerRequest,
-                        locale,
-                        page: lastLoadedPageToUse,
-                        sort: fieldToSearch,
-                        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}?${qs.stringify(query)}`, {
-                        credentials: 'include',
-                        headers: {
-                            'Accept-Language': i18n.language
-                        }
-                    });
-                    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,
-                                // TODO: fix this
-                                // @ts-expect-error-next-line
-                                config,
-                                docs: data.docs,
-                                i18n,
-                                sort
-                            });
-                        }
-                    } else if (response.status === 403) {
-                        setLastFullyLoadedRelation(relations.indexOf(relation));
-                        dispatchOptions({
-                            type: 'ADD',
-                            collection,
-                            // TODO: fix this
-                            // @ts-expect-error-next-line
-                            config,
-                            docs: [],
-                            i18n,
-                            ids: relationMap[relation],
-                            sort
-                        });
-                    } else {
-                        setErrorLoading(t('error:unspecific'));
-                    }
-                }
-            }, Promise.resolve());
-            if (typeof onSuccess === 'function') onSuccess();
-        }
-    }, [
-        permissions,
-        relationTo,
+      }
+    };
+    $[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 {
+    filterOptions,
+    formInitializing,
+    formProcessing,
+    initialValue,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField(t10);
+  const readOnly = readOnlyFromProps || readOnlyFromContext || formInitializing;
+  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,
-        errorLoading,
-        search,
-        collections,
-        locale,
-        filterOptions,
-        serverURL,
-        sortOptions,
-        api,
-        i18n,
-        config,
-        t
-    ]);
-    const updateSearch = useDebouncedCallback((searchArg, valueArg)=>{
-        void getResults({
-            lastLoadedPage: {},
-            search: searchArg,
-            sort: true,
-            value: valueArg
-        });
-        setSearch(searchArg);
-    }, 300);
-    const handleInputChange = useCallback((searchArg, valueArg)=>{
-        if (search !== searchArg) {
-            setLastLoadedPage({});
-            updateSearch(searchArg, valueArg, searchArg !== '');
-        }
-    }, [
-        search,
-        updateSearch
-    ]);
-    // ///////////////////////////////////
-    // Ensure we have an option for each value
-    // ///////////////////////////////////
-    useEffect(()=>{
-        const relationMap = createRelationMap({
-            hasMany,
-            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 (idsToLoad.length > 0) {
-                const query = {
-                    depth: 0,
-                    draft: true,
-                    limit: idsToLoad.length,
-                    locale,
-                    where: {
-                        id: {
-                            in: idsToLoad
-                        }
-                    }
-                };
-                if (!errorLoading) {
-                    const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
-                        credentials: 'include',
-                        headers: {
-                            'Accept-Language': i18n.language
-                        }
-                    });
-                    const collection = collections.find((coll)=>coll.slug === relation);
-                    let docs = [];
-                    if (response.ok) {
-                        const data = await response.json();
-                        docs = data.docs;
-                    }
-                    dispatchOptions({
-                        type: 'ADD',
-                        collection,
-                        // TODO: fix this
-                        // @ts-expect-error-next-line
-                        config,
-                        docs,
-                        i18n,
-                        ids: idsToLoad,
-                        sort: true
-                    });
+        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
                 }
+              });
             }
-        }, Promise.resolve());
-    }, [
-        options,
-        value,
-        hasMany,
-        errorLoading,
-        collections,
-        hasMultipleRelations,
-        serverURL,
-        api,
-        i18n,
-        relationTo,
-        locale,
-        config
-    ]);
-    // 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 = collections.find((coll)=>coll.slug === relation);
-            const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-            return fieldToSearch === 'id' && idOnly;
-        }, true);
-        setEnableWordBoundarySearch(!isIdOnly);
-    }, [
-        relationTo,
-        collections
-    ]);
-    // 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 getFormState and fast clicking into this field,
-        // re-fetch options
-        if (hasLoadedFirstPageRef.current && menuIsOpen.current) {
-            setIsLoading(true);
-            void getResults({
-                lastLoadedPage: {},
-                onSuccess: ()=>{
-                    hasLoadedFirstPageRef.current = true;
-                    setIsLoading(false);
-                },
-                value: valueRef.current
+            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();
         }
-        // If the menu is not open, still reset the field state
-        // because we need to get new options next time the menu
-        // opens by the user
-        dispatchOptions({
-            type: 'CLEAR'
-        });
-        setLastFullyLoadedRelation(-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({});
-        hasLoadedFirstPageRef.current = false;
-    }, [
+        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,
-        filterOptions,
-        locale,
-        menuIsOpen,
-        getResults,
-        valueRef,
-        hasLoadedFirstPageRef,
-        path
-    ]);
-    const onSave = useCallback((args)=>{
-        dispatchOptions({
-            type: 'UPDATE',
-            collection: args.collectionConfig,
-            // TODO: fix this
-            // @ts-expect-error-next-line
-            config,
-            doc: args.doc,
-            i18n
-        });
-    }, [
-        i18n,
-        config
-    ]);
-    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 string = item.label;
-        // strings less than breakApartThreshold length won't be chunked
-        while(string.length > breakApartThreshold){
-            // slicing by the next space after the length of the search input prevents slicing the string up by partial words
-            const indexOfSpace = string.indexOf(' ', searchFilter.length);
-            if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
-                return true;
+        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 = {
+            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;
             }
-            string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
+            dispatchOptions({
+              type: "ADD",
+              collection: collection_0,
+              config,
+              docs,
+              i18n,
+              ids: idsToLoad,
+              sort: true
+            });
+          }
         }
-        return r.test(string.slice(-breakApartThreshold));
-    }, []);
-    const valueToRender = findOptionsByValue({
-        options,
-        value
+      }, 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);
+  useEffect(() => {
+    if (hasLoadedFirstPageRef.current && menuIsOpen.current) {
+      setIsLoading(true);
+      getResults({
+        lastLoadedPage: {},
+        onSuccess: () => {
+          hasLoadedFirstPageRef.current = true;
+          setIsLoading(false);
+        },
+        value: valueRef.current
+      });
+    }
+    dispatchOptions({
+      type: "CLEAR"
     });
-    if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            showError && 'error',
-            errorLoading && 'error-loading',
-            readOnly && `${baseClass}--read-only`
-        ].filter(Boolean).join(' '),
-        id: `field-${path.replace(/\./g, '__')}`,
-        style: {
-            ...style,
-            width
-        }
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        CustomError: CustomError,
-        path: path,
-        ...errorProps || {}
-    }), /*#__PURE__*/ React.createElement(FieldLabel, {
-        CustomLabel: CustomLabel,
-        label: label,
-        required: required,
-        ...labelProps || {}
-    }), !errorLoading && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement(ReactSelect, {
-        backspaceRemovesValue: !drawerIsOpen,
-        components: {
+    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
+      });
+    };
+    $[59] = config;
+    $[60] = i18n;
+    $[61] = t18;
+  } else {
+    t18 = $[61];
+  }
+  const onSave = t18;
+  const filterOption = _temp;
+  const valueToRender = findOptionsByValue({
+    options,
+    value: value_0
+  });
+  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, "__")}`,
+    style: {
+      ...style,
+      width
+    },
+    children: [_jsx(FieldLabel, {
+      Label: field?.admin?.components?.Label,
+      field,
+      label,
+      required,
+      ...t24
+    }), _jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [_jsx(FieldError, {
+        CustomError: field?.admin?.components?.Error,
+        field,
+        path,
+        ...t25
+      }), !errorLoading && _jsxs("div", {
+        className: `${baseClass}__wrap`,
+        children: [_jsx(ReactSelect, {
+          backspaceRemovesValue: !drawerIsOpen,
+          components: {
             MultiValueLabel,
             SingleValue
-        },
-        customProps: {
+          },
+          customProps: {
             disableKeyDown: drawerIsOpen,
             disableMouseDown: drawerIsOpen,
             onSave,
             setDrawerIsOpen
-        },
-        disabled: readOnly || formProcessing,
-        filterOption: enableWordBoundarySearch ? filterOption : undefined,
-        isLoading: isLoading,
-        isMulti: hasMany,
-        isSortable: isSortable,
-        onChange: !readOnly ? (selected)=>{
+          },
+          disabled: readOnly || formProcessing || drawerIsOpen,
+          filterOption: enableWordBoundarySearch ? filterOption : undefined,
+          getOptionValue: option_0 => {
+            if (!option_0) {
+              return;
+            }
+            return hasMany && Array.isArray(relationTo) ? `${option_0.relationTo}_${option_0.value}` : option_0.value;
+          },
+          isLoading,
+          isMulti: hasMany,
+          isSortable,
+          onChange: !readOnly ? selected => {
             if (selected === null) {
-                setValue(hasMany ? [] : null);
-            } else if (hasMany) {
-                setValue(selected ? selected.map((option)=>{
-                    if (hasMultipleRelations) {
-                        return {
-                            relationTo: option.relationTo,
-                            value: option.value
-                        };
-                    }
-                    return option.value;
+              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) {
-                setValue({
+              } else {
+                if (hasMultipleRelations && !Array.isArray(selected)) {
+                  setValue({
                     relationTo: selected.relationTo,
                     value: selected.value
-                });
-            } else {
-                setValue(selected.value);
+                  });
+                } else {
+                  if (!Array.isArray(selected)) {
+                    setValue(selected.value);
+                  }
+                }
+              }
             }
-        } : undefined,
-        onInputChange: (newSearch)=>handleInputChange(newSearch, value),
-        onMenuClose: ()=>{
+          } : undefined,
+          onInputChange: newSearch => handleInputChange(newSearch, value_0),
+          onMenuClose: () => {
             menuIsOpen.current = false;
-        },
-        onMenuOpen: ()=>{
+          },
+          onMenuOpen: () => {
             menuIsOpen.current = true;
             if (!hasLoadedFirstPageRef.current) {
-                setIsLoading(true);
-                void getResults({
-                    lastLoadedPage: {},
-                    onSuccess: ()=>{
-                        hasLoadedFirstPageRef.current = true;
-                        setIsLoading(false);
-                    },
-                    value: initialValue
-                });
-            }
-        },
-        onMenuScrollToBottom: ()=>{
-            void getResults({
-                lastFullyLoadedRelation,
-                lastLoadedPage,
-                search,
-                sort: false,
+              setIsLoading(true);
+              getResults({
+                lastLoadedPage: {},
+                onSuccess: () => {
+                  hasLoadedFirstPageRef.current = true;
+                  setIsLoading(false);
+                },
                 value: initialValue
+              });
+            }
+          },
+          onMenuScrollToBottom: () => {
+            getResults({
+              lastFullyLoadedRelation,
+              lastLoadedPage,
+              search,
+              sort: false,
+              value: initialValue
             });
-        },
-        options: options,
-        showError: showError,
-        value: valueToRender ?? null
-    }), !readOnly && allowCreate && /*#__PURE__*/ React.createElement(AddNewRelation, {
-        dispatchOptions,
-        hasMany,
-        options,
-        path,
-        relationTo,
-        setValue,
-        value
-    })), errorLoading && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__error-loading`
-    }, errorLoading), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+          },
+          options,
+          showError,
+          value: valueToRender ?? null
+        }), !readOnly && allowCreate && _jsx(AddNewRelation, {
+          hasMany,
+          path,
+          relationTo,
+          setValue,
+          value: value_0
+        })]
+      }), t26, _jsx(FieldDescription, {
+        Description: field?.admin?.components?.Description,
+        description,
+        field,
+        ...t27
+      })]
+    })]
+  });
 };
-export const Relationship = withCondition(RelationshipField);
-
+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