payload 1.0.33 → 1.0.36

package/dist/admin/components/elements/DeleteDocument/index.js

@@ -1,78 +1,78 @@
-import React, { useState, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { useHistory } from 'react-router-dom';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useConfig } from '../../utilities/Config';
-import Button from '../Button';
-import MinimalTemplate from '../../templates/Minimal';
-import { useForm } from '../../forms/Form/context';
-import useTitle from '../../../hooks/useTitle';
-import { requests } from '../../../api';
-import './index.scss';
-const baseClass = 'delete-document';
-const DeleteDocument = (props) => {
-    const { title: titleFromProps, id, buttonId, collection: { admin: { useAsTitle, }, slug, labels: { singular, } = {}, } = {}, } = props;
-    const { serverURL, routes: { api, admin } } = useConfig();
-    const { setModified } = useForm();
-    const [deleting, setDeleting] = useState(false);
-    const { closeAll, toggle } = useModal();
-    const history = useHistory();
-    const title = useTitle(useAsTitle) || id;
-    const titleToRender = titleFromProps || title;
-    const modalSlug = `delete-${id}`;
-    const addDefaultError = useCallback(() => {
-        toast.error(`There was an error while deleting ${title}. Please check your connection and try again.`);
-    }, [title]);
-    const handleDelete = useCallback(() => {
-        setDeleting(true);
-        setModified(false);
-        requests.delete(`${serverURL}${api}/${slug}/${id}`, {
-            headers: {
-                'Content-Type': 'application/json',
-            },
-        }).then(async (res) => {
-            try {
-                const json = await res.json();
-                if (res.status < 400) {
-                    closeAll();
-                    toast.success(`${singular} "${title}" successfully deleted.`);
-                    return history.push(`${admin}/collections/${slug}`);
-                }
-                closeAll();
-                if (json.errors) {
-                    json.errors.forEach((error) => toast.error(error.message));
-                }
-                else {
-                    addDefaultError();
-                }
-                return false;
-            }
-            catch (e) {
-                return addDefaultError();
-            }
-        });
-    }, [addDefaultError, closeAll, history, id, singular, slug, title, admin, api, serverURL, setModified]);
-    if (id) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("button", { type: "button", id: buttonId, className: `${baseClass}__toggle`, onClick: (e) => {
-                    e.preventDefault();
-                    setDeleting(false);
-                    toggle(modalSlug);
-                } }, "Delete"),
-            React.createElement(Modal, { slug: modalSlug, className: baseClass },
-                React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
-                    React.createElement("h1", null, "Confirm deletion"),
-                    React.createElement("p", null,
-                        "You are about to delete the",
-                        ' ',
-                        singular,
-                        ' ',
-                        "\"",
-                        React.createElement("strong", null, titleToRender),
-                        "\". Are you sure?"),
-                    React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: deleting ? undefined : () => toggle(modalSlug) }, "Cancel"),
-                    React.createElement(Button, { onClick: deleting ? undefined : handleDelete, id: "confirm-delete" }, deleting ? 'Deleting...' : 'Confirm')))));
-    }
-    return null;
-};
-export default DeleteDocument;
+import React, { useState, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { useHistory } from 'react-router-dom';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import MinimalTemplate from '../../templates/Minimal';
+import { useForm } from '../../forms/Form/context';
+import useTitle from '../../../hooks/useTitle';
+import { requests } from '../../../api';
+import './index.scss';
+const baseClass = 'delete-document';
+const DeleteDocument = (props) => {
+    const { title: titleFromProps, id, buttonId, collection: { admin: { useAsTitle, }, slug, labels: { singular, } = {}, } = {}, } = props;
+    const { serverURL, routes: { api, admin } } = useConfig();
+    const { setModified } = useForm();
+    const [deleting, setDeleting] = useState(false);
+    const { toggleModal } = useModal();
+    const history = useHistory();
+    const title = useTitle(useAsTitle) || id;
+    const titleToRender = titleFromProps || title;
+    const modalSlug = `delete-${id}`;
+    const addDefaultError = useCallback(() => {
+        toast.error(`There was an error while deleting ${title}. Please check your connection and try again.`);
+    }, [title]);
+    const handleDelete = useCallback(() => {
+        setDeleting(true);
+        setModified(false);
+        requests.delete(`${serverURL}${api}/${slug}/${id}`, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        }).then(async (res) => {
+            try {
+                const json = await res.json();
+                if (res.status < 400) {
+                    toggleModal(modalSlug);
+                    toast.success(`${singular} "${title}" successfully deleted.`);
+                    return history.push(`${admin}/collections/${slug}`);
+                }
+                toggleModal(modalSlug);
+                if (json.errors) {
+                    json.errors.forEach((error) => toast.error(error.message));
+                }
+                else {
+                    addDefaultError();
+                }
+                return false;
+            }
+            catch (e) {
+                return addDefaultError();
+            }
+        });
+    }, [addDefaultError, toggleModal, modalSlug, history, id, singular, slug, title, admin, api, serverURL, setModified]);
+    if (id) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("button", { type: "button", id: buttonId, className: `${baseClass}__toggle`, onClick: (e) => {
+                    e.preventDefault();
+                    setDeleting(false);
+                    toggleModal(modalSlug);
+                } }, "Delete"),
+            React.createElement(Modal, { slug: modalSlug, className: baseClass },
+                React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
+                    React.createElement("h1", null, "Confirm deletion"),
+                    React.createElement("p", null,
+                        "You are about to delete the",
+                        ' ',
+                        singular,
+                        ' ',
+                        "\"",
+                        React.createElement("strong", null, titleToRender),
+                        "\". Are you sure?"),
+                    React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: deleting ? undefined : () => toggleModal(modalSlug) }, "Cancel"),
+                    React.createElement(Button, { onClick: deleting ? undefined : handleDelete, id: "confirm-delete" }, deleting ? 'Deleting...' : 'Confirm')))));
+    }
+    return null;
+};
+export default DeleteDocument;

