payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/views/collections/List/types.d.ts

@@ -0,0 +1,24 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { PaginatedDocs } from '../../../../../mongoose/types';
+import { Column } from '../../../elements/Table/types';
+export declare type Props = {
+    collection: SanitizedCollectionConfig;
+    data: PaginatedDocs<any>;
+    newDocumentURL: string;
+    setListControls: (controls: unknown) => void;
+    setSort: (sort: string) => void;
+    tableColumns: Column[];
+    columnNames: string[];
+    setColumns: (columns: string[]) => void;
+    hasCreatePermission: boolean;
+    setLimit: (limit: number) => void;
+    limit: number;
+};
+export declare type ListIndexProps = {
+    collection: SanitizedCollectionConfig;
+};
+export declare type ListPreferences = {
+    columns: string[];
+    limit: number;
+    sort: number;
+};

package/dist/admin/components/views/collections/List/types.js

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

package/dist/admin/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export default function useDebounce<T = unknown>(value: T, delay: number): T;

package/dist/admin/hooks/useDebounce.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+// Our hook
+export default function useDebounce(value, delay) {
+    // State and setters for debounced value
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/admin/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
+ * @param func The function to be called
+ * @param wait Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+export declare const useDebouncedCallback: (func: any, wait: any) => (...args: any[]) => void;

package/dist/admin/hooks/useDebouncedCallback.js

@@ -0,0 +1,20 @@
+import { useRef, useCallback } from 'react';
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
+ * @param func The function to be called
+ * @param wait Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+export const useDebouncedCallback = (func, wait) => {
+    // Use a ref to store the timeout between renders
+    // and prevent changes to it from causing re-renders
+    const timeout = useRef();
+    return useCallback((...args) => {
+        const later = () => {
+            clearTimeout(timeout.current);
+            func(...args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(later, wait);
+    }, [func, wait]);
+};

package/dist/admin/hooks/useIntersect.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Intersect = [
+    setNode: React.Dispatch<Element>,
+    entry: IntersectionObserverEntry
+];
+declare const useIntersect: ({ root, rootMargin, threshold, }?: {
+    root?: any;
+    rootMargin?: string;
+    threshold?: number;
+}) => Intersect;
+export default useIntersect;

package/dist/admin/hooks/useIntersect.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-shadow */
+import { useEffect, useRef, useState } from 'react';
+const useIntersect = ({ root = null, rootMargin = '0px', threshold = 0, } = {}) => {
+    const [entry, updateEntry] = useState();
+    const [node, setNode] = useState(null);
+    const observer = useRef(new window.IntersectionObserver(([ent]) => updateEntry(ent), {
+        root,
+        rootMargin,
+        threshold,
+    }));
+    useEffect(() => {
+        const { current: currentObserver } = observer;
+        currentObserver.disconnect();
+        if (node)
+            currentObserver.observe(node);
+        return () => currentObserver.disconnect();
+    }, [node]);
+    return [setNode, entry];
+};
+export default useIntersect;

package/dist/admin/hooks/useMountEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useMountEffect: (func: () => void) => void;
+export default useMountEffect;

package/dist/admin/hooks/useMountEffect.js

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+const useMountEffect = (func) => useEffect(func, []);
+export default useMountEffect;

package/dist/admin/hooks/usePayloadAPI.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type Result = [
+    {
+        isLoading: boolean;
+        isError: boolean;
+        data: any;
+    },
+    {
+        setParams: React.Dispatch<unknown>;
+    }
+];
+declare type Options = {
+    initialParams?: unknown;
+    initialData?: any;
+};
+declare type UsePayloadAPI = (url: string, options?: Options) => Result;
+declare const usePayloadAPI: UsePayloadAPI;
+export default usePayloadAPI;

package/dist/admin/hooks/usePayloadAPI.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import queryString from 'qs';
+import { useLocale } from '../components/utilities/Locale';
+import { requests } from '../api';
+const usePayloadAPI = (url, options = {}) => {
+    const { initialParams = {}, initialData = {}, } = options;
+    const [data, setData] = useState(initialData);
+    const [params, setParams] = useState(initialParams);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isError, setIsError] = useState(false);
+    const locale = useLocale();
+    const search = queryString.stringify({
+        locale,
+        ...(typeof params === 'object' ? params : {}),
+    });
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsError(false);
+            setIsLoading(true);
+            try {
+                const response = await requests.get(`${url}?${search}`);
+                if (response.status > 201) {
+                    setIsError(true);
+                }
+                const json = await response.json();
+                setData(json);
+                setIsLoading(false);
+            }
+            catch (error) {
+                setIsError(true);
+                setIsLoading(false);
+            }
+        };
+        if (url) {
+            fetchData();
+        }
+        else {
+            setIsError(false);
+            setIsLoading(false);
+        }
+    }, [url, locale, search]);
+    return [{ data, isLoading, isError }, { setParams }];
+};
+export default usePayloadAPI;

