@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/fields/Relationship/index.js

@@ -3,24 +3,27 @@
 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 React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { AddNewRelation } from '../../elements/AddNewRelation/index.js';
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
+import { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { createRelationMap } from './createRelationMap.js';
-import { findOptionsByValue } from './findOptionsByValue.js';
 import './index.scss';
+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';
@@ -28,32 +31,26 @@ const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
 const RelationshipFieldComponent = props => {
   const {
-    descriptionProps,
-    errorProps,
     field,
     field: {
-      name,
-      _path: pathFromProps,
       admin: {
         allowCreate = true,
+        allowEdit = true,
         className,
         description,
         isSortable = true,
-        readOnly: readOnlyFromAdmin,
-        sortOptions,
-        style,
-        width
+        sortOptions
       } = {},
       hasMany,
       label,
+      localized,
       relationTo,
       required
     },
-    labelProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path,
+    readOnly,
     validate
   } = props;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
   const {
     config
   } = useConfig();
@@ -75,14 +72,18 @@ const RelationshipFieldComponent = props => {
     code: locale
   } = useLocale();
   const hasMultipleRelations = Array.isArray(relationTo);
-  const [options, dispatchOptions] = useReducer(optionsReducer, []);
+  const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
+    id: undefined,
+    collectionSlug: undefined,
+    hasReadPermission: false
+  });
   const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
   const [lastLoadedPage, setLastLoadedPage] = useState({});
   const [errorLoading, setErrorLoading] = useState('');
   const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
