payload 0.20.0 → 0.20.1

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

@@ -0,0 +1,22 @@
+@import '../../../../scss/styles.scss';
+
+.field-type.relationship {
+  position: relative;
+  margin-bottom: $baseline;
+}
+
+.relationship__error-loading {
+  border: 1px solid $color-red;
+  min-height: base(2);
+  padding: base(.5) base(.75);
+  background-color: $color-red;
+  color: white;
+}
+
+.relationship--read-only {
+  div.react-select {
+    div.rs__control {
+      background: lighten($color-light-gray, 5%);
+    }
+  }
+}

package/dist/admin/components/forms/field-types/Relationship/optionsReducer.d.ts

@@ -0,0 +1,3 @@
+import { Option, Action } from './types';
+declare const optionsReducer: (state: Option[], action: Action) => Option[];
+export default optionsReducer;

package/dist/admin/components/forms/field-types/Relationship/optionsReducer.js

@@ -0,0 +1,101 @@
+const reduceToIDs = (options) => options.reduce((ids, option) => {
+    if (option.options) {
+        return [
+            ...ids,
+            ...reduceToIDs(option.options),
+        ];
+    }
+    return [
+        ...ids,
+        option.value,
+    ];
+}, []);
+const sortOptions = (options) => options.sort((a, b) => {
+    var _a, _b;
+    if (typeof ((_a = a === null || a === void 0 ? void 0 : a.label) === null || _a === void 0 ? void 0 : _a.localeCompare) === 'function' && typeof ((_b = b === null || b === void 0 ? void 0 : b.label) === null || _b === void 0 ? void 0 : _b.localeCompare) === 'function') {
+        return a.label.localeCompare(b.label);
+    }
+    return 0;
+});
+const optionsReducer = (state, action) => {
+    switch (action.type) {
+        case 'CLEAR': {
+            return action.required ? [] : [{ value: 'null', label: 'None' }];
+        }
+        case 'ADD': {
+            const { hasMultipleRelations, collection, relation, data, sort, ids = [] } = action;
+            const labelKey = collection.admin.useAsTitle || 'id';
+            const loadedIDs = reduceToIDs(state);
+            if (!hasMultipleRelations) {
+                const options = [
+                    ...state,
+                    ...data.docs.reduce((docs, doc) => {
+                        if (loadedIDs.indexOf(doc.id) === -1) {
+                            loadedIDs.push(doc.id);
+                            return [
+                                ...docs,
+                                {
+                                    label: doc[labelKey] || `Untitled - ID: ${doc.id}`,
+                                    value: doc.id,
+                                },
+                            ];
+                        }
+                        return docs;
+                    }, []),
+                ];
+                ids.forEach((id) => {
+                    if (!loadedIDs.includes(id)) {
+                        options.push({
+                            label: labelKey === 'id' ? id : `Untitled - ID: ${id}`,
+                            value: id,
+                        });
+                    }
+                });
+                return sort ? sortOptions(options) : options;
+            }
+            const newOptions = [...state];
+            const optionsToAddTo = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
+            const newSubOptions = data.docs.reduce((docs, doc) => {
+                if (loadedIDs.indexOf(doc.id) === -1) {
+                    loadedIDs.push(doc.id);
+                    return [
+                        ...docs,
+                        {
+                            label: doc[labelKey] || `Untitled - ID: ${doc.id}`,
+                            relationTo: relation,
+                            value: doc.id,
+                        },
+                    ];
+                }
+                return docs;
+            }, []);
+            ids.forEach((id) => {
+                if (!loadedIDs.includes(id)) {
+                    newSubOptions.push({
+                        label: labelKey === 'id' ? id : `Untitled - ID: ${id}`,
+                        value: id,
+                    });
+                }
+            });
+            if (optionsToAddTo) {
+                const subOptions = [
+                    ...optionsToAddTo.options,
+                    ...newSubOptions,
+                ];
+                optionsToAddTo.options = sort ? sortOptions(subOptions) : subOptions;
+            }
+            else {
+                newOptions.push({
+                    label: collection.labels.plural,
+                    options: sort ? sortOptions(newSubOptions) : newSubOptions,
+                    value: undefined,
+                });
+            }
+            return newOptions;
+        }
+        default: {
+            return state;
+        }
+    }
+};
+export default optionsReducer;

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

