payload 1.11.8 → 1.12.0

package/dist/versions/types.d.ts

@@ -1,32 +1,32 @@
-export type Autosave = {
-    interval?: number;
-};
-export type IncomingDrafts = {
-    autosave?: boolean | Autosave;
-};
-export type SanitizedDrafts = {
-    autosave: false | Autosave;
-};
-export type IncomingCollectionVersions = {
-    maxPerDoc?: number;
-    drafts?: boolean | IncomingDrafts;
-};
-export interface SanitizedCollectionVersions extends Omit<IncomingCollectionVersions, 'drafts'> {
-    maxPerDoc?: number;
-    drafts: SanitizedDrafts | false;
-}
-export type IncomingGlobalVersions = {
-    max?: number;
-    drafts?: boolean | IncomingDrafts;
-};
-export type SanitizedGlobalVersions = {
-    max: number;
-    drafts: SanitizedDrafts | false;
-};
-export type TypeWithVersion<T> = {
-    id: string;
-    parent: string | number;
-    version: T;
-    createdAt: string;
-    updatedAt: string;
-};
+export type Autosave = {
+    interval?: number;
+};
+export type IncomingDrafts = {
+    autosave?: boolean | Autosave;
+};
+export type SanitizedDrafts = {
+    autosave: false | Autosave;
+};
+export type IncomingCollectionVersions = {
+    maxPerDoc?: number;
+    drafts?: boolean | IncomingDrafts;
+};
+export interface SanitizedCollectionVersions extends Omit<IncomingCollectionVersions, 'drafts'> {
+    maxPerDoc?: number;
+    drafts: SanitizedDrafts | false;
+}
+export type IncomingGlobalVersions = {
+    max?: number;
+    drafts?: boolean | IncomingDrafts;
+};
+export type SanitizedGlobalVersions = {
+    max: number;
+    drafts: SanitizedDrafts | false;
+};
+export type TypeWithVersion<T> = {
+    id: string;
+    parent: string | number;
+    version: T;
+    createdAt: string;
+    updatedAt: string;
+};

package/dist/versions/types.js

@@ -1,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

package/docs/admin/hooks.mdx

@@ -138,25 +138,487 @@ The `useForm` hook can be used to interact with the form itself, and sends back
   This hook is optimized to avoid causing rerenders when fields change, and as such, its `fields` property will be out of date. You should only leverage this hook if you need to perform actions against the form in response to your users' actions. Do not rely on its returned "fields" as being up-to-date. They will be removed from this hook's response in an upcoming version.
 </Banner>
 