package/dist/admin/components/elements/DeleteDocument/types.d.ts

@@ -1,7 +1,7 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
-    collection?: SanitizedCollectionConfig;
-    id?: string;
-    buttonId?: string;
-    title?: string;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type Props = {
+    collection?: SanitizedCollectionConfig;
+    id?: string;
+    buttonId?: string;
+    title?: string;
+};

package/dist/admin/components/elements/DeleteDocument/types.js

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

package/dist/admin/components/elements/DuplicateDocument/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Duplicate: React.FC<Props>;
-export default Duplicate;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Duplicate: React.FC<Props>;
+export default Duplicate;

package/dist/admin/components/elements/DuplicateDocument/index.js

@@ -1,96 +1,96 @@
-import React, { useCallback, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useConfig } from '../../utilities/Config';
-import Button from '../Button';
-import { requests } from '../../../api';
-import { useForm, useFormModified } from '../../forms/Form/context';
-import MinimalTemplate from '../../templates/Minimal';
-import './index.scss';
-const baseClass = 'duplicate';
-const Duplicate = ({ slug, collection, id }) => {
-    const { push } = useHistory();
-    const modified = useFormModified();
-    const { toggle } = useModal();
-    const { setModified } = useForm();
-    const { serverURL, routes: { api }, localization } = useConfig();
-    const { routes: { admin } } = useConfig();
-    const [hasClicked, setHasClicked] = useState(false);
-    const modalSlug = `duplicate-${id}`;
-    const handleClick = useCallback(async (override = false) => {
-        setHasClicked(true);
-        if (modified && !override) {
-            toggle(modalSlug);
-            return;
-        }
-        const create = async (locale) => {
-            const localeParam = locale ? `locale=${locale}` : '';
-            const response = await requests.get(`${serverURL}${api}/${slug}/${id}?${localeParam}`);
-            const data = await response.json();
-            const result = await requests.post(`${serverURL}${api}/${slug}`, {
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            });
-            const json = await result.json();
-            if (result.status === 201) {
-                return json.doc.id;
-            }
-            json.errors.forEach((error) => toast.error(error.message));
-            return null;
-        };
-        let duplicateID;
-        if (localization) {
-            duplicateID = await create(localization.defaultLocale);
-            let abort = false;
-            localization.locales
-                .filter((locale) => locale !== localization.defaultLocale)
-                .forEach(async (locale) => {
-                if (!abort) {
-                    const res = await requests.get(`${serverURL}${api}/${slug}/${id}?locale=${locale}`);
-                    const localizedDoc = await res.json();
-                    const patchResult = await requests.patch(`${serverURL}${api}/${slug}/${duplicateID}?locale=${locale}`, {
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(localizedDoc),
-                    });
-                    if (patchResult.status > 400) {
-                        abort = true;
-                        const json = await patchResult.json();
-                        json.errors.forEach((error) => toast.error(error.message));
-                    }
-                }
-            });
-            if (abort) {
-                // delete the duplicate doc to prevent incomplete
-                await requests.delete(`${serverURL}${api}/${slug}/${id}`);
-            }
-        }
-        else {
-            duplicateID = await create();
-        }
-        toast.success(`${collection.labels.singular} successfully duplicated.`, { autoClose: 3000 });
-        setModified(false);
-        setTimeout(() => {
-            push({
-                pathname: `${admin}/collections/${slug}/${duplicateID}`,
-            });
-        }, 10);
-    }, [modified, localization, collection.labels.singular, setModified, toggle, modalSlug, serverURL, api, slug, id, push, admin]);
-    const confirm = useCallback(async () => {
-        setHasClicked(false);
-        await handleClick(true);
-    }, [handleClick]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { id: "action-duplicate", buttonStyle: "none", className: baseClass, onClick: () => handleClick(false) }, "Duplicate"),
-        modified && hasClicked && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
-                React.createElement("h1", null, "Confirm duplicate"),
-                React.createElement("p", null, "You have unsaved changes. Would you like to continue to duplicate?"),
-                React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: () => toggle(modalSlug) }, "Cancel"),
-                React.createElement(Button, { onClick: confirm, id: "confirm-duplicate" }, "Duplicate without saving changes"))))));
-};
-export default Duplicate;
+import React, { useCallback, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import { requests } from '../../../api';
+import { useForm, useFormModified } from '../../forms/Form/context';
+import MinimalTemplate from '../../templates/Minimal';
+import './index.scss';
+const baseClass = 'duplicate';
+const Duplicate = ({ slug, collection, id }) => {
+    const { push } = useHistory();
+    const modified = useFormModified();
+    const { toggleModal } = useModal();
+    const { setModified } = useForm();
+    const { serverURL, routes: { api }, localization } = useConfig();
+    const { routes: { admin } } = useConfig();
+    const [hasClicked, setHasClicked] = useState(false);
+    const modalSlug = `duplicate-${id}`;
+    const handleClick = useCallback(async (override = false) => {
+        setHasClicked(true);
+        if (modified && !override) {
+            toggleModal(modalSlug);
+            return;
+        }
+        const create = async (locale) => {
+            const localeParam = locale ? `locale=${locale}` : '';
+            const response = await requests.get(`${serverURL}${api}/${slug}/${id}?${localeParam}`);
+            const data = await response.json();
+            const result = await requests.post(`${serverURL}${api}/${slug}`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+            const json = await result.json();
+            if (result.status === 201) {
+                return json.doc.id;
+            }
+            json.errors.forEach((error) => toast.error(error.message));
+            return null;
+        };
+        let duplicateID;
+        if (localization) {
+            duplicateID = await create(localization.defaultLocale);
+            let abort = false;
+            localization.locales
+                .filter((locale) => locale !== localization.defaultLocale)
+                .forEach(async (locale) => {
+                if (!abort) {
+                    const res = await requests.get(`${serverURL}${api}/${slug}/${id}?locale=${locale}`);
+                    const localizedDoc = await res.json();
+                    const patchResult = await requests.patch(`${serverURL}${api}/${slug}/${duplicateID}?locale=${locale}`, {
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(localizedDoc),
+                    });
+                    if (patchResult.status > 400) {
+                        abort = true;
+                        const json = await patchResult.json();
+                        json.errors.forEach((error) => toast.error(error.message));
+                    }
+                }
+            });
+            if (abort) {
+                // delete the duplicate doc to prevent incomplete
+                await requests.delete(`${serverURL}${api}/${slug}/${id}`);
+            }
+        }
+        else {
+            duplicateID = await create();
+        }
+        toast.success(`${collection.labels.singular} successfully duplicated.`, { autoClose: 3000 });
+        setModified(false);
+        setTimeout(() => {
+            push({
+                pathname: `${admin}/collections/${slug}/${duplicateID}`,
+            });
+        }, 10);
+    }, [modified, localization, collection.labels.singular, setModified, toggleModal, modalSlug, serverURL, api, slug, id, push, admin]);
+    const confirm = useCallback(async () => {
+        setHasClicked(false);
+        await handleClick(true);
+    }, [handleClick]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { id: "action-duplicate", buttonStyle: "none", className: baseClass, onClick: () => handleClick(false) }, "Duplicate"),
+        modified && hasClicked && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
+            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
+                React.createElement("h1", null, "Confirm duplicate"),
+                React.createElement("p", null, "You have unsaved changes. Would you like to continue to duplicate?"),
+                React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: () => toggleModal(modalSlug) }, "Cancel"),
+                React.createElement(Button, { onClick: confirm, id: "confirm-duplicate" }, "Duplicate without saving changes"))))));
+};
+export default Duplicate;

