payload 1.7.1 → 1.7.3

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

@@ -1,6 +1,6 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-import type { Props as ListProps } from '../../views/collections/List/types';
-export type Props = {
-    collection: SanitizedCollectionConfig;
-    resetParams: ListProps['resetParams'];
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
+export type Props = {
+    collection: SanitizedCollectionConfig;
+    resetParams: ListProps['resetParams'];
+};

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

@@ -1,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

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,16 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const StepNav_1 = __importDefault(require("../StepNav"));
-const Gutter_1 = require("../Gutter");
-require("./index.scss");
-const baseClass = 'eyebrow';
-const Eyebrow = ({ actions }) => (react_1.default.createElement("div", { className: baseClass },
-    react_1.default.createElement(Gutter_1.Gutter, { className: `${baseClass}__wrap` },
-        react_1.default.createElement(StepNav_1.default, null),
-        actions)));
-exports.default = Eyebrow;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const StepNav_1 = __importDefault(require("../StepNav"));
+const Gutter_1 = require("../Gutter");
+require("./index.scss");
+const baseClass = 'eyebrow';
+const Eyebrow = ({ actions }) => (react_1.default.createElement("div", { className: baseClass },
+    react_1.default.createElement(Gutter_1.Gutter, { className: `${baseClass}__wrap` },
+        react_1.default.createElement(StepNav_1.default, null),
+        actions)));
+exports.default = Eyebrow;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Field, FieldWithPath } from '../../../../fields/config/types';
-import './index.scss';
-type Props = {
-    fields: Field[];
-    setSelected: (fields: FieldWithPath[]) => void;
-};
-export declare const FieldSelect: React.FC<Props>;
-export {};
+import React from 'react';
+import { Field, FieldWithPath } from '../../../../fields/config/types';
+import './index.scss';
+type Props = {
+    fields: Field[];
+    setSelected: (fields: FieldWithPath[]) => void;
+};
+export declare const FieldSelect: React.FC<Props>;
+export {};

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