package/dist/admin/hooks/useThrottledEffect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type useThrottledEffect = (callback: React.EffectCallback, delay: number, deps: React.DependencyList) => void;
+declare const useThrottledEffect: useThrottledEffect;
+export default useThrottledEffect;

package/dist/admin/hooks/useThrottledEffect.js

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from 'react';
+const useThrottledEffect = (callback, delay, deps = []) => {
+    const lastRan = useRef(Date.now());
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            if (Date.now() - lastRan.current >= delay) {
+                callback();
+                lastRan.current = Date.now();
+            }
+        }, delay - (Date.now() - lastRan.current));
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [delay, ...deps]);
+};
+export default useThrottledEffect;

package/dist/admin/hooks/useThumbnail.d.ts

@@ -0,0 +1,3 @@
+import { SanitizedCollectionConfig } from '../../collections/config/types';
+declare const useThumbnail: (collection: SanitizedCollectionConfig, doc: Record<string, unknown>) => string | false;
+export default useThumbnail;

package/dist/admin/hooks/useThumbnail.js

@@ -0,0 +1,27 @@
+import { useConfig } from '../components/utilities/Config';
+import isImage from '../../uploads/isImage';
+const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i');
+const useThumbnail = (collection, doc) => {
+    var _a, _b;
+    const { upload: { staticURL, adminThumbnail, }, } = collection;
+    const { mimeType, sizes, filename, } = doc;
+    const { serverURL } = useConfig();
+    if (isImage(mimeType)) {
+        if (typeof adminThumbnail === 'function') {
+            const thumbnailURL = adminThumbnail({ doc });
+            if (absoluteURLPattern.test(thumbnailURL)) {
+                return thumbnailURL;
+            }
+            return `${serverURL}${thumbnailURL}`;
+        }
+        if ((_a = sizes === null || sizes === void 0 ? void 0 : sizes[adminThumbnail]) === null || _a === void 0 ? void 0 : _a.url) {
+            return sizes[adminThumbnail].url;
+        }
+        if ((_b = sizes === null || sizes === void 0 ? void 0 : sizes[adminThumbnail]) === null || _b === void 0 ? void 0 : _b.filename) {
+            return `${serverURL}${staticURL}/${sizes[adminThumbnail].filename}`;
+        }
+        return `${serverURL}${staticURL}/${filename}`;
+    }
+    return false;
+};
+export default useThumbnail;

package/dist/admin/hooks/useTitle.d.ts

@@ -0,0 +1,2 @@
+declare const useTitle: (useAsTitle: string) => string;
+export default useTitle;

package/dist/admin/hooks/useTitle.js

@@ -0,0 +1,7 @@
+import { useWatchForm } from '../components/forms/Form/context';
+const useTitle = (useAsTitle) => {
+    const { getField } = useWatchForm();
+    const titleField = getField(useAsTitle);
+    return titleField === null || titleField === void 0 ? void 0 : titleField.value;
+};
+export default useTitle;

package/dist/admin/index.d.ts

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

package/dist/admin/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <div id="portal"></div>
+</body>
+
+</html>

package/dist/admin/index.js

