payload 0.16.4 → 0.17.2

package/dist/admin/components/forms/field-types/Textarea/types.js

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

package/dist/admin/components/forms/field-types/UI/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { UIField } from '../../../../../fields/config/types';
-declare const _default: React.FC<UIField>;
-export default _default;
+import React from 'react';
+import { UIField } from '../../../../../fields/config/types';
+declare const _default: React.FC<UIField>;
+export default _default;

package/dist/admin/components/forms/field-types/UI/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import withCondition from '../../withCondition';
-const UI = (props) => {
-    const { admin: { components: { Field, }, }, } = props;
-    if (Field) {
-        return React.createElement(Field, { ...props });
-    }
-    return null;
-};
-export default withCondition(UI);
+import React from 'react';
+import withCondition from '../../withCondition';
+const UI = (props) => {
+    const { admin: { components: { Field, }, }, } = props;
+    if (Field) {
+        return React.createElement(Field, { ...props });
+    }
+    return null;
+};
+export default withCondition(UI);

package/dist/admin/components/forms/field-types/Upload/Add/index.d.ts

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

package/dist/admin/components/forms/field-types/Upload/Add/index.js

@@ -1,45 +1,46 @@
-import React, { useCallback } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useConfig, useAuth } from '@payloadcms/config-provider';
-import MinimalTemplate from '../../../../templates/Minimal';
-import Form from '../../../Form';
-import Button from '../../../../elements/Button';
-import RenderFields from '../../../RenderFields';
-import FormSubmit from '../../../Submit';
-import Upload from '../../../../views/collections/Edit/Upload';
-import { NegativeFieldGutterProvider } from '../../../FieldTypeGutter/context';
-import ViewDescription from '../../../../elements/ViewDescription';
-import './index.scss';
-const baseClass = 'add-upload-modal';
-const AddUploadModal = (props) => {
-    var _a, _b;
-    const { collection, collection: { admin: { description, } = {}, } = {}, slug, fieldTypes, setValue, } = props;
-    const { permissions } = useAuth();
-    const { serverURL, routes: { api } } = useConfig();
-    const { closeAll } = useModal();
-    const onSuccess = useCallback((json) => {
-        closeAll();
-        setValue(json.doc);
-    }, [closeAll, setValue]);
-    const classes = [
-        baseClass,
-    ].filter(Boolean).join(' ');
-    const collectionPermissions = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.fields;
-    return (React.createElement(Modal, { className: classes, slug: slug },
-        React.createElement(MinimalTemplate, { width: "wide" },
-            React.createElement(Form, { method: "post", action: `${serverURL}${api}/${collection.slug}`, onSuccess: onSuccess, disableSuccessStatus: true, validationOperation: "create" },
-                React.createElement("header", { className: `${baseClass}__header` },
-                    React.createElement("div", null,
-                        React.createElement("h1", null,
-                            "New",
-                            ' ',
-                            collection.labels.singular),
-                        React.createElement(FormSubmit, null, "Save"),
-                        React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeAll })),
-                    description && (React.createElement("div", { className: `${baseClass}__sub-header` },
-                        React.createElement(ViewDescription, { description: description })))),
-                React.createElement(Upload, { collection: collection }),
-                React.createElement(NegativeFieldGutterProvider, { allow: true },
-                    React.createElement(RenderFields, { permissions: collectionPermissions, readOnly: false, fieldTypes: fieldTypes, fieldSchema: collection.fields }))))));
-};
-export default AddUploadModal;
+import React, { useCallback } from 'react';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../../../utilities/Config';
+import { useAuth } from '../../../../utilities/Auth';
+import MinimalTemplate from '../../../../templates/Minimal';
+import Form from '../../../Form';
+import Button from '../../../../elements/Button';
+import RenderFields from '../../../RenderFields';
+import FormSubmit from '../../../Submit';
+import Upload from '../../../../views/collections/Edit/Upload';
+import { NegativeFieldGutterProvider } from '../../../FieldTypeGutter/context';
+import ViewDescription from '../../../../elements/ViewDescription';
+import './index.scss';
+const baseClass = 'add-upload-modal';
+const AddUploadModal = (props) => {
+    var _a, _b;
+    const { collection, collection: { admin: { description, } = {}, } = {}, slug, fieldTypes, setValue, } = props;
+    const { permissions } = useAuth();
+    const { serverURL, routes: { api } } = useConfig();
+    const { closeAll } = useModal();
+    const onSuccess = useCallback((json) => {
+        closeAll();
+        setValue(json.doc);
+    }, [closeAll, setValue]);
+    const classes = [
+        baseClass,
+    ].filter(Boolean).join(' ');
+    const collectionPermissions = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.fields;
+    return (React.createElement(Modal, { className: classes, slug: slug },
+        React.createElement(MinimalTemplate, { width: "wide" },
+            React.createElement(Form, { method: "post", action: `${serverURL}${api}/${collection.slug}`, onSuccess: onSuccess, disableSuccessStatus: true, validationOperation: "create" },
+                React.createElement("header", { className: `${baseClass}__header` },
+                    React.createElement("div", null,
+                        React.createElement("h1", null,
+                            "New",
+                            ' ',
+                            collection.labels.singular),
+                        React.createElement(FormSubmit, null, "Save"),
+                        React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeAll })),
+                    description && (React.createElement("div", { className: `${baseClass}__sub-header` },
+                        React.createElement(ViewDescription, { description: description })))),
+                React.createElement(Upload, { collection: collection }),
+                React.createElement(NegativeFieldGutterProvider, { allow: true },
+                    React.createElement(RenderFields, { permissions: collectionPermissions, readOnly: false, fieldTypes: fieldTypes, fieldSchema: collection.fields }))))));
+};
+export default AddUploadModal;

