payload 0.14.22-beta.0 → 0.14.23-beta.0

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

@@ -0,0 +1,116 @@
+import { useConfig } from '@payloadcms/config-provider';
+import { formatDistance } from 'date-fns';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useWatchForm, useFormModified } from '../../forms/Form/context';
+import { useLocale } from '../../utilities/Locale';
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import useDebounce from '../../../hooks/useDebounce';
+import './index.scss';
+const baseClass = 'autosave';
+const Autosave = ({ collection, global, id, publishedDocUpdatedAt }) => {
+    var _a, _b, _c, _d;
+    const { serverURL, routes: { api, admin } } = useConfig();
+    const { versions, getVersions } = useDocumentInfo();
+    const { fields, dispatchFields } = useWatchForm();
+    const modified = useFormModified();
+    const locale = useLocale();
+    const { replace } = useHistory();
+    let interval = 800;
+    if ((collection === null || collection === void 0 ? void 0 : collection.versions.drafts) && ((_b = (_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) === null || _b === void 0 ? void 0 : _b.autosave))
+        interval = collection.versions.drafts.autosave.interval;
+    if ((global === null || global === void 0 ? void 0 : global.versions.drafts) && ((_d = (_c = global.versions) === null || _c === void 0 ? void 0 : _c.drafts) === null || _d === void 0 ? void 0 : _d.autosave))
+        interval = global.versions.drafts.autosave.interval;
+    const [saving, setSaving] = useState(false);
+    const [lastSaved, setLastSaved] = useState();
+    const debouncedFields = useDebounce(fields, interval);
+    const fieldRef = useRef(fields);
+    // Store fields in ref so the autosave func
+    // can always retrieve the most to date copies
+    // after the timeout has executed
+    fieldRef.current = fields;
+    const createCollectionDoc = useCallback(async () => {
+        const res = await fetch(`${serverURL}${api}/${collection.slug}?locale=${locale}&fallback-locale=null&depth=0&draft=true`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({}),
+        });
+        if (res.status === 201) {
+            const json = await res.json();
+            replace(`${admin}/collections/${collection.slug}/${json.doc.id}`, {
+                state: {
+                    data: json.doc,
+                },
+            });
+        }
+        else {
+            toast.error('There was a problem while autosaving this document.');
+        }
+    }, [collection, serverURL, api, admin, locale, replace]);
+    useEffect(() => {
+        // If no ID, but this is used for a collection doc,
+        // Immediately save it and set lastSaved
+        if (!id && collection) {
+            createCollectionDoc();
+        }
+    }, [id, collection, createCollectionDoc]);
+    // When debounced fields change, autosave
+    useEffect(() => {
+        const autosave = async () => {
+            if (modified) {
+                setSaving(true);
+                let url;
+                let method;
+                if (collection && id) {
+                    url = `${serverURL}${api}/${collection.slug}/${id}?draft=true&autosave=true`;
+                    method = 'PUT';
+                }
+                if (global) {
+                    url = `${serverURL}${api}/globals/${global.slug}?draft=true&autosave=true`;
+                    method = 'POST';
+                }
+                if (url) {
+                    const body = {
+                        ...reduceFieldsToValues(fieldRef.current),
+                        _status: 'draft',
+                    };
+                    setTimeout(async () => {
+                        const res = await fetch(url, {
+                            method,
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(body),
+                        });
+                        setSaving(false);
+                        if (res.status === 200) {
+                            setLastSaved(new Date().getTime());
+                            getVersions();
+                        }
+                    }, 1000);
+                }
+            }
+        };
+        autosave();
+    }, [debouncedFields, modified, serverURL, api, collection, global, id, dispatchFields, getVersions]);
+    useEffect(() => {
+        var _a;
+        if ((_a = versions === null || versions === void 0 ? void 0 : versions.docs) === null || _a === void 0 ? void 0 : _a[0]) {
+            setLastSaved(new Date(versions.docs[0].updatedAt).getTime());
+        }
+        else if (publishedDocUpdatedAt) {
+            setLastSaved(new Date(publishedDocUpdatedAt).getTime());
+        }
+    }, [publishedDocUpdatedAt, versions]);
+    return (React.createElement("div", { className: baseClass },
+        saving && 'Saving...',
+        (!saving && lastSaved) && (React.createElement(React.Fragment, null,
+            "Last saved\u00A0",
+            formatDistance(new Date(), new Date(lastSaved)),
+            "\u00A0ago"))));
+};
+export default Autosave;

