@payloadcms/ui 3.0.0-alpha.7 → 3.0.0-alpha.70

package/dist/fields/Relationship/AddNew/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/fields/Relationship/AddNew/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/fields/Relationship/AddNew/types.ts"],"sourcesContent":["import type React from 'react'\n\nimport type { Action, OptionGroup, Value } from '../types.js'\n\nexport type Props = {\n  dispatchOptions: React.Dispatch<Action>\n  hasMany: boolean\n  options: OptionGroup[]\n  path: string\n  relationTo: string | string[]\n  setValue: (value: unknown) => void\n  value: Value | Value[]\n}\n"],"names":[],"rangeMappings":"","mappings":"AAIA,WAQC"}

package/dist/fields/Relationship/AddNew/useRelatedCollections.d.ts

@@ -0,0 +1,3 @@
+import type { ClientCollectionConfig } from 'payload/types';
+export declare const useRelatedCollections: (relationTo: string | string[]) => ClientCollectionConfig[];
+//# sourceMappingURL=useRelatedCollections.d.ts.map

package/dist/fields/Relationship/AddNew/useRelatedCollections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRelatedCollections.d.ts","sourceRoot":"","sources":["../../../../src/fields/Relationship/AddNew/useRelatedCollections.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAM3D,eAAO,MAAM,qBAAqB,eAAgB,MAAM,GAAG,MAAM,EAAE,KAAG,sBAAsB,EAc3F,CAAA"}

package/dist/fields/Relationship/AddNew/useRelatedCollections.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { useConfig } from '../../../providers/Config/index.js';
+export const useRelatedCollections = (relationTo)=>{
+    const config = useConfig();
+    const [relatedCollections] = useState(()=>{
+        if (relationTo) {
+            const relations = typeof relationTo === 'string' ? [
+                relationTo
+            ] : relationTo;
+            return relations.map((relation)=>config.collections.find((collection)=>collection.slug === relation));
+        }
+        return [];
+    });
+    return relatedCollections;
+};
+
+//# sourceMappingURL=useRelatedCollections.js.map

package/dist/fields/Relationship/AddNew/useRelatedCollections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/fields/Relationship/AddNew/useRelatedCollections.ts"],"sourcesContent":["import type { ClientCollectionConfig } from 'payload/types'\n\nimport { useState } from 'react'\n\nimport { useConfig } from '../../../providers/Config/index.js'\n\nexport const useRelatedCollections = (relationTo: string | string[]): ClientCollectionConfig[] => {\n  const config = useConfig()\n\n  const [relatedCollections] = useState(() => {\n    if (relationTo) {\n      const relations = typeof relationTo === 'string' ? [relationTo] : relationTo\n      return relations.map((relation) =>\n        config.collections.find((collection) => collection.slug === relation),\n      )\n    }\n    return []\n  })\n\n  return relatedCollections\n}\n"],"names":["useState","useConfig","useRelatedCollections","relationTo","config","relatedCollections","relations","map","relation","collections","find","collection","slug"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAEA,SAASA,QAAQ,QAAQ,QAAO;AAEhC,SAASC,SAAS,QAAQ,qCAAoC;AAE9D,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,SAASH;IAEf,MAAM,CAACI,mBAAmB,GAAGL,SAAS;QACpC,IAAIG,YAAY;YACd,MAAMG,YAAY,OAAOH,eAAe,WAAW;gBAACA;aAAW,GAAGA;YAClE,OAAOG,UAAUC,GAAG,CAAC,CAACC,WACpBJ,OAAOK,WAAW,CAACC,IAAI,CAAC,CAACC,aAAeA,WAAWC,IAAI,KAAKJ;QAEhE;QACA,OAAO,EAAE;IACX;IAEA,OAAOH;AACT,EAAC"}

package/dist/fields/Relationship/createRelationMap.d.ts

@@ -0,0 +1,12 @@
+import type { Value } from './types.js';
+type RelationMap = {
+    [relation: string]: (number | string)[];
+};
+type CreateRelationMap = (args: {
+    hasMany: boolean;
+    relationTo: string | string[];
+    value: Value | Value[] | null;
+}) => RelationMap;
+export declare const createRelationMap: CreateRelationMap;
+export {};
+//# sourceMappingURL=createRelationMap.d.ts.map

package/dist/fields/Relationship/createRelationMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRelationMap.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/createRelationMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,KAAK,WAAW,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACxC,CAAA;AAED,KAAK,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC7B,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;CAC9B,KAAK,WAAW,CAAA;AAEjB,eAAO,MAAM,iBAAiB,EAAE,iBAiD/B,CAAA"}