package/dist/admin/components/forms/field-types/Upload/Add/types.d.ts

@@ -1,10 +1,10 @@
-import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
-import { FieldTypes } from '../..';
-export declare type Props = {
-    setValue: (val: {
-        id: string;
-    } | null) => void;
-    collection: SanitizedCollectionConfig;
-    slug: string;
-    fieldTypes: FieldTypes;
-};
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+import { FieldTypes } from '../..';
+export declare type Props = {
+    setValue: (val: {
+        id: string;
+    } | null) => void;
+    collection: SanitizedCollectionConfig;
+    slug: string;
+    fieldTypes: FieldTypes;
+};

package/dist/admin/components/forms/field-types/Upload/Add/types.js

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

package/dist/admin/components/forms/field-types/Upload/Input.d.ts

@@ -1,27 +1,27 @@
-import React from 'react';
-import { FilterOptions, UploadField } from '../../../../../fields/config/types';
-import { Description } from '../../FieldDescription/types';
-import { FieldTypes } from '..';
-import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
-import './index.scss';
-export declare type UploadInputProps = Omit<UploadField, 'type'> & {
-    showError?: boolean;
-    errorMessage?: string;
-    readOnly?: boolean;
-    path: string;
-    required?: boolean;
-    value?: string;
-    description?: Description;
-    onChange?: (e: any) => void;
-    placeholder?: string;
-    style?: React.CSSProperties;
-    className?: string;
-    width?: string;
-    fieldTypes?: FieldTypes;
-    collection?: SanitizedCollectionConfig;
-    serverURL?: string;
-    api?: string;
-    filterOptions: FilterOptions;
-};
-declare const UploadInput: React.FC<UploadInputProps>;
-export default UploadInput;
+import React from 'react';
+import { FilterOptions, UploadField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import { FieldTypes } from '..';
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import './index.scss';
+export declare type UploadInputProps = Omit<UploadField, 'type'> & {
+    showError?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: any) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string;
+    fieldTypes?: FieldTypes;
+    collection?: SanitizedCollectionConfig;
+    serverURL?: string;
+    api?: string;
+    filterOptions: FilterOptions;
+};
+declare const UploadInput: React.FC<UploadInputProps>;
+export default UploadInput;

package/dist/admin/components/forms/field-types/Upload/Input.js

