payload 1.15.11 → 1.15.12

package/src/admin/hooks/useHotkey.tsx

@@ -1,131 +0,0 @@
-/* eslint-disable no-shadow */
-import { useCallback, useEffect } from 'react';
-import { useModal } from '@faceless-ui/modal';
-import { setsAreEqual } from '../utilities/setsAreEqual';
-
-// Required to be outside of hook, else debounce would be necessary
-// and then one could not prevent the default behaviour.
-// It maps the pressed keys with the time they were pressed, in order to implement a maximum time
-// for the user to press the next key in the sequence
-
-// This is necessary to prevent a bug where the keyup event, which unsets the key as pressed
-// is not fired when the window is not focused.
-// When the user then comes back to the window, the key is still registered as pressed, even though it's not.
-const pressedKeys = new Map<string, number>([]);
-
-const map = {
-  metaleft: 'meta',
-  metaright: 'meta',
-  osleft: 'meta',
-  osright: 'meta',
-  shiftleft: 'shift',
-  shiftright: 'shift',
-  ctrlleft: 'ctrl',
-  ctrlright: 'ctrl',
-  controlleft: 'ctrl',
-  controlright: 'ctrl',
-  altleft: 'alt',
-  altright: 'alt',
-  escape: 'esc',
-};
-
-const stripKey = (key: string) => {
-  return (map[key.toLowerCase()] || key).trim()
-    .toLowerCase()
-    .replace('key', '');
-};
-
-const pushToKeys = (code: string) => {
-  const key = stripKey(code);
-
-  // There is a weird bug with macos that if the keys are not cleared they remain in the
-  // pressed keys set.
-  if (key === 'meta') {
-    pressedKeys.forEach((time, pressedKey) => pressedKey !== 'meta' && pressedKeys.delete(pressedKey));
-  }
-
-  pressedKeys.set(key, Date.now());
-};
-
-const removeFromKeys = (code: string) => {
-  const key = stripKey(code);
-  // There is a weird bug with macos that if the keys are not cleared they remain in the
-  // pressed keys set.
-  if (key === 'meta') {
-    pressedKeys.clear();
-  }
-  pressedKeys.delete(key);
-};
-
-/**
- * Hook function to work with hotkeys.
- * @param param0.keyCode {string[]} The keys to listen for (`Event.code` without `'Key'` and lowercased)
- * @param param0.cmdCtrlKey {boolean} Whether Ctrl on windows or Cmd on mac must be pressed
- * @param param0.editDepth {boolean} This ensures that the hotkey is only triggered for the most top-level drawer in case there are nested drawers
- * @param func The callback function
- */
-const useHotkey = (options: {
-  keyCodes: string[]
-  cmdCtrlKey: boolean
-  editDepth: number
-}, func: (e: KeyboardEvent) => void): void => {
-  const { keyCodes, cmdCtrlKey, editDepth } = options;
-
-  const { modalState } = useModal();
-
-
-  const keydown = useCallback((event: KeyboardEvent | CustomEvent) => {
-    const e: KeyboardEvent = event.detail?.key ? event.detail : event;
-    if (e.key === undefined) {
-      // Autofill events, or other synthetic events, can be ignored
-      return;
-    }
-
-    // Filter out pressed keys which have been pressed > 3 seconds ago
-    pressedKeys.forEach((time, key) => {
-      if (Date.now() - time > 3000) {
-        pressedKeys.delete(key);
-      }
-    });
-
-    if (e.code) pushToKeys(e.code);
-
-    // Check for Mac and iPad
-    const hasCmd = window.navigator.userAgent.includes('Mac OS X');
-    const pressedWithoutModifier = [...pressedKeys.keys()].filter((key) => !['meta', 'ctrl', 'alt', 'shift'].includes(key));
-
-    // Check whether arrays contain the same values (regardless of number of occurrences)
-    if (
-      setsAreEqual(new Set(pressedWithoutModifier), new Set(keyCodes))
-      && (!cmdCtrlKey || (hasCmd && pressedKeys.has('meta')) || (!hasCmd && e.ctrlKey))
-    ) {
-      // get the maximum edit depth by counting the number of open drawers. modalState is and object which contains the state of all drawers.
-      const maxEditDepth = Object.keys(modalState).filter((key) => modalState[key]?.isOpen)?.length + 1 ?? 1;
-
-      if (maxEditDepth !== editDepth) {
-        // We only want to execute the hotkey from the most top-level drawer / edit depth.
-        return;
-      }
-      // execute the function associated with the maximum edit depth
-      func(e);
-    }
-  }, [keyCodes, cmdCtrlKey, editDepth, modalState, func]);
-
-  const keyup = useCallback((e: KeyboardEvent) => {
-    if (e.code) removeFromKeys(e.code);
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('keydown', keydown, false);
-    document.addEventListener('bypassKeyDown', keydown, false); // this is called if the keydown event's propagation is stopped by react-select
-    document.addEventListener('keyup', keyup, false);
-
-    return () => {
-      document.removeEventListener('keydown', keydown);
-      document.removeEventListener('bypassKeyDown', keydown);
-      document.removeEventListener('keyup', keyup);
-    };
-  }, [keydown, keyup]);
-};
-
-export default useHotkey;

