@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5d5a2b2

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

@@ -0,0 +1,131 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared';
+import React from 'react';
+import './index.css';
+import { useConfig } from '../../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../../providers/Translation/index.js';
+import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js';
+import { DiffCollapser } from '../../DiffCollapser/index.js';
+import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js';
+import { getFieldsForRowComparison } from '../../utilities/getFieldsForRowComparison.js';
+const baseClass = 'iterable-diff';
+export const Iterable = t0 => {
+  const $ = _c(12);
+  const {
+    baseVersionField,
+    comparisonValue: valueFrom,
+    field,
+    locale,
+    parentIsLocalized,
+    versionValue: valueTo
+  } = t0;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    selectedLocales
+  } = useSelectedLocales();
+  const {
+    config
+  } = useConfig();
+  if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
+    throw new Error(`Expected field to be an array or blocks type but got: ${field.type}`);
+  }
+  const valueToRowCount = Array.isArray(valueTo) ? valueTo.length : 0;
+  const valueFromRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0;
+  const maxRows = Math.max(valueToRowCount, valueFromRowCount);
+  let t1;
+  if ($[0] !== baseVersionField || $[1] !== config || $[2] !== field || $[3] !== i18n || $[4] !== locale || $[5] !== maxRows || $[6] !== parentIsLocalized || $[7] !== selectedLocales || $[8] !== t || $[9] !== valueFrom || $[10] !== valueTo) {
+    t1 = _jsx("div", {
+      className: baseClass,
+      children: _jsxs(DiffCollapser, {
+        field,
+        isIterable: true,
+        Label: "label" in field && field.label && typeof field.label !== "function" && _jsxs("span", {
+          children: [locale && _jsx("span", {
+            className: `${baseClass}__locale-label`,
+            children: locale
+          }), getTranslation(field.label, i18n)]
+        }),
+        locales: selectedLocales,
+        parentIsLocalized,
+        valueFrom,
+        valueTo,
+        children: [maxRows > 0 && _jsx("div", {
+          className: `${baseClass}__rows`,
+          children: Array.from({
+            length: maxRows
+          }, (_, i) => {
+            const valueToRow = valueTo?.[i] || {};
+            const valueFromRow = valueFrom?.[i] || {};
+            const {
+              fields,
+              versionFields
+            } = getFieldsForRowComparison({
+              baseVersionField,
+              config,
+              field,
+              row: i,
+              valueFromRow,
+              valueToRow
+            });
+            if (!versionFields?.length) {
+              return null;
+            }
+            const rowNumber = String(i + 1).padStart(2, "0");
+            const rowLabel = fieldIsArrayType(field) ? `${t("general:item")} ${rowNumber}` : `${t("fields:block")} ${rowNumber}`;
+            return _jsx("div", {
+              className: `${baseClass}__row`,
+              children: _jsx(DiffCollapser, {
+                fields,
+                hideGutter: true,
+                Label: _jsxs("div", {
+                  className: `${baseClass}-label-container`,
+                  children: [_jsx("div", {
+                    className: `${baseClass}-label-prefix`
+                  }), _jsx("span", {
+                    className: `${baseClass}__label`,
+                    children: rowLabel
+                  })]
+                }),
+                locales: selectedLocales,
+                parentIsLocalized: parentIsLocalized || field.localized,
+                valueFrom: valueFromRow,
+                valueTo: valueToRow,
+                children: _jsx(RenderVersionFieldsToDiff, {
+                  versionFields
+                })
+              })
+            }, i);
+          })
+        }), maxRows === 0 && _jsx("div", {
+          className: `${baseClass}__no-rows`,
+          children: i18n.t("version:noRowsFound", {
+            label: "labels" in field && field.labels?.plural ? getTranslation(field.labels.plural, i18n) : i18n.t("general:rows")
+          })
+        })]
+      })
+    });
+    $[0] = baseVersionField;
+    $[1] = config;
+    $[2] = field;
+    $[3] = i18n;
+    $[4] = locale;
+    $[5] = maxRows;
+    $[6] = parentIsLocalized;
+    $[7] = selectedLocales;
+    $[8] = t;
+    $[9] = valueFrom;
+    $[10] = valueTo;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldIsArrayType","fieldIsBlockType","React","useConfig","useTranslation","useSelectedLocales","DiffCollapser","RenderVersionFieldsToDiff","getFieldsForRowComparison","baseClass","Iterable","t0","$","baseVersionField","comparisonValue","valueFrom","field","locale","parentIsLocalized","versionValue","valueTo","i18n","t","selectedLocales","config","Error","type","valueToRowCount","Array","isArray","length","valueFromRowCount","maxRows","Math","max","t1","_jsx","className","children","_jsxs","isIterable","Label","label","from","_","i","valueToRow","valueFromRow","fields","versionFields","row","rowNumber","String","padStart","rowLabel","hideGutter","localized","labels","plural"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldDiffClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React from 'react'\n\nimport './index.css'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js'\nimport { DiffCollapser } from '../../DiffCollapser/index.js'\nimport { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js'\nimport { getFieldsForRowComparison } from '../../utilities/getFieldsForRowComparison.js'\n\nconst baseClass = 'iterable-diff'\n\nexport const Iterable: React.FC<FieldDiffClientProps> = ({\n  baseVersionField,\n  comparisonValue: valueFrom,\n  field,\n  locale,\n  parentIsLocalized,\n  versionValue: valueTo,\n}) => {\n  const { i18n, t } = useTranslation()\n  const { selectedLocales } = useSelectedLocales()\n  const { config } = useConfig()\n\n  if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n    throw new Error(`Expected field to be an array or blocks type but got: ${field.type}`)\n  }\n\n  const valueToRowCount = Array.isArray(valueTo) ? valueTo.length : 0\n  const valueFromRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0\n  const maxRows = Math.max(valueToRowCount, valueFromRowCount)\n\n  return (\n    <div className={baseClass}>\n      <DiffCollapser\n        field={field}\n        isIterable\n        Label={\n          'label' in field &&\n          field.label &&\n          typeof field.label !== 'function' && (\n            <span>\n              {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n              {getTranslation(field.label, i18n)}\n            </span>\n          )\n        }\n        locales={selectedLocales}\n        parentIsLocalized={parentIsLocalized}\n        valueFrom={valueFrom}\n        valueTo={valueTo}\n      >\n        {maxRows > 0 && (\n          <div className={`${baseClass}__rows`}>\n            {Array.from({ length: maxRows }, (_, i) => {\n              const valueToRow = valueTo?.[i] || {}\n              const valueFromRow = valueFrom?.[i] || {}\n\n              const { fields, versionFields } = getFieldsForRowComparison({\n                baseVersionField,\n                config,\n                field,\n                row: i,\n                valueFromRow,\n                valueToRow,\n              })\n\n              if (!versionFields?.length) {\n                // Rows without a diff create \"holes\" in the baseVersionField.rows (=versionFields) array - this is to maintain the correct row indexes.\n                // It does mean that this row has no diff and should not be rendered => skip it.\n                return null\n              }\n\n              const rowNumber = String(i + 1).padStart(2, '0')\n              const rowLabel = fieldIsArrayType(field)\n                ? `${t('general:item')} ${rowNumber}`\n                : `${t('fields:block')} ${rowNumber}`\n\n              return (\n                <div className={`${baseClass}__row`} key={i}>\n                  <DiffCollapser\n                    fields={fields}\n                    hideGutter={true}\n                    Label={\n                      <div className={`${baseClass}-label-container`}>\n                        <div className={`${baseClass}-label-prefix`}></div>\n                        <span className={`${baseClass}__label`}>{rowLabel}</span>\n                      </div>\n                    }\n                    locales={selectedLocales}\n                    parentIsLocalized={parentIsLocalized || field.localized}\n                    valueFrom={valueFromRow}\n                    valueTo={valueToRow}\n                  >\n                    <RenderVersionFieldsToDiff versionFields={versionFields} />\n                  </DiffCollapser>\n                </div>\n              )\n            })}\n          </div>\n        )}\n        {maxRows === 0 && (\n          <div className={`${baseClass}__no-rows`}>\n            {i18n.t('version:noRowsFound', {\n              label:\n                'labels' in field && field.labels?.plural\n                  ? getTranslation(field.labels.plural, i18n)\n                  : i18n.t('general:rows'),\n            })}\n          </div>\n        )}\n      </DiffCollapser>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ;AACnD,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,aAAa,QAAQ;AAC9B,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,yBAAyB,QAAQ;AAE1C,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,QAAA,GAA2CC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAAC;IAAAe,gBAAA;IAAAC,eAAA,EAAAC,SAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,iBAAA;IAAAC,YAAA,EAAAC;EAAA,IAAAT,EAOxD;EACC;IAAAU,IAAA;IAAAC;EAAA,IAAoBlB,cAAA;EACpB;IAAAmB;EAAA,IAA4BlB,kBAAA;EAC5B;IAAAmB;EAAA,IAAmBrB,SAAA;EAAA,IAEf,CAACH,gBAAA,CAAiBgB,KAAA,MAAWf,gBAAA,CAAiBe,KAAA;IAAA,UAAAS,KAAA,CAChC,yDAAyDT,KAAA,CAAAU,IAAA,EAAY;EAAA;EAGvF,MAAAC,eAAA,GAAwBC,KAAA,CAAAC,OAAA,CAAcT,OAAA,IAAWA,OAAA,CAAAU,MAAA,IAAiB;EAClE,MAAAC,iBAAA,GAA0BH,KAAA,CAAAC,OAAA,CAAcd,SAAA,IAAaA,SAAA,CAAAe,MAAA,IAAmB;EACxE,MAAAE,OAAA,GAAgBC,IAAA,CAAAC,GAAA,CAASP,eAAA,EAAiBI,iBAAA;EAAA,IAAAI,EAAA;EAAA,IAAAvB,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAY,MAAA,IAAAZ,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAS,IAAA,IAAAT,CAAA,QAAAK,MAAA,IAAAL,CAAA,QAAAoB,OAAA,IAAApB,CAAA,QAAAM,iBAAA,IAAAN,CAAA,QAAAW,eAAA,IAAAX,CAAA,QAAAU,CAAA,IAAAV,CAAA,QAAAG,SAAA,IAAAH,CAAA,SAAAQ,OAAA;IAGxCe,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAA5B,SAAA;MAAA6B,QAAA,EACCC,KAAA,CAAAjC,aAAA;QAAAU,KAAA;QAAAwB,UAAA;QAAAC,KAAA,EAII,WAAWzB,KAAA,IACXA,KAAA,CAAA0B,KAAW,IACX,OAAO1B,KAAA,CAAA0B,KAAA,KAAgB,cACrBH,KAAA,CAAC;UAAAD,QAAA,GACErB,MAAA,IAAUmB,IAAA,CAAC;YAAAC,SAAA,EAAgB,GAAA5B,SAAA,gBAA4B;YAAA6B,QAAA,EAAGrB;UAAA,C,GAC1DlB,cAAA,CAAeiB,KAAA,CAAA0B,KAAA,EAAarB,IAAA;QAAA,C;iBAI1BE,eAAA;QAAAL,iBAAA;QAAAH,SAAA;QAAAK,OAAA;QAAAkB,QAAA,GAKRN,OAAA,IAAU,IACTI,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAA5B,SAAA,QAAoB;UAAA6B,QAAA,EACjCV,KAAA,CAAAe,IAAA;YAAAb,MAAA,EAAqBE;UAAA,IAAAY,CAAA,EAAAC,CAAA;YACpB,MAAAC,UAAA,GAAmB1B,OAAA,GAAUyB,CAAA,OAAO;YACpC,MAAAE,YAAA,GAAqBhC,SAAA,GAAY8B,CAAA,OAAO;YAExC;cAAAG,MAAA;cAAAC;YAAA,IAAkCzC,yBAAA;cAAAK,gBAAA;cAAAW,MAAA;cAAAR,KAAA;cAAAkC,GAAA,EAI3BL,CAAA;cAAAE,YAAA;cAAAD;YAAA,CAGP;YAAA,KAEKG,aAAA,EAAAnB,MAAA;cAAA;YAAA;YAML,MAAAqB,SAAA,GAAkBC,MAAA,CAAOP,CAAA,IAAI,EAAAQ,QAAA,IAAe;YAC5C,MAAAC,QAAA,GAAiBtD,gBAAA,CAAiBgB,KAAA,IAC9B,GAAGM,CAAA,CAAE,mBAAmB6B,SAAA,EAAW,GACnC,GAAG7B,CAAA,CAAE,mBAAmB6B,SAAA,EAAW;YAAA,OAGrCf,IAAA,CAAC;cAAAC,SAAA,EAAe,GAAA5B,SAAA,OAAmB;cAAA6B,QAAA,EACjCF,IAAA,CAAA9B,aAAA;gBAAA0C,MAAA;gBAAAO,UAAA;gBAAAd,KAAA,EAIIF,KAAA,CAAC;kBAAAF,SAAA,EAAe,GAAA5B,SAAA,kBAA8B;kBAAA6B,QAAA,GAC5CF,IAAA,CAAC;oBAAAC,SAAA,EAAe,GAAA5B,SAAA;kBAA2B,C,GAC3C2B,IAAA,CAAC;oBAAAC,SAAA,EAAgB,GAAA5B,SAAA,SAAqB;oBAAA6B,QAAA,EAAGgB;kBAAA,C;;yBAGpC/B,eAAA;gBAAAL,iBAAA,EACUA,iBAAA,IAAqBF,KAAA,CAAAwC,SAAe;gBAAAzC,SAAA,EAC5CgC,YAAA;gBAAA3B,OAAA,EACF0B,UAAA;gBAAAR,QAAA,EAETF,IAAA,CAAA7B,yBAAA;kBAAA0C;gBAAA,C;;eAfsCJ,CAAA;UAAA,CAmB9C;QAAA,C,GAGHb,OAAA,MAAY,IACXI,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAA5B,SAAA,WAAuB;UAAA6B,QAAA,EACpCjB,IAAA,CAAAC,CAAA,CAAO;YAAAoB,KAAA,EAEJ,YAAY1B,KAAA,IAASA,KAAA,CAAAyC,MAAA,EAAAC,MAAc,GAC/B3D,cAAA,CAAeiB,KAAA,CAAAyC,MAAA,CAAAC,MAAA,EAAqBrC,IAAA,IACpCA,IAAA,CAAAC,CAAA,CAAO;UAAA,CACf;QAAA,C;;;;;;;;;;;;;;;;;;SA3ERa,E;CAiFJ","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import type { PayloadRequest, RelationshipField } from 'payload';
+import type { RelationshipValue } from './index.js';
+export declare const generateLabelFromValue: ({ field, locale, parentIsLocalized, req, value, }: {
+    field: RelationshipField;
+    locale: string;
+    parentIsLocalized: boolean;
+    req: PayloadRequest;
+    value: RelationshipValue;
+}) => Promise<string>;
+//# sourceMappingURL=generateLabelFromValue.d.ts.map

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

@@ -0,0 +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,GAAU,mDAM1C;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

@@ -0,0 +1,67 @@
+import { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized, flattenTopLevelFields } from 'payload/shared';
+export const generateLabelFromValue = async ({
+  field,
+  locale,
+  parentIsLocalized,
+  req,
+  value
+}) => {
+  let relatedDoc;
+  let relationTo = field.relationTo;
+  let valueToReturn = '';
+  if (typeof value === 'object' && 'relationTo' in value) {
+    relatedDoc = value.value;
+    relationTo = value.relationTo;
+  } else {
+    // Non-polymorphic relationship or deleted document
+    relatedDoc = value;
+  }
+  const relatedCollection = req.payload.collections[relationTo].config;
+  const useAsTitle = relatedCollection?.admin?.useAsTitle;
+  const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, {
+    moveSubFieldsToTop: true
+  });
+  const useAsTitleField = flattenedRelatedCollectionFields.find(f => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle);
+  let titleFieldIsLocalized = false;
+  if (useAsTitleField && fieldAffectsData(useAsTitleField)) {
+    titleFieldIsLocalized = fieldShouldBeLocalized({
+      field: useAsTitleField,
+      parentIsLocalized
+    });
+  }
+  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 : relatedDoc);
+  }
+  if (typeof valueToReturn === 'object' && valueToReturn && titleFieldIsLocalized && valueToReturn?.[locale]) {
+    valueToReturn = valueToReturn[locale];
+  }
+  if (valueToReturn && typeof valueToReturn === 'object' && valueToReturn !== null || typeof valueToReturn !== 'string') {
+    valueToReturn = JSON.stringify(valueToReturn);
+  }
+  return valueToReturn;
+};
+//# sourceMappingURL=generateLabelFromValue.js.map

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

