@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/elements/Table/index.scss

@@ -1,104 +1,106 @@
 @import '../../scss/styles.scss';
 
-.table {
-  margin-bottom: $baseline;
-  overflow: auto;
-  max-width: 100%;
-
-  table {
-    min-width: 100%;
-  }
-
-  thead {
-    color: var(--theme-elevation-400);
-
-    th {
-      font-weight: normal;
-      text-align: left;
-      [dir='rtl'] & {
-        text-align: right;
-      }
-    }
-  }
-
-  th,
-  td {
-    vertical-align: top;
-    padding: base(0.8) base(0.6);
-    min-width: 150px;
-
-    &:first-child {
-      padding-inline-start: base(0.8);
+@layer payload-default {
+  .table {
+    margin-bottom: $baseline;
+    overflow: auto;
+    max-width: 100%;
+
+    table {
+      min-width: 100%;
     }
 
-    &:last-child {
-      padding-inline-end: base(0.8);
-    }
-  }
+    thead {
+      color: var(--theme-elevation-400);
 
-  tbody {
-    tr {
-      &:nth-child(odd) {
-        background: var(--theme-elevation-50);
-        border-radius: $style-radius-s;
+      th {
+        font-weight: normal;
+        text-align: left;
+        [dir='rtl'] & {
+          text-align: right;
+        }
       }
     }
-  }
 
-  a:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+    th,
+    td {
+      vertical-align: top;
+      padding: base(0.8) base(0.6);
+      min-width: 150px;
 
-  &--appearance-condensed {
-    thead {
-      th:first-child {
-        border-top-left-radius: $style-radius-s;
+      &:first-child {
+        padding-inline-start: base(0.8);
       }
 
-      th:last-child {
-        border-top-right-radius: $style-radius-s;
+      &:last-child {
+        padding-inline-end: base(0.8);
       }
-
-      background: var(--theme-elevation-50);
     }
 
     tbody {
       tr {
         &:nth-child(odd) {
-          background: transparent;
-          border-radius: 0;
+          background: var(--theme-elevation-50);
+          border-radius: $style-radius-s;
         }
       }
     }
 
-    th,
-    td {
-      padding: base(0.3) base(0.3);
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-      &:first-child {
-        padding-inline-start: base(0.6);
+    &--appearance-condensed {
+      thead {
+        th:first-child {
+          border-top-left-radius: $style-radius-s;
+        }
+
+        th:last-child {
+          border-top-right-radius: $style-radius-s;
+        }
+
+        background: var(--theme-elevation-50);
       }
 
-      &:last-child {
-        padding-inline-end: base(0.6);
+      tbody {
+        tr {
+          &:nth-child(odd) {
+            background: transparent;
+            border-radius: 0;
+          }
+        }
       }
-    }
 
-    th {
-      padding: base(0.3);
-    }
+      th,
+      td {
+        padding: base(0.3) base(0.3);
 
-    tr td,
-    th {
-      border: 0.5px solid var(--theme-elevation-100);
+        &:first-child {
+          padding-inline-start: base(0.6);
+        }
+
+        &:last-child {
+          padding-inline-end: base(0.6);
+        }
+      }
+
+      th {
+        padding: base(0.3);
+      }
+
+      tr td,
+      th {
+        border: 0.5px solid var(--theme-elevation-100);
+      }
     }
-  }
 
-  @include mid-break {
-    th,
-    td {
-      max-width: 70vw;
+    @include mid-break {
+      th,
+      td {
+        max-width: 70vw;
+      }
     }
   }
 }

package/dist/elements/TableColumns/RenderDefaultCell/index.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultCellComponentProps } from 'payload';
+import React from 'react';
+import './index.scss';
+export declare const useCellProps: () => DefaultCellComponentProps | null;
+export declare const RenderDefaultCell: React.FC<{
+    clientProps: DefaultCellComponentProps;
+    columnIndex: number;
+    enableRowSelections?: boolean;
+    isLinkedColumn?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/TableColumns/RenderDefaultCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/TableColumns/RenderDefaultCell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,YAAY,QAAO,yBAAyB,GAAG,IACxB,CAAA;AAEpC,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,yBAAyB,CAAA;IACtC,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAwBA,CAAA"}

package/dist/elements/TableColumns/RenderDefaultCell/index.js

@@ -0,0 +1,77 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js';
+import { DefaultCell } from '../../Table/DefaultCell/index.js';
+import { useTableColumns } from '../index.js';
+import './index.scss';
+const baseClass = 'default-cell';
+const CellPropsContext = /*#__PURE__*/React.createContext(null);
+export const useCellProps = () => {
+  return React.useContext(CellPropsContext);
+};
+export const RenderDefaultCell = t0 => {
+  const $ = _c(9);
+  const {
+    clientProps,
+    columnIndex,
+    isLinkedColumn
+  } = t0;
+  const {
+    drawerSlug,
+    onSelect
+  } = useListDrawerContext();
+  const {
+    LinkedCellOverride
+  } = useTableColumns();
+  let t1;
+  if ($[0] !== clientProps || $[1] !== columnIndex || $[2] !== isLinkedColumn || $[3] !== drawerSlug || $[4] !== onSelect || $[5] !== LinkedCellOverride) {
+    const propsToPass = {
+      ...clientProps,
+      columnIndex
+    };
+    if (isLinkedColumn && drawerSlug) {
+      propsToPass.className = `${baseClass}__first-cell`;
+      propsToPass.link = false;
+      let t2;
+      if ($[7] !== onSelect) {
+        t2 = t3 => {
+          const {
+            collectionSlug: rowColl,
+            rowData
+          } = t3;
+          if (typeof onSelect === "function") {
+            onSelect({
+              collectionSlug: rowColl,
+              docID: rowData.id
+            });
+          }
+        };
+        $[7] = onSelect;
+        $[8] = t2;
+      } else {
+        t2 = $[8];
+      }
+      propsToPass.onClick = t2;
+    }
+    t1 = _jsx(CellPropsContext.Provider, {
+      value: propsToPass,
+      children: isLinkedColumn && LinkedCellOverride ? LinkedCellOverride : _jsx(DefaultCell, {
+        ...propsToPass
+      })
+    });
+    $[0] = clientProps;
+    $[1] = columnIndex;
+    $[2] = isLinkedColumn;
+    $[3] = drawerSlug;
+    $[4] = onSelect;
+    $[5] = LinkedCellOverride;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/TableColumns/RenderDefaultCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useListDrawerContext","DefaultCell","useTableColumns","baseClass","CellPropsContext","createContext","useCellProps","useContext","RenderDefaultCell","t0","$","clientProps","columnIndex","isLinkedColumn","drawerSlug","onSelect","LinkedCellOverride","t1","propsToPass","className","link","t2","t3","collectionSlug","rowColl","rowData","docID","id","onClick","_jsx","Provider","value","children"],"sources":["../../../../src/elements/TableColumns/RenderDefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js'\nimport { DefaultCell } from '../../Table/DefaultCell/index.js'\nimport { useTableColumns } from '../index.js'\nimport './index.scss'\n\nconst baseClass = 'default-cell'\n\nconst CellPropsContext = React.createContext<DefaultCellComponentProps | null>(null)\n\nexport const useCellProps = (): DefaultCellComponentProps | null =>\n  React.useContext(CellPropsContext)\n\nexport const RenderDefaultCell: React.FC<{\n  clientProps: DefaultCellComponentProps\n  columnIndex: number\n  enableRowSelections?: boolean\n  isLinkedColumn?: boolean\n}> = ({ clientProps, columnIndex, isLinkedColumn }) => {\n  const { drawerSlug, onSelect } = useListDrawerContext()\n  const { LinkedCellOverride } = useTableColumns()\n\n  const propsToPass = { ...clientProps, columnIndex }\n\n  if (isLinkedColumn && drawerSlug) {\n    propsToPass.className = `${baseClass}__first-cell`\n    propsToPass.link = false\n    propsToPass.onClick = ({ collectionSlug: rowColl, rowData }) => {\n      if (typeof onSelect === 'function') {\n        onSelect({\n          collectionSlug: rowColl,\n          docID: rowData.id as string,\n        })\n      }\n    }\n  }\n\n  return (\n    <CellPropsContext.Provider value={propsToPass}>\n      {isLinkedColumn && LinkedCellOverride ? LinkedCellOverride : <DefaultCell {...propsToPass} />}\n    </CellPropsContext.Provider>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,WAAW,QAAQ;AAC5B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,gBAAmBL,KAAA,CAAMM,aAAa,CAAmC;AAE/E,OAAO,MAAMC,YAAA,GAAeA,CAAA;EAAA,OAC1BP,KAAA,CAAAQ,UAAA,CAAAH,gBAAiB;AAAA;AAEnB,OAAO,MAAMI,iBAAA,GAKRC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,WAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAJ,EAA4C;EAChD;IAAAK,UAAA;IAAAC;EAAA,IAAiCf,oBAAA;EACjC;IAAAgB;EAAA,IAA+Bd,eAAA;EAAA,IAAAe,EAAA;EAAA,IAAAP,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAK,QAAA,IAAAL,CAAA,QAAAM,kBAAA;IAE/B,MAAAE,WAAA;MAAA,GAAyBP,WAAW;MAAAC;IAAA;IAAc,IAE9CC,cAAA,IAAkBC,UAAA;MACpBI,WAAA,CAAAC,SAAA,GAAwB,GAAAhB,SAAA,cAA0B;MAClDe,WAAA,CAAAE,IAAA;MAAA,IAAAC,EAAA;MAAA,IAAAX,CAAA,QAAAK,QAAA;QACsBM,EAAA,GAAAC,EAAA;UAAC;YAAAC,cAAA,EAAAC,OAAA;YAAAC;UAAA,IAAAH,EAAoC;UAAA,IACrD,OAAOP,QAAA,KAAa;YACtBA,QAAA;cAAAQ,cAAA,EACkBC,OAAA;cAAAE,KAAA,EACTD,OAAA,CAAAE;YAAA,CACT;UAAA;QAAA;QAEJjB,CAAA,MAAAK,QAAA;QAAAL,CAAA,MAAAW,EAAA;MAAA;QAAAA,EAAA,GAAAX,CAAA;MAAA;MAPAQ,WAAA,CAAAU,OAAA,GAAsBP,EAOtB;IAAA;IAIAJ,EAAA,GAAAY,IAAA,CAAAzB,gBAAA,CAAA0B,QAAA;MAAAC,KAAA,EAAkCb,WAAA;MAAAc,QAAA,EAC/BnB,cAAA,IAAkBG,kBAAA,GAAqBA,kBAAA,GAAqBa,IAAA,CAAA5B,WAAA;QAAA,GAAiBiB;MAAW,C;;;;;;;;;;;;SAD3FD,E;CAIJ","ignoreList":[]}

package/dist/elements/TableColumns/RenderDefaultCell/index.scss

@@ -0,0 +1,15 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .default-cell {
+    &__first-cell {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      text-align: left;
+      white-space: nowrap;
+    }
+  }
+}

package/dist/elements/TableColumns/buildColumnState.d.ts

@@ -1,14 +1,20 @@
-import type { ClientField, SanitizedCollectionConfig } from 'payload';
-import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
+import type { I18nClient } from '@payloadcms/translations';
+import { type ClientCollectionConfig, type DefaultCellComponentProps, type Field, type PaginatedDocs, type Payload, type SanitizedCollectionConfig } from 'payload';
+import type { ColumnPreferences } from '../../providers/ListQuery/index.js';
 import type { SortColumnProps } from '../SortColumn/index.js';
 import type { Column } from '../Table/index.js';
 type Args = {
     beforeRows?: Column[];
+    collectionConfig: ClientCollectionConfig;
     columnPreferences: ColumnPreferences;
     columns?: ColumnPreferences;
+    customCellProps: DefaultCellComponentProps['customCellProps'];
+    docs: PaginatedDocs['docs'];
     enableRowSelections: boolean;
     enableRowTypes?: boolean;
-    fields: ClientField[];
+    fields: Field[];
+    i18n: I18nClient;
+    payload: Payload;
     sortColumnProps?: Partial<SortColumnProps>;
     useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle'];
 };

package/dist/elements/TableColumns/buildColumnState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIlF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/C,KAAK,IAAI,GAAG;IACV,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EA4JnD,CAAA"}
+{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,KAAK,EAEV,KAAK,aAAa,EAClB,KAAK,OAAO,EAEZ,KAAK,yBAAyB,EAE/B,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAa/C,KAAK,IAAI,GAAG;IACV,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,eAAe,EAAE,yBAAyB,CAAC,iBAAiB,CAAC,CAAA;IAC7D,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EAyPnD,CAAA"}

package/dist/elements/TableColumns/buildColumnState.js

@@ -1,28 +1,34 @@
-'use client';
-
 import { jsx as _jsx } from "react/jsx-runtime";
+import { MissingEditorProp } from 'payload';
+import { deepCopyObjectSimple, fieldIsPresentationalOnly } from 'payload/shared';
 import React from 'react';
-import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { RenderCustomComponent, RenderDefaultCell, SelectAll, SelectRow, SortColumn } from '../../exports/client/index.js';
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js';
-import { SelectAll } from '../SelectAll/index.js';
-import { SelectRow } from '../SelectRow/index.js';
-import { SortColumn } from '../SortColumn/index.js';
-import { DefaultCell } from '../Table/DefaultCell/index.js';
+import { RenderServerComponent } from '../RenderServerComponent/index.js';
 export const buildColumnState = args => {
   const {
     beforeRows,
+    collectionConfig,
     columnPreferences,
     columns,
+    customCellProps,
+    docs,
     enableRowSelections,
     fields,
+    i18n,
+    payload,
     sortColumnProps,
     useAsTitle
   } = args;
-  let sortedFieldMap = flattenFieldMap(fields);
+  const clientFields = collectionConfig.fields;
+  // clientFields contains the fake `id` column
+  let sortedFieldMap = flattenFieldMap(clientFields);
+  let _sortedFieldMap = flattenFieldMap(fields) // TODO: think of a way to avoid this additional flatten
+  ;
   // place the `ID` field first, if it exists
   // do the same for the `useAsTitle` field with precedence over the `ID` field
   // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`
-  const idFieldIndex = sortedFieldMap.findIndex(field => 'name' in field && field.name === 'id');
+  const idFieldIndex = sortedFieldMap?.findIndex(field => 'name' in field && field.name === 'id');
   if (idFieldIndex > -1) {
     const idField = sortedFieldMap.splice(idFieldIndex, 1)[0];
     sortedFieldMap.unshift(idField);
@@ -33,98 +39,147 @@ export const buildColumnState = args => {
     sortedFieldMap.unshift(useAsTitleField);
   }
   const sortTo = columnPreferences || columns;
+  const sortFieldMap = (fieldMap, sortTo) => fieldMap?.sort((a, b) => {
+    const aIndex = sortTo.findIndex(column => 'name' in a && column.accessor === a.name);
+    const bIndex = sortTo.findIndex(column => 'name' in b && column.accessor === b.name);
+    if (aIndex === -1 && bIndex === -1) {
+      return 0;
+    }
+    if (aIndex === -1) {
+      return 1;
+    }
+    if (bIndex === -1) {
+      return -1;
+    }
+    return aIndex - bIndex;
+  });
   if (sortTo) {
     // sort the fields to the order of `defaultColumns` or `columnPreferences`
-    sortedFieldMap = sortedFieldMap.sort((a, b) => {
-      const aIndex = sortTo.findIndex(column => 'name' in a && column.accessor === a.name);
-      const bIndex = sortTo.findIndex(column => 'name' in b && column.accessor === b.name);
-      if (aIndex === -1 && bIndex === -1) {
-        return 0;
-      }
-      if (aIndex === -1) {
-        return 1;
-      }
-      if (bIndex === -1) {
-        return -1;
-      }
-      return aIndex - bIndex;
-    });
+    sortedFieldMap = sortFieldMap(sortedFieldMap, sortTo);
+    _sortedFieldMap = sortFieldMap(_sortedFieldMap, sortTo) // TODO: think of a way to avoid this additional sort
+    ;
   }
   const activeColumnsIndices = [];
-  const sorted = sortedFieldMap.reduce((acc, field, index) => {
-    const columnPreference = columnPreferences?.find(preference => 'name' in field && preference.accessor === field.name);
+  const sorted = sortedFieldMap?.reduce((acc, field, index) => {
+    const _field = _sortedFieldMap.find(f => 'name' in field && 'name' in f && f.name === field.name);
+    const columnPreference = columnPreferences?.find(preference => field && 'name' in field && preference.accessor === field.name);
     let active = false;
     if (columnPreference) {
       active = columnPreference.active;
     } else if (columns && Array.isArray(columns) && columns.length > 0) {
-      active = columns.find(column => 'name' in field && column.accessor === field.name)?.active;
+      active = columns.find(column => field && 'name' in field && column.accessor === field.name)?.active;
     } else if (activeColumnsIndices.length < 4) {
       active = true;
     }
     if (active && !activeColumnsIndices.includes(index)) {
       activeColumnsIndices.push(index);
     }
-    const CustomLabelToRender = field && 'admin' in field && 'components' in field.admin && 'Label' in field.admin.components && field.admin.components.Label !== undefined // let it return `null`
-    ? field.admin.components.Label : undefined;
-    const Label = /*#__PURE__*/_jsx(FieldLabel, {
-      field: field,
-      Label: CustomLabelToRender,
-      unstyled: true
-    });
+    const CustomLabelToRender = _field && 'admin' in _field && 'components' in _field.admin && 'Label' in _field.admin.components && _field.admin.components.Label !== undefined // let it return `null`
+    ? _field.admin.components.Label : undefined;
+    const CustomLabel = CustomLabelToRender ? /*#__PURE__*/_jsx(RenderServerComponent, {
+      Component: CustomLabelToRender,
+      importMap: payload.importMap
+    }) : undefined;
     const fieldAffectsDataSubFields = field && field.type && (field.type === 'array' || field.type === 'group' || field.type === 'blocks');
     const Heading = /*#__PURE__*/_jsx(SortColumn, {
-      disable: fieldAffectsDataSubFields || field?._isPresentational || undefined,
-      Label: Label,
-      label: 'label' in field ? field.label : undefined,
+      disable: fieldAffectsDataSubFields || fieldIsPresentationalOnly(field) || undefined,
+      Label: CustomLabel,
+      label: field && 'label' in field ? field.label : undefined,
       name: 'name' in field ? field.name : undefined,
       ...(sortColumnProps || {})
     });
-    if (field) {
-      const column = {
-        accessor: 'name' in field ? field.name : undefined,
-        active,
-        cellProps: {
-          field: {
-            ...(field || {}),
-            admin: {
-              ...(field.admin || {}),
-              components: {
-                ...(field.admin?.components || {}),
-                Cell: field.admin?.components?.Cell || {
-                  type: 'client',
-                  Component: DefaultCell,
-                  RenderedComponent: null
-                },
-                Label
-              }
-            }
+    const baseCellClientProps = {
+      cellData: undefined,
+      collectionConfig: deepCopyObjectSimple(collectionConfig),
+      customCellProps,
+      field,
+      rowData: undefined
+    };
+    const serverProps = {
+      field: _field,
+      i18n,
+      payload
+    };
+    const column = {
+      accessor: 'name' in field ? field.name : undefined,
+      active,
+      CustomLabel,
+      field,
+      Heading,
+      renderedCells: active ? docs.map((doc, i) => {
+        const isLinkedColumn = index === activeColumnsIndices[0];
+        const cellClientProps = {
+          ...baseCellClientProps,
+          cellData: 'name' in field ? doc[field.name] : undefined,
+          link: isLinkedColumn,
+          rowData: doc
+        };
+        let CustomCell = null;
+        if (_field?.type === 'richText') {
+          if (!_field?.editor) {
+            throw new MissingEditorProp(_field) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor
+            ;
           }
-        },
-        Heading
-      };
-      acc.push(column);
-    }
+          if (typeof _field?.editor === 'function') {
+            throw new Error('Attempted to access unsanitized rich text editor.');
+          }
+          if (!_field.admin) {
+            _field.admin = {};
+          }
+          if (!_field.admin.components) {
+            _field.admin.components = {};
+          }
+          /**
+          * We have to deep copy all the props we send to the client (= CellComponent.clientProps).
+          * That way, every editor's field / cell props we send to the client have their own object references.
+          *
+          * If we send the same object reference to the client twice (e.g. through some configurations where 2 or more fields
+          * reference the same editor object, like the root editor), the admin panel may hang indefinitely. This has been happening since
+          * a newer Next.js update that made it break when sending the same object reference to the client twice.
+          *
+          * We can use deepCopyObjectSimple as client props should be JSON-serializable.
+          */
+          const CellComponent = _field.editor.CellComponent;
+          if (typeof CellComponent === 'object' && CellComponent.clientProps) {
+            CellComponent.clientProps = deepCopyObjectSimple(CellComponent.clientProps);
+          }
+          CustomCell = /*#__PURE__*/_jsx(RenderServerComponent, {
+            clientProps: cellClientProps,
+            Component: CellComponent,
+            importMap: payload.importMap,
+            serverProps: serverProps
+          });
+        } else {
+          CustomCell = _field?.admin && 'components' in _field.admin && _field.admin.components?.Cell ? /*#__PURE__*/_jsx(RenderServerComponent, {
+            clientProps: cellClientProps,
+            Component: _field?.admin && 'components' in _field.admin && _field.admin.components?.Cell,
+            importMap: payload.importMap,
+            serverProps: serverProps
+          }) : undefined;
+        }
+        return /*#__PURE__*/_jsx(RenderCustomComponent, {
+          CustomComponent: CustomCell,
+          Fallback: /*#__PURE__*/_jsx(RenderDefaultCell, {
+            clientProps: cellClientProps,
+            columnIndex: index,
+            enableRowSelections: enableRowSelections,
+            isLinkedColumn: isLinkedColumn
+          })
+        }, `${i}-${index}`);
+      }) : []
+    };
+    acc.push(column);
     return acc;
   }, []);
   if (enableRowSelections) {
-    sorted.unshift({
+    sorted?.unshift({
       accessor: '_select',
       active: true,
-      cellProps: {
-        field: {
-          admin: {
-            components: {
-              Cell: {
-                type: 'client',
-                Component: null,
-                RenderedComponent: /*#__PURE__*/_jsx(SelectRow, {})
-              },
-              Label: null
-            }
-          }
-        }
-      },
-      Heading: /*#__PURE__*/_jsx(SelectAll, {})
+      field: null,
+      Heading: /*#__PURE__*/_jsx(SelectAll, {}),
+      renderedCells: docs.map((_, i) => /*#__PURE__*/_jsx(SelectRow, {
+        rowData: docs[i]
+      }, i))
     });
   }
   if (beforeRows) {