package/dist/fields/Relationship/createRelationMap.js

@@ -0,0 +1,49 @@
+export const createRelationMap = ({ hasMany, relationTo, value })=>{
+    const hasMultipleRelations = Array.isArray(relationTo);
+    let relationMap;
+    if (Array.isArray(relationTo)) {
+        relationMap = relationTo.reduce((map, current)=>{
+            return {
+                ...map,
+                [current]: []
+            };
+        }, {});
+    } else {
+        relationMap = {
+            [relationTo]: []
+        };
+    }
+    if (value === null) {
+        return relationMap;
+    }
+    const add = (relation, id)=>{
+        if ((typeof id === 'string' || typeof id === 'number') && typeof relation === 'string') {
+            if (relationMap[relation]) {
+                relationMap[relation].push(id);
+            } else {
+                relationMap[relation] = [
+                    id
+                ];
+            }
+        }
+    };
+    if (hasMany && Array.isArray(value)) {
+        value.forEach((val)=>{
+            if (hasMultipleRelations && typeof val === 'object' && 'relationTo' in val && 'value' in val) {
+                add(val.relationTo, val.value);
+            }
+            if (!hasMultipleRelations && typeof relationTo === 'string') {
+                add(relationTo, val);
+            }
+        });
+    } else if (hasMultipleRelations && Array.isArray(relationTo)) {
+        if (typeof value === 'object' && 'relationTo' in value && 'value' in value) {
+            add(value.relationTo, value.value);
+        }
+    } else {
+        add(relationTo, value);
+    }
+    return relationMap;
+};
+
+//# sourceMappingURL=createRelationMap.js.map

