payload 1.0.9 → 1.0.10

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

@@ -1,102 +1,105 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-dom';
-import { useConfig } from '../../../utilities/Config';
-import { useAuth } from '../../../utilities/Auth';
-import { useStepNav } from '../../../elements/StepNav';
-import usePayloadAPI from '../../../../hooks/usePayloadAPI';
-import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
-import DefaultEdit from './Default';
-import formatFields from './formatFields';
-import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
-import { useLocale } from '../../../utilities/Locale';
-import { useDocumentInfo } from '../../../utilities/DocumentInfo';
-const EditView = (props) => {
-    var _a, _b, _c;
-    const { collection: incomingCollection, isEditing } = props;
-    const { slug, labels: { plural: pluralLabel, }, admin: { useAsTitle, components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = incomingCollection;
-    const [fields] = useState(() => formatFields(incomingCollection, isEditing));
-    const [collection] = useState(() => ({ ...incomingCollection, fields }));
-    const locale = useLocale();
-    const { serverURL, routes: { admin, api } } = useConfig();
-    const { params: { id } = {} } = useRouteMatch();
-    const { state: locationState } = useLocation();
-    const history = useHistory();
-    const { setStepNav } = useStepNav();
-    const [initialState, setInitialState] = useState({});
-    const { permissions, user } = useAuth();
-    const { getVersions, preferences } = useDocumentInfo();
-    const onSave = useCallback(async (json) => {
-        var _a;
-        getVersions();
-        if (!isEditing) {
-            history.push(`${admin}/collections/${collection.slug}/${(_a = json === null || json === void 0 ? void 0 : json.doc) === null || _a === void 0 ? void 0 : _a.id}`);
-        }
-        else {
-            const state = await buildStateFromSchema({ fieldSchema: collection.fields, data: json.doc, user, id, operation: 'update', locale });
-            setInitialState(state);
-        }
-    }, [admin, collection, history, isEditing, getVersions, user, id, locale]);
-    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 = [{
-                url: `${admin}/collections/${slug}`,
-                label: pluralLabel,
-            }];
-        if (isEditing) {
-            let label = '';
-            if (dataToRender) {
-                if (useAsTitle) {
-                    if (dataToRender[useAsTitle]) {
-                        label = dataToRender[useAsTitle];
-                    }
-                    else {
-                        label = '[Untitled]';
-                    }
-                }
-                else {
-                    label = dataToRender.id;
-                }
-            }
-            nav.push({
-                label,
-            });
-        }
-        else {
-            nav.push({
-                label: 'Create New',
-            });
-        }
-        setStepNav(nav);
-    }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle, admin]);
-    useEffect(() => {
-        if (isLoadingDocument) {
-            return;
-        }
-        const awaitInitialState = async () => {
-            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, user, operation: isEditing ? 'update' : 'create', id, locale });
-            setInitialState(state);
-        };
-        awaitInitialState();
-    }, [dataToRender, fields, isEditing, id, user, locale, isLoadingDocument]);
-    if (isError) {
-        return (React.createElement(Redirect, { to: `${admin}/not-found` }));
-    }
-    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[slug];
-    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(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
-            isLoading: isLoadingDocument || !preferences,
-            data: dataToRender,
-            collection,
-            permissions: collectionPermissions,
-            isEditing,
-            onSave,
-            initialState,
-            hasSavePermission,
-            apiURL,
-            action,
-        } }));
-};
-export default EditView;
+import React, { useState, useEffect, useCallback } from 'react';
+import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-dom';
+import { useConfig } from '../../../utilities/Config';
+import { useAuth } from '../../../utilities/Auth';
+import { useStepNav } from '../../../elements/StepNav';
+import usePayloadAPI from '../../../../hooks/usePayloadAPI';
+import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
+import DefaultEdit from './Default';
+import formatFields from './formatFields';
+import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
+import { useLocale } from '../../../utilities/Locale';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { usePreferences } from '../../../utilities/Preferences';
+const EditView = (props) => {
+    var _a, _b, _c;
+    const { collection: incomingCollection, isEditing } = props;
+    const { slug, labels: { plural: pluralLabel, }, admin: { useAsTitle, components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = incomingCollection;
+    const [fields] = useState(() => formatFields(incomingCollection, isEditing));
+    const [collection] = useState(() => ({ ...incomingCollection, fields }));
+    const locale = useLocale();
+    const { serverURL, routes: { admin, api } } = useConfig();
+    const { params: { id } = {} } = useRouteMatch();
+    const { state: locationState } = useLocation();
+    const history = useHistory();
+    const { setStepNav } = useStepNav();
+    const [initialState, setInitialState] = useState();
+    const { permissions, user } = useAuth();
+    const { getVersions, preferencesKey } = useDocumentInfo();
+    const { getPreference } = usePreferences();
+    const onSave = useCallback(async (json) => {
+        var _a;
+        getVersions();
+        if (!isEditing) {
+            history.push(`${admin}/collections/${collection.slug}/${(_a = json === null || json === void 0 ? void 0 : json.doc) === null || _a === void 0 ? void 0 : _a.id}`);
+        }
+        else {
+            const state = await buildStateFromSchema({ fieldSchema: collection.fields, data: json.doc, user, id, operation: 'update', locale });
+            setInitialState(state);
+        }
+    }, [admin, collection, history, isEditing, getVersions, user, id, locale]);
+    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 = [{
+                url: `${admin}/collections/${slug}`,
+                label: pluralLabel,
+            }];
+        if (isEditing) {
+            let label = '';
+            if (dataToRender) {
+                if (useAsTitle) {
+                    if (dataToRender[useAsTitle]) {
+                        label = dataToRender[useAsTitle];
+                    }
+                    else {
+                        label = '[Untitled]';
+                    }
+                }
+                else {
+                    label = dataToRender.id;
+                }
+            }
+            nav.push({
+                label,
+            });
+        }
+        else {
+            nav.push({
+                label: 'Create New',
+            });
+        }
+        setStepNav(nav);
+    }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle, admin]);
+    useEffect(() => {
+        if (isLoadingDocument) {
+            return;
+        }
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, user, operation: isEditing ? 'update' : 'create', id, locale });
+            await getPreference(preferencesKey);
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [dataToRender, fields, isEditing, id, user, locale, isLoadingDocument, preferencesKey, getPreference]);
+    if (isError) {
+        return (React.createElement(Redirect, { to: `${admin}/not-found` }));
+    }
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[slug];
+    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(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
+            isLoading: !initialState,
+            data: dataToRender,
+            collection,
+            permissions: collectionPermissions,
+            isEditing,
+            onSave,
+            initialState,
+            hasSavePermission,
+            apiURL,
+            action,
+        } }));
+};
+export default EditView;