package/dist/admin/components/elements/DuplicateDocument/types.d.ts

@@ -1,6 +1,6 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
-    slug: string;
-    collection: SanitizedCollectionConfig;
-    id: string;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type Props = {
+    slug: string;
+    collection: SanitizedCollectionConfig;
+    id: string;
+};

package/dist/admin/components/elements/DuplicateDocument/types.js

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

package/dist/admin/components/elements/Eyebrow/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Eyebrow: React.FC<Props>;
-export default Eyebrow;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Eyebrow: React.FC<Props>;
+export default Eyebrow;

package/dist/admin/components/elements/Eyebrow/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import StepNav from '../StepNav';
-import { Gutter } from '../Gutter';
-import './index.scss';
-const baseClass = 'eyebrow';
-const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
-    React.createElement(Gutter, { className: `${baseClass}__wrap` },
-        React.createElement(StepNav, null),
-        actions)));
-export default Eyebrow;
+import React from 'react';
+import StepNav from '../StepNav';
+import { Gutter } from '../Gutter';
+import './index.scss';
+const baseClass = 'eyebrow';
+const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
+    React.createElement(Gutter, { className: `${baseClass}__wrap` },
+        React.createElement(StepNav, null),
+        actions)));
+export default Eyebrow;

package/dist/admin/components/elements/Eyebrow/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare type Props = {
-    actions?: React.ReactNode;
-};
+/// <reference types="react" />
+export declare type Props = {
+    actions?: React.ReactNode;
+};