@@ -0,0 +1,38 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { PaginatedDocs } from '../../../../../mongoose/types';
+import { RelationshipField } from '../../../../../fields/config/types';
+export declare type Props = Omit<RelationshipField, 'type'> & {
+    path?: string;
+};
+export declare type Option = {
+    label: string;
+    value: string;
+    relationTo?: string;
+    options?: Option[];
+};
+declare type CLEAR = {
+    type: 'CLEAR';
+    required: boolean;
+};
+declare type ADD = {
+    type: 'ADD';
+    data: PaginatedDocs<any>;
+    relation: string;
+    hasMultipleRelations: boolean;
+    collection: SanitizedCollectionConfig;
+    sort?: boolean;
+    ids?: unknown[];
+};
+export declare type Action = CLEAR | ADD;
+export declare type ValueWithRelation = {
+    relationTo: string;
+    value: string;
+};
+export declare type GetResults = (args: {
+    lastFullyLoadedRelation?: number;
+    lastLoadedPage?: number;
+    search?: string;
+    value?: unknown;
+    sort?: boolean;
+}) => Promise<void>;
+export {};

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
+import { Props, BlurSelectionEditor } from './types';
+import './index.scss';
+declare type CustomText = {
+    text: string;
+    [x: string]: unknown;
+};
+declare type CustomElement = {
+    type?: string;
+    children: CustomText[];
+};
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor & BlurSelectionEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}
+declare const _default: React.FC<Props>;
+export default _default;

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

