@payloadcms/next 3.0.0-canary.6659da8 → 3.0.0-canary.67aae47

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { Props } from '../types.js'\n\nimport Label from '../../Label/index.js'\nimport { diffStyles } from '../styles.js'\nimport { DiffViewer } from './DiffViewer/index.js'\nimport './index.scss'\n\nconst baseClass = 'text-diff'\n\nconst Text: React.FC<Props> = ({\n  comparison,\n  diffMethod,\n  field,\n  i18n,\n  isRichText = false,\n  locale,\n  version,\n}) => {\n  let placeholder = ''\n\n  if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]`\n\n  let versionToRender = version\n  let comparisonToRender = comparison\n\n  if (isRichText) {\n    if (typeof version === 'object') versionToRender = JSON.stringify(version, null, 2)\n    if (typeof comparison === 'object') comparisonToRender = JSON.stringify(comparison, null, 2)\n  }\n\n  return (\n    <div className={baseClass}>\n      <Label>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {'label' in field.fieldComponentProps &&\n          typeof field.fieldComponentProps.label !== 'function' &&\n          getTranslation(field.fieldComponentProps.label || '', i18n)}\n      </Label>\n      <DiffViewer\n        comparisonToRender={comparisonToRender}\n        diffMethod={diffMethod}\n        diffStyles={diffStyles}\n        placeholder={placeholder}\n        versionToRender={versionToRender}\n      />\n    </div>\n  )\n}\n\nexport default Text\n"],"names":["getTranslation","React","Label","diffStyles","DiffViewer","baseClass","Text","comparison","diffMethod","field","i18n","isRichText","locale","version","placeholder","t","versionToRender","comparisonToRender","JSON","stringify","div","className","span","fieldComponentProps","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,OAAOC,WAAW,uBAAsB;AACxC,SAASC,UAAU,QAAQ,eAAc;AACzC,SAASC,UAAU,QAAQ,wBAAuB;AAGlD,MAAMC,YAAY;AAElB,MAAMC,OAAwB,CAAC,EAC7BC,UAAU,EACVC,UAAU,EACVC,KAAK,EACLC,IAAI,EACJC,aAAa,KAAK,EAClBC,MAAM,EACNC,OAAO,EACR;IACC,IAAIC,cAAc;IAElB,IAAID,YAAYN,YAAYO,cAAc,CAAC,CAAC,EAAEJ,KAAKK,CAAC,CAAC,mBAAmB,CAAC,CAAC;IAE1E,IAAIC,kBAAkBH;IACtB,IAAII,qBAAqBV;IAEzB,IAAII,YAAY;QACd,IAAI,OAAOE,YAAY,UAAUG,kBAAkBE,KAAKC,SAAS,CAACN,SAAS,MAAM;QACjF,IAAI,OAAON,eAAe,UAAUU,qBAAqBC,KAAKC,SAAS,CAACZ,YAAY,MAAM;IAC5F;IAEA,qBACE,MAACa;QAAIC,WAAWhB;;0BACd,MAACH;;oBACEU,wBAAU,KAACU;wBAAKD,WAAW,CAAC,EAAEhB,UAAU,cAAc,CAAC;kCAAGO;;oBAC1D,WAAWH,MAAMc,mBAAmB,IACnC,OAAOd,MAAMc,mBAAmB,CAACC,KAAK,KAAK,cAC3CxB,eAAeS,MAAMc,mBAAmB,CAACC,KAAK,IAAI,IAAId;;;0BAE1D,KAACN;gBACCa,oBAAoBA;gBACpBT,YAAYA;gBACZL,YAAYA;gBACZW,aAAaA;gBACbE,iBAAiBA;;;;AAIzB;AAEA,eAAeV,KAAI"}
+{"version":3,"file":"index.js","names":["getTranslation","React","Label","diffStyles","DiffViewer","baseClass","Text","comparison","diffMethod","field","i18n","isRichText","locale","version","placeholder","t","versionToRender","comparisonToRender","JSON","stringify","_jsxs","className","_jsx","label"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { DiffComponentProps } from '../types.js'\n\nimport Label from '../../Label/index.js'\nimport { diffStyles } from '../styles.js'\nimport { DiffViewer } from './DiffViewer/index.js'\nimport './index.scss'\n\nconst baseClass = 'text-diff'\n\nconst Text: React.FC<DiffComponentProps<TextFieldClient>> = ({\n  comparison,\n  diffMethod,\n  field,\n  i18n,\n  isRichText = false,\n  locale,\n  version,\n}) => {\n  let placeholder = ''\n\n  if (version === comparison) {\n    placeholder = `[${i18n.t('general:noValue')}]`\n  }\n\n  let versionToRender = version\n  let comparisonToRender = comparison\n\n  if (isRichText) {\n    if (typeof version === 'object') {\n      versionToRender = JSON.stringify(version, null, 2)\n    }\n    if (typeof comparison === 'object') {\n      comparisonToRender = JSON.stringify(comparison, null, 2)\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <Label>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {'label' in field &&\n          typeof field.label !== 'function' &&\n          getTranslation(field.label || '', i18n)}\n      </Label>\n      <DiffViewer\n        comparisonToRender={comparisonToRender}\n        diffMethod={diffMethod}\n        diffStyles={diffStyles}\n        placeholder={placeholder}\n        versionToRender={versionToRender}\n      />\n    </div>\n  )\n}\n\nexport default Text\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,OAAOC,KAAA,MAAW;AAClB,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAG3B,MAAMC,SAAA,GAAY;AAElB,MAAMC,IAAA,GAAsDA,CAAC;EAC3DC,UAAU;EACVC,UAAU;EACVC,KAAK;EACLC,IAAI;EACJC,UAAA,GAAa,KAAK;EAClBC,MAAM;EACNC;AAAO,CACR;EACC,IAAIC,WAAA,GAAc;EAElB,IAAID,OAAA,KAAYN,UAAA,EAAY;IAC1BO,WAAA,GAAc,IAAIJ,IAAA,CAAKK,CAAC,CAAC,qBAAqB;EAChD;EAEA,IAAIC,eAAA,GAAkBH,OAAA;EACtB,IAAII,kBAAA,GAAqBV,UAAA;EAEzB,IAAII,UAAA,EAAY;IACd,IAAI,OAAOE,OAAA,KAAY,UAAU;MAC/BG,eAAA,GAAkBE,IAAA,CAAKC,SAAS,CAACN,OAAA,EAAS,MAAM;IAClD;IACA,IAAI,OAAON,UAAA,KAAe,UAAU;MAClCU,kBAAA,GAAqBC,IAAA,CAAKC,SAAS,CAACZ,UAAA,EAAY,MAAM;IACxD;EACF;EAEA,oBACEa,KAAA,CAAC;IAAIC,SAAA,EAAWhB,SAAA;4BACde,KAAA,CAAClB,KAAA;iBACEU,MAAA,iBAAUU,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGhB,SAAA,gBAAyB;kBAAGO;UAC1D,WAAWH,KAAA,IACV,OAAOA,KAAA,CAAMc,KAAK,KAAK,cACvBvB,cAAA,CAAeS,KAAA,CAAMc,KAAK,IAAI,IAAIb,IAAA;qBAEtCY,IAAA,CAAClB,UAAA;MACCa,kBAAA,EAAoBA,kBAAA;MACpBT,UAAA,EAAYA,UAAA;MACZL,UAAA,EAAYA,UAAA;MACZW,WAAA,EAAaA,WAAA;MACbE,eAAA,EAAiBA;;;AAIzB;AAEA,eAAeV,IAAA","ignoreList":[]}

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

@@ -1,13 +1,15 @@
-.text-diff {
-  &__locale-label {
-    [dir='ltr'] & {
-      margin-right: calc(var(--base) * 0.25);
+@layer payload-default {
+  .text-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;
     }
-    [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/diffMethods.js

@@ -1,8 +1,7 @@
 export const diffMethods = {
-    radio: 'WORDS_WITH_SPACE',
-    relationship: 'WORDS_WITH_SPACE',
-    select: 'WORDS_WITH_SPACE',
-    upload: 'WORDS_WITH_SPACE'
+  radio: 'WORDS_WITH_SPACE',
+  relationship: 'WORDS_WITH_SPACE',
+  select: 'WORDS_WITH_SPACE',
+  upload: 'WORDS_WITH_SPACE'
 };
-
 //# sourceMappingURL=diffMethods.js.map

package/dist/views/Version/RenderFieldsToDiff/fields/diffMethods.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/diffMethods.ts"],"sourcesContent":["export const diffMethods = {\n  radio: 'WORDS_WITH_SPACE',\n  relationship: 'WORDS_WITH_SPACE',\n  select: 'WORDS_WITH_SPACE',\n  upload: 'WORDS_WITH_SPACE',\n}\n"],"names":["diffMethods","radio","relationship","select","upload"],"rangeMappings":";;;;;","mappings":"AAAA,OAAO,MAAMA,cAAc;IACzBC,OAAO;IACPC,cAAc;IACdC,QAAQ;IACRC,QAAQ;AACV,EAAC"}
+{"version":3,"file":"diffMethods.js","names":["diffMethods","radio","relationship","select","upload"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/diffMethods.ts"],"sourcesContent":["export const diffMethods = {\n  radio: 'WORDS_WITH_SPACE',\n  relationship: 'WORDS_WITH_SPACE',\n  select: 'WORDS_WITH_SPACE',\n  upload: 'WORDS_WITH_SPACE',\n}\n"],"mappings":"AAAA,OAAO,MAAMA,WAAA,GAAc;EACzBC,KAAA,EAAO;EACPC,YAAA,EAAc;EACdC,MAAA,EAAQ;EACRC,MAAA,EAAQ;AACV","ignoreList":[]}

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

@@ -1,57 +1,23 @@
-/// <reference types="react" resolution-mode="require"/>
-declare const _default: {
-    array: import("react").FC<import("./types.js").Props>;
-    blocks: import("react").FC<import("./types.js").Props>;
-    checkbox: import("react").FC<import("./types.js").Props>;
-    code: import("react").FC<import("./types.js").Props>;
-    collapsible: import("react").FC<import("./types.js").Props>;
-    date: import("react").FC<import("./types.js").Props>;
-    email: import("react").FC<import("./types.js").Props>;
-    group: import("react").FC<import("./types.js").Props>;
-    json: import("react").FC<import("./types.js").Props>;
-    number: import("react").FC<import("./types.js").Props>;
-    point: import("react").FC<import("./types.js").Props>;
-    radio: import("react").FC<Omit<import("./types.js").Props, "field"> & {
-        field: import("@payloadcms/ui/client").MappedField & import("@payloadcms/ui/fields/shared").FormFieldBase & {
-            hasMany?: boolean;
-            isClearable?: boolean;
-            isSortable?: boolean;
-            name?: string;
-            onChange?: (e: string | string[]) => void;
-            options?: import("packages/payload/src/exports/index.js").Option[];
-            path?: string;
-            value?: string;
-            width?: string;
-        };
-    }>;
-    relationship: any;
-    richText: import("react").FC<import("./types.js").Props>;
-    row: import("react").FC<import("./types.js").Props>;
-    select: import("react").FC<Omit<import("./types.js").Props, "field"> & {
-        field: import("@payloadcms/ui/client").MappedField & import("@payloadcms/ui/fields/shared").FormFieldBase & {
-            hasMany?: boolean;
-            isClearable?: boolean;
-            isSortable?: boolean;
-            name?: string;
-            onChange?: (e: string | string[]) => void;
-            options?: import("packages/payload/src/exports/index.js").Option[];
-            path?: string;
-            value?: string;
-            width?: string;
-        };
-    }>;
-    tabs: import("react").FC<Omit<import("./types.js").Props, "field"> & {
-        field: import("@payloadcms/ui/client").MappedField & import("@payloadcms/ui/fields/shared").FormFieldBase & {
-            forceRender?: boolean;
-            name?: string;
-            path?: string;
-            tabs?: import("@payloadcms/ui/utilities/buildComponentMap").MappedTab[];
-            width?: string;
-        };
-    }>;
-    text: import("react").FC<import("./types.js").Props>;
-    textarea: import("react").FC<import("./types.js").Props>;
-    upload: any;
+export declare const diffComponents: {
+    array: import("react").FC<import("./types.js").DiffComponentProps>;
+    blocks: import("react").FC<import("./types.js").DiffComponentProps>;
+    checkbox: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    code: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    collapsible: import("react").FC<import("./types.js").DiffComponentProps>;
+    date: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    email: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    group: import("react").FC<import("./types.js").DiffComponentProps>;
+    json: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    number: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    point: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    radio: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").SelectFieldClient>>;
+    relationship: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").RelationshipFieldClient>>;
+    richText: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    row: import("react").FC<import("./types.js").DiffComponentProps>;
+    select: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").SelectFieldClient>>;
+    tabs: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TabsFieldClient>>;
+    text: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    textarea: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").TextFieldClient>>;
+    upload: import("react").FC<import("./types.js").DiffComponentProps<import("packages/payload/src/index.js").RelationshipFieldClient>>;
 };
-export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/index.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqB1B,CAAA"}

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

@@ -1,29 +1,29 @@
 import Iterable from './Iterable/index.js';
 import Nested from './Nested/index.js';
+import Relationship from './Relationship/index.js';
 import Select from './Select/index.js';
 import Tabs from './Tabs/index.js';
 import Text from './Text/index.js';
-export default {
-    array: Iterable,
-    blocks: Iterable,
-    checkbox: Text,
-    code: Text,
-    collapsible: Nested,
-    date: Text,
-    email: Text,
-    group: Nested,
-    json: Text,
-    number: Text,
-    point: Text,
-    radio: Select,
-    relationship: null,
-    richText: Text,
-    row: Nested,
-    select: Select,
-    tabs: Tabs,
-    text: Text,
-    textarea: Text,
-    upload: null
+export const diffComponents = {
+  array: Iterable,
+  blocks: Iterable,
+  checkbox: Text,
+  code: Text,
+  collapsible: Nested,
+  date: Text,
+  email: Text,
+  group: Nested,
+  json: Text,
+  number: Text,
+  point: Text,
+  radio: Select,
+  relationship: Relationship,
+  richText: Text,
+  row: Nested,
+  select: Select,
+  tabs: Tabs,
+  text: Text,
+  textarea: Text,
+  upload: Relationship
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/index.tsx"],"sourcesContent":["import Iterable from './Iterable/index.js'\nimport Nested from './Nested/index.js'\nimport Relationship from './Relationship/index.js'\nimport Select from './Select/index.js'\nimport Tabs from './Tabs/index.js'\nimport Text from './Text/index.js'\n\nexport default {\n  array: Iterable,\n  blocks: Iterable,\n  checkbox: Text,\n  code: Text,\n  collapsible: Nested,\n  date: Text,\n  email: Text,\n  group: Nested,\n  json: Text,\n  number: Text,\n  point: Text,\n  radio: Select,\n  relationship: null,\n  richText: Text,\n  row: Nested,\n  select: Select,\n  tabs: Tabs,\n  text: Text,\n  textarea: Text,\n  upload: null,\n}\n"],"names":["Iterable","Nested","Select","Tabs","Text","array","blocks","checkbox","code","collapsible","date","email","group","json","number","point","radio","relationship","richText","row","select","tabs","text","textarea","upload"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,cAAc,sBAAqB;AAC1C,OAAOC,YAAY,oBAAmB;AAEtC,OAAOC,YAAY,oBAAmB;AACtC,OAAOC,UAAU,kBAAiB;AAClC,OAAOC,UAAU,kBAAiB;AAElC,eAAe;IACbC,OAAOL;IACPM,QAAQN;IACRO,UAAUH;IACVI,MAAMJ;IACNK,aAAaR;IACbS,MAAMN;IACNO,OAAOP;IACPQ,OAAOX;IACPY,MAAMT;IACNU,QAAQV;IACRW,OAAOX;IACPY,OAAOd;IACPe,cAAc;IACdC,UAAUd;IACVe,KAAKlB;IACLmB,QAAQlB;IACRmB,MAAMlB;IACNmB,MAAMlB;IACNmB,UAAUnB;IACVoB,QAAQ;AACV,EAAC"}
+{"version":3,"file":"index.js","names":["Iterable","Nested","Relationship","Select","Tabs","Text","diffComponents","array","blocks","checkbox","code","collapsible","date","email","group","json","number","point","radio","relationship","richText","row","select","tabs","text","textarea","upload"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/index.tsx"],"sourcesContent":["import Iterable from './Iterable/index.js'\nimport Nested from './Nested/index.js'\nimport Relationship from './Relationship/index.js'\nimport Select from './Select/index.js'\nimport Tabs from './Tabs/index.js'\nimport Text from './Text/index.js'\n\nexport const diffComponents = {\n  array: Iterable,\n  blocks: Iterable,\n  checkbox: Text,\n  code: Text,\n  collapsible: Nested,\n  date: Text,\n  email: Text,\n  group: Nested,\n  json: Text,\n  number: Text,\n  point: Text,\n  radio: Select,\n  relationship: Relationship,\n  richText: Text,\n  row: Nested,\n  select: Select,\n  tabs: Tabs,\n  text: Text,\n  textarea: Text,\n  upload: Relationship,\n}\n"],"mappings":"AAAA,OAAOA,QAAA,MAAc;AACrB,OAAOC,MAAA,MAAY;AACnB,OAAOC,YAAA,MAAkB;AACzB,OAAOC,MAAA,MAAY;AACnB,OAAOC,IAAA,MAAU;AACjB,OAAOC,IAAA,MAAU;AAEjB,OAAO,MAAMC,cAAA,GAAiB;EAC5BC,KAAA,EAAOP,QAAA;EACPQ,MAAA,EAAQR,QAAA;EACRS,QAAA,EAAUJ,IAAA;EACVK,IAAA,EAAML,IAAA;EACNM,WAAA,EAAaV,MAAA;EACbW,IAAA,EAAMP,IAAA;EACNQ,KAAA,EAAOR,IAAA;EACPS,KAAA,EAAOb,MAAA;EACPc,IAAA,EAAMV,IAAA;EACNW,MAAA,EAAQX,IAAA;EACRY,KAAA,EAAOZ,IAAA;EACPa,KAAA,EAAOf,MAAA;EACPgB,YAAA,EAAcjB,YAAA;EACdkB,QAAA,EAAUf,IAAA;EACVgB,GAAA,EAAKpB,MAAA;EACLqB,MAAA,EAAQnB,MAAA;EACRoB,IAAA,EAAMnB,IAAA;EACNoB,IAAA,EAAMnB,IAAA;EACNoB,QAAA,EAAUpB,IAAA;EACVqB,MAAA,EAAQxB;AACV","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/fields/styles.js

@@ -1,28 +1,27 @@
 export const diffStyles = {
-    variables: {
-        dark: {
-            addedBackground: 'var(--theme-success-900)',
-            addedColor: 'var(--theme-success-100)',
-            diffViewerBackground: 'transparent',
-            diffViewerColor: 'var(--theme-text)',
-            emptyLineBackground: 'var(--theme-elevation-50)',
-            removedBackground: 'var(--theme-error-900)',
-            removedColor: 'var(--theme-error-100)',
-            wordAddedBackground: 'var(--theme-success-800)',
-            wordRemovedBackground: 'var(--theme-error-800)'
-        },
-        light: {
-            addedBackground: 'var(--theme-success-100)',
-            addedColor: 'var(--theme-success-900)',
-            diffViewerBackground: 'transparent',
-            diffViewerColor: 'var(--theme-text)',
-            emptyLineBackground: 'var(--theme-elevation-50)',
-            removedBackground: 'var(--theme-error-100)',
-            removedColor: 'var(--theme-error-900)',
-            wordAddedBackground: 'var(--theme-success-200)',
-            wordRemovedBackground: 'var(--theme-error-200)'
-        }
+  variables: {
+    dark: {
+      addedBackground: 'var(--theme-success-900)',
+      addedColor: 'var(--theme-success-100)',
+      diffViewerBackground: 'transparent',
+      diffViewerColor: 'var(--theme-text)',
+      emptyLineBackground: 'var(--theme-elevation-50)',
+      removedBackground: 'var(--theme-error-900)',
+      removedColor: 'var(--theme-error-100)',
+      wordAddedBackground: 'var(--theme-success-800)',
+      wordRemovedBackground: 'var(--theme-error-800)'
+    },
+    light: {
+      addedBackground: 'var(--theme-success-100)',
+      addedColor: 'var(--theme-success-900)',
+      diffViewerBackground: 'transparent',
+      diffViewerColor: 'var(--theme-text)',
+      emptyLineBackground: 'var(--theme-elevation-50)',
+      removedBackground: 'var(--theme-error-100)',
+      removedColor: 'var(--theme-error-900)',
+      wordAddedBackground: 'var(--theme-success-200)',
+      wordRemovedBackground: 'var(--theme-error-200)'
     }
+  }
 };
-
 //# sourceMappingURL=styles.js.map

package/dist/views/Version/RenderFieldsToDiff/fields/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/styles.ts"],"sourcesContent":["export const diffStyles = {\n  variables: {\n    dark: {\n      addedBackground: 'var(--theme-success-900)',\n      addedColor: 'var(--theme-success-100)',\n      diffViewerBackground: 'transparent',\n      diffViewerColor: 'var(--theme-text)',\n      emptyLineBackground: 'var(--theme-elevation-50)',\n      removedBackground: 'var(--theme-error-900)',\n      removedColor: 'var(--theme-error-100)',\n      wordAddedBackground: 'var(--theme-success-800)',\n      wordRemovedBackground: 'var(--theme-error-800)',\n    },\n    light: {\n      addedBackground: 'var(--theme-success-100)',\n      addedColor: 'var(--theme-success-900)',\n      diffViewerBackground: 'transparent',\n      diffViewerColor: 'var(--theme-text)',\n      emptyLineBackground: 'var(--theme-elevation-50)',\n      removedBackground: 'var(--theme-error-100)',\n      removedColor: 'var(--theme-error-900)',\n      wordAddedBackground: 'var(--theme-success-200)',\n      wordRemovedBackground: 'var(--theme-error-200)',\n    },\n  },\n}\n"],"names":["diffStyles","variables","dark","addedBackground","addedColor","diffViewerBackground","diffViewerColor","emptyLineBackground","removedBackground","removedColor","wordAddedBackground","wordRemovedBackground","light"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAO,MAAMA,aAAa;IACxBC,WAAW;QACTC,MAAM;YACJC,iBAAiB;YACjBC,YAAY;YACZC,sBAAsB;YACtBC,iBAAiB;YACjBC,qBAAqB;YACrBC,mBAAmB;YACnBC,cAAc;YACdC,qBAAqB;YACrBC,uBAAuB;QACzB;QACAC,OAAO;YACLT,iBAAiB;YACjBC,YAAY;YACZC,sBAAsB;YACtBC,iBAAiB;YACjBC,qBAAqB;YACrBC,mBAAmB;YACnBC,cAAc;YACdC,qBAAqB;YACrBC,uBAAuB;QACzB;IACF;AACF,EAAC"}
+{"version":3,"file":"styles.js","names":["diffStyles","variables","dark","addedBackground","addedColor","diffViewerBackground","diffViewerColor","emptyLineBackground","removedBackground","removedColor","wordAddedBackground","wordRemovedBackground","light"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/styles.ts"],"sourcesContent":["export const diffStyles = {\n  variables: {\n    dark: {\n      addedBackground: 'var(--theme-success-900)',\n      addedColor: 'var(--theme-success-100)',\n      diffViewerBackground: 'transparent',\n      diffViewerColor: 'var(--theme-text)',\n      emptyLineBackground: 'var(--theme-elevation-50)',\n      removedBackground: 'var(--theme-error-900)',\n      removedColor: 'var(--theme-error-100)',\n      wordAddedBackground: 'var(--theme-success-800)',\n      wordRemovedBackground: 'var(--theme-error-800)',\n    },\n    light: {\n      addedBackground: 'var(--theme-success-100)',\n      addedColor: 'var(--theme-success-900)',\n      diffViewerBackground: 'transparent',\n      diffViewerColor: 'var(--theme-text)',\n      emptyLineBackground: 'var(--theme-elevation-50)',\n      removedBackground: 'var(--theme-error-100)',\n      removedColor: 'var(--theme-error-900)',\n      wordAddedBackground: 'var(--theme-success-200)',\n      wordRemovedBackground: 'var(--theme-error-200)',\n    },\n  },\n}\n"],"mappings":"AAAA,OAAO,MAAMA,UAAA,GAAa;EACxBC,SAAA,EAAW;IACTC,IAAA,EAAM;MACJC,eAAA,EAAiB;MACjBC,UAAA,EAAY;MACZC,oBAAA,EAAsB;MACtBC,eAAA,EAAiB;MACjBC,mBAAA,EAAqB;MACrBC,iBAAA,EAAmB;MACnBC,YAAA,EAAc;MACdC,mBAAA,EAAqB;MACrBC,qBAAA,EAAuB;IACzB;IACAC,KAAA,EAAO;MACLT,eAAA,EAAiB;MACjBC,UAAA,EAAY;MACZC,oBAAA,EAAsB;MACtBC,eAAA,EAAiB;MACjBC,mBAAA,EAAqB;MACrBC,iBAAA,EAAmB;MACnBC,YAAA,EAAc;MACdC,mBAAA,EAAqB;MACrBC,qBAAA,EAAuB;IACzB;EACF;AACF","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/fields/types.d.ts

@@ -1,21 +1,20 @@
 import type { I18nClient } from '@payloadcms/translations';
-import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap';
-import type { FieldPermissions } from 'payload';
+import type { ClientField, FieldPermissions } from 'payload';
 import type React from 'react';
 import type { DiffMethod } from 'react-diff-viewer-continued';
-export type DiffComponents = Record<string, React.FC<Props>>;
-export type Props = {
-    comparison: any;
-    diffComponents: DiffComponents;
-    diffMethod?: DiffMethod;
-    disableGutter?: boolean;
-    field: MappedField;
-    fieldMap: FieldMap;
-    i18n: I18nClient;
-    isRichText?: boolean;
-    locale?: string;
-    locales?: string[];
-    permissions?: Record<string, FieldPermissions>;
-    version: any;
+export type DiffComponents = Record<string, React.FC<DiffComponentProps>>;
+export type DiffComponentProps<TField extends ClientField = ClientField> = {
+    readonly comparison: any;
+    readonly diffComponents: DiffComponents;
+    readonly diffMethod?: DiffMethod;
+    readonly disableGutter?: boolean;
+    readonly field: TField;
+    readonly fields: ClientField[];
+    readonly i18n: I18nClient;
+    readonly isRichText?: boolean;
+    readonly locale?: string;
+    readonly locales?: string[];
+    readonly permissions?: Record<string, FieldPermissions>;
+    readonly version: any;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/views/Version/RenderFieldsToDiff/fields/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAA;AACvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,GAAG,CAAA;IACf,cAAc,EAAE,cAAc,CAAA;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,QAAQ,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IAC9C,OAAO,EAAE,GAAG,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAEzE,MAAM,MAAM,kBAAkB,CAAC,MAAM,SAAS,WAAW,GAAG,WAAW,IAAI;IACzE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAA;IACxB,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAA;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAA;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACvD,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAA;CACtB,CAAA"}

package/dist/views/Version/RenderFieldsToDiff/fields/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/views/Version/RenderFieldsToDiff/fields/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { FieldPermissions } from 'payload'\nimport type React from 'react'\nimport type { DiffMethod } from 'react-diff-viewer-continued'\n\nexport type DiffComponents = Record<string, React.FC<Props>>\n\nexport type Props = {\n  comparison: any\n  diffComponents: DiffComponents\n  diffMethod?: DiffMethod\n  disableGutter?: boolean\n  field: MappedField\n  fieldMap: FieldMap\n  i18n: I18nClient\n  isRichText?: boolean\n  locale?: string\n  locales?: string[]\n  permissions?: Record<string, FieldPermissions>\n  version: any\n}\n"],"names":[],"rangeMappings":"","mappings":"AAQA,WAaC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/fields/types.ts"],"sourcesContent":["import type { I18nClient } from '@payloadcms/translations'\nimport type { ClientField, FieldPermissions } from 'payload'\nimport type React from 'react'\nimport type { DiffMethod } from 'react-diff-viewer-continued'\n\nexport type DiffComponents = Record<string, React.FC<DiffComponentProps>>\n\nexport type DiffComponentProps<TField extends ClientField = ClientField> = {\n  readonly comparison: any\n  readonly diffComponents: DiffComponents\n  readonly diffMethod?: DiffMethod\n  readonly disableGutter?: boolean\n  readonly field: TField\n  readonly fields: ClientField[]\n  readonly i18n: I18nClient\n  readonly isRichText?: boolean\n  readonly locale?: string\n  readonly locales?: string[]\n  readonly permissions?: Record<string, FieldPermissions>\n  readonly version: any\n}\n"],"mappings":"AAOA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAkB,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvD,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8HvC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAkB,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvD,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkIvC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

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

@@ -1,103 +1,116 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fieldAffectsData } from 'payload/shared';
 import React from 'react';
-import Nested from './fields/Nested/index.js';
 import { diffMethods } from './fields/diffMethods.js';
+import Nested from './fields/Nested/index.js';
 const baseClass = 'render-field-diffs';
-const RenderFieldsToDiff = ({ comparison, diffComponents, fieldMap, fieldPermissions, i18n, locales, version })=>{
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        children: fieldMap?.map((field, i)=>{
-            if ('name' in field && field.name === 'id') return null;
-            const Component = diffComponents[field.type];
-            const isRichText = field.type === 'richText';
-            const diffMethod = diffMethods[field.type] || 'CHARS';
-            if (Component) {
-                if (field.isFieldAffectingData && 'name' in field) {
-                    const fieldName = field.name;
-                    const valueIsObject = field.type === 'code' || field.type === 'json';
-                    const versionValue = valueIsObject ? JSON.stringify(version?.[fieldName]) : version?.[fieldName];
-                    const comparisonValue = valueIsObject ? JSON.stringify(comparison?.[fieldName]) : comparison?.[fieldName];
-                    const hasPermission = fieldPermissions?.[fieldName]?.read?.permission;
-                    const subFieldPermissions = fieldPermissions?.[fieldName]?.fields;
-                    if (hasPermission === false) return null;
-                    const baseCellProps = {
-                        comparison: comparisonValue,
-                        diffComponents,
-                        diffMethod,
-                        field,
-                        fieldMap: 'fieldMap' in field.fieldComponentProps ? field.fieldComponentProps?.fieldMap : fieldMap,
-                        fieldPermissions: subFieldPermissions,
-                        i18n,
-                        isRichText,
-                        locales,
-                        version: versionValue
-                    };
-                    if (field.localized) {
-                        return /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__field`,
-                            children: locales.map((locale, index)=>{
-                                const versionLocaleValue = versionValue?.[locale];
-                                const comparisonLocaleValue = comparisonValue?.[locale];
-                                const cellProps = {
-                                    ...baseCellProps,
-                                    comparison: comparisonLocaleValue,
-                                    version: versionLocaleValue
-                                };
-                                return /*#__PURE__*/ _jsx("div", {
-                                    className: `${baseClass}__locale`,
-                                    children: /*#__PURE__*/ _jsx("div", {
-                                        className: `${baseClass}__locale-value`,
-                                        children: /*#__PURE__*/ _jsx(Component, {
-                                            ...cellProps,
-                                            locale: locale
-                                        })
-                                    })
-                                }, [
-                                    locale,
-                                    index
-                                ].join('-'));
-                            })
-                        }, i);
-                    }
-                    return /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__field`,
-                        children: /*#__PURE__*/ _jsx(Component, {
-                            ...baseCellProps
-                        })
-                    }, i);
-                }
-                if (field.type === 'tabs' && 'fieldMap' in field.fieldComponentProps) {
-                    const Tabs = diffComponents.tabs;
-                    return /*#__PURE__*/ _jsx(Tabs, {
-                        comparison: comparison,
-                        diffComponents: diffComponents,
-                        field: field,
-                        fieldMap: field.fieldComponentProps.fieldMap,
-                        i18n: i18n,
-                        locales: locales,
-                        version: version
-                    }, i);
-                }
-                // At this point, we are dealing with a `row`, etc
-                if ('fieldMap' in field.fieldComponentProps) {
-                    return /*#__PURE__*/ _jsx(Nested, {
-                        comparison: comparison,
-                        diffComponents: diffComponents,
-                        disableGutter: true,
-                        field: field,
-                        fieldMap: field.fieldComponentProps.fieldMap,
-                        i18n: i18n,
-                        locales: locales,
-                        permissions: fieldPermissions,
-                        version: version
-                    }, i);
-                }
-            }
+const RenderFieldsToDiff = ({
+  comparison,
+  diffComponents: __diffComponents,
+  fieldPermissions,
+  fields,
+  i18n,
+  locales,
+  version
+}) => {
+  // typing it as `as typeof _diffComponents` here ensures the TField generics of DiffComponentProps are respected.
+  // Without it, you could pass a UI field to the Tabs component, without it erroring
+  const diffComponents = __diffComponents;
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: fields?.map((field, i) => {
+      if ('name' in field && field.name === 'id') {
+        return null;
+      }
+      const Component = diffComponents[field.type];
+      const isRichText = field.type === 'richText';
+      const diffMethod = diffMethods[field.type] || 'CHARS';
+      if (Component) {
+        if (fieldAffectsData(field)) {
+          const fieldName = field.name;
+          const valueIsObject = field.type === 'code' || field.type === 'json';
+          const versionValue = valueIsObject ? JSON.stringify(version?.[fieldName]) : version?.[fieldName];
+          const comparisonValue = valueIsObject ? JSON.stringify(comparison?.[fieldName]) : comparison?.[fieldName];
+          const hasPermission = fieldPermissions?.[fieldName]?.read?.permission;
+          const subFieldPermissions = fieldPermissions?.[fieldName]?.fields;
+          if (hasPermission === false) {
             return null;
-        })
-    });
+          }
+          const baseCellProps = {
+            comparison: comparisonValue,
+            diffComponents,
+            diffMethod,
+            field,
+            fieldPermissions: subFieldPermissions,
+            fields: 'fields' in field ? field?.fields : fields,
+            i18n,
+            isRichText,
+            locales,
+            version: versionValue
+          };
+          if (field.localized) {
+            return /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__field`,
+              children: locales.map((locale, index) => {
+                const versionLocaleValue = versionValue?.[locale];
+                const comparisonLocaleValue = comparisonValue?.[locale];
+                const cellProps = {
+                  ...baseCellProps,
+                  comparison: comparisonLocaleValue,
+                  version: versionLocaleValue
+                };
+                return /*#__PURE__*/_jsx("div", {
+                  className: `${baseClass}__locale`,
+                  children: /*#__PURE__*/_jsx("div", {
+                    className: `${baseClass}__locale-value`,
+                    children: /*#__PURE__*/_jsx(Component, {
+                      ...cellProps,
+                      locale: locale
+                    })
+                  })
+                }, [locale, index].join('-'));
+              })
+            }, i);
+          }
+          return /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__field`,
+            children: /*#__PURE__*/_jsx(Component, {
+              ...baseCellProps
+            })
+          }, i);
+        }
+        if (field.type === 'tabs' && 'tabs' in field) {
+          const Tabs = diffComponents.tabs;
+          return /*#__PURE__*/_jsx(Tabs, {
+            comparison: comparison,
+            diffComponents: diffComponents,
+            field: field,
+            fields: [],
+            i18n: i18n,
+            locales: locales,
+            version: version
+          }, i);
+        }
+        // At this point, we are dealing with a `row`, etc
+        if ('fields' in field) {
+          return /*#__PURE__*/_jsx(Nested, {
+            comparison: comparison,
+            diffComponents: diffComponents,
+            disableGutter: true,
+            field: field,
+            fields: field.fields,
+            i18n: i18n,
+            locales: locales,
+            permissions: fieldPermissions,
+            version: version
+          }, i);
+        }
+      }
+      return null;
+    })
+  });
 };
 export default RenderFieldsToDiff;
-
 //# sourceMappingURL=index.js.map