payload 1.3.4 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "1.3.4",
+  "version": "1.4.1",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "engines": {
@@ -121,7 +121,7 @@
     "find-up": "4.1.0",
     "flatley": "^5.2.0",
     "fs-extra": "^10.0.0",
-    "graphql": "15.4.0",
+    "graphql": "^16.6.0",
     "graphql-playground-middleware-express": "^1.7.14",
     "graphql-query-complexity": "^0.7.0",
     "graphql-scalars": "^1.4.0",
@@ -146,6 +146,7 @@
     "minimist": "^1.2.0",
     "mkdirp": "^1.0.4",
     "mongoose": "6.5.0",
+    "mongoose-aggregate-paginate-v2": "^1.0.6",
     "mongoose-paginate-v2": "^1.6.1",
     "nodemailer": "^6.4.2",
     "object-to-formdata": "^4.1.0",
@@ -234,6 +235,7 @@
     "@types/mini-css-extract-plugin": "^1.2.1",
     "@types/minimist": "^1.2.1",
     "@types/mkdirp": "^1.0.1",
+    "@types/mongoose-aggregate-paginate-v2": "^1.0.5",
     "@types/mongoose-paginate-v2": "^1.3.8",
     "@types/node-fetch": "^2.5.7",
     "@types/nodemailer": "^6.4.0",

package/dist/admin/components/forms/field-types/RichText/elements/link/Button.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const LinkButton: ({ fieldProps }: {
-    fieldProps: any;
-}) => JSX.Element;

package/dist/admin/components/forms/field-types/RichText/elements/link/Button.js

@@ -1,107 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { ReactEditor, useSlate } from 'slate-react';
-import { Transforms, Editor, Range } from 'slate';
-import { useModal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-import ElementButton from '../Button';
-import { unwrapLink } from './utilities';
-import LinkIcon from '../../../../../icons/Link';
-import { EditModal } from './Modal';
-import { modalSlug as baseModalSlug } from './shared';
-import isElementActive from '../isActive';
-import buildStateFromSchema from '../../../../Form/buildStateFromSchema';
-import { useAuth } from '../../../../../utilities/Auth';
-import { useLocale } from '../../../../../utilities/Locale';
-import { useConfig } from '../../../../../utilities/Config';
-import { getBaseFields } from './Modal/baseFields';
-import reduceFieldsToValues from '../../../../Form/reduceFieldsToValues';
-export const LinkButton = ({ fieldProps }) => {
-    var _a, _b;
-    const customFieldSchema = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.fields;
-    const modalSlug = `${baseModalSlug}-${fieldProps.path}`;
-    const { t } = useTranslation();
-    const config = useConfig();
-    const editor = useSlate();
-    const { user } = useAuth();
-    const locale = useLocale();
-    const { toggleModal } = useModal();
-    const [renderModal, setRenderModal] = useState(false);
-    const [initialState, setInitialState] = useState({});
-    const [fieldSchema] = useState(() => {
-        const fields = [
-            ...getBaseFields(config),
-        ];
-        if (customFieldSchema) {
-            fields.push({
-                name: 'fields',
-                type: 'group',
-                admin: {
-                    style: {
-                        margin: 0,
-                        padding: 0,
-                        borderTop: 0,
-                        borderBottom: 0,
-                    },
-                },
-                fields: customFieldSchema,
-            });
-        }
-        return fields;
-    });
-    return (React.createElement(Fragment, null,
-        React.createElement(ElementButton, { format: "link", onClick: async () => {
-                if (isElementActive(editor, 'link')) {
-                    unwrapLink(editor);
-                }
-                else {
-                    toggleModal(modalSlug);
-                    setRenderModal(true);
-                    const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
-                    if (!isCollapsed) {
-                        const data = {
-                            text: editor.selection ? Editor.string(editor, editor.selection) : '',
-                        };
-                        const state = await buildStateFromSchema({ fieldSchema, data, user, operation: 'create', locale, t });
-                        setInitialState(state);
-                    }
-                }
-            } },
-            React.createElement(LinkIcon, null)),
-        renderModal && (React.createElement(EditModal, { modalSlug: modalSlug, fieldSchema: fieldSchema, initialState: initialState, close: () => {
-                toggleModal(modalSlug);
-                setRenderModal(false);
-            }, handleModalSubmit: (fields) => {
-                const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
-                const data = reduceFieldsToValues(fields, true);
-                const newLink = {
-                    type: 'link',
-                    linkType: data.linkType,
-                    url: data.url,
-                    doc: data.doc,
-                    newTab: data.newTab,
-                    fields: data.fields,
-                    children: [],
-                };
-                if (isCollapsed || !editor.selection) {
-                    // If selection anchor and focus are the same,
-                    // Just inject a new node with children already set
-                    Transforms.insertNodes(editor, {
-                        ...newLink,
-                        children: [{ text: String(data.text) }],
-                    });
-                }
-                else if (editor.selection) {
-                    // Otherwise we need to wrap the selected node in a link,
-                    // Delete its old text,
-                    // Move the selection one position forward into the link,
-                    // And insert the text back into the new link
-                    Transforms.wrapNodes(editor, newLink, { split: true });
-                    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' });
-                    Transforms.move(editor, { distance: 1, unit: 'offset' });
-                    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
-                }
-                toggleModal(modalSlug);
-                setRenderModal(false);
-                ReactEditor.focus(editor);
-            } }))));
-};

package/dist/admin/components/forms/field-types/RichText/elements/link/Element.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import './index.scss';
-export declare const LinkElement: ({ attributes, children, element, editorRef, fieldProps }: {
-    attributes: any;
-    children: any;
-    element: any;
-    editorRef: any;
-    fieldProps: any;
-}) => JSX.Element;

package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/index.scss

@@ -1,29 +0,0 @@
-@import '../../../../../../../scss/styles.scss';
-
-.rich-text-link-edit-modal {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  &__template {
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    width: 100%;
-    margin-bottom: $baseline;
-    display: flex;
-    justify-content: space-between;
-
-    h3 {
-      margin: 0;
-    }
-
-    svg {
-      width: base(1.5);
-      height: base(1.5);
-    }
-  }
-}

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Element } from 'slate';
-import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
-import { Field } from '../../../../../../../../../fields/config/types';
-import './index.scss';
-type Props = {
-    slug: string;
-    closeModal: () => void;
-    relatedCollectionConfig: SanitizedCollectionConfig;
-    fieldSchema: Field[];
-    element: Element & {
-        fields: Field[];
-    };
-};
-export declare const EditModal: React.FC<Props>;
-export {};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.js

@@ -1,48 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Transforms } from 'slate';
-import { ReactEditor, useSlateStatic } from 'slate-react';
-import { Modal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from '../../../../../../../utilities/Auth';
-import buildStateFromSchema from '../../../../../../Form/buildStateFromSchema';
-import MinimalTemplate from '../../../../../../../templates/Minimal';
-import Button from '../../../../../../../elements/Button';
-import RenderFields from '../../../../../../RenderFields';
-import fieldTypes from '../../../../..';
-import Form from '../../../../../../Form';
-import Submit from '../../../../../../Submit';
-import { useLocale } from '../../../../../../../utilities/Locale';
-import { getTranslation } from '../../../../../../../../../utilities/getTranslation';
-import './index.scss';
-const baseClass = 'edit-upload-modal';
-export const EditModal = ({ slug, closeModal, relatedCollectionConfig, fieldSchema, element }) => {
-    const editor = useSlateStatic();
-    const [initialState, setInitialState] = useState({});
-    const { user } = useAuth();
-    const locale = useLocale();
-    const { t, i18n } = useTranslation('fields');
-    const handleUpdateEditData = useCallback((_, data) => {
-        const newNode = {
-            fields: data,
-        };
-        const elementPath = ReactEditor.findPath(editor, element);
-        Transforms.setNodes(editor, newNode, { at: elementPath });
-        closeModal();
-    }, [closeModal, editor, element]);
-    useEffect(() => {
-        const awaitInitialState = async () => {
-            const state = await buildStateFromSchema({ fieldSchema, data: { ...(element === null || element === void 0 ? void 0 : element.fields) || {} }, user, operation: 'update', locale, t });
-            setInitialState(state);
-        };
-        awaitInitialState();
-    }, [fieldSchema, element.fields, user, locale, t]);
-    return (React.createElement(Modal, { slug: slug, className: baseClass },
-        React.createElement(MinimalTemplate, { width: "wide" },
-            React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h1", null, t('editLabelData', { label: getTranslation(relatedCollectionConfig.labels.singular, i18n) })),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", onClick: closeModal })),
-            React.createElement("div", null,
-                React.createElement(Form, { onSubmit: handleUpdateEditData, initialState: initialState },
-                    React.createElement(RenderFields, { readOnly: false, fieldTypes: fieldTypes, fieldSchema: fieldSchema }),
-                    React.createElement(Submit, null, t('saveChanges')))))));
-};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.scss

