feat(next): version view overhaul (#12027)

#11769 improved the lexical version view diff component. This PR improves the rest of the version view. ## What changed - Column layout when selecting a version: - Previously: Selected version on the left, latest version on the left - Now: Previous version on the left, previous version on the right (mimics behavior of GitHub) - Locale selector now displayed in pill selector, rather than react-select - Smoother, more reliable locale, modifiedOnly and version selection. Now uses clean event callbacks rather than useEffects - React-diff-viewer-continued has been replaced with the html differ we use in lexical - Updated Design for all field diffs - Version columns now have a clearly defined separator line - Fixed collapsibles showing in version view despite having no modified fields if modifiedOnly is true - New, redesigned header ## Screenshots ### Before ![CleanShot 2025-04-11 at 20 10 03@2x](https://github.com/user-attachments/assets/a93a500a-3cdd-4cf0-84dd-cf5481aac2b3) ![CleanShot 2025-04-11 at 20 10 28@2x](https://github.com/user-attachments/assets/59bc5885-cbaf-49ea-8d1d-8d145463fd80) ### After ![Screenshot 2025-06-09 at 17 43 49@2x](https://github.com/user-attachments/assets/f6ff0369-76c9-4c1c-9aa7-cbd88806ddc1) ![Screenshot 2025-06-09 at 17 44 50@2x](https://github.com/user-attachments/assets/db93a3db-48d6-4e5d-b080-86a34fff5d22) ![Screenshot 2025-06-09 at 17 45 19@2x](https://github.com/user-attachments/assets/27b6c720-05fe-4957-85af-1305d6b65cfd) ![Screenshot 2025-06-09 at 17 45 34@2x](https://github.com/user-attachments/assets/6d42f458-515a-4611-b27a-f4d6bafbf555)
2025-06-16 04:58:03 -07:00
parent 9943b3508d
commit 4e2e4d2aed
182 changed files with 4795 additions and 2211 deletions
--- a/test/admin/e2e/list-view/e2e.spec.ts
+++ b/test/admin/e2e/list-view/e2e.spec.ts
@@ -163,7 +163,7 @@ describe('List View', () => {
      await expect(page.locator('.list-controls__columns.rah-static--height-auto')).toBeVisible()

      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('ID'),
        })
        .click()
@@ -358,11 +358,11 @@ describe('List View', () => {
      await page.locator('.list-controls__toggle-columns').click()

      // wait until the column toggle UI is visible and fully expanded
-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()
      await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('ID')

      // ensure the ID column is active
-      const idButton = page.locator('.column-selector .column-selector__column', {
+      const idButton = page.locator('.pill-selector .pill-selector__pill', {
        hasText: exactText('ID'),
      })

@@ -370,7 +370,7 @@ describe('List View', () => {

      const buttonClasses = await idButton.getAttribute('class')

-      if (buttonClasses && !buttonClasses.includes('column-selector__column--active')) {
+      if (buttonClasses && !buttonClasses.includes('pill-selector__pill--selected')) {
        await idButton.click()
        await expect(page.locator(tableRowLocator).first().locator('.cell-id')).toBeVisible()
      }
@@ -827,10 +827,10 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await page.locator('.list-controls__toggle-columns').click()

-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()

      await expect(
-        page.locator(`.column-selector .column-selector__column`, {
+        page.locator(`.pill-selector .pill-selector__pill`, {
          hasText: exactText('Hidden Field'),
        }),
      ).toBeHidden()
@@ -840,10 +840,10 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await page.locator('.list-controls__toggle-columns').click()

-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()

      await expect(
-        page.locator(`.column-selector .column-selector__column`, {
+        page.locator(`.pill-selector .pill-selector__pill`, {
          hasText: exactText('Admin Hidden Field'),
        }),
      ).toBeVisible()
@@ -853,11 +853,11 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await page.locator('.list-controls__toggle-columns').click()

-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()

      // Check if "Disable List Column Text" is not present in the column options
      await expect(
-        page.locator(`.column-selector .column-selector__column`, {
+        page.locator(`.pill-selector .pill-selector__pill`, {
          hasText: exactText('Disable List Column Text'),
        }),
      ).toBeHidden()
@@ -867,11 +867,11 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await page.locator('.list-controls__toggle-columns').click()

-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()

      // Check if "Disable List Filter Text" is present in the column options
      await expect(
-        page.locator(`.column-selector .column-selector__column`, {
+        page.locator(`.pill-selector .pill-selector__pill`, {
          hasText: exactText('Disable List Filter Text'),
        }),
      ).toBeVisible()
@@ -895,7 +895,7 @@ describe('List View', () => {

      await openListColumns(page, {})
      const numberOfColumns = await page.locator(tableHeaders).count()
-      await expect(page.locator('.column-selector')).toBeVisible()
+      await expect(page.locator('.pill-selector')).toBeVisible()
      await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('ID')

      await toggleColumn(page, { columnLabel: 'ID', columnName: 'id', targetState: 'off' })
@@ -960,7 +960,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Group > Some Text Field'),
        })
        .click()
@@ -974,7 +974,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Text Field In Unnamed Group'),
        })
        .click()
@@ -988,7 +988,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await expect(
-        page.locator('.column-selector .column-selector__column', {
+        page.locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Group'),
        }),
      ).toBeHidden()
@@ -1003,7 +1003,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await expect(
-        page.locator('.column-selector .column-selector__column', {
+        page.locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Group With Custom Cell'),
        }),
      ).toBeVisible()
@@ -1020,14 +1020,14 @@ describe('List View', () => {

      // Enable top-level column
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Some Text Field'),
        })
        .click()

      // Enable group column
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Group > Some Text Field'),
        })
        .click()
@@ -1046,7 +1046,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Tab > Nested Text Field In Named Tab'),
        })
        .click()
@@ -1060,7 +1060,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Nested Text Field In Unnamed Tab'),
        })
        .click()
@@ -1076,7 +1076,7 @@ describe('List View', () => {
      await page.reload()

      await expect(
-        page.locator('.list-controls .column-selector .column-selector__column').first(),
+        page.locator('.list-controls .pill-selector .pill-selector__pill').first(),
      ).toHaveText('Number')

      await expect(page.locator('table thead tr th').nth(1)).toHaveText('Number')
@@ -1113,7 +1113,7 @@ describe('List View', () => {
      // ensure that the columns are in the correct order
      await expect(
        page
-          .locator('[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column')
+          .locator('[id^=list-drawer_1_] .list-controls .pill-selector .pill-selector__pill')
          .first(),
      ).toHaveText('Number')
    })
@@ -1150,11 +1150,11 @@ describe('List View', () => {

      const columnContainer = page.locator('.list-controls__columns').first()

-      const column = columnContainer.locator(`.column-selector .column-selector__column`, {
+      const column = columnContainer.locator(`.pill-selector .pill-selector__pill`, {
        hasText: exactText('ID'),
      })

-      await expect(column).not.toHaveClass(/column-selector__column--active/)
+      await expect(column).not.toHaveClass(/pill-selector__pill--selected/)
    })

    test('should retain preferences when changing drawer collections', async () => {
@@ -1215,9 +1215,9 @@ describe('List View', () => {
      // ensure that the "id" column is still deselected
      await expect(
        page
-          .locator('[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column')
+          .locator('[id^=list-drawer_1_] .list-controls .pill-selector .pill-selector__pill')
          .first(),
-      ).not.toHaveClass('column-selector__column--active')
+      ).not.toHaveClass('pill-selector__pill--selected')

      // select the "Post" collection again
      await collectionSelector.click()
@@ -1231,9 +1231,9 @@ describe('List View', () => {
      // ensure that the "number" column is still deselected
      await expect(
        page
-          .locator('[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column')
+          .locator('[id^=list-drawer_1_] .list-controls .pill-selector .pill-selector__pill')
          .first(),
-      ).not.toHaveClass('column-selector__column--active')
+      ).not.toHaveClass('pill-selector__pill--selected')
    })

    test('should render custom table cell component', async () => {
@@ -1418,7 +1418,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Group > Some Text Field'),
        })
        .click()
@@ -1450,7 +1450,7 @@ describe('List View', () => {
      await page.goto(postsUrl.list)
      await openColumnControls(page)
      await page
-        .locator('.column-selector .column-selector__column', {
+        .locator('.pill-selector .pill-selector__pill', {
          hasText: exactText('Named Tab > Nested Text Field In Named Tab'),
        })
        .click()
@@ -1492,13 +1492,13 @@ describe('List View', () => {
      await page.waitForURL(/sort=title/)

      const columnAfterSort = page.locator(
-        `.list-controls__columns .column-selector .column-selector__column`,
+        `.list-controls__columns .pill-selector .pill-selector__pill`,
        {
          hasText: exactText('ID'),
        },
      )

-      await expect(columnAfterSort).not.toHaveClass('column-selector__column--active')
+      await expect(columnAfterSort).not.toHaveClass('pill-selector__pill--selected')
      await expect(page.locator('#heading-id')).toBeHidden()
      await expect(page.locator('.cell-id')).toHaveCount(0)
    })
@@ -1522,13 +1522,13 @@ describe('List View', () => {
      await page.locator('#heading-_status').waitFor({ state: 'visible' })

      const columnAfterSort = page.locator(
-        `.list-controls__columns .column-selector .column-selector__column`,
+        `.list-controls__columns .pill-selector .pill-selector__pill`,
        {
          hasText: exactText('Status'),
        },
      )

-      await expect(columnAfterSort).toHaveClass(/column-selector__column--active/)
+      await expect(columnAfterSort).toHaveClass(/pill-selector__pill--selected/)
      await expect(page.locator('#heading-_status')).toBeVisible()
      await expect(page.locator('.cell-_status').first()).toBeVisible()

@@ -1566,13 +1566,13 @@ describe('List View', () => {

      // ensure the column is still visible
      const columnAfterSecondSort = page.locator(
-        `.list-controls__columns .column-selector .column-selector__column`,
+        `.list-controls__columns .pill-selector .pill-selector__pill`,
        {
          hasText: exactText('Status'),
        },
      )

-      await expect(columnAfterSecondSort).toHaveClass(/column-selector__column--active/)
+      await expect(columnAfterSecondSort).toHaveClass(/pill-selector__pill--selected/)
      await expect(page.locator('#heading-_status')).toBeVisible()
      await expect(page.locator('.cell-_status').first()).toBeVisible()
    })
@@ -1591,7 +1591,7 @@ describe('List View', () => {
      await page.locator('.list-controls__toggle-columns').click()

      await expect(
-        page.locator('.column-selector__column', {
+        page.locator('.pill-selector__pill', {
          hasText: exactText('Title'),
        }),
      ).toHaveText('Title')
@@ -1620,7 +1620,7 @@ describe('List View', () => {
      await page.locator('.list-controls__toggle-columns').click()
      // expecting the label to fall back to english as default fallbackLng
      await expect(
-        page.locator('.column-selector__column', {
+        page.locator('.pill-selector__pill', {
          hasText: exactText('Title'),
        }),
      ).toHaveText('Title')
--- a/test/database/up-down-migration/migrations/20250611_163948.ts
+++ b/test/database/up-down-migration/migrations/20250611_163948.ts
@@ -1,4 +1,4 @@
-import type { MigrateDownArgs, MigrateUpArgs} from '@payloadcms/db-postgres';
+import type { MigrateDownArgs, MigrateUpArgs } from '@payloadcms/db-postgres'

 import { sql } from '@payloadcms/db-postgres'

--- a/test/fields/collections/Text/e2e.spec.ts
+++ b/test/fields/collections/Text/e2e.spec.ts
@@ -84,7 +84,7 @@ describe('Text', () => {
      const { columnContainer } = await openListColumns(page, {})

      await expect(
-        columnContainer.locator('.column-selector__column', {
+        columnContainer.locator('.pill-selector__pill', {
          hasText: exactText('Hidden Text Field'),
        }),
      ).toBeHidden()
@@ -110,7 +110,7 @@ describe('Text', () => {
      const { columnContainer } = await openListColumns(page, {})

      await expect(
-        columnContainer.locator('.column-selector__column', {
+        columnContainer.locator('.pill-selector__pill', {
          hasText: exactText('Disabled Text Field'),
        }),
      ).toBeHidden()
@@ -138,7 +138,7 @@ describe('Text', () => {
      const { columnContainer } = await openListColumns(page, {})

      await expect(
-        columnContainer.locator('.column-selector__column', {
+        columnContainer.locator('.pill-selector__pill', {
          hasText: exactText('Admin Hidden Text Field'),
        }),
      ).toBeVisible()
@@ -184,7 +184,7 @@ describe('Text', () => {
    await page.goto(url.list)
    await openListColumns(page, {})
    await expect(
-      page.locator(`.column-selector .column-selector__column`, {
+      page.locator(`.pill-selector .pill-selector__pill`, {
        hasText: exactText('Disable List Column Text'),
      }),
    ).toBeHidden()
@@ -200,7 +200,7 @@ describe('Text', () => {
    await toggleColumn(page, {
      targetState: 'on',
      columnLabel: 'Text en',
-      columnName: 'localizedText',
+      columnName: 'i18nText',
    })

    const textCell = page.locator('.row-1 .cell-i18nText')
--- a/test/helpers/e2e/reorderColumns.ts
+++ b/test/helpers/e2e/reorderColumns.ts
@@ -29,13 +29,13 @@ export const reorderColumns = async (
  await expect(page.locator(`${columnContainerSelector}.rah-static--height-auto`)).toBeVisible()

  const fromBoundingBox = await columnContainer
-    .locator(`.column-selector .column-selector__column`, {
+    .locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText(fromColumn),
    })
    .boundingBox()

  const toBoundingBox = await columnContainer
-    .locator(`.column-selector .column-selector__column`, {
+    .locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText(toColumn),
    })
    .boundingBox()
@@ -51,9 +51,9 @@ export const reorderColumns = async (
  await page.mouse.move(toBoundingBox.x - 2, toBoundingBox.y - 2, { steps: 10 })
  await page.mouse.up()

-  await expect(
-    columnContainer.locator('.column-selector .column-selector__column').first(),
-  ).toHaveText(fromColumn)
+  await expect(columnContainer.locator('.pill-selector .pill-selector__pill').first()).toHaveText(
+    fromColumn,
+  )

  await expect(page.locator('table thead tr th').nth(1).first()).toHaveText(fromColumn)
  // TODO: This wait makes sure the preferences are actually saved. Just waiting for the UI to update is not enough. We should replace this wait
--- a/test/helpers/e2e/toggleColumn.ts
+++ b/test/helpers/e2e/toggleColumn.ts
@@ -30,12 +30,12 @@ export const toggleColumn = async (
    columnContainerSelector,
  })

-  const column = columnContainer.locator(`.column-selector .column-selector__column`, {
+  const column = columnContainer.locator(`.pill-selector .pill-selector__pill`, {
    hasText: exactText(columnLabel),
  })

  const isActiveBeforeClick = await column.evaluate((el) =>
-    el.classList.contains('column-selector__column--active'),
+    el.classList.contains('pill-selector__pill--selected'),
  )

  const targetState =
@@ -52,10 +52,10 @@ export const toggleColumn = async (

  if (targetState === 'off') {
    // no class
-    await expect(column).not.toHaveClass(/column-selector__column--active/)
+    await expect(column).not.toHaveClass(/pill-selector__pill--selected/)
  } else {
    // has class
-    await expect(column).toHaveClass(/column-selector__column--active/)
+    await expect(column).toHaveClass(/pill-selector__pill--selected/)
  }

  if (expectURLChange && columnName && requiresToggle) {
--- a/test/helpers/reInitEndpoint.ts
+++ b/test/helpers/reInitEndpoint.ts
@@ -24,7 +24,6 @@ const handler: PayloadHandler = async (req) => {
  })

  try {
-    console.log('Calling seedDB')
    await seedDB({
      _payload: payload,
      collectionSlugs: payload.config.collections.map(({ slug }) => slug),
--- a/test/joins/e2e.spec.ts
+++ b/test/joins/e2e.spec.ts
@@ -1,7 +1,6 @@
 import type { Page } from '@playwright/test'

 import { expect, test } from '@playwright/test'
-import { reorderColumns } from 'helpers/e2e/reorderColumns.js'
 import * as path from 'path'
 import { fileURLToPath } from 'url'

@@ -18,6 +17,7 @@ import {
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { navigateToDoc } from '../helpers/e2e/navigateToDoc.js'
+import { reorderColumns } from '../helpers/e2e/reorderColumns.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../helpers/reInitializeDB.js'
 import { RESTClient } from '../helpers/rest.js'
--- a/test/joins/payload-types.ts
+++ b/test/joins/payload-types.ts
@@ -91,6 +91,9 @@ export interface Config {
    folders: Folder;
    'example-pages': ExamplePage;
    'example-posts': ExamplePost;
+    folderPoly1: FolderPoly1;
+    folderPoly2: FolderPoly2;
+    'payload-folders': FolderInterface;
    'payload-locked-documents': PayloadLockedDocument;
    'payload-preferences': PayloadPreference;
    'payload-migrations': PayloadMigration;
@@ -149,6 +152,9 @@ export interface Config {
    folders: {
      children: 'folders' | 'example-pages' | 'example-posts';
    };
+    'payload-folders': {
+      documentsAndFolders: 'payload-folders' | 'folderPoly1' | 'folderPoly2';
+    };
  };
  collectionsSelect: {
    users: UsersSelect<false> | UsersSelect<true>;
@@ -175,6 +181,9 @@ export interface Config {
    folders: FoldersSelect<false> | FoldersSelect<true>;
    'example-pages': ExamplePagesSelect<false> | ExamplePagesSelect<true>;
    'example-posts': ExamplePostsSelect<false> | ExamplePostsSelect<true>;
+    folderPoly1: FolderPoly1Select<false> | FolderPoly1Select<true>;
+    folderPoly2: FolderPoly2Select<false> | FolderPoly2Select<true>;
+    'payload-folders': PayloadFoldersSelect<false> | PayloadFoldersSelect<true>;
    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
@@ -739,6 +748,57 @@ export interface ExamplePost {
  updatedAt: string;
  createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "folderPoly1".
+ */
+export interface FolderPoly1 {
+  id: string;
+  folderPoly1Title?: string | null;
+  folder?: (string | null) | FolderInterface;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-folders".
+ */
+export interface FolderInterface {
+  id: string;
+  name: string;
+  folder?: (string | null) | FolderInterface;
+  documentsAndFolders?: {
+    docs?: (
+      | {
+          relationTo?: 'payload-folders';
+          value: string | FolderInterface;
+        }
+      | {
+          relationTo?: 'folderPoly1';
+          value: string | FolderPoly1;
+        }
+      | {
+          relationTo?: 'folderPoly2';
+          value: string | FolderPoly2;
+        }
+    )[];
+    hasNextPage?: boolean;
+    totalDocs?: number;
+  };
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "folderPoly2".
+ */
+export interface FolderPoly2 {
+  id: string;
+  folderPoly2Title?: string | null;
+  folder?: (string | null) | FolderInterface;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "payload-locked-documents".
@@ -841,6 +901,18 @@ export interface PayloadLockedDocument {
    | ({
        relationTo: 'example-posts';
        value: string | ExamplePost;
+      } | null)
+    | ({
+        relationTo: 'folderPoly1';
+        value: string | FolderPoly1;
+      } | null)
+    | ({
+        relationTo: 'folderPoly2';
+        value: string | FolderPoly2;
+      } | null)
+    | ({
+        relationTo: 'payload-folders';
+        value: string | FolderInterface;
      } | null);
  globalSlug?: string | null;
  user: {
@@ -1216,6 +1288,37 @@ export interface ExamplePostsSelect<T extends boolean = true> {
  updatedAt?: T;
  createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "folderPoly1_select".
+ */
+export interface FolderPoly1Select<T extends boolean = true> {
+  folderPoly1Title?: T;
+  folder?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "folderPoly2_select".
+ */
+export interface FolderPoly2Select<T extends boolean = true> {
+  folderPoly2Title?: T;
+  folder?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-folders_select".
+ */
+export interface PayloadFoldersSelect<T extends boolean = true> {
+  name?: T;
+  folder?: T;
+  documentsAndFolders?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "payload-locked-documents_select".
--- a/test/localization/e2e.spec.ts
+++ b/test/localization/e2e.spec.ts
@@ -122,11 +122,14 @@ describe('Localization', () => {
      await page.locator('#action-save').click()

      await page.locator('text=Versions').click()
-      const firstVersion = findTableRow(page, 'Current Published Version')
+      const firstVersion = findTableRow(page, 'Currently Published')
      await firstVersion.locator('a').click()

-      await expect(page.locator('.select-version-locales__label')).toBeVisible()
-      await expect(page.locator('.select-version-locales .react-select')).not.toContainText(
+      await expect(page.locator('.view-version__toggle-locales')).toBeVisible()
+      await page.locator('.view-version__toggle-locales').click()
+
+      await expect(page.locator('.select-version-locales .pill-selector')).toBeVisible()
+      await expect(page.locator('.select-version-locales .pill-selector')).not.toContainText(
        'FILTERED',
      )
    })
--- a/test/query-presets/e2e.spec.ts
+++ b/test/query-presets/e2e.spec.ts
@@ -330,7 +330,7 @@ describe('Query Presets', () => {

    const { columnContainer } = await toggleColumn(page, { columnLabel: 'ID' })

-    const column = columnContainer.locator(`.column-selector .column-selector__column`, {
+    const column = columnContainer.locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText('ID'),
    })

@@ -338,7 +338,7 @@ describe('Query Presets', () => {
    await clickListMenuItem({ page, menuItemLabel: 'Reset' })

    await openListColumns(page, {})
-    await expect(column).toHaveClass(/column-selector__column--active/)
+    await expect(column).toHaveClass(/pill-selector__pill--selected/)
  })

  test('should only enter modified state when changes are made to an active preset', async () => {
--- a/test/uploads/e2e.spec.ts
+++ b/test/uploads/e2e.spec.ts
@@ -1369,14 +1369,14 @@ describe('Uploads', () => {

    // Show all columns with relations
    await page.locator('.list-controls__toggle-columns').click()
-    await expect(page.locator('.column-selector')).toBeVisible()
-    const imageWithoutPreview2Button = page.locator(`.column-selector .column-selector__column`, {
+    await expect(page.locator('.pill-selector')).toBeVisible()
+    const imageWithoutPreview2Button = page.locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText('Image Without Preview2'),
    })
-    const imageWithPreview3Button = page.locator(`.column-selector .column-selector__column`, {
+    const imageWithPreview3Button = page.locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText('Image With Preview3'),
    })
-    const imageWithoutPreview3Button = page.locator(`.column-selector .column-selector__column`, {
+    const imageWithoutPreview3Button = page.locator(`.pill-selector .pill-selector__pill`, {
      hasText: exactText('Image Without Preview3'),
    })
    await imageWithoutPreview2Button.click()
--- a/test/versions/.gitignore
+++ b/test/versions/.gitignore
@@ -1 +1,2 @@
 uploads
+uploads2
--- a/test/versions/collections/Diff/index.ts
+++ b/test/versions/collections/Diff/index.ts
@@ -143,6 +143,10 @@ export const Diff: CollectionConfig = {
      type: 'point',
      name: 'point',
    },
+    {
+      type: 'json',
+      name: 'json',
+    },
    {
      type: 'radio',
      name: 'radio',
@@ -162,6 +166,29 @@ export const Diff: CollectionConfig = {
      name: 'relationship',
      relationTo: draftCollectionSlug,
    },
+    {
+      type: 'relationship',
+      name: 'relationshipHasMany',
+      hasMany: true,
+      relationTo: draftCollectionSlug,
+    },
+    {
+      type: 'relationship',
+      name: 'relationshipPolymorphic',
+      relationTo: [draftCollectionSlug, 'text'],
+    },
+    {
+      type: 'relationship',
+      name: 'relationshipHasManyPolymorphic',
+      hasMany: true,
+      relationTo: [draftCollectionSlug, 'text'],
+    },
+    {
+      type: 'relationship',
+      name: 'relationshipHasManyPolymorphic2',
+      hasMany: true,
+      relationTo: [draftCollectionSlug, 'text'],
+    },
    {
      name: 'richtext',
      type: 'richText',
@@ -234,8 +261,15 @@ export const Diff: CollectionConfig = {
      relationTo: 'media',
      type: 'upload',
    },
+    {
+      name: 'uploadHasMany',
+      hasMany: true,
+      relationTo: 'media',
+      type: 'upload',
+    },
  ],
  versions: {
+    drafts: true,
    maxPerDoc: 35,
  },
 }
--- a/test/versions/collections/Media2.ts
+++ b/test/versions/collections/Media2.ts
@@ -0,0 +1,17 @@
+import type { CollectionConfig } from 'payload'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { media2CollectionSlug } from '../slugs.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const Media2: CollectionConfig = {
+  fields: [],
+  slug: media2CollectionSlug,
+  upload: {
+    staticDir: path.resolve(dirname, './uploads2'),
+  },
+}
--- a/test/versions/config.ts
+++ b/test/versions/config.ts
@@ -15,6 +15,7 @@ import DraftsWithValidate from './collections/DraftsWithValidate.js'
 import ErrorOnUnpublish from './collections/ErrorOnUnpublish.js'
 import LocalizedPosts from './collections/Localized.js'
 import { Media } from './collections/Media.js'
+import { Media2 } from './collections/Media2.js'
 import Posts from './collections/Posts.js'
 import { TextCollection } from './collections/Text.js'
 import VersionPosts from './collections/Versions.js'
@@ -51,6 +52,7 @@ export default buildConfigWithDefaults({
    Diff,
    TextCollection,
    Media,
+    Media2,
  ],
  globals: [
    AutosaveGlobal,
--- a/test/versions/e2e.spec.ts
+++ b/test/versions/e2e.spec.ts
@@ -202,7 +202,7 @@ describe('Versions', () => {
      const versionID = await row2.locator('.cell-id').textContent()
      await page.goto(`${savedDocURL}/versions/${versionID}`)
      await expect(page.locator('.render-field-diffs')).toBeVisible()
-      await page.locator('.restore-version__button').click()
+      await page.locator('.restore-version__restore-as-draft-button').click()
      await page.locator('button:has-text("Confirm")').click()
      await page.waitForURL(savedDocURL)
      await expect(page.locator('#field-title')).toHaveValue('v1')
@@ -220,7 +220,7 @@ describe('Versions', () => {
      })

      await page.goto(`${url.edit(publishedDoc.id)}/versions`)
-      await expect(page.locator('main.versions')).toContainText('Current Published Version')
+      await expect(page.locator('main.versions')).toContainText('Currently Published')
    })

    test('should show unpublished version status in versions view', async () => {
@@ -1245,6 +1245,7 @@ describe('Versions', () => {
    beforeEach(async () => {
      const newPost = await payload.create({
        collection: draftCollectionSlug,
+        depth: 0,
        data: {
          title: 'new post',
          description: 'new description',
@@ -1257,6 +1258,7 @@ describe('Versions', () => {
        collection: draftCollectionSlug,
        id: postID,
        draft: true,
+        depth: 0,
        data: {
          title: 'draft post',
          description: 'draft description',
@@ -1272,6 +1274,8 @@ describe('Versions', () => {

      const versions = await payload.findVersions({
        collection: draftCollectionSlug,
+        limit: 1,
+        depth: 0,
        where: {
          parent: { equals: postID },
        },
@@ -1282,6 +1286,8 @@ describe('Versions', () => {
      const diffDoc = (
        await payload.find({
          collection: diffCollectionSlug,
+          depth: 0,
+          limit: 1,
        })
      ).docs[0] as Diff

@@ -1290,6 +1296,8 @@ describe('Versions', () => {
      const versionDiff = (
        await payload.findVersions({
          collection: diffCollectionSlug,
+          depth: 0,
+          limit: 1,
          where: {
            parent: { equals: diffID },
          },
@@ -1299,25 +1307,25 @@ describe('Versions', () => {
      versionDiffID = versionDiff.id
    })

-    async function navigateToVersionDiff() {
+    async function navigateToDraftVersionView() {
      const versionURL = `${serverURL}/admin/collections/${draftCollectionSlug}/${postID}/versions/${versionID}`
      await page.goto(versionURL)
      await expect(page.locator('.render-field-diffs').first()).toBeVisible()
    }

-    async function navigateToVersionFieldsDiff() {
+    async function navigateToDiffVersionView() {
      const versionURL = `${serverURL}/admin/collections/${diffCollectionSlug}/${diffID}/versions/${versionDiffID}`
      await page.goto(versionURL)
      await expect(page.locator('.render-field-diffs').first()).toBeVisible()
    }

    test('should render diff', async () => {
-      await navigateToVersionDiff()
+      await navigateToDraftVersionView()
      expect(true).toBe(true)
    })

    test('should render diff for nested fields', async () => {
-      await navigateToVersionDiff()
+      await navigateToDraftVersionView()

      const blocksDiffLabel = page.getByText('Blocks Field', { exact: true })
      await expect(blocksDiffLabel).toBeVisible()
@@ -1336,7 +1344,7 @@ describe('Versions', () => {
    })

    test('should render diff collapser for nested fields', async () => {
-      await navigateToVersionDiff()
+      await navigateToDraftVersionView()

      const blocksDiffLabel = page.getByText('Blocks Field', { exact: true })
      await expect(blocksDiffLabel).toBeVisible()
@@ -1345,10 +1353,15 @@ describe('Versions', () => {
      const blocksDiff = page.locator('.iterable-diff', { has: blocksDiffLabel })
      await expect(blocksDiff).toBeVisible()

+      // Collapse to show iterable fields change count
+      await blocksDiff.locator('.diff-collapser__toggle-button').first().click()
+
      // Expect iterable change count to be visible
      const iterableChangeCount = blocksDiff.locator('.diff-collapser__field-change-count').first()
      await expect(iterableChangeCount).toHaveText('2 changed fields')

+      await blocksDiff.locator('.diff-collapser__toggle-button').first().click()
+
      // Expect iterable rows to be visible
      const blocksDiffRows = blocksDiff.locator('.iterable-diff__rows')
      await expect(blocksDiffRows).toBeVisible()
@@ -1357,11 +1370,13 @@ describe('Versions', () => {
      const firstBlocksDiffRow = blocksDiffRows.locator('.iterable-diff__row').first()
      await expect(firstBlocksDiffRow).toBeVisible()

+      await firstBlocksDiffRow.locator('.diff-collapser__toggle-button').first().click()
      // Expect first row change count to be visible
      const firstBlocksDiffRowChangeCount = firstBlocksDiffRow
        .locator('.diff-collapser__field-change-count')
        .first()
      await expect(firstBlocksDiffRowChangeCount).toHaveText('2 changed fields')
+      await firstBlocksDiffRow.locator('.diff-collapser__toggle-button').first().click()

      // Expect collapser content to be visible
      const diffCollapserContent = blocksDiffRows.locator('.diff-collapser__content')
@@ -1385,31 +1400,27 @@ describe('Versions', () => {
    })

    test('correctly renders diff for array fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInArray = page.locator('[data-field-path="array.0.textInArray"]')

-      await expect(textInArray.locator('tr').nth(1).locator('td').nth(1)).toHaveText('textInArray')
-      await expect(textInArray.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textInArray2')
+      await expect(textInArray.locator('.html-diff__diff-old')).toHaveText('textInArray')
+      await expect(textInArray.locator('.html-diff__diff-new')).toHaveText('textInArray2')
    })

    test('correctly renders diff for localized array fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInArray = page
        .locator('[data-field-path="arrayLocalized"][data-locale="en"]')
        .locator('[data-field-path="arrayLocalized.0.textInArrayLocalized"]')

-      await expect(textInArray.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        'textInArrayLocalized',
-      )
-      await expect(textInArray.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        'textInArrayLocalized2',
-      )
+      await expect(textInArray.locator('.html-diff__diff-old')).toHaveText('textInArrayLocalized')
+      await expect(textInArray.locator('.html-diff__diff-new')).toHaveText('textInArrayLocalized2')
    })

    test('correctly renders modified-only diff for localized array fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInArrayES = page.locator('[data-field-path="arrayLocalized"][data-locale="es"]')

@@ -1421,161 +1432,153 @@ describe('Versions', () => {
    })

    test('correctly renders diff for block fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInBlock = page.locator('[data-field-path="blocks.0.textInBlock"]')

-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(1)).toHaveText('textInBlock')
-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textInBlock2')
+      await expect(textInBlock.locator('.html-diff__diff-old')).toHaveText('textInBlock')
+      await expect(textInBlock.locator('.html-diff__diff-new')).toHaveText('textInBlock2')
    })

    test('correctly renders diff for collapsibles within block fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInBlock = page.locator(
        '[data-field-path="blocks.1.textInCollapsibleInCollapsibleBlock"]',
      )

-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-old')).toHaveText(
        'textInCollapsibleInCollapsibleBlock',
      )
-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-new')).toHaveText(
        'textInCollapsibleInCollapsibleBlock2',
      )
    })

    test('correctly renders diff for rows within block fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInBlock = page.locator('[data-field-path="blocks.1.textInRowInCollapsibleBlock"]')

-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-old')).toHaveText(
        'textInRowInCollapsibleBlock',
      )
-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-new')).toHaveText(
        'textInRowInCollapsibleBlock2',
      )
    })

    test('correctly renders diff for named tabs within block fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInBlock = page.locator(
        '[data-field-path="blocks.2.namedTab1InBlock.textInNamedTab1InBlock"]',
      )

-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        'textInNamedTab1InBlock',
-      )
-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-old')).toHaveText('textInNamedTab1InBlock')
+      await expect(textInBlock.locator('.html-diff__diff-new')).toHaveText(
        'textInNamedTab1InBlock2',
      )
    })

    test('correctly renders diff for unnamed tabs within block fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInBlock = page.locator('[data-field-path="blocks.2.textInUnnamedTab2InBlock"]')

-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-old')).toHaveText(
        'textInUnnamedTab2InBlock',
      )
-      await expect(textInBlock.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+      await expect(textInBlock.locator('.html-diff__diff-new')).toHaveText(
        'textInUnnamedTab2InBlock2',
      )
    })

    test('correctly renders diff for checkbox fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const checkbox = page.locator('[data-field-path="checkbox"]')

-      await expect(checkbox.locator('tr').nth(1).locator('td').nth(1)).toHaveText('true')
-      await expect(checkbox.locator('tr').nth(1).locator('td').nth(3)).toHaveText('false')
+      await expect(checkbox.locator('.html-diff__diff-old')).toHaveText('true')
+      await expect(checkbox.locator('.html-diff__diff-new')).toHaveText('false')
    })

    test('correctly renders diff for code fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const code = page.locator('[data-field-path="code"]')

-      await expect(code.locator('tr').nth(1).locator('td').nth(1)).toHaveText('code')
-      await expect(code.locator('tr').nth(1).locator('td').nth(3)).toHaveText('code2')
+      await expect(code.locator('.html-diff__diff-old')).toHaveText('code')
+      await expect(code.locator('.html-diff__diff-new')).toHaveText('code2')
    })

    test('correctly renders diff for collapsible fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const collapsible = page.locator('[data-field-path="textInCollapsible"]')

-      await expect(collapsible.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        'textInCollapsible',
-      )
-      await expect(collapsible.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        'textInCollapsible2',
-      )
+      await expect(collapsible.locator('.html-diff__diff-old')).toHaveText('textInCollapsible')
+      await expect(collapsible.locator('.html-diff__diff-new')).toHaveText('textInCollapsible2')
    })

    test('correctly renders diff for date fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const date = page.locator('[data-field-path="date"]')

-      await expect(date.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        '2021-01-01T00:00:00.000Z',
-      )
-      await expect(date.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        '2023-01-01T00:00:00.000Z',
-      )
+      await expect(date.locator('.html-diff__diff-old')).toContainText(' 2021, ')
+      await expect(date.locator('.html-diff__diff-new')).toContainText(' 2023, ')
+      // Do not check for exact date, as it may vary based on
+      // timezone of the test runner which could cause flakiness
    })

    test('correctly renders diff for email fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const email = page.locator('[data-field-path="email"]')

-      await expect(email.locator('tr').nth(1).locator('td').nth(1)).toHaveText('email@email.com')
-      await expect(email.locator('tr').nth(1).locator('td').nth(3)).toHaveText('email2@email.com')
+      await expect(email.locator('.html-diff__diff-old')).toHaveText('email@email.com')
+      await expect(email.locator('.html-diff__diff-new')).toHaveText('email2@email.com')
    })

    test('correctly renders diff for group fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const group = page.locator('[data-field-path="group.textInGroup"]')

-      await expect(group.locator('tr').nth(1).locator('td').nth(1)).toHaveText('textInGroup')
-      await expect(group.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textInGroup2')
+      await expect(group.locator('.html-diff__diff-old')).toHaveText('textInGroup')
+      await expect(group.locator('.html-diff__diff-new')).toHaveText('textInGroup2')
    })

    test('correctly renders diff for number fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const number = page.locator('[data-field-path="number"]')

-      await expect(number.locator('tr').nth(1).locator('td').nth(1)).toHaveText('1')
-      await expect(number.locator('tr').nth(1).locator('td').nth(3)).toHaveText('2')
+      await expect(number.locator('.html-diff__diff-old')).toHaveText('1')
+      await expect(number.locator('.html-diff__diff-new')).toHaveText('2')
    })

    test('correctly renders diff for point fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const point = page.locator('[data-field-path="point"]')

-      await expect(point.locator('tr').nth(3).locator('td').nth(1)).toHaveText('2')
-      await expect(point.locator('tr').nth(3).locator('td').nth(3)).toHaveText('3')
+      await expect(point.locator('.html-diff__diff-old')).toHaveText('[\n 1,\n 2\n]')
+      await expect(point.locator('.html-diff__diff-new')).toHaveText('[\n 1,\n 3\n]')
    })

    test('correctly renders diff for radio fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const radio = page.locator('[data-field-path="radio"]')

-      await expect(radio.locator('tr').nth(1).locator('td').nth(1)).toHaveText('Option 1')
-      await expect(radio.locator('tr').nth(1).locator('td').nth(3)).toHaveText('Option 2')
+      await expect(radio.locator('.html-diff__diff-old')).toHaveText('Option 1')
+      await expect(radio.locator('.html-diff__diff-new')).toHaveText('Option 2')
    })

    test('correctly renders diff for relationship fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const relationship = page.locator('[data-field-path="relationship"]')

@@ -1583,23 +1586,24 @@ describe('Versions', () => {
        collection: 'draft-posts',
        sort: 'createdAt',
        limit: 3,
+        depth: 0,
      })

-      await expect(relationship.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        String(draftDocs?.docs?.[1]?.id),
-      )
-      await expect(relationship.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        String(draftDocs?.docs?.[2]?.id),
-      )
+      await expect(
+        relationship.locator('.html-diff__diff-old .relationship-diff__info'),
+      ).toHaveText(String(draftDocs?.docs?.[1]?.title))
+      await expect(
+        relationship.locator('.html-diff__diff-new .relationship-diff__info'),
+      ).toHaveText(String(draftDocs?.docs?.[2]?.title))
    })

    test('correctly renders diff for richtext fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const richtext = page.locator('[data-field-path="richtext"]')

-      const oldDiff = richtext.locator('.lexical-diff__diff-old')
-      const newDiff = richtext.locator('.lexical-diff__diff-new')
+      const oldDiff = richtext.locator('.html-diff__diff-old')
+      const newDiff = richtext.locator('.html-diff__diff-new')

      const oldHTML =
        `Fugiat <span data-match-type="delete">essein</span> dolor aleiqua <span data-match-type="delete">cillum</span> proident ad cillum excepteur mollit reprehenderit mollit commodo. Pariatur incididunt non exercitation est mollit nisi <span data-match-type="delete">laboredeleteofficia</span> cupidatat amet commodo commodo proident occaecat.
@@ -1612,7 +1616,7 @@ describe('Versions', () => {
    })

    test('correctly renders diff for richtext fields with custom Diff component', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const richtextWithCustomDiff = page.locator('[data-field-path="richtextWithCustomDiff"]')

@@ -1620,83 +1624,78 @@ describe('Versions', () => {
    })

    test('correctly renders diff for row fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInRow = page.locator('[data-field-path="textInRow"]')

-      await expect(textInRow.locator('tr').nth(1).locator('td').nth(1)).toHaveText('textInRow')
-      await expect(textInRow.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textInRow2')
+      await expect(textInRow.locator('.html-diff__diff-old')).toHaveText('textInRow')
+      await expect(textInRow.locator('.html-diff__diff-new')).toHaveText('textInRow2')
    })

    test('correctly renders diff for select fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const select = page.locator('[data-field-path="select"]')

-      await expect(select.locator('tr').nth(1).locator('td').nth(1)).toHaveText('Option 1')
-      await expect(select.locator('tr').nth(1).locator('td').nth(3)).toHaveText('Option 2')
+      await expect(select.locator('.html-diff__diff-old')).toHaveText('Option 1')
+      await expect(select.locator('.html-diff__diff-new')).toHaveText('Option 2')
    })

    test('correctly renders diff for named tabs', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInNamedTab1 = page.locator('[data-field-path="namedTab1.textInNamedTab1"]')

-      await expect(textInNamedTab1.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        'textInNamedTab1',
-      )
-      await expect(textInNamedTab1.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        'textInNamedTab12',
-      )
+      await expect(textInNamedTab1.locator('.html-diff__diff-old')).toHaveText('textInNamedTab1')
+      await expect(textInNamedTab1.locator('.html-diff__diff-new')).toHaveText('textInNamedTab12')
    })

    test('correctly renders diff for unnamed tabs', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textInUnamedTab2 = page.locator('[data-field-path="textInUnnamedTab2"]')

-      await expect(textInUnamedTab2.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        'textInUnnamedTab2',
-      )
-      await expect(textInUnamedTab2.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+      await expect(textInUnamedTab2.locator('.html-diff__diff-old')).toHaveText('textInUnnamedTab2')
+      await expect(textInUnamedTab2.locator('.html-diff__diff-new')).toHaveText(
        'textInUnnamedTab22',
      )
    })

    test('correctly renders diff for text fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const text = page.locator('[data-field-path="text"]')

-      await expect(text.locator('tr').nth(1).locator('td').nth(1)).toHaveText('text')
-      await expect(text.locator('tr').nth(1).locator('td').nth(3)).toHaveText('text2')
+      await expect(text.locator('.html-diff__diff-old')).toHaveText('text')
+      await expect(text.locator('.html-diff__diff-new')).toHaveText('text2')
    })

    test('correctly renders diff for textArea fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const textArea = page.locator('[data-field-path="textArea"]')

-      await expect(textArea.locator('tr').nth(1).locator('td').nth(1)).toHaveText('textArea')
-      await expect(textArea.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textArea2')
+      await expect(textArea.locator('.html-diff__diff-old')).toHaveText('textArea')
+      await expect(textArea.locator('.html-diff__diff-new')).toHaveText('textArea2')
    })

    test('correctly renders diff for upload fields', async () => {
-      await navigateToVersionFieldsDiff()
+      await navigateToDiffVersionView()

      const upload = page.locator('[data-field-path="upload"]')

      const uploadDocs = await payload.find({
        collection: 'media',
        sort: 'createdAt',
+        depth: 0,
        limit: 2,
      })

-      await expect(upload.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
-        String(uploadDocs?.docs?.[0]?.id),
+      await expect(upload.locator('.html-diff__diff-old .upload-diff__info')).toHaveText(
+        String(uploadDocs?.docs?.[0]?.filename),
      )
-      await expect(upload.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
-        String(uploadDocs?.docs?.[1]?.id),
+      await expect(upload.locator('.html-diff__diff-new .upload-diff__info')).toHaveText(
+        String(uploadDocs?.docs?.[1]?.filename),
      )
    })
  })
--- a/test/versions/payload-types.ts
+++ b/test/versions/payload-types.ts
@@ -82,6 +82,7 @@ export interface Config {
    diff: Diff;
    text: Text;
    media: Media;
+    media2: Media2;
    users: User;
    'payload-jobs': PayloadJob;
    'payload-locked-documents': PayloadLockedDocument;
@@ -105,6 +106,7 @@ export interface Config {
    diff: DiffSelect<false> | DiffSelect<true>;
    text: TextSelect<false> | TextSelect<true>;
    media: MediaSelect<false> | MediaSelect<true>;
+    media2: Media2Select<false> | Media2Select<true>;
    users: UsersSelect<false> | UsersSelect<true>;
    'payload-jobs': PayloadJobsSelect<false> | PayloadJobsSelect<true>;
    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
@@ -384,8 +386,51 @@ export interface Diff {
   * @maxItems 2
   */
  point?: [number, number] | null;
+  json?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
  radio?: ('option1' | 'option2') | null;
  relationship?: (string | null) | DraftPost;
+  relationshipHasMany?: (string | DraftPost)[] | null;
+  relationshipPolymorphic?:
+    | ({
+        relationTo: 'draft-posts';
+        value: string | DraftPost;
+      } | null)
+    | ({
+        relationTo: 'text';
+        value: string | Text;
+      } | null);
+  relationshipHasManyPolymorphic?:
+    | (
+        | {
+            relationTo: 'draft-posts';
+            value: string | DraftPost;
+          }
+        | {
+            relationTo: 'text';
+            value: string | Text;
+          }
+      )[]
+    | null;
+  relationshipHasManyPolymorphic2?:
+    | (
+        | {
+            relationTo: 'draft-posts';
+            value: string | DraftPost;
+          }
+        | {
+            relationTo: 'text';
+            value: string | Text;
+          }
+      )[]
+    | null;
  richtext?: {
    root: {
      type: string;
@@ -425,6 +470,18 @@ export interface Diff {
  text?: string | null;
  textArea?: string | null;
  upload?: (string | null) | Media;
+  uploadHasMany?: (string | Media)[] | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "text".
+ */
+export interface Text {
+  id: string;
+  text: string;
  updatedAt: string;
  createdAt: string;
 }
@@ -448,13 +505,21 @@ export interface Media {
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "text".
+ * via the `definition` "media2".
 */
-export interface Text {
+export interface Media2 {
  id: string;
-  text: string;
  updatedAt: string;
  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
@@ -632,6 +697,10 @@ export interface PayloadLockedDocument {
        relationTo: 'media';
        value: string | Media;
      } | null)
+    | ({
+        relationTo: 'media2';
+        value: string | Media2;
+      } | null)
    | ({
        relationTo: 'users';
        value: string | User;
@@ -898,8 +967,13 @@ export interface DiffSelect<T extends boolean = true> {
      };
  number?: T;
  point?: T;
+  json?: T;
  radio?: T;
  relationship?: T;
+  relationshipHasMany?: T;
+  relationshipPolymorphic?: T;
+  relationshipHasManyPolymorphic?: T;
+  relationshipHasManyPolymorphic2?: T;
  richtext?: T;
  richtextWithCustomDiff?: T;
  textInRow?: T;
@@ -913,8 +987,10 @@ export interface DiffSelect<T extends boolean = true> {
  text?: T;
  textArea?: T;
  upload?: T;
+  uploadHasMany?: T;
  updatedAt?: T;
  createdAt?: T;
+  _status?: T;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
@@ -942,6 +1018,23 @@ export interface MediaSelect<T extends boolean = true> {
  focalX?: T;
  focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media2_select".
+ */
+export interface Media2Select<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "users_select".
--- a/test/versions/seed.ts
+++ b/test/versions/seed.ts
@@ -11,6 +11,7 @@ import {
  autosaveWithValidateCollectionSlug,
  diffCollectionSlug,
  draftCollectionSlug,
+  media2CollectionSlug,
  mediaCollectionSlug,
 } from './slugs.js'
 import { textToLexicalJSON } from './textToLexicalJSON.js'
@@ -36,6 +37,12 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
    file: imageFile,
  })

+  const { id: uploadedImageMedia2 } = await _payload.create({
+    collection: media2CollectionSlug,
+    data: {},
+    file: imageFile,
+  })
+
  const imageFilePath2 = path.resolve(dirname, './image.png')
  const imageFile2 = await getFileByPath(imageFilePath2)

@@ -45,6 +52,12 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
    file: imageFile2,
  })

+  const { id: uploadedImage2Media2 } = await _payload.create({
+    collection: media2CollectionSlug,
+    data: {},
+    file: imageFile2,
+  })
+
  await executePromises(
    [
      () =>
@@ -113,6 +126,20 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
    draft: false,
  })

+  const draft3 = await _payload.create({
+    collection: draftCollectionSlug,
+    data: {
+      _status: 'published',
+      blocksField,
+      description: 'Description2',
+      radio: 'test',
+      title: 'Another Published Title',
+    },
+    depth: 0,
+    overrideAccess: true,
+    draft: false,
+  })
+
  await _payload.create({
    collection: autosaveWithValidateCollectionSlug,
    data: {
@@ -134,10 +161,54 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
    },
  })

-  const diffDoc = await _payload.create({
+  const diffDocDraft = await _payload.create({
    collection: diffCollectionSlug,
    locale: 'en',
    data: {
+      _status: 'draft',
+      text: 'Draft 1',
+    },
+    depth: 0,
+  })
+
+  await _payload.update({
+    collection: diffCollectionSlug,
+    locale: 'en',
+    data: {
+      _status: 'draft',
+      text: 'Draft 2',
+    },
+    depth: 0,
+    id: diffDocDraft.id,
+  })
+
+  await _payload.update({
+    collection: diffCollectionSlug,
+    locale: 'en',
+    data: {
+      _status: 'draft',
+      text: 'Draft 3',
+    },
+    depth: 0,
+    id: diffDocDraft.id,
+  })
+  await _payload.update({
+    collection: diffCollectionSlug,
+    locale: 'en',
+    data: {
+      _status: 'draft',
+      text: 'Draft 4',
+    },
+    depth: 0,
+    id: diffDocDraft.id,
+  })
+
+  const diffDoc = await _payload.update({
+    collection: diffCollectionSlug,
+    locale: 'en',
+    id: diffDocDraft.id,
+    data: {
+      _status: 'published',
      array: [
        {
          textInArray: 'textInArray',
@@ -168,7 +239,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
      ],
      checkbox: true,
      code: 'code',
-      date: '2021-01-01T00:00:00.000Z',
+      date: '2021-04-01T00:00:00.000Z',
      email: 'email@email.com',
      group: {
        textInGroup: 'textInGroup',
@@ -178,8 +249,19 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
      },
      number: 1,
      point: [1, 2],
+      json: {
+        text: 'json',
+        number: 1,
+        boolean: true,
+        array: [
+          {
+            textInArrayInJson: 'textInArrayInJson',
+          },
+        ],
+      },
      radio: 'option1',
      relationship: manyDraftsID,
+      relationshipHasMany: [manyDraftsID],
      richtext: generateLexicalData({
        mediaID: uploadedImage,
        textID: doc1ID,
@@ -192,16 +274,73 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
      textInCollapsible: 'textInCollapsible',
      textInRow: 'textInRow',
      textInUnnamedTab2: 'textInUnnamedTab2',
+      relationshipPolymorphic: {
+        relationTo: 'text',
+        value: doc1ID,
+      },
+      relationshipHasManyPolymorphic: [
+        {
+          relationTo: 'text',
+          value: doc1ID,
+        },
+      ],
+      relationshipHasManyPolymorphic2: [
+        {
+          relationTo: 'text',
+          value: doc1ID,
+        },
+        {
+          relationTo: draftCollectionSlug,
+          value: draft2.id,
+        },
+      ],
      upload: uploadedImage,
+      uploadHasMany: [uploadedImage],
    },
    depth: 0,
  })

+  await _payload.db.updateOne({
+    collection: diffCollectionSlug,
+    id: diffDoc.id,
+    data: {
+      ...diffDoc,
+      createdAt: new Date(new Date(diffDoc.createdAt).getTime() - 2 * 60 * 10000).toISOString(),
+      updatedAt: new Date(new Date(diffDoc.updatedAt).getTime() - 2 * 60 * 10000).toISOString(),
+    },
+  })
+
+  const versions = await _payload.findVersions({
+    collection: diffCollectionSlug,
+    depth: 0,
+    limit: 50,
+    sort: '-createdAt',
+  })
+
+  let i = 0
+  for (const version of versions.docs) {
+    i += 1
+    await _payload.db.updateVersion({
+      id: version.id,
+      collection: diffCollectionSlug,
+      versionData: {
+        ...version.version,
+        createdAt: new Date(
+          new Date(version.createdAt).getTime() - 2 * 60 * 10000 * i,
+        ).toISOString(),
+        updatedAt: new Date(
+          new Date(version.updatedAt).getTime() - 2 * 60 * 10000 * i,
+        ).toISOString(),
+      },
+    })
+  }
+
  const updatedDiffDoc = await _payload.update({
    id: diffDoc.id,
    collection: diffCollectionSlug,
    locale: 'en',
    data: {
+      _status: 'published',
      array: [
        {
          textInArray: 'textInArray2',
@@ -232,7 +371,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
      ],
      checkbox: false,
      code: 'code2',
-      date: '2023-01-01T00:00:00.000Z',
+      date: '2023-04-01T00:00:00.000Z',
      email: 'email2@email.com',
      group: {
        textInGroup: 'textInGroup2',
@@ -241,9 +380,44 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
        textInNamedTab1: 'textInNamedTab12',
      },
      number: 2,
+      json: {
+        text: 'json2',
+        number: 2,
+        boolean: true,
+        array: [
+          {
+            textInArrayInJson: 'textInArrayInJson2',
+          },
+        ],
+      },
      point: [1, 3],
      radio: 'option2',
      relationship: draft2.id,
+      relationshipHasMany: [manyDraftsID, draft2.id],
+      relationshipPolymorphic: {
+        relationTo: draftCollectionSlug,
+        value: draft2.id,
+      },
+      relationshipHasManyPolymorphic: [
+        {
+          relationTo: 'text',
+          value: doc1ID,
+        },
+        {
+          relationTo: draftCollectionSlug,
+          value: draft2.id,
+        },
+      ],
+      relationshipHasManyPolymorphic2: [
+        {
+          relationTo: 'text',
+          value: doc1ID,
+        },
+        {
+          relationTo: draftCollectionSlug,
+          value: draft3.id,
+        },
+      ],
      richtext: generateLexicalData({
        mediaID: uploadedImage2,
        textID: doc2ID,
@@ -257,6 +431,7 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
      textInRow: 'textInRow2',
      textInUnnamedTab2: 'textInUnnamedTab22',
      upload: uploadedImage2,
+      uploadHasMany: [uploadedImage, uploadedImage2],
    },
    depth: 0,
  })
--- a/test/versions/slugs.ts
+++ b/test/versions/slugs.ts
@@ -15,6 +15,7 @@ export const postCollectionSlug = 'posts'

 export const diffCollectionSlug = 'diff'
 export const mediaCollectionSlug = 'media'
+export const media2CollectionSlug = 'media2'

 export const versionCollectionSlug = 'version-posts'

@@ -31,6 +32,7 @@ export const collectionSlugs = [
  postCollectionSlug,
  diffCollectionSlug,
  mediaCollectionSlug,
+  media2CollectionSlug,
  versionCollectionSlug,
  textCollectionSlug,
 ]