package/dist/admin/components/views/collections/Edit/types.d.ts

@@ -1,19 +1,19 @@
-import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
-import { CollectionPermission } from '../../../../../auth/types';
-import { Document } from '../../../../../types';
-import { Fields } from '../../../forms/Form/types';
-export declare type IndexProps = {
-    collection: SanitizedCollectionConfig;
-    isEditing?: boolean;
-};
-export declare type Props = IndexProps & {
-    data: Document;
-    onSave?: () => void;
-    permissions: CollectionPermission;
-    isLoading: boolean;
-    initialState?: Fields;
-    apiURL: string;
-    action: string;
-    hasSavePermission: boolean;
-    autosaveEnabled: boolean;
-};
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { CollectionPermission } from '../../../../../auth/types';
+import { Document } from '../../../../../types';
+import { Fields } from '../../../forms/Form/types';
+export declare type IndexProps = {
+    collection: SanitizedCollectionConfig;
+    isEditing?: boolean;
+};
+export declare type Props = IndexProps & {
+    data: Document;
+    onSave?: () => void;
+    permissions: CollectionPermission;
+    isLoading: boolean;
+    initialState?: Fields;
+    apiURL: string;
+    action: string;
+    hasSavePermission: boolean;
+    autosaveEnabled: boolean;
+};

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

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,138 +1,138 @@
-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' } }),
-}));
-describe('Cell Types', () => {
-    describe('Blocks', () => {
-        const field = {
-            label: 'Blocks Content',
-            name: 'blocks',
-            labels: {
-                singular: 'Block',
-                plural: 'Blocks Content',
-            },
-            type: 'blocks',
-            blocks: [
-                {
-                    slug: 'number',
-                    labels: {
-                        singular: 'Number',
-                    },
-                },
-            ],
-        };
-        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('6 Blocks Content - Number, Number, Number, Number, Number and 1 more');
-        });
-    });
-    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' } }),
+}));
+describe('Cell Types', () => {
+    describe('Blocks', () => {
+        const field = {
+            label: 'Blocks Content',
+            name: 'blocks',
+            labels: {
+                singular: 'Block',
+                plural: 'Blocks Content',
+            },
+            type: 'blocks',
+            blocks: [
+                {
+                    slug: 'number',
+                    labels: {
+                        singular: 'Number',
+                    },
+                },
+            ],
+        };
+        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('6 Blocks Content - Number, Number, Number, Number, Number and 1 more');
+        });
+    });
+    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');
+            });
+        });
+    });
+});

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';
+declare 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,8 +1,8 @@
-import React from 'react';
-const ArrayCell = ({ data, field }) => {
-    var _a;
-    const arrayFields = data !== null && data !== void 0 ? data : [];
-    const label = `${arrayFields.length} ${((_a = field === null || field === void 0 ? void 0 : field.labels) === null || _a === void 0 ? void 0 : _a.plural) || 'Rows'}`;
-    return (React.createElement("span", null, label));
-};
-export default ArrayCell;
+import React from 'react';
+const ArrayCell = ({ data, field }) => {
+    var _a;
+    const arrayFields = data !== null && data !== void 0 ? data : [];
+    const label = `${arrayFields.length} ${((_a = field === null || field === void 0 ? void 0 : field.labels) === null || _a === void 0 ? void 0 : _a.plural) || 'Rows'}`;
+    return (React.createElement("span", null, label));
+};
+export default ArrayCell;

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

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

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

@@ -1,21 +1,21 @@
-import React from 'react';
-const BlocksCell = ({ data, field }) => {
-    const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
-    const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: s.labels.singular }));
-    let label = `0 ${field.labels.plural}`;
-    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} ${field.labels.plural} - ${formatBlockList(selectedBlocks.slice(0, itemsToShow))} and ${more} more`;
-    }
-    else if (selectedBlocks.length > 0) {
-        label = `${selectedBlocks.length} ${selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural} - ${formatBlockList(selectedBlocks)}`;
-    }
-    return (React.createElement("span", null, label));
-};
-export default BlocksCell;
+import React from 'react';
+const BlocksCell = ({ data, field }) => {
+    const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
+    const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: s.labels.singular }));
+    let label = `0 ${field.labels.plural}`;
+    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} ${field.labels.plural} - ${formatBlockList(selectedBlocks.slice(0, itemsToShow))} and ${more} more`;
+    }
+    else if (selectedBlocks.length > 0) {
+        label = `${selectedBlocks.length} ${selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural} - ${formatBlockList(selectedBlocks)}`;
+    }
+    return (React.createElement("span", null, label));
+};
+export default BlocksCell;