-The `useForm` hook returns an object with the following properties:
-
-| Action               | Description                                                         |
-|----------------------|---------------------------------------------------------------------|
-| **`fields`**         | Deprecated. This property cannot be relied on as up-to-date.        |
-| **`submit`**         | Method to trigger the form to submit                                |
-| **`dispatchFields`** | Dispatch actions to the form field state                            |
-| **`validateForm`**   | Trigger a validation of the form state                              |
-| **`createFormData`** | Create a `multipart/form-data` object from the current form's state |
-| **`disabled`**       | Boolean denoting whether or not the form is disabled                |
-| **`getFields`**      | Gets all fields from state                                          |
-| **`getField`**       | Gets a single field from state by path                              |
-| **`getData`**        | Returns the data stored in the form                                 |
-| **`getSiblingData`** | Returns form sibling data for the given field path                  |
-| **`setModified`**    | Set the form's `modified` state                                     |
-| **`setProcessing`**  | Set the form's `processing` state                                   |
-| **`setSubmitted`**   | Set the form's `submitted` state                                    |
-| **`formRef`**        | The ref from the form HTML element                                  |
-| **`reset`**          | Method to reset the form to its initial state                       |
+The `useForm` hook returns an object with the following properties: |
+
+<TableWithDrawers
+  columns={[
+    'Action',
+    'Description',
+    'Example',
+  ]}
+  rows={[
+    [
+      {
+        value: <strong><code>fields</code></strong>,
+      },
+      {
+        value: "Deprecated. This property cannot be relied on as up-to-date.",
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>submit</code></strong>,
+      },
+      {
+        value: "Method to trigger the form to submit",
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>dispatchFields</code></strong>,
+      },
+      {
+        value: "Dispatch actions to the form field state",
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>validateForm</code></strong>,
+      },
+      {
+        value: "Trigger a validation of the form state",
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>createFormData</code></strong>,
+      },
+      {
+        value: <>Create a <code>multipart/form-data</code> object from the current form's state</>,
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>disabled</code></strong>,
+      },
+      {
+        value: "Boolean denoting whether or not the form is disabled",
+      },
+      {
+        value: ''
+      }
+    ],
+    [
+      {
+        value: <strong><code>getFields</code></strong>,
+      },
+      {
+        value: 'Gets all fields from state',
+      },
+      {
+        value: '',
+      }
+    ],
+    [
+      {
+        value: <strong><code>getField</code></strong>,
+      },
+      {
+        value: 'Gets a single field from state by path',
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>getData</code></strong>,
+      },
+      {
+        value: 'Returns the data stored in the form',
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>getSiblingData</code></strong>,
+      },
+      {
+        value: 'Returns form sibling data for the given field path',
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>setModified</code></strong>,
+      },
+      {
+        value: <>Set the form\'s <code>modified</code> state</>,
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>setProcessing</code></strong>,
+      },
+      {
+        value: <>Set the form\'s <code>processing</code> state</>,
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>setSubmitted</code></strong>,
+      },
+      {
+        value: <>Set the form\'s <code>submitted</code> state</>,
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>formRef</code></strong>,
+      },
+      {
+        value: 'The ref from the form HTML element',
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>reset</code></strong>,
+      },
+      {
+        value: 'Method to reset the form to its initial state',
+      },
+      {
+        value: '',
+      },
+    ],
+    [
+      {
+        value: <strong><code>addFieldRow</code></strong>,
+      },
+      {
+        value: "Method to add a row on an array or block field",
+      },
+      {
+        drawerTitle: 'addFieldRow',
+        drawerDescription: 'A useful method to programtically add a row to an array or block field.',
+        drawerSlug: 'addFieldRow',
+        drawerContent: (
+<>
+  <TableWithDrawers
+    columns={[
+      'Prop',
+      'Description',
+    ]}
+    rows={[
+      [
+        {
+          value: <strong><code>path</code></strong>,
+        },
+        {
+          value: "The path to the array or block field",
+        },
+      ],
+      [
+        {
+          value: <strong><code>rowIndex</code></strong>,
+        },
+        {
+          value: "The index of the row to add",
+        },
+      ],
+      [
+        {
+          value: <strong><code>data</code></strong>,
+        },
+        {
+          value: "The data to add to the row",
+        },
+      ],
+    ]}
+  />
+
+  <br />
+
+  <pre>
+{`import { useForm } from "payload/components/forms";
+
+export const CustomArrayManager = () => {
+  const { addFieldRow } = useForm()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        addFieldRow({
+          path: "arrayField",
+          rowIndex: 0,
+          data: {
+            textField: "text",
+            // blockType: "yourBlockSlug",
+            // ^ if managing a block array, you need to specify the block type
+          },
+        })
+      }}
+    >
+      Add Row
+    </button>
+  )
+}`}
+  </pre>
+
+  <p>An example config to go along with the custom component</p>
+  <pre>
+{`const ExampleCollection = {
+  slug: "example-collection",
+  fields: [
+    {
+      name: "arrayField",
+      type: "array",
+      fields: [
+        {
+          name: "textField",
+          type: "text",
+        },
+      ],
+    },
+    {
+      type: "ui",
+      name: "customArrayManager",
+      admin: {
+        components: {
+          Field: CustomArrayManager,
+        },
+      },
+    },
+  ],
+}`}
+  </pre>
+</>
+        )
+      }
+    ],
+    [
+      {
+        value: <strong><code>removeFieldRow</code></strong>,
+      },
+      {
+        value: "Method to remove a row from an array or block field",
+      },
+      {
+        drawerTitle: 'removeFieldRow',
+        drawerDescription: 'A useful method to programtically remove a row from an array or block field.',
+        drawerSlug: 'removeFieldRow',
+        drawerContent: (
+<>
+  <TableWithDrawers
+    columns={[
+      'Prop',
+      'Description',
+    ]}
+    rows={[
+      [
+        {
+          value: <strong><code>path</code></strong>,
+        },
+        {
+          value: "The path to the array or block field",
+        },
+      ],
+      [
+        {
+          value: <strong><code>rowIndex</code></strong>,
+        },
+        {
+          value: "The index of the row to remove",
+        },
+      ],
+    ]}
+  />
+
+  <br />
+
+  <pre>
+{`import { useForm } from "payload/components/forms";
+
+export const CustomArrayManager = () => {
+  const { removeFieldRow } = useForm()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        removeFieldRow({
+          path: "arrayField",
+          rowIndex: 0,
+        })
+      }}
+    >
+      Remove Row
+    </button>
+  )
+}`}
+  </pre>
+
+  <p>An example config to go along with the custom component</p>
+  <pre>
+{`const ExampleCollection = {
+  slug: "example-collection",
+  fields: [
+    {
+      name: "arrayField",
+      type: "array",
+      fields: [
+        {
+          name: "textField",
+          type: "text",
+        },
+      ],
+    },
+    {
+      type: "ui",
+      name: "customArrayManager",
+      admin: {
+        components: {
+          Field: CustomArrayManager,
+        },
+      },
+    },
+  ],
+}`}
+  </pre>
+</>
+        )
+      }
+    ],
+    [
+      {
+        value: <strong><code>replaceFieldRow</code></strong>,
+      },
+      {
+        value: "Method to replace a row from an array or block field",
+      },
+      {
+        drawerTitle: 'replaceFieldRow',
+        drawerDescription: 'A useful method to programtically replace a row from an array or block field.',
+        drawerSlug: 'replaceFieldRow',
+        drawerContent: (
+<>
+  <TableWithDrawers
+    columns={[
+      'Prop',
+      'Description',
+    ]}
+    rows={[
+      [
+        {
+          value: <strong><code>path</code></strong>,
+        },
+        {
+          value: "The path to the array or block field",
+        },
+      ],
+      [
+        {
+          value: <strong><code>rowIndex</code></strong>,
+        },
+        {
+          value: "The index of the row to replace",
+        },
+      ],
+      [
+        {
+          value: <strong><code>data</code></strong>,
+        },
+        {
+          value: "The data to replace within the row",
+        },
+      ],
+    ]}
+  />
+
+  <br />
+
+  <pre>
+{`import { useForm } from "payload/components/forms";
+
+export const CustomArrayManager = () => {
+  const { replaceFieldRow } = useForm()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        replaceFieldRow({
+          path: "arrayField",
+          rowIndex: 0,
+          data: {
+            textField: "updated text",
+            // blockType: "yourBlockSlug",
+            // ^ if managing a block array, you need to specify the block type
+          },
+        })
+      }}
+    >
+      Replace Row
+    </button>
+  )
+}`}
+  </pre>
+
+  <p>An example config to go along with the custom component</p>
+  <pre>
+{`const ExampleCollection = {
+  slug: "example-collection",
+  fields: [
+    {
+      name: "arrayField",
+      type: "array",
+      fields: [
+        {
+          name: "textField",
+          type: "text",
+        },
+      ],
+    },
+    {
+      type: "ui",
+      name: "customArrayManager",
+      admin: {
+        components: {
+          Field: CustomArrayManager,
+        },
+      },
+    },
+  ],
+}`}
+  </pre>
+</>
+        )
+      }
+    ],
+  ]}
+/>
 
 ### useDocumentInfo
 