package/dist/admin/components/elements/Eyebrow/types.js

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

package/dist/admin/components/elements/FileDetails/Meta/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Meta: React.FC<Props>;
-export default Meta;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Meta: React.FC<Props>;
+export default Meta;

package/dist/admin/components/elements/FileDetails/Meta/index.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import { useConfig } from '../../../utilities/Config';
-import CopyToClipboard from '../../CopyToClipboard';
-import formatFilesize from '../../../../../uploads/formatFilesize';
-import './index.scss';
-const baseClass = 'file-meta';
-const Meta = (props) => {
-    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
-    const { serverURL } = useConfig();
-    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("div", { className: `${baseClass}__url` },
-            React.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
-            React.createElement(CopyToClipboard, { value: fileURL, defaultMessage: "Copy URL" })),
-        React.createElement("div", { className: `${baseClass}__size-type` },
-            formatFilesize(filesize),
-            (width && height) && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                width,
-                "x",
-                height)),
-            mimeType && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                mimeType)))));
-};
-export default Meta;
+import React from 'react';
+import { useConfig } from '../../../utilities/Config';
+import CopyToClipboard from '../../CopyToClipboard';
+import formatFilesize from '../../../../../uploads/formatFilesize';
+import './index.scss';
+const baseClass = 'file-meta';
+const Meta = (props) => {
+    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
+    const { serverURL } = useConfig();
+    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("div", { className: `${baseClass}__url` },
+            React.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
+            React.createElement(CopyToClipboard, { value: fileURL, defaultMessage: "Copy URL" })),
+        React.createElement("div", { className: `${baseClass}__size-type` },
+            formatFilesize(filesize),
+            (width && height) && (React.createElement(React.Fragment, null,
+                "\u00A0-\u00A0",
+                width,
+                "x",
+                height)),
+            mimeType && (React.createElement(React.Fragment, null,
+                "\u00A0-\u00A0",
+                mimeType)))));
+};
+export default Meta;