@@ -0,0 +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","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.css

@@ -0,0 +1,209 @@
+@layer payload-default {
+  .relationship-diff-container .field-diff-content {
+    padding: 0;
+    background: unset;
+  }
+
+  .relationship-diff-container--hasOne .relationship-diff {
+    min-width: 100%;
+    max-width: fit-content;
+  }
+
+  .relationship-diff-container--hasOne .relationship-diff[data-match-type] {
+    outline: none;
+    background-color: transparent;
+  }
+
+  .relationship-diff-container--hasOne .field-diff-content {
+    padding-block: var(--spacer-2);
+    background: var(--color-bg-secondary);
+  }
+
+  .relationship-diff-container--hasOne .field-diff-content > .html-diff {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:is(
+      :has(.relationship-diff[data-match-type='create']),
+      :has(.relationship-diff[data-match-type='delete'])
+    )::before {
+    content: '';
+    position: absolute;
+    inset: calc(var(--spacer-2) * -1) 0;
+    display: block;
+    z-index: -1;
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:has(.relationship-diff[data-match-type='create'])::before {
+    background-color: var(--diff-create-parent-bg);
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:has(.relationship-diff[data-match-type='delete'])::before {
+    background-color: var(--diff-delete-parent-bg);
+  }
+
+  .relationship-diff-container--hasMany .field-diff-content {
+    background: var(--color-bg-secondary);
+    padding-block: var(--spacer-1);
+
+    .html-diff {
+      display: flex;
+      flex-direction: row;
+      min-width: 0;
+      max-width: unset;
+      flex-wrap: wrap;
+      gap: var(--spacer-1);
+      justify-content: flex-start;
+    }
+
+    .relationship-diff {
+      padding: var(--spacer-1);
+    }
+  }
+
+  .relationship-diff {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    outline: var(--stroke-width-small) solid var(--color-border);
+    outline-offset: calc(var(--stroke-width-small) * -1);
+    background-color: var(--color-bg);
+    position: relative;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    padding: var(--spacer-2) var(--spacer-1);
+    height: min-content;
+
+    &[data-match-type='create'] {
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
+    }
+
+    &[data-match-type='delete'] {
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
+      text-decoration-line: none;
+    }
+  }
+
+  /* Override HTMLDiff generic [data-match-type] styles (specificity 0,4,1 from :not(img)) */
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-2) var(--spacer-1);
+    text-decoration-line: none;
+    color: inherit;
+  }
+
+  /* hasMany pills stay compact at 24px */
+  .relationship-diff-container--hasMany
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .relationship-diff-container--hasMany
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    padding: var(--spacer-1);
+  }
+
+  /* hasOne pills: no padding, field-diff-content provides row height */
+  .relationship-diff-container--hasOne
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .relationship-diff-container--hasOne
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    padding: 0;
+  }
+
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'] {
+    background-color: var(--diff-create-parent-bg);
+    outline-color: var(--diff-create-pill-border);
+  }
+
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    background-color: var(--diff-delete-parent-bg);
+    outline-color: var(--diff-delete-pill-border);
+  }
+
+  .relationship-diff__pill {
+    display: inline-flex;
+    align-items: center;
+    height: var(--spacer-3);
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .relationship-diff[data-match-type='create'] .relationship-diff__pill {
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+  }
+
+  .relationship-diff[data-match-type='delete'] .relationship-diff__pill {
+    background-color: var(--color-bg-danger);
+    color: var(--color-text-oncomponent);
+
+    * {
+      text-decoration-line: none;
+      color: var(--color-text-oncomponent);
+      background-color: transparent;
+    }
+  }
+
+  .relationship-diff__info {
+    padding-inline-end: var(--spacer-1);
+    font-weight: var(--text-body-medium-font-weight);
+    color: var(--color-text);
+    white-space: nowrap;
+  }
+
+  .relationship-diff[data-match-type='create'] .relationship-diff__info {
+    color: var(--diff-create-parent-color);
+  }
+
+  .relationship-diff[data-match-type='delete'] .relationship-diff__info {
+    color: var(--color-text-danger);
+    text-decoration-line: line-through;
+  }
+
+  @media (max-width: 768px) {
+    .relationship-diff-container--hasOne .field-diff-content {
+      padding: 0;
+      background: transparent;
+    }
+
+    .relationship-diff-container--hasOne .field-diff-content > .html-diff {
+      justify-content: center;
+    }
+
+    .relationship-diff-container--hasOne
+      .field-diff-content
+      > .html-diff:has(.relationship-diff[data-match-type='create'])::before,
+    .relationship-diff-container--hasOne
+      .field-diff-content
+      > .html-diff:has(.relationship-diff[data-match-type='delete'])::before {
+      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
+    }
+
+    .relationship-diff-container--hasMany .field-diff-content {
+      padding: 0;
+      background: transparent;
+      border-radius: 0;
+      gap: calc(var(--stroke-width-small) * 2);
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { PayloadRequest, RelationshipField, RelationshipFieldDiffServerComponent, TypeWithID } from 'payload';
+import { type I18nClient } from '@payloadcms/translations';
+import React from 'react';
+import './index.css';
+export type RelationshipValue = {
+    relationTo: string;
+    value: number | string | TypeWithID;
+} | (number | string | TypeWithID);
+export declare const Relationship: RelationshipFieldDiffServerComponent;
+export declare const SingleRelationshipDiff: React.FC<{
+    field: RelationshipField;
+    i18n: I18nClient;
+    locale: string;
+    nestingLevel?: number;
+    parentIsLocalized: boolean;
+    polymorphic: boolean;
+    req: PayloadRequest;
+    valueFrom: RelationshipValue;
+    valueTo: RelationshipValue;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,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,oCA8C1B,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,CA4GA,CAAA"}