payload 0.19.2 → 0.20.0

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

@@ -1,75 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { Transforms } from 'slate';
-import { ReactEditor, useSlate } from 'slate-react';
-import { useConfig } from '../../../../../../utilities/Config';
-import ElementButton from '../../Button';
-import RelationshipIcon from '../../../../../../icons/Relationship';
-import Form from '../../../../../Form';
-import MinimalTemplate from '../../../../../../templates/Minimal';
-import Button from '../../../../../../elements/Button';
-import Submit from '../../../../../Submit';
-import X from '../../../../../../icons/X';
-import Fields from './Fields';
-import { requests } from '../../../../../../../api';
-import { injectVoidElement } from '../../injectVoid';
-import './index.scss';
-const initialFormData = {};
-const baseClass = 'relationship-rich-text-button';
-const insertRelationship = (editor, { value, relationTo }) => {
-    const text = { text: ' ' };
-    const relationship = {
-        type: 'relationship',
-        value,
-        relationTo,
-        children: [
-            text,
-        ],
-    };
-    if (editor.blurSelection) {
-        Transforms.select(editor, editor.blurSelection);
-    }
-    injectVoidElement(editor, relationship);
-    ReactEditor.focus(editor);
-};
-const RelationshipButton = ({ path }) => {
-    const { open, closeAll } = useModal();
-    const editor = useSlate();
-    const { serverURL, routes: { api }, collections } = useConfig();
-    const [renderModal, setRenderModal] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [hasEnabledCollections] = useState(() => collections.find(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship));
-    const modalSlug = `${path}-add-relationship`;
-    const handleAddRelationship = useCallback(async (_, { relationTo, value }) => {
-        setLoading(true);
-        const res = await requests.get(`${serverURL}${api}/${relationTo}/${value}?depth=0`);
-        const json = await res.json();
-        insertRelationship(editor, { value: { id: json.id }, relationTo });
-        closeAll();
-        setRenderModal(false);
-        setLoading(false);
-    }, [editor, closeAll, api, serverURL]);
-    useEffect(() => {
-        if (renderModal) {
-            open(modalSlug);
-        }
-    }, [renderModal, open, modalSlug]);
-    if (!hasEnabledCollections)
-        return null;
-    return (React.createElement(Fragment, null,
-        React.createElement(ElementButton, { className: baseClass, format: "relationship", onClick: () => setRenderModal(true) },
-            React.createElement(RelationshipIcon, null)),
-        renderModal && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, null,
-                React.createElement("header", { className: `${baseClass}__header` },
-                    React.createElement("h3", null, "Add Relationship"),
-                    React.createElement(Button, { buttonStyle: "none", onClick: () => {
-                            closeAll();
-                            setRenderModal(false);
-                        } },
-                        React.createElement(X, null))),
-                React.createElement(Form, { onSubmit: handleAddRelationship, initialData: initialFormData, disabled: loading },
-                    React.createElement(Fields, null),
-                    React.createElement(Submit, null, "Add relationship")))))));
-};
-export default RelationshipButton;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss

@@ -1,33 +0,0 @@
-@import '../../../../../../../scss/styles.scss';
-
-.relationship-rich-text-button {
-  .btn {
-    margin-right: base(1);
-  }
-
-  &__modal {
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-    &.payload__modal-item--enterDone {
-      @include blur-bg;
-    }
-  }
-
-  &__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/relationship/Element/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import './index.scss';
-declare const Element: (props: any) => JSX.Element;
-export default Element;

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

@@ -1,33 +0,0 @@
-import React, { useState } from 'react';
-import { useFocused, useSelected } from 'slate-react';
-import { useConfig } from '../../../../../../utilities/Config';
-import RelationshipIcon from '../../../../../../icons/Relationship';
-import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
-import './index.scss';
-const baseClass = 'rich-text-relationship';
-const initialParams = {
-    depth: 0,
-};
-const Element = (props) => {
-    var _a;
-    const { attributes, children, element } = props;
-    const { relationTo, value } = element;
-    const { collections, serverURL, routes: { api } } = useConfig();
-    const [relatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
-    const selected = useSelected();
-    const focused = useFocused();
-    const [{ data }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
-    return (React.createElement("div", { className: [
-            baseClass,
-            (selected && focused) && `${baseClass}--selected`,
-        ].filter(Boolean).join(' '), contentEditable: false, ...attributes },
-        React.createElement(RelationshipIcon, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
-            React.createElement("div", { className: `${baseClass}__label` },
-                relatedCollection.labels.singular,
-                ' ',
-                "Relationship"),
-            React.createElement("h5", null, data[((_a = relatedCollection === null || relatedCollection === void 0 ? void 0 : relatedCollection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id'])),
-        children));
-};
-export default Element;

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

@@ -1,27 +0,0 @@
-@import '../../../../../../../scss/styles.scss';
-
-.rich-text-relationship {
-  padding: base(.5);
-  display: flex;
-  align-items: flex-start;
-  background: $color-background-gray;
-  max-width: base(15);
-  margin-bottom: base(.5);
-
-  svg {
-    width: base(1.25);
-    height: base(1.25);
-    margin-right: base(.5);
-  }
-
-  h5 {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &--selected {
-    box-shadow: $focus-box-shadow;
-    outline: none;
-  }
-}

package/dist/admin/components/forms/field-types/RichText/elements/relationship/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    Button: import("react").FC<{
-        path: string;
-    }>;
-    Element: (props: any) => JSX.Element;
-    plugins: ((incomingEditor: any) => any)[];
-};
-export default _default;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/index.js

@@ -1,10 +0,0 @@
-import plugin from './plugin';
-import Element from './Element';
-import Button from './Button';
-export default {
-    Button,
-    Element,
-    plugins: [
-        plugin,
-    ],
-};

package/dist/admin/components/forms/field-types/RichText/elements/relationship/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const withRelationship: (incomingEditor: any) => any;
-export default withRelationship;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/plugin.js

@@ -1,7 +0,0 @@
-const withRelationship = (incomingEditor) => {
-    const editor = incomingEditor;
-    const { isVoid } = editor;
-    editor.isVoid = (element) => (element.type === 'relationship' ? true : isVoid(element));
-    return editor;
-};
-export default withRelationship;

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

@@ -1,2 +0,0 @@
-declare const toggleElement: (editor: any, format: any) => void;
-export default toggleElement;

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

@@ -1,30 +0,0 @@
-import { Element, Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
-import isElementActive from './isActive';
-import listTypes from './listTypes';
-const toggleElement = (editor, format) => {
-    const isActive = isElementActive(editor, format);
-    const isList = listTypes.includes(format);
-    let type = format;
-    if (isActive) {
-        type = undefined;
-    }
-    else if (isList) {
-        type = 'li';
-    }
-    if (editor.blurSelection) {
-        Transforms.select(editor, editor.blurSelection);
-    }
-    Transforms.unwrapNodes(editor, {
-        match: (n) => Element.isElement(n) && listTypes.includes(n.type),
-        split: true,
-        mode: 'lowest',
-    });
-    Transforms.setNodes(editor, { type });
-    if (!isActive && isList) {
-        const block = { type: format, children: [] };
-        Transforms.wrapNodes(editor, block);
-    }
-    ReactEditor.focus(editor);
-};
-export default toggleElement;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare type ButtonProps = {
-    format: string;
-    onClick?: (e: React.MouseEvent) => void;
-    className?: string;
-    children?: React.ReactNode;
-};

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

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

package/dist/admin/components/forms/field-types/RichText/elements/ul/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const ul: {
-    Button: () => JSX.Element;
-    Element: ({ attributes, children }: {
-        attributes: any;
-        children: any;
-    }) => JSX.Element;
-};
-export default ul;

package/dist/admin/components/forms/field-types/RichText/elements/ul/index.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import ULIcon from '../../../../../icons/UnorderedList';
-import ListButton from '../ListButton';
-const UL = ({ attributes, children }) => (React.createElement("ul", { ...attributes }, children));
-const ul = {
-    Button: () => (React.createElement(ListButton, { format: "ul" },
-        React.createElement(ULIcon, null))),
-    Element: UL,
-};
-export default ul;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import './index.scss';
-import '../addSwapModals.scss';
-declare const UploadButton: React.FC<{
-    path: string;
-}>;
-export default UploadButton;

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

@@ -1,138 +0,0 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { Transforms } from 'slate';
-import { ReactEditor, useSlate } from 'slate-react';
-import { useConfig } from '../../../../../../utilities/Config';
-import ElementButton from '../../Button';
-import UploadIcon from '../../../../../../icons/Upload';
-import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
-import UploadGallery from '../../../../../../elements/UploadGallery';
-import ListControls from '../../../../../../elements/ListControls';
-import ReactSelect from '../../../../../../elements/ReactSelect';
-import Paginator from '../../../../../../elements/Paginator';
-import formatFields from '../../../../../../views/collections/List/formatFields';
-import Label from '../../../../../Label';
-import MinimalTemplate from '../../../../../../templates/Minimal';
-import Button from '../../../../../../elements/Button';
-import PerPage from '../../../../../../elements/PerPage';
-import { injectVoidElement } from '../../injectVoid';
-import './index.scss';
-import '../addSwapModals.scss';
-const baseClass = 'upload-rich-text-button';
-const baseModalClass = 'rich-text-upload-modal';
-const insertUpload = (editor, { value, relationTo }) => {
-    const text = { text: ' ' };
-    const upload = {
-        type: 'upload',
-        value,
-        relationTo,
-        children: [
-            text,
-        ],
-    };
-    if (editor.blurSelection) {
-        Transforms.select(editor, editor.blurSelection);
-    }
-    injectVoidElement(editor, upload);
-    ReactEditor.focus(editor);
-};
-const UploadButton = ({ path }) => {
-    var _a, _b;
-    const { open, closeAll, currentModal } = useModal();
-    const editor = useSlate();
-    const { serverURL, routes: { api }, collections } = useConfig();
-    const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
-    const [renderModal, setRenderModal] = useState(false);
-    const [modalCollectionOption, setModalCollectionOption] = useState(() => {
-        const firstAvailableCollection = collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship));
-        if (firstAvailableCollection) {
-            return { label: firstAvailableCollection.labels.singular, value: firstAvailableCollection.slug };
-        }
-        return undefined;
-    });
-    const [modalCollection, setModalCollection] = useState(() => collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
-    const [fields, setFields] = useState(() => (modalCollection ? formatFields(modalCollection) : undefined));
-    const [limit, setLimit] = useState();
-    const [sort, setSort] = useState(null);
-    const [where, setWhere] = useState(null);
-    const [page, setPage] = useState(null);
-    const modalSlug = `${path}-add-upload`;
-    const moreThanOneAvailableCollection = availableCollections.length > 1;
-    const isOpen = currentModal === modalSlug;
-    // If modal is open, get active page of upload gallery
-    const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;
-    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
-    useEffect(() => {
-        if (modalCollection) {
-            setFields(formatFields(modalCollection));
-        }
-    }, [modalCollection]);
-    useEffect(() => {
-        if (renderModal) {
-            open(modalSlug);
-        }
-    }, [renderModal, open, modalSlug]);
-    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]);
-    useEffect(() => {
-        if (modalCollectionOption) {
-            setModalCollection(collections.find(({ slug }) => modalCollectionOption.value === slug));
-        }
-    }, [modalCollectionOption, collections]);
-    if (!modalCollection) {
-        return null;
-    }
-    return (React.createElement(Fragment, null,
-        React.createElement(ElementButton, { className: baseClass, format: "upload", onClick: () => setRenderModal(true) },
-            React.createElement(UploadIcon, null)),
-        renderModal && (React.createElement(Modal, { className: baseModalClass, slug: modalSlug }, isOpen && (React.createElement(MinimalTemplate, { width: "wide" },
-            React.createElement("header", { className: `${baseModalClass}__header` },
-                React.createElement("h1", null,
-                    "Add",
-                    ' ',
-                    modalCollection.labels.singular),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
-                        closeAll();
-                        setRenderModal(false);
-                    } })),
-            moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseModalClass}__select-collection-wrap` },
-                React.createElement(Label, { label: "Select a Collection to Browse" }),
-                React.createElement(ReactSelect, { className: `${baseClass}__select-collection`, value: modalCollectionOption, onChange: setModalCollectionOption, options: availableCollections.map((coll) => ({ label: coll.labels.singular, 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) => {
-                    insertUpload(editor, {
-                        value: {
-                            id: doc.id,
-                        },
-                        relationTo: modalCollection.slug,
-                    });
-                    setRenderModal(false);
-                    closeAll();
-                } }),
-            React.createElement("div", { className: `${baseModalClass}__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: `${baseModalClass}__page-info` },
-                        data.page,
-                        "-",
-                        data.totalPages > 1 ? data.limit : data.totalDocs,
-                        ' ',
-                        "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 }))))))))));
-};
-export default UploadButton;

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

@@ -1,7 +0,0 @@
-@import '../../../../../../../scss/styles.scss';
-
-.upload-rich-text-button {
-  .btn {
-    margin-right: base(1);
-  }
-}

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';
-declare 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,51 +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 { 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 reduceFieldsToValues from '../../../../../../Form/reduceFieldsToValues';
-import Submit from '../../../../../../Submit';
-import './index.scss';
-import { useLocale } from '../../../../../../../utilities/Locale';
-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 handleUpdateEditData = useCallback((fields) => {
-        const newNode = {
-            fields: reduceFieldsToValues(fields, true),
-        };
-        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 });
-            setInitialState(state);
-        };
-        awaitInitialState();
-    }, [fieldSchema, element.fields, user, locale]);
-    return (React.createElement(Modal, { slug: slug, className: baseClass },
-        React.createElement(MinimalTemplate, { width: "normal" },
-            React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h1", null,
-                    "Edit",
-                    ' ',
-                    relatedCollectionConfig.labels.singular,
-                    ' ',
-                    "data"),
-                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, "Save changes"))))));
-};

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

@@ -1,41 +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;
-  }
-
-  &__header {
-    margin-bottom: $baseline;
-    display: flex;
-
-    h1 {
-      margin: 0 auto 0 0;
-    }
-
-    .btn {
-      margin: 0 0 0 $baseline;
-    }
-  }
-
-  .rich-text__wrap {
-    .field-type-gutter {
-      display: none;
-    }
-  }
-  .rich-text__toolbar {
-    margin-bottom: 0;
-  }
-  .rich-text__editor {
-    background-color: white;
-    border: 1px solid $color-light-gray;
-    border-top: none;
-    min-height: base(5);
-    padding: base(.35) base(.5);
-  }
-}

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';
-declare type Props = {
-    slug: string;
-    element: Element;
-    closeModal: () => void;
-    setRelatedCollectionConfig: (collectionConfig: SanitizedCollectionConfig) => void;
-    relatedCollectionConfig: SanitizedCollectionConfig;
-};
-export declare const SwapUploadModal: React.FC<Props>;
-export {};