payload 0.19.2 → 0.20.0

package/dist/admin/components/elements/DatePicker/DatePicker.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-datepicker';
-import CalendarIcon from '../../icons/Calendar';
-import XIcon from '../../icons/X';
-import 'react-datepicker/dist/react-datepicker.css';
-import './index.scss';
-const baseClass = 'date-time-picker';
-const DateTime = (props) => {
-    const { value, onChange, displayFormat, pickerAppearance = 'dayAndTime', minDate, maxDate, monthsToShow = 1, minTime, maxTime, timeIntervals = 30, timeFormat = 'h:mm aa', readOnly, placeholder: placeholderText, } = props;
-    let dateTimeFormat = displayFormat;
-    if (dateTimeFormat === undefined) {
-        if (pickerAppearance === 'dayAndTime')
-            dateTimeFormat = 'MMM d, yyy h:mm a';
-        else if (pickerAppearance === 'timeOnly')
-            dateTimeFormat = 'h:mm a';
-        else
-            dateTimeFormat = 'MMM d, yyy';
-    }
-    const dateTimePickerProps = {
-        minDate,
-        maxDate,
-        dateFormat: dateTimeFormat,
-        monthsShown: Math.min(2, monthsToShow),
-        showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
-        minTime,
-        maxTime,
-        timeIntervals,
-        timeFormat,
-        placeholderText,
-        disabled: readOnly,
-        onChange,
-        showPopperArrow: false,
-        selected: value && new Date(value),
-        customInputRef: 'ref',
-    };
-    const classes = [
-        baseClass,
-        `${baseClass}__appearance--${pickerAppearance}`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes },
-        React.createElement("div", { className: `${baseClass}__icon-wrap` },
-            dateTimePickerProps.selected && (React.createElement("button", { type: "button", className: `${baseClass}__clear-button`, onClick: () => onChange(null) },
-                React.createElement(XIcon, null))),
-            React.createElement(CalendarIcon, null)),
-        React.createElement("div", { className: `${baseClass}__input-wrapper` },
-            React.createElement(DatePicker, { ...dateTimePickerProps, popperModifiers: {
-                    preventOverflow: {
-                        enabled: true,
-                    },
-                } }))));
-};
-export default DateTime;

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

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

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

@@ -1,6 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import Loading from '../Loading';
-const DatePicker = lazy(() => import('./DatePicker'));
-const DatePickerField = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
-    React.createElement(DatePicker, { ...props })));
-export default DatePickerField;

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

