@payloadcms/next 3.73.0-canary.5 → 3.73.0-canary.6

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.d.ts

@@ -6,5 +6,5 @@ export declare const generateLabelFromValue: ({ field, locale, parentIsLocalized
     parentIsLocalized: boolean;
     req: PayloadRequest;
     value: RelationshipValue;
-}) => string;
+}) => Promise<string>;
 //# sourceMappingURL=generateLabelFromValue.d.ts.map

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateLabelFromValue.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAc,MAAM,SAAS,CAAA;AAS5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,eAAO,MAAM,sBAAsB,sDAMhC;IACD,KAAK,EAAE,iBAAiB,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,EAAE,OAAO,CAAA;IAC1B,GAAG,EAAE,cAAc,CAAA;IACnB,KAAK,EAAE,iBAAiB,CAAA;CACzB,KAAG,MAyDH,CAAA"}
+{"version":3,"file":"generateLabelFromValue.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAc,MAAM,SAAS,CAAA;AAS5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,eAAO,MAAM,sBAAsB,sDAMhC;IACD,KAAK,EAAE,iBAAiB,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,EAAE,OAAO,CAAA;IAC1B,GAAG,EAAE,cAAc,CAAA;IACnB,KAAK,EAAE,iBAAiB,CAAA;CACzB,KAAG,OAAO,CAAC,MAAM,CA4EjB,CAAA"}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.js

@@ -1,5 +1,5 @@
 import { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized, flattenTopLevelFields } from 'payload/shared';
