payload 1.0.27 → 1.0.30

package/docs/plugins/overview.mdx

@@ -83,11 +83,10 @@ After all plugins are executed, the full config with all plugins will be sanitiz
 
 Here is an example for how to automatically add a `lastModifiedBy` field to all Payload collections using a Plugin written in TypeScript.
 
-```js
-import { Config } from 'payload/config';
-import { CollectionConfig } from 'payload/dist/collections/config/types';
+```ts
+import { Config, Plugin } from 'payload/config';
 
-const addLastModified = (incomingConfig: Config): Config => {
+const addLastModified: Plugin = (incomingConfig: Config): Config => {
   // Find all incoming auth-enabled collections
   // so we can create a lastModifiedBy relationship field
   // to all auth collections

package/docs/production/deployment.mdx

@@ -37,7 +37,7 @@ Because _**you**_ are in complete control of who can do what with your data, you
 Before running in Production, you need to have built a production-ready copy of the Payload Admin panel. To do this, Payload provides the `build` NPM script. You can use it by adding a `script` to your `package.json` file like this:
 
 `package.json`:
-```js
+```json
 {
   "name": "project-name-here",
   "scripts": {

package/docs/queries/overview.mdx

@@ -16,8 +16,10 @@ Payload provides an extremely granular querying language through all APIs. Each
 
 For example, say you have a collection as follows:
 
-```js
-const Post = {
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Post: CollectionConfig = {
   slug: 'posts',
   fields: [
     {

package/docs/queries/pagination.mdx

@@ -24,7 +24,7 @@ All collection `find` queries are paginated automatically. Responses are returne
 | nextPage      | `number` of next page, `null` if it doesn't exist          |
 
 **Example response:**
-```js
+```json
 {
   // Document Array // highlight-line
   "docs": [

package/docs/rest-api/overview.mdx

@@ -89,9 +89,11 @@ Each endpoint object needs to have:
 
 Example:
 
-```js
+```ts
+import { CollectionConfig } from 'payload/types';
+
 // a collection of 'orders' with an additional route for tracking details, reachable at /api/orders/:id/tracking
-const Orders = {
+const Orders: CollectionConfig = {
 	slug: 'orders',
 	fields: [ /* ... */ ],
   // highlight-start

package/docs/upload/overview.mdx

@@ -55,38 +55,40 @@ _An asterisk denotes that a property above is required._
 
 **Example Upload collection:**
 
-```js
-const Media = {
-  slug: "media",
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Media: CollectionConfig = {
+  slug: 'media',
   upload: {
-    staticURL: "/media",
-    staticDir: "media",
+    staticURL: '/media',
+    staticDir: 'media',
     imageSizes: [
       {
-        name: "thumbnail",
+        name: 'thumbnail',
         width: 400,
         height: 300,
-        crop: "centre",
+        crop: 'centre',
       },
       {
-        name: "card",
+        name: 'card',
         width: 768,
         height: 1024,
-        crop: "centre",
+        crop: 'centre',
       },
       {
-        name: "tablet",
+        name: 'tablet',
         width: 1024,
         // By specifying `null` or leaving a height undefined,
         // the image will be sized to a certain width,
         // but it will retain its original aspect ratio
         // and calculate a height automatically.
         height: null,
-        crop: "centre",
+        crop: 'centre',
       },
     ],
-    adminThumbnail: "thumbnail",
-    mimeTypes: ["image/*"],
+    adminThumbnail: 'thumbnail',
+    mimeTypes: ['image/*'],
   },
 };
 ```
@@ -97,17 +99,17 @@ Payload relies on the [`express-fileupload`](https://www.npmjs.com/package/expre
 
 A common example of what you might want to customize within Payload-wide Upload options would be to increase the allowed `fileSize` of uploads sent to Payload:
 
-```js
-import { buildConfig } from "payload/config";
+```ts
+import { buildConfig } from 'payload/config';
 
 export default buildConfig({
   collections: [
     {
-      slug: "media",
+      slug: 'media',
       fields: [
         {
-          name: "alt",
-          type: "text",
+          name: 'alt',
+          type: 'text',
         },
       ],
       upload: true,
@@ -158,12 +160,14 @@ You can specify how Payload retrieves admin thumbnails for your upload-enabled C
 
 **Example custom Admin thumbnail:**
 
-```js
-const Media = {
-  slug: "media",
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Media: CollectionConfig = {
+  slug: 'media',
   upload: {
-    staticURL: "/media",
-    staticDir: "media",
+    staticURL: '/media',
+    staticDir: 'media',
     imageSizes: [
       // ... image sizes here
     ],
@@ -191,13 +195,15 @@ Some example values are: `image/*`, `audio/*`, `video/*`, `image/png`, `applicat
 
 **Example mimeTypes usage:**
 
-```js
-const Media = {
-  slug: "media",
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Media: CollectionConfig = {
+  slug: 'media',
   upload: {
-    staticURL: "/media",
-    staticDir: "media",
-    mimeTypes: ["image/*", "application/pdf"], // highlight-line
+    staticURL: '/media',
+    staticDir: 'media',
+    mimeTypes: ['image/*', 'application/pdf'], // highlight-line
   },
 };
 ```

package/docs/versions/autosave.mdx

@@ -25,8 +25,10 @@ Collections and Globals both support the same options for configuring autosave.
 
 **Example config with versions, drafts, and autosave enabled:**
 
-```js
-const Pages = {
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {

package/docs/versions/drafts.mdx

@@ -81,8 +81,10 @@ You can use the `read` [Access Control](/docs/access-control/collections#read) m
 
 Here is an example that utilizes the `_status` field to require a user to be logged in to retrieve drafts:
 
-```js
-const Pages = {
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {
@@ -114,8 +116,10 @@ const Pages = {
 
 Here is an example for how to write an access control function that grants access to both documents where `_status` is equal to "published" and where `_status` does not exist:
 
-```js
-const Pages = {
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {

package/docs/versions/overview.mdx

@@ -77,7 +77,7 @@ _slug_versions
 
 Each document in this new `versions` collection will store a set of meta properties about the version as well as a _full_ copy of the document. For example, a version's data might look like this for a Collection document:
 
-```js
+```json
 {
   "_id": "61cf752c19cdf1b1af7b61f1", // a unique ID of this version
   "parent": "61ce1354091d5b3ffc20ea6e", // the ID of the parent document

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "author": {

package/types.d.ts

@@ -34,4 +34,25 @@ export {
   RichTextCustomElement,
   RichTextCustomLeaf,
   Block,
+  TextField,
+  NumberField,
+  EmailField,
+  TextareaField,
+  CheckboxField,
+  DateField,
+  BlockField,
+  GroupField,
+  RadioField,
+  RelationshipField,
+  ArrayField,
+  RichTextField,
+  SelectField,
+  UploadField,
+  CodeField,
+  PointField,
+  RowField,
+  CollapsibleField,
+  TabsField,
+  UIField,
+  Validate,
 } from './dist/fields/config/types';

package/dist/admin/components/forms/field-types/Array/Array.d.ts

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

package/dist/admin/components/forms/field-types/Array/Array.js

@@ -1,201 +0,0 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { useAuth } from '../../../utilities/Auth';
-import withCondition from '../../withCondition';
-import Button from '../../../elements/Button';
-import reducer from '../rowReducer';
-import { useForm } from '../../Form/context';
-import buildStateFromSchema from '../../Form/buildStateFromSchema';
-import useField from '../../useField';
-import { useLocale } from '../../../utilities/Locale';
-import Error from '../../Error';
-import { array } from '../../../../../fields/validations';
-import Banner from '../../../elements/Banner';
-import FieldDescription from '../../FieldDescription';
-import { useDocumentInfo } from '../../../utilities/DocumentInfo';
-import { useOperation } from '../../../utilities/OperationProvider';
-import { Collapsible } from '../../../elements/Collapsible';
-import RenderFields from '../../RenderFields';
-import { fieldAffectsData } from '../../../../../fields/config/types';
-import { usePreferences } from '../../../utilities/Preferences';
-import { ArrayAction } from '../../../elements/ArrayAction';
-import { scrollToID } from '../../../../utilities/scrollToID';
-import HiddenInput from '../HiddenInput';
-import './index.scss';
-const baseClass = 'array-field';
-const ArrayFieldType = (props) => {
-    var _a, _b;
-    const { name, path: pathFromProps, fields, fieldTypes, validate = array, required, maxRows, minRows, permissions, admin: { readOnly, description, condition, className, }, } = props;
-    const path = pathFromProps || name;
-    // Handle labeling for Arrays, Global Arrays, and Blocks
-    const getLabels = (p) => {
-        if (p === null || p === void 0 ? void 0 : p.labels)
-            return p.labels;
-        if (p === null || p === void 0 ? void 0 : p.label)
-            return { singular: p.label, plural: undefined };
-        return { singular: 'Row', plural: 'Rows' };
-    };
-    const labels = getLabels(props);
-    // eslint-disable-next-line react/destructuring-assignment
-    const label = (_a = props === null || props === void 0 ? void 0 : props.label) !== null && _a !== void 0 ? _a : (_b = props === null || props === void 0 ? void 0 : props.labels) === null || _b === void 0 ? void 0 : _b.singular;
-    const { preferencesKey } = useDocumentInfo();
-    const { getPreference } = usePreferences();
-    const { setPreference } = usePreferences();
-    const [rows, dispatchRows] = useReducer(reducer, undefined);
-    const formContext = useForm();
-    const { user } = useAuth();
-    const { id } = useDocumentInfo();
-    const locale = useLocale();
-    const operation = useOperation();
-    const { dispatchFields } = formContext;
-    const memoizedValidate = useCallback((value, options) => {
-        return validate(value, { ...options, minRows, maxRows, required });
-    }, [maxRows, minRows, required, validate]);
-    const [disableFormData, setDisableFormData] = useState(false);
-    const { showError, errorMessage, value, setValue, } = useField({
-        path,
-        validate: memoizedValidate,
-        disableFormData,
-        condition,
-    });
-    const addRow = useCallback(async (rowIndex) => {
-        const subFieldState = await buildStateFromSchema({ fieldSchema: fields, operation, id, user, locale });
-        dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path });
-        dispatchRows({ type: 'ADD', rowIndex });
-        setValue(value + 1);
-        setTimeout(() => {
-            scrollToID(`${path}-row-${rowIndex + 1}`);
-        }, 0);
-    }, [dispatchRows, dispatchFields, fields, path, setValue, value, operation, id, user, locale]);
-    const duplicateRow = useCallback(async (rowIndex) => {
-        dispatchFields({ type: 'DUPLICATE_ROW', rowIndex, path });
-        dispatchRows({ type: 'ADD', rowIndex });
-        setValue(value + 1);
-        setTimeout(() => {
-            scrollToID(`${path}-row-${rowIndex + 1}`);
-        }, 0);
-    }, [dispatchRows, dispatchFields, path, setValue, value]);
-    const removeRow = useCallback((rowIndex) => {
-        dispatchRows({ type: 'REMOVE', rowIndex });
-        dispatchFields({ type: 'REMOVE_ROW', rowIndex, path });
-        setValue(value - 1);
-    }, [dispatchRows, dispatchFields, path, value, setValue]);
-    const moveRow = useCallback((moveFromIndex, moveToIndex) => {
-        dispatchRows({ type: 'MOVE', moveFromIndex, moveToIndex });
-        dispatchFields({ type: 'MOVE_ROW', moveFromIndex, moveToIndex, path });
-    }, [dispatchRows, dispatchFields, path]);
-    const onDragEnd = useCallback((result) => {
-        if (!result.destination)
-            return;
-        const sourceIndex = result.source.index;
-        const destinationIndex = result.destination.index;
-        moveRow(sourceIndex, destinationIndex);
-    }, [moveRow]);
-    const setCollapse = useCallback(async (rowID, collapsed) => {
-        var _a, _b, _c;
-        dispatchRows({ type: 'SET_COLLAPSE', id: rowID, collapsed });
-        if (preferencesKey) {
-            const preferencesToSet = await getPreference(preferencesKey) || { fields: {} };
-            let newCollapsedState = ((_b = (_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed.filter((filterID) => (rows.find((row) => row.id === filterID))))
-                || [];
-            if (!collapsed) {
-                newCollapsedState = newCollapsedState.filter((existingID) => existingID !== rowID);
-            }
-            else {
-                newCollapsedState.push(rowID);
-            }
-            setPreference(preferencesKey, {
-                ...preferencesToSet,
-                fields: {
-                    ...(preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {},
-                    [path]: {
-                        ...(_c = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _c === void 0 ? void 0 : _c[path],
-                        collapsed: newCollapsedState,
-                    },
-                },
-            });
-        }
-    }, [preferencesKey, path, setPreference, rows, getPreference]);
-    const toggleCollapseAll = useCallback(async (collapse) => {
-        var _a;
-        dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
-        if (preferencesKey) {
-            const preferencesToSet = await getPreference(preferencesKey) || { fields: {} };
-            setPreference(preferencesKey, {
-                ...preferencesToSet,
-                fields: {
-                    ...(preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {},
-                    [path]: {
-                        ...(_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path],
-                        collapsed: collapse ? rows.map(({ id: rowID }) => rowID) : [],
-                    },
-                },
-            });
-        }
-    }, [path, getPreference, preferencesKey, rows, setPreference]);
-    useEffect(() => {
-        const initializeRowState = async () => {
-            var _a, _b;
-            const data = formContext.getDataByPath(path);
-            const preferences = await getPreference(preferencesKey) || { fields: {} };
-            dispatchRows({ type: 'SET_ALL', data: data || [], collapsedState: (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed });
-        };
-        initializeRowState();
-    }, [formContext, path, getPreference, preferencesKey]);
-    useEffect(() => {
-        setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
-        if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
-            setDisableFormData(false);
-        }
-        else {
-            setDisableFormData(true);
-        }
-    }, [rows, setValue]);
-    const hasMaxRows = maxRows && (rows === null || rows === void 0 ? void 0 : rows.length) >= maxRows;
-    const classes = [
-        'field-type',
-        baseClass,
-        className,
-    ].filter(Boolean).join(' ');
-    if (!rows)
-        return null;
-    return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes },
-            React.createElement("div", { className: `${baseClass}__error-wrap` },
-                React.createElement(Error, { showError: showError, message: errorMessage })),
-            React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("div", { className: `${baseClass}__header-wrap` },
-                    React.createElement("h3", null, label),
-                    React.createElement("ul", { className: `${baseClass}__header-actions` },
-                        React.createElement("li", null,
-                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(true), className: `${baseClass}__header-action` }, "Collapse All")),
-                        React.createElement("li", null,
-                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(false), className: `${baseClass}__header-action` }, "Show All")))),
-                React.createElement(FieldDescription, { value: value, description: description })),
-            React.createElement(Droppable, { droppableId: "array-drop" }, (provided) => (React.createElement("div", { ref: provided.innerRef, ...provided.droppableProps },
-                rows.length > 0 && rows.map((row, i) => {
-                    const rowNumber = i + 1;
-                    return (React.createElement(Draggable, { key: row.id, draggableId: row.id, index: i, isDragDisabled: readOnly }, (providedDrag) => (React.createElement("div", { id: `${path}-row-${i}`, ref: providedDrag.innerRef, ...providedDrag.draggableProps },
-                        React.createElement(Collapsible, { collapsed: row.collapsed, onToggle: (collapsed) => setCollapse(row.id, collapsed), className: `${baseClass}__row`, key: row.id, dragHandleProps: providedDrag.dragHandleProps, header: `${labels.singular} ${rowNumber >= 10 ? rowNumber : `0${rowNumber}`}`, actions: !readOnly ? (React.createElement(ArrayAction, { rowCount: rows.length, duplicateRow: duplicateRow, addRow: addRow, moveRow: moveRow, removeRow: removeRow, index: i })) : undefined },
-                            React.createElement(HiddenInput, { name: `${path}.${i}.id`, value: row.id }),
-                            React.createElement(RenderFields, { className: `${baseClass}__fields`, forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldSchema: fields.map((field) => ({
-                                    ...field,
-                                    path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
-                                })) }))))));
-                }),
-                (rows.length < minRows || (required && rows.length === 0)) && (React.createElement(Banner, { type: "error" },
-                    "This field requires at least",
-                    ' ',
-                    minRows
-                        ? `${minRows} ${labels.plural}`
-                        : `1 ${labels.singular}`)),
-                (rows.length === 0 && readOnly) && (React.createElement(Banner, null,
-                    "This field has no",
-                    ' ',
-                    labels.plural,
-                    ".")),
-                provided.placeholder))),
-            (!readOnly && !hasMaxRows) && (React.createElement("div", { className: `${baseClass}__add-button-wrap` },
-                React.createElement(Button, { onClick: () => addRow(value), buttonStyle: "icon-label", icon: "plus", iconStyle: "with-border", iconPosition: "left" }, `Add ${labels.singular}`))))));
-};
-export default withCondition(ArrayFieldType);

package/dist/admin/components/forms/field-types/Blocks/Blocks.d.ts

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