@@ -0,0 +1,199 @@
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import isHotkey from 'is-hotkey';
+import { createEditor, Transforms, Node, Element as SlateElement, Text } from 'slate';
+import { Editable, withReact, Slate } from 'slate-react';
+import { withHistory } from 'slate-history';
+import { richText } from '../../../../../fields/validations';
+import useField from '../../useField';
+import withCondition from '../../withCondition';
+import Label from '../../Label';
+import Error from '../../Error';
+import leafTypes from './leaves';
+import elementTypes from './elements';
+import toggleLeaf from './leaves/toggle';
+import hotkeys from './hotkeys';
+import enablePlugins from './enablePlugins';
+import defaultValue from '../../../../../fields/richText/defaultValue';
+import FieldTypeGutter from '../../FieldTypeGutter';
+import FieldDescription from '../../FieldDescription';
+import withHTML from './plugins/withHTML';
+import listTypes from './elements/listTypes';
+import mergeCustomFunctions from './mergeCustomFunctions';
+import withEnterBreakOut from './plugins/withEnterBreakOut';
+import './index.scss';
+const defaultElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'indent', 'link', 'relationship', 'upload'];
+const defaultLeaves = ['bold', 'italic', 'underline', 'strikethrough', 'code'];
+const baseClass = 'rich-text';
+const RichText = (props) => {
+    const { path: pathFromProps, name, required, validate = richText, label, admin, admin: { readOnly, style, className, width, placeholder, description, hideGutter, condition, } = {}, } = props;
+    const elements = (admin === null || admin === void 0 ? void 0 : admin.elements) || defaultElements;
+    const leaves = (admin === null || admin === void 0 ? void 0 : admin.leaves) || defaultLeaves;
+    const path = pathFromProps || name;
+    const [loaded, setLoaded] = useState(false);
+    const [enabledElements, setEnabledElements] = useState({});
+    const [enabledLeaves, setEnabledLeaves] = useState({});
+    const [initialValueKey, setInitialValueKey] = useState('');
+    const editorRef = useRef(null);
+    const renderElement = useCallback(({ attributes, children, element }) => {
+        const matchedElement = enabledElements[element === null || element === void 0 ? void 0 : element.type];
+        const Element = matchedElement === null || matchedElement === void 0 ? void 0 : matchedElement.Element;
+        if (Element) {
+            return (React.createElement(Element, { attributes: attributes, element: element, path: path, fieldProps: props, editorRef: editorRef }, children));
+        }
+        return React.createElement("div", { ...attributes }, children);
+    }, [enabledElements, path, props]);
+    const renderLeaf = useCallback(({ attributes, children, leaf }) => {
+        var _a;
+        const matchedLeafName = Object.keys(enabledLeaves).find((leafName) => leaf[leafName]);
+        if ((_a = enabledLeaves[matchedLeafName]) === null || _a === void 0 ? void 0 : _a.Leaf) {
+            const { Leaf } = enabledLeaves[matchedLeafName];
+            return (React.createElement(Leaf, { attributes: attributes, leaf: leaf, path: path, fieldProps: props, editorRef: editorRef }, children));
+        }
+        return (React.createElement("span", { ...attributes }, children));
+    }, [enabledLeaves, path, props]);
+    const memoizedValidate = useCallback((value, validationOptions) => {
+        return validate(value, { ...validationOptions, required });
+    }, [validate, required]);
+    const fieldType = useField({
+        path,
+        validate: memoizedValidate,
+        condition,
+    });
+    const { value, showError, setValue, errorMessage, initialValue, } = fieldType;
+    const classes = [
+        baseClass,
+        'field-type',
+        className,
+        showError && 'error',
+        readOnly && `${baseClass}--read-only`,
+    ].filter(Boolean).join(' ');
+    const editor = useMemo(() => {
+        let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())));
+        CreatedEditor = enablePlugins(CreatedEditor, elements);
+        CreatedEditor = enablePlugins(CreatedEditor, leaves);
+        CreatedEditor = withHTML(CreatedEditor);
+        return CreatedEditor;
+    }, [elements, leaves]);
+    const onBlur = useCallback(() => {
+        editor.blurSelection = editor.selection;
+    }, [editor]);
+    useEffect(() => {
+        if (!loaded) {
+            const mergedElements = mergeCustomFunctions(elements, elementTypes);
+            const mergedLeaves = mergeCustomFunctions(leaves, leafTypes);
+            setEnabledElements(mergedElements);
+            setEnabledLeaves(mergedLeaves);
+            setLoaded(true);
+        }
+    }, [loaded, elements, leaves]);
+    useEffect(() => {
+        setInitialValueKey(JSON.stringify(initialValue || ''));
+    }, [initialValue]);
+    if (!loaded) {
+        return null;
+    }
+    let valueToRender = value;
+    if (typeof valueToRender === 'string') {
+        try {
+            const parsedJSON = JSON.parse(valueToRender);
+            valueToRender = parsedJSON;
+        }
+        catch (err) {
+            // do nothing
+        }
+    }
+    if (!valueToRender)
+        valueToRender = defaultValue;
+    return (React.createElement("div", { key: initialValueKey, className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement("div", { className: `${baseClass}__wrap` },
+            !hideGutter && (React.createElement(FieldTypeGutter, null)),
+            React.createElement(Error, { showError: showError, message: errorMessage }),
+            React.createElement(Label, { htmlFor: path, label: label, required: required }),
+            React.createElement(Slate, { editor: editor, value: valueToRender, onChange: (val) => {
+                    if (val !== defaultValue && val !== value) {
+                        setValue(val);
+                    }
+                } },
+                React.createElement("div", { className: `${baseClass}__wrapper` },
+                    React.createElement("div", { className: `${baseClass}__toolbar` },
+                        elements.map((element, i) => {
+                            let elementName;
+                            if (typeof element === 'object' && (element === null || element === void 0 ? void 0 : element.name))
+                                elementName = element.name;
+                            if (typeof element === 'string')
+                                elementName = element;
+                            const elementType = enabledElements[elementName];
+                            const Button = elementType === null || elementType === void 0 ? void 0 : elementType.Button;
+                            if (Button) {
+                                return (React.createElement(Button, { key: i, path: path }));
+                            }
+                            return null;
+                        }),
+                        leaves.map((leaf, i) => {
+                            let leafName;
+                            if (typeof leaf === 'object' && (leaf === null || leaf === void 0 ? void 0 : leaf.name))
+                                leafName = leaf.name;
+                            if (typeof leaf === 'string')
+                                leafName = leaf;
+                            const leafType = enabledLeaves[leafName];
+                            const Button = leafType === null || leafType === void 0 ? void 0 : leafType.Button;
+                            if (Button) {
+                                return (React.createElement(Button, { key: i, path: path }));
+                            }
+                            return null;
+                        })),
+                    React.createElement("div", { className: `${baseClass}__editor`, ref: editorRef },
+                        React.createElement(Editable, { className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
+                                if (event.key === 'Enter') {
+                                    if (event.shiftKey) {
+                                        event.preventDefault();
+                                        editor.insertText('\n');
+                                    }
+                                    else {
+                                        const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                        if (SlateElement.isElement(selectedElement)) {
+                                            // Allow hard enter to "break out" of certain elements
+                                            if (editor.shouldBreakOutOnEnter(selectedElement)) {
+                                                event.preventDefault();
+                                                const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                                if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
+                                                    Transforms.insertNodes(editor, { children: [{ text: '' }] });
+                                                }
+                                                else {
+                                                    Transforms.splitNodes(editor);
+                                                    Transforms.setNodes(editor, {});
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                                if (event.key === 'Backspace') {
+                                    const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                    if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
+                                        const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 1) {
+                                            Transforms.unwrapNodes(editor, {
+                                                match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),
+                                                split: true,
+                                            });
+                                            Transforms.setNodes(editor, {});
+                                        }
+                                    }
+                                    else if (editor.isVoid(selectedElement)) {
+                                        Transforms.removeNodes(editor);
+                                    }
+                                }
+                                Object.keys(hotkeys).forEach((hotkey) => {
+                                    if (isHotkey(hotkey, event)) {
+                                        event.preventDefault();
+                                        const mark = hotkeys[hotkey];
+                                        toggleLeaf(editor, mark);
+                                    }
+                                });
+                            } })))),
+            React.createElement(FieldDescription, { value: value, description: description }))));
+};
+export default withCondition(RichText);