package/src/admin/hooks/useIntersect.tsx

@@ -1,40 +0,0 @@
-/* eslint-disable no-shadow */
-import { useEffect, useRef, useState } from 'react';
-
-type Intersect = [
-  setNode: React.Dispatch<Element>,
-  entry: IntersectionObserverEntry
-]
-
-const useIntersect = ({
-  root = null,
-  rootMargin = '0px',
-  threshold = 0,
-} = {}): Intersect => {
-  const [entry, updateEntry] = useState<IntersectionObserverEntry>();
-  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/src/admin/hooks/useMountEffect.tsx

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

package/src/admin/hooks/usePayloadAPI.tsx

@@ -1,90 +0,0 @@
-import { useState, useEffect } from 'react';
-import queryString from 'qs';
-import { useTranslation } from 'react-i18next';
-import { useLocale } from '../components/utilities/Locale';
-import { requests } from '../api';
-
-type Result = [
-  {
-    isLoading: boolean
-    isError: boolean
-    data: any
-  },
-  {
-    setParams: React.Dispatch<unknown>
-  }
-]
-
-type Options = {
-  initialParams?: unknown
-  initialData?: any
-}
-
-type UsePayloadAPI = (url: string, options?: Options) => Result;
-
-const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
-  const {
-    initialParams = {},
-    initialData = {},
-  } = options;
-
-  const { i18n } = useTranslation();
-  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 : {}),
-  }, {
-    addQueryPrefix: true,
-  });
-
-  useEffect(() => {
-    const abortController = new AbortController();
-
-    const fetchData = async () => {
-      setIsError(false);
-      setIsLoading(true);
-
-      try {
-        const response = await requests.get(`${url}${search}`, {
-          signal: abortController.signal,
-          headers: {
-            'Accept-Language': i18n.language,
-          },
-        });
-
-        if (response.status > 201) {
-          setIsError(true);
-        }
-
-        const json = await response.json();
-        setData(json);
-        setIsLoading(false);
-      } catch (error) {
-        if (!abortController.signal.aborted) {
-          setIsError(true);
-          setIsLoading(false);
-        }
-      }
-    };
-
-    if (url) {
-      fetchData();
-    } else {
-      setIsError(false);
-      setIsLoading(false);
-    }
-
-    return () => {
-      abortController.abort();
-    };
-  }, [url, locale, search, i18n.language]);
-
-  return [{ data, isLoading, isError }, { setParams }];
-};
-
-export default usePayloadAPI;

package/src/admin/hooks/useThrottledEffect.tsx

@@ -1,26 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef } from 'react';
-
-type useThrottledEffect = (callback: React.EffectCallback, delay: number, deps: React.DependencyList) => void;
-
-const useThrottledEffect: 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/src/admin/hooks/useThumbnail.ts

@@ -1,61 +0,0 @@
-import { useConfig } from '../components/utilities/Config';
-import { SanitizedCollectionConfig } from '../../collections/config/types';
-import isImage from '../../uploads/isImage';
-
-const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i');
-const base64Pattern = new RegExp(/^data:image\/[a-z]+;base64,/);
-
-const useThumbnail = (collection: SanitizedCollectionConfig, doc: Record<string, unknown>): string | false => {
-  const {
-    upload: {
-      staticURL,
-      adminThumbnail,
-    },
-  } = collection;
-
-  const {
-    mimeType,
-    sizes,
-    filename,
-    url,
-  } = doc;
-
-  const { serverURL } = useConfig();
-  let pathURL = `${serverURL}${staticURL || ''}`;
-
-  if (absoluteURLPattern.test(staticURL)) {
-    pathURL = staticURL;
-  }
-
-  if (typeof adminThumbnail === 'function') {
-    const thumbnailURL = adminThumbnail({ doc });
-
-    if (!thumbnailURL) return false;
-
-    if (absoluteURLPattern.test(thumbnailURL) || base64Pattern.test(thumbnailURL)) {
-      return thumbnailURL;
-    }
-
-    return `${pathURL}/${thumbnailURL}`;
-  }
-
-  if (isImage(mimeType as string)) {
-    if (typeof adminThumbnail === 'undefined' && url) {
-      return url as string;
-    }
-
-    if (sizes?.[adminThumbnail]?.url) {
-      return sizes[adminThumbnail].url;
-    }
-
-    if (sizes?.[adminThumbnail]?.filename) {
-      return `${pathURL}/${sizes[adminThumbnail].filename}`;
-    }
-
-    return `${pathURL}/${filename}`;
-  }
-
-  return false;
-};
-
-export default useThumbnail;