@@ -1,107 +1,107 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldSelect = void 0;
-const react_1 = __importStar(require("react"));
-const react_i18next_1 = require("react-i18next");
-const types_1 = require("../../../../fields/config/types");
-const ReactSelect_1 = __importDefault(require("../ReactSelect"));
-const getTranslation_1 = require("../../../../utilities/getTranslation");
-const Label_1 = __importDefault(require("../../forms/Label"));
-const context_1 = require("../../forms/Form/context");
-const createNestedFieldPath_1 = require("../../forms/Form/createNestedFieldPath");
-require("./index.scss");
-const baseClass = 'field-select';
-const combineLabel = (prefix, field, i18n) => (`${prefix === '' ? '' : `${prefix} > `}${(0, getTranslation_1.getTranslation)(field.label || field.name, i18n) || ''}`);
-const reduceFields = (fields, i18n, path = '', labelPrefix = '') => (fields.reduce((fieldsToUse, field) => {
-    var _a, _b, _c;
-    // escape for a variety of reasons
-    if ((0, types_1.fieldAffectsData)(field) && (((_a = field.admin) === null || _a === void 0 ? void 0 : _a.disableBulkEdit) || field.unique || field.hidden || ((_b = field.admin) === null || _b === void 0 ? void 0 : _b.hidden) || ((_c = field.admin) === null || _c === void 0 ? void 0 : _c.readOnly))) {
-        return fieldsToUse;
-    }
-    if (!(field.type === 'array' || field.type === 'blocks') && (0, types_1.fieldHasSubFields)(field)) {
-        return [
-            ...fieldsToUse,
-            ...reduceFields(field.fields, i18n, (0, createNestedFieldPath_1.createNestedFieldPath)(path, field), combineLabel(labelPrefix, field, i18n)),
-        ];
-    }
-    if (field.type === 'tabs') {
-        return [
-            ...fieldsToUse,
-            ...field.tabs.reduce((tabFields, tab) => {
-                return [
-                    ...tabFields,
-                    ...(reduceFields(tab.fields, i18n, (0, types_1.tabHasName)(tab) ? (0, createNestedFieldPath_1.createNestedFieldPath)(path, field) : path, combineLabel(labelPrefix, field, i18n))),
-                ];
-            }, []),
-        ];
-    }
-    const formattedField = {
-        label: combineLabel(labelPrefix, field, i18n),
-        value: {
-            ...field,
-            path: (0, createNestedFieldPath_1.createNestedFieldPath)(path, field),
-        },
-    };
-    return [
-        ...fieldsToUse,
-        formattedField,
-    ];
-}, []));
-const FieldSelect = ({ fields, setSelected, }) => {
-    const { t, i18n } = (0, react_i18next_1.useTranslation)('general');
-    const [options] = (0, react_1.useState)(() => reduceFields(fields, i18n));
-    const { getFields, dispatchFields } = (0, context_1.useForm)();
-    const handleChange = (selected) => {
-        const activeFields = getFields();
-        if (selected === null) {
-            setSelected([]);
-        }
-        else {
-            setSelected(selected.map(({ value }) => value));
-        }
-        // remove deselected values from form state
-        if (selected === null || Object.keys(activeFields).length > selected.length) {
-            Object.keys(activeFields).forEach((path) => {
-                if (selected === null || !selected.find((field) => {
-                    return field.value.path === path;
-                })) {
-                    dispatchFields({
-                        type: 'REMOVE',
-                        path,
-                    });
-                }
-            });
-        }
-    };
-    return (react_1.default.createElement("div", { className: baseClass },
-        react_1.default.createElement(Label_1.default, { label: t('fields:selectFieldsToEdit') }),
-        react_1.default.createElement(ReactSelect_1.default, { options: options, isMulti: true, onChange: handleChange })));
-};
-exports.FieldSelect = FieldSelect;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSelect = void 0;
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const types_1 = require("../../../../fields/config/types");
+const ReactSelect_1 = __importDefault(require("../ReactSelect"));
+const getTranslation_1 = require("../../../../utilities/getTranslation");
+const Label_1 = __importDefault(require("../../forms/Label"));
+const context_1 = require("../../forms/Form/context");
+const createNestedFieldPath_1 = require("../../forms/Form/createNestedFieldPath");
+require("./index.scss");
+const baseClass = 'field-select';
+const combineLabel = (prefix, field, i18n) => (`${prefix === '' ? '' : `${prefix} > `}${(0, getTranslation_1.getTranslation)(field.label || field.name, i18n) || ''}`);
+const reduceFields = (fields, i18n, path = '', labelPrefix = '') => (fields.reduce((fieldsToUse, field) => {
+    var _a, _b, _c;
+    // escape for a variety of reasons
+    if ((0, types_1.fieldAffectsData)(field) && (((_a = field.admin) === null || _a === void 0 ? void 0 : _a.disableBulkEdit) || field.unique || field.hidden || ((_b = field.admin) === null || _b === void 0 ? void 0 : _b.hidden) || ((_c = field.admin) === null || _c === void 0 ? void 0 : _c.readOnly))) {
+        return fieldsToUse;
+    }
+    if (!(field.type === 'array' || field.type === 'blocks') && (0, types_1.fieldHasSubFields)(field)) {
+        return [
+            ...fieldsToUse,
+            ...reduceFields(field.fields, i18n, (0, createNestedFieldPath_1.createNestedFieldPath)(path, field), combineLabel(labelPrefix, field, i18n)),
+        ];
+    }
+    if (field.type === 'tabs') {
+        return [
+            ...fieldsToUse,
+            ...field.tabs.reduce((tabFields, tab) => {
+                return [
+                    ...tabFields,
+                    ...(reduceFields(tab.fields, i18n, (0, types_1.tabHasName)(tab) ? (0, createNestedFieldPath_1.createNestedFieldPath)(path, field) : path, combineLabel(labelPrefix, field, i18n))),
+                ];
+            }, []),
+        ];
+    }
+    const formattedField = {
+        label: combineLabel(labelPrefix, field, i18n),
+        value: {
+            ...field,
+            path: (0, createNestedFieldPath_1.createNestedFieldPath)(path, field),
+        },
+    };
+    return [
+        ...fieldsToUse,
+        formattedField,
+    ];
+}, []));
+const FieldSelect = ({ fields, setSelected, }) => {
+    const { t, i18n } = (0, react_i18next_1.useTranslation)('general');
+    const [options] = (0, react_1.useState)(() => reduceFields(fields, i18n));
+    const { getFields, dispatchFields } = (0, context_1.useForm)();
+    const handleChange = (selected) => {
+        const activeFields = getFields();
+        if (selected === null) {
+            setSelected([]);
+        }
+        else {
+            setSelected(selected.map(({ value }) => value));
+        }
+        // remove deselected values from form state
+        if (selected === null || Object.keys(activeFields).length > selected.length) {
+            Object.keys(activeFields).forEach((path) => {
+                if (selected === null || !selected.find((field) => {
+                    return field.value.path === path;
+                })) {
+                    dispatchFields({
+                        type: 'REMOVE',
+                        path,
+                    });
+                }
+            });
+        }
+    };
+    return (react_1.default.createElement("div", { className: baseClass },
+        react_1.default.createElement(Label_1.default, { label: t('fields:selectFieldsToEdit') }),
+        react_1.default.createElement(ReactSelect_1.default, { options: options, isMulti: true, onChange: handleChange })));
+};
+exports.FieldSelect = FieldSelect;
 //# sourceMappingURL=index.js.map

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,32 +1,32 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Config_1 = require("../../../utilities/Config");
-const CopyToClipboard_1 = __importDefault(require("../../CopyToClipboard"));
-const formatFilesize_1 = __importDefault(require("../../../../../uploads/formatFilesize"));
-require("./index.scss");
-const baseClass = 'file-meta';
-const Meta = (props) => {
-    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
-    const { serverURL } = (0, Config_1.useConfig)();
-    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
-    return (react_1.default.createElement("div", { className: baseClass },
-        react_1.default.createElement("div", { className: `${baseClass}__url` },
-            react_1.default.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
-            react_1.default.createElement(CopyToClipboard_1.default, { value: fileURL, defaultMessage: "Copy URL" })),
-        react_1.default.createElement("div", { className: `${baseClass}__size-type` },
-            (0, formatFilesize_1.default)(filesize),
-            (width && height) && (react_1.default.createElement(react_1.default.Fragment, null,
-                "\u00A0-\u00A0",
-                width,
-                "x",
-                height)),
-            mimeType && (react_1.default.createElement(react_1.default.Fragment, null,
-                "\u00A0-\u00A0",
-                mimeType)))));
-};
-exports.default = Meta;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Config_1 = require("../../../utilities/Config");
+const CopyToClipboard_1 = __importDefault(require("../../CopyToClipboard"));
+const formatFilesize_1 = __importDefault(require("../../../../../uploads/formatFilesize"));
+require("./index.scss");
+const baseClass = 'file-meta';
+const Meta = (props) => {
+    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
+    const { serverURL } = (0, Config_1.useConfig)();
+    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
+    return (react_1.default.createElement("div", { className: baseClass },
+        react_1.default.createElement("div", { className: `${baseClass}__url` },
+            react_1.default.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
+            react_1.default.createElement(CopyToClipboard_1.default, { value: fileURL, defaultMessage: "Copy URL" })),
+        react_1.default.createElement("div", { className: `${baseClass}__size-type` },
+            (0, formatFilesize_1.default)(filesize),
+            (width && height) && (react_1.default.createElement(react_1.default.Fragment, null,
+                "\u00A0-\u00A0",
+                width,
+                "x",
+                height)),
+            mimeType && (react_1.default.createElement(react_1.default.Fragment, null,
+                "\u00A0-\u00A0",
+                mimeType)))));
+};
+exports.default = Meta;
 //# sourceMappingURL=index.js.map

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