package/dist/admin/components/forms/field-types/RichText/buttons.scss

@@ -0,0 +1,12 @@
+@import '../../../../scss/styles.scss';
+
+.rich-text__button {
+  svg {
+    width: base(.75);
+    height: base(.75);
+  }
+
+  &--disabled {
+    opacity: .4;
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from './types';
+import '../buttons.scss';
+export declare const baseClass = "rich-text__button";
+declare const ElementButton: React.FC<ButtonProps>;
+export default ElementButton;

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

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react';
+import { useSlate } from 'slate-react';
+import isElementActive from './isActive';
+import toggleElement from './toggle';
+import '../buttons.scss';
+export const baseClass = 'rich-text__button';
+const ElementButton = ({ format, children, onClick, className }) => {
+    const editor = useSlate();
+    const defaultOnClick = useCallback((event) => {
+        event.preventDefault();
+        toggleElement(editor, format);
+    }, [editor, format]);
+    return (React.createElement("button", { type: "button", className: [
+            baseClass,
+            className,
+            isElementActive(editor, format) && `${baseClass}__button--active`,
+        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick }, children));
+};
+export default ElementButton;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from './types';
+import '../buttons.scss';
+export declare const baseClass = "rich-text__button";
+declare const ListButton: React.FC<ButtonProps>;
+export default ListButton;

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

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react';
+import { useSlate } from 'slate-react';
+import isListActive from './isListActive';
+import toggleElement from './toggle';
+import '../buttons.scss';
+export const baseClass = 'rich-text__button';
+const ListButton = ({ format, children, onClick, className }) => {
+    const editor = useSlate();
+    const defaultOnClick = useCallback((event) => {
+        event.preventDefault();
+        toggleElement(editor, format);
+    }, [editor, format]);
+    return (React.createElement("button", { type: "button", className: [
+            baseClass,
+            className,
+            isListActive(editor, format) && `${baseClass}__button--active`,
+        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick }, children));
+};
+export default ListButton;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H1Icon from '../../../../../icons/headings/H1';
+const H1 = ({ attributes, children }) => (React.createElement("h1", { ...attributes }, children));
+const h1 = {
+    Button: () => (React.createElement(ElementButton, { format: "h1" },
+        React.createElement(H1Icon, null))),
+    Element: H1,
+};
+export default h1;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H2Icon from '../../../../../icons/headings/H2';
+const H2 = ({ attributes, children }) => (React.createElement("h2", { ...attributes }, children));
+const h2 = {
+    Button: () => (React.createElement(ElementButton, { format: "h2" },
+        React.createElement(H2Icon, null))),
+    Element: H2,
+};
+export default h2;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H3Icon from '../../../../../icons/headings/H3';
+const H3 = ({ attributes, children }) => (React.createElement("h3", { ...attributes }, children));
+const h3 = {
+    Button: () => (React.createElement(ElementButton, { format: "h3" },
+        React.createElement(H3Icon, null))),
+    Element: H3,
+};
+export default h3;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H4Icon from '../../../../../icons/headings/H4';
+const H4 = ({ attributes, children }) => (React.createElement("h4", { ...attributes }, children));
+const h4 = {
+    Button: () => (React.createElement(ElementButton, { format: "h4" },
+        React.createElement(H4Icon, null))),
+    Element: H4,
+};
+export default h4;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H5Icon from '../../../../../icons/headings/H5';
+const H5 = ({ attributes, children }) => (React.createElement("h5", { ...attributes }, children));
+const h5 = {
+    Button: () => (React.createElement(ElementButton, { format: "h5" },
+        React.createElement(H5Icon, null))),
+    Element: H5,
+};
+export default h5;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ElementButton from '../Button';
+import H6Icon from '../../../../../icons/headings/H6';
+const H6 = ({ attributes, children }) => (React.createElement("h6", { ...attributes }, children));
+const h6 = {
+    Button: () => (React.createElement(ElementButton, { format: "h6" },
+        React.createElement(H6Icon, null))),
+    Element: H6,
+};
+export default h6;

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

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