package/dist/admin/components/elements/FileDetails/Meta/types.d.ts

@@ -1,10 +1,10 @@
-export declare type Props = {
-    filename: string;
-    mimeType: string;
-    filesize: number;
-    staticURL: string;
-    width?: number;
-    height?: number;
-    sizes?: unknown;
-    url?: string;
-};
+export declare type Props = {
+    filename: string;
+    mimeType: string;
+    filesize: number;
+    staticURL: string;
+    width?: number;
+    height?: number;
+    sizes?: unknown;
+    url?: string;
+};

package/dist/admin/components/elements/FileDetails/Meta/types.js

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

package/dist/admin/components/elements/FileDetails/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const FileDetails: React.FC<Props>;
-export default FileDetails;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const FileDetails: React.FC<Props>;
+export default FileDetails;

package/dist/admin/components/elements/FileDetails/index.js

@@ -1,39 +1,39 @@
-import React, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import Thumbnail from '../Thumbnail';
-import Button from '../Button';
-import Meta from './Meta';
-import Chevron from '../../icons/Chevron';
-import './index.scss';
-const baseClass = 'file-details';
-const FileDetails = (props) => {
-    var _a;
-    const { doc, collection, handleRemove, } = props;
-    const { upload: { staticURL, }, } = collection;
-    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
-    const [moreInfoOpen, setMoreInfoOpen] = useState(false);
-    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("header", null,
-            React.createElement(Thumbnail, { doc: doc, collection: collection }),
-            React.createElement("div", { className: `${baseClass}__main-detail` },
-                React.createElement(Meta, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
-                hasSizes && (React.createElement(Button, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
-                    !moreInfoOpen && (React.createElement(React.Fragment, null,
-                        "More info",
-                        React.createElement(Chevron, null))),
-                    moreInfoOpen && (React.createElement(React.Fragment, null,
-                        "Less info",
-                        React.createElement(Chevron, null)))))),
-            handleRemove && (React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
-        hasSizes && (React.createElement(AnimateHeight, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
-            React.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(sizes).map(([key, val]) => {
-                if (val === null || val === void 0 ? void 0 : val.filename) {
-                    return (React.createElement("li", { key: key },
-                        React.createElement("div", { className: `${baseClass}__size-label` }, key),
-                        React.createElement(Meta, { ...val, mimeType: mimeType, staticURL: staticURL })));
-                }
-                return null;
-            }))))));
-};
-export default FileDetails;
+import React, { useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import Thumbnail from '../Thumbnail';
+import Button from '../Button';
+import Meta from './Meta';
+import Chevron from '../../icons/Chevron';
+import './index.scss';
+const baseClass = 'file-details';
+const FileDetails = (props) => {
+    var _a;
+    const { doc, collection, handleRemove, } = props;
+    const { upload: { staticURL, }, } = collection;
+    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
+    const [moreInfoOpen, setMoreInfoOpen] = useState(false);
+    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("header", null,
+            React.createElement(Thumbnail, { doc: doc, collection: collection }),
+            React.createElement("div", { className: `${baseClass}__main-detail` },
+                React.createElement(Meta, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
+                hasSizes && (React.createElement(Button, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
+                    !moreInfoOpen && (React.createElement(React.Fragment, null,
+                        "More info",
+                        React.createElement(Chevron, null))),
+                    moreInfoOpen && (React.createElement(React.Fragment, null,
+                        "Less info",
+                        React.createElement(Chevron, null)))))),
+            handleRemove && (React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
+        hasSizes && (React.createElement(AnimateHeight, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
+            React.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(sizes).map(([key, val]) => {
+                if (val === null || val === void 0 ? void 0 : val.filename) {
+                    return (React.createElement("li", { key: key },
+                        React.createElement("div", { className: `${baseClass}__size-label` }, key),
+                        React.createElement(Meta, { ...val, mimeType: mimeType, staticURL: staticURL })));
+                }
+                return null;
+            }))))));
+};
+export default FileDetails;