-  const menuIsOpen = useRef(false);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const hasLoadedFirstPageRef = useRef(false);
   const memoizedValidate = useCallback((value, validationOptions) => {
     if (typeof validate === 'function') {
@@ -93,27 +94,33 @@ const RelationshipFieldComponent = props => {
     }
   }, [validate, required]);
   const {
-    path: pathFromContext,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  const {
+    customComponents: {
+      Description,
+      Error,
+      Label
+    } = {},
     filterOptions,
-    formInitializing,
-    formProcessing,
     initialValue,
-    path,
     setValue,
     showError,
     value: value_0
   } = useField({
-    path: pathFromContext ?? pathFromProps ?? name,
+    path,
     validate: memoizedValidate
   });
-  const readOnly = readOnlyFromProps || readOnlyFromContext || formInitializing;
+  const [options, dispatchOptions] = useReducer(optionsReducer, []);
   const valueRef = useRef(value_0);
   valueRef.current = value_0;
-  const [drawerIsOpen, setDrawerIsOpen] = useState(false);
+  const [DocumentDrawer,, {
+    isDrawerOpen,
+    openDrawer
+  }] = useDocumentDrawer({
+    id: currentlyOpenRelationship.id,
+    collectionSlug: currentlyOpenRelationship.collectionSlug
+  });
+  const openDrawerWhenRelationChanges = useRef(false);
   const getResults = useCallback(async ({
+    filterOptions: filterOptions_0,
     lastFullyLoadedRelation: lastFullyLoadedRelationArg,
     lastLoadedPage: lastLoadedPageArg,
     onSuccess,
@@ -135,7 +142,7 @@ const RelationshipFieldComponent = props => {
     });
     if (!errorLoading) {
       await relationsToFetch.reduce(async (priorRelation, relation) => {
-        const relationFilterOption = filterOptions?.[relation];
+        const relationFilterOption = filterOptions_0?.[relation];
         let lastLoadedPageToUse;
         if (search !== searchArg) {
           lastLoadedPageToUse = 1;
@@ -207,8 +214,6 @@ const RelationshipFieldComponent = props => {
               dispatchOptions({
                 type: 'ADD',
                 collection,
-                // TODO: fix this
-                // @ts-expect-error-next-line
                 config,
                 docs: data.docs,
                 i18n,
@@ -220,8 +225,6 @@ const RelationshipFieldComponent = props => {
             dispatchOptions({
               type: 'ADD',
               collection,
-              // TODO: fix this
-              // @ts-expect-error-next-line
               config,
               docs: [],
               i18n,
@@ -233,11 +236,14 @@ const RelationshipFieldComponent = props => {
           }
         }
       }, Promise.resolve());
-      if (typeof onSuccess === 'function') onSuccess();
+      if (typeof onSuccess === 'function') {
+        onSuccess();
+      }
     }
-  }, [permissions, relationTo, hasMany, errorLoading, search, collections, locale, filterOptions, serverURL, sortOptions, api, i18n, config, t]);
+  }, [permissions, relationTo, hasMany, errorLoading, search, collections, locale, serverURL, sortOptions, api, i18n, config, t]);
   const updateSearch = useDebouncedCallback((searchArg_0, valueArg_0) => {
     void getResults({
+      filterOptions,
       lastLoadedPage: {},
       search: searchArg_0,
       sort: true,
@@ -254,7 +260,7 @@ const RelationshipFieldComponent = props => {
   // ///////////////////////////////////
   // Ensure we have an option for each value
   // ///////////////////////////////////
-  useEffect(() => {
+  useIgnoredEffect(() => {
     const relationMap_0 = createRelationMap({
       hasMany,
       relationTo,
@@ -297,8 +303,6 @@ const RelationshipFieldComponent = props => {
           dispatchOptions({
             type: 'ADD',
             collection: collection_0,
-            // TODO: fix this
-            // @ts-expect-error-next-line
             config,
             docs,
             i18n,
@@ -308,7 +312,7 @@ const RelationshipFieldComponent = props => {
         }
       }
     }, Promise.resolve());
-  }, [options, value_0, hasMany, errorLoading, collections, hasMultipleRelations, serverURL, api, i18n, relationTo, locale, config]);
+  }, [value_0], [options, hasMany, errorLoading, collections, hasMultipleRelations, serverURL, api, i18n, relationTo, locale, config]);
   // Determine if we should switch to word boundary search
   useEffect(() => {
     const relations_0 = Array.isArray(relationTo) ? relationTo : [relationTo];
@@ -321,13 +325,14 @@ const RelationshipFieldComponent = props => {
   }, [relationTo, collections]);
   // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
   // Note - effect should not run on first run
-  useEffect(() => {
+  useIgnoredEffect(() => {
     // If the menu is open while filterOptions changes
-    // due to latency of getFormState and fast clicking into this field,
+    // due to latency of form state and fast clicking into this field,
     // re-fetch options
-    if (hasLoadedFirstPageRef.current && menuIsOpen.current) {
+    if (hasLoadedFirstPageRef.current && menuIsOpen) {
       setIsLoading(true);
       void getResults({
+        filterOptions,
         lastLoadedPage: {},
         onSuccess: () => {
           hasLoadedFirstPageRef.current = true;
@@ -337,26 +342,77 @@ const RelationshipFieldComponent = props => {
       });
     }
     // 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
+    // because we need to get new options next time the menu opens
     dispatchOptions({
-      type: 'CLEAR'
+      type: 'CLEAR',
+      exemptValues: valueRef.current
     });
     setLastFullyLoadedRelation(-1);
     setLastLoadedPage({});
-    hasLoadedFirstPageRef.current = false;
-  }, [relationTo, filterOptions, locale, menuIsOpen, getResults, valueRef, hasLoadedFirstPageRef, path]);
+  }, [relationTo, filterOptions, locale, path, menuIsOpen], [getResults]);
   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 currentValue = valueRef.current;
+    const docId = args.doc.id;
+    if (hasMany) {
+      const unchanged = currentValue.some(option_0 => typeof option_0 === 'string' ? option_0 === docId : option_0.value === docId);
+      const valuesToSet = currentValue.map(option_1 => option_1.value === docId ? {
+        relationTo: args.collectionConfig.slug,
+        value: docId
+      } : option_1);
+      setValue(valuesToSet, unchanged);
+    } else {
+      const unchanged_0 = currentValue === docId;
+      setValue({
+        relationTo: args.collectionConfig.slug,
+        value: docId
+      }, unchanged_0);
+    }
+  }, [i18n, config, hasMany, setValue]);
+  const onDuplicate = useCallback(args_0 => {
+    dispatchOptions({
+      type: 'ADD',
+      collection: args_0.collectionConfig,
+      config,
+      docs: [args_0.doc],
+      i18n,
+      sort: true
+    });
+    if (hasMany) {
+      setValue(valueRef.current ? valueRef.current.concat({
+        relationTo: args_0.collectionConfig.slug,
+        value: args_0.doc.id
+      }) : null);
+    } else {
+      setValue({
+        relationTo: args_0.collectionConfig.slug,
+        value: args_0.doc.id
+      });
+    }
+  }, [i18n, config, hasMany, setValue]);
+  const onDelete = useCallback(args_1 => {
+    dispatchOptions({
+      id: args_1.id,
+      type: 'REMOVE',
+      collection: args_1.collectionConfig,
+      config,
+      i18n
+    });
+    if (hasMany) {
+      setValue(valueRef.current ? valueRef.current.filter(option_2 => {
+        return option_2.value !== args_1.id;
+      }) : null);
+    } else {
+      setValue(null);
+    }
+    return;
+  }, [i18n, config, hasMany, setValue]);
   const filterOption = useCallback((item, searchFilter) => {
     if (!searchFilter) {
       return true;
@@ -364,62 +420,86 @@ const RelationshipFieldComponent = props => {
     const r = wordBoundariesRegex(searchFilter || '');
     // breaking the labels to search into smaller parts increases performance
     const breakApartThreshold = 250;
-    let string = item.label;
+    let labelString = String(item.label);
     // strings less than breakApartThreshold length won't be chunked
-    while (string.length > breakApartThreshold) {
+    while (labelString.length > breakApartThreshold) {
       // slicing by the next space after the length of the search input prevents slicing the string up by partial words
-      const indexOfSpace = string.indexOf(' ', searchFilter.length);
-      if (r.test(string.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
+      const indexOfSpace = labelString.indexOf(' ', searchFilter.length);
+      if (r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
         return true;
       }
-      string = string.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
+      labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
     }
-    return r.test(string.slice(-breakApartThreshold));
+    return r.test(labelString.slice(-breakApartThreshold));
   }, []);
+  const onDocumentDrawerOpen = useCallback(({
+    id: id_0,
+    collectionSlug,
+    hasReadPermission
+  }) => {
+    openDrawerWhenRelationChanges.current = true;
+    setCurrentlyOpenRelationship({
+      id: id_0,
+      collectionSlug,
+      hasReadPermission
+    });
+  }, []);
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawer();
+      openDrawerWhenRelationChanges.current = false;
+    }
+  }, [openDrawer, currentlyOpenRelationship]);
   const valueToRender = findOptionsByValue({
+    allowEdit,
     options,
     value: value_0
   });
-  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null;
+  if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
+    valueToRender.value = null;
+  }
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, className, showError && 'error', errorLoading && 'error-loading', readOnly && `${baseClass}--read-only`, !readOnly && allowCreate && `${baseClass}--allow-create`].filter(Boolean).join(' '),
     id: `field-${path.replace(/\./g, '__')}`,
-    style: {
-      ...style,
-      width
-    },
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      Label: field?.admin?.components?.Label,
-      field: field,
-      label: label,
-      required: required,
-      ...(labelProps || {})
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
     }), /*#__PURE__*/_jsxs("div", {
       className: `${fieldBaseClass}__wrap`,
-      children: [/*#__PURE__*/_jsx(FieldError, {
-        CustomError: field?.admin?.components?.Error,
-        field: field,
-        path: path,
-        ...(errorProps || {})
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
       }), !errorLoading && /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__wrap`,
         children: [/*#__PURE__*/_jsx(ReactSelect, {
-          backspaceRemovesValue: !drawerIsOpen,
+          backspaceRemovesValue: !isDrawerOpen,
           components: {
             MultiValueLabel,
             SingleValue
           },
           customProps: {
-            disableKeyDown: drawerIsOpen,
-            disableMouseDown: drawerIsOpen,
-            onSave,
-            setDrawerIsOpen
+            disableKeyDown: isDrawerOpen,
+            disableMouseDown: isDrawerOpen,
+            onDocumentDrawerOpen,
+            onSave
           },
-          disabled: readOnly || formProcessing || drawerIsOpen,
+          disabled: readOnly || isDrawerOpen,
           filterOption: enableWordBoundarySearch ? filterOption : undefined,
-          getOptionValue: option_0 => {
-            if (!option_0) return undefined;
-            return hasMany && Array.isArray(relationTo) ? `${option_0.relationTo}_${option_0.value}` : option_0.value;
+          getOptionValue: option_3 => {
+            if (!option_3) {
+              return undefined;
+            }
+            return hasMany && Array.isArray(relationTo) ? `${option_3.relationTo}_${option_3.value}` : option_3.value;
           },
           isLoading: isLoading,
           isMulti: hasMany,
@@ -428,14 +508,14 @@ const RelationshipFieldComponent = props => {
             if (selected === null) {
               setValue(hasMany ? [] : null);
             } else if (hasMany && Array.isArray(selected)) {
-              setValue(selected ? selected.map(option_1 => {
+              setValue(selected ? selected.map(option_4 => {
                 if (hasMultipleRelations) {
                   return {
-                    relationTo: option_1.relationTo,
-                    value: option_1.value
+                    relationTo: option_4.relationTo,
+                    value: option_4.value
                   };
                 }
-                return option_1.value;
+                return option_4.value;
               }) : null);
             } else if (hasMultipleRelations && !Array.isArray(selected)) {
               setValue({
@@ -448,13 +528,14 @@ const RelationshipFieldComponent = props => {
           } : undefined,
           onInputChange: newSearch => handleInputChange(newSearch, value_0),
           onMenuClose: () => {
-            menuIsOpen.current = false;
+            setMenuIsOpen(false);
           },
           onMenuOpen: () => {
-            menuIsOpen.current = true;
+            setMenuIsOpen(true);
             if (!hasLoadedFirstPageRef.current) {
               setIsLoading(true);
               void getResults({
+                filterOptions,
                 lastLoadedPage: {},
                 onSuccess: () => {
                   hasLoadedFirstPageRef.current = true;
@@ -466,6 +547,7 @@ const RelationshipFieldComponent = props => {
           },
           onMenuScrollToBottom: () => {
             void getResults({
+              filterOptions,
               lastFullyLoadedRelation,
               lastLoadedPage,
               search,
@@ -486,12 +568,17 @@ const RelationshipFieldComponent = props => {
       }), errorLoading && /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__error-loading`,
         children: errorLoading
-      }), /*#__PURE__*/_jsx(FieldDescription, {
-        Description: field?.admin?.components?.Description,
-        description: description,
-        field: field,
-        ...(descriptionProps || {})
+      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
       })]
+    }), currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && /*#__PURE__*/_jsx(DocumentDrawer, {
+      onDelete: onDelete,
+      onDuplicate: onDuplicate,
+      onSave: onSave
     })]
   });
 };