@@ -1,10 +1,10 @@
-export type Props = {
-    filename: string;
-    mimeType: string;
-    filesize: number;
-    staticURL: string;
-    width?: number;
-    height?: number;
-    sizes?: unknown;
-    url?: string;
-};
+export 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,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

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,86 +1,86 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_animate_height_1 = __importDefault(require("react-animate-height"));
-const react_i18next_1 = require("react-i18next");
-const Thumbnail_1 = __importDefault(require("../Thumbnail"));
-const Button_1 = __importDefault(require("../Button"));
-const Meta_1 = __importDefault(require("./Meta"));
-const Chevron_1 = __importDefault(require("../../icons/Chevron"));
-require("./index.scss");
-const baseClass = 'file-details';
-// sort to the same as imageSizes
-const sortSizes = (sizes, imageSizes) => {
-    if (!imageSizes || imageSizes.length === 0)
-        return sizes;
-    const orderedSizes = {};
-    imageSizes.forEach(({ name }) => {
-        if (sizes[name]) {
-            orderedSizes[name] = sizes[name];
-        }
-    });
-    return orderedSizes;
-};
-const FileDetails = (props) => {
-    var _a;
-    const { doc, collection, handleRemove, } = props;
-    const { upload: { staticURL, imageSizes, }, } = collection;
-    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
-    const [orderedSizes, setOrderedSizes] = (0, react_1.useState)(() => sortSizes(sizes, imageSizes));
-    (0, react_1.useEffect)(() => {
-        setOrderedSizes(sortSizes(sizes, imageSizes));
-    }, [sizes, imageSizes]);
-    const [moreInfoOpen, setMoreInfoOpen] = (0, react_1.useState)(false);
-    const { t } = (0, react_i18next_1.useTranslation)('upload');
-    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    return (react_1.default.createElement("div", { className: baseClass },
-        react_1.default.createElement("header", null,
-            react_1.default.createElement(Thumbnail_1.default, { doc: doc, collection: collection }),
-            react_1.default.createElement("div", { className: `${baseClass}__main-detail` },
-                react_1.default.createElement(Meta_1.default, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
-                hasSizes && (react_1.default.createElement(Button_1.default, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
-                    !moreInfoOpen && (react_1.default.createElement(react_1.default.Fragment, null,
-                        t('moreInfo'),
-                        react_1.default.createElement(Chevron_1.default, null))),
-                    moreInfoOpen && (react_1.default.createElement(react_1.default.Fragment, null,
-                        t('lessInfo'),
-                        react_1.default.createElement(Chevron_1.default, null)))))),
-            handleRemove && (react_1.default.createElement(Button_1.default, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
-        hasSizes && (react_1.default.createElement(react_animate_height_1.default, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
-            react_1.default.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(orderedSizes).map(([key, val]) => {
-                if (val === null || val === void 0 ? void 0 : val.filename) {
-                    return (react_1.default.createElement("li", { key: key },
-                        react_1.default.createElement("div", { className: `${baseClass}__size-label` }, key),
-                        react_1.default.createElement(Meta_1.default, { ...val, mimeType: val.mimeType, staticURL: staticURL })));
-                }
-                return null;
-            }))))));
-};
-exports.default = FileDetails;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_animate_height_1 = __importDefault(require("react-animate-height"));
+const react_i18next_1 = require("react-i18next");
+const Thumbnail_1 = __importDefault(require("../Thumbnail"));
+const Button_1 = __importDefault(require("../Button"));
+const Meta_1 = __importDefault(require("./Meta"));
+const Chevron_1 = __importDefault(require("../../icons/Chevron"));
+require("./index.scss");
+const baseClass = 'file-details';
+// sort to the same as imageSizes
+const sortSizes = (sizes, imageSizes) => {
+    if (!imageSizes || imageSizes.length === 0)
+        return sizes;
+    const orderedSizes = {};
+    imageSizes.forEach(({ name }) => {
+        if (sizes[name]) {
+            orderedSizes[name] = sizes[name];
+        }
+    });
+    return orderedSizes;
+};
+const FileDetails = (props) => {
+    var _a;
+    const { doc, collection, handleRemove, } = props;
+    const { upload: { staticURL, imageSizes, }, } = collection;
+    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
+    const [orderedSizes, setOrderedSizes] = (0, react_1.useState)(() => sortSizes(sizes, imageSizes));
+    (0, react_1.useEffect)(() => {
+        setOrderedSizes(sortSizes(sizes, imageSizes));
+    }, [sizes, imageSizes]);
+    const [moreInfoOpen, setMoreInfoOpen] = (0, react_1.useState)(false);
+    const { t } = (0, react_i18next_1.useTranslation)('upload');
+    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return (react_1.default.createElement("div", { className: baseClass },
+        react_1.default.createElement("header", null,
+            react_1.default.createElement(Thumbnail_1.default, { doc: doc, collection: collection }),
+            react_1.default.createElement("div", { className: `${baseClass}__main-detail` },
+                react_1.default.createElement(Meta_1.default, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
+                hasSizes && (react_1.default.createElement(Button_1.default, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
+                    !moreInfoOpen && (react_1.default.createElement(react_1.default.Fragment, null,
+                        t('moreInfo'),
+                        react_1.default.createElement(Chevron_1.default, null))),
+                    moreInfoOpen && (react_1.default.createElement(react_1.default.Fragment, null,
+                        t('lessInfo'),
+                        react_1.default.createElement(Chevron_1.default, null)))))),
+            handleRemove && (react_1.default.createElement(Button_1.default, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
+        hasSizes && (react_1.default.createElement(react_animate_height_1.default, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
+            react_1.default.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(orderedSizes).map(([key, val]) => {
+                if (val === null || val === void 0 ? void 0 : val.filename) {
+                    return (react_1.default.createElement("li", { key: key },
+                        react_1.default.createElement("div", { className: `${baseClass}__size-label` }, key),
+                        react_1.default.createElement(Meta_1.default, { ...val, mimeType: val.mimeType, staticURL: staticURL })));
+                }
+                return null;
+            }))))));
+};
+exports.default = FileDetails;
 //# sourceMappingURL=index.js.map

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

@@ -1,10 +1,10 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-import { FileSizes } from '../../../../uploads/types';
-import { Data } from '../../forms/Form/types';
-export type Props = {
-    collection: SanitizedCollectionConfig;
-    doc: Data & {
-        sizes?: FileSizes;
-    };
-    handleRemove?: () => void;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { FileSizes } from '../../../../uploads/types';
+import { Data } from '../../forms/Form/types';
+export type Props = {
+    collection: SanitizedCollectionConfig;
+    doc: Data & {
+        sizes?: FileSizes;
+    };
+    handleRemove?: () => void;
+};