@@ -1,86 +1,86 @@
-import React, { useEffect, useState } from 'react';
-import { useModal } from '@faceless-ui/modal';
-import Button from '../../../elements/Button';
-import Label from '../../Label';
-import Error from '../../Error';
-import FileDetails from '../../../elements/FileDetails';
-import FieldDescription from '../../FieldDescription';
-import AddModal from './Add';
-import SelectExistingModal from './SelectExisting';
-import './index.scss';
-const baseClass = 'upload';
-const UploadInput = (props) => {
-    const { path, required, readOnly, style, className, width, description, label, relationTo, fieldTypes, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, filterOptions, } = props;
-    const { toggle } = useModal();
-    const addModalSlug = `${path}-add`;
-    const selectExistingModalSlug = `${path}-select-existing`;
-    const [file, setFile] = useState(undefined);
-    const [missingFile, setMissingFile] = useState(false);
-    const classes = [
-        'field-type',
-        baseClass,
-        className,
-        showError && 'error',
-        readOnly && 'read-only',
-    ].filter(Boolean).join(' ');
-    useEffect(() => {
-        if (typeof value === 'string' && value !== '') {
-            const fetchFile = async () => {
-                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`);
-                if (response.ok) {
-                    const json = await response.json();
-                    setFile(json);
-                }
-                else {
-                    setMissingFile(true);
-                    setFile(undefined);
-                }
-            };
-            fetchFile();
-        }
-        else {
-            setFile(undefined);
-        }
-    }, [
-        value,
-        relationTo,
-        api,
-        serverURL,
-    ]);
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        (collection === null || collection === void 0 ? void 0 : collection.upload) && (React.createElement(React.Fragment, null,
-            (file && !missingFile) && (React.createElement(FileDetails, { collection: collection, doc: file, handleRemove: () => {
-                    onChange(null);
-                } })),
-            (!file || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggle(addModalSlug);
-                    } },
-                    "Upload new",
-                    ' ',
-                    collection.labels.singular),
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggle(selectExistingModalSlug);
-                    } }, "Choose from existing"))),
-            React.createElement(AddModal, { ...{
-                    collection,
-                    slug: addModalSlug,
-                    fieldTypes,
-                    setValue: onChange,
-                } }),
-            React.createElement(SelectExistingModal, { ...{
-                    collection,
-                    slug: selectExistingModalSlug,
-                    setValue: onChange,
-                    addModalSlug,
-                    filterOptions,
-                    path,
-                } }),
-            React.createElement(FieldDescription, { value: file, description: description })))));
-};
-export default UploadInput;
+import React, { useEffect, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import Button from '../../../elements/Button';
+import Label from '../../Label';
+import Error from '../../Error';
+import FileDetails from '../../../elements/FileDetails';
+import FieldDescription from '../../FieldDescription';
+import AddModal from './Add';
+import SelectExistingModal from './SelectExisting';
+import './index.scss';
+const baseClass = 'upload';
+const UploadInput = (props) => {
+    const { path, required, readOnly, style, className, width, description, label, relationTo, fieldTypes, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, filterOptions, } = props;
+    const { toggle } = useModal();
+    const addModalSlug = `${path}-add`;
+    const selectExistingModalSlug = `${path}-select-existing`;
+    const [file, setFile] = useState(undefined);
+    const [missingFile, setMissingFile] = useState(false);
+    const classes = [
+        'field-type',
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    useEffect(() => {
+        if (typeof value === 'string' && value !== '') {
+            const fetchFile = async () => {
+                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`);
+                if (response.ok) {
+                    const json = await response.json();
+                    setFile(json);
+                }
+                else {
+                    setMissingFile(true);
+                    setFile(undefined);
+                }
+            };
+            fetchFile();
+        }
+        else {
+            setFile(undefined);
+        }
+    }, [
+        value,
+        relationTo,
+        api,
+        serverURL,
+    ]);
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        (collection === null || collection === void 0 ? void 0 : collection.upload) && (React.createElement(React.Fragment, null,
+            (file && !missingFile) && (React.createElement(FileDetails, { collection: collection, doc: file, handleRemove: () => {
+                    onChange(null);
+                } })),
+            (!file || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
+                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
+                        toggle(addModalSlug);
+                    } },
+                    "Upload new",
+                    ' ',
+                    collection.labels.singular),
+                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
+                        toggle(selectExistingModalSlug);
+                    } }, "Choose from existing"))),
+            React.createElement(AddModal, { ...{
+                    collection,
+                    slug: addModalSlug,
+                    fieldTypes,
+                    setValue: onChange,
+                } }),
+            React.createElement(SelectExistingModal, { ...{
+                    collection,
+                    slug: selectExistingModalSlug,
+                    setValue: onChange,
+                    addModalSlug,
+                    filterOptions,
+                    path,
+                } }),
+            React.createElement(FieldDescription, { value: file, description: description })))));
+};
+export default UploadInput;

package/dist/admin/components/forms/field-types/Upload/SelectExisting/index.d.ts

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

package/dist/admin/components/forms/field-types/Upload/SelectExisting/index.js