package/src/admin/hooks/useTitle.tsx

@@ -1,62 +0,0 @@
-import i18next from 'i18next';
-import { useTranslation } from 'react-i18next';
-import { SanitizedConfig } from '../../config/types';
-import { SanitizedCollectionConfig } from '../../collections/config/types';
-import { useFormFields } from '../components/forms/Form/context';
-import { FormField } from '../components/forms/Form/types';
-import { useConfig } from '../components/utilities/Config';
-import { formatDate } from '../utilities/formatDate';
-import { getObjectDotNotation } from '../../utilities/getObjectDotNotation';
-
-// either send the `useAsTitle` field itself
-// or an object to dynamically extract the `useAsTitle` field from
-export const formatUseAsTitle = (args: {
-  field?: FormField
-  doc?: Record<string, any>
-  collection: SanitizedCollectionConfig
-  i18n: typeof i18next
-  config: SanitizedConfig
-}): string => {
-  const {
-    field: fieldFromProps,
-    doc,
-    collection,
-    collection: {
-      admin: { useAsTitle },
-    },
-    i18n,
-    config: {
-      admin: {
-        dateFormat: dateFormatFromConfig,
-      },
-    },
-  } = args;
-
-  if (!fieldFromProps && !doc) {
-    return '';
-  }
-
-  const field = fieldFromProps || getObjectDotNotation<FormField>(doc, collection.admin.useAsTitle);
-
-  let title = typeof field === 'string' ? field : field?.value as string;
-
-  const fieldConfig = collection?.fields?.find((f) => 'name' in f && f?.name === useAsTitle);
-  const isDate = fieldConfig?.type === 'date';
-
-  if (title && isDate) {
-    const dateFormat = fieldConfig?.admin?.date?.displayFormat || dateFormatFromConfig;
-    title = formatDate(title, dateFormat, i18n?.language);
-  }
-
-  return title;
-};
-
-const useTitle = (collection: SanitizedCollectionConfig): string => {
-  const { i18n } = useTranslation();
-  const field = useFormFields(([formFields]) => formFields[collection?.admin?.useAsTitle]);
-  const config = useConfig();
-
-  return formatUseAsTitle({ field, collection, i18n, config });
-};
-
-export default useTitle;

package/src/admin/index.html

@@ -1,15 +0,0 @@
-<!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" />
-  <link rel="icon" href="data:," data-placeholder-favicon />
-</head>
-
-<body>
-  <div id="app"></div>
-  <div id="portal"></div>
-</body>
-
-</html>

package/src/admin/index.tsx

@@ -1,14 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - need to do this because this file doesn't actually exist
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import Root from './Root';
-
-const container = document.getElementById('app');
-const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<Root />);
-
-// Needed for Hot Module Replacement
-if (typeof (module.hot) !== 'undefined') {
-  module.hot.accept();
-}

package/src/admin/scss/app.scss

@@ -1,197 +0,0 @@
-@import 'fonts';
-@import 'styles';
-@import './toastify.scss';
-@import './colors.scss';
-
-:root {
-  --base-px: 25;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
-
-  --breakpoint-xs-width : #{$breakpoint-xs-width};
-  --breakpoint-s-width : #{$breakpoint-s-width};
-  --breakpoint-m-width : #{$breakpoint-m-width};
-  --breakpoint-l-width : #{$breakpoint-l-width};
-  --scrollbar-width: 17px;
-  --nav-width: #{base(9)};
-
-  --theme-bg: var(--theme-elevation-0);
-  --theme-input-bg: var(--theme-elevation-0);
-  --theme-text: var(--theme-elevation-800);
-  --theme-baseline: #{$baseline-px};
-  --theme-baseline-body-size: #{$baseline-body-size};
-  --font-body: 'Suisse Intl', system-ui;
-  --font-mono: monospace;
-  --font-serif: 'Merriweather', serif;
-
-  --style-radius-s: #{$style-radius-s};
-  --style-radius-m: #{$style-radius-m};
-  --style-radius-l: #{$style-radius-l};
-
-  --z-popup: 10;
-  --z-nav: 20;
-  --z-modal: 30;
-  --z-status: 40;
-
-  --accessibility-outline: 2px solid var(--theme-text);
-  --accessibility-outline-offset: 2px;
-
-  --gutter-h: #{base(5)};
-
-  @include large-break {
-    --gutter-h: #{base(3)};
-    --nav-width: #{base(8)};
-  }
-
-  @include mid-break {
-    --gutter-h: #{base(2)};
-    --nav-width: 0px;
-  }
-
-  @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);
-    color-scheme: dark;
-
-    ::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;
-}
-
-:focus-visible {
-  outline: var(--accessibility-outline);
-}
-
-a {
-  color: currentColor;
-
-  &:focus {
-    &:not(:focus-visible) {
-      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: auto;
-}
-
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
-}
-
-@import '~payload-user-css';