payload 1.3.0 → 1.3.2

package/dist/admin/components/views/collections/List/Cell/cellTypes.spec.js

@@ -1,143 +1,152 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import BlocksCell from './field-types/Blocks';
-import DateCell from './field-types/Date';
-import Checkbox from './field-types/Checkbox';
-import Textarea from './field-types/Textarea';
-import Select from './field-types/Select';
-jest.mock('../../../../utilities/Config', () => ({
-    useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
-}));
-jest.mock('react-i18next', () => ({
-    useTranslation: () => ({ t: (string) => string }),
-}));
-describe('Cell Types', () => {
-    describe('Blocks', () => {
-        const field = {
-            label: 'Blocks Content',
-            name: 'blocks',
-            labels: {
-                singular: 'Block',
-                plural: 'Blocks Content',
-            },
-            type: 'blocks',
-            blocks: [
-                {
-                    slug: 'number',
-                    labels: {
-                        plural: 'Numbers',
-                        singular: 'Number',
-                    },
-                    fields: [],
-                },
-            ],
-        };
-        it('renders multiple', () => {
-            const data = [
-                { blockType: 'number' },
-                { blockType: 'number' },
-            ];
-            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('2 Blocks Content - Number, Number');
-        });
-        it('renders zero', () => {
-            const data = [];
-            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('0 Blocks Content');
-        });
-        it('renders "and X more" if over maximum of 5', () => {
-            const data = [
-                { blockType: 'number' },
-                { blockType: 'number' },
-                { blockType: 'number' },
-                { blockType: 'number' },
-                { blockType: 'number' },
-                { blockType: 'number' },
-            ];
-            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('fields:itemsAndMore');
-        });
-    });
-    describe('Date', () => {
-        it('renders date', () => {
-            const timeStamp = '2020-10-06T14:07:39.033Z';
-            const { container } = render(React.createElement(DateCell, { data: timeStamp }));
-            const dateMatch = /October\s6th\s2020,\s[\d]{1,2}:07\s[A|P]M/; // Had to account for timezones in CI
-            const el = container.querySelector('span');
-            expect(el.textContent).toMatch(dateMatch);
-        });
-        it('handles undefined', () => {
-            const timeStamp = undefined;
-            const { container } = render(React.createElement(DateCell, { data: timeStamp }));
-            const el = container.querySelector('span');
-            expect(el.textContent).toBe('');
-        });
-    });
-    describe('Checkbox', () => {
-        it('renders true', () => {
-            const { container } = render(React.createElement(Checkbox, { data: true }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('true');
-        });
-        it('renders false', () => {
-            const { container } = render(React.createElement(Checkbox, { data: false }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('false');
-        });
-    });
-    describe('Textarea', () => {
-        it('renders data', () => {
-            const { container } = render(React.createElement(Textarea, { data: "data" }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('data');
-        });
-        it('handle undefined - bug/13', () => {
-            const { container } = render(React.createElement(Textarea, { data: undefined }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('');
-        });
-    });
-    describe('Select', () => {
-        const fieldWithOptionsObject = {
-            type: 'select',
-            name: 'selectObject',
-            options: [{
-                    value: 'one',
-                    label: 'One',
-                }, {
-                    value: 'two',
-                    label: 'Two',
-                }],
-        };
-        const fieldWithStringsOptions = {
-            type: 'select',
-            name: 'selectString',
-            options: ['blue', 'green', 'yellow'],
-        };
-        it('renders options objects', () => {
-            const { container } = render(React.createElement(Select, { data: "one", field: fieldWithOptionsObject }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('One');
-        });
-        it('renders option strings', () => {
-            const { container } = render(React.createElement(Select, { data: "blue", field: fieldWithStringsOptions }));
-            const el = container.querySelector('span');
-            expect(el).toHaveTextContent('blue');
-        });
-        describe('HasMany', () => {
-            it('renders options objects', () => {
-                const { container } = render(React.createElement(Select, { data: ['one', 'two'], field: fieldWithOptionsObject }));
-                const el = container.querySelector('span');
-                expect(el).toHaveTextContent('One, Two');
-            });
-            it('renders option strings', () => {
-                const { container } = render(React.createElement(Select, { data: ['blue', 'green'], field: fieldWithStringsOptions }));
-                const el = container.querySelector('span');
-                expect(el).toHaveTextContent('blue, green');
-            });
-        });
-    });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import BlocksCell from './field-types/Blocks';
+import DateCell from './field-types/Date';
+import Checkbox from './field-types/Checkbox';
+import Textarea from './field-types/Textarea';
+import Select from './field-types/Select';
+jest.mock('../../../../utilities/Config', () => ({
+    useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
+}));
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (string) => string }),
+}));
+describe('Cell Types', () => {
+    describe('Blocks', () => {
+        const field = {
+            label: 'Blocks Content',
+            name: 'blocks',
+            labels: {
+                singular: 'Block',
+                plural: 'Blocks Content',
+            },
+            type: 'blocks',
+            blocks: [
+                {
+                    slug: 'number',
+                    labels: {
+                        plural: 'Numbers',
+                        singular: 'Number',
+                    },
+                    fields: [],
+                },
+            ],
+        };
+        it('renders multiple', () => {
+            const data = [
+                { blockType: 'number' },
+                { blockType: 'number' },
+            ];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('2 Blocks Content - Number, Number');
+        });
+        it('renders zero', () => {
+            const data = [];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('0 Blocks Content');
+        });
+        it('renders "and X more" if over maximum of 5', () => {
+            const data = [
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+            ];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('fields:itemsAndMore');
+        });
+    });
+    describe('Date', () => {
+        const field = {
+            name: 'dayOnly',
+            type: 'date',
+            admin: {
+                date: {
+                    pickerAppearance: 'dayOnly',
+                },
+            },
+        };
+        it('renders date', () => {
+            const timeStamp = '2020-10-06T14:07:39.033Z';
+            const { container } = render(React.createElement(DateCell, { data: timeStamp, field: field }));
+            const dateMatch = /October\s6th\s2020,\s[\d]{1,2}:07\s[A|P]M/; // Had to account for timezones in CI
+            const el = container.querySelector('span');
+            expect(el.textContent).toMatch(dateMatch);
+        });
+        it('handles undefined', () => {
+            const timeStamp = undefined;
+            const { container } = render(React.createElement(DateCell, { data: timeStamp, field: field }));
+            const el = container.querySelector('span');
+            expect(el.textContent).toBe('');
+        });
+    });
+    describe('Checkbox', () => {
+        it('renders true', () => {
+            const { container } = render(React.createElement(Checkbox, { data: true }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('true');
+        });
+        it('renders false', () => {
+            const { container } = render(React.createElement(Checkbox, { data: false }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('false');
+        });
+    });
+    describe('Textarea', () => {
+        it('renders data', () => {
+            const { container } = render(React.createElement(Textarea, { data: "data" }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('data');
+        });
+        it('handle undefined - bug/13', () => {
+            const { container } = render(React.createElement(Textarea, { data: undefined }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('');
+        });
+    });
+    describe('Select', () => {
+        const fieldWithOptionsObject = {
+            type: 'select',
+            name: 'selectObject',
+            options: [{
+                    value: 'one',
+                    label: 'One',
+                }, {
+                    value: 'two',
+                    label: 'Two',
+                }],
+        };
+        const fieldWithStringsOptions = {
+            type: 'select',
+            name: 'selectString',
+            options: ['blue', 'green', 'yellow'],
+        };
+        it('renders options objects', () => {
+            const { container } = render(React.createElement(Select, { data: "one", field: fieldWithOptionsObject }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('One');
+        });
+        it('renders option strings', () => {
+            const { container } = render(React.createElement(Select, { data: "blue", field: fieldWithStringsOptions }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('blue');
+        });
+        describe('HasMany', () => {
+            it('renders options objects', () => {
+                const { container } = render(React.createElement(Select, { data: ['one', 'two'], field: fieldWithOptionsObject }));
+                const el = container.querySelector('span');
+                expect(el).toHaveTextContent('One, Two');
+            });
+            it('renders option strings', () => {
+                const { container } = render(React.createElement(Select, { data: ['blue', 'green'], field: fieldWithStringsOptions }));
+                const el = container.querySelector('span');
+                expect(el).toHaveTextContent('blue, green');
+            });
+        });
+    });
+});

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ArrayField } from '../../../../../../../../fields/config/types';
-declare type Props = {
-    data: Record<string, unknown>;
-    field: ArrayField;
-};
-declare const ArrayCell: React.FC<Props>;
-export default ArrayCell;
+import React from 'react';
+import { ArrayField } from '../../../../../../../../fields/config/types';
+type Props = {
+    data: Record<string, unknown>;
+    field: ArrayField;
+};
+declare const ArrayCell: React.FC<Props>;
+export default ArrayCell;

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

@@ -1,11 +1,11 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { getTranslation } from '../../../../../../../../utilities/getTranslation';
-const ArrayCell = ({ data, field }) => {
-    var _a;
-    const { t, i18n } = useTranslation('general');
-    const arrayFields = data !== null && data !== void 0 ? data : [];
-    const label = `${arrayFields.length} ${getTranslation(((_a = field === null || field === void 0 ? void 0 : field.labels) === null || _a === void 0 ? void 0 : _a.plural) || t('rows'), i18n)}`;
-    return (React.createElement("span", null, label));
-};
-export default ArrayCell;
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+const ArrayCell = ({ data, field }) => {
+    var _a;
+    const { t, i18n } = useTranslation('general');
+    const arrayFields = data !== null && data !== void 0 ? data : [];
+    const label = `${arrayFields.length} ${getTranslation(((_a = field === null || field === void 0 ? void 0 : field.labels) === null || _a === void 0 ? void 0 : _a.plural) || t('rows'), i18n)}`;
+    return (React.createElement("span", null, label));
+};
+export default ArrayCell;

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { BlockField } from '../../../../../../../../fields/config/types';
-declare type Props = {
-    data: any;
-    field: BlockField;
-};
-declare const BlocksCell: React.FC<Props>;
-export default BlocksCell;
+import React from 'react';
+import { BlockField } from '../../../../../../../../fields/config/types';
+type Props = {
+    data: any;
+    field: BlockField;
+};
+declare const BlocksCell: React.FC<Props>;
+export default BlocksCell;

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

@@ -1,24 +1,24 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { getTranslation } from '../../../../../../../../utilities/getTranslation';
-const BlocksCell = ({ data, field }) => {
-    const { t, i18n } = useTranslation('fields');
-    const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
-    const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: getTranslation(s.labels.singular, i18n) }));
-    let label = `0 ${getTranslation(field.labels.plural, i18n)}`;
-    const formatBlockList = (blocks) => blocks.map((b) => {
-        var _a;
-        const filtered = (_a = blockLabels.filter((f) => f.slug === b)) === null || _a === void 0 ? void 0 : _a[0];
-        return filtered === null || filtered === void 0 ? void 0 : filtered.label;
-    }).join(', ');
-    const itemsToShow = 5;
-    if (selectedBlocks.length > itemsToShow) {
-        const more = selectedBlocks.length - itemsToShow;
-        label = `${selectedBlocks.length} ${getTranslation(field.labels.plural, i18n)} - ${t('fields:itemsAndMore', { items: formatBlockList(selectedBlocks.slice(0, itemsToShow)), count: more })}`;
-    }
-    else if (selectedBlocks.length > 0) {
-        label = `${selectedBlocks.length} ${getTranslation(selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural, i18n)} - ${formatBlockList(selectedBlocks)}`;
-    }
-    return (React.createElement("span", null, label));
-};
-export default BlocksCell;
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+const BlocksCell = ({ data, field }) => {
+    const { t, i18n } = useTranslation('fields');
+    const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
+    const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: getTranslation(s.labels.singular, i18n) }));
+    let label = `0 ${getTranslation(field.labels.plural, i18n)}`;
+    const formatBlockList = (blocks) => blocks.map((b) => {
+        var _a;
+        const filtered = (_a = blockLabels.filter((f) => f.slug === b)) === null || _a === void 0 ? void 0 : _a[0];
+        return filtered === null || filtered === void 0 ? void 0 : filtered.label;
+    }).join(', ');
+    const itemsToShow = 5;
+    if (selectedBlocks.length > itemsToShow) {
+        const more = selectedBlocks.length - itemsToShow;
+        label = `${selectedBlocks.length} ${getTranslation(field.labels.plural, i18n)} - ${t('fields:itemsAndMore', { items: formatBlockList(selectedBlocks.slice(0, itemsToShow)), count: more })}`;
+    }
+    else if (selectedBlocks.length > 0) {
+        label = `${selectedBlocks.length} ${getTranslation(selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural, i18n)} - ${formatBlockList(selectedBlocks)}`;
+    }
+    return (React.createElement("span", null, label));
+};
+export default BlocksCell;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import './index.scss';
-declare const Checkbox: ({ data }: {
-    data: any;
-}) => JSX.Element;
-export default Checkbox;
+/// <reference types="react" />
+import './index.scss';
+declare const Checkbox: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default Checkbox;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import './index.scss';
-// Handles boolean values
-const Checkbox = ({ data }) => (React.createElement("code", { className: "bool-cell" },
-    React.createElement("span", null, JSON.stringify(data))));
-export default Checkbox;
+import React from 'react';
+import './index.scss';
+// Handles boolean values
+const Checkbox = ({ data }) => (React.createElement("code", { className: "bool-cell" },
+    React.createElement("span", null, JSON.stringify(data))));
+export default Checkbox;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import './index.scss';
-declare const CodeCell: ({ data }: {
-    data: any;
-}) => JSX.Element;
-export default CodeCell;
+/// <reference types="react" />
+import './index.scss';
+declare const CodeCell: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default CodeCell;

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import './index.scss';
-const CodeCell = ({ data }) => {
-    const textToShow = data.length > 100 ? `${data.substring(0, 100)}\u2026` : data;
-    return (React.createElement("code", { className: "code-cell" },
-        React.createElement("span", null, textToShow)));
-};
-export default CodeCell;
+import React from 'react';
+import './index.scss';
+const CodeCell = ({ data }) => {
+    const textToShow = data.length > 100 ? `${data.substring(0, 100)}\u2026` : data;
+    return (React.createElement("code", { className: "code-cell" },
+        React.createElement("span", null, textToShow)));
+};
+export default CodeCell;

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

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

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

@@ -1,8 +1,10 @@
-import React from 'react';
-import format from 'date-fns/format';
-import { useConfig } from '../../../../../../utilities/Config';
-const DateCell = ({ data }) => {
-    const { admin: { dateFormat } } = useConfig();
-    return (React.createElement("span", null, data && format(new Date(data), dateFormat)));
-};
-export default DateCell;
+import React from 'react';
+import format from 'date-fns/format';
+import { useConfig } from '../../../../../../utilities/Config';
+const DateCell = ({ data, field }) => {
+    var _a, _b;
+    const { admin: { dateFormat: dateFormatFromConfig } } = useConfig();
+    const dateFormat = ((_b = (_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.date) === null || _b === void 0 ? void 0 : _b.displayFormat) || dateFormatFromConfig;
+    return (React.createElement("span", null, data && format(new Date(data), dateFormat)));
+};
+export default DateCell;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import './index.scss';
-declare const RelationshipCell: (props: any) => JSX.Element;
-export default RelationshipCell;
+/// <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,54 +1,54 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useConfig } from '../../../../../../utilities/Config';
-import useIntersect from '../../../../../../../hooks/useIntersect';
-import { useListRelationships } from '../../../RelationshipProvider';
-import { getTranslation } from '../../../../../../../../utilities/getTranslation';
-import './index.scss';
-const baseClass = 'relationship-cell';
-const totalToShow = 3;
-const RelationshipCell = (props) => {
-    var _a;
-    const { field, data: cellData } = props;
-    const { collections, routes } = useConfig();
-    const [intersectionRef, entry] = useIntersect();
-    const [values, setValues] = useState([]);
-    const { getRelationships, documents } = useListRelationships();
-    const [hasRequested, setHasRequested] = useState(false);
-    const { t, i18n } = useTranslation('general');
-    const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) < window.innerHeight;
-    useEffect(() => {
-        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, 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 && `${t('untitled')} - ID: ${value}`,
-                document === null && t('loading'),
-                document && (document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `${t('untitled')} - ID: ${value}`),
-                values.length > i + 1 && ', '));
-        }),
-        Array.isArray(cellData) && cellData.length > totalToShow
-            && t('fields:itemsAndMore', { items: '', count: cellData.length - totalToShow }),
-        values.length === 0 && t('noLabel', { label: getTranslation(field.label, i18n) })));
-};
-export default RelationshipCell;
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../../../../../utilities/Config';
+import useIntersect from '../../../../../../../hooks/useIntersect';
+import { useListRelationships } from '../../../RelationshipProvider';
+import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+import './index.scss';
+const baseClass = 'relationship-cell';
+const totalToShow = 3;
+const RelationshipCell = (props) => {
+    var _a;
+    const { field, data: cellData } = props;
+    const { collections, routes } = useConfig();
+    const [intersectionRef, entry] = useIntersect();
+    const [values, setValues] = useState([]);
+    const { getRelationships, documents } = useListRelationships();
+    const [hasRequested, setHasRequested] = useState(false);
+    const { t, i18n } = useTranslation('general');
+    const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) < window.innerHeight;
+    useEffect(() => {
+        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, 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 && `${t('untitled')} - ID: ${value}`,
+                document === null && t('loading'),
+                document && (document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `${t('untitled')} - ID: ${value}`),
+                values.length > i + 1 && ', '));
+        }),
+        Array.isArray(cellData) && cellData.length > totalToShow
+            && t('fields:itemsAndMore', { items: '', count: cellData.length - totalToShow }),
+        values.length === 0 && t('noLabel', { label: getTranslation(field.label, i18n) })));
+};
+export default RelationshipCell;