package/docs/admin/overview.mdx

@@ -25,7 +25,7 @@ _Screenshot of the Admin panel while editing a document from an example `AllFiel
 All options for the Admin panel are defined in your base Payload config file.
 
 | Option                | Description                                                                                                                                                                                                                                                  |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `user`                | The `slug` of a Collection that you want be used to log in to the Admin dashboard. [More](/docs/admin/overview#the-admin-user-collection)                                                                                                                    |
 | `buildPath`           | Specify an absolute path for where to store the built Admin panel bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                                                                                                             |
 | `meta`                | Base meta data to use for the Admin panel. Included properties are `titleSuffix`, `ogImage`, and `favicon`.                                                                                                                                                  |
@@ -35,6 +35,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `scss`                | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables).                                                    |
 | `dateFormat`          | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.                                                                                                               |
 | `avatar`              | Set account profile picture. Options: `gravatar`, `default` or a custom React component.                                                                                                                                                                     |
+| `autoLogin`           | Used to automate admin log-in for dev and demonstration convenience. [More](/docs/authentication/config).                                                                                                                                                    |
 | `components`          | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components)                                                                                                                                                              |
 | `webpack`             | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack)                                                                                                                                                            |
 | **`logoutRoute`**     | The route for the `logout` page.                                                                                                                                                                                                                             |

package/docs/authentication/config.mdx

@@ -249,3 +249,39 @@ If you pass a strategy to the `strategy` property directly, the `name` property
 However, if you pass a function to `strategy`, `name` is a required property.
 
 In either case, Payload will prefix the strategy name with the collection `slug` that the strategy is passed to.
+
+
+### Admin autologin
+
+For testing and demo purposes you may want to skip forcing the admin user to login in order to access the panel.
+The `admin.autologin` property is used to configure the how visitors are handled when accessing the admin panel.
+The default is that all users will have to login and this should not be enabled for environments where data needs to protected.
+
+#### autoLogin Options
+
+| Option                     | Description                                                                                                                                                   |
+| -------------------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`email`**            | The email address of the user to login as                                                                                                                    |
+| **`password`**      | The password of the user to login as                                               |
+| **`prefillOnly`**     | If set to true, the login credentials will be prefilled but the user will still need to click the login button. |
+
+The recommended way to use this feature is behind an environment variable to ensure it is disabled when in production.
+
+**Example:**
+
+```ts
+
+export default buildConfig({
+  admin: {
+    user: 'users',
+    // highlight-start
+    autoLogin: process.env.PAYLOAD_PUBLIC_ENABLE_AUTOLOGIN === 'true' ? {
+      email: 'test@example.com',
+      password: 'test',
+      prefillOnly: true,
+    } : false,
+    // highlight-end
+  },
+  collections: [ /** */],
+})
+```

package/docs/authentication/overview.mdx

@@ -83,9 +83,11 @@ Once enabled, each document that is created within the Collection can be thought
 
 Successfully logging in returns a `JWT` (JSON web token) which is how a user will identify themselves to Payload. By providing this JWT via either an HTTP-only cookie or an `Authorization` header, Payload will automatically identify the user and add its user JWT data to the Express `req`, which is available throughout Payload including within access control, hooks, and more.
 
+You can specify what data gets encoded to the JWT token by setting `saveToJWT` to true in your auth collection fields. If you wish to use a different key other than the field `name`, you can provide it to `saveToJWT` as a string.
+
 <Banner type="success">
   <strong>Tip:</strong><br/>
-  You can access the logged in user from access control functions and hooks via the Express <strong>req</strong>. The logged in user is automatically added as the <strong>user</strong> property.
+  You can access the logged-in user from access control functions and hooks via the Express <strong>req</strong>. The logged-in user is automatically added as the <strong>user</strong> property.
 </Banner>
 
 ### HTTP-only cookies

package/docs/queries/overview.mdx

@@ -194,7 +194,7 @@ const getPosts = async () => {
 
 ## Sort
 
-Payload `find` queries support a `sort` parameter through all APIs. Pass the `name` of a top-level field to sort by that field in ascending order. Prefix the name of the field with a minus symbol ("-") to sort in descending order.
+Payload `find` queries support a `sort` parameter through all APIs. Pass the `name` of a top-level field to sort by that field in ascending order. Prefix the name of the field with a minus symbol ("-") to sort in descending order. Because sorting is handled by the database, the field you wish to sort on must be stored in the database to work; not a [virtual field](https://payloadcms.com/blog/learn-how-virtual-fields-can-help-solve-common-cms-challenges). It is recommended to enable indexing for the fields where sorting is used.
 
 **REST example:**
 **`https://localhost:3000/api/posts?sort=-createdAt`**