Merge branch 'feat/next-poc' of https://github.com/payloadcms/payload into feat/next-poc

packages/next/src/pages/List/Default/Cell/fields/Relationship/index.tsx

@@ -2,7 +2,7 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
+import { canUseDOM, formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 import { useListRelationships } from '../../../RelationshipProvider'
@@ -30,7 +30,7 @@ export const RelationshipCell: React.FC<RelationshipCellProps> = ({
   const [hasRequested, setHasRequested] = useState(false)
   const { i18n, t } = useTranslation()
 
-  const isAboveViewport = entry?.boundingClientRect?.top < window.innerHeight
+  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false
 
   useEffect(() => {
     if (cellData && isAboveViewport && !hasRequested) {

packages/next/src/pages/List/Default/Cell/index.tsx

@@ -2,10 +2,11 @@
 import Link from 'next/link'
 import React from 'react' // TODO: abstract this out to support all routers
 
-import type { CellComponentProps, CellProps } from 'payload/types'
+import type { CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
 import { useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
+import { TableCellProvider } from '@payloadcms/ui'
 
 import cellComponents from './fields'
 import { CodeCell } from './fields/Code'
@@ -19,6 +20,7 @@ export const DefaultCell: React.FC<CellProps> = (props) => {
     isFieldAffectingData,
     label,
     onClick: onClickFromProps,
+    richTextComponentMap,
   } = props
 
   const { i18n } = useTranslation()
@@ -77,12 +79,35 @@ export const DefaultCell: React.FC<CellProps> = (props) => {
     )
   }
 
-  let CellComponent: React.FC<CellComponentProps> =
-    cellData && (CellComponentOverride ? CellComponentOverride : cellComponents[fieldType])
+  const DefaultCellComponent = cellComponents[fieldType]
 
-  if (!CellComponent) {
+  let CellComponent: React.ReactNode =
+    cellData &&
+    (CellComponentOverride ? ( // CellComponentOverride is used for richText
+      <TableCellProvider richTextComponentMap={richTextComponentMap}>
+        {CellComponentOverride}
+      </TableCellProvider>
+    ) : null)
+
+  if (!CellComponent && DefaultCellComponent) {
+    CellComponent = (
+      <DefaultCellComponent
+        cellData={cellData}
+        customCellContext={customCellContext}
+        rowData={rowData}
+      />
+    )
+  } else if (!CellComponent && !DefaultCellComponent) {
+    // DefaultCellComponent does not exist for certain field types like `text`
     if (customCellContext.uploadConfig && isFieldAffectingData && name === 'filename') {
-      CellComponent = cellComponents.File
+      const FileCellComponent = cellComponents.File
+      CellComponent = (
+        <FileCellComponent
+          cellData={cellData}
+          customCellContext={customCellContext}
+          rowData={rowData}
+        />
+      )
     } else {
       return (
         <WrapElement {...wrapElementProps}>
@@ -99,9 +124,5 @@ export const DefaultCell: React.FC<CellProps> = (props) => {
     }
   }
 
-  return (
-    <WrapElement {...wrapElementProps}>
-      <CellComponent cellData={cellData} customCellContext={customCellContext} rowData={rowData} />
-    </WrapElement>
-  )
+  return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>
 }