@@ -1,246 +0,0 @@
-@import '../../../scss/styles';
-
-$cal-icon-width: 18px;
-
-.date-time-picker {
-  position: relative;
-
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
-  .react-datepicker__time-container {
-    width: 120px;
-  }
-
-  &__icon-wrap {
-    display: flex;
-    column-gap: 10px;
-    position: absolute;
-    right: base(.75);
-    top: base(.625);
-    z-index: 2;
-
-    .icon {
-      pointer-events: none;
-      width: $cal-icon-width;
-      height: auto;
-      @include color-svg($color-dark-gray);
-    }
-  }
-
-  &__clear-button {
-    appearance: none;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  &__appearance--timeOnly {
-    .react-datepicker {
-      width: 100%;
-
-      &__month-container,
-      &__navigation--previous,
-      &__navigation--next {
-        display: none;
-        visibility: hidden;
-      }
-
-      &-popper,
-      &__time-container,
-      &__time-box {
-        width: 100%;
-      }
-
-      &__time-container {
-        .react-datepicker__time {
-          .react-datepicker__time-box {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  .react-datepicker-wrapper {
-    display: block;
-  }
-
-  .react-datepicker-wrapper,
-  .react-datepicker__input-container {
-    width: 100%;
-  }
-
-  .react-datepicker__input-container input {
-    @include formInput;
-    padding-right: calc(#{base(.75)} + #{$cal-icon-width});
-  }
-
-  &--has-error {
-    .react-datepicker__input-container input {
-      background-color: lighten($color-red, 20%);
-    }
-  }
-
-  .react-datepicker {
-    @include shadow-sm;
-    background: white;
-    display: inline-flex;
-    border: 1px solid $color-light-gray;
-    font-family: $font-body;
-    font-weight: 100;
-    border-radius: 0;
-    border: none;
-
-    &__header {
-      padding-top: 0;
-      text-transform: none;
-      text-align: center;
-      border-radius: 0;
-      border: none;
-      background-color: white;
-
-      &--time {
-        padding: 10px 0;
-        border-bottom: 1px solid $color-light-gray;
-        font-weight: 600;
-      }
-    }
-
-    &__navigation {
-      background: none;
-      line-height: 1.7rem;
-      text-align: center;
-      cursor: pointer;
-      position: absolute;
-      top: 10px;
-      width: 0;
-      padding: 0;
-      border: 0.45rem solid transparent;
-      z-index: 1;
-      height: 10px;
-      width: 10px;
-      text-indent: -999em;
-      overflow: hidden;
-      top: 15px;
-
-      &--next {
-        border-left-color: $color-gray;
-
-        &:focus {
-          border-left-color: darken($color-gray, 30%);
-          outline:none;
-        }
-      }
-
-      &--previous {
-        border-right-color: $color-gray;
-
-        &:focus {
-          border-right-color: darken($color-gray, 30%);
-          outline:none;
-        }
-      }
-    }
-
-    &__current-month {
-      padding: 10px 0;
-      font-weight: 600;
-    }
-
-    &__month-container {
-      border-right: 1px solid $color-light-gray;
-    }
-
-    &__time-container {
-      border-left: none;
-    }
-
-    &__day-names {
-      background-color: $color-light-gray;
-    }
-
-    &__day {
-      box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray;
-      font-size: base(.55);
-
-      &:focus {
-        outline: 0;
-        background: $color-gray;
-      }
-
-      &--selected {
-        font-weight: 600;
-
-        &:focus {
-          background-color: $color-light-gray;
-        }
-      }
-
-      &--keyboard-selected {
-        color: white;
-        font-weight: 600;
-
-        &:focus {
-          background-color: $color-light-gray;
-          box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
-        }
-      }
-
-      &--today {
-        font-weight: 600;
-      }
-    }
-
-    &__day,
-    &__day-name {
-      width: base(1.5);
-      margin: base(.15);
-      line-height: base(1.25);
-    }
-  }
-
-  .react-datepicker-popper {
-    z-index: 10;
-    border: 1px solid $color-light-gray;
-  }
-
-  .react-datepicker__day--keyboard-selected,
-  .react-datepicker__month-text--keyboard-selected,
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-    box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
-    background-color: $color-light-gray;
-    color: $color-dark-gray;
-    border-radius: 0;
-  }
-
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
-  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
-    box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
-    background-color: $color-light-gray;
-    color: $color-dark-gray;
-    border-radius: 0;
-  }
-
-  .react-datepicker__day:hover, .react-datepicker__month-text:hover {
-    border-radius: 0;
-  }
-
-  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
-    right: 130px;
-  }
-
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
-    line-height: 20px;
-    font-size: base(.5);
-    font-weight: 500;
-  }
-
-  @include small-break {
-    &__input-wrapper {
-      .icon {
-        top: calc(50% - #{base(.25)});
-      }
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-declare type SharedProps = {
-    displayFormat?: string | undefined;
-    pickerAppearance?: 'dayAndTime' | 'timeOnly' | 'dayOnly';
-};
-declare type TimePickerProps = {
-    minTime?: Date;
-    maxTime?: Date;
-    timeIntervals?: number;
-    timeFormat?: string;
-};
-declare type DayPickerProps = {
-    monthsToShow?: 1 | 2;
-    minDate?: Date;
-    maxDate?: Date;
-};
-export declare type ConditionalDateProps = SharedProps & DayPickerProps & TimePickerProps & {
-    pickerAppearance?: 'dayAndTime';
-} | SharedProps & TimePickerProps & {
-    pickerAppearance: 'timeOnly';
-} | SharedProps & DayPickerProps & {
-    pickerAppearance: 'dayOnly';
-};
-export declare type Props = SharedProps & DayPickerProps & TimePickerProps & {
-    value?: Date;
-    onChange?: (val: Date) => void;
-    readOnly?: boolean;
-    placeholder?: string;
-};
-export {};

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

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9lbGVtZW50cy9EYXRlUGlja2VyL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

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

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

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

@@ -1,78 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { useHistory } from 'react-router-dom';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useConfig } from '../../utilities/Config';
-import Button from '../Button';
-import MinimalTemplate from '../../templates/Minimal';
-import { useForm } from '../../forms/Form/context';
-import useTitle from '../../../hooks/useTitle';
-import { requests } from '../../../api';
-import './index.scss';
-const baseClass = 'delete-document';
-const DeleteDocument = (props) => {
-    const { title: titleFromProps, id, collection: { admin: { useAsTitle, }, slug, labels: { singular, } = {}, } = {}, } = props;
-    const { serverURL, routes: { api, admin } } = useConfig();
-    const { setModified } = useForm();
-    const [deleting, setDeleting] = useState(false);
-    const { closeAll, toggle } = useModal();
-    const history = useHistory();
-    const title = useTitle(useAsTitle) || id;
-    const titleToRender = titleFromProps || title;
-    const modalSlug = `delete-${id}`;
-    const addDefaultError = useCallback(() => {
-        toast.error(`There was an error while deleting ${title}. Please check your connection and try again.`);
-    }, [title]);
-    const handleDelete = useCallback(() => {
-        setDeleting(true);
-        setModified(false);
-        requests.delete(`${serverURL}${api}/${slug}/${id}`, {
-            headers: {
-                'Content-Type': 'application/json',
-            },
-        }).then(async (res) => {
-            try {
-                const json = await res.json();
-                if (res.status < 400) {
-                    closeAll();
-                    toast.success(`${singular} "${title}" successfully deleted.`);
-                    return history.push(`${admin}/collections/${slug}`);
-                }
-                closeAll();
-                if (json.errors) {
-                    json.errors.forEach((error) => toast.error(error.message));
-                }
-                else {
-                    addDefaultError();
-                }
-                return false;
-            }
-            catch (e) {
-                return addDefaultError();
-            }
-        });
-    }, [addDefaultError, closeAll, history, id, singular, slug, title, admin, api, serverURL, setModified]);
-    if (id) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("button", { type: "button", className: `${baseClass}__toggle`, onClick: (e) => {
-                    e.preventDefault();
-                    setDeleting(false);
-                    toggle(modalSlug);
-                } }, "Delete"),
-            React.createElement(Modal, { slug: modalSlug, className: baseClass },
-                React.createElement(MinimalTemplate, null,
-                    React.createElement("h1", null, "Confirm deletion"),
-                    React.createElement("p", null,
-                        "You are about to delete the",
-                        ' ',
-                        singular,
-                        ' ',
-                        "\"",
-                        React.createElement("strong", null, titleToRender),
-                        "\". Are you sure?"),
-                    React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: deleting ? undefined : () => toggle(modalSlug) }, "Cancel"),
-                    React.createElement(Button, { onClick: deleting ? undefined : handleDelete }, deleting ? 'Deleting...' : 'Confirm')))));
-    }
-    return null;
-};
-export default DeleteDocument;

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

@@ -1,16 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.delete-document {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  &__toggle {
-    @extend %btn-reset;
-  }
-
-  .btn {
-    margin-right: $baseline;
-  }
-}

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

@@ -1,6 +0,0 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
-    collection?: SanitizedCollectionConfig;
-    id?: string;
-    title?: string;
-};

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

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

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

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

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

