@payloadcms/ui 3.0.0-alpha.48 → 3.0.0-alpha.49

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.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"],"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":"AASA,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;AA4fjC,eAAO,MAAM,YAAY,kCAAmC,CAAA"}

package/dist/fields/Relationship/index.js

@@ -0,0 +1,447 @@
+'use client';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+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, labelProps, path: pathFromProps, readOnly, 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 [hasLoadedFirstPage, setHasLoadedFirstPage] = useState(false);
+    const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
+    const firstRun = useRef(true);
+    const memoizedValidate = useCallback((value, validationOptions)=>{
+        if (typeof validate === 'function') {
+            return validate(value, {
+                ...validationOptions,
+                required
+            });
+        }
+    }, [
+        validate,
+        required
+    ]);
+    const { filterOptions, initialValue, path, setValue, showError, value } = useField({
+        path: pathFromProps || name,
+        validate: memoizedValidate
+    });
+    const [drawerIsOpen, setDrawerIsOpen] = useState(false);
+    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, 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 = lastLoadedPage[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,
+        lastLoadedPage,
+        collections,
+        locale,
+        filterOptions,
+        serverURL,
+        sortOptions,
+        api,
+        i18n,
+        config,
+        t
+    ]);
+    const updateSearch = useDebouncedCallback((searchArg, valueArg)=>{
+        void getResults({
+            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 (firstRun.current) {
+            firstRun.current = false;
+            return;
+        }
+        dispatchOptions({
+            type: 'CLEAR'
+        });
+        setLastFullyLoadedRelation(-1);
+        setLastLoadedPage({});
+        setHasLoadedFirstPage(false);
+    }, [
+        relationTo,
+        filterOptions,
+        locale
+    ]);
+    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,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        ...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),
+        onMenuOpen: ()=>{
+            if (!hasLoadedFirstPage) {
+                setIsLoading(true);
+                void getResults({
+                    onSuccess: ()=>{
+                        setHasLoadedFirstPage(true);
+                        setIsLoading(false);
+                    },
+                    value: initialValue
+                });
+            }
+        },
+        onMenuScrollToBottom: ()=>{
+            void getResults({
+                lastFullyLoadedRelation,
+                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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type { PaginatedDocs } from 'payload/database'\nimport type { Where } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { wordBoundariesRegex } from 'payload/utilities'\nimport qs from 'qs'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'\nimport type { GetResults, Option, RelationshipFieldProps, Value } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { AddNewRelation } from './AddNew/index.js'\nimport { createRelationMap } from './createRelationMap.js'\nimport { findOptionsByValue } from './findOptionsByValue.js'\nimport './index.scss'\nimport { optionsReducer } from './optionsReducer.js'\nimport { MultiValueLabel } from './select-components/MultiValueLabel/index.js'\nimport { SingleValue } from './select-components/SingleValue/index.js'\n\nconst maxResultsPerRequest = 10\n\nconst baseClass = 'relationship'\n\nexport { RelationshipFieldProps }\n\nconst RelationshipField: React.FC<RelationshipFieldProps> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    allowCreate = true,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    isSortable = true,\n    labelProps,\n    path: pathFromProps,\n    readOnly,\n    relationTo,\n    required,\n    sortOptions,\n    style,\n    validate,\n    width,\n  } = props\n\n  const config = useConfig()\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = config\n\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const { code: locale } = useLocale()\n  const formProcessing = useFormProcessing()\n  const hasMultipleRelations = Array.isArray(relationTo)\n  const [options, dispatchOptions] = useReducer(optionsReducer, [])\n  const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1)\n  const [lastLoadedPage, setLastLoadedPage] = useState<Record<string, number>>({})\n  const [errorLoading, setErrorLoading] = useState('')\n  const [search, setSearch] = useState('')\n  const [isLoading, setIsLoading] = useState(false)\n  const [hasLoadedFirstPage, setHasLoadedFirstPage] = useState(false)\n  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false)\n  const firstRun = useRef(true)\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const { filterOptions, initialValue, path, setValue, showError, value } = useField<\n    Value | Value[]\n  >({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const [drawerIsOpen, setDrawerIsOpen] = useState(false)\n\n  const getResults: GetResults = useCallback(\n    async ({\n      lastFullyLoadedRelation: lastFullyLoadedRelationArg,\n      onSuccess,\n      search: searchArg,\n      sort,\n      value: valueArg,\n    }) => {\n      if (!permissions) {\n        return\n      }\n      const lastFullyLoadedRelationToUse =\n        typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1\n\n      const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n      const relationsToFetch =\n        lastFullyLoadedRelationToUse === -1\n          ? relations\n          : relations.slice(lastFullyLoadedRelationToUse + 1)\n\n      let resultsFetched = 0\n      const relationMap = createRelationMap({\n        hasMany,\n        relationTo,\n        value: valueArg,\n      })\n\n      if (!errorLoading) {\n        await relationsToFetch.reduce(async (priorRelation, relation) => {\n          const relationFilterOption = filterOptions?.[relation]\n\n          let lastLoadedPageToUse\n          if (search !== searchArg) {\n            lastLoadedPageToUse = 1\n          } else {\n            lastLoadedPageToUse = lastLoadedPage[relation] + 1\n          }\n          await priorRelation\n\n          if (relationFilterOption === false) {\n            setLastFullyLoadedRelation(relations.indexOf(relation))\n            return Promise.resolve()\n          }\n\n          if (resultsFetched < 10) {\n            const collection = collections.find((coll) => coll.slug === relation)\n            let fieldToSearch = collection?.defaultSort || collection?.admin?.useAsTitle || 'id'\n            if (!searchArg) {\n              if (typeof sortOptions === 'string') {\n                fieldToSearch = sortOptions\n              } else if (sortOptions?.[relation]) {\n                fieldToSearch = sortOptions[relation]\n              }\n            }\n\n            const query: {\n              [key: string]: unknown\n              where: Where\n            } = {\n              depth: 0,\n              draft: true,\n              limit: maxResultsPerRequest,\n              locale,\n              page: lastLoadedPageToUse,\n              sort: fieldToSearch,\n              where: {\n                and: [\n                  {\n                    id: {\n                      not_in: relationMap[relation],\n                    },\n                  },\n                ],\n              },\n            }\n\n            if (searchArg) {\n              query.where.and.push({\n                [fieldToSearch]: {\n                  like: searchArg,\n                },\n              })\n            }\n\n            if (relationFilterOption && typeof relationFilterOption !== 'boolean') {\n              query.where.and.push(relationFilterOption)\n            }\n\n            const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n              credentials: 'include',\n              headers: {\n                'Accept-Language': i18n.language,\n              },\n            })\n\n            if (response.ok) {\n              const data: PaginatedDocs<unknown> = await response.json()\n              setLastLoadedPage((prevState) => {\n                return {\n                  ...prevState,\n                  [relation]: lastLoadedPageToUse,\n                }\n              })\n\n              if (!data.nextPage) {\n                setLastFullyLoadedRelation(relations.indexOf(relation))\n              }\n\n              if (data.docs.length > 0) {\n                resultsFetched += data.docs.length\n\n                dispatchOptions({\n                  type: 'ADD',\n                  collection,\n                  // TODO: fix this\n                  // @ts-expect-error-next-line\n                  config,\n                  docs: data.docs,\n                  i18n,\n                  sort,\n                })\n              }\n            } else if (response.status === 403) {\n              setLastFullyLoadedRelation(relations.indexOf(relation))\n              dispatchOptions({\n                type: 'ADD',\n                collection,\n                // TODO: fix this\n                // @ts-expect-error-next-line\n                config,\n                docs: [],\n                i18n,\n                ids: relationMap[relation],\n                sort,\n              })\n            } else {\n              setErrorLoading(t('error:unspecific'))\n            }\n          }\n        }, Promise.resolve())\n\n        if (typeof onSuccess === 'function') onSuccess()\n      }\n    },\n    [\n      permissions,\n      relationTo,\n      hasMany,\n      errorLoading,\n      search,\n      lastLoadedPage,\n      collections,\n      locale,\n      filterOptions,\n      serverURL,\n      sortOptions,\n      api,\n      i18n,\n      config,\n      t,\n    ],\n  )\n\n  const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {\n    void getResults({ search: searchArg, sort: true, value: valueArg })\n    setSearch(searchArg)\n  }, 300)\n\n  const handleInputChange = useCallback(\n    (searchArg: string, valueArg: Value | Value[]) => {\n      if (search !== searchArg) {\n        setLastLoadedPage({})\n        updateSearch(searchArg, valueArg, searchArg !== '')\n      }\n    },\n    [search, updateSearch],\n  )\n\n  // ///////////////////////////////////\n  // Ensure we have an option for each value\n  // ///////////////////////////////////\n\n  useEffect(() => {\n    const relationMap = createRelationMap({\n      hasMany,\n      relationTo,\n      value,\n    })\n\n    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {\n      await priorRelation\n\n      const idsToLoad = ids.filter((id) => {\n        return !options.find((optionGroup) =>\n          optionGroup?.options?.find(\n            (option) => option.value === id && option.relationTo === relation,\n          ),\n        )\n      })\n\n      if (idsToLoad.length > 0) {\n        const query = {\n          depth: 0,\n          draft: true,\n          limit: idsToLoad.length,\n          locale,\n          where: {\n            id: {\n              in: idsToLoad,\n            },\n          },\n        }\n\n        if (!errorLoading) {\n          const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {\n            credentials: 'include',\n            headers: {\n              'Accept-Language': i18n.language,\n            },\n          })\n\n          const collection = collections.find((coll) => coll.slug === relation)\n          let docs = []\n\n          if (response.ok) {\n            const data = await response.json()\n            docs = data.docs\n          }\n\n          dispatchOptions({\n            type: 'ADD',\n            collection,\n            // TODO: fix this\n            // @ts-expect-error-next-line\n            config,\n            docs,\n            i18n,\n            ids: idsToLoad,\n            sort: true,\n          })\n        }\n      }\n    }, Promise.resolve())\n  }, [\n    options,\n    value,\n    hasMany,\n    errorLoading,\n    collections,\n    hasMultipleRelations,\n    serverURL,\n    api,\n    i18n,\n    relationTo,\n    locale,\n    config,\n  ])\n\n  // Determine if we should switch to word boundary search\n  useEffect(() => {\n    const relations = Array.isArray(relationTo) ? relationTo : [relationTo]\n    const isIdOnly = relations.reduce((idOnly, relation) => {\n      const collection = collections.find((coll) => coll.slug === relation)\n      const fieldToSearch = collection?.admin?.useAsTitle || 'id'\n      return fieldToSearch === 'id' && idOnly\n    }, true)\n    setEnableWordBoundarySearch(!isIdOnly)\n  }, [relationTo, collections])\n\n  // When (`relationTo` || `filterOptions` || `locale`) changes, reset component\n  // Note - effect should not run on first run\n  useEffect(() => {\n    if (firstRun.current) {\n      firstRun.current = false\n      return\n    }\n\n    dispatchOptions({ type: 'CLEAR' })\n    setLastFullyLoadedRelation(-1)\n    setLastLoadedPage({})\n    setHasLoadedFirstPage(false)\n  }, [relationTo, filterOptions, locale])\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      dispatchOptions({\n        type: 'UPDATE',\n        collection: args.collectionConfig,\n        // TODO: fix this\n        // @ts-expect-error-next-line\n        config,\n        doc: args.doc,\n        i18n,\n      })\n    },\n    [i18n, config],\n  )\n\n  const filterOption = useCallback((item: Option, searchFilter: string) => {\n    if (!searchFilter) {\n      return true\n    }\n    const r = wordBoundariesRegex(searchFilter || '')\n    // breaking the labels to search into smaller parts increases performance\n    const breakApartThreshold = 250\n    let string = item.label\n    // strings less than breakApartThreshold length won't be chunked\n    while (string.length > breakApartThreshold) {\n      // slicing by the next space after the length of the search input prevents slicing the string up by partial words\n      const indexOfSpace = string.indexOf(' ', searchFilter.length)\n      if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {\n        return true\n      }\n      string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1)\n    }\n    return r.test(string.slice(-breakApartThreshold))\n  }, [])\n\n  const valueToRender = findOptionsByValue({ options, value })\n\n  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        errorLoading && 'error-loading',\n        readOnly && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} {...(errorProps || {})} />\n      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />\n      {!errorLoading && (\n        <div className={`${baseClass}__wrap`}>\n          <ReactSelect\n            backspaceRemovesValue={!drawerIsOpen}\n            components={{\n              MultiValueLabel,\n              SingleValue,\n            }}\n            customProps={{\n              disableKeyDown: drawerIsOpen,\n              disableMouseDown: drawerIsOpen,\n              onSave,\n              setDrawerIsOpen,\n            }}\n            disabled={readOnly || formProcessing}\n            filterOption={enableWordBoundarySearch ? filterOption : undefined}\n            isLoading={isLoading}\n            isMulti={hasMany}\n            isSortable={isSortable}\n            onChange={\n              !readOnly\n                ? (selected) => {\n                    if (selected === null) {\n                      setValue(hasMany ? [] : null)\n                    } else if (hasMany) {\n                      setValue(\n                        selected\n                          ? selected.map((option) => {\n                              if (hasMultipleRelations) {\n                                return {\n                                  relationTo: option.relationTo,\n                                  value: option.value,\n                                }\n                              }\n\n                              return option.value\n                            })\n                          : null,\n                      )\n                    } else if (hasMultipleRelations) {\n                      setValue({\n                        relationTo: selected.relationTo,\n                        value: selected.value,\n                      })\n                    } else {\n                      setValue(selected.value)\n                    }\n                  }\n                : undefined\n            }\n            onInputChange={(newSearch) => handleInputChange(newSearch, value)}\n            onMenuOpen={() => {\n              if (!hasLoadedFirstPage) {\n                setIsLoading(true)\n                void getResults({\n                  onSuccess: () => {\n                    setHasLoadedFirstPage(true)\n                    setIsLoading(false)\n                  },\n                  value: initialValue,\n                })\n              }\n            }}\n            onMenuScrollToBottom={() => {\n              void getResults({\n                lastFullyLoadedRelation,\n                search,\n                sort: false,\n                value: initialValue,\n              })\n            }}\n            options={options}\n            showError={showError}\n            value={valueToRender ?? null}\n          />\n          {!readOnly && allowCreate && (\n            <AddNewRelation\n              {...{\n                dispatchOptions,\n                hasMany,\n                options,\n                path,\n                relationTo,\n                setValue,\n                value,\n              }}\n            />\n          )}\n        </div>\n      )}\n      {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const Relationship = withCondition(RelationshipField)\n"],"names":["FieldDescription","FieldError","FieldLabel","wordBoundariesRegex","qs","React","useCallback","useEffect","useReducer","useRef","useState","ReactSelect","useFormProcessing","useField","withCondition","useDebouncedCallback","useAuth","useConfig","useLocale","useTranslation","fieldBaseClass","AddNewRelation","createRelationMap","findOptionsByValue","optionsReducer","MultiValueLabel","SingleValue","maxResultsPerRequest","baseClass","RelationshipField","props","name","CustomDescription","CustomError","CustomLabel","allowCreate","className","descriptionProps","errorProps","hasMany","isSortable","labelProps","path","pathFromProps","readOnly","relationTo","required","sortOptions","style","validate","width","config","collections","routes","api","serverURL","i18n","t","permissions","code","locale","formProcessing","hasMultipleRelations","Array","isArray","options","dispatchOptions","lastFullyLoadedRelation","setLastFullyLoadedRelation","lastLoadedPage","setLastLoadedPage","errorLoading","setErrorLoading","search","setSearch","isLoading","setIsLoading","hasLoadedFirstPage","setHasLoadedFirstPage","enableWordBoundarySearch","setEnableWordBoundarySearch","firstRun","memoizedValidate","value","validationOptions","filterOptions","initialValue","setValue","showError","drawerIsOpen","setDrawerIsOpen","getResults","lastFullyLoadedRelationArg","onSuccess","searchArg","sort","valueArg","lastFullyLoadedRelationToUse","relations","relationsToFetch","slice","resultsFetched","relationMap","reduce","priorRelation","relation","relationFilterOption","lastLoadedPageToUse","indexOf","Promise","resolve","collection","find","coll","slug","fieldToSearch","defaultSort","admin","useAsTitle","query","depth","draft","limit","page","where","and","id","not_in","push","like","response","fetch","stringify","credentials","headers","language","ok","data","json","prevState","nextPage","docs","length","type","status","ids","updateSearch","handleInputChange","Object","entries","idsToLoad","filter","optionGroup","option","in","isIdOnly","idOnly","current","onSave","args","collectionConfig","doc","filterOption","item","searchFilter","r","breakApartThreshold","string","label","indexOfSpace","test","valueToRender","div","Boolean","join","replace","backspaceRemovesValue","components","customProps","disableKeyDown","disableMouseDown","disabled","undefined","isMulti","onChange","selected","map","onInputChange","newSearch","onMenuOpen","onMenuScrollToBottom","Relationship"],"mappings":"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"}

package/dist/fields/Relationship/index.scss

@@ -0,0 +1,57 @@
+@import '../../scss/styles.scss';
+
+.field-type.relationship {
+  position: relative;
+}
+
+.relationship {
+  &__wrap {
+    display: flex;
+    width: 100%;
+
+    div.react-select {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+
+  &__error-loading {
+    border: 1px solid var(--theme-error-500);
+    min-height: base(2);
+    padding: base(0.5) base(0.75);
+    background-color: var(--theme-error-500);
+    color: var(--theme-elevation-0);
+  }
+}
+
+html[data-theme='light'] {
+  .relationship {
+    &.error {
+      > .relationship__wrap {
+        .rs__control {
+          @include lightInputError;
+        }
+      }
+
+      button {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .relationship {
+    &.error {
+      > .relationship__wrap {
+        .rs__control {
+          @include darkInputError;
+        }
+      }
+
+      button {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import type { Action, OptionGroup } from './types.js';
+export declare const optionsReducer: (state: OptionGroup[], action: Action) => OptionGroup[];
+//# sourceMappingURL=optionsReducer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"optionsReducer.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/optionsReducer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAU,WAAW,EAAE,MAAM,YAAY,CAAA;AAyB7D,eAAO,MAAM,cAAc,UAAW,WAAW,EAAE,UAAU,MAAM,KAAG,WAAW,EAmGhF,CAAA"}