@payloadcms/next 3.35.0-internal.b3d367c → 3.35.0

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

@@ -15,11 +15,11 @@ export const Iterable = t0 => {
   const $ = _c(15);
   const {
     baseVersionField,
-    comparisonValue: valueFrom,
+    comparisonValue,
     field,
     locale,
     parentIsLocalized,
-    versionValue: valueTo
+    versionValue
   } = t0;
   const {
     i18n
@@ -30,8 +30,8 @@ export const Iterable = t0 => {
   const {
     config
   } = useConfig();
-  const versionRowCount = Array.isArray(valueTo) ? valueTo.length : 0;
-  const comparisonRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0;
+  const versionRowCount = Array.isArray(versionValue) ? versionValue.length : 0;
+  const comparisonRowCount = Array.isArray(comparisonValue) ? comparisonValue.length : 0;
   const maxRows = Math.max(versionRowCount, comparisonRowCount);
   if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
     throw new Error(`Expected field to be an array or blocks type but got: ${field.type}`);
@@ -52,22 +52,22 @@ export const Iterable = t0 => {
     t1 = $[3];
   }
   let t2;
-  if ($[4] !== baseVersionField || $[5] !== config || $[6] !== field || $[7] !== i18n || $[8] !== maxRows || $[9] !== parentIsLocalized || $[10] !== selectedLocales || $[11] !== t1 || $[12] !== valueFrom || $[13] !== valueTo) {
+  if ($[4] !== baseVersionField || $[5] !== comparisonValue || $[6] !== config || $[7] !== field || $[8] !== i18n || $[9] !== maxRows || $[10] !== parentIsLocalized || $[11] !== selectedLocales || $[12] !== t1 || $[13] !== versionValue) {
     t2 = _jsx("div", {
       className: baseClass,
       children: _jsxs(DiffCollapser, {
+        comparison: comparisonValue,
         field,
         isIterable: true,
         label: t1,
         locales: selectedLocales,
         parentIsLocalized,
-        valueFrom,
-        valueTo,
+        version: versionValue,
         children: [maxRows > 0 && _jsx("div", {
           className: `${baseClass}__rows`,
           children: Array.from(Array(maxRows).keys()).map((row, i) => {
-            const versionRow = valueTo?.[i] || {};
-            const comparisonRow = valueFrom?.[i] || {};
+            const versionRow = versionValue?.[i] || {};
+            const comparisonRow = comparisonValue?.[i] || {};
             const {
               fields,
               versionFields
@@ -84,12 +84,12 @@ export const Iterable = t0 => {
             return _jsx("div", {
               className: `${baseClass}__row`,
               children: _jsx(DiffCollapser, {
+                comparison: comparisonRow,
                 fields,
                 label: rowLabel,
                 locales: selectedLocales,
                 parentIsLocalized: parentIsLocalized || field.localized,
-                valueFrom: comparisonRow,
-                valueTo: versionRow,
+                version: versionRow,
                 children: _jsx(RenderVersionFieldsToDiff, {
                   versionFields
                 })
@@ -105,15 +105,15 @@ export const Iterable = t0 => {
       })
     });
     $[4] = baseVersionField;
-    $[5] = config;
-    $[6] = field;
-    $[7] = i18n;
-    $[8] = maxRows;
-    $[9] = parentIsLocalized;
-    $[10] = selectedLocales;
-    $[11] = t1;
-    $[12] = valueFrom;
-    $[13] = valueTo;
+    $[5] = comparisonValue;
+    $[6] = config;
+    $[7] = field;
+    $[8] = i18n;
+    $[9] = maxRows;
+    $[10] = parentIsLocalized;
+    $[11] = selectedLocales;
+    $[12] = t1;
+    $[13] = versionValue;
     $[14] = t2;
   } else {
     t2 = $[14];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useSelectedLocales","DiffCollapser","RenderVersionFieldsToDiff","getFieldsForRowComparison","baseClass","Iterable","t0","$","baseVersionField","comparisonValue","valueFrom","field","locale","parentIsLocalized","versionValue","valueTo","i18n","selectedLocales","config","versionRowCount","Array","isArray","length","comparisonRowCount","maxRows","Math","max","Error","type","t1","label","_jsxs","children","_jsx","className","t2","isIterable","from","keys","map","row","i","versionRow","comparisonRow","fields","versionFields","rowNumber","String","padStart","rowLabel","locales","localized","t","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 { useConfig, useTranslation } from '@payloadcms/ui'\n\nimport './index.scss'\n\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React from 'react'\n\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 } = useTranslation()\n  const { selectedLocales } = useSelectedLocales()\n  const { config } = useConfig()\n\n  const versionRowCount = Array.isArray(valueTo) ? valueTo.length : 0\n  const comparisonRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0\n  const maxRows = Math.max(versionRowCount, comparisonRowCount)\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  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(Array(maxRows).keys()).map((row, i) => {\n              const versionRow = valueTo?.[i] || {}\n              const comparisonRow = valueFrom?.[i] || {}\n\n              const { fields, versionFields } = getFieldsForRowComparison({\n                baseVersionField,\n                comparisonRow,\n                config,\n                field,\n                row: i,\n                versionRow,\n              })\n\n              const rowNumber = String(i + 1).padStart(2, '0')\n              const rowLabel = fieldIsArrayType(field) ? `Item ${rowNumber}` : `Block ${rowNumber}`\n\n              return (\n                <div className={`${baseClass}__row`} key={i}>\n                  <DiffCollapser\n                    fields={fields}\n                    label={rowLabel}\n                    locales={selectedLocales}\n                    parentIsLocalized={parentIsLocalized || field.localized}\n                    valueFrom={comparisonRow}\n                    valueTo={versionRow}\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":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useSelectedLocales","DiffCollapser","RenderVersionFieldsToDiff","getFieldsForRowComparison","baseClass","Iterable","t0","$","baseVersionField","comparisonValue","field","locale","parentIsLocalized","versionValue","i18n","selectedLocales","config","versionRowCount","Array","isArray","length","comparisonRowCount","maxRows","Math","max","Error","type","t1","label","_jsxs","children","_jsx","className","t2","comparison","isIterable","version","from","keys","map","row","i","versionRow","comparisonRow","fields","versionFields","rowNumber","String","padStart","rowLabel","locales","localized","t","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 { useConfig, useTranslation } from '@payloadcms/ui'\n\nimport './index.scss'\n\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React from 'react'\n\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,\n  field,\n  locale,\n  parentIsLocalized,\n  versionValue,\n}) => {\n  const { i18n } = useTranslation()\n  const { selectedLocales } = useSelectedLocales()\n  const { config } = useConfig()\n\n  const versionRowCount = Array.isArray(versionValue) ? versionValue.length : 0\n  const comparisonRowCount = Array.isArray(comparisonValue) ? comparisonValue.length : 0\n  const maxRows = Math.max(versionRowCount, comparisonRowCount)\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  return (\n    <div className={baseClass}>\n      <DiffCollapser\n        comparison={comparisonValue}\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        version={versionValue}\n      >\n        {maxRows > 0 && (\n          <div className={`${baseClass}__rows`}>\n            {Array.from(Array(maxRows).keys()).map((row, i) => {\n              const versionRow = versionValue?.[i] || {}\n              const comparisonRow = comparisonValue?.[i] || {}\n\n              const { fields, versionFields } = getFieldsForRowComparison({\n                baseVersionField,\n                comparisonRow,\n                config,\n                field,\n                row: i,\n                versionRow,\n              })\n\n              const rowNumber = String(i + 1).padStart(2, '0')\n              const rowLabel = fieldIsArrayType(field) ? `Item ${rowNumber}` : `Block ${rowNumber}`\n\n              return (\n                <div className={`${baseClass}__row`} key={i}>\n                  <DiffCollapser\n                    comparison={comparisonRow}\n                    fields={fields}\n                    label={rowLabel}\n                    locales={selectedLocales}\n                    parentIsLocalized={parentIsLocalized || field.localized}\n                    version={versionRow}\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":"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","ignoreList":[]}

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

@@ -2,8 +2,7 @@
   .iterable-diff {
     &__locale-label {
       background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
-      padding: calc(var(--base) * 0.2);
+      padding: calc(var(--base) * 0.25);
       // border-radius: $style-radius-m;
       [dir='ltr'] & {
         margin-right: calc(var(--base) * 0.25);
@@ -19,7 +18,10 @@
     }
 
     &__no-rows {
-      color: var(--theme-elevation-400);
+      font-family: monospace;
+      background-color: var(--theme-elevation-50);
+      // padding: base(0.125) calc(var(--base) * 0.5);
+      // margin: base(0.125) 0;
     }
   }
 }

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":"AACA,OAAO,KAAK,EAIV,oCAAoC,EACrC,MAAM,SAAS,CAAA;AAWhB,OAAO,cAAc,CAAA;AAuFrB,eAAO,MAAM,YAAY,EAAE,oCAqE1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,oCAAoC,EACrC,MAAM,SAAS,CAAA;AAQhB,OAAO,cAAc,CAAA;AAwFrB,eAAO,MAAM,YAAY,EAAE,oCAkF1B,CAAA"}

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

@@ -1,10 +1,13 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldDiffContainer, getHTMLDiffComponents, useConfig, useTranslation } from '@payloadcms/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui';
 import { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized } from 'payload/shared';
 import React from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+import { diffStyles } from '../styles.js';
 const baseClass = 'relationship-diff';
 const generateLabelFromValue = (collections, field, locale, value, config, parentIsLocalized) => {
   if (Array.isArray(value)) {
@@ -59,14 +62,13 @@ const generateLabelFromValue = (collections, field, locale, value, config, paren
   return valueToReturn;
 };
 export const Relationship = t0 => {
-  const $ = _c(7);
+  const $ = _c(12);
   const {
-    comparisonValue: valueFrom,
+    comparisonValue,
     field,
     locale,
-    nestingLevel,
     parentIsLocalized,
-    versionValue: valueTo
+    versionValue
   } = t0;
   const {
     i18n
@@ -81,55 +83,62 @@ export const Relationship = t0 => {
   const {
     collections
   } = t1;
-  let renderedValueTo = placeholder;
-  let renderedValueFrom = placeholder;
-  if (valueTo) {
-    if ("hasMany" in field && field.hasMany && Array.isArray(valueTo)) {
-      renderedValueTo = valueTo.map(val => generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized)).join(", ") || placeholder;
-    } else {
-      renderedValueTo = generateLabelFromValue(collections, field, locale, valueTo, config, parentIsLocalized) || placeholder;
+  let t2;
+  if ($[0] !== collections || $[1] !== comparisonValue || $[2] !== config || $[3] !== field || $[4] !== i18n || $[5] !== locale || $[6] !== parentIsLocalized || $[7] !== placeholder || $[8] !== versionValue) {
+    let versionToRender = placeholder;
+    let comparisonToRender = placeholder;
+    if (versionValue) {
+      if ("hasMany" in field && field.hasMany && Array.isArray(versionValue)) {
+        versionToRender = versionValue.map(val => generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized)).join(", ") || placeholder;
+      } else {
+        versionToRender = generateLabelFromValue(collections, field, locale, versionValue, config, parentIsLocalized) || placeholder;
+      }
     }
-  }
-  if (valueFrom) {
-    if ("hasMany" in field && field.hasMany && Array.isArray(valueFrom)) {
-      renderedValueFrom = valueFrom.map(val_0 => generateLabelFromValue(collections, field, locale, val_0, config, parentIsLocalized)).join(", ") || placeholder;
+    if (comparisonValue) {
+      if ("hasMany" in field && field.hasMany && Array.isArray(comparisonValue)) {
+        comparisonToRender = comparisonValue.map(val_0 => generateLabelFromValue(collections, field, locale, val_0, config, parentIsLocalized)).join(", ") || placeholder;
+      } else {
+        comparisonToRender = generateLabelFromValue(collections, field, locale, comparisonValue, config, parentIsLocalized) || placeholder;
+      }
+    }
+    const label = "label" in field && typeof field.label !== "boolean" && typeof field.label !== "function" ? field.label : "";
+    let t3;
+    if ($[10] !== locale) {
+      t3 = locale && _jsx("span", {
+        className: `${baseClass}__locale-label`,
+        children: locale
+      });
+      $[10] = locale;
+      $[11] = t3;
     } else {
-      renderedValueFrom = generateLabelFromValue(collections, field, locale, valueFrom, config, parentIsLocalized) || placeholder;
+      t3 = $[11];
     }
-  }
-  const t2 = "<p>" + renderedValueFrom + "</p>";
-  const t3 = "<p>" + renderedValueTo + "</p>";
-  let t4;
-  if ($[0] !== field.label || $[1] !== i18n || $[2] !== locale || $[3] !== nestingLevel || $[4] !== t2 || $[5] !== t3) {
-    const {
-      From,
-      To
-    } = getHTMLDiffComponents({
-      fromHTML: t2,
-      toHTML: t3,
-      tokenizeByCharacter: false
-    });
-    t4 = _jsx(FieldDiffContainer, {
+    t2 = _jsxs("div", {
       className: baseClass,
-      From,
-      i18n,
-      label: {
-        label: field.label,
-        locale
-      },
-      nestingLevel,
-      To
+      children: [_jsxs(FieldDiffLabel, {
+        children: [t3, getTranslation(label, i18n)]
+      }), _jsx(ReactDiffViewer, {
+        hideLineNumbers: true,
+        newValue: versionToRender,
+        oldValue: comparisonToRender,
+        showDiffOnly: false,
+        splitView: true,
+        styles: diffStyles
+      })]
     });
-    $[0] = field.label;
-    $[1] = i18n;
-    $[2] = locale;
-    $[3] = nestingLevel;
-    $[4] = t2;
-    $[5] = t3;
-    $[6] = t4;
+    $[0] = collections;
+    $[1] = comparisonValue;
+    $[2] = config;
+    $[3] = field;
+    $[4] = i18n;
+    $[5] = locale;
+    $[6] = parentIsLocalized;
+    $[7] = placeholder;
+    $[8] = versionValue;
+    $[9] = t2;
   } else {
-    t4 = $[6];
+    t2 = $[9];
   }
-  return t4;
+  return t2;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","FieldDiffContainer","getHTMLDiffComponents","useConfig","useTranslation","fieldAffectsData","fieldIsPresentationalOnly","fieldShouldBeLocalized","React","baseClass","generateLabelFromValue","collections","field","locale","value","config","parentIsLocalized","Array","isArray","map","v","filter","Boolean","join","relatedDoc","valueToReturn","relationTo","undefined","String","relatedCollection","find","slug","useAsTitle","admin","useAsTitleField","fields","f","name","titleFieldIsLocalized","id","JSON","stringify","Relationship","t0","$","comparisonValue","valueFrom","nestingLevel","versionValue","valueTo","i18n","placeholder","t","t1","renderedValueTo","renderedValueFrom","hasMany","val","val_0","t2","t3","t4","label","From","To","fromHTML","toHTML","tokenizeByCharacter","_jsx","className"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  ClientConfig,\n  ClientField,\n  RelationshipFieldDiffClientComponent,\n} from 'payload'\n\nimport {\n  FieldDiffContainer,\n  getHTMLDiffComponents,\n  useConfig,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'relationship-diff'\n\ntype RelationshipValue = Record<string, any>\n\nconst generateLabelFromValue = (\n  collections: ClientCollectionConfig[],\n  field: ClientField,\n  locale: string,\n  value: { relationTo: string; value: RelationshipValue } | RelationshipValue,\n  config: ClientConfig,\n  parentIsLocalized: boolean,\n): string => {\n  if (Array.isArray(value)) {\n    return value\n      .map((v) => generateLabelFromValue(collections, field, locale, v, config, parentIsLocalized))\n      .filter(Boolean) // Filters out any undefined or empty values\n      .join(', ')\n  }\n\n  let relatedDoc: RelationshipValue\n  let valueToReturn: RelationshipValue | string = ''\n\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n\n  if (value === null || typeof value === 'undefined') {\n    // eslint-disable-next-line @typescript-eslint/no-base-to-string -- We want to return a string specifilly for null and undefined\n    return String(value)\n  }\n\n  if (typeof value === 'object' && 'relationTo' in value) {\n    relatedDoc = value.value\n  } else {\n    // Non-polymorphic relationship\n    relatedDoc = value\n  }\n\n  const relatedCollection = relationTo\n    ? collections.find(\n        (c) =>\n          c.slug ===\n          (typeof value === 'object' && 'relationTo' in value ? value.relationTo : relationTo),\n      )\n    : null\n\n  if (relatedCollection) {\n    const useAsTitle = relatedCollection?.admin?.useAsTitle\n    const useAsTitleField = relatedCollection.fields.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?.id !== 'undefined') {\n      valueToReturn = relatedDoc.id\n    } else {\n      valueToReturn = relatedDoc\n    }\n\n    if (typeof valueToReturn === 'object' && titleFieldIsLocalized && valueToReturn?.[locale]) {\n      valueToReturn = valueToReturn[locale]\n    }\n  } else if (relatedDoc) {\n    // Handle non-polymorphic `hasMany` relationships or fallback\n    if (typeof relatedDoc?.id !== 'undefined') {\n      valueToReturn = String(relatedDoc.id)\n    } else {\n      valueToReturn = relatedDoc\n    }\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\nexport const Relationship: RelationshipFieldDiffClientComponent = ({\n  comparisonValue: valueFrom,\n  field,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  versionValue: valueTo,\n}) => {\n  const { i18n } = useTranslation()\n  const { config } = useConfig()\n\n  const placeholder = `[${i18n.t('general:noValue')}]`\n\n  const {\n    config: { collections },\n  } = useConfig()\n\n  let renderedValueTo: string | undefined = placeholder\n  let renderedValueFrom: string | undefined = placeholder\n\n  if (valueTo) {\n    if ('hasMany' in field && field.hasMany && Array.isArray(valueTo)) {\n      renderedValueTo =\n        valueTo\n          .map((val) =>\n            generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized),\n          )\n          .join(', ') || placeholder\n    } else {\n      renderedValueTo =\n        generateLabelFromValue(collections, field, locale, valueTo, config, parentIsLocalized) ||\n        placeholder\n    }\n  }\n\n  if (valueFrom) {\n    if ('hasMany' in field && field.hasMany && Array.isArray(valueFrom)) {\n      renderedValueFrom =\n        valueFrom\n          .map((val) =>\n            generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized),\n          )\n          .join(', ') || placeholder\n    } else {\n      renderedValueFrom =\n        generateLabelFromValue(collections, field, locale, valueFrom, config, parentIsLocalized) ||\n        placeholder\n    }\n  }\n\n  const { From, To } = getHTMLDiffComponents({\n    fromHTML: '<p>' + renderedValueFrom + '</p>',\n    toHTML: '<p>' + renderedValueTo + '</p>',\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","FieldDiffLabel","useConfig","useTranslation","fieldAffectsData","fieldIsPresentationalOnly","fieldShouldBeLocalized","React","ReactDiffViewer","diffStyles","baseClass","generateLabelFromValue","collections","field","locale","value","config","parentIsLocalized","Array","isArray","map","v","filter","Boolean","join","relatedDoc","valueToReturn","relationTo","undefined","String","relatedCollection","find","slug","useAsTitle","admin","useAsTitleField","fields","f","name","titleFieldIsLocalized","id","JSON","stringify","Relationship","t0","$","comparisonValue","versionValue","i18n","placeholder","t","t1","t2","versionToRender","comparisonToRender","hasMany","val","val_0","label","t3","_jsx","className","children","_jsxs","hideLineNumbers","newValue","oldValue","showDiffOnly","splitView","styles"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  ClientConfig,\n  ClientField,\n  RelationshipFieldDiffClientComponent,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized } from 'payload/shared'\nimport React from 'react'\nimport ReactDiffViewer from 'react-diff-viewer-continued'\n\nimport './index.scss'\nimport { diffStyles } from '../styles.js'\n\nconst baseClass = 'relationship-diff'\n\ntype RelationshipValue = Record<string, any>\n\nconst generateLabelFromValue = (\n  collections: ClientCollectionConfig[],\n  field: ClientField,\n  locale: string,\n  value: { relationTo: string; value: RelationshipValue } | RelationshipValue,\n  config: ClientConfig,\n  parentIsLocalized: boolean,\n): string => {\n  if (Array.isArray(value)) {\n    return value\n      .map((v) => generateLabelFromValue(collections, field, locale, v, config, parentIsLocalized))\n      .filter(Boolean) // Filters out any undefined or empty values\n      .join(', ')\n  }\n\n  let relatedDoc: RelationshipValue\n  let valueToReturn: RelationshipValue | string = ''\n\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n\n  if (value === null || typeof value === 'undefined') {\n    // eslint-disable-next-line @typescript-eslint/no-base-to-string -- We want to return a string specifilly for null and undefined\n    return String(value)\n  }\n\n  if (typeof value === 'object' && 'relationTo' in value) {\n    relatedDoc = value.value\n  } else {\n    // Non-polymorphic relationship\n    relatedDoc = value\n  }\n\n  const relatedCollection = relationTo\n    ? collections.find(\n        (c) =>\n          c.slug ===\n          (typeof value === 'object' && 'relationTo' in value ? value.relationTo : relationTo),\n      )\n    : null\n\n  if (relatedCollection) {\n    const useAsTitle = relatedCollection?.admin?.useAsTitle\n    const useAsTitleField = relatedCollection.fields.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?.id !== 'undefined') {\n      valueToReturn = relatedDoc.id\n    } else {\n      valueToReturn = relatedDoc\n    }\n\n    if (typeof valueToReturn === 'object' && titleFieldIsLocalized && valueToReturn?.[locale]) {\n      valueToReturn = valueToReturn[locale]\n    }\n  } else if (relatedDoc) {\n    // Handle non-polymorphic `hasMany` relationships or fallback\n    if (typeof relatedDoc?.id !== 'undefined') {\n      valueToReturn = String(relatedDoc.id)\n    } else {\n      valueToReturn = relatedDoc\n    }\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\nexport const Relationship: RelationshipFieldDiffClientComponent = ({\n  comparisonValue,\n  field,\n  locale,\n  parentIsLocalized,\n  versionValue,\n}) => {\n  const { i18n } = useTranslation()\n  const { config } = useConfig()\n\n  const placeholder = `[${i18n.t('general:noValue')}]`\n\n  const {\n    config: { collections },\n  } = useConfig()\n\n  let versionToRender: string | undefined = placeholder\n  let comparisonToRender: string | undefined = placeholder\n\n  if (versionValue) {\n    if ('hasMany' in field && field.hasMany && Array.isArray(versionValue)) {\n      versionToRender =\n        versionValue\n          .map((val) =>\n            generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized),\n          )\n          .join(', ') || placeholder\n    } else {\n      versionToRender =\n        generateLabelFromValue(\n          collections,\n          field,\n          locale,\n          versionValue,\n          config,\n          parentIsLocalized,\n        ) || placeholder\n    }\n  }\n\n  if (comparisonValue) {\n    if ('hasMany' in field && field.hasMany && Array.isArray(comparisonValue)) {\n      comparisonToRender =\n        comparisonValue\n          .map((val) =>\n            generateLabelFromValue(collections, field, locale, val, config, parentIsLocalized),\n          )\n          .join(', ') || placeholder\n    } else {\n      comparisonToRender =\n        generateLabelFromValue(\n          collections,\n          field,\n          locale,\n          comparisonValue,\n          config,\n          parentIsLocalized,\n        ) || placeholder\n    }\n  }\n\n  const label =\n    'label' in field && typeof field.label !== 'boolean' && typeof field.label !== 'function'\n      ? field.label\n      : ''\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {getTranslation(label, i18n)}\n      </FieldDiffLabel>\n      <ReactDiffViewer\n        hideLineNumbers\n        newValue={versionToRender}\n        oldValue={comparisonToRender}\n        showDiffOnly={false}\n        splitView\n        styles={diffStyles}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,15 @@
 @layer payload-default {
   .relationship-diff {
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
+    }
   }
 }

package/dist/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const DiffViewer: React.FC<{
+    comparisonToRender: string;
+    diffMethod: string;
+    diffStyles: any;
+    placeholder: string;
+    versionToRender: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,GAAG,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;CACxB,CAYA,CAAA"}

package/dist/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+export const DiffViewer = ({
+  comparisonToRender,
+  diffMethod,
+  diffStyles,
+  placeholder,
+  versionToRender
+}) => {
+  return /*#__PURE__*/_jsx(ReactDiffViewer, {
+    compareMethod: DiffMethod[diffMethod],
+    hideLineNumbers: true,
+    newValue: typeof versionToRender !== 'undefined' ? versionToRender : placeholder,
+    oldValue: comparisonToRender,
+    showDiffOnly: false,
+    splitView: true,
+    styles: diffStyles
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ReactDiffViewer","DiffMethod","DiffViewer","comparisonToRender","diffMethod","diffStyles","placeholder","versionToRender","_jsx","compareMethod","hideLineNumbers","newValue","oldValue","showDiffOnly","splitView","styles"],"sources":["../../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'\n\nexport const DiffViewer: React.FC<{\n  comparisonToRender: string\n  diffMethod: string\n  diffStyles: any\n  placeholder: string\n  versionToRender: string\n}> = ({ comparisonToRender, diffMethod, diffStyles, placeholder, versionToRender }) => {\n  return (\n    <ReactDiffViewer\n      compareMethod={DiffMethod[diffMethod]}\n      hideLineNumbers\n      newValue={typeof versionToRender !== 'undefined' ? versionToRender : placeholder}\n      oldValue={comparisonToRender}\n      showDiffOnly={false}\n      splitView\n      styles={diffStyles}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAClB,OAAOC,eAAA,IAAmBC,UAAU,QAAQ;AAE5C,OAAO,MAAMC,UAAA,GAMRA,CAAC;EAAEC,kBAAkB;EAAEC,UAAU;EAAEC,UAAU;EAAEC,WAAW;EAAEC;AAAe,CAAE;EAChF,oBACEC,IAAA,CAACR,eAAA;IACCS,aAAA,EAAeR,UAAU,CAACG,UAAA,CAAW;IACrCM,eAAe;IACfC,QAAA,EAAU,OAAOJ,eAAA,KAAoB,cAAcA,eAAA,GAAkBD,WAAA;IACrEM,QAAA,EAAUT,kBAAA;IACVU,YAAA,EAAc;IACdC,SAAS;IACTC,MAAA,EAAQV;;AAGd","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAMlF,OAAO,cAAc,CAAA;AAmDrB,eAAO,MAAM,MAAM,EAAE,8BA6DpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAMlF,OAAO,cAAc,CAAA;AAqDrB,eAAO,MAAM,MAAM,EAAE,8BAwDpB,CAAA"}

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

@@ -1,10 +1,12 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { FieldDiffContainer, getHTMLDiffComponents, useTranslation } from '@payloadcms/ui';
+import { FieldDiffLabel, useTranslation } from '@payloadcms/ui';
 import React from 'react';
+import { diffStyles } from '../styles.js';
+import { DiffViewer } from './DiffViewer/index.js';
 const baseClass = 'select-diff';
 const getOptionsToRender = (value, options, hasMany) => {
   if (hasMany && Array.isArray(value)) {
@@ -35,57 +37,61 @@ const getTranslatedOptions = (options, i18n) => {
   return typeof translatedLabel === 'string' ? translatedLabel : options.value;
 };
 export const Select = t0 => {
-  const $ = _c(7);
+  const $ = _c(11);
   const {
-    comparisonValue: valueFrom,
+    comparisonValue,
+    diffMethod,
     field,
     locale,
-    nestingLevel,
-    versionValue: valueTo
+    versionValue
   } = t0;
   const {
     i18n
   } = useTranslation();
   let placeholder = "";
-  if (valueTo == valueFrom) {
+  if (versionValue == comparisonValue) {
     placeholder = `[${i18n.t("general:noValue")}]`;
   }
   const options = "options" in field && field.options;
-  const renderedValueFrom = typeof valueFrom !== "undefined" ? getTranslatedOptions(getOptionsToRender(typeof valueFrom === "string" ? valueFrom : JSON.stringify(valueFrom), options, field.hasMany), i18n) : placeholder;
-  const renderedValueTo = typeof valueTo !== "undefined" ? getTranslatedOptions(getOptionsToRender(typeof valueTo === "string" ? valueTo : JSON.stringify(valueTo), options, field.hasMany), i18n) : placeholder;
-  const t1 = "<p>" + renderedValueFrom + "</p>";
-  const t2 = "<p>" + renderedValueTo + "</p>";
-  let t3;
-  if ($[0] !== field.label || $[1] !== i18n || $[2] !== locale || $[3] !== nestingLevel || $[4] !== t1 || $[5] !== t2) {
-    const {
-      From,
-      To
-    } = getHTMLDiffComponents({
-      fromHTML: t1,
-      toHTML: t2,
-      tokenizeByCharacter: true
-    });
-    t3 = _jsx(FieldDiffContainer, {
+  let t1;
+  if ($[0] !== comparisonValue || $[1] !== diffMethod || $[2] !== field || $[3] !== i18n || $[4] !== locale || $[5] !== options || $[6] !== placeholder || $[7] !== versionValue) {
+    const comparisonToRender = typeof comparisonValue !== "undefined" ? getTranslatedOptions(getOptionsToRender(typeof comparisonValue === "string" ? comparisonValue : JSON.stringify(comparisonValue), options, field.hasMany), i18n) : placeholder;
+    const versionToRender = typeof versionValue !== "undefined" ? getTranslatedOptions(getOptionsToRender(typeof versionValue === "string" ? versionValue : JSON.stringify(versionValue), options, field.hasMany), i18n) : placeholder;
+    let t2;
+    if ($[9] !== locale) {
+      t2 = locale && _jsx("span", {
+        className: `${baseClass}__locale-label`,
+        children: locale
+      });
+      $[9] = locale;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    t1 = _jsxs("div", {
       className: baseClass,
-      From,
-      i18n,
-      label: {
-        label: field.label,
-        locale
-      },
-      nestingLevel,
-      To
+      children: [_jsxs(FieldDiffLabel, {
+        children: [t2, "label" in field && getTranslation(field.label || "", i18n)]
+      }), _jsx(DiffViewer, {
+        comparisonToRender,
+        diffMethod,
+        diffStyles,
+        placeholder,
+        versionToRender
+      })]
     });
-    $[0] = field.label;
-    $[1] = i18n;
-    $[2] = locale;
-    $[3] = nestingLevel;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
+    $[0] = comparisonValue;
+    $[1] = diffMethod;
+    $[2] = field;
+    $[3] = i18n;
+    $[4] = locale;
+    $[5] = options;
+    $[6] = placeholder;
+    $[7] = versionValue;
+    $[8] = t1;
   } else {
-    t3 = $[6];
+    t1 = $[8];
   }
-  return t3;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","FieldDiffContainer","getHTMLDiffComponents","useTranslation","React","baseClass","getOptionsToRender","value","options","hasMany","Array","isArray","map","val","find","option","String","getTranslatedOptions","i18n","translatedLabel","label","join","Select","t0","$","comparisonValue","valueFrom","field","locale","nestingLevel","versionValue","valueTo","placeholder","t","renderedValueFrom","JSON","stringify","renderedValueTo","t1","t2","t3","From","To","fromHTML","toHTML","tokenizeByCharacter","_jsx","className"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { Option, SelectField, SelectFieldDiffClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDiffContainer, getHTMLDiffComponents, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'select-diff'\n\nconst getOptionsToRender = (\n  value: string,\n  options: SelectField['options'],\n  hasMany: boolean,\n): Option | Option[] => {\n  if (hasMany && Array.isArray(value)) {\n    return value.map(\n      (val) =>\n        options.find((option) => (typeof option === 'string' ? option : option.value) === val) ||\n        String(val),\n    )\n  }\n  return (\n    options.find((option) => (typeof option === 'string' ? option : option.value) === value) ||\n    String(value)\n  )\n}\n\n/**\n * Translates option labels while ensuring they are strings.\n * If `options.label` is a JSX element, it falls back to `options.value` because `DiffViewer`\n * expects all values to be strings.\n */\nconst getTranslatedOptions = (options: Option | Option[], i18n: I18nClient): string => {\n  if (Array.isArray(options)) {\n    return options\n      .map((option) => {\n        if (typeof option === 'string') {\n          return option\n        }\n        const translatedLabel = getTranslation(option.label, i18n)\n\n        // Ensure the result is a string, otherwise use option.value\n        return typeof translatedLabel === 'string' ? translatedLabel : option.value\n      })\n      .join(', ')\n  }\n\n  if (typeof options === 'string') {\n    return options\n  }\n\n  const translatedLabel = getTranslation(options.label, i18n)\n\n  return typeof translatedLabel === 'string' ? translatedLabel : options.value\n}\n\nexport const Select: SelectFieldDiffClientComponent = ({\n  comparisonValue: valueFrom,\n  diffMethod,\n  field,\n  locale,\n  nestingLevel,\n  versionValue: valueTo,\n}) => {\n  const { i18n } = useTranslation()\n\n  let placeholder = ''\n\n  if (valueTo == valueFrom) {\n    placeholder = `[${i18n.t('general:noValue')}]`\n  }\n\n  const options = 'options' in field && field.options\n\n  const renderedValueFrom =\n    typeof valueFrom !== 'undefined'\n      ? getTranslatedOptions(\n          getOptionsToRender(\n            typeof valueFrom === 'string' ? valueFrom : JSON.stringify(valueFrom),\n            options,\n            field.hasMany,\n          ),\n          i18n,\n        )\n      : placeholder\n\n  const renderedValueTo =\n    typeof valueTo !== 'undefined'\n      ? getTranslatedOptions(\n          getOptionsToRender(\n            typeof valueTo === 'string' ? valueTo : JSON.stringify(valueTo),\n            options,\n            field.hasMany,\n          ),\n          i18n,\n        )\n      : placeholder\n\n  const { From, To } = getHTMLDiffComponents({\n    fromHTML: '<p>' + renderedValueFrom + '</p>',\n    toHTML: '<p>' + renderedValueTo + '</p>',\n    tokenizeByCharacter: true,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","FieldDiffLabel","useTranslation","React","diffStyles","DiffViewer","baseClass","getOptionsToRender","value","options","hasMany","Array","isArray","map","val","find","option","String","getTranslatedOptions","i18n","translatedLabel","label","join","Select","t0","$","comparisonValue","diffMethod","field","locale","versionValue","placeholder","t","t1","comparisonToRender","JSON","stringify","versionToRender","t2","_jsx","className","children","_jsxs"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { Option, SelectField, SelectFieldDiffClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDiffLabel, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.scss'\nimport { diffStyles } from '../styles.js'\nimport { DiffViewer } from './DiffViewer/index.js'\n\nconst baseClass = 'select-diff'\n\nconst getOptionsToRender = (\n  value: string,\n  options: SelectField['options'],\n  hasMany: boolean,\n): Option | Option[] => {\n  if (hasMany && Array.isArray(value)) {\n    return value.map(\n      (val) =>\n        options.find((option) => (typeof option === 'string' ? option : option.value) === val) ||\n        String(val),\n    )\n  }\n  return (\n    options.find((option) => (typeof option === 'string' ? option : option.value) === value) ||\n    String(value)\n  )\n}\n\n/**\n * Translates option labels while ensuring they are strings.\n * If `options.label` is a JSX element, it falls back to `options.value` because `DiffViewer`\n * expects all values to be strings.\n */\nconst getTranslatedOptions = (options: Option | Option[], i18n: I18nClient): string => {\n  if (Array.isArray(options)) {\n    return options\n      .map((option) => {\n        if (typeof option === 'string') {\n          return option\n        }\n        const translatedLabel = getTranslation(option.label, i18n)\n\n        // Ensure the result is a string, otherwise use option.value\n        return typeof translatedLabel === 'string' ? translatedLabel : option.value\n      })\n      .join(', ')\n  }\n\n  if (typeof options === 'string') {\n    return options\n  }\n\n  const translatedLabel = getTranslation(options.label, i18n)\n\n  return typeof translatedLabel === 'string' ? translatedLabel : options.value\n}\n\nexport const Select: SelectFieldDiffClientComponent = ({\n  comparisonValue,\n  diffMethod,\n  field,\n  locale,\n  versionValue,\n}) => {\n  const { i18n } = useTranslation()\n\n  let placeholder = ''\n\n  if (versionValue == comparisonValue) {\n    placeholder = `[${i18n.t('general:noValue')}]`\n  }\n\n  const options = 'options' in field && field.options\n\n  const comparisonToRender =\n    typeof comparisonValue !== 'undefined'\n      ? getTranslatedOptions(\n          getOptionsToRender(\n            typeof comparisonValue === 'string' ? comparisonValue : JSON.stringify(comparisonValue),\n            options,\n            field.hasMany,\n          ),\n          i18n,\n        )\n      : placeholder\n\n  const versionToRender =\n    typeof versionValue !== 'undefined'\n      ? getTranslatedOptions(\n          getOptionsToRender(\n            typeof versionValue === 'string' ? versionValue : JSON.stringify(versionValue),\n            options,\n            field.hasMany,\n          ),\n          i18n,\n        )\n      : placeholder\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {'label' in field && getTranslation(field.label || '', i18n)}\n      </FieldDiffLabel>\n      <DiffViewer\n        comparisonToRender={comparisonToRender}\n        diffMethod={diffMethod}\n        diffStyles={diffStyles}\n        placeholder={placeholder}\n        versionToRender={versionToRender}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/fields/Select/index.scss

@@ -1,4 +1,15 @@
 @layer payload-default {
   .select-diff {
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,4BAA4B,EAE7B,MAAM,SAAS,CAAA;AAMhB,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,IAAI,EAAE,4BAqDlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,4BAA4B,EAE7B,MAAM,SAAS,CAAA;AAMhB,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,IAAI,EAAE,4BAsDlB,CAAA"}