payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/views/Version/Restore/index.js

@@ -41,7 +41,7 @@ const Restore = ({ collection, global, className, versionID, originalDocID, vers
     return (React.createElement(Fragment, null,
         React.createElement(Pill, { onClick: () => toggle(modalSlug), className: [baseClass, className].filter(Boolean).join(' ') }, "Restore this version"),
         React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, null,
+            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                 React.createElement("h1", null, "Confirm version restoration"),
                 React.createElement("p", null, restoreMessage),
                 React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(modalSlug) }, "Cancel"),

package/dist/admin/components/views/Version/Restore/index.scss

@@ -17,4 +17,9 @@
       margin-right: $baseline;
     }
   }
+
+  &__modal-template {
+    position: relative;
+    z-index: 1;
+  }
 }

package/dist/admin/components/views/Version/Version.js

@@ -16,6 +16,7 @@ import RenderFieldsToDiff from './RenderFieldsToDiff';
 import fieldComponents from './RenderFieldsToDiff/fields';
 import { fieldAffectsData } from '../../../../fields/config/types';
 import { useLocale } from '../../utilities/Locale';
+import { Gutter } from '../../elements/Gutter';
 import './index.scss';
 const baseClass = 'view-version';
 const VersionView = ({ collection, global }) => {
@@ -142,7 +143,7 @@ const VersionView = ({ collection, global }) => {
     return (React.createElement("div", { className: baseClass },
         React.createElement(Meta, { title: metaTitle, description: metaDesc }),
         React.createElement(Eyebrow, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
             React.createElement("div", { className: `${baseClass}__intro` },
                 (doc === null || doc === void 0 ? void 0 : doc.autosave) ? 'Autosaved version ' : 'Version',
                 ' ',

package/dist/admin/components/views/Version/index.scss

@@ -5,9 +5,7 @@
   margin-bottom: base(2);
 
   &__wrap {
-    padding: base(3);
-    margin-right: base(2);
-    background: white;
+    padding-top: base(1);
   }
 
   &__header {
@@ -27,7 +25,7 @@
     margin-left: base(-.5);
     margin-right: base(-.5);
 
-    > * {
+    >* {
       margin-left: base(.5);
       margin-right: base(.5);
       flex-basis: 100%;
@@ -40,8 +38,7 @@
 
   @include mid-break {
     &__wrap {
-      padding: $baseline;
-      margin-right: 0;
+      padding-top: 0;
     }
 
     &__intro,
@@ -53,7 +50,7 @@
       display: block;
       margin: 0 base(-.5) base(2);
 
-      > * {
+      >* {
         margin-bottom: base(.5);
       }
     }

package/dist/admin/components/views/Versions/index.js

@@ -14,8 +14,9 @@ import Paginator from '../../elements/Paginator';
 import PerPage from '../../elements/PerPage';
 import { useSearchParams } from '../../utilities/SearchParams';
 import { Banner, Pill } from '../..';
-import './index.scss';
 import { shouldIncrementVersionCount } from '../../../../versions/shouldIncrementVersionCount';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
 const baseClass = 'versions';
 const Versions = ({ collection, global }) => {
     var _a, _b, _c;
@@ -142,7 +143,7 @@ const Versions = ({ collection, global }) => {
     return (React.createElement("div", { className: baseClass },
         React.createElement(Meta, { title: metaTitle, description: metaDesc }),
         React.createElement(Eyebrow, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
             React.createElement("header", { className: `${baseClass}__header` },
                 React.createElement("div", { className: `${baseClass}__intro` }, "Showing versions for:"),
                 useIDLabel && (React.createElement(IDLabel, { id: doc === null || doc === void 0 ? void 0 : doc.id })),

package/dist/admin/components/views/Versions/index.scss

@@ -5,9 +5,7 @@
   margin-bottom: base(2);
 
   &__wrap {
-    padding: base(3);
-    margin-right: base(2);
-    background: white;
+    padding-top: base(1);
   }
 
   &__header {
@@ -52,15 +50,7 @@
 
   @include mid-break {
     &__wrap {
-      padding: $baseline 0;
-      margin-right: 0;
-    }
-
-    &__header,
-    .table,
-    &__page-controls {
-      padding-left: $baseline;
-      padding-right: $baseline;
+      padding-top: 0;
     }
 
     &__page-controls {

package/dist/admin/components/views/collections/Edit/Auth/index.scss

@@ -3,7 +3,7 @@
 .auth-fields {
   margin: base(1.5) 0 base(2);
   padding: base(2) base(2) base(1.5);
-  background: $color-background-gray;
+  background: var(--theme-elevation-50);
 
   .btn {
     margin-top: 0;
@@ -25,8 +25,9 @@
 
 @keyframes highlight {
   0% {
-    background: $color-green;
+    background: var(--theme-success-500);
   }
+
   100% {
     background: none;
   }

package/dist/admin/components/views/collections/Edit/Default.js

@@ -24,6 +24,7 @@ import Publish from '../../../elements/Publish';
 import SaveDraft from '../../../elements/SaveDraft';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { OperationContext } from '../../../utilities/OperationProvider';
+import { Gutter } from '../../../elements/Gutter';
 import './index.scss';
 const baseClass = 'collection-edit';
 const DefaultEditView = (props) => {
@@ -46,7 +47,7 @@ const DefaultEditView = (props) => {
                     React.createElement(Meta, { title: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, description: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, keywords: `${collection.labels.singular}, Payload, CMS` }),
                     React.createElement(Eyebrow, null),
                     !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
-                    React.createElement("div", { className: `${baseClass}__edit` },
+                    React.createElement(Gutter, { className: `${baseClass}__edit` },
                         React.createElement("header", { className: `${baseClass}__header` },
                             React.createElement("h1", null,
                                 React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
@@ -59,18 +60,18 @@ const DefaultEditView = (props) => {
                             React.createElement("ul", { className: `${baseClass}__collection-actions` },
                                 ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
                                     React.createElement("li", null,
-                                        React.createElement(Link, { to: `${admin}/collections/${slug}/create` }, "Create New")),
+                                        React.createElement(Link, { id: "action-create", to: `${admin}/collections/${slug}/create` }, "Create New")),
                                     !disableDuplicate && (React.createElement("li", null,
                                         React.createElement(DuplicateDocument, { slug: slug }))))),
                                 ((_e = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _e === void 0 ? void 0 : _e.permission) && (React.createElement("li", null,
-                                    React.createElement(DeleteDocument, { collection: collection, id: id })))),
+                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" })))),
                             React.createElement("div", { className: `${baseClass}__document-actions${((((_f = collection.versions) === null || _f === void 0 ? void 0 : _f.drafts) && !((_h = (_g = collection.versions) === null || _g === void 0 ? void 0 : _g.drafts) === null || _h === void 0 ? void 0 : _h.autosave)) || (isEditing && preview)) ? ` ${baseClass}__document-actions--has-2` : ''}` },
                                 (preview && (!((_j = collection.versions) === null || _j === void 0 ? void 0 : _j.drafts) || ((_l = (_k = collection.versions) === null || _k === void 0 ? void 0 : _k.drafts) === null || _l === void 0 ? void 0 : _l.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
                                 hasSavePermission && (React.createElement(React.Fragment, null,
                                     ((_m = collection.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(React.Fragment, null,
                                         !collection.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
                                         React.createElement(Publish, null))),
-                                    !((_o = collection.versions) === null || _o === void 0 ? void 0 : _o.drafts) && (React.createElement(FormSubmit, null, "Save"))))),
+                                    !((_o = collection.versions) === null || _o === void 0 ? void 0 : _o.drafts) && (React.createElement(FormSubmit, { buttonId: "action-save" }, "Save"))))),
                             React.createElement("div", { className: `${baseClass}__sidebar-fields` },
                                 (isEditing && preview && (((_p = collection.versions) === null || _p === void 0 ? void 0 : _p.drafts) && !((_r = (_q = collection.versions) === null || _q === void 0 ? void 0 : _q.drafts) === null || _r === void 0 ? void 0 : _r.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
                                 ((_s = collection.versions) === null || _s === void 0 ? void 0 : _s.drafts) && (React.createElement(React.Fragment, null,

package/dist/admin/components/views/collections/Edit/Upload/index.scss

@@ -3,7 +3,7 @@
 .file-field {
   position: relative;
   margin: base(1.5) 0 base(2);
-  background: $color-background-gray;
+  background: var(--theme-elevation-50);
 
   .tooltip.error-message {
     z-index: 3;
@@ -22,7 +22,7 @@
 
   &__file-selected,
   &__drop-zone {
-    background: $color-background-gray;
+    background: var(--theme-elevation-100);
     position: relative;
     z-index: 2;
     padding: base(2);
@@ -31,7 +31,7 @@
   }
 
   &__drop-zone {
-    border: 1px dotted $color-gray;
+    border: 1px dotted var(--theme-elevation-400);
 
     .btn {
       margin: 0 $baseline 0 0;
@@ -52,8 +52,8 @@
 
   &--dragging {
     .file-field__drop-zone {
-      border-color: $color-green;
-      background: rgba($color-green, .15);
+      border-color: var(--theme-success-500);
+      background: var(--theme-success-150);
     }
   }
 

package/dist/admin/components/views/collections/Edit/index.js

@@ -8,7 +8,6 @@ import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 import DefaultEdit from './Default';
 import formatFields from './formatFields';
 import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
-import { NegativeFieldGutterProvider } from '../../../forms/FieldTypeGutter/context';
 import { useLocale } from '../../../utilities/Locale';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 const EditView = (props) => {
@@ -25,7 +24,7 @@ const EditView = (props) => {
     const { setStepNav } = useStepNav();
     const [initialState, setInitialState] = useState({});
     const { permissions, user } = useAuth();
-    const { getVersions } = useDocumentInfo();
+    const { getVersions, preferences } = useDocumentInfo();
     const onSave = useCallback(async (json) => {
         var _a;
         getVersions();
@@ -37,7 +36,7 @@ const EditView = (props) => {
             setInitialState(state);
         }
     }, [admin, collection, history, isEditing, getVersions, user, id, locale]);
-    const [{ data, isLoading, isError }] = usePayloadAPI((isEditing ? `${serverURL}${api}/${slug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI((isEditing ? `${serverURL}${api}/${slug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
     const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
     useEffect(() => {
         const nav = [{
@@ -71,7 +70,7 @@ const EditView = (props) => {
         setStepNav(nav);
     }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle, admin]);
     useEffect(() => {
-        if (isLoading) {
+        if (isLoadingDocument) {
             return;
         }
         const awaitInitialState = async () => {
@@ -79,7 +78,7 @@ const EditView = (props) => {
             setInitialState(state);
         };
         awaitInitialState();
-    }, [dataToRender, fields, isEditing, id, user, locale, isLoading]);
+    }, [dataToRender, fields, isEditing, id, user, locale, isLoadingDocument]);
     if (isError) {
         return (React.createElement(Redirect, { to: `${admin}/not-found` }));
     }
@@ -87,18 +86,17 @@ const EditView = (props) => {
     const apiURL = `${serverURL}${api}/${slug}/${id}${collection.versions.drafts ? '?draft=true' : ''}`;
     const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
     const hasSavePermission = (isEditing && ((_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.update) === null || _b === void 0 ? void 0 : _b.permission)) || (!isEditing && ((_c = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _c === void 0 ? void 0 : _c.permission));
-    return (React.createElement(NegativeFieldGutterProvider, { allow: true },
-        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
-                isLoading,
-                data: dataToRender,
-                collection,
-                permissions: collectionPermissions,
-                isEditing,
-                onSave,
-                initialState,
-                hasSavePermission,
-                apiURL,
-                action,
-            } })));
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
+            isLoading: isLoadingDocument || !preferences,
+            data: dataToRender,
+            collection,
+            permissions: collectionPermissions,
+            isEditing,
+            onSave,
+            initialState,
+            hasSavePermission,
+            apiURL,
+            action,
+        } }));
 };
 export default EditView;

package/dist/admin/components/views/collections/Edit/index.scss

@@ -35,10 +35,8 @@
   }
 
   &__edit {
-    background: white;
-    padding: base(5) base(6) base(6);
-    margin-bottom: base(1.5);
-    overflow-x: auto;
+    padding-top: base(1);
+    padding-bottom: base(2);
     flex-grow: 1;
   }
 
@@ -49,6 +47,7 @@
     top: 0;
     right: 0;
     overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
   }
 
   &__sidebar {
@@ -76,20 +75,25 @@
     position: sticky;
     top: 0;
     z-index: $z-nav;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
   }
 
   &__document-actions--has-2 {
     display: flex;
 
-    > * {
+    >* {
       width: calc(50% - #{base(.5)});
     }
 
-    > *:first-child {
+    >*:first-child {
       margin-right: base(.5);
     }
 
-    > *:last-child {
+    >*:last-child {
       margin-left: base(.5);
     }
 
@@ -134,12 +138,14 @@
   }
 
   &__label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   &__collection-actions,
   &__api-url {
-    a, button {
+
+    a,
+    button {
       cursor: pointer;
       font-weight: 600;
       text-decoration: none;
@@ -156,12 +162,6 @@
     }
   }
 
-  @include large-break {
-    &__edit {
-      padding: base(3.5);
-    }
-  }
-
   @include mid-break {
     &__main {
       width: 100%;
@@ -179,8 +179,8 @@
     }
 
     &__edit {
-      padding: $baseline;
-      margin-bottom: $baseline;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     &__document-actions {
@@ -195,7 +195,7 @@
     &__document-actions,
     &__meta,
     &__sidebar-fields {
-      padding-left: $baseline;
+      padding-left: var(--gutter-h);
     }
 
     &__sidebar-fields {
@@ -205,9 +205,8 @@
     }
 
     &__collection-actions {
-      margin-top: base(.5);
-      padding-left: $baseline;
-      padding-bottom: 0;
+      border-top: 1px solid var(--theme-elevation-100);
+      padding: base(1) 0 0 base(1);
       order: 1;
 
       li {

package/dist/admin/components/views/collections/List/Cell/field-types/Checkbox/index.scss

@@ -6,12 +6,12 @@
   border: 0;
   display: inline-flex;
   vertical-align: middle;
-  background: $color-light-gray;
-  color: $color-dark-gray;
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
   border-radius: $style-radius-s;
   padding: 0 base(0.25);
   padding-left: base(0.0875 + 0.25);
 
-  background: $color-background-gray;
-  color: $color-dark-gray;
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-800);
 }

package/dist/admin/components/views/collections/List/Cell/field-types/Code/index.scss

@@ -6,12 +6,12 @@
   border: 0;
   display: inline-flex;
   vertical-align: middle;
-  background: $color-light-gray;
-  color: $color-dark-gray;
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
   border-radius: $style-radius-s;
   padding: 0 base(0.25);
   padding-left: base(0.0875 + 0.25);
 
-  background: $color-background-gray;
-  color: $color-dark-gray;
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-800);
 }

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import './index.scss';
 declare const RelationshipCell: (props: any) => JSX.Element;
 export default RelationshipCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.js

@@ -1,43 +1,50 @@
 import React, { useState, useEffect } from 'react';
 import { useConfig } from '../../../../../../utilities/Config';
+import useIntersect from '../../../../../../../hooks/useIntersect';
+import { useListRelationships } from '../../../RelationshipProvider';
+import './index.scss';
+const baseClass = 'relationship-cell';
+const totalToShow = 3;
 const RelationshipCell = (props) => {
+    var _a;
     const { field, data: cellData } = props;
-    const { relationTo } = field;
-    const { collections } = useConfig();
-    const [data, setData] = useState();
+    const { collections, routes } = useConfig();
+    const [intersectionRef, entry] = useIntersect();
+    const [values, setValues] = useState([]);
+    const { getRelationships, documents } = useListRelationships();
+    const [hasRequested, setHasRequested] = useState(false);
+    const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) > 0;
     useEffect(() => {
-        const hasManyRelations = Array.isArray(relationTo);
-        if (cellData) {
-            if (Array.isArray(cellData)) {
-                setData(cellData.reduce((newData, value) => {
-                    const relation = hasManyRelations ? value === null || value === void 0 ? void 0 : value.relationTo : relationTo;
-                    const doc = hasManyRelations ? value.value : value;
-                    const collection = collections.find((coll) => coll.slug === relation);
-                    if (collection) {
-                        const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
-                        let title;
-                        if (typeof doc === 'string') {
-                            title = doc;
-                        }
-                        else {
-                            title = (doc === null || doc === void 0 ? void 0 : doc[useAsTitle]) ? doc[useAsTitle] : doc;
-                        }
-                        return newData ? `${newData}, ${title}` : title;
-                    }
-                    return newData;
-                }, ''));
-            }
-            else {
-                const relation = hasManyRelations ? cellData === null || cellData === void 0 ? void 0 : cellData.relationTo : relationTo;
-                const doc = hasManyRelations ? cellData.value : cellData;
-                const collection = collections.find((coll) => coll.slug === relation);
-                if (collection && doc) {
-                    const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
-                    setData(doc[useAsTitle] ? doc[useAsTitle] : doc);
+        if (cellData && isAboveViewport && !hasRequested) {
+            const formattedValues = [];
+            const arrayCellData = Array.isArray(cellData) ? cellData : [cellData];
+            arrayCellData.slice(0, (arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow)).forEach((cell) => {
+                if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {
+                    formattedValues.push(cell);
                 }
-            }
+                if ((typeof cell === 'number' || typeof cell === 'string') && typeof field.relationTo === 'string') {
+                    formattedValues.push({
+                        value: cell,
+                        relationTo: field.relationTo,
+                    });
+                }
+            });
+            getRelationships(formattedValues);
+            setHasRequested(true);
+            setValues(formattedValues);
         }
-    }, [cellData, relationTo, field, collections]);
-    return (React.createElement(React.Fragment, null, data));
+    }, [cellData, field, collections, isAboveViewport, routes.api, hasRequested, getRelationships]);
+    return (React.createElement("div", { className: baseClass, ref: intersectionRef },
+        values.map(({ relationTo, value }, i) => {
+            const document = documents[relationTo][value];
+            const relatedCollection = collections.find(({ slug }) => slug === relationTo);
+            return (React.createElement(React.Fragment, { key: i },
+                document === false && `Untitled - ID: ${value}`,
+                document === null && 'Loading...',
+                document && (document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `Untitled - ID: ${value}`),
+                values.length > i + 1 && ', '));
+        }),
+        Array.isArray(cellData) && cellData.length > totalToShow && ` and ${cellData.length - totalToShow} more`,
+        values.length === 0 && `No <${field.label}>`));
 };
 export default RelationshipCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.scss

@@ -0,0 +1,3 @@
+.relationship-cell {
+  min-width: 250px;
+}

package/dist/admin/components/views/collections/List/Cell/field-types/Upload/index.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const UploadCell: ({ data }: {
-    data: any;
-}) => JSX.Element;
-export default UploadCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Upload/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-const UploadCell = ({ data }) => (React.createElement(React.Fragment, null,
-    React.createElement("span", null, data === null || data === void 0 ? void 0 : data.filename)));
-export default UploadCell;

package/dist/admin/components/views/collections/List/Cell/field-types/index.d.ts

@@ -28,8 +28,6 @@ declare const _default: {
     textarea: ({ data }: {
         data: any;
     }) => JSX.Element;
-    upload: ({ data }: {
-        data: any;
-    }) => JSX.Element;
+    upload: (props: any) => JSX.Element;
 };
 export default _default;

package/dist/admin/components/views/collections/List/Cell/field-types/index.js

@@ -7,7 +7,6 @@ import relationship from './Relationship';
 import richText from './Richtext';
 import select from './Select';
 import textarea from './Textarea';
-import upload from './Upload';
 export default {
     array,
     blocks,
@@ -18,5 +17,5 @@ export default {
     richText,
     select,
     textarea,
-    upload,
+    upload: relationship,
 };

package/dist/admin/components/views/collections/List/Default.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useConfig } from '../../../utilities/Config';
 import UploadGallery from '../../../elements/UploadGallery';
 import Eyebrow from '../../../elements/Eyebrow';
@@ -9,28 +9,30 @@ import Pill from '../../../elements/Pill';
 import Button from '../../../elements/Button';
 import Table from '../../../elements/Table';
 import Meta from '../../../utilities/Meta';
-import './index.scss';
 import ViewDescription from '../../../elements/ViewDescription';
 import PerPage from '../../../elements/PerPage';
+import { Gutter } from '../../../elements/Gutter';
+import { RelationshipProvider } from './RelationshipProvider';
+import './index.scss';
 const baseClass = 'collection-list';
 const DefaultList = (props) => {
     var _a, _b;
     const { collection, collection: { upload, slug, labels: { singular: singularLabel, plural: pluralLabel, }, admin: { description, } = {}, }, data, newDocumentURL, limit, tableColumns, columnNames, setColumns, hasCreatePermission, } = props;
     const { routes: { admin } } = useConfig();
     const history = useHistory();
-    const { pathname, search } = useLocation();
     return (React.createElement("div", { className: baseClass },
         React.createElement(Meta, { title: collection.labels.plural }),
         React.createElement(Eyebrow, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
             React.createElement("header", { className: `${baseClass}__header` },
                 React.createElement("h1", null, pluralLabel),
                 hasCreatePermission && (React.createElement(Pill, { to: newDocumentURL }, "Create New")),
                 description && (React.createElement("div", { className: `${baseClass}__sub-header` },
                     React.createElement(ViewDescription, { description: description })))),
             React.createElement(ListControls, { collection: collection, columns: columnNames, setColumns: setColumns, enableColumns: Boolean(!upload), enableSort: Boolean(upload) }),
-            (data.docs && data.docs.length > 0) && (React.createElement(React.Fragment, { key: `${pathname}${search}` },
-                !upload && (React.createElement(Table, { data: data.docs, columns: tableColumns })),
+            (data.docs && data.docs.length > 0) && (React.createElement(React.Fragment, null,
+                !upload && (React.createElement(RelationshipProvider, null,
+                    React.createElement(Table, { data: data.docs, columns: tableColumns }))),
                 upload && (React.createElement(UploadGallery, { docs: data.docs, collection: collection, onCardClick: (doc) => history.push(`${admin}/collections/${slug}/${doc.id}`) })))),
             data.docs && data.docs.length === 0 && (React.createElement("div", { className: `${baseClass}__no-results` },
                 React.createElement("p", null,

package/dist/admin/components/views/collections/List/RelationshipProvider/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TypeWithID } from '../../../../../../collections/config/types';
+export declare type Documents = {
+    [slug: string]: {
+        [id: string | number]: TypeWithID | null | false;
+    };
+};
+declare type ListRelationshipContext = {
+    getRelationships: (docs: {
+        relationTo: string;
+        value: number | string;
+    }[]) => void;
+    documents: Documents;
+};
+export declare const RelationshipProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useListRelationships: () => ListRelationshipContext;
+export {};