@@ -1,31 +0,0 @@
-@import '../../../../../../../../scss/styles.scss';
-
-.edit-upload-modal {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-
-  .template-minimal {
-    padding-top: base(4);
-    align-items: flex-start;
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    margin-bottom: $baseline;
-    display: flex;
-
-    h1 {
-      margin: 0 auto 0 0;
-    }
-
-    .btn {
-      margin: 0 0 0 $baseline;
-    }
-  }
-
-  .rich-text__toolbar {
-    top: base(1);
-  }
-}

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/SwapUploadModal/index.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Element } from 'slate';
-import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
-import '../../addSwapModals.scss';
-type Props = {
-    slug: string;
-    element: Element;
-    closeModal: () => void;
-    setRelatedCollectionConfig: (collectionConfig: SanitizedCollectionConfig) => void;
-    relatedCollectionConfig: SanitizedCollectionConfig;
-};
-export declare const SwapUploadModal: React.FC<Props>;
-export {};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/SwapUploadModal/index.js

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { Modal } from '@faceless-ui/modal';
-import { Transforms } from 'slate';
-import { ReactEditor, useSlateStatic } from 'slate-react';
-import { useTranslation } from 'react-i18next';
-import { useConfig } from '../../../../../../../utilities/Config';
-import usePayloadAPI from '../../../../../../../../hooks/usePayloadAPI';
-import MinimalTemplate from '../../../../../../../templates/Minimal';
-import Button from '../../../../../../../elements/Button';
-import Label from '../../../../../../Label';
-import ReactSelect from '../../../../../../../elements/ReactSelect';
-import ListControls from '../../../../../../../elements/ListControls';
-import UploadGallery from '../../../../../../../elements/UploadGallery';
-import Paginator from '../../../../../../../elements/Paginator';
-import PerPage from '../../../../../../../elements/PerPage';
-import formatFields from '../../../../../../../views/collections/List/formatFields';
-import { getTranslation } from '../../../../../../../../../utilities/getTranslation';
-import '../../addSwapModals.scss';
-const baseClass = 'rich-text-upload-modal';
-export const SwapUploadModal = ({ closeModal, element, setRelatedCollectionConfig, relatedCollectionConfig, slug }) => {
-    var _a, _b;
-    const { collections, serverURL, routes: { api } } = useConfig();
-    const editor = useSlateStatic();
-    const { t, i18n } = useTranslation('upload');
-    const [modalCollection, setModalCollection] = React.useState(relatedCollectionConfig);
-    const [modalCollectionOption, setModalCollectionOption] = React.useState({ label: getTranslation(relatedCollectionConfig.labels.singular, i18n), value: relatedCollectionConfig.slug });
-    const [availableCollections] = React.useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
-    const [fields, setFields] = React.useState(() => formatFields(modalCollection, t));
-    const [limit, setLimit] = React.useState();
-    const [sort, setSort] = React.useState(null);
-    const [where, setWhere] = React.useState(null);
-    const [page, setPage] = React.useState(null);
-    const moreThanOneAvailableCollection = availableCollections.length > 1;
-    const apiURL = `${serverURL}${api}/${modalCollection.slug}`;
-    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
-    const handleUpdateUpload = React.useCallback((doc) => {
-        const newNode = {
-            type: 'upload',
-            value: { id: doc.id },
-            relationTo: modalCollection.slug,
-            children: [
-                { text: ' ' },
-            ],
-        };
-        const elementPath = ReactEditor.findPath(editor, element);
-        Transforms.setNodes(editor, newNode, { at: elementPath });
-        closeModal();
-    }, [closeModal, editor, element, modalCollection]);
-    React.useEffect(() => {
-        const params = {};
-        if (page)
-            params.page = page;
-        if (where)
-            params.where = where;
-        if (sort)
-            params.sort = sort;
-        if (limit)
-            params.limit = limit;
-        setParams(params);
-    }, [setParams, page, sort, where, limit]);
-    React.useEffect(() => {
-        setFields(formatFields(modalCollection, t));
-        setLimit(modalCollection.admin.pagination.defaultLimit);
-    }, [modalCollection, t]);
-    React.useEffect(() => {
-        setModalCollection(collections.find(({ slug: collectionSlug }) => modalCollectionOption.value === collectionSlug));
-    }, [modalCollectionOption, collections]);
-    return (React.createElement(Modal, { className: baseClass, slug: slug },
-        React.createElement(MinimalTemplate, { width: "wide" },
-            React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h1", null, t('chooseLabel', { label: getTranslation(modalCollection.labels.singular, i18n) })),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: closeModal })),
-            moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseClass}__select-collection-wrap` },
-                React.createElement(Label, { label: t('selectCollectionToBrowse') }),
-                React.createElement(ReactSelect, { className: `${baseClass}__select-collection`, value: modalCollectionOption, onChange: setModalCollectionOption, options: availableCollections.map((coll) => ({ label: getTranslation(coll.labels.singular, i18n), value: coll.slug })) }))),
-            React.createElement(ListControls, { collection: {
-                    ...modalCollection,
-                    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: modalCollection, onCardClick: (doc) => {
-                    handleUpdateUpload(doc);
-                    setRelatedCollectionConfig(modalCollection);
-                    closeModal();
-                } }),
-            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(React.Fragment, null,
-                    React.createElement("div", { className: `${baseClass}__page-info` },
-                        data.page,
-                        "-",
-                        data.totalPages > 1 ? data.limit : data.totalDocs,
-                        ' ',
-                        t('general:of'),
-                        ' ',
-                        data.totalDocs),
-                    React.createElement(PerPage, { limits: (_b = (_a = modalCollection === null || modalCollection === void 0 ? void 0 : modalCollection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit, modifySearchParams: false, handleChange: setLimit })))))));
-};

package/dist/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss

@@ -1,57 +0,0 @@
-@import '../../../../../../scss/styles.scss';
-
-.rich-text-upload-modal {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-
-  .template-minimal {
-    padding-top: base(4);
-    align-items: flex-start;
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    margin-bottom: $baseline;
-    display: flex;
-
-    h1 {
-      margin: 0 auto 0 0;
-    }
-
-    .btn {
-      margin: 0 0 0 $baseline;
-    }
-  }
-
-  &__select-collection-wrap {
-    margin-bottom: base(1);
-  }
-
-  &__page-info {
-    margin-right: base(1);
-    margin-left: auto;
-  }
-
-  &__page-controls {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  @include mid-break {
-    .paginator {
-      width: 100%;
-      margin-bottom: $baseline;
-    }
-
-    &__page-controls {
-      flex-wrap: wrap;
-    }
-
-    &__page-info {
-      margin-left: 0;
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-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,44 +0,0 @@
-import React, { useCallback } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-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 ViewDescription from '../../../../elements/ViewDescription';
-import { getTranslation } from '../../../../../../utilities/getTranslation';
-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 { toggleModal } = useModal();
-    const { t, i18n } = useTranslation('fields');
-    const onSuccess = useCallback((json) => {
-        toggleModal(slug);
-        setValue(json.doc);
-    }, [toggleModal, slug, 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, t('newLabel', { label: getTranslation(collection.labels.singular, i18n) })),
-                        React.createElement(FormSubmit, null, t('general:save')),
-                        React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => toggleModal(slug) })),
-                    description && (React.createElement("div", { className: `${baseClass}__sub-header` },
-                        React.createElement(ViewDescription, { description: description })))),
-                React.createElement(Upload, { collection: collection }),
-                React.createElement(RenderFields, { permissions: collectionPermissions, readOnly: false, fieldTypes: fieldTypes, fieldSchema: collection.fields })))));
-};
-export default AddUploadModal;

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

@@ -1,34 +0,0 @@
-@import '../../../../../scss/styles.scss';
-
-.add-upload-modal {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-
-  .template-minimal {
-    padding-top: base(6);
-    align-items: flex-start;
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    margin-bottom: $baseline;
-
-    div {
-      display: flex;
-    }
-
-    h1 {
-      margin: 0 auto 0 0;
-    }
-
-    .btn {
-      margin: 0 0 0 $baseline;
-    }
-  }
-
-  &__sub-header {
-    margin-top: base(.25);
-  }
-}

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

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

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

@@ -1,5 +0,0 @@
-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 +0,0 @@
-import React, { Fragment, useState, useEffect } from 'react';
-import equal from 'deep-equal';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-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 { useForm } from '../../../Form/context';
-import ViewDescription from '../../../../elements/ViewDescription';
-import { getTranslation } from '../../../../../../utilities/getTranslation';
-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 } = useForm();
-    const { toggleModal, isModalOpen } = useModal();
-    const { t, i18n } = useTranslation('fields');
-    const [fields] = useState(() => formatFields(collection, t));
-    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 = isModalOpen(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, t('selectExistingLabel', { label: getTranslation(collection.labels.singular, i18n) })),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => toggleModal(modalSlug) })),
-            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);
-                toggleModal(modalSlug);
-            } }),
-        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,
-                    ' ',
-                    t('general: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;