@@ -1,98 +1,99 @@
-import React, { Fragment, useState, useEffect } from 'react';
-import equal from 'deep-equal';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useAuth, useConfig } from '@payloadcms/config-provider';
-import MinimalTemplate from '../../../../templates/Minimal';
-import Button from '../../../../elements/Button';
-import usePayloadAPI from '../../../../../hooks/usePayloadAPI';
-import ListControls from '../../../../elements/ListControls';
-import Paginator from '../../../../elements/Paginator';
-import UploadGallery from '../../../../elements/UploadGallery';
-import PerPage from '../../../../elements/PerPage';
-import formatFields from '../../../../views/collections/List/formatFields';
-import { getFilterOptionsQuery } from '../../getFilterOptionsQuery';
-import { useDocumentInfo } from '../../../../utilities/DocumentInfo';
-import { useWatchForm } from '../../../Form/context';
-import ViewDescription from '../../../../elements/ViewDescription';
-import './index.scss';
-const baseClass = 'select-existing-upload-modal';
-const SelectExistingUploadModal = (props) => {
-    var _a, _b;
-    const { setValue, collection, collection: { slug: collectionSlug, admin: { description, pagination: { defaultLimit, }, } = {}, } = {}, slug: modalSlug, path, filterOptions, } = props;
-    const { serverURL, routes: { api } } = useConfig();
-    const { id } = useDocumentInfo();
-    const { user } = useAuth();
-    const { getData, getSiblingData } = useWatchForm();
-    const { closeAll, currentModal } = useModal();
-    const [fields] = useState(() => formatFields(collection));
-    const [limit, setLimit] = useState(defaultLimit);
-    const [sort, setSort] = useState(null);
-    const [where, setWhere] = useState(null);
-    const [page, setPage] = useState(null);
-    const [optionFilters, setOptionFilters] = useState();
-    const classes = [
-        baseClass,
-    ].filter(Boolean).join(' ');
-    const isOpen = currentModal === modalSlug;
-    const apiURL = isOpen ? `${serverURL}${api}/${collectionSlug}` : null;
-    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
-    useEffect(() => {
-        const params = {};
-        if (page)
-            params.page = page;
-        if (where)
-            params.where = { and: [where, optionFilters] };
-        if (sort)
-            params.sort = sort;
-        if (limit)
-            params.limit = limit;
-        setParams(params);
-    }, [setParams, page, sort, where, limit, optionFilters]);
-    useEffect(() => {
-        if (!filterOptions || !isOpen) {
-            return;
-        }
-        const newOptionFilters = getFilterOptionsQuery(filterOptions, {
-            id,
-            relationTo: collectionSlug,
-            data: getData(),
-            siblingData: getSiblingData(path),
-            user,
-        })[collectionSlug];
-        if (!equal(newOptionFilters, optionFilters)) {
-            setOptionFilters(newOptionFilters);
-        }
-    }, [collectionSlug, filterOptions, optionFilters, id, getData, getSiblingData, path, user, isOpen]);
-    return (React.createElement(Modal, { className: classes, slug: modalSlug }, isOpen && (React.createElement(MinimalTemplate, { width: "wide" },
-        React.createElement("header", { className: `${baseClass}__header` },
-            React.createElement("div", null,
-                React.createElement("h1", null,
-                    ' ',
-                    "Select existing",
-                    ' ',
-                    collection.labels.singular),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeAll })),
-            description && (React.createElement("div", { className: `${baseClass}__sub-header` },
-                React.createElement(ViewDescription, { description: description })))),
-        React.createElement(ListControls, { collection: {
-                ...collection,
-                fields,
-            }, enableColumns: false, enableSort: true, modifySearchQuery: false, handleSortChange: setSort, handleWhereChange: setWhere }),
-        React.createElement(UploadGallery, { docs: data === null || data === void 0 ? void 0 : data.docs, collection: collection, onCardClick: (doc) => {
-                setValue(doc);
-                closeAll();
-            } }),
-        React.createElement("div", { className: `${baseClass}__page-controls` },
-            React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
-            (data === null || data === void 0 ? void 0 : data.totalDocs) > 0 && (React.createElement(Fragment, null,
-                React.createElement("div", { className: `${baseClass}__page-info` },
-                    data.page,
-                    "-",
-                    data.totalPages > 1 ? data.limit : data.totalDocs,
-                    ' ',
-                    "of",
-                    ' ',
-                    data.totalDocs),
-                React.createElement(PerPage, { limits: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit, modifySearchParams: false, handleChange: setLimit }))))))));
-};
-export default SelectExistingUploadModal;
+import React, { Fragment, useState, useEffect } from 'react';
+import equal from 'deep-equal';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../../../utilities/Config';
+import { useAuth } from '../../../../utilities/Auth';
+import MinimalTemplate from '../../../../templates/Minimal';
+import Button from '../../../../elements/Button';
+import usePayloadAPI from '../../../../../hooks/usePayloadAPI';
+import ListControls from '../../../../elements/ListControls';
+import Paginator from '../../../../elements/Paginator';
+import UploadGallery from '../../../../elements/UploadGallery';
+import PerPage from '../../../../elements/PerPage';
+import formatFields from '../../../../views/collections/List/formatFields';
+import { getFilterOptionsQuery } from '../../getFilterOptionsQuery';
+import { useDocumentInfo } from '../../../../utilities/DocumentInfo';
+import { useWatchForm } from '../../../Form/context';
+import ViewDescription from '../../../../elements/ViewDescription';
+import './index.scss';
+const baseClass = 'select-existing-upload-modal';
+const SelectExistingUploadModal = (props) => {
+    var _a, _b;
+    const { setValue, collection, collection: { slug: collectionSlug, admin: { description, pagination: { defaultLimit, }, } = {}, } = {}, slug: modalSlug, path, filterOptions, } = props;
+    const { serverURL, routes: { api } } = useConfig();
+    const { id } = useDocumentInfo();
+    const { user } = useAuth();
+    const { getData, getSiblingData } = useWatchForm();
+    const { closeAll, currentModal } = useModal();
+    const [fields] = useState(() => formatFields(collection));
+    const [limit, setLimit] = useState(defaultLimit);
+    const [sort, setSort] = useState(null);
+    const [where, setWhere] = useState(null);
+    const [page, setPage] = useState(null);
+    const [optionFilters, setOptionFilters] = useState();
+    const classes = [
+        baseClass,
+    ].filter(Boolean).join(' ');
+    const isOpen = currentModal === modalSlug;
+    const apiURL = isOpen ? `${serverURL}${api}/${collectionSlug}` : null;
+    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
+    useEffect(() => {
+        const params = {};
+        if (page)
+            params.page = page;
+        if (where)
+            params.where = { and: [where, optionFilters] };
+        if (sort)
+            params.sort = sort;
+        if (limit)
+            params.limit = limit;
+        setParams(params);
+    }, [setParams, page, sort, where, limit, optionFilters]);
+    useEffect(() => {
+        if (!filterOptions || !isOpen) {
+            return;
+        }
+        const newOptionFilters = getFilterOptionsQuery(filterOptions, {
+            id,
+            relationTo: collectionSlug,
+            data: getData(),
+            siblingData: getSiblingData(path),
+            user,
+        })[collectionSlug];
+        if (!equal(newOptionFilters, optionFilters)) {
+            setOptionFilters(newOptionFilters);
+        }
+    }, [collectionSlug, filterOptions, optionFilters, id, getData, getSiblingData, path, user, isOpen]);
+    return (React.createElement(Modal, { className: classes, slug: modalSlug }, isOpen && (React.createElement(MinimalTemplate, { width: "wide" },
+        React.createElement("header", { className: `${baseClass}__header` },
+            React.createElement("div", null,
+                React.createElement("h1", null,
+                    ' ',
+                    "Select existing",
+                    ' ',
+                    collection.labels.singular),
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeAll })),
+            description && (React.createElement("div", { className: `${baseClass}__sub-header` },
+                React.createElement(ViewDescription, { description: description })))),
+        React.createElement(ListControls, { collection: {
+                ...collection,
+                fields,
+            }, enableColumns: false, enableSort: true, modifySearchQuery: false, handleSortChange: setSort, handleWhereChange: setWhere }),
+        React.createElement(UploadGallery, { docs: data === null || data === void 0 ? void 0 : data.docs, collection: collection, onCardClick: (doc) => {
+                setValue(doc);
+                closeAll();
+            } }),
+        React.createElement("div", { className: `${baseClass}__page-controls` },
+            React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
+            (data === null || data === void 0 ? void 0 : data.totalDocs) > 0 && (React.createElement(Fragment, null,
+                React.createElement("div", { className: `${baseClass}__page-info` },
+                    data.page,
+                    "-",
+                    data.totalPages > 1 ? data.limit : data.totalDocs,
+                    ' ',
+                    "of",
+                    ' ',
+                    data.totalDocs),
+                React.createElement(PerPage, { limits: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit, modifySearchParams: false, handleChange: setLimit }))))))));
+};
+export default SelectExistingUploadModal;