@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/fields/RadioGroup/index.scss

@@ -1,84 +1,86 @@
 @import '../../scss/styles.scss';
 
-.radio-group {
-  .tooltip:not([aria-hidden='true']) {
-    right: auto;
-    position: static;
-    margin-bottom: 0.2em;
-    max-width: fit-content;
-  }
-
-  &--layout-horizontal {
-    ul {
-      display: flex;
-      flex-wrap: wrap;
+@layer payload-default {
+  .radio-group {
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
 
-    li {
-      flex-shrink: 0;
-      [dir='ltr'] & {
-        padding-right: $baseline;
+    &--layout-horizontal {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
       }
-      [dir='rtl'] & {
-        padding-left: $baseline;
+
+      li {
+        flex-shrink: 0;
+        [dir='ltr'] & {
+          padding-right: $baseline;
+        }
+        [dir='rtl'] & {
+          padding-left: $baseline;
+        }
       }
     }
-  }
 
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
   }
-}
-
-.radio-group--read-only {
-  .radio-input {
-    cursor: default;
 
-    &:hover {
-      border-color: var(--theme-elevation-50);
-    }
+  .radio-group--read-only {
+    .radio-input {
+      cursor: default;
 
-    &__label {
-      color: var(--theme-elevation-400);
-    }
+      &:hover {
+        border-color: var(--theme-elevation-50);
+      }
 
-    &--is-selected {
-      .radio-input__styled-radio {
-        &:before {
-          background-color: var(--theme-elevation-250);
-        }
+      &__label {
+        color: var(--theme-elevation-400);
       }
-    }
 
-    &:not(.radio-input--is-selected) {
-      &:hover {
+      &--is-selected {
         .radio-input__styled-radio {
           &:before {
-            opacity: 0;
+            background-color: var(--theme-elevation-250);
+          }
+        }
+      }
+
+      &:not(.radio-input--is-selected) {
+        &:hover {
+          .radio-input__styled-radio {
+            &:before {
+              opacity: 0;
+            }
           }
         }
       }
     }
   }
-}
 
-html[data-theme='light'] {
-  .radio-group {
-    &.error {
-      .radio-input__styled-radio {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .radio-group {
+      &.error {
+        .radio-input__styled-radio {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .radio-group {
-    &.error {
-      .radio-input__styled-radio {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .radio-group {
+      &.error {
+        .radio-input__styled-radio {
+          @include darkInputError;
+        }
       }
     }
   }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"findOptionsByValue.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"names":[],"mappings":"AACA,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"}
+{"version":3,"file":"findOptionsByValue.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEpD,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,kBAAkB,kCAAmC,IAAI,KAAG,MAAM,GAAG,MAAM,EAuCvF,CAAA"}

package/dist/fields/Relationship/findOptionsByValue.js

@@ -1,6 +1,7 @@
 'use client';
 
 export const findOptionsByValue = ({
+  allowEdit,
   options,
   value
 }) => {
@@ -18,7 +19,10 @@ export const findOptionsByValue = ({
             });
           }
         });
-        return matchedOption;
+        return matchedOption ? {
+          allowEdit,
+          ...matchedOption
+        } : undefined;
       });
     }
     let matchedOption;
@@ -32,7 +36,10 @@ export const findOptionsByValue = ({
         });
       }
     });
-    return matchedOption;
+    return matchedOption ? {
+      allowEdit,
+      ...matchedOption
+    } : undefined;
   }
   return undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"findOptionsByValue.js","names":["findOptionsByValue","options","value","Array","isArray","map","val","matchedOption","forEach","optGroup","find","option","relationTo","undefined"],"sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"sourcesContent":["'use client'\nimport 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 || typeof value === 'number') {\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"],"mappings":"AAAA;;AASA,OAAO,MAAMA,kBAAA,GAAqBA,CAAC;EAAEC,OAAO;EAAEC;AAAK,CAAQ;EACzD,IAAIA,KAAA,IAAS,OAAOA,KAAA,KAAU,UAAU;IACtC,IAAIC,KAAA,CAAMC,OAAO,CAACF,KAAA,GAAQ;MACxB,OAAOA,KAAA,CAAMG,GAAG,CAAEC,GAAA;QAChB,IAAIC,aAAA;QAEJN,OAAA,CAAQO,OAAO,CAAEC,QAAA;UACf,IAAI,CAACF,aAAA,EAAe;YAClBA,aAAA,GAAgBE,QAAA,CAASR,OAAO,CAACS,IAAI,CAAEC,MAAA;cACrC,IAAI,OAAOL,GAAA,KAAQ,UAAU;gBAC3B,OAAOK,MAAA,CAAOT,KAAK,KAAKI,GAAA,CAAIJ,KAAK,IAAIS,MAAA,CAAOC,UAAU,KAAKN,GAAA,CAAIM,UAAU;cAC3E;cAEA,OAAON,GAAA,KAAQK,MAAA,CAAOT,KAAK;YAC7B;UACF;QACF;QAEA,OAAOK,aAAA;MACT;IACF;IAEA,IAAIA,aAAA;IAEJN,OAAA,CAAQO,OAAO,CAAEC,QAAA;MACf,IAAI,CAACF,aAAA,EAAe;QAClBA,aAAA,GAAgBE,QAAA,CAASR,OAAO,CAACS,IAAI,CAAEC,MAAA;UACrC,IAAI,OAAOT,KAAA,KAAU,UAAU;YAC7B,OAAOS,MAAA,CAAOT,KAAK,KAAKA,KAAA,CAAMA,KAAK,IAAIS,MAAA,CAAOC,UAAU,KAAKV,KAAA,CAAMU,UAAU;UAC/E;UACA,OAAOV,KAAA,KAAUS,MAAA,CAAOT,KAAK;QAC/B;MACF;IACF;IAEA,OAAOK,aAAA;EACT;EAEA,OAAOM,SAAA;AACT","ignoreList":[]}
+{"version":3,"file":"findOptionsByValue.js","names":["findOptionsByValue","allowEdit","options","value","Array","isArray","map","val","matchedOption","forEach","optGroup","find","option","relationTo","undefined"],"sources":["../../../src/fields/Relationship/findOptionsByValue.ts"],"sourcesContent":["'use client'\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { OptionGroup, Value } from './types.js'\n\ntype Args = {\n  allowEdit: boolean\n  options: OptionGroup[]\n  value: Value | Value[]\n}\n\nexport const findOptionsByValue = ({ allowEdit, options, value }: Args): Option | Option[] => {\n  if (value || typeof value === 'number') {\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 ? { allowEdit, ...matchedOption } : undefined\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 ? { allowEdit, ...matchedOption } : undefined\n  }\n\n  return undefined\n}\n"],"mappings":"AAAA;;AAUA,OAAO,MAAMA,kBAAA,GAAqBA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAQ;EACpE,IAAIA,KAAA,IAAS,OAAOA,KAAA,KAAU,UAAU;IACtC,IAAIC,KAAA,CAAMC,OAAO,CAACF,KAAA,GAAQ;MACxB,OAAOA,KAAA,CAAMG,GAAG,CAAEC,GAAA;QAChB,IAAIC,aAAA;QAEJN,OAAA,CAAQO,OAAO,CAAEC,QAAA;UACf,IAAI,CAACF,aAAA,EAAe;YAClBA,aAAA,GAAgBE,QAAA,CAASR,OAAO,CAACS,IAAI,CAAEC,MAAA;cACrC,IAAI,OAAOL,GAAA,KAAQ,UAAU;gBAC3B,OAAOK,MAAA,CAAOT,KAAK,KAAKI,GAAA,CAAIJ,KAAK,IAAIS,MAAA,CAAOC,UAAU,KAAKN,GAAA,CAAIM,UAAU;cAC3E;cAEA,OAAON,GAAA,KAAQK,MAAA,CAAOT,KAAK;YAC7B;UACF;QACF;QAEA,OAAOK,aAAA,GAAgB;UAAEP,SAAA;UAAW,GAAGO;QAAc,IAAIM,SAAA;MAC3D;IACF;IAEA,IAAIN,aAAA;IAEJN,OAAA,CAAQO,OAAO,CAAEC,QAAA;MACf,IAAI,CAACF,aAAA,EAAe;QAClBA,aAAA,GAAgBE,QAAA,CAASR,OAAO,CAACS,IAAI,CAAEC,MAAA;UACrC,IAAI,OAAOT,KAAA,KAAU,UAAU;YAC7B,OAAOS,MAAA,CAAOT,KAAK,KAAKA,KAAA,CAAMA,KAAK,IAAIS,MAAA,CAAOC,UAAU,KAAKV,KAAA,CAAMU,UAAU;UAC/E;UACA,OAAOV,KAAA,KAAUS,MAAA,CAAOT,KAAK;QAC/B;MACF;IACF;IAEA,OAAOK,aAAA,GAAgB;MAAEP,SAAA;MAAW,GAAGO;IAAc,IAAIM,SAAA;EAC3D;EAEA,OAAOA,SAAA;AACT","ignoreList":[]}

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import './index.scss';
 export declare const RelationshipField: React.FC<{
+    readonly path?: string;
     readonly validate?: import("payload").RelationshipFieldValidation;
 } & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<(Omit<import("payload").PolymorphicRelationshipFieldClient, "type"> & Partial<Pick<import("payload").PolymorphicRelationshipFieldClient, "type">>) | (Omit<import("payload").SingleRelationshipFieldClient, "type"> & Partial<Pick<import("payload").SingleRelationshipFieldClient, "type">>)>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<(Omit<import("payload").PolymorphicRelationshipFieldClient, "type"> & Partial<Pick<import("payload").PolymorphicRelationshipFieldClient, "type">>) | (Omit<import("payload").SingleRelationshipFieldClient, "type"> & Partial<Pick<import("payload").SingleRelationshipFieldClient, "type">>)>;
     readonly field: (Omit<import("payload").PolymorphicRelationshipFieldClient, "type"> & Partial<Pick<import("payload").PolymorphicRelationshipFieldClient, "type">>) | (Omit<import("payload").SingleRelationshipFieldClient, "type"> & Partial<Pick<import("payload").SingleRelationshipFieldClient, "type">>);
-    readonly labelProps?: import("payload").FieldLabelClientProps<(Omit<import("payload").PolymorphicRelationshipFieldClient, "type"> & Partial<Pick<import("payload").PolymorphicRelationshipFieldClient, "type">>) | (Omit<import("payload").SingleRelationshipFieldClient, "type"> & Partial<Pick<import("payload").SingleRelationshipFieldClient, "type">>)>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAwBnF,OAAO,cAAc,CAAA;AA4rBrB,eAAO,MAAM,iBAAiB;;;;;;;oCAA4C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAwBnF,OAAO,cAAc,CAAA;AAqrBrB,eAAO,MAAM,iBAAiB;;;;;+EAA4C,CAAA"}

package/dist/fields/Relationship/index.js

@@ -7,7 +7,10 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea
 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';
@@ -16,9 +19,6 @@ import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { createRelationMap } from './createRelationMap.js';
 import { findOptionsByValue } from './findOptionsByValue.js';
@@ -30,31 +30,29 @@ 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
       } = {},
       hasMany,
+      label,
+      localized,
       relationTo,
       required
     },
-    labelProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path: pathFromProps,
+    readOnly,
     validate
   } = props;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const path = pathFromProps ?? name;
   const {
     config
   } = useConfig();
@@ -98,24 +96,21 @@ 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 [options, dispatchOptions] = useReducer(optionsReducer, []);
-  const readOnly = readOnlyFromProps || readOnlyFromContext || formInitializing;
   const valueRef = useRef(value_0);
   valueRef.current = value_0;
   const [DocumentDrawer,, {
@@ -334,7 +329,7 @@ const RelationshipFieldComponent = props => {
   // Note - effect should not run on first run
   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) {
       setIsLoading(true);
@@ -365,21 +360,21 @@ const RelationshipFieldComponent = props => {
       doc: args.doc,
       i18n
     });
+    const currentValue = valueRef.current;
+    const docId = args.doc.id;
     if (hasMany) {
-      setValue(valueRef.current ? valueRef.current.map(option_0 => {
-        if (option_0.value === args.doc.id) {
-          return {
-            relationTo: args.collectionConfig.slug,
-            value: args.doc.id
-          };
-        }
-        return option_0;
-      }) : null);
+      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: args.doc.id
-      });
+        value: docId
+      }, unchanged_0);
     }
   }, [i18n, config, hasMany, setValue]);
   const onDuplicate = useCallback(args_0 => {
@@ -412,8 +407,8 @@ const RelationshipFieldComponent = props => {
       i18n
     });
     if (hasMany) {
-      setValue(valueRef.current ? valueRef.current.filter(option_1 => {
-        return option_1.value !== args_1.id;
+      setValue(valueRef.current ? valueRef.current.filter(option_2 => {
+        return option_2.value !== args_1.id;
       }) : null);
     } else {
       setValue(null);
@@ -458,6 +453,7 @@ const RelationshipFieldComponent = props => {
     }
   }, [openDrawer, currentlyOpenRelationship]);
   const valueToRender = findOptionsByValue({
+    allowEdit,
     options,
     value: value_0
   });
@@ -471,17 +467,22 @@ const RelationshipFieldComponent = props => {
       ...style,
       width
     },
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      field: field,
-      Label: field?.admin?.components?.Label,
-      ...(labelProps || {})
+    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, {
@@ -496,13 +497,13 @@ const RelationshipFieldComponent = props => {
             onDocumentDrawerOpen,
             onSave
           },
-          disabled: readOnly || formProcessing || isDrawerOpen,
+          disabled: readOnly || isDrawerOpen,
           filterOption: enableWordBoundarySearch ? filterOption : undefined,
-          getOptionValue: option_2 => {
-            if (!option_2) {
+          getOptionValue: option_3 => {
+            if (!option_3) {
               return undefined;
             }
-            return hasMany && Array.isArray(relationTo) ? `${option_2.relationTo}_${option_2.value}` : option_2.value;
+            return hasMany && Array.isArray(relationTo) ? `${option_3.relationTo}_${option_3.value}` : option_3.value;
           },
           isLoading: isLoading,
           isMulti: hasMany,
@@ -511,14 +512,14 @@ const RelationshipFieldComponent = props => {
             if (selected === null) {
               setValue(hasMany ? [] : null);
             } else if (hasMany && Array.isArray(selected)) {
-              setValue(selected ? selected.map(option_3 => {
+              setValue(selected ? selected.map(option_4 => {
                 if (hasMultipleRelations) {
                   return {
-                    relationTo: option_3.relationTo,
-                    value: option_3.value
+                    relationTo: option_4.relationTo,
+                    value: option_4.value
                   };
                 }
-                return option_3.value;
+                return option_4.value;
               }) : null);
             } else if (hasMultipleRelations && !Array.isArray(selected)) {
               setValue({
@@ -571,11 +572,12 @@ 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,