@payloadcms/next 3.35.0-internal.b3d367c → 3.35.0

package/dist/views/Version/Default/index.scss

@@ -5,142 +5,72 @@
     width: 100%;
     padding-bottom: var(--spacing-view-bottom);
 
-    &-controls-top {
-      border-bottom: 1px solid var(--theme-elevation-100);
-      padding: 16px var(--gutter-h) 16px var(--gutter-h);
+    &__wrap {
+      padding-top: calc(var(--base) * 1.5);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
 
-      &__wrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
+    &__header-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
 
-        &-actions {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: var(--base);
-        }
-      }
+    &__header {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
       h2 {
-        font-size: 18px;
+        margin: 0;
       }
     }
 
-    &-controls-bottom {
-      border-bottom: 1px solid var(--theme-elevation-100);
-      padding: 16px var(--gutter-h) 16px var(--gutter-h);
-      position: relative;
-
-      // Vertical separator line
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 50%;
-        width: 1px;
-        background-color: var(--theme-elevation-100);
-        transform: translateX(-50%); // Center the line
-      }
-
-      &__wrapper {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: var(--base);
-        gap: var(--base);
-      }
-
-      &__version-from {
-      }
+    &__created-at {
+      margin: 0;
+      color: var(--theme-elevation-500);
+    }
 
-      &__version-to {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--base);
+    &__controls {
+      display: flex;
+      gap: var(--base);
 
-        h2 {
-          font-size: 13px;
-          font-weight: 400;
-        }
+      > * {
+        flex-basis: 100%;
       }
     }
 
     &__restore {
       margin: 0 0 0 var(--base);
-      div {
-        margin-block: 0;
-      }
     }
 
     &__modifiedCheckBox {
       margin: 0 0 0 var(--base);
-      display: flex;
-      align-items: center;
     }
 
-    &__diff-wrap {
-      padding-top: calc(var(--base) * 1.5);
-      display: flex;
-      flex-direction: column;
-      gap: var(--base);
-      position: relative;
-
-      // Vertical separator line
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 50%;
-        width: 1px;
-        background-color: var(--theme-elevation-100);
-        transform: translateX(-50%); // Center the line
+    @include mid-break {
+      &__intro,
+      &__header {
+        display: block;
       }
-    }
 
-    @include mid-break {
       &__controls {
         flex-direction: column;
         gap: calc(var(--base) / 4);
       }
 
+
       &__restore {
         margin: calc(var(--base) * 0.5) 0 0 0;
       }
-
-      &-controls-top {
-        &__wrapper {
-          flex-direction: column;
-          align-items: flex-start;
-
-          .view-version__modifiedCheckBox {
-            margin-left: 0;
-          }
-        }
-      }
-
-      &-controls-bottom {
-        &__version-from {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-
-        &__version-to {
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 0;
-        }
-      }
     }
 
     @include small-break {
-      &__diff-wrap {
+      &__wrap {
         padding-top: calc(var(--base) / 2);
+        gap: calc(var(--base) / 2);
       }
     }
   }

package/dist/views/Version/Default/types.d.ts

@@ -1,22 +1,18 @@
-import type { TypeWithVersion } from 'payload';
+import type { Document, OptionObject } from 'payload';
 export type CompareOption = {
     label: React.ReactNode | string;
+    options?: CompareOption[];
+    relationTo?: string;
     value: string;
 };
-export type VersionPill = {
-    id: string;
-    Label: React.ReactNode;
-};
 export type DefaultVersionsViewProps = {
     readonly canUpdate: boolean;
-    readonly latestDraftVersionID: string;
-    readonly latestPublishedVersionID: string;
+    readonly doc: Document;
+    readonly latestDraftVersion?: string;
+    readonly latestPublishedVersion?: string;
     modifiedOnly: boolean;
     readonly RenderedDiff: React.ReactNode;
-    readonly selectedLocales: string[];
-    readonly versionFromPill: VersionPill;
-    readonly versionTo: TypeWithVersion<any>;
-    versionToCreatedAt: string;
-    VersionToCreatedAtLabel: React.ReactNode;
+    readonly selectedLocales: OptionObject[];
+    readonly versionID?: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/views/Version/Default/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAA;IACrC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,CAAA;IACzC,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,eAAe,EAAE,WAAW,CAAA;IACrC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,CAAA;IACxC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAA;CACzC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IAC/B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAA;IACtB,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IACxC,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,YAAY,EAAE,CAAA;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA"}

package/dist/views/Version/Default/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["import type { TypeWithVersion } from 'payload'\n\nexport type CompareOption = {\n  label: React.ReactNode | string\n  value: string\n}\n\nexport type VersionPill = {\n  id: string\n  Label: React.ReactNode\n}\n\nexport type DefaultVersionsViewProps = {\n  readonly canUpdate: boolean\n  readonly latestDraftVersionID: string\n  readonly latestPublishedVersionID: string\n  modifiedOnly: boolean\n  readonly RenderedDiff: React.ReactNode\n  readonly selectedLocales: string[]\n  readonly versionFromPill: VersionPill\n  readonly versionTo: TypeWithVersion<any>\n  versionToCreatedAt: string\n  VersionToCreatedAtLabel: React.ReactNode\n}\n"],"mappings":"AAYA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["import type { Document, OptionObject } from 'payload'\n\nexport type CompareOption = {\n  label: React.ReactNode | string\n  options?: CompareOption[]\n  relationTo?: string\n  value: string\n}\n\nexport type DefaultVersionsViewProps = {\n  readonly canUpdate: boolean\n  readonly doc: Document\n  readonly latestDraftVersion?: string\n  readonly latestPublishedVersion?: string\n  modifiedOnly: boolean\n  readonly RenderedDiff: React.ReactNode\n  readonly selectedLocales: OptionObject[]\n  readonly versionID?: string\n}\n"],"mappings":"AASA","ignoreList":[]}

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

@@ -3,6 +3,7 @@ import React from 'react';
 import './index.scss';
 type Props = {
     children: React.ReactNode;
+    comparison: unknown;
     field?: never;
     fields: ClientField[];
     initCollapsed?: boolean;
@@ -10,10 +11,10 @@ type Props = {
     label: React.ReactNode;
     locales: string[] | undefined;
     parentIsLocalized: boolean;
-    valueFrom: unknown;
-    valueTo: unknown;
+    version: unknown;
 } | {
     children: React.ReactNode;
+    comparison?: unknown;
     field: ClientField;
     fields?: never;
     initCollapsed?: boolean;
@@ -21,8 +22,7 @@ type Props = {
     label: React.ReactNode;
     locales: string[] | undefined;
     parentIsLocalized: boolean;
-    valueFrom?: unknown;
-    valueTo: unknown;
+    version: unknown;
 };
 export declare const DiffCollapser: React.FC<Props>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GACN;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GACN;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgFzC,CAAA"}

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

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui';
+import { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui';
 import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared';
 import React, { useState } from 'react';
 import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js';
@@ -11,6 +11,7 @@ export const DiffCollapser = t0 => {
   const $ = _c(21);
   const {
     children,
+    comparison,
     field,
     fields,
     initCollapsed: t1,
@@ -18,8 +19,7 @@ export const DiffCollapser = t0 => {
     label,
     locales,
     parentIsLocalized,
-    valueFrom,
-    valueTo
+    version
   } = t0;
   const initCollapsed = t1 === undefined ? false : t1;
   const isIterable = t2 === undefined ? false : t2;
@@ -31,25 +31,25 @@ export const DiffCollapser = t0 => {
     config
   } = useConfig();
   let t3;
-  if ($[0] !== children || $[1] !== config || $[2] !== field || $[3] !== fields || $[4] !== isCollapsed || $[5] !== isIterable || $[6] !== label || $[7] !== locales || $[8] !== parentIsLocalized || $[9] !== t || $[10] !== valueFrom || $[11] !== valueTo) {
+  if ($[0] !== children || $[1] !== comparison || $[2] !== config || $[3] !== field || $[4] !== fields || $[5] !== isCollapsed || $[6] !== isIterable || $[7] !== label || $[8] !== locales || $[9] !== parentIsLocalized || $[10] !== t || $[11] !== version) {
     let changeCount;
     if (isIterable) {
       if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
         throw new Error("DiffCollapser: field must be an array or blocks field when isIterable is true");
       }
       let t4;
-      if ($[13] !== valueFrom) {
-        t4 = valueFrom ?? [];
-        $[13] = valueFrom;
+      if ($[13] !== comparison) {
+        t4 = comparison ?? [];
+        $[13] = comparison;
         $[14] = t4;
       } else {
         t4 = $[14];
       }
       const comparisonRows = t4;
       let t5;
-      if ($[15] !== valueTo) {
-        t5 = valueTo ?? [];
-        $[15] = valueTo;
+      if ($[15] !== version) {
+        t5 = version ?? [];
+        $[15] = version;
         $[16] = t5;
       } else {
         t5 = $[16];
@@ -68,12 +68,12 @@ export const DiffCollapser = t0 => {
       });
     } else {
       changeCount = countChangedFields({
-        comparison: valueFrom,
+        comparison,
         config,
         fields,
         locales,
         parentIsLocalized,
-        version: valueTo
+        version
       });
     }
     const t4 = isCollapsed && `${baseClass}__content--is-collapsed`;
@@ -97,20 +97,21 @@ export const DiffCollapser = t0 => {
     t3 = _jsxs("div", {
       className: baseClass,
       children: [_jsxs(FieldDiffLabel, {
-        children: [_jsxs("button", {
+        children: [_jsx("button", {
           "aria-label": isCollapsed ? "Expand" : "Collapse",
           className: `${baseClass}__toggle-button`,
           onClick: t6,
           type: "button",
-          children: [_jsx("span", {
-            className: `${baseClass}__label`,
-            children: label
-          }), _jsx(ChevronIcon, {
-            direction: isCollapsed ? "right" : "down",
-            size: "small"
-          })]
-        }), changeCount > 0 && isCollapsed && _jsx("span", {
+          children: _jsx(ChevronIcon, {
+            direction: isCollapsed ? "right" : "down"
+          })
+        }), _jsx("span", {
+          className: `${baseClass}__label`,
+          children: label
+        }), changeCount > 0 && _jsx(Pill, {
           className: `${baseClass}__field-change-count`,
+          pillStyle: "light-gray",
+          size: "small",
           children: t("version:changedFieldsCount", {
             count: changeCount
           })
@@ -121,17 +122,17 @@ export const DiffCollapser = t0 => {
       })]
     });
     $[0] = children;
-    $[1] = config;
-    $[2] = field;
-    $[3] = fields;
-    $[4] = isCollapsed;
-    $[5] = isIterable;
-    $[6] = label;
-    $[7] = locales;
-    $[8] = parentIsLocalized;
-    $[9] = t;
-    $[10] = valueFrom;
-    $[11] = valueTo;
+    $[1] = comparison;
+    $[2] = config;
+    $[3] = field;
+    $[4] = fields;
+    $[5] = isCollapsed;
+    $[6] = isIterable;
+    $[7] = label;
+    $[8] = locales;
+    $[9] = parentIsLocalized;
+    $[10] = t;
+    $[11] = version;
     $[12] = t3;
   } else {
     t3 = $[12];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","FieldDiffLabel","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","t0","$","children","field","fields","initCollapsed","t1","isIterable","t2","label","locales","parentIsLocalized","valueFrom","valueTo","undefined","t","isCollapsed","setIsCollapsed","config","t3","changeCount","Error","t4","comparisonRows","t5","versionRows","Array","isArray","version","filter","Boolean","contentClassNames","join","t6","_jsxs","className","onClick","type","_jsx","direction","size","count"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props =\n  | {\n      // fields collapser\n      children: React.ReactNode\n      field?: never\n      fields: ClientField[]\n      initCollapsed?: boolean\n      isIterable?: false\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      valueFrom: unknown\n      valueTo: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      field: ClientField\n      fields?: never\n      initCollapsed?: boolean\n      isIterable: true\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      valueFrom?: unknown\n      valueTo: unknown\n    }\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  field,\n  fields,\n  initCollapsed = false,\n  isIterable = false,\n  label,\n  locales,\n  parentIsLocalized,\n  valueFrom,\n  valueTo,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const comparisonRows = valueFrom ?? []\n    const versionRows = valueTo ?? []\n\n    if (!Array.isArray(comparisonRows) || !Array.isArray(versionRows)) {\n      throw new Error(\n        'DiffCollapser: comparison and version must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      comparisonRows,\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      versionRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      comparison: valueFrom,\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      version: valueTo,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <span className={`${baseClass}__label`}>{label}</span>\n\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={'small'} />\n        </button>\n        {changeCount > 0 && isCollapsed && (\n          <span className={`${baseClass}__field-change-count`}>\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </span>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","FieldDiffLabel","Pill","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","t0","$","children","comparison","field","fields","initCollapsed","t1","isIterable","t2","label","locales","parentIsLocalized","version","undefined","t","isCollapsed","setIsCollapsed","config","t3","changeCount","Error","t4","comparisonRows","t5","versionRows","Array","isArray","filter","Boolean","contentClassNames","join","t6","_jsxs","className","_jsx","onClick","type","direction","pillStyle","size","count"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, Pill, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props =\n  | {\n      // fields collapser\n      children: React.ReactNode\n      comparison: unknown\n      field?: never\n      fields: ClientField[]\n      initCollapsed?: boolean\n      isIterable?: false\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      version: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      comparison?: unknown\n      field: ClientField\n      fields?: never\n      initCollapsed?: boolean\n      isIterable: true\n      label: React.ReactNode\n      locales: string[] | undefined\n      parentIsLocalized: boolean\n      version: unknown\n    }\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  comparison,\n  field,\n  fields,\n  initCollapsed = false,\n  isIterable = false,\n  label,\n  locales,\n  parentIsLocalized,\n  version,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const comparisonRows = comparison ?? []\n    const versionRows = version ?? []\n\n    if (!Array.isArray(comparisonRows) || !Array.isArray(versionRows)) {\n      throw new Error(\n        'DiffCollapser: comparison and version must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      comparisonRows,\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      versionRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      comparison,\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      version,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} />\n        </button>\n        <span className={`${baseClass}__label`}>{label}</span>\n        {changeCount > 0 && (\n          <Pill className={`${baseClass}__field-change-count`} pillStyle=\"light-gray\" size=\"small\">\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </Pill>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss

@@ -1,5 +1,3 @@
-@import '../../../../scss/styles.scss';
-
 @layer payload-default {
   .diff-collapser {
     &__toggle-button {
@@ -7,47 +5,22 @@
       cursor: pointer;
       // Align the chevron visually with the label text
       vertical-align: 1px;
-      position: relative;
-      z-index: 1;
-
-      .icon {
-        color: var(--theme-elevation-500);
-      }
-
-      &:hover {
-        // Apply background color but with padding, thus we use after
-        &::before {
-          content: '';
-          position: absolute;
-          top: -(base(0.15));
-          left: -(base(0.15));
-          right: -(base(0.15));
-          bottom: -(base(0.15));
-          background-color: var(--theme-elevation-50);
-          border-radius: var(--style-radius-s);
-          z-index: -1;
-        }
-      }
     }
 
     &__label {
       // Add space between label, chevron, and change count
-      margin: 0 calc(var(--base) * 0.3) 0 0;
+      margin: 0 calc(var(--base) * 0.25);
     }
 
     &__field-change-count {
       // Reset the font weight of the change count to normal
       font-weight: normal;
-      margin-left: calc(var(--base) * 0.3);
-      padding: calc(var(--base) * 0.2);
-      background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
     }
 
     &__content {
       [dir='ltr'] & {
         // Vertical gutter
-        border-left: 2px solid var(--theme-elevation-100);
+        border-left: 3px solid var(--theme-elevation-50);
         // Center-align the gutter with the chevron
         margin-left: 3px;
         // Content indentation
@@ -55,7 +28,7 @@
       }
       [dir='rtl'] & {
         // Vertical gutter
-        border-right: 2px solid var(--theme-elevation-100);
+        border-right: 3px solid var(--theme-elevation-50);
         // Center-align the gutter with the chevron
         margin-right: 3px;
         // Content indentation

package/dist/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.d.ts

@@ -1,12 +1,7 @@
 import type { VersionField } from 'payload';
 import './index.scss';
 import React from 'react';
-export declare const RenderVersionFieldsToDiff: ({ parent, versionFields, }: {
-    /**
-     * If true, this is the parent render version fields component, not one nested in
-     * a field with children (e.g. group)
-     */
-    parent?: boolean;
+export declare const RenderVersionFieldsToDiff: ({ versionFields, }: {
     versionFields: VersionField[];
 }) => React.ReactNode;
 //# sourceMappingURL=RenderVersionFieldsToDiff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RenderVersionFieldsToDiff.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,cAAc,CAAA;AAGrB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,eAAO,MAAM,yBAAyB,+BAGnC;IACD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,KAAG,KAAK,CAAC,SAqDT,CAAA"}
+{"version":3,"file":"RenderVersionFieldsToDiff.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,cAAc,CAAA;AAGrB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,eAAO,MAAM,yBAAyB,uBAEnC;IACD,aAAa,EAAE,YAAY,EAAE,CAAA;CAC9B,KAAG,KAAK,CAAC,SAqDT,CAAA"}

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

@@ -6,32 +6,29 @@ const baseClass = 'render-field-diffs';
 import { ShimmerEffect } from '@payloadcms/ui';
 import React, { Fragment, useEffect } from 'react';
 export const RenderVersionFieldsToDiff = t0 => {
-  const $ = _c(6);
+  const $ = _c(5);
   const {
-    parent: t1,
     versionFields
   } = t0;
-  const parent = t1 === undefined ? false : t1;
   const [hasMounted, setHasMounted] = React.useState(false);
+  let t1;
   let t2;
-  let t3;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = () => {
+    t1 = () => {
       setHasMounted(true);
     };
-    t3 = [];
-    $[0] = t2;
-    $[1] = t3;
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
   } else {
-    t2 = $[0];
-    t3 = $[1];
+    t1 = $[0];
+    t2 = $[1];
   }
-  useEffect(t2, t3);
-  const t4 = `${baseClass}${parent ? ` ${baseClass}--parent` : ""}`;
-  let t5;
-  if ($[2] !== hasMounted || $[3] !== t4 || $[4] !== versionFields) {
-    t5 = _jsx("div", {
-      className: t4,
+  useEffect(t1, t2);
+  let t3;
+  if ($[2] !== hasMounted || $[3] !== versionFields) {
+    t3 = _jsx("div", {
+      className: baseClass,
       children: !hasMounted ? _jsx(Fragment, {
         children: _jsx(ShimmerEffect, {
           height: "8rem",
@@ -40,13 +37,12 @@ export const RenderVersionFieldsToDiff = t0 => {
       }) : versionFields?.map(_temp)
     });
     $[2] = hasMounted;
-    $[3] = t4;
-    $[4] = versionFields;
-    $[5] = t5;
+    $[3] = versionFields;
+    $[4] = t3;
   } else {
-    t5 = $[5];
+    t3 = $[4];
   }
-  return t5;
+  return t3;
 };
 function _temp(field, fieldIndex) {
   if (field.fieldByLocale) {

package/dist/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderVersionFieldsToDiff.js","names":["c","_c","baseClass","ShimmerEffect","React","Fragment","useEffect","RenderVersionFieldsToDiff","t0","$","parent","t1","versionFields","undefined","hasMounted","setHasMounted","useState","t2","t3","Symbol","for","t4","t5","_jsx","className","children","height","width","map","_temp","field","fieldIndex","fieldByLocale","LocaleComponents","locale","baseField","Object","entries","push","path","CustomComponent","join","type"],"sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"sourcesContent":["'use client'\nconst baseClass = 'render-field-diffs'\nimport type { VersionField } from 'payload'\n\nimport './index.scss'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\nimport React, { Fragment, useEffect } from 'react'\n\nexport const RenderVersionFieldsToDiff = ({\n  parent = false,\n  versionFields,\n}: {\n  /**\n   * If true, this is the parent render version fields component, not one nested in\n   * a field with children (e.g. group)\n   */\n  parent?: boolean\n  versionFields: VersionField[]\n}): React.ReactNode => {\n  const [hasMounted, setHasMounted] = React.useState(false)\n\n  // defer rendering until after the first mount as the CSS is loaded with Emotion\n  // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  return (\n    <div className={`${baseClass}${parent ? ` ${baseClass}--parent` : ''}`}>\n      {!hasMounted ? (\n        <Fragment>\n          <ShimmerEffect height=\"8rem\" width=\"100%\" />\n        </Fragment>\n      ) : (\n        versionFields?.map((field, fieldIndex) => {\n          if (field.fieldByLocale) {\n            const LocaleComponents: React.ReactNode[] = []\n            for (const [locale, baseField] of Object.entries(field.fieldByLocale)) {\n              LocaleComponents.push(\n                <div\n                  className={`${baseClass}__locale`}\n                  data-field-path={baseField.path}\n                  data-locale={locale}\n                  key={[locale, fieldIndex].join('-')}\n                >\n                  <div className={`${baseClass}__locale-value`}>{baseField.CustomComponent}</div>\n                </div>,\n              )\n            }\n            return (\n              <div className={`${baseClass}__field`} key={fieldIndex}>\n                {LocaleComponents}\n              </div>\n            )\n          } else if (field.field) {\n            return (\n              <div\n                className={`${baseClass}__field field__${field.field.type}`}\n                data-field-path={field.field.path}\n                key={fieldIndex}\n              >\n                {field.field.CustomComponent}\n              </div>\n            )\n          }\n\n          return null\n        })\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,MAAMC,SAAA,GAAY;AAKlB,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,QAAQ,EAAEC,SAAS,QAAQ;AAE3C,OAAO,MAAMC,yBAAA,GAA4BC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,MAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAJ,EAUzC;EATC,MAAAE,MAAA,GAAAC,EAAc,KAAAE,SAAA,WAAdF,EAAc;EAUd,OAAAG,UAAA,EAAAC,aAAA,IAAoCX,KAAA,CAAAY,QAAA,MAAe;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAIzCH,EAAA,GAAAA,CAAA;MACRF,aAAA,KAAc;IAAA;IACbG,EAAA;IAAET,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;EAAA;IAAAD,EAAA,GAAAR,CAAA;IAAAS,EAAA,GAAAT,CAAA;EAAA;EAFLH,SAAA,CAAUW,EAEV,EAAGC,EAAE;EAGa,MAAAG,EAAA,MAAAnB,SAAA,GAAeQ,MAAA,GAAS,IAAAR,SAAA,UAAuB,GAAG,IAAI;EAAA,IAAAoB,EAAA;EAAA,IAAAb,CAAA,QAAAK,UAAA,IAAAL,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAG,aAAA;IAAtEU,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeH,EAAsD;MAAAI,QAAA,EACnE,CAACX,UAAA,GACAS,IAAA,CAAAlB,QAAA;QAAAoB,QAAA,EACEF,IAAA,CAAApB,aAAA;UAAAuB,MAAA,EAAsB;UAAAC,KAAA,EAAa;QAAA,C;WAGrCf,aAAA,EAAAgB,GAAA,CAAAC,KAAA;IAiCA,C;;;;;;;;SAvCJP,E;CA2CJ;AA/DyC,SAAAO,MAAAC,KAAA,EAAAC,UAAA;EAAA,IA2B3BD,KAAA,CAAAE,aAAA;IACF,MAAAC,gBAAA;IAA8C,KACzC,OAAAC,MAAA,EAAAC,SAAA,CAAyB,IAAIC,MAAA,CAAAC,OAAA,CAAeP,KAAA,CAAAE,aAAmB;MAClEC,gBAAA,CAAAK,IAAA,CACEf,IAAA,CAAC;QAAAC,SAAA,EACY,GAAAtB,SAAA,UAAsB;QAAA,mBAChBiC,SAAA,CAAAI,IAAA;QAAA,eACJL,MAAA;QAAAT,QAAA,EAGbF,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAtB,SAAA,gBAA4B;UAAAuB,QAAA,EAAGU,SAAA,CAAAK;QAAA,C;SAF1C,CAACN,MAAA,EAAQH,UAAA,EAAAU,IAAA,CAAiB;IAAA;IAAA,OAOnClB,IAAA,CAAC;MAAAC,SAAA,EAAe,GAAAtB,SAAA,SAAqB;MAAAuB,QAAA,EAClCQ;IAAA,GADyCF,UAAA;EAAA;IAAA,IAIrCD,KAAA,CAAAA,KAAA;MAAA,OAEPP,IAAA,CAAC;QAAAC,SAAA,EACY,GAAAtB,SAAA,kBAA8B4B,KAAA,CAAAA,KAAA,CAAAY,IAAA,EAAkB;QAAA,mBAC1CZ,KAAA,CAAAA,KAAA,CAAAS,IAAA;QAAAd,QAAA,EAGhBK,KAAA,CAAAA,KAAA,CAAAU;MAAA,GAFIT,UAAA;IAAA;EAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"RenderVersionFieldsToDiff.js","names":["c","_c","baseClass","ShimmerEffect","React","Fragment","useEffect","RenderVersionFieldsToDiff","t0","$","versionFields","hasMounted","setHasMounted","useState","t1","t2","Symbol","for","t3","_jsx","className","children","height","width","map","_temp","field","fieldIndex","fieldByLocale","LocaleComponents","locale","baseField","Object","entries","push","path","CustomComponent","join","type"],"sources":["../../../../src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx"],"sourcesContent":["'use client'\nconst baseClass = 'render-field-diffs'\nimport type { VersionField } from 'payload'\n\nimport './index.scss'\n\nimport { ShimmerEffect } from '@payloadcms/ui'\nimport React, { Fragment, useEffect } from 'react'\n\nexport const RenderVersionFieldsToDiff = ({\n  versionFields,\n}: {\n  versionFields: VersionField[]\n}): React.ReactNode => {\n  const [hasMounted, setHasMounted] = React.useState(false)\n\n  // defer rendering until after the first mount as the CSS is loaded with Emotion\n  // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  return (\n    <div className={baseClass}>\n      {!hasMounted ? (\n        <Fragment>\n          <ShimmerEffect height=\"8rem\" width=\"100%\" />\n        </Fragment>\n      ) : (\n        versionFields?.map((field, fieldIndex) => {\n          if (field.fieldByLocale) {\n            const LocaleComponents: React.ReactNode[] = []\n            for (const [locale, baseField] of Object.entries(field.fieldByLocale)) {\n              LocaleComponents.push(\n                <div\n                  className={`${baseClass}__locale`}\n                  data-field-path={baseField.path}\n                  data-locale={locale}\n                  key={[locale, fieldIndex].join('-')}\n                >\n                  <div className={`${baseClass}__locale-value`}>{baseField.CustomComponent}</div>\n                </div>,\n              )\n            }\n            return (\n              <div className={`${baseClass}__field`} key={fieldIndex}>\n                {LocaleComponents}\n              </div>\n            )\n          } else if (field.field) {\n            return (\n              <div\n                className={`${baseClass}__field field__${field.field.type}`}\n                data-field-path={field.field.path}\n                key={fieldIndex}\n              >\n                {field.field.CustomComponent}\n              </div>\n            )\n          }\n\n          return null\n        })\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,MAAMC,SAAA,GAAY;AAKlB,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,IAASC,QAAQ,EAAEC,SAAS,QAAQ;AAE3C,OAAO,MAAMC,yBAAA,GAA4BC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS;EAAA,IAAAF,EAIzC;EACC,OAAAG,UAAA,EAAAC,aAAA,IAAoCR,KAAA,CAAAS,QAAA,MAAe;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAN,CAAA,QAAAO,MAAA,CAAAC,GAAA;IAIzCH,EAAA,GAAAA,CAAA;MACRF,aAAA,KAAc;IAAA;IACbG,EAAA;IAAEN,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAD,EAAA,GAAAL,CAAA;IAAAM,EAAA,GAAAN,CAAA;EAAA;EAFLH,SAAA,CAAUQ,EAEV,EAAGC,EAAE;EAAA,IAAAG,EAAA;EAAA,IAAAT,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAC,aAAA;IAGHQ,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAlB,SAAA;MAAAmB,QAAA,EACE,CAACV,UAAA,GACAQ,IAAA,CAAAd,QAAA;QAAAgB,QAAA,EACEF,IAAA,CAAAhB,aAAA;UAAAmB,MAAA,EAAsB;UAAAC,KAAA,EAAa;QAAA,C;WAGrCb,aAAA,EAAAc,GAAA,CAAAC,KAAA;IAiCA,C;;;;;;;SAvCJP,E;CA2CJ;AAzDyC,SAAAO,MAAAC,KAAA,EAAAC,UAAA;EAAA,IAqB3BD,KAAA,CAAAE,aAAA;IACF,MAAAC,gBAAA;IAA8C,KACzC,OAAAC,MAAA,EAAAC,SAAA,CAAyB,IAAIC,MAAA,CAAAC,OAAA,CAAeP,KAAA,CAAAE,aAAmB;MAClEC,gBAAA,CAAAK,IAAA,CACEf,IAAA,CAAC;QAAAC,SAAA,EACY,GAAAlB,SAAA,UAAsB;QAAA,mBAChB6B,SAAA,CAAAI,IAAA;QAAA,eACJL,MAAA;QAAAT,QAAA,EAGbF,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAlB,SAAA,gBAA4B;UAAAmB,QAAA,EAAGU,SAAA,CAAAK;QAAA,C;SAF1C,CAACN,MAAA,EAAQH,UAAA,EAAAU,IAAA,CAAiB;IAAA;IAAA,OAOnClB,IAAA,CAAC;MAAAC,SAAA,EAAe,GAAAlB,SAAA,SAAqB;MAAAmB,QAAA,EAClCQ;IAAA,GADyCF,UAAA;EAAA;IAAA,IAIrCD,KAAA,CAAAA,KAAA;MAAA,OAEPP,IAAA,CAAC;QAAAC,SAAA,EACY,GAAAlB,SAAA,kBAA8BwB,KAAA,CAAAA,KAAA,CAAAY,IAAA,EAAkB;QAAA,mBAC1CZ,KAAA,CAAAA,KAAA,CAAAS,IAAA;QAAAd,QAAA,EAGhBK,KAAA,CAAAA,KAAA,CAAAU;MAAA,GAFIT,UAAA;IAAA;EAAA;EAAA;AAAA","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/buildVersionFields.d.ts

@@ -2,6 +2,7 @@ import type { I18nClient } from '@payloadcms/translations';
 import { type ClientFieldSchemaMap, type Field, type FieldDiffClientProps, type FieldDiffServerProps, type FieldTypes, type PayloadComponent, type PayloadRequest, type SanitizedFieldPermissions, type VersionField } from 'payload';
 export type BuildVersionFieldsArgs = {
     clientSchemaMap: ClientFieldSchemaMap;
+    comparisonSiblingData: object;
     customDiffComponents: Partial<Record<FieldTypes, PayloadComponent<FieldDiffServerProps, FieldDiffClientProps>>>;
     entitySlug: string;
     fieldPermissions: {
@@ -10,15 +11,13 @@ export type BuildVersionFieldsArgs = {
     fields: Field[];
     i18n: I18nClient;
     modifiedOnly: boolean;
-    nestingLevel?: number;
     parentIndexPath: string;
     parentIsLocalized: boolean;
     parentPath: string;
     parentSchemaPath: string;
     req: PayloadRequest;
     selectedLocales: string[];
-    versionFromSiblingData: object;
-    versionToSiblingData: object;
+    versionSiblingData: object;
 };
 /**
  * Build up an object that contains rendered diff components for each field.
@@ -27,7 +26,7 @@ export type BuildVersionFieldsArgs = {
  * Here, the server is responsible for traversing through the document data and building up this
  * version state object.
  */
-export declare const buildVersionFields: ({ clientSchemaMap, customDiffComponents, entitySlug, fieldPermissions, fields, i18n, modifiedOnly, nestingLevel, parentIndexPath, parentIsLocalized, parentPath, parentSchemaPath, req, selectedLocales, versionFromSiblingData, versionToSiblingData, }: BuildVersionFieldsArgs) => {
+export declare const buildVersionFields: ({ clientSchemaMap, comparisonSiblingData, customDiffComponents, entitySlug, fieldPermissions, fields, i18n, modifiedOnly, parentIndexPath, parentIsLocalized, parentPath, parentSchemaPath, req, selectedLocales, versionSiblingData, }: BuildVersionFieldsArgs) => {
     versionFields: VersionField[];
 };
 //# sourceMappingURL=buildVersionFields.d.ts.map