@@ -0,0 +1,48 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - need to do this because this file doesn't actually exist
+import config from 'payload-config';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ScrollInfoProvider } from '@faceless-ui/scroll-info';
+import { WindowInfoProvider } from '@faceless-ui/window-info';
+import { ModalProvider, ModalContainer } from '@faceless-ui/modal';
+import { ToastContainer, Slide } from 'react-toastify';
+import { AuthProvider } from './components/utilities/Auth';
+import { ConfigProvider } from './components/utilities/Config';
+import { PreferencesProvider } from './components/utilities/Preferences';
+import { CustomProvider } from './components/utilities/CustomProvider';
+import { SearchParamsProvider } from './components/utilities/SearchParams';
+import { LocaleProvider } from './components/utilities/Locale';
+import Routes from './components/Routes';
+import { StepNavProvider } from './components/elements/StepNav';
+import { ThemeProvider } from './components/utilities/Theme';
+import './scss/app.scss';
+const Index = () => (React.createElement(React.Fragment, null,
+    React.createElement(ConfigProvider, { config: config },
+        React.createElement(WindowInfoProvider, { breakpoints: {
+                xs: '(max-width: 400px)',
+                s: '(max-width: 768px)',
+                m: '(max-width: 1024px)',
+                l: '(max-width: 1440px)',
+            } },
+            React.createElement(ScrollInfoProvider, null,
+                React.createElement(Router, null,
+                    React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 50 },
+                        React.createElement(AuthProvider, null,
+                            React.createElement(PreferencesProvider, null,
+                                React.createElement(ThemeProvider, null,
+                                    React.createElement(SearchParamsProvider, null,
+                                        React.createElement(LocaleProvider, null,
+                                            React.createElement(StepNavProvider, null,
+                                                React.createElement(CustomProvider, null,
+                                                    React.createElement(Routes, null)))))),
+                                React.createElement(ModalContainer, null)))))))),
+    React.createElement(ToastContainer, { position: "bottom-center", transition: Slide, icon: false })));
+const container = document.getElementById('app');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(React.createElement(Index, null));
+// Needed for Hot Module Replacement
+if (typeof (module.hot) !== 'undefined') {
+    module.hot.accept();
+}

package/dist/admin/scss/app.scss

@@ -0,0 +1,170 @@
+@import 'fonts';
+@import 'styles';
+@import './toastify.scss';
+@import './colors.scss';
+
+:root {
+  --breakpoint-xs-width : #{$breakpoint-xs-width};
+  --breakpoint-s-width : #{$breakpoint-s-width};
+  --breakpoint-m-width : #{$breakpoint-m-width};
+  --breakpoint-l-width : #{$breakpoint-l-width};
+  --z-modal: #{$z-modal};
+  --scrollbar-width: 17px;
+
+  --theme-bg: var(--theme-elevation-0);
+  --theme-input-bg: var(--theme-elevation-0);
+  --theme-text: var(--theme-elevation-800);
+  --font-body: 'Suisse Intl', system-ui;
+  --font-mono: monospace;
+  --font-serif: 'Merriweather', serif;
+
+  --gutter-h: #{base(5)};
+
+  @include large-break {
+    --gutter-h: #{base(3)};
+  }
+
+  @include mid-break {
+    --gutter-h: #{base(2)};
+  }
+
+  @include small-break {
+    --gutter-h: #{base(.5)};
+  }
+}
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  background: var(--theme-bg);
+  -webkit-font-smoothing: antialiased;
+
+  &[data-theme=dark] {
+    --theme-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-1000);
+    --theme-input-bg: var(--theme-elevation-50);
+
+    ::selection {
+      color: var(--color-base-1000);
+    }
+
+    ::-moz-selection {
+      color: var(--color-base-1000);
+    }
+  }
+
+  @include mid-break {
+    font-size: 12px;
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  color: var(--theme-text);
+  margin: 0;
+}
+
+::selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+::-moz-selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: 0 0 $baseline;
+}
+
+ul,
+ol {
+  padding-left: $baseline;
+  margin: 0 0 $baseline;
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: .8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: .7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+dialog {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+.payload__modal-item {
+  min-height: 100%;
+  background: transparent;
+}
+
+.payload__modal-container--enterDone {
+  overflow: scroll;
+}
+
+.payload__modal-item--enter,
+.payload__modal-item--enterDone {
+  z-index: $z-modal;
+}
+
+@import '~payload-user-css';