payload 0.19.2 → 0.20.0

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

@@ -1,182 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.nav {
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: base(9);
-  overflow: hidden;
-
-  header {
-    width: 100%;
-    display: flex;
-    margin-bottom: base(1.5);
-
-    a, button {
-      display: block;
-      padding: 0;
-
-      svg {
-        display: block;
-      }
-    }
-  }
-
-  &__brand {
-    margin-right: base(1);
-  }
-
-  &__mobile-menu-btn {
-    background: none;
-    border: 0;
-    opacity: 0;
-    visibility: hidden;
-    cursor: pointer;
-
-    &:active, &:focus {
-      outline: none;
-    }
-  }
-
-  &__scroll {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: base(1.5) base(1);
-    width: calc(100% + #{base(1)});
-    overflow-y: scroll;
-  }
-
-  &__wrap {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-grow: 1;
-  }
-
-  &__label {
-    color: $color-gray;
-  }
-
-  &__controls {
-    margin-top: auto;
-    margin-bottom: 0;
-
-    > * {
-      margin-top: base(1);
-    }
-  }
-
-  &__log-out {
-    &:hover {
-      g {
-        transform: translateX(- #{base(.125)});
-      }
-    }
-  }
-
-  a {
-    padding: base(.125) 0;
-    display: flex;
-    text-decoration: none;
-
-    &:focus {
-      box-shadow: none;
-      font-weight: 600;
-    }
-
-    &:active {
-      font-weight: normal;
-    }
-  }
-
-  nav {
-    margin: base(.25) 0 $baseline;
-
-    a {
-      position: relative;
-
-      svg {
-        opacity: 0;
-        position: absolute;
-        left: - base(.5);
-        transform: rotate(-90deg);
-      }
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-      &.active {
-        padding-left: base(.6);
-        font-weight: 600;
-
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  @include large-break {
-    width: base(8);
-  }
-
-  @include mid-break {
-    background: rgba($color-background-gray, .8);
-    backdrop-filter: saturate(180%) blur(5px);
-    width: 100%;
-    height: base(3);
-    z-index: $z-modal;
-
-    &__scroll {
-      padding: 0;
-      overflow: hidden;
-      width: 100%;
-      display: block;
-    }
-
-    header,
-    &__wrap {
-      padding: $baseline;
-    }
-
-    header {
-      justify-content: space-between;
-      margin: 0;
-    }
-
-    &__mobile-menu-btn {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    &__wrap {
-      padding-top: 0;
-      visibility: hidden;
-      opacity: 0;
-      overflow-y: scroll;
-      position: fixed;
-      top: base(4);
-      bottom: 0;
-    }
-
-    &.nav--menu-active {
-      height: 100vh;
-
-      .nav__wrap {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    nav a {
-      font-size: base(.875);
-      line-height: base(1.25);
-      font-weight: 600;
-    }
-  }
-}

package/dist/admin/components/elements/Paginator/ClickableArrow/index.d.ts

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

package/dist/admin/components/elements/Paginator/ClickableArrow/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import Chevron from '../../../icons/Chevron';
-import './index.scss';
-const baseClass = 'clickable-arrow';
-const ClickableArrow = (props) => {
-    const { updatePage, isDisabled = false, direction = 'right', } = props;
-    const classes = [
-        baseClass,
-        isDisabled && `${baseClass}--is-disabled`,
-        direction && `${baseClass}--${direction}`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("button", { className: classes, onClick: !isDisabled ? updatePage : undefined, type: "button" },
-        React.createElement(Chevron, null)));
-};
-export default ClickableArrow;

package/dist/admin/components/elements/Paginator/ClickableArrow/index.scss

@@ -1,18 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-.clickable-arrow {
-  cursor: pointer;
-  transform: rotate(-90deg);
-
-  &--left {
-    transform: rotate(90deg);
-  }
-
-  &--is-disabled {
-    cursor: default;
-
-    .icon .stroke{
-      stroke: $color-gray;
-    }
-  }
-}

package/dist/admin/components/elements/Paginator/ClickableArrow/types.d.ts

@@ -1,5 +0,0 @@
-export declare type Props = {
-    updatePage?: () => void;
-    isDisabled?: boolean;
-    direction?: 'right' | 'left';
-};

package/dist/admin/components/elements/Paginator/ClickableArrow/types.js

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

package/dist/admin/components/elements/Paginator/Page/index.d.ts

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

package/dist/admin/components/elements/Paginator/Page/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-const baseClass = 'paginator__page';
-const Page = ({ page = 1, isCurrent, updatePage, isFirstPage = false, isLastPage = false, }) => {
-    const classes = [
-        baseClass,
-        isCurrent && `${baseClass}--is-current`,
-        isFirstPage && `${baseClass}--is-first-page`,
-        isLastPage && `${baseClass}--is-last-page`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("button", { className: classes, onClick: () => updatePage(page), type: "button" }, page));
-};
-export default Page;

package/dist/admin/components/elements/Paginator/Page/types.d.ts

@@ -1,7 +0,0 @@
-export declare type Props = {
-    page?: number;
-    isCurrent?: boolean;
-    updatePage?: (page: any) => void;
-    isFirstPage?: boolean;
-    isLastPage?: boolean;
-};

package/dist/admin/components/elements/Paginator/Page/types.js

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

package/dist/admin/components/elements/Paginator/Separator/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Separator: React.FC;
-export default Separator;

package/dist/admin/components/elements/Paginator/Separator/index.js

@@ -1,3 +0,0 @@
-import React from 'react';
-const Separator = () => React.createElement("span", { className: "paginator__separator" }, "\u2014");
-export default Separator;

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

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

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import queryString from 'qs';
-import Page from './Page';
-import Separator from './Separator';
-import ClickableArrow from './ClickableArrow';
-import { useSearchParams } from '../../utilities/SearchParams';
-import './index.scss';
-const nodeTypes = {
-    Page,
-    Separator,
-    ClickableArrow,
-};
-const baseClass = 'paginator';
-const Pagination = (props) => {
-    const history = useHistory();
-    const params = useSearchParams();
-    const { totalPages = null, page: currentPage, hasPrevPage = false, hasNextPage = false, prevPage = null, nextPage = null, numberOfNeighbors = 1, disableHistoryChange = false, onChange, } = props;
-    if (!totalPages || totalPages <= 1)
-        return null;
-    // uses react router to set the current page
-    const updatePage = (page) => {
-        if (!disableHistoryChange) {
-            const newParams = {
-                ...params,
-            };
-            newParams.page = page;
-            history.push({ search: queryString.stringify(newParams, { addQueryPrefix: true }) });
-        }
-        if (typeof onChange === 'function')
-            onChange(page);
-    };
-    // Create array of integers for each page
-    const pages = Array.from({ length: totalPages }, (_, index) => index + 1);
-    // Assign indices for start and end of the range of pages that should be shown in paginator
-    let rangeStartIndex = (currentPage - 1) - numberOfNeighbors;
-    // Sanitize rangeStartIndex in case it is less than zero for safe split
-    if (rangeStartIndex <= 0)
-        rangeStartIndex = 0;
-    const rangeEndIndex = (currentPage - 1) + numberOfNeighbors + 1;
-    // Slice out the range of pages that we want to render
-    const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
-    // Add prev separator if necessary
-    if (currentPage - numberOfNeighbors - 1 >= 2)
-        nodes.unshift({ type: 'Separator' });
-    // Add first page if necessary
-    if (currentPage > numberOfNeighbors + 1) {
-        nodes.unshift({
-            type: 'Page',
-            props: {
-                page: 1,
-                updatePage,
-                isFirstPage: true,
-            },
-        });
-    }
-    // Add next separator if necessary
-    if (currentPage + numberOfNeighbors + 1 < totalPages)
-        nodes.push({ type: 'Separator' });
-    // Add last page if necessary
-    if (rangeEndIndex < totalPages) {
-        nodes.push({
-            type: 'Page',
-            props: {
-                page: totalPages,
-                updatePage,
-                isLastPage: true,
-            },
-        });
-    }
-    // Add prev and next arrows based on necessity
-    nodes.push({
-        type: 'ClickableArrow',
-        props: {
-            updatePage: () => updatePage(prevPage),
-            isDisabled: !hasPrevPage,
-            direction: 'left',
-        },
-    });
-    nodes.push({
-        type: 'ClickableArrow',
-        props: {
-            updatePage: () => updatePage(nextPage),
-            isDisabled: !hasNextPage,
-            direction: 'right',
-        },
-    });
-    return (React.createElement("div", { className: baseClass }, nodes.map((node, i) => {
-        if (typeof node === 'number') {
-            return (React.createElement(Page, { key: i, page: node, updatePage: updatePage, isCurrent: currentPage === node }));
-        }
-        const NodeType = nodeTypes[node.type];
-        return (React.createElement(NodeType, { key: i, ...node.props }));
-    })));
-};
-export default Pagination;

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

@@ -1,48 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.paginator {
-  display: flex;
-  margin-bottom: $baseline;
-
-  &__page {
-    cursor: pointer;
-
-    &--is-current {
-      background: $color-background-gray;
-      color: $color-gray;
-      cursor: default;
-    }
-
-    &--is-last-page {
-      margin-right: 0;
-    }
-  }
-
-  .clickable-arrow,
-  &__page {
-    @extend %btn-reset;
-    width: base(2);
-    height: base(2);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    outline: 0;
-    padding: base(.5);
-    color: $color-dark-gray;
-    line-height: base(1);
-
-    &:hover:not(.clickable-arrow--is-disabled) {
-      background: $color-background-gray;
-    }
-  }
-
-  &__page,
-  &__separator {
-    margin-right: base(.25);
-  }
-
-  &__separator {
-    align-self: center;
-    color: $color-gray;
-  }
-}

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

@@ -1,23 +0,0 @@
-export declare type Props = {
-    limit?: number;
-    totalPages?: number;
-    page?: number;
-    hasPrevPage?: boolean;
-    hasNextPage?: boolean;
-    prevPage?: number;
-    nextPage?: number;
-    numberOfNeighbors?: number;
-    disableHistoryChange?: boolean;
-    onChange?: (page: number) => void;
-};
-export declare type Node = {
-    type: 'Page' | 'Separator' | 'ClickableArrow';
-    props?: {
-        page?: number;
-        updatePage: (page?: number) => void;
-        isFirstPage?: boolean;
-        isLastPage?: boolean;
-        isDisabled?: boolean;
-        direction?: 'right' | 'left';
-    };
-} | number;

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

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

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import './index.scss';
-declare type Props = {
-    limits: number[];
-    limit: number;
-    handleChange?: (limit: number) => void;
-    modifySearchParams?: boolean;
-};
-declare const PerPage: React.FC<Props>;
-export default PerPage;

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

@@ -1,40 +0,0 @@
-import React from 'react';
-import qs from 'qs';
-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 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 },
-        React.createElement(Popup, { color: "dark", horizontalAlign: "right", button: (React.createElement("strong", null,
-                "Per Page:",
-                ' ',
-                limit,
-                React.createElement(Chevron, null))), render: ({ close }) => (React.createElement("div", null,
-                React.createElement("ul", null, limits.map((limitNumber, i) => (React.createElement("li", { className: `${baseClass}-item`, key: i },
-                    React.createElement("button", { type: "button", className: [
-                            `${baseClass}__button`,
-                            limitNumber === Number(limit) && `${baseClass}__button-active`,
-                        ].filter(Boolean).join(' '), onClick: () => {
-                            close();
-                            if (handleChange)
-                                handleChange(limitNumber);
-                            if (modifySearchParams) {
-                                history.replace({
-                                    search: qs.stringify({
-                                        ...params,
-                                        limit: limitNumber,
-                                    }, { addQueryPrefix: true }),
-                                });
-                            }
-                        } },
-                        limitNumber === Number(limit) && (React.createElement(Chevron, null)),
-                        limitNumber))))))) })));
-};
-export default PerPage;

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

@@ -1,38 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.per-page {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .popup-button--default {
-    @extend %btn-reset;
-    position: relative;
-    cursor: pointer;
-  }
-
-  &__button {
-    @extend %btn-reset;
-    color: white;
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &__button-active {
-    font-weight: bold;
-
-    svg {
-      @include color-svg(white);
-      margin-left: base(-.25);
-      margin-right: base(-.125);
-      transform: rotate(-90deg);
-    }
-  }
-}

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

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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import './index.scss';
-const baseClass = 'pill';
-const Pill = ({ children, className, to, icon, alignIcon = 'right', onClick, pillStyle = 'light', }) => {
-    const classes = [
-        baseClass,
-        `${baseClass}--style-${pillStyle}`,
-        className && className,
-        to && `${baseClass}--has-link`,
-        (to || onClick) && `${baseClass}--has-action`,
-        icon && `${baseClass}--has-icon`,
-        icon && `${baseClass}--align-icon-${alignIcon}`,
-    ].filter(Boolean).join(' ');
-    let RenderedType = 'div';
-    if (onClick && !to)
-        RenderedType = 'button';
-    if (to)
-        RenderedType = Link;
-    return (React.createElement(RenderedType, { className: classes, onClick: onClick, type: RenderedType === 'button' ? 'button' : undefined, to: to || undefined },
-        (icon && alignIcon === 'left') && (React.createElement(React.Fragment, null, icon)),
-        children,
-        (icon && alignIcon === 'right') && (React.createElement(React.Fragment, null, icon))));
-};
-export default Pill;

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

@@ -1,96 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.pill {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: $color-light-gray;
-  color: $color-dark-gray;
-  border-radius: $style-radius-s;
-  padding: 0 base(.25);
-  padding-left: base(.0875 + .25);
-  cursor: default;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  &--has-icon {
-    svg {
-      display: block;
-    }
-  }
-
-  &--align-icon-left {
-    padding-left: base(.125);
-  }
-
-  &--align-icon-right {
-    padding-right: base(.125);
-  }
-
-  &--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%);
-      }
-    }
-  }
-
-  &--style-light-gray {
-    background: $color-background-gray;
-    color: $color-dark-gray;
-  }
-
-  &--style-warning {
-    background: $color-yellow;
-  }
-
-  &--style-success {
-    background: $color-green;
-  }
-
-  &--style-dark {
-    background: $color-dark-gray;
-    color: white;
-
-    svg {
-      @include color-svg(white);
-    }
-
-    &.pill--has-action {
-      &:hover {
-        background: lighten($color-dark-gray, 3%);
-      }
-
-      &:active {
-        background: lighten($color-dark-gray, 5%);
-      }
-    }
-  }
-}

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

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export declare type Props = {
-    children?: React.ReactNode;
-    className?: string;
-    to?: string;
-    icon?: React.ReactNode;
-    alignIcon?: 'left' | 'right';
-    onClick?: () => void;
-    pillStyle?: 'white' | 'light' | 'dark' | 'light-gray' | 'warning' | 'success';
-};
-export declare type RenderedTypeProps = {
-    children: React.ReactNode;
-    className?: string;
-    to: string;
-    onClick?: () => void;
-    type?: 'button';
-};