package/dist/fields/Relationship/createRelationMap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Relationship/createRelationMap.ts"],"sourcesContent":["import type { Value } from './types.js'\n\ntype RelationMap = {\n  [relation: string]: (number | string)[]\n}\n\ntype CreateRelationMap = (args: {\n  hasMany: boolean\n  relationTo: string | string[]\n  value: Value | Value[] | null // really needs to be `ValueWithRelation`\n}) => RelationMap\n\nexport const createRelationMap: CreateRelationMap = ({ hasMany, relationTo, value }) => {\n  const hasMultipleRelations = Array.isArray(relationTo)\n  let relationMap: RelationMap\n  if (Array.isArray(relationTo)) {\n    relationMap = relationTo.reduce((map, current) => {\n      return { ...map, [current]: [] }\n    }, {})\n  } else {\n    relationMap = { [relationTo]: [] }\n  }\n\n  if (value === null) {\n    return relationMap\n  }\n\n  const add = (relation: string, id: unknown) => {\n    if ((typeof id === 'string' || typeof id === 'number') && typeof relation === 'string') {\n      if (relationMap[relation]) {\n        relationMap[relation].push(id)\n      } else {\n        relationMap[relation] = [id]\n      }\n    }\n  }\n\n  if (hasMany && Array.isArray(value)) {\n    value.forEach((val) => {\n      if (\n        hasMultipleRelations &&\n        typeof val === 'object' &&\n        'relationTo' in val &&\n        'value' in val\n      ) {\n        add(val.relationTo, val.value)\n      }\n\n      if (!hasMultipleRelations && typeof relationTo === 'string') {\n        add(relationTo, val)\n      }\n    })\n  } else if (hasMultipleRelations && Array.isArray(relationTo)) {\n    if (typeof value === 'object' && 'relationTo' in value && 'value' in value) {\n      add(value.relationTo, value.value)\n    }\n  } else {\n    add(relationTo, value)\n  }\n\n  return relationMap\n}\n"],"names":["createRelationMap","hasMany","relationTo","value","hasMultipleRelations","Array","isArray","relationMap","reduce","map","current","add","relation","id","push","forEach","val"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAYA,OAAO,MAAMA,oBAAuC,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAE;IACjF,MAAMC,uBAAuBC,MAAMC,OAAO,CAACJ;IAC3C,IAAIK;IACJ,IAAIF,MAAMC,OAAO,CAACJ,aAAa;QAC7BK,cAAcL,WAAWM,MAAM,CAAC,CAACC,KAAKC;YACpC,OAAO;gBAAE,GAAGD,GAAG;gBAAE,CAACC,QAAQ,EAAE,EAAE;YAAC;QACjC,GAAG,CAAC;IACN,OAAO;QACLH,cAAc;YAAE,CAACL,WAAW,EAAE,EAAE;QAAC;IACnC;IAEA,IAAIC,UAAU,MAAM;QAClB,OAAOI;IACT;IAEA,MAAMI,MAAM,CAACC,UAAkBC;QAC7B,IAAI,AAAC,CAAA,OAAOA,OAAO,YAAY,OAAOA,OAAO,QAAO,KAAM,OAAOD,aAAa,UAAU;YACtF,IAAIL,WAAW,CAACK,SAAS,EAAE;gBACzBL,WAAW,CAACK,SAAS,CAACE,IAAI,CAACD;YAC7B,OAAO;gBACLN,WAAW,CAACK,SAAS,GAAG;oBAACC;iBAAG;YAC9B;QACF;IACF;IAEA,IAAIZ,WAAWI,MAAMC,OAAO,CAACH,QAAQ;QACnCA,MAAMY,OAAO,CAAC,CAACC;YACb,IACEZ,wBACA,OAAOY,QAAQ,YACf,gBAAgBA,OAChB,WAAWA,KACX;gBACAL,IAAIK,IAAId,UAAU,EAAEc,IAAIb,KAAK;YAC/B;YAEA,IAAI,CAACC,wBAAwB,OAAOF,eAAe,UAAU;gBAC3DS,IAAIT,YAAYc;YAClB;QACF;IACF,OAAO,IAAIZ,wBAAwBC,MAAMC,OAAO,CAACJ,aAAa;QAC5D,IAAI,OAAOC,UAAU,YAAY,gBAAgBA,SAAS,WAAWA,OAAO;YAC1EQ,IAAIR,MAAMD,UAAU,EAAEC,MAAMA,KAAK;QACnC;IACF,OAAO;QACLQ,IAAIT,YAAYC;IAClB;IAEA,OAAOI;AACT,EAAC"}

package/dist/fields/Relationship/findOptionsByValue.d.ts

@@ -0,0 +1,9 @@
+import type { Option } from '../../elements/ReactSelect/types.js';
+import type { OptionGroup, Value } from './types.js';
+type Args = {
+    options: OptionGroup[];
+    value: Value | Value[];
+};
+export declare const findOptionsByValue: ({ options, value }: Args) => Option | Option[];
+export {};
+//# sourceMappingURL=findOptionsByValue.d.ts.map

package/dist/fields/Relationship/findOptionsByValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findOptionsByValue.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEpD,KAAK,IAAI,GAAG;IACV,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,kBAAkB,uBAAwB,IAAI,KAAG,MAAM,GAAG,MAAM,EAuC5E,CAAA"}

package/dist/fields/Relationship/findOptionsByValue.js

@@ -0,0 +1,35 @@
+export const findOptionsByValue = ({ options, value })=>{
+    if (value) {
+        if (Array.isArray(value)) {
+            return value.map((val)=>{
+                let matchedOption;
+                options.forEach((optGroup)=>{
+                    if (!matchedOption) {
+                        matchedOption = optGroup.options.find((option)=>{
+                            if (typeof val === 'object') {
+                                return option.value === val.value && option.relationTo === val.relationTo;
+                            }
+                            return val === option.value;
+                        });
+                    }
+                });
+                return matchedOption;
+            });
+        }
+        let matchedOption;
+        options.forEach((optGroup)=>{
+            if (!matchedOption) {
+                matchedOption = optGroup.options.find((option)=>{
+                    if (typeof value === 'object') {
+                        return option.value === value.value && option.relationTo === value.relationTo;
+                    }
+                    return value === option.value;
+                });
+            }
+        });
+        return matchedOption;
+    }
+    return undefined;
+};
+
+//# sourceMappingURL=findOptionsByValue.js.map

package/dist/fields/Relationship/findOptionsByValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"sourcesContent":["import type { Option } from '../../elements/ReactSelect/types.js'\nimport type { OptionGroup, Value } from './types.js'\n\ntype Args = {\n  options: OptionGroup[]\n  value: Value | Value[]\n}\n\nexport const findOptionsByValue = ({ options, value }: Args): Option | Option[] => {\n  if (value) {\n    if (Array.isArray(value)) {\n      return value.map((val) => {\n        let matchedOption: Option\n\n        options.forEach((optGroup) => {\n          if (!matchedOption) {\n            matchedOption = optGroup.options.find((option) => {\n              if (typeof val === 'object') {\n                return option.value === val.value && option.relationTo === val.relationTo\n              }\n\n              return val === option.value\n            })\n          }\n        })\n\n        return matchedOption\n      })\n    }\n\n    let matchedOption: Option\n\n    options.forEach((optGroup) => {\n      if (!matchedOption) {\n        matchedOption = optGroup.options.find((option) => {\n          if (typeof value === 'object') {\n            return option.value === value.value && option.relationTo === value.relationTo\n          }\n          return value === option.value\n        })\n      }\n    })\n\n    return matchedOption\n  }\n\n  return undefined\n}\n"],"names":["findOptionsByValue","options","value","Array","isArray","map","val","matchedOption","forEach","optGroup","find","option","relationTo","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAQA,OAAO,MAAMA,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAQ;IACzD,IAAIA,OAAO;QACT,IAAIC,MAAMC,OAAO,CAACF,QAAQ;YACxB,OAAOA,MAAMG,GAAG,CAAC,CAACC;gBAChB,IAAIC;gBAEJN,QAAQO,OAAO,CAAC,CAACC;oBACf,IAAI,CAACF,eAAe;wBAClBA,gBAAgBE,SAASR,OAAO,CAACS,IAAI,CAAC,CAACC;4BACrC,IAAI,OAAOL,QAAQ,UAAU;gCAC3B,OAAOK,OAAOT,KAAK,KAAKI,IAAIJ,KAAK,IAAIS,OAAOC,UAAU,KAAKN,IAAIM,UAAU;4BAC3E;4BAEA,OAAON,QAAQK,OAAOT,KAAK;wBAC7B;oBACF;gBACF;gBAEA,OAAOK;YACT;QACF;QAEA,IAAIA;QAEJN,QAAQO,OAAO,CAAC,CAACC;YACf,IAAI,CAACF,eAAe;gBAClBA,gBAAgBE,SAASR,OAAO,CAACS,IAAI,CAAC,CAACC;oBACrC,IAAI,OAAOT,UAAU,UAAU;wBAC7B,OAAOS,OAAOT,KAAK,KAAKA,MAAMA,KAAK,IAAIS,OAAOC,UAAU,KAAKV,MAAMU,UAAU;oBAC/E;oBACA,OAAOV,UAAUS,OAAOT,KAAK;gBAC/B;YACF;QACF;QAEA,OAAOK;IACT;IAEA,OAAOM;AACT,EAAC"}

package/dist/fields/Relationship/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { RelationshipFieldProps } from './types.js';
+import './index.scss';
+export { RelationshipFieldProps };
+export declare const Relationship: React.FC<RelationshipFieldProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Relationship/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAAsB,sBAAsB,EAAS,MAAM,YAAY,CAAA;AAenF,OAAO,cAAc,CAAA;AASrB,OAAO,EAAE,sBAAsB,EAAE,CAAA;AAsiBjC,eAAO,MAAM,YAAY,kCAAmC,CAAA"}

package/dist/fields/Relationship/index.js

@@ -0,0 +1,479 @@
+'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 React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { useFormProcessing } from '../../forms/Form/context.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.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 { fieldBaseClass } from '../shared/index.js';
+import { AddNewRelation } from './AddNew/index.js';
+import { createRelationMap } from './createRelationMap.js';
+import { findOptionsByValue } from './findOptionsByValue.js';
+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
+        });
+        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,
+        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
+                    });
+                }
+            }
+        }, 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 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);
+        setLastLoadedPage({});
+        hasLoadedFirstPageRef.current = false;
+    }, [
+        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;
+            }
+            string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
+        }
+        return r.test(string.slice(-breakApartThreshold));
+    }, []);
+    const valueToRender = findOptionsByValue({
+        options,
+        value
+    });
+    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: {
+            MultiValueLabel,
+            SingleValue
+        },
+        customProps: {
+            disableKeyDown: drawerIsOpen,
+            disableMouseDown: drawerIsOpen,
+            onSave,
+            setDrawerIsOpen
+        },
+        disabled: readOnly || formProcessing,
+        filterOption: enableWordBoundarySearch ? filterOption : undefined,
+        isLoading: isLoading,
+        isMulti: hasMany,
+        isSortable: 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;
+                }) : null);
+            } else if (hasMultipleRelations) {
+                setValue({
+                    relationTo: selected.relationTo,
+                    value: selected.value
+                });
+            } else {
+                setValue(selected.value);
+            }
+        } : undefined,
+        onInputChange: (newSearch)=>handleInputChange(newSearch, value),
+        onMenuClose: ()=>{
+            menuIsOpen.current = false;
+        },
+        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,
+                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 || {}));
+};
+export const Relationship = withCondition(RelationshipField);
+
+//# sourceMappingURL=index.js.map