@@ -1,23 +0,0 @@
-import React, { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import { useConfig } from '../../utilities/Config';
-import Button from '../Button';
-import { useForm } from '../../forms/Form/context';
-import './index.scss';
-const baseClass = 'duplicate';
-const Duplicate = ({ slug }) => {
-    const { push } = useHistory();
-    const { getData } = useForm();
-    const { routes: { admin } } = useConfig();
-    const handleClick = useCallback(() => {
-        const data = getData();
-        push({
-            pathname: `${admin}/collections/${slug}/create`,
-            state: {
-                data,
-            },
-        });
-    }, [push, getData, slug, admin]);
-    return (React.createElement(Button, { buttonStyle: "none", className: baseClass, onClick: handleClick }, "Duplicate"));
-};
-export default Duplicate;

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

@@ -1,3 +0,0 @@
-export declare type Props = {
-    slug: string;
-};

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

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

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

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

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import StepNav from '../StepNav';
-import './index.scss';
-const baseClass = 'eyebrow';
-const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
-    React.createElement(StepNav, null),
-    actions));
-export default Eyebrow;

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

@@ -1,19 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.eyebrow {
-  @include blur-bg;
-  position: sticky;
-  top: 0;
-  z-index: $z-nav;
-  padding: base(1.5) 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  @include mid-break {
-    padding: 0 0 $baseline;
-    margin: 0;
-    position: static;
-    display: block;
-  }
-}

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare type Props = {
-    actions?: React.ReactNode;
-};

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

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