-export const generateLabelFromValue = ({
+export const generateLabelFromValue = async ({
   field,
   locale,
   parentIsLocalized,
@@ -31,8 +31,30 @@ export const generateLabelFromValue = ({
   }
   if (typeof relatedDoc?.[useAsTitle] !== 'undefined') {
     valueToReturn = relatedDoc[useAsTitle];
+  } else if (typeof relatedDoc === 'string' || typeof relatedDoc === 'number') {
+    // When relatedDoc is just an ID (due to maxDepth: 0), fetch the document to get the title
+    try {
+      const fetchedDoc = await req.payload.findByID({
+        id: relatedDoc,
+        collection: relationTo,
+        depth: 0,
+        locale: titleFieldIsLocalized ? locale : undefined,
+        req,
+        select: {
+          [useAsTitle]: true
+        }
+      });
+      if (fetchedDoc?.[useAsTitle]) {
+        valueToReturn = fetchedDoc[useAsTitle];
+      } else {
+        valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`;
+      }
+    } catch (error) {
+      // Document might have been deleted or user doesn't have access
+      valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`;
+    }
   } else {
-    valueToReturn = String(typeof relatedDoc === 'object' ? relatedDoc.id : `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`);
+    valueToReturn = String(typeof relatedDoc === 'object' ? relatedDoc.id : relatedDoc);
   }
   if (typeof valueToReturn === 'object' && valueToReturn && titleFieldIsLocalized && valueToReturn?.[locale]) {
     valueToReturn = valueToReturn[locale];

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateLabelFromValue.js","names":["fieldAffectsData","fieldIsPresentationalOnly","fieldShouldBeLocalized","flattenTopLevelFields","generateLabelFromValue","field","locale","parentIsLocalized","req","value","relatedDoc","relationTo","valueToReturn","relatedCollection","payload","collections","config","useAsTitle","admin","flattenedRelatedCollectionFields","fields","moveSubFieldsToTop","useAsTitleField","find","f","name","titleFieldIsLocalized","String","id","i18n","t","JSON","stringify"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts"],"sourcesContent":["import type { PayloadRequest, RelationshipField, TypeWithID } from 'payload'\n\nimport {\n  fieldAffectsData,\n  fieldIsPresentationalOnly,\n  fieldShouldBeLocalized,\n  flattenTopLevelFields,\n} from 'payload/shared'\n\nimport type { RelationshipValue } from './index.js'\n\nexport const generateLabelFromValue = ({\n  field,\n  locale,\n  parentIsLocalized,\n  req,\n  value,\n}: {\n  field: RelationshipField\n  locale: string\n  parentIsLocalized: boolean\n  req: PayloadRequest\n  value: RelationshipValue\n}): string => {\n  let relatedDoc: number | string | TypeWithID\n  let relationTo: string = field.relationTo as string\n  let valueToReturn: string = ''\n\n  if (typeof value === 'object' && 'relationTo' in value) {\n    relatedDoc = value.value\n    relationTo = value.relationTo\n  } else {\n    // Non-polymorphic relationship or deleted document\n    relatedDoc = value\n  }\n\n  const relatedCollection = req.payload.collections[relationTo].config\n\n  const useAsTitle = relatedCollection?.admin?.useAsTitle\n\n  const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, {\n    moveSubFieldsToTop: true,\n  })\n\n  const useAsTitleField = flattenedRelatedCollectionFields.find(\n    (f) => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle,\n  )\n  let titleFieldIsLocalized = false\n\n  if (useAsTitleField && fieldAffectsData(useAsTitleField)) {\n    titleFieldIsLocalized = fieldShouldBeLocalized({ field: useAsTitleField, parentIsLocalized })\n  }\n\n  if (typeof relatedDoc?.[useAsTitle] !== 'undefined') {\n    valueToReturn = relatedDoc[useAsTitle]\n  } else {\n    valueToReturn = String(\n      typeof relatedDoc === 'object'\n        ? relatedDoc.id\n        : `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`,\n    )\n  }\n\n  if (\n    typeof valueToReturn === 'object' &&\n    valueToReturn &&\n    titleFieldIsLocalized &&\n    valueToReturn?.[locale]\n  ) {\n    valueToReturn = valueToReturn[locale]\n  }\n\n  if (\n    (valueToReturn && typeof valueToReturn === 'object' && valueToReturn !== null) ||\n    typeof valueToReturn !== 'string'\n  ) {\n    valueToReturn = JSON.stringify(valueToReturn)\n  }\n\n  return valueToReturn\n}\n"],"mappings":"AAEA,SACEA,gBAAgB,EAChBC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,QAChB;AAIP,OAAO,MAAMC,sBAAA,GAAyBA,CAAC;EACrCC,KAAK;EACLC,MAAM;EACNC,iBAAiB;EACjBC,GAAG;EACHC;AAAK,CAON;EACC,IAAIC,UAAA;EACJ,IAAIC,UAAA,GAAqBN,KAAA,CAAMM,UAAU;EACzC,IAAIC,aAAA,GAAwB;EAE5B,IAAI,OAAOH,KAAA,KAAU,YAAY,gBAAgBA,KAAA,EAAO;IACtDC,UAAA,GAAaD,KAAA,CAAMA,KAAK;IACxBE,UAAA,GAAaF,KAAA,CAAME,UAAU;EAC/B,OAAO;IACL;IACAD,UAAA,GAAaD,KAAA;EACf;EAEA,MAAMI,iBAAA,GAAoBL,GAAA,CAAIM,OAAO,CAACC,WAAW,CAACJ,UAAA,CAAW,CAACK,MAAM;EAEpE,MAAMC,UAAA,GAAaJ,iBAAA,EAAmBK,KAAA,EAAOD,UAAA;EAE7C,MAAME,gCAAA,GAAmChB,qBAAA,CAAsBU,iBAAA,CAAkBO,MAAM,EAAE;IACvFC,kBAAA,EAAoB;EACtB;EAEA,MAAMC,eAAA,GAAkBH,gCAAA,CAAiCI,IAAI,CAC1DC,CAAA,IAAMxB,gBAAA,CAAiBwB,CAAA,KAAM,CAACvB,yBAAA,CAA0BuB,CAAA,KAAMA,CAAA,CAAEC,IAAI,KAAKR,UAAA;EAE5E,IAAIS,qBAAA,GAAwB;EAE5B,IAAIJ,eAAA,IAAmBtB,gBAAA,CAAiBsB,eAAA,GAAkB;IACxDI,qBAAA,GAAwBxB,sBAAA,CAAuB;MAAEG,KAAA,EAAOiB,eAAA;MAAiBf;IAAkB;EAC7F;EAEA,IAAI,OAAOG,UAAA,GAAaO,UAAA,CAAW,KAAK,aAAa;IACnDL,aAAA,GAAgBF,UAAU,CAACO,UAAA,CAAW;EACxC,OAAO;IACLL,aAAA,GAAgBe,MAAA,CACd,OAAOjB,UAAA,KAAe,WAClBA,UAAA,CAAWkB,EAAE,GACb,GAAGpB,GAAA,CAAIqB,IAAI,CAACC,CAAC,CAAC,6BAA6BpB,UAAA,EAAY;EAE/D;EAEA,IACE,OAAOE,aAAA,KAAkB,YACzBA,aAAA,IACAc,qBAAA,IACAd,aAAA,GAAgBN,MAAA,CAAO,EACvB;IACAM,aAAA,GAAgBA,aAAa,CAACN,MAAA,CAAO;EACvC;EAEA,IACEM,aAAC,IAAiB,OAAOA,aAAA,KAAkB,YAAYA,aAAA,KAAkB,QACzE,OAAOA,aAAA,KAAkB,UACzB;IACAA,aAAA,GAAgBmB,IAAA,CAAKC,SAAS,CAACpB,aAAA;EACjC;EAEA,OAAOA,aAAA;AACT","ignoreList":[]}
+{"version":3,"file":"generateLabelFromValue.js","names":["fieldAffectsData","fieldIsPresentationalOnly","fieldShouldBeLocalized","flattenTopLevelFields","generateLabelFromValue","field","locale","parentIsLocalized","req","value","relatedDoc","relationTo","valueToReturn","relatedCollection","payload","collections","config","useAsTitle","admin","flattenedRelatedCollectionFields","fields","moveSubFieldsToTop","useAsTitleField","find","f","name","titleFieldIsLocalized","fetchedDoc","findByID","id","collection","depth","undefined","select","i18n","t","error","String","JSON","stringify"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts"],"sourcesContent":["import type { PayloadRequest, RelationshipField, TypeWithID } from 'payload'\n\nimport {\n  fieldAffectsData,\n  fieldIsPresentationalOnly,\n  fieldShouldBeLocalized,\n  flattenTopLevelFields,\n} from 'payload/shared'\n\nimport type { RelationshipValue } from './index.js'\n\nexport const generateLabelFromValue = async ({\n  field,\n  locale,\n  parentIsLocalized,\n  req,\n  value,\n}: {\n  field: RelationshipField\n  locale: string\n  parentIsLocalized: boolean\n  req: PayloadRequest\n  value: RelationshipValue\n}): Promise<string> => {\n  let relatedDoc: number | string | TypeWithID\n  let relationTo: string = field.relationTo as string\n  let valueToReturn: string = ''\n\n  if (typeof value === 'object' && 'relationTo' in value) {\n    relatedDoc = value.value\n    relationTo = value.relationTo\n  } else {\n    // Non-polymorphic relationship or deleted document\n    relatedDoc = value\n  }\n\n  const relatedCollection = req.payload.collections[relationTo].config\n\n  const useAsTitle = relatedCollection?.admin?.useAsTitle\n\n  const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, {\n    moveSubFieldsToTop: true,\n  })\n\n  const useAsTitleField = flattenedRelatedCollectionFields.find(\n    (f) => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle,\n  )\n  let titleFieldIsLocalized = false\n\n  if (useAsTitleField && fieldAffectsData(useAsTitleField)) {\n    titleFieldIsLocalized = fieldShouldBeLocalized({ field: useAsTitleField, parentIsLocalized })\n  }\n\n  if (typeof relatedDoc?.[useAsTitle] !== 'undefined') {\n    valueToReturn = relatedDoc[useAsTitle]\n  } else if (typeof relatedDoc === 'string' || typeof relatedDoc === 'number') {\n    // When relatedDoc is just an ID (due to maxDepth: 0), fetch the document to get the title\n    try {\n      const fetchedDoc = await req.payload.findByID({\n        id: relatedDoc,\n        collection: relationTo,\n        depth: 0,\n        locale: titleFieldIsLocalized ? locale : undefined,\n        req,\n        select: {\n          [useAsTitle]: true,\n        },\n      })\n\n      if (fetchedDoc?.[useAsTitle]) {\n        valueToReturn = fetchedDoc[useAsTitle]\n      } else {\n        valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`\n      }\n    } catch (error) {\n      // Document might have been deleted or user doesn't have access\n      valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}`\n    }\n  } else {\n    valueToReturn = String(typeof relatedDoc === 'object' ? relatedDoc.id : relatedDoc)\n  }\n\n  if (\n    typeof valueToReturn === 'object' &&\n    valueToReturn &&\n    titleFieldIsLocalized &&\n    valueToReturn?.[locale]\n  ) {\n    valueToReturn = valueToReturn[locale]\n  }\n\n  if (\n    (valueToReturn && typeof valueToReturn === 'object' && valueToReturn !== null) ||\n    typeof valueToReturn !== 'string'\n  ) {\n    valueToReturn = JSON.stringify(valueToReturn)\n  }\n\n  return valueToReturn\n}\n"],"mappings":"AAEA,SACEA,gBAAgB,EAChBC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,QAChB;AAIP,OAAO,MAAMC,sBAAA,GAAyB,MAAAA,CAAO;EAC3CC,KAAK;EACLC,MAAM;EACNC,iBAAiB;EACjBC,GAAG;EACHC;AAAK,CAON;EACC,IAAIC,UAAA;EACJ,IAAIC,UAAA,GAAqBN,KAAA,CAAMM,UAAU;EACzC,IAAIC,aAAA,GAAwB;EAE5B,IAAI,OAAOH,KAAA,KAAU,YAAY,gBAAgBA,KAAA,EAAO;IACtDC,UAAA,GAAaD,KAAA,CAAMA,KAAK;IACxBE,UAAA,GAAaF,KAAA,CAAME,UAAU;EAC/B,OAAO;IACL;IACAD,UAAA,GAAaD,KAAA;EACf;EAEA,MAAMI,iBAAA,GAAoBL,GAAA,CAAIM,OAAO,CAACC,WAAW,CAACJ,UAAA,CAAW,CAACK,MAAM;EAEpE,MAAMC,UAAA,GAAaJ,iBAAA,EAAmBK,KAAA,EAAOD,UAAA;EAE7C,MAAME,gCAAA,GAAmChB,qBAAA,CAAsBU,iBAAA,CAAkBO,MAAM,EAAE;IACvFC,kBAAA,EAAoB;EACtB;EAEA,MAAMC,eAAA,GAAkBH,gCAAA,CAAiCI,IAAI,CAC1DC,CAAA,IAAMxB,gBAAA,CAAiBwB,CAAA,KAAM,CAACvB,yBAAA,CAA0BuB,CAAA,KAAMA,CAAA,CAAEC,IAAI,KAAKR,UAAA;EAE5E,IAAIS,qBAAA,GAAwB;EAE5B,IAAIJ,eAAA,IAAmBtB,gBAAA,CAAiBsB,eAAA,GAAkB;IACxDI,qBAAA,GAAwBxB,sBAAA,CAAuB;MAAEG,KAAA,EAAOiB,eAAA;MAAiBf;IAAkB;EAC7F;EAEA,IAAI,OAAOG,UAAA,GAAaO,UAAA,CAAW,KAAK,aAAa;IACnDL,aAAA,GAAgBF,UAAU,CAACO,UAAA,CAAW;EACxC,OAAO,IAAI,OAAOP,UAAA,KAAe,YAAY,OAAOA,UAAA,KAAe,UAAU;IAC3E;IACA,IAAI;MACF,MAAMiB,UAAA,GAAa,MAAMnB,GAAA,CAAIM,OAAO,CAACc,QAAQ,CAAC;QAC5CC,EAAA,EAAInB,UAAA;QACJoB,UAAA,EAAYnB,UAAA;QACZoB,KAAA,EAAO;QACPzB,MAAA,EAAQoB,qBAAA,GAAwBpB,MAAA,GAAS0B,SAAA;QACzCxB,GAAA;QACAyB,MAAA,EAAQ;UACN,CAAChB,UAAA,GAAa;QAChB;MACF;MAEA,IAAIU,UAAA,GAAaV,UAAA,CAAW,EAAE;QAC5BL,aAAA,GAAgBe,UAAU,CAACV,UAAA,CAAW;MACxC,OAAO;QACLL,aAAA,GAAgB,GAAGJ,GAAA,CAAI0B,IAAI,CAACC,CAAC,CAAC,6BAA6BzB,UAAA,EAAY;MACzE;IACF,EAAE,OAAO0B,KAAA,EAAO;MACd;MACAxB,aAAA,GAAgB,GAAGJ,GAAA,CAAI0B,IAAI,CAACC,CAAC,CAAC,6BAA6BzB,UAAA,EAAY;IACzE;EACF,OAAO;IACLE,aAAA,GAAgByB,MAAA,CAAO,OAAO3B,UAAA,KAAe,WAAWA,UAAA,CAAWmB,EAAE,GAAGnB,UAAA;EAC1E;EAEA,IACE,OAAOE,aAAA,KAAkB,YACzBA,aAAA,IACAc,qBAAA,IACAd,aAAA,GAAgBN,MAAA,CAAO,EACvB;IACAM,aAAA,GAAgBA,aAAa,CAACN,MAAA,CAAO;EACvC;EAEA,IACEM,aAAC,IAAiB,OAAOA,aAAA,KAAkB,YAAYA,aAAA,KAAkB,QACzE,OAAOA,aAAA,KAAkB,UACzB;IACAA,aAAA,GAAgB0B,IAAA,CAAKC,SAAS,CAAC3B,aAAA;EACjC;EAEA,OAAOA,aAAA;AACT","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,oCAAoC,EACpC,UAAU,EACX,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAG1E,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,iBAAiB,GACzB;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;CAAE,GAC3D,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAElC,eAAO,MAAM,YAAY,EAAE,oCA0C1B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5C,KAAK,EAAE,iBAAiB,CAAA;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,WAAW,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,iBAAiB,CAAA;CAC3B,CAqEA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,oCAAoC,EACpC,UAAU,EACX,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAG1E,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,iBAAiB,GACzB;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;CAAE,GAC3D,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAElC,eAAO,MAAM,YAAY,EAAE,oCA0C1B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5C,KAAK,EAAE,iBAAiB,CAAA;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,WAAW,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,iBAAiB,CAAA;CAC3B,CAkGA,CAAA"}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.js

@@ -54,6 +54,21 @@ export const SingleRelationshipDiff = async args => {
     valueTo
   } = args;
   const ReactDOMServer = (await import('react-dom/server')).default;
+  const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
+  // Generate titles asynchronously before creating components
+  const [titleFrom, titleTo] = await Promise.all([valueFrom ? generateLabelFromValue({
+    field,
+    locale: localeToUse,
+    parentIsLocalized,
+    req,
+    value: valueFrom
+  }) : Promise.resolve(null), valueTo ? generateLabelFromValue({
+    field,
+    locale: localeToUse,
+    parentIsLocalized,
+    req,
+    value: valueTo
+  }) : Promise.resolve(null)]);
   const FromComponent = valueFrom ? /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
     field: field,
     i18n: i18n,
@@ -63,6 +78,7 @@ export const SingleRelationshipDiff = async args => {
     relationTo: polymorphic ? valueFrom.relationTo : field.relationTo,
     req: req,
     showPill: true,
+    title: titleFrom,
     value: valueFrom
   }) : null;
   const ToComponent = valueTo ? /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
@@ -74,6 +90,7 @@ export const SingleRelationshipDiff = async args => {
     relationTo: polymorphic ? valueTo.relationTo : field.relationTo,
     req: req,
     showPill: true,
+    title: titleTo,
     value: valueTo
   }) : null;
   const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`;
@@ -109,7 +126,22 @@ const ManyRelationshipDiff = async ({
   const ReactDOMServer = (await import('react-dom/server')).default;
   const fromArr = Array.isArray(valueFrom) ? valueFrom : [];
   const toArr = Array.isArray(valueTo) ? valueTo : [];
-  const makeNodes = list => list.map((val, idx) => /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
+  const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
+  // Generate all titles asynchronously before creating components
+  const [titlesFrom, titlesTo] = await Promise.all([Promise.all(fromArr.map(val => generateLabelFromValue({
+    field,
+    locale: localeToUse,
+    parentIsLocalized,
+    req,
+    value: val
+  }))), Promise.all(toArr.map(val => generateLabelFromValue({
+    field,
+    locale: localeToUse,
+    parentIsLocalized,
+    req,
+    value: val
+  })))]);
+  const makeNodes = (list, titles) => list.map((val, idx) => /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
     field: field,
     i18n: i18n,
     locale: locale,
@@ -118,12 +150,13 @@ const ManyRelationshipDiff = async ({
     relationTo: polymorphic ? val.relationTo : field.relationTo,
     req: req,
     showPill: polymorphic,
+    title: titles[idx],
     value: val
   }, idx));
-  const fromNodes = fromArr.length > 0 ? makeNodes(fromArr) : /*#__PURE__*/_jsx("p", {
+  const fromNodes = fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : /*#__PURE__*/_jsx("p", {
     className: `${baseClass}__empty`
   });
-  const toNodes = toArr.length > 0 ? makeNodes(toArr) : /*#__PURE__*/_jsx("p", {
+  const toNodes = toArr.length > 0 ? makeNodes(toArr, titlesTo) : /*#__PURE__*/_jsx("p", {
     className: `${baseClass}__empty`
   });
   const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes);
@@ -154,16 +187,9 @@ const RelationshipDocumentDiff = ({
   relationTo,
   req,
   showPill = false,
+  title,
   value
 }) => {
-  const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
-  const title = generateLabelFromValue({
-    field,
-    locale: localeToUse,
-    parentIsLocalized,
-    req,
-    value
-  });
   let pillLabel = null;
   if (showPill) {
     const collectionConfig = req.payload.collections[relationTo].config;

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","FieldDiffContainer","getHTMLDiffComponents","React","generateLabelFromValue","baseClass","Relationship","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","parentIsLocalized","req","versionValue","valueTo","hasMany","polymorphic","Array","isArray","relationTo","_jsx","ManyRelationshipDiff","SingleRelationshipDiff","args","ReactDOMServer","default","FromComponent","RelationshipDocumentDiff","showPill","value","ToComponent","fromHTML","renderToStaticMarkup","toHTML","diff","tokenizeByCharacter","className","From","label","To","fromArr","toArr","makeNodes","list","map","val","idx","fromNodes","length","toNodes","localeToUse","payload","config","localization","defaultLocale","title","pillLabel","collectionConfig","collections","labels","singular","slug","_jsxs","id"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["import type {\n  PayloadRequest,\n  RelationshipField,\n  RelationshipFieldDiffServerComponent,\n  TypeWithID,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\n\nimport React from 'react'\n\nimport { generateLabelFromValue } from './generateLabelFromValue.js'\n\nconst baseClass = 'relationship-diff'\n\nexport type RelationshipValue =\n  | { relationTo: string; value: number | string | TypeWithID }\n  | (number | string | TypeWithID)\n\nexport const Relationship: RelationshipFieldDiffServerComponent = ({\n  comparisonValue: valueFrom,\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  req,\n  versionValue: valueTo,\n}) => {\n  const hasMany = 'hasMany' in field && field.hasMany\n  const polymorphic = Array.isArray(field.relationTo)\n\n  if (hasMany) {\n    return (\n      <ManyRelationshipDiff\n        field={field}\n        i18n={i18n}\n        locale={locale}\n        nestingLevel={nestingLevel}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        req={req}\n        valueFrom={valueFrom as RelationshipValue[] | undefined}\n        valueTo={valueTo as RelationshipValue[] | undefined}\n      />\n    )\n  }\n\n  return (\n    <SingleRelationshipDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      nestingLevel={nestingLevel}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      req={req}\n      valueFrom={valueFrom as RelationshipValue}\n      valueTo={valueTo as RelationshipValue}\n    />\n  )\n}\n\nexport const SingleRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue\n  valueTo: RelationshipValue\n}> = async (args) => {\n  const {\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    parentIsLocalized,\n    polymorphic,\n    req,\n    valueFrom,\n    valueTo,\n  } = args\n\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const FromComponent = valueFrom ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueFrom as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      value={valueFrom}\n    />\n  ) : null\n  const ToComponent = valueTo ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueTo as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      value={valueTo}\n    />\n  ) : null\n\n  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`\n  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasOne`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst ManyRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue[] | undefined\n  valueTo: RelationshipValue[] | undefined\n}> = async ({\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  polymorphic,\n  req,\n  valueFrom,\n  valueTo,\n}) => {\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const fromArr = Array.isArray(valueFrom) ? valueFrom : []\n  const toArr = Array.isArray(valueTo) ? valueTo : []\n\n  const makeNodes = (list: RelationshipValue[]) =>\n    list.map((val, idx) => (\n      <RelationshipDocumentDiff\n        field={field}\n        i18n={i18n}\n        key={idx}\n        locale={locale}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        relationTo={\n          polymorphic\n            ? (val as { relationTo: string; value: TypeWithID }).relationTo\n            : (field.relationTo as string)\n        }\n        req={req}\n        showPill={polymorphic}\n        value={val}\n      />\n    ))\n\n  const fromNodes =\n    fromArr.length > 0 ? makeNodes(fromArr) : <p className={`${baseClass}__empty`}></p>\n\n  const toNodes = toArr.length > 0 ? makeNodes(toArr) : <p className={`${baseClass}__empty`}></p>\n\n  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes)\n  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes)\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasMany`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst RelationshipDocumentDiff = ({\n  field,\n  i18n,\n  locale,\n  parentIsLocalized,\n  polymorphic,\n  relationTo,\n  req,\n  showPill = false,\n  value,\n}: {\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  relationTo: string\n  req: PayloadRequest\n  showPill?: boolean\n  value: RelationshipValue\n}) => {\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  const title = generateLabelFromValue({\n    field,\n    locale: localeToUse,\n    parentIsLocalized,\n    req,\n    value,\n  })\n\n  let pillLabel: null | string = null\n  if (showPill) {\n    const collectionConfig = req.payload.collections[relationTo].config\n    pillLabel = collectionConfig.labels?.singular\n      ? getTranslation(collectionConfig.labels.singular, i18n)\n      : collectionConfig.slug\n  }\n\n  return (\n    <div\n      className={`${baseClass}`}\n      data-enable-match=\"true\"\n      data-id={\n        polymorphic\n          ? (value as { relationTo: string; value: TypeWithID }).value.id\n          : (value as TypeWithID).id\n      }\n      data-relation-to={relationTo}\n    >\n      {pillLabel && (\n        <span className={`${baseClass}__pill`} data-enable-match=\"false\">\n          {pillLabel}\n        </span>\n      )}\n      <strong className={`${baseClass}__info`} data-enable-match=\"false\">\n        {title}\n      </strong>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","FieldDiffContainer","getHTMLDiffComponents","React","generateLabelFromValue","baseClass","Relationship","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","parentIsLocalized","req","versionValue","valueTo","hasMany","polymorphic","Array","isArray","relationTo","_jsx","ManyRelationshipDiff","SingleRelationshipDiff","args","ReactDOMServer","default","localeToUse","payload","config","localization","defaultLocale","titleFrom","titleTo","Promise","all","value","resolve","FromComponent","RelationshipDocumentDiff","showPill","title","ToComponent","fromHTML","renderToStaticMarkup","toHTML","diff","tokenizeByCharacter","className","From","label","To","fromArr","toArr","titlesFrom","titlesTo","map","val","makeNodes","list","titles","idx","fromNodes","length","toNodes","pillLabel","collectionConfig","collections","labels","singular","slug","_jsxs","id"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["import type {\n  PayloadRequest,\n  RelationshipField,\n  RelationshipFieldDiffServerComponent,\n  TypeWithID,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\n\nimport React from 'react'\n\nimport { generateLabelFromValue } from './generateLabelFromValue.js'\n\nconst baseClass = 'relationship-diff'\n\nexport type RelationshipValue =\n  | { relationTo: string; value: number | string | TypeWithID }\n  | (number | string | TypeWithID)\n\nexport const Relationship: RelationshipFieldDiffServerComponent = ({\n  comparisonValue: valueFrom,\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  req,\n  versionValue: valueTo,\n}) => {\n  const hasMany = 'hasMany' in field && field.hasMany\n  const polymorphic = Array.isArray(field.relationTo)\n\n  if (hasMany) {\n    return (\n      <ManyRelationshipDiff\n        field={field}\n        i18n={i18n}\n        locale={locale}\n        nestingLevel={nestingLevel}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        req={req}\n        valueFrom={valueFrom as RelationshipValue[] | undefined}\n        valueTo={valueTo as RelationshipValue[] | undefined}\n      />\n    )\n  }\n\n  return (\n    <SingleRelationshipDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      nestingLevel={nestingLevel}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      req={req}\n      valueFrom={valueFrom as RelationshipValue}\n      valueTo={valueTo as RelationshipValue}\n    />\n  )\n}\n\nexport const SingleRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue\n  valueTo: RelationshipValue\n}> = async (args) => {\n  const {\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    parentIsLocalized,\n    polymorphic,\n    req,\n    valueFrom,\n    valueTo,\n  } = args\n\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate titles asynchronously before creating components\n  const [titleFrom, titleTo] = await Promise.all([\n    valueFrom\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueFrom,\n        })\n      : Promise.resolve(null),\n    valueTo\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueTo,\n        })\n      : Promise.resolve(null),\n  ])\n\n  const FromComponent = valueFrom ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueFrom as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleFrom}\n      value={valueFrom}\n    />\n  ) : null\n  const ToComponent = valueTo ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueTo as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleTo}\n      value={valueTo}\n    />\n  ) : null\n\n  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`\n  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasOne`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst ManyRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue[] | undefined\n  valueTo: RelationshipValue[] | undefined\n}> = async ({\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  polymorphic,\n  req,\n  valueFrom,\n  valueTo,\n}) => {\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const fromArr = Array.isArray(valueFrom) ? valueFrom : []\n  const toArr = Array.isArray(valueTo) ? valueTo : []\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate all titles asynchronously before creating components\n  const [titlesFrom, titlesTo] = await Promise.all([\n    Promise.all(\n      fromArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n    Promise.all(\n      toArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n  ])\n\n  const makeNodes = (list: RelationshipValue[], titles: string[]) =>\n    list.map((val, idx) => (\n      <RelationshipDocumentDiff\n        field={field}\n        i18n={i18n}\n        key={idx}\n        locale={locale}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        relationTo={\n          polymorphic\n            ? (val as { relationTo: string; value: TypeWithID }).relationTo\n            : (field.relationTo as string)\n        }\n        req={req}\n        showPill={polymorphic}\n        title={titles[idx]}\n        value={val}\n      />\n    ))\n\n  const fromNodes =\n    fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : <p className={`${baseClass}__empty`}></p>\n\n  const toNodes =\n    toArr.length > 0 ? makeNodes(toArr, titlesTo) : <p className={`${baseClass}__empty`}></p>\n\n  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes)\n  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes)\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasMany`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst RelationshipDocumentDiff = ({\n  field,\n  i18n,\n  locale,\n  parentIsLocalized,\n  polymorphic,\n  relationTo,\n  req,\n  showPill = false,\n  title,\n  value,\n}: {\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  relationTo: string\n  req: PayloadRequest\n  showPill?: boolean\n  title: null | string\n  value: RelationshipValue\n}) => {\n  let pillLabel: null | string = null\n  if (showPill) {\n    const collectionConfig = req.payload.collections[relationTo].config\n    pillLabel = collectionConfig.labels?.singular\n      ? getTranslation(collectionConfig.labels.singular, i18n)\n      : collectionConfig.slug\n  }\n\n  return (\n    <div\n      className={`${baseClass}`}\n      data-enable-match=\"true\"\n      data-id={\n        polymorphic\n          ? (value as { relationTo: string; value: TypeWithID }).value.id\n          : (value as TypeWithID).id\n      }\n      data-relation-to={relationTo}\n    >\n      {pillLabel && (\n        <span className={`${baseClass}__pill`} data-enable-match=\"false\">\n          {pillLabel}\n        </span>\n      )}\n      <strong className={`${baseClass}__info`} data-enable-match=\"false\">\n        {title}\n      </strong>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.73.0-canary.5",
+  "version": "3.73.0-canary.6",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -99,9 +99,9 @@
     "qs-esm": "7.0.2",
     "sass": "1.77.4",
     "uuid": "10.0.0",
-    "@payloadcms/graphql": "3.73.0-canary.5",
-    "@payloadcms/translations": "3.73.0-canary.5",
-    "@payloadcms/ui": "3.73.0-canary.5"
+    "@payloadcms/graphql": "3.73.0-canary.6",
+    "@payloadcms/translations": "3.73.0-canary.6",
+    "@payloadcms/ui": "3.73.0-canary.6"
   },
   "devDependencies": {
     "@babel/cli": "7.27.2",
@@ -118,13 +118,13 @@
     "esbuild": "0.27.1",
     "esbuild-sass-plugin": "3.3.1",
     "swc-plugin-transform-remove-imports": "8.3.0",
-    "payload": "3.73.0-canary.5",
+    "payload": "3.73.0-canary.6",
     "@payloadcms/eslint-config": "3.28.0"
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
     "next": "^15.4.10 || >=16.1.1-canary.35 <16.2.0 || ^16.2.0",
-    "payload": "3.73.0-canary.5"
+    "payload": "3.73.0-canary.6"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"