package/dist/admin/components/elements/Autosave/index.scss

@@ -0,0 +1,5 @@
+@import '../../../scss/styles.scss';
+
+.autosave {
+  min-height: $baseline;
+}

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

@@ -0,0 +1,8 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+export declare type Props = {
+    collection?: SanitizedCollectionConfig;
+    global?: SanitizedGlobalConfig;
+    id?: string | number;
+    publishedDocUpdatedAt: string;
+};

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

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

package/dist/admin/components/elements/Banner/index.scss

@@ -55,8 +55,7 @@
   }
 
   &--type-success {
-    background: rgba($color-green, .1);
-    color: darken($color-green, 20%);
+    background: $color-green;
 
     &.button--has-action {
       &:hover {

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

@@ -48,7 +48,8 @@ const Button = (props) => {
     const buttonProps = {
         type,
         className: classes,
-        onClick: handleClick,
+        disabled,
+        onClick: !disabled ? handleClick : undefined,
         rel: newTab ? 'noopener noreferrer' : undefined,
         target: newTab ? '_blank' : undefined,
     };

package/dist/admin/components/elements/Button/index.scss

@@ -72,8 +72,18 @@
     background-color: $color-dark-gray;
     color: white;
 
-    &:hover {
-      background: lighten($color-dark-gray, 5%);
+    &.btn--disabled {
+      background-color: rgba($color-dark-gray, .6);
+    }
+
+    &:not(.btn--disabled) {
+      &:hover {
+        background: lighten($color-dark-gray, 5%);
+      }
+
+      &:active {
+        background: lighten($color-dark-gray, 10%);
+      }
     }
 
     &:focus {
@@ -81,9 +91,6 @@
       outline: none;
     }
 
-    &:active {
-      background: lighten($color-dark-gray, 10%);
-    }
   }
 
   &--style-secondary {
@@ -99,14 +106,20 @@
       box-shadow: $hover-box-shadow;
     }
 
+    &:active {
+      background: lighten($color-light-gray, 7%);
+    }
+
+    &.btn--disabled {
+      color: rgba($color-dark-gray, .6);
+      background: none;
+      box-shadow: inset 0 0 0 $style-stroke-width rgba($color-dark-gray, .4);
+    }
+
     &:focus {
       outline: none;
       box-shadow: $hover-box-shadow, $focus-box-shadow;
     }
-
-    &:active {
-      background: lighten($color-light-gray, 7%);
-    }
   }
 
   &--style-none {
@@ -172,6 +185,10 @@
     }
   }
 
+  &--disabled {
+    cursor: default;
+  }
+
   &:hover {
     .btn__icon {
       @include color-svg(white);

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

@@ -35,14 +35,8 @@ const DeleteDocument = (props) => {
                 const json = await res.json();
                 if (res.status < 400) {
                     closeAll();
-                    return history.push({
-                        pathname: `${admin}/collections/${slug}`,
-                        state: {
-                            status: {
-                                message: `${singular} "${title}" successfully deleted.`,
-                            },
-                        },
-                    });
+                    toast.success(`${singular} "${title}" successfully deleted.`);
+                    return history.push(`${admin}/collections/${slug}`);
                 }
                 closeAll();
                 if (json.errors) {

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+const baseClass = 'id-label';
+const IDLabel = ({ id, prefix = 'ID:' }) => (React.createElement("div", { className: baseClass },
+    prefix,
+    "\u00A0\u00A0",
+    id));
+export default IDLabel;

package/dist/admin/components/elements/IDLabel/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles';
+
+.id-label {
+  font-size: base(.75);
+  font-weight: normal;
+  color: $color-gray;
+  background: $color-background-gray;
+  padding: base(.25) base(.5);
+  border-radius: $style-radius-m;
+  display: inline-flex;
+}

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import './index.scss';
 declare type Props = {
-    collection: SanitizedCollectionConfig;
+    limits: number[];
     limit: number;
     handleChange?: (limit: number) => void;
     modifySearchParams?: boolean;

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

@@ -4,10 +4,11 @@ import { useHistory } from 'react-router-dom';
 import { useSearchParams } from '../../utilities/SearchParams';
 import Popup from '../Popup';
 import Chevron from '../../icons/Chevron';
+import { defaults } from '../../../../collections/config/defaults';
 import './index.scss';
 const baseClass = 'per-page';
-const PerPage = ({ collection, limit, handleChange, modifySearchParams = true }) => {
-    const { admin: { pagination: { limits, }, }, } = collection;
+const defaultLimits = defaults.admin.pagination.limits;
+const PerPage = ({ limits = defaultLimits, limit, handleChange, modifySearchParams = true }) => {
     const params = useSearchParams();
     const history = useHistory();
     return (React.createElement("div", { className: baseClass },

package/dist/admin/components/elements/Pill/index.scss

@@ -11,6 +11,7 @@
   border-radius: $style-radius-s;
   padding: 0 base(.25);
   padding-left: base(.0875 + .25);
+  cursor: default;
 
   &:active,
   &:focus {
@@ -36,13 +37,28 @@
     padding-right: base(.125);
   }
 
-  &--style-light {
-    &:hover {
-      background: lighten($color-light-gray, 3%);
+  &--style-white {
+    background: white;
+    &.pill--has-action {
+      &:hover {
+        background: lighten($color-light-gray, 3%);
+      }
+
+      &:active {
+        background: lighten($color-light-gray, 5%);
+      }
     }
+  }
+
+  &--style-light {
+    &.pill--has-action {
+      &:hover {
+        background: lighten($color-light-gray, 3%);
+      }
 
-    &:active {
-      background: lighten($color-light-gray, 5%);
+      &:active {
+        background: lighten($color-light-gray, 5%);
+      }
     }
   }
 
@@ -51,6 +67,14 @@
     color: $color-dark-gray;
   }
 
+  &--style-warning {
+    background: $color-yellow;
+  }
+
+  &--style-success {
+    background: $color-green;
+  }
+
   &--style-dark {
     background: $color-dark-gray;
     color: white;
@@ -59,12 +83,14 @@
       @include color-svg(white);
     }
 
-    &:hover {
-      background: lighten($color-dark-gray, 3%);
-    }
+    &.pill--has-action {
+      &:hover {
+        background: lighten($color-dark-gray, 3%);
+      }
 
-    &:active {
-      background: lighten($color-dark-gray, 5%);
+      &:active {
+        background: lighten($color-dark-gray, 5%);
+      }
     }
   }
 }

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

@@ -5,7 +5,7 @@ export declare type Props = {
     icon?: React.ReactNode;
     alignIcon?: 'left' | 'right';
     onClick?: () => void;
-    pillStyle?: 'light' | 'dark' | 'light-gray';
+    pillStyle?: 'white' | 'light' | 'dark' | 'light-gray' | 'warning' | 'success';
 };
 export declare type RenderedTypeProps = {
     className?: string;

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

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

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

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { useAuth } from '@payloadcms/config-provider';
 import Button from '../Button';
 import { useLocale } from '../../utilities/Locale';
+import './index.scss';
 const baseClass = 'preview-btn';
 const PreviewButton = (props) => {
-    const { generatePreviewURL, data } = props;
+    const { generatePreviewURL, data, } = props;
     const [url, setUrl] = useState(undefined);
     const locale = useLocale();
     const { token } = useAuth();
@@ -20,7 +21,7 @@ const PreviewButton = (props) => {
         generatePreviewURL,
         locale,
         token,
-        data
+        data,
     ]);
     if (url) {
         return (React.createElement(Button, { el: "anchor", className: baseClass, buttonStyle: "secondary", url: url, newTab: true }, "Preview"));

package/dist/admin/components/elements/PreviewButton/index.scss

@@ -0,0 +1 @@
+@import '../../../scss/styles.scss';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+declare const Publish: React.FC<Props>;
+export default Publish;

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

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import FormSubmit from '../../forms/Submit';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { useForm, useFormModified } from '../../forms/Form/context';
+const Publish = () => {
+    const { unpublishedVersions, publishedDoc } = useDocumentInfo();
+    const { submit } = useForm();
+    const modified = useFormModified();
+    const hasNewerVersions = (unpublishedVersions === null || unpublishedVersions === void 0 ? void 0 : unpublishedVersions.totalDocs) > 0;
+    const canPublish = modified || hasNewerVersions || !publishedDoc;
+    const publish = useCallback(() => {
+        submit({
+            overrides: {
+                _status: 'published',
+            },
+        });
+    }, [submit]);
+    return (React.createElement(FormSubmit, { type: "button", onClick: publish, disabled: !canPublish }, "Publish changes"));
+};
+export default Publish;

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

@@ -0,0 +1 @@
+export declare type Props = {};

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

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

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

@@ -3,12 +3,12 @@ import Select from 'react-select';
 import Chevron from '../../icons/Chevron';
 import './index.scss';
 const ReactSelect = (props) => {
-    const { className, showError = false, options, onChange, value, disabled = false, placeholder, } = props;
+    const { className, showError = false, options, onChange, value, disabled = false, placeholder, isSearchable = true, } = props;
     const classes = [
         className,
         'react-select',
         showError && 'react-select--error',
     ].filter(Boolean).join(' ');
-    return (React.createElement(Select, { placeholder: placeholder, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, components: { DropdownIndicator: Chevron }, className: classes, classNamePrefix: "rs", options: options }));
+    return (React.createElement(Select, { placeholder: placeholder, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, components: { DropdownIndicator: Chevron }, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable }));
 };
 export default ReactSelect;

package/dist/admin/components/elements/ReactSelect/index.scss

@@ -9,7 +9,8 @@ div.react-select {
   }
 
   .rs__value-container {
-    padding: 0;
+    padding: base(.25) 0;
+    min-height: base(1.5);
 
     > * {
       margin-top: 0;
@@ -20,6 +21,8 @@ div.react-select {
 
     &--is-multi {
       margin-left: - base(.25);
+      padding-top: 0;
+      padding-bottom: 0;
     }
   }
 
@@ -40,9 +43,6 @@ div.react-select {
   }
 
   .rs__input {
-    margin-top: base(.25);
-    margin-bottom: base(.25);
-
     input {
       font-family: $font-body;
       width: 100% !important;

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

@@ -17,4 +17,5 @@ export declare type Props = {
     onInputChange?: (val: string) => void;
     onMenuScrollToBottom?: () => void;
     placeholder?: string;
+    isSearchable?: boolean;
 };

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

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

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

@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import useTitle from '../../../hooks/useTitle';
-import './index.scss';
+import IDLabel from '../IDLabel';
 const baseClass = 'render-title';
 const RenderTitle = (props) => {
     const { useAsTitle, title: titleFromProps, data, fallback = '[untitled]', } = props;
@@ -15,12 +15,9 @@ const RenderTitle = (props) => {
         title = fallback;
     title = titleFromProps || title;
     const idAsTitle = title === (data === null || data === void 0 ? void 0 : data.id);
-    const classes = [
-        baseClass,
-        idAsTitle && `${baseClass}--id-as-title`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("span", { className: classes },
-        idAsTitle && (React.createElement(Fragment, null, "ID:\u00A0\u00A0")),
-        title));
+    if (idAsTitle) {
+        return (React.createElement(IDLabel, { id: data === null || data === void 0 ? void 0 : data.id }));
+    }
+    return (React.createElement("span", { className: baseClass }, title));
 };
 export default RenderTitle;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const SaveDraft: React.FC;
+export default SaveDraft;

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useConfig } from '@payloadcms/config-provider';
+import FormSubmit from '../../forms/Submit';
+import { useForm, useFormModified } from '../../forms/Form/context';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { useLocale } from '../../utilities/Locale';
+import './index.scss';
+const baseClass = 'save-draft';
+const SaveDraft = () => {
+    const { serverURL, routes: { api } } = useConfig();
+    const { submit } = useForm();
+    const { collection, global, id } = useDocumentInfo();
+    const modified = useFormModified();
+    const locale = useLocale();
+    const canSaveDraft = modified;
+    const saveDraft = useCallback(() => {
+        const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
+        let action;
+        let method = 'POST';
+        if (collection) {
+            action = `${serverURL}${api}/${collection.slug}${id ? `/${id}` : ''}${search}`;
+            if (id)
+                method = 'PUT';
+        }
+        if (global) {
+            action = `${serverURL}${api}/globals/${global.slug}${search}`;
+        }
+        submit({
+            action,
+            method,
+            skipValidation: true,
+            overrides: {
+                _status: 'draft',
+            },
+        });
+    }, [submit, collection, global, serverURL, api, locale, id]);
+    return (React.createElement(FormSubmit, { className: baseClass, type: "button", buttonStyle: "secondary", onClick: saveDraft, disabled: !canSaveDraft }, "Save draft"));
+};
+export default SaveDraft;

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

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