package/dist/admin/components/elements/FileDetails/Meta/index.d.ts

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

package/dist/admin/components/elements/FileDetails/Meta/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { useConfig } from '../../../utilities/Config';
-import CopyToClipboard from '../../CopyToClipboard';
-import formatFilesize from '../../../../../uploads/formatFilesize';
-import './index.scss';
-const baseClass = 'file-meta';
-const Meta = (props) => {
-    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
-    const { serverURL } = useConfig();
-    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("div", { className: `${baseClass}__url` },
-            React.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
-            React.createElement(CopyToClipboard, { value: fileURL, defaultMessage: "Copy URL" })),
-        React.createElement("div", { className: `${baseClass}__size-type` },
-            formatFilesize(filesize),
-            (width && height) && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                width,
-                "x",
-                height)),
-            mimeType && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                mimeType)))));
-};
-export default Meta;

package/dist/admin/components/elements/FileDetails/Meta/index.scss

@@ -1,23 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-.file-meta {
-  &__url {
-    display: flex;
-
-    a {
-      font-weight: 600;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__size-type,
-  &__url a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}

package/dist/admin/components/elements/FileDetails/Meta/types.d.ts

@@ -1,10 +0,0 @@
-export declare type Props = {
-    filename: string;
-    mimeType: string;
-    filesize: number;
-    staticURL: string;
-    width?: number;
-    height?: number;
-    sizes?: unknown;
-    url?: string;
-};

package/dist/admin/components/elements/FileDetails/Meta/types.js

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

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

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

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

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import Thumbnail from '../Thumbnail';
-import Button from '../Button';
-import Meta from './Meta';
-import Chevron from '../../icons/Chevron';
-import './index.scss';
-const baseClass = 'file-details';
-const FileDetails = (props) => {
-    var _a;
-    const { doc, collection, handleRemove, } = props;
-    const { upload: { staticURL, }, } = collection;
-    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
-    const [moreInfoOpen, setMoreInfoOpen] = useState(false);
-    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("header", null,
-            React.createElement(Thumbnail, { doc: doc, collection: collection }),
-            React.createElement("div", { className: `${baseClass}__main-detail` },
-                React.createElement(Meta, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
-                hasSizes && (React.createElement(Button, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
-                    !moreInfoOpen && (React.createElement(React.Fragment, null,
-                        "More info",
-                        React.createElement(Chevron, null))),
-                    moreInfoOpen && (React.createElement(React.Fragment, null,
-                        "Less info",
-                        React.createElement(Chevron, null)))))),
-            handleRemove && (React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
-        hasSizes && (React.createElement(AnimateHeight, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
-            React.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(sizes).map(([key, val]) => {
-                if (val === null || val === void 0 ? void 0 : val.filename) {
-                    return (React.createElement("li", { key: key },
-                        React.createElement("div", { className: `${baseClass}__size-label` }, key),
-                        React.createElement(Meta, { ...val, mimeType: mimeType, staticURL: staticURL })));
-                }
-                return null;
-            }))))));
-};
-export default FileDetails;