chore(release): payload/2.0.12 [skip ci]

chore: imports stripe plugin

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -10,7 +10,12 @@ body:
     id: reproduction-link
     attributes:
       label: Link to reproduction
-      description: Please add a link to a reproduction. See the fork [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
+      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe the Bug
     validations:
       required: true
   - type: textarea
@@ -19,11 +24,6 @@ body:
       description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
     validations:
       required: true
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-    validations:
-      required: true
   - type: input
     id: version
     attributes:

.github/reproduction-guide.md

@@ -1,10 +1,11 @@
 # Reproduction Guide
 
-1. [fork](https://github.com/payloadcms/payload/fork) this repo
-2. run `yarn` to install dependencies
-3. open up the `test/_community` directory
-4. add any necessary `collections/globals/fields` in this directory to recreate the issue you are experiencing
-5. run `yarn dev _community` to start the admin panel
+1. [Fork](https://github.com/payloadcms/payload/fork) this repo
+2. Optionally, create a new branch for your reproduction
+3. Run `pnpm install` to install dependencies
+4. Open up the `test/_community` directory
+5. Add any necessary `collections/globals/fields` in this directory to recreate the issue you are experiencing
+6. Run `pnpm dev _community` to start the admin panel
 
 **NOTE:** The goal is to isolate the problem by reducing the number of `collections/globals/fields` you add to the `test/_community` folder. This folder is _not_ meant for you to copy your project into, but rather recreate the issue you are experiencing with minimal config.
 
@@ -21,7 +22,7 @@
 - `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
 - `int.spec.ts` [Optional] - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
 - `e2e.spec.ts` [Optional] - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `yarn dev:generate-types _community`.
+- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types _community`.
 
 The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config. You should modify the files in `test/_community` to get started.
 
@@ -44,7 +45,7 @@ There are a couple ways run integration tests:
 - **Manually** - you can run all int tests in the `/test/_community/int.spec.ts` file by running the following command:
 
   ```bash
-  yarn test:int _community
+  pnpm test:int _community
   ```
 
 ### Running E2E tests (Admin Panel UI tests)

.github/workflows/main.yml

@@ -7,7 +7,36 @@ on:
     branches: ['main']
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      needs_build: ${{ steps.filter.outputs.needs_build }}
+      templates: ${{ steps.filter.outputs.templates }}
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 25
+    - uses: dorny/paths-filter@v2
+      id: filter
+      with:
+        filters: |
+          needs_build:
+            - 'packages/**'
+            - 'test/**'
+            - 'pnpm-lock.yaml'
+            - 'package.json'
+          templates:
+            - 'templates/**'
+    - name: Log all filter results
+      run: |
+        echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
+        echo "templates: ${{ steps.filter.outputs.templates }}"
+
   core-build:
+    needs: changes
+    if: ${{ needs.changes.outputs.needs_build == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
@@ -246,3 +275,34 @@ jobs:
       - name: Test ${{ matrix.pkg }}
         run: pnpm --filter ${{ matrix.pkg }} run test
         if: matrix.pkg != 'create-payload-app' # degit doesn't work within GitHub Actions
+
+  templates:
+    needs: changes
+    if: ${{ needs.changes.outputs.templates == 'true' }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        template: [blank, website, ecommerce]
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.10.0
+        with:
+          mongodb-version: 6.0
+
+      - name: Build Website
+        run: |
+          cd templates/${{ matrix.template }}
+          cp .env.example .env
+          yarn install
+          yarn build

CHANGELOG.md

@@ -1,4 +1,34 @@
+## [2.0.11](https://github.com/payloadcms/payload/compare/v2.0.10...v2.0.11) (2023-10-19)
 
+### Features
+
+* add ability to opt out of type gen declare statement ([#3765](https://github.com/payloadcms/payload/pull/3765))
+
+### Bug Fixes
+
+* corrects versions collection casing ([#3739](https://github.com/payloadcms/payload/pull/3739))
+* updates req after file resize ([#3754](https://github.com/payloadcms/payload/pull/3754))
+* correctly renders focal point when crop is set to false ([#3759](https://github.com/payloadcms/payload/pull/3759))
+* account for many slug types in generate types ([#3698](https://github.com/payloadcms/payload/pull/3698))
+* handle graphQL: false on globals when building policy type ([#3729](https://github.com/payloadcms/payload/pull/3729))
+* renders id as fallback title in DeleteDocument ([#3745](https://github.com/payloadcms/payload/pull/3745))
+* properly handles hideAPIURL ([#3721](https://github.com/payloadcms/payload/pull/3721))
+* filesRequiredOnCreate typing, tests, linting ([#3737](https://github.com/payloadcms/payload/pull/3737))
+
+* **webpack-bundler:** corrects payload alias ([#3769](https://github.com/payloadcms/payload/pull/3769))
+* **bundler-webpack:** better node_modules resolution ([#3744](https://github.com/payloadcms/payload/pull/3744))
+* **db-postgres:** block and array inserts error ([#3714](https://github.com/payloadcms/payload/pull/3714))
+* **live-preview:** properly handles uploads and hasOne monomorphic relationships ([#3719](https://github.com/payloadcms/payload/pull/3719))
+
+## [2.0.10](https://github.com/payloadcms/payload/compare/v2.0.9...v2.0.10) (2023-10-17)
+
+### Features
+
+* filesRequired is optional for uploads ([#3668](https://github.com/payloadcms/payload/pull/3668)) ([48de897](https://github.com/payloadcms/payload/commit/48de89794b2c5d94183090b0830fd355d8d6c6f3))
+
+### Bug Fixes
+
+* Register first user verify update missing transaction id / req ([#3665](https://github.com/payloadcms/payload/pull/3665)) ([68c5a5751](https://github.com/payloadcms/payload/commit/68c5a57515ffbba37c9194a75d0f672bdb10d96b))
 
 ## [2.0.8](https://github.com/payloadcms/payload/compare/v2.0.7...v2.0.8) (2023-10-17)
 

docs/getting-started/what-is-payload.mdx

@@ -11,19 +11,23 @@ keywords: documentation, getting started, guide, Content Management System, cms,
   title="Payload Introduction - Closing the Gap Between Headless CMS and Application Frameworks"
 />
 
+Payload is a headless CMS and application framework. It's meant to provide a massive boost to your
+development process, but importantly, stay out of your way as your apps get more complex.
+
 <Banner type="success">
-  Payload is a headless CMS and application framework. It’s meant to provide a massive boost to your
-  development process, but importantly, stay out of your way as your apps get more complex.
+  <strong>Payload 2.0 has been released!</strong>
+  <br />
+  Includes Postgres support, Live Preview, Lexical Editor, and more. <a href="/blog/payload-2-0">Read the announcement</a>.
 </Banner>
 
 Out of the box, Payload gives you a lot of the things that you often need when developing a new website, web app, or native app:
 
-- A MongoDB database to store your data
+- A database to store your data (Postgres and MongoDB supported)
 - A way to store, retrieve, and manipulate data of any shape via full REST and GraphQL APIs
 - Authentication—complete with commonly required functionality like registration, email verification, login, & password reset
 - Deep access control to your data, based on document or field-level functions
 - File storage and access control
-- A beautiful admin UI that’s generated specifically to suit your data
+- A beautiful admin UI that's generated specifically to suit your data
 
 ## What does "headless" mean?
 

docs/hooks/fields.mdx

@@ -62,7 +62,7 @@ All field-level hooks are formatted to accept the same arguments, although some
 Field Hooks receive one `args` argument that contains the following properties:
 
 | Option                   | Description                                                                                                                                                                                                           |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`data`**               | The data passed to update the document within `create` and `update` operations, and the full document itself in the `afterRead` hook.                                                                                 |
 | **`siblingData`**        | The sibling data passed to a field that the hook is running against.                                                                                                                                                  |
 | **`findMany`**           | Boolean to denote if this hook is running against finding one, or finding many within the `afterRead` hook.                                                                                                           |
@@ -73,6 +73,10 @@ Field Hooks receive one `args` argument that contains the following properties:
 | **`req`**                | The Express `request` object. It is mocked for Local API operations.                                                                                                                                                  |
 | **`value`**              | The value of the field.                                                                                                                                                                                               |
 | **`previousValue`**      | The previous value of the field, before changes were applied, only in `afterChange` hooks.                                                                                                                            |
+| **`context`**            | Context passed to this hook. More info can be found under [Context](/docs/hooks/context)                                                                                                                              |
+| **`field`**              | The field which the hook is running against.                                                                                                                                                                          |
+| **`collection`**         | The collection which the field belongs to. If the field belongs to a global, this will be null.                                                                                                                       |
+| **`global`**             | The global which the field belongs to. If the field belongs to a collection, this will be null.                                                                                                                       |
 
 #### Return value
 

docs/typescript/generating-types.mdx

@@ -18,6 +18,32 @@ payload generate:types
 
 You can run this command whenever you need to regenerate your types, and then you can use these types in your Payload code directly.
 
+### Disable declare statement
+
+By default, `generate:types` will add a `declare` statement to your types file, which automatically enables type inference within Payload.
+
+If you are using your `payload-types.ts` file in other repos, though, it might be better to disable this `declare` statement, so that you don't get any TS errors in projects that use your Payload types, but do not have Payload installed.
+
+```ts
+// payload.config.ts
+{
+  // ...
+  typescript: {
+    declare: false, // defaults to true if not set
+  },
+}
+```
+
+If you do disable the `declare` pattern, you'll need to manually add a `declare` statement to your code in order for Payload types to be recognized. Here's an example showing how to declare your types in your `payload.config.ts` file:
+
+```ts
+import { Config } from './payload-types'
+
+declare module 'payload' {
+  export interface GeneratedTypes extends Config {}
+}
+```
+
 ### Custom output file path
 
 You can specify where you want your types to be generated by adding a property to your Payload config:

docs/upload/overview.mdx

@@ -40,20 +40,21 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
 
 #### Collection Upload Options
 
-| Option                    | Description                                                                                                                                                                             |
-| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`staticURL`** \*        | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server. |
-| **`staticDir`** \*        | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                   |
-| **`adminThumbnail`**      | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                 |
-| **`crop`**                | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                      |
-| **`disableLocalStorage`** | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                             |
-| **`focalPoint`**          | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector)                                |
-| **`formatOptions`**       | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                 |
-| **`handlers`**            | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                    |
-| **`imageSizes`**          | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                      |
-| **`mimeTypes`**           | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                |
-| **`staticOptions`**       | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)  format)                                |
-| **`resizeOptions`**       | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                                                |
+| Option                      | Description                                                                                                                                                                             |
+| -------------------------   | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`staticURL`** \*          | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server. |
+| **`staticDir`** \*          | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                   |
+| **`adminThumbnail`**        | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                 |
+| **`crop`**                  | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                      |
+| **`disableLocalStorage`**   | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                             |
+| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector)                                |
+| **`formatOptions`**         | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                 |
+| **`handlers`**              | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                    |
+| **`imageSizes`**            | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                      |
+| **`mimeTypes`**             | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                |
+| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)  format)                                |
+| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                                                |
+| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                               |
 
 _An asterisk denotes that a property above is required._
 

examples/custom-server/src/payload.config.ts

@@ -21,16 +21,6 @@ export default buildConfig({
     components: {
       beforeLogin: [BeforeLogin],
     },
-    webpack: config => ({
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          dotenv: path.resolve(__dirname, './dotenv.js'),
-        },
-      },
-    }),
   },
   editor: slateEditor({}),
   db: mongooseAdapter({

examples/custom-server/src/server.ts

@@ -29,7 +29,7 @@ const start = async (): Promise<void> => {
     app.listen(PORT, async () => {
       payload.logger.info(`Next.js is now building...`)
       // @ts-expect-error
-      await nextBuild(path.join(__dirname, '../'))
+      await nextBuild(path.join(__dirname, '..'))
       process.exit()
     })
 

examples/form-builder/next-pages/README.md

@@ -1,6 +1,6 @@
 # Form Builder Example Front-End
 
-This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Form Builder Example](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload).
+This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Form Builder Example](https://github.com/payloadcms/payload/tree/main/examples/form-builder/payload).
 
 > This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), we will add an example for that soon.
 
@@ -8,7 +8,7 @@ This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nex
 
 ### Payload
 
-First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload). If you have not done so already, clone it down and follow the setup instructions there.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/main/examples/form-builder/payload). If you have not done so already, clone it down and follow the setup instructions there.
 
 ### Next.js App
 
@@ -18,7 +18,7 @@ First you'll need a running Payload app. There is one made explicitly for this e
 4. `yarn dev` or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
-Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Form Builder Example](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload) for full details.
+Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Form Builder Example](https://github.com/payloadcms/payload/tree/main/examples/form-builder/payload) for full details.
 
 ## Learn More
 

examples/live-preview/next-app/README.md

@@ -1,14 +1,14 @@
 # Payload Live Preview Example Front-End
 
-This is a [Next.js](https://nextjs.org) app using the [App Router](https://nextjs.org/docs/app). It was made explicitly for Payload's [Live Preview Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload).
+This is a [Next.js](https://nextjs.org) app using the [App Router](https://nextjs.org/docs/app). It was made explicitly for Payload's [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload).
 
-> This example uses the App Router, the latest API of Next.js. If your app is using the legacy [Pages Router](https://nextjs.org/docs/pages), check out the official [Pages Router Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/next-pages).
+> This example uses the App Router, the latest API of Next.js. If your app is using the legacy [Pages Router](https://nextjs.org/docs/pages), check out the official [Pages Router Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-pages).
 
 ## Getting Started
 
 ### Payload
 
-First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
 
 ### Next.js
 
@@ -18,7 +18,7 @@ First you'll need a running Payload app. There is one made explicitly for this e
 4. `yarn dev` or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
-Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Live Preview Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload) for full details.
+Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload) for full details.
 
 ## Learn More
 
@@ -32,6 +32,6 @@ You can check out [the Payload GitHub repository](https://github.com/payloadcms/
 
 ## Deployment
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. You could also combine this app into a [single Express server](https://github.com/payloadcms/payload/tree/master/examples/custom-server) and deploy in to [Payload Cloud](https://payloadcms.com/new/import).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. You could also combine this app into a [single Express server](https://github.com/payloadcms/payload/tree/main/examples/custom-server) and deploy in to [Payload Cloud](https://payloadcms.com/new/import).
 
 Check out our [Payload deployment documentation](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/live-preview/next-app/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@payloadcms/live-preview-react": "^1.0.0-beta.3",
+    "@payloadcms/live-preview-react": "latest",
     "escape-html": "^1.0.3",
     "next": "^13.4.8",
     "payload-admin-bar": "^1.0.6",

examples/live-preview/next-pages/README.md

@@ -1,14 +1,14 @@
 # Payload Live Preview Example Front-End
 
-This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Live Preview Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload).
+This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload).
 
-> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/next-app).
+> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-app).
 
 ## Getting Started
 
 ### Payload
 
-First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
 
 ### Next.js
 
@@ -18,7 +18,7 @@ First you'll need a running Payload app. There is one made explicitly for this e
 4. `yarn dev` or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
-Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Live Preview Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload) for full details.
+Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload) for full details.
 
 ## Learn More
 
@@ -32,6 +32,6 @@ You can check out [the Payload GitHub repository](https://github.com/payloadcms/
 
 ## Deployment
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. You could also combine this app into a [single Express server](https://github.com/payloadcms/payload/tree/master/examples/custom-server) and deploy in to [Payload Cloud](https://payloadcms.com/new/import).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. You could also combine this app into a [single Express server](https://github.com/payloadcms/payload/tree/main/examples/custom-server) and deploy in to [Payload Cloud](https://payloadcms.com/new/import).
 
 Check out our [Payload deployment documentation](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/live-preview/next-pages/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@payloadcms/live-preview-react": "^1.0.0-beta.3",
+    "@payloadcms/live-preview-react": "latest",
     "@types/escape-html": "^1.0.2",
     "escape-html": "^1.0.3",
     "next": "^13.4.8",

examples/live-preview/payload/README.md

@@ -1,6 +1,6 @@
 # Payload Live Preview Example
 
-The [Payload Live Preview Example](https://github.com/payloadcms/payload/tree/master/examples/live-preview/payload) demonstrates how to implement [Live Preview](https://payloadcms.com/docs/live-preview) in [Payload](https://github.com/payloadcms/payload). With Live Preview you can render your front-end application directly within the Admin panel. As you type, your changes take effect in real-time. No need to save a draft or publish your changes.
+The [Payload Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload) demonstrates how to implement [Live Preview](https://payloadcms.com/docs/live-preview) in [Payload](https://github.com/payloadcms/payload). With Live Preview you can render your front-end application directly within the Admin panel. As you type, your changes take effect in real-time. No need to save a draft or publish your changes.
 
 There are various fully working front-ends made explicitly for this example, including:
 
@@ -40,7 +40,7 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
   }
   ```
 
-  For additional help with authentication, see the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs or the official [Auth Example](https://github.com/payloadcms/payload/tree/master/examples/auth).
+  For additional help with authentication, see the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs or the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth).
 
 - #### Pages
 

examples/redirects/next-pages/README.md

@@ -1,6 +1,6 @@
 # Redirects Example Front-End
 
-This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Redirects Example](https://github.com/payloadcms/payload/tree/master/examples/redireects/payload).
+This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Redirects Example](https://github.com/payloadcms/payload/tree/main/examples/redireects/payload).
 
 > This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), we will soon add a new example for you to use soon.
 
@@ -8,7 +8,7 @@ This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nex
 
 ### Payload
 
-First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/redirects/payload). If you have not done so already, clone it down and follow the setup instructions there.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/main/examples/redirects/payload). If you have not done so already, clone it down and follow the setup instructions there.
 
 ### Next.js App
 

packages/bundler-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/bundler-vite",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The officially supported Vite bundler adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
+    "payload": "^2.0.0",
     "react-dom": "18.2.0"
   },
   "publishConfig": {

packages/bundler-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/bundler-webpack",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "The officially supported Webpack bundler adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -58,6 +58,9 @@
     "@types/webpack-hot-middleware": "2.25.6",
     "payload": "workspace:*"
   },
+  "peerDependencies": {
+    "payload": "^2.0.0"
+  },
   "publishConfig": {
     "main": "./dist/index.js",
     "registry": "https://registry.npmjs.org/",

packages/bundler-webpack/src/configs/base.ts

@@ -2,6 +2,7 @@ import type { SanitizedConfig } from 'payload/config'
 import type { Configuration } from 'webpack'
 
 import findNodeModules from 'find-node-modules'
+import fs from 'fs'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import path from 'path'
 import webpack from 'webpack'
@@ -9,78 +10,94 @@ import webpack from 'webpack'
 const mockModulePath = path.resolve(__dirname, '../mocks/emptyModule.js')
 const mockDotENVPath = path.resolve(__dirname, '../mocks/dotENV.js')
 
-const nodeModulesPaths = findNodeModules({ cwd: process.cwd() })
-const nodeModulesPath = path.resolve(nodeModulesPaths[0])
-const adminFolderPath = path.resolve(nodeModulesPath, 'payload/dist/admin')
+const nodeModulesPaths = findNodeModules({ cwd: process.cwd(), relative: false })
 
-export const getBaseConfig = (payloadConfig: SanitizedConfig): Configuration => ({
-  entry: {
-    main: [adminFolderPath],
-  },
-  module: {
-    rules: [
-      {
-        exclude: /\/node_modules\/(?!.+\.tsx?$).*$/,
-        test: /\.(t|j)sx?$/,
-        use: [
-          {
-            loader: require.resolve('swc-loader'),
-            options: {
-              jsc: {
-                parser: {
-                  syntax: 'typescript',
-                  tsx: true,
+export const getBaseConfig = (payloadConfig: SanitizedConfig): Configuration => {
+  let nodeModulesPath = nodeModulesPaths.find((p) => {
+    const guess = path.resolve(p, 'payload/dist/admin')
+    if (fs.existsSync(guess)) {
+      return true
+    }
+    return false
+  })
+
+  if (!nodeModulesPath) {
+    nodeModulesPath = process.cwd()
+  }
+
+  const adminFolderPath = path.resolve(nodeModulesPath, 'payload/dist/admin')
+
+  const config: Configuration = {
+    entry: {
+      main: [adminFolderPath],
+    },
+    module: {
+      rules: [
+        {
+          exclude: /\/node_modules\/(?!.+\.tsx?$).*$/,
+          test: /\.(t|j)sx?$/,
+          use: [
+            {
+              loader: require.resolve('swc-loader'),
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                  },
                 },
               },
             },
-          },
-        ],
-      },
-      {
-        oneOf: [
-          {
-            test: /\.(?:ico|gif|png|jpg|jpeg|woff(2)?|eot|ttf|otf|svg)$/i,
-            type: 'asset/resource',
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new webpack.ProvidePlugin({ process: require.resolve('process/browser') }),
-    new webpack.DefinePlugin(
-      Object.entries(process.env).reduce((values, [key, val]) => {
-        if (key.indexOf('PAYLOAD_PUBLIC_') === 0) {
-          return {
-            ...values,
-            [`process.env.${key}`]: `'${val}'`,
+          ],
+        },
+        {
+          oneOf: [
+            {
+              test: /\.(?:ico|gif|png|jpg|jpeg|woff(2)?|eot|ttf|otf|svg)$/i,
+              type: 'asset/resource',
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new webpack.ProvidePlugin({ process: require.resolve('process/browser') }),
+      new webpack.DefinePlugin(
+        Object.entries(process.env).reduce((values, [key, val]) => {
+          if (key.indexOf('PAYLOAD_PUBLIC_') === 0) {
+            return {
+              ...values,
+              [`process.env.${key}`]: `'${val}'`,
+            }
           }
-        }
 
-        return values
-      }, {}),
-    ),
-    new HtmlWebpackPlugin({
-      filename: path.normalize('./index.html'),
-      template: payloadConfig.admin.indexHTML,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  resolve: {
-    alias: {
-      '@payloadcms/bundler-webpack': mockModulePath,
-      dotenv: mockDotENVPath,
-      path: require.resolve('path-browserify'),
-      payload$: mockModulePath,
-      'payload-config': payloadConfig.paths.rawConfig,
-      'payload-user-css': payloadConfig.admin.css,
+          return values
+        }, {}),
+      ),
+      new HtmlWebpackPlugin({
+        filename: path.normalize('./index.html'),
+        template: payloadConfig.admin.indexHTML,
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+    ],
+    resolve: {
+      alias: {
+        '@payloadcms/bundler-webpack': mockModulePath,
+        dotenv: mockDotENVPath,
+        path: require.resolve('path-browserify'),
+        payload$: mockModulePath,
+        'payload-config': payloadConfig.paths.rawConfig,
+        'payload-user-css': payloadConfig.admin.css,
+      },
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+      fallback: {
+        crypto: false,
+        http: false,
+        https: false,
+      },
+      modules: ['node_modules', nodeModulesPath, path.resolve(__dirname, '../../node_modules')],
     },
-    extensions: ['.ts', '.tsx', '.js', '.json'],
-    fallback: {
-      crypto: false,
-      http: false,
-      https: false,
-    },
-    modules: ['node_modules', nodeModulesPath, path.resolve(__dirname, '../../node_modules')],
-  },
-})
+  }
+
+  return config
+}

packages/bundler-webpack/src/mocks/emptyModule.js

@@ -1 +1,3 @@
 export const webpackBundler = () => {}
+
+export default () => {}

packages/db-mongodb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "The officially supported MongoDB database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -35,6 +35,9 @@
     "mongodb-memory-server": "8.13.0",
     "payload": "workspace:*"
   },
+  "peerDependencies": {
+    "payload": "^2.0.0"
+  },
   "publishConfig": {
     "main": "./dist/index.js",
     "registry": "https://registry.npmjs.org/",

packages/db-mongodb/src/init.ts

@@ -52,7 +52,7 @@ export const init: Init = async function init(this: MongooseAdapter) {
       const model = mongoose.model(
         versionModelName,
         versionSchema,
-        versionModelName,
+        this.autoPluralization === true ? undefined : versionModelName,
       ) as CollectionModel
       // this.payload.versions[collection.slug] = model;
       this.versions[collection.slug] = model

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -34,6 +34,9 @@
     "@types/to-snake-case": "1.0.0",
     "payload": "workspace:*"
   },
+  "peerDependencies": {
+    "payload": "^2.0.0"
+  },
   "publishConfig": {
     "main": "./dist/index.js",
     "registry": "https://registry.npmjs.org/",

packages/db-postgres/src/find/traverseFields.ts

@@ -128,7 +128,7 @@ export const traverseFields = ({
                 with: {},
               }
 
-              if (adapter.tables[`${topLevelTableName}_${toSnakeCase(block.slug)}_locales`])
+              if (adapter.tables[`${topLevelTableName}_blocks_${toSnakeCase(block.slug)}_locales`])
                 withBlock.with._locales = _locales
               topLevelArgs.with[blockKey] = withBlock
 

packages/db-postgres/src/schema/idToUUID.ts

@@ -0,0 +1,13 @@
+import type { Field } from 'payload/types'
+
+export const idToUUID = (fields: Field[]): Field[] =>
+  fields.map((field) => {
+    if ('name' in field && field.name === 'id') {
+      return {
+        ...field,
+        name: '_uuid',
+      }
+    }
+
+    return field
+  })

packages/db-postgres/src/schema/traverseFields.ts

@@ -26,6 +26,7 @@ import type { GenericColumns, PostgresAdapter } from '../types'
 import { hasLocalesTable } from '../utilities/hasLocalesTable'
 import { buildTable } from './build'
 import { createIndex } from './createIndex'
+import { idToUUID } from './idToUUID'
 import { parentIDColumnMap } from './parentIDColumnMap'
 import { validateExistingBlockIsIdentical } from './validateExistingBlockIsIdentical'
 
@@ -281,7 +282,7 @@ export const traverseFields = ({
           baseExtraConfig,
           disableNotNull: disableNotNullFromHere,
           disableUnique,
-          fields: field.fields,
+          fields: disableUnique ? idToUUID(field.fields) : field.fields,
           rootRelationsToBuild,
           rootRelationships: relationships,
           rootTableIDColType,
@@ -349,7 +350,7 @@ export const traverseFields = ({
               baseExtraConfig,
               disableNotNull: disableNotNullFromHere,
               disableUnique,
-              fields: block.fields,
+              fields: disableUnique ? idToUUID(block.fields) : block.fields,
               rootRelationsToBuild,
               rootRelationships: relationships,
               rootTableIDColType,

packages/db-postgres/src/schema/validateExistingBlockIsIdentical.ts

@@ -22,7 +22,7 @@ export const validateExistingBlockIsIdentical = ({
     const fieldNames = flattenTopLevelFields(block.fields).flatMap((field) => field.name)
 
     Object.keys(table).forEach((fieldName) => {
-      if (!['_locale', '_order', '_parentID', '_path'].includes(fieldName)) {
+      if (!['_locale', '_order', '_parentID', '_path', '_uuid'].includes(fieldName)) {
         if (fieldNames.indexOf(fieldName) === -1) {
           throw new InvalidConfiguration(
             `The table ${rootTableName} has multiple blocks with slug ${block.slug}, but the schemas do not match. One block includes the field ${fieldName}, while the other block does not.`,

packages/db-postgres/src/transform/read/index.ts

@@ -31,6 +31,7 @@ export const transform = <T extends TypeWithID>({ config, data, fields }: Transf
   }
 
   const blocks = createBlocksMap(data)
+  const deletions = []
 
   const result = traverseFields<T>({
     blocks,
@@ -38,6 +39,7 @@ export const transform = <T extends TypeWithID>({ config, data, fields }: Transf
     dataRef: {
       id: data.id,
     },
+    deletions,
     fieldPrefix: '',
     fields,
     numbers,
@@ -46,5 +48,7 @@ export const transform = <T extends TypeWithID>({ config, data, fields }: Transf
     table: data,
   })
 
+  deletions.forEach((deletion) => deletion())
+
   return result
 }

packages/db-postgres/src/transform/read/traverseFields.ts

@@ -22,6 +22,10 @@ type TraverseFieldsArgs = {
    * The data reference to be mutated within this recursive function
    */
   dataRef: Record<string, unknown>
+  /**
+   * Data that needs to be removed from the result after all fields have populated
+   */
+  deletions: (() => void)[]
   /**
    * Column prefix can be built up by group and named tab fields
    */
@@ -54,6 +58,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
   blocks,
   config,
   dataRef,
+  deletions,
   fieldPrefix,
   fields,
   numbers,
@@ -69,6 +74,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
         blocks,
         config,
         dataRef,
+        deletions,
         fieldPrefix,
         fields: field.tabs.map((tab) => ({ ...tab, type: 'tab' })),
         numbers,
@@ -87,6 +93,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
         blocks,
         config,
         dataRef,
+        deletions,
         fieldPrefix,
         fields: field.fields,
         numbers,
@@ -99,7 +106,6 @@ export const traverseFields = <T extends Record<string, unknown>>({
     if (fieldAffectsData(field)) {
       const fieldName = `${fieldPrefix || ''}${field.name}`
       const fieldData = table[fieldName]
-
       if (field.type === 'array') {
         if (Array.isArray(fieldData)) {
           if (field.localized) {
@@ -109,11 +115,16 @@ export const traverseFields = <T extends Record<string, unknown>>({
                 const locale = row._locale
                 const data = {}
                 delete row._locale
+                if (row._uuid) {
+                  row.id = row._uuid
+                  delete row._uuid
+                }
 
                 const rowResult = traverseFields<T>({
                   blocks,
                   config,
                   dataRef: data,
+                  deletions,
                   fieldPrefix: '',
                   fields: field.fields,
                   numbers,
@@ -129,10 +140,15 @@ export const traverseFields = <T extends Record<string, unknown>>({
             }, {})
           } else {
             result[field.name] = fieldData.map((row, i) => {
+              if (row._uuid) {
+                row.id = row._uuid
+                delete row._uuid
+              }
               return traverseFields<T>({
                 blocks,
                 config,
                 dataRef: row,
+                deletions,
                 fieldPrefix: '',
                 fields: field.fields,
                 numbers,
@@ -155,6 +171,10 @@ export const traverseFields = <T extends Record<string, unknown>>({
             result[field.name] = {}
 
             blocks[blockFieldPath].forEach((row) => {
+              if (row._uuid) {
+                row.id = row._uuid
+                delete row._uuid
+              }
               if (typeof row._locale === 'string') {
                 if (!result[field.name][row._locale]) result[field.name][row._locale] = []
                 result[field.name][row._locale].push(row)
@@ -171,6 +191,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
                     blocks,
                     config,
                     dataRef: row,
+                    deletions,
                     fieldPrefix: '',
                     fields: block.fields,
                     numbers,
@@ -189,6 +210,10 @@ export const traverseFields = <T extends Record<string, unknown>>({
           } else {
             result[field.name] = blocks[blockFieldPath].map((row, i) => {
               delete row._order
+              if (row._uuid) {
+                row.id = row._uuid
+                delete row._uuid
+              }
               const block = field.blocks.find(({ slug }) => slug === row.blockType)
 
               if (block) {
@@ -196,6 +221,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
                   blocks,
                   config,
                   dataRef: row,
+                  deletions,
                   fieldPrefix: '',
                   fields: block.fields,
                   numbers,
@@ -345,6 +371,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
                   blocks,
                   config,
                   dataRef: groupLocaleData as Record<string, unknown>,
+                  deletions,
                   fieldPrefix: groupFieldPrefix,
                   fields: field.fields,
                   numbers,
@@ -360,6 +387,7 @@ export const traverseFields = <T extends Record<string, unknown>>({
                 blocks,
                 config,
                 dataRef: groupData as Record<string, unknown>,
+                deletions,
                 fieldPrefix: groupFieldPrefix,
                 fields: field.fields,
                 numbers,
@@ -425,5 +453,9 @@ export const traverseFields = <T extends Record<string, unknown>>({
     return result
   }, dataRef)
 
+  if (Array.isArray(table._locales)) {
+    deletions.push(() => delete table._locales)
+  }
+
   return formatted as T
 }

packages/db-postgres/src/transform/write/array.ts

@@ -1,12 +1,14 @@
 /* eslint-disable no-param-reassign */
 import type { ArrayField } from 'payload/types'
 
+import type { PostgresAdapter } from '../../types'
 import type { ArrayRowToInsert, BlockRowToInsert, RelationshipToDelete } from './types'
 
 import { isArrayOfRows } from '../../utilities/isArrayOfRows'
 import { traverseFields } from './traverseFields'
 
 type Args = {
+  adapter: PostgresAdapter
   arrayTableName: string
   baseTableName: string
   blocks: {
@@ -25,6 +27,7 @@ type Args = {
 }
 
 export const transformArray = ({
+  adapter,
   arrayTableName,
   baseTableName,
   blocks,
@@ -38,6 +41,7 @@ export const transformArray = ({
   selects,
 }: Args) => {
   const newRows: ArrayRowToInsert[] = []
+  const hasUUID = adapter.tables[arrayTableName]._uuid
 
   if (isArrayOfRows(data)) {
     data.forEach((arrayRow, i) => {
@@ -49,6 +53,16 @@ export const transformArray = ({
         },
       }
 
+      // If we have declared a _uuid field on arrays,
+      // that means the ID has to be unique,
+      // and our ids within arrays are not unique.
+      // So move the ID to a uuid field for storage
+      // and allow the database to generate a serial id automatically
+      if (hasUUID) {
+        newRow.row._uuid = arrayRow.id
+        delete arrayRow.id
+      }
+
       if (locale) {
         newRow.locales[locale] = {
           _locale: locale,
@@ -60,6 +74,7 @@ export const transformArray = ({
       }
 
       traverseFields({
+        adapter,
         arrays: newRow.arrays,
         baseTableName,
         blocks,

packages/db-postgres/src/transform/write/blocks.ts

@@ -3,11 +3,13 @@ import type { BlockField } from 'payload/types'
 
 import toSnakeCase from 'to-snake-case'
 
+import type { PostgresAdapter } from '../../types'
 import type { BlockRowToInsert, RelationshipToDelete } from './types'
 
 import { traverseFields } from './traverseFields'
 
 type Args = {
+  adapter: PostgresAdapter
   baseTableName: string
   blocks: {
     [blockType: string]: BlockRowToInsert[]
@@ -24,6 +26,7 @@ type Args = {
   }
 }
 export const transformBlocks = ({
+  adapter,
   baseTableName,
   blocks,
   data,
@@ -56,7 +59,20 @@ export const transformBlocks = ({
 
     const blockTableName = `${baseTableName}_blocks_${blockType}`
 
+    const hasUUID = adapter.tables[blockTableName]._uuid
+
+    // If we have declared a _uuid field on arrays,
+    // that means the ID has to be unique,
+    // and our ids within arrays are not unique.
+    // So move the ID to a uuid field for storage
+    // and allow the database to generate a serial id automatically
+    if (hasUUID) {
+      newRow.row._uuid = blockRow.id
+      delete blockRow.id
+    }
+
     traverseFields({
+      adapter,
       arrays: newRow.arrays,
       baseTableName,
       blocks,

packages/db-postgres/src/transform/write/index.ts

@@ -1,18 +1,26 @@
 /* eslint-disable no-param-reassign */
 import type { Field } from 'payload/types'
 
+import type { PostgresAdapter } from '../../types'
 import type { RowToInsert } from './types'
 
 import { traverseFields } from './traverseFields'
 
 type Args = {
+  adapter: PostgresAdapter
   data: Record<string, unknown>
   fields: Field[]
   path?: string
   tableName: string
 }
 
-export const transformForWrite = ({ data, fields, path = '', tableName }: Args): RowToInsert => {
+export const transformForWrite = ({
+  adapter,
+  data,
+  fields,
+  path = '',
+  tableName,
+}: Args): RowToInsert => {
   // Split out the incoming data into rows to insert / delete
   const rowToInsert: RowToInsert = {
     arrays: {},
@@ -28,6 +36,7 @@ export const transformForWrite = ({ data, fields, path = '', tableName }: Args):
   // This function is responsible for building up the
   // above rowToInsert
   traverseFields({
+    adapter,
     arrays: rowToInsert.arrays,
     baseTableName: tableName,
     blocks: rowToInsert.blocks,

packages/db-postgres/src/transform/write/traverseFields.ts

@@ -4,6 +4,7 @@ import type { Field } from 'payload/types'
 import { fieldAffectsData } from 'payload/types'
 import toSnakeCase from 'to-snake-case'
 
+import type { PostgresAdapter } from '../../types'
 import type { ArrayRowToInsert, BlockRowToInsert, RelationshipToDelete } from './types'
 
 import { isArrayOfRows } from '../../utilities/isArrayOfRows'
@@ -14,6 +15,7 @@ import { transformRelationship } from './relationships'
 import { transformSelects } from './selects'
 
 type Args = {
+  adapter: PostgresAdapter
   arrays: {
     [tableName: string]: ArrayRowToInsert[]
   }
@@ -56,6 +58,7 @@ type Args = {
 }
 
 export const traverseFields = ({
+  adapter,
   arrays,
   baseTableName,
   blocks,
@@ -95,6 +98,7 @@ export const traverseFields = ({
           Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
             if (Array.isArray(localeData)) {
               const newRows = transformArray({
+                adapter,
                 arrayTableName,
                 baseTableName,
                 blocks,
@@ -114,6 +118,7 @@ export const traverseFields = ({
         }
       } else {
         const newRows = transformArray({
+          adapter,
           arrayTableName,
           baseTableName,
           blocks,
@@ -138,6 +143,7 @@ export const traverseFields = ({
           Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
             if (Array.isArray(localeData)) {
               transformBlocks({
+                adapter,
                 baseTableName,
                 blocks,
                 data: localeData,
@@ -154,6 +160,7 @@ export const traverseFields = ({
         }
       } else if (isArrayOfRows(fieldData)) {
         transformBlocks({
+          adapter,
           baseTableName,
           blocks,
           data: fieldData,
@@ -174,6 +181,7 @@ export const traverseFields = ({
         if (field.localized) {
           Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
             traverseFields({
+              adapter,
               arrays,
               baseTableName,
               blocks,
@@ -195,6 +203,7 @@ export const traverseFields = ({
           })
         } else {
           traverseFields({
+            adapter,
             arrays,
             baseTableName,
             blocks,
@@ -225,6 +234,7 @@ export const traverseFields = ({
             if (tab.localized) {
               Object.entries(data[tab.name]).forEach(([localeKey, localeData]) => {
                 traverseFields({
+                  adapter,
                   arrays,
                   baseTableName,
                   blocks,
@@ -246,6 +256,7 @@ export const traverseFields = ({
               })
             } else {
               traverseFields({
+                adapter,
                 arrays,
                 baseTableName,
                 blocks,
@@ -267,6 +278,7 @@ export const traverseFields = ({
           }
         } else {
           traverseFields({
+            adapter,
             arrays,
             baseTableName,
             blocks,
@@ -290,6 +302,7 @@ export const traverseFields = ({
 
     if (field.type === 'row' || field.type === 'collapsible') {
       traverseFields({
+        adapter,
         arrays,
         baseTableName,
         blocks,

packages/db-postgres/src/upsertRow/index.ts

@@ -28,6 +28,7 @@ export const upsertRow = async <T extends TypeWithID>({
   // Split out the incoming data into the corresponding:
   // base row, locales, relationships, blocks, and arrays
   const rowToInsert = transformForWrite({
+    adapter,
     data,
     fields,
     path,
@@ -107,6 +108,9 @@ export const upsertRow = async <T extends TypeWithID>({
     rowToInsert.blocks[blockName].forEach((blockRow) => {
       blockRow.row._parentID = insertedRow.id
       if (!blocksToInsert[blockName]) blocksToInsert[blockName] = []
+      if (blockRow.row.uuid) {
+        delete blockRow.row.uuid
+      }
       blocksToInsert[blockName].push(blockRow)
     })
   })

packages/eslint-config-payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/eslint-config",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Payload styles for ESLint and Prettier",
   "license": "MIT",
   "author": {

packages/live-preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The official live preview React SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
+    "payload": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "exports": {

packages/live-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The official live preview JavaScript SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -20,6 +20,9 @@
     "@payloadcms/eslint-config": "workspace:*",
     "payload": "workspace:*"
   },
+  "peerDependencies": {
+    "payload": "^2.0.0"
+  },
   "exports": {
     ".": {
       "default": "./src/index.ts",

packages/live-preview/src/mergeData.ts

@@ -1,10 +1,12 @@
+import type { fieldSchemaToJSON } from 'payload/utilities'
+
 import { traverseFields } from './traverseFields'
 
 export type MergeLiveDataArgs<T> = {
   apiRoute?: string
   depth: number
-  fieldSchema: Record<string, unknown>[]
-  incomingData: T
+  fieldSchema: ReturnType<typeof fieldSchemaToJSON>
+  incomingData: Partial<T>
   initialData: T
   serverURL: string
 }

packages/live-preview/src/traverseFields.ts

@@ -1,9 +1,11 @@
+import type { fieldSchemaToJSON } from 'payload/utilities'
+
 import { promise } from './promise'
 
 type Args<T> = {
   apiRoute?: string
   depth: number
-  fieldSchema: Record<string, unknown>[]
+  fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: T
   populationPromises: Promise<void>[]
   result: T
@@ -19,12 +21,11 @@ export const traverseFields = <T>({
   result,
   serverURL,
 }: Args<T>): void => {
-  fieldSchema.forEach((field) => {
-    if ('name' in field && typeof field.name === 'string') {
-      // TODO: type this
-      const fieldName = field.name
+  fieldSchema.forEach((fieldJSON) => {
+    if ('name' in fieldJSON && typeof fieldJSON.name === 'string') {
+      const fieldName = fieldJSON.name
 
-      switch (field.type) {
+      switch (fieldJSON.type) {
         case 'array':
           if (Array.isArray(incomingData[fieldName])) {
             result[fieldName] = incomingData[fieldName].map((row, i) => {
@@ -38,7 +39,7 @@ export const traverseFields = <T>({
               traverseFields({
                 apiRoute,
                 depth,
-                fieldSchema: field.fields as Record<string, unknown>[], // TODO: type this
+                fieldSchema: fieldJSON.fields,
                 incomingData: row,
                 populationPromises,
                 result: newRow,
@@ -52,37 +53,39 @@ export const traverseFields = <T>({
 
         case 'blocks':
           if (Array.isArray(incomingData[fieldName])) {
-            result[fieldName] = incomingData[fieldName].map((row, i) => {
-              const matchedBlock = field.blocks[row.blockType]
+            result[fieldName] = incomingData[fieldName].map((incomingBlock, i) => {
+              const incomingBlockJSON = fieldJSON.blocks[incomingBlock.blockType]
 
-              const hasExistingRow =
+              // Compare the index and id to determine if this block already exists in the result
+              // If so, we want to use the existing block as the base, otherwise take the incoming block
+              // Either way, we will traverse the fields of the block to populate relationships
+              const isExistingBlock =
                 Array.isArray(result[fieldName]) &&
                 typeof result[fieldName][i] === 'object' &&
                 result[fieldName][i] !== null &&
-                result[fieldName][i].blockType === row.blockType
+                result[fieldName][i].id === incomingBlock.id
 
-              const newRow = hasExistingRow
-                ? { ...result[fieldName][i] }
-                : {
-                    blockType: matchedBlock.slug,
-                  }
+              const block = isExistingBlock ? result[fieldName][i] : incomingBlock
 
               traverseFields({
                 apiRoute,
                 depth,
-                fieldSchema: matchedBlock.fields as Record<string, unknown>[], // TODO: type this
-                incomingData: row,
+                fieldSchema: incomingBlockJSON.fields,
+                incomingData: incomingBlock,
                 populationPromises,
-                result: newRow,
+                result: block,
                 serverURL,
               })
 
-              return newRow
+              return block
             })
+          } else {
+            result[fieldName] = []
           }
+
           break
 
-        case 'tab':
+        case 'tabs':
         case 'group':
           if (!result[fieldName]) {
             result[fieldName] = {}
@@ -91,7 +94,7 @@ export const traverseFields = <T>({
           traverseFields({
             apiRoute,
             depth,
-            fieldSchema: field.fields as Record<string, unknown>[], // TODO: type this
+            fieldSchema: fieldJSON.fields,
             incomingData: incomingData[fieldName] || {},
             populationPromises,
             result: result[fieldName],
@@ -102,7 +105,7 @@ export const traverseFields = <T>({
 
         case 'upload':
         case 'relationship':
-          if (field.hasMany && Array.isArray(incomingData[fieldName])) {
+          if (fieldJSON.hasMany && Array.isArray(incomingData[fieldName])) {
             const existingValue = Array.isArray(result[fieldName]) ? [...result[fieldName]] : []
             result[fieldName] = Array.isArray(result[fieldName])
               ? [...result[fieldName]].slice(0, incomingData[fieldName].length)
@@ -110,7 +113,7 @@ export const traverseFields = <T>({
 
             incomingData[fieldName].forEach((relation, i) => {
               // Handle `hasMany` polymorphic
-              if (Array.isArray(field.relationTo)) {
+              if (Array.isArray(fieldJSON.relationTo)) {
                 const existingID = existingValue[i]?.value?.id
 
                 if (
@@ -134,7 +137,7 @@ export const traverseFields = <T>({
                   )
                 }
               } else {
-                // Handle `hasMany` singular
+                // Handle `hasMany` monomorphic
                 const existingID = existingValue[i]?.id
 
                 if (existingID !== relation) {
@@ -143,7 +146,7 @@ export const traverseFields = <T>({
                       id: relation,
                       accessor: i,
                       apiRoute,
-                      collection: String(field.relationTo),
+                      collection: String(fieldJSON.relationTo),
                       depth,
                       ref: result[fieldName],
                       serverURL,
@@ -154,7 +157,7 @@ export const traverseFields = <T>({
             })
           } else {
             // Handle `hasOne` polymorphic
-            if (Array.isArray(field.relationTo)) {
+            if (Array.isArray(fieldJSON.relationTo)) {
               const hasNewValue =
                 typeof incomingData[fieldName] === 'object' && incomingData[fieldName] !== null
               const hasOldValue =
@@ -190,31 +193,37 @@ export const traverseFields = <T>({
                 result[fieldName] = null
               }
             } else {
-              const hasNewValue =
-                typeof incomingData[fieldName] === 'object' && incomingData[fieldName] !== null
-              const hasOldValue =
-                typeof result[fieldName] === 'object' && result[fieldName] !== null
+              // Handle `hasOne` monomorphic
+              const newID: string =
+                (typeof incomingData[fieldName] === 'string' && incomingData[fieldName]) ||
+                (typeof incomingData[fieldName] === 'object' &&
+                  incomingData[fieldName] !== null &&
+                  incomingData[fieldName].id) ||
+                ''
 
-              const newValue = hasNewValue ? incomingData[fieldName].value : ''
+              const oldID: string =
+                (typeof result[fieldName] === 'string' && result[fieldName]) ||
+                (typeof result[fieldName] === 'object' &&
+                  result[fieldName] !== null &&
+                  result[fieldName].id) ||
+                ''
 
-              const oldValue = hasOldValue ? result[fieldName].value : ''
-
-              if (newValue !== oldValue) {
-                if (newValue) {
+              if (newID !== oldID) {
+                if (newID) {
                   populationPromises.push(
                     promise({
-                      id: newValue,
+                      id: newID,
                       accessor: fieldName,
                       apiRoute,
-                      collection: String(field.relationTo),
+                      collection: String(fieldJSON.relationTo),
                       depth,
                       ref: result as Record<string, unknown>,
                       serverURL,
                     }),
                   )
+                } else {
+                  result[fieldName] = null
                 }
-              } else {
-                result[fieldName] = null
               }
             }
           }

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "2.0.9",
+  "version": "2.0.12",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -127,10 +127,10 @@
     "react-select": "5.7.4",
     "react-toastify": "8.2.0",
     "sanitize-filename": "1.6.3",
-    "sass": "1.64.0",
+    "sass": "1.69.4",
     "scheduler": "0.23.0",
     "scmp": "2.1.0",
-    "sharp": "0.31.3",
+    "sharp": "0.32.6",
     "swc-loader": "0.2.3",
     "terser-webpack-plugin": "5.3.9",
     "ts-essentials": "7.0.3",

packages/payload/src/admin/components/elements/DeleteDocument/index.tsx

@@ -31,13 +31,14 @@ const DeleteDocument: React.FC<Props> = (props) => {
     routes: { admin, api },
     serverURL,
   } = useConfig()
+
   const { setModified } = useForm()
   const [deleting, setDeleting] = useState(false)
   const { toggleModal } = useModal()
   const history = useHistory()
   const { i18n, t } = useTranslation('general')
   const title = useTitle({ collection })
-  const titleToRender = titleFromProps || title
+  const titleToRender = titleFromProps || title || id
 
   const modalSlug = `delete-${id}`
 

packages/payload/src/admin/components/elements/DocumentControls/index.scss

@@ -1,7 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .doc-controls {
-  @include blur-bg;
+  @include blur-bg-light;
   position: sticky;
   top: 0;
   width: 100%;
@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
 
-  &::after {
+  &__divider {
     content: '';
     display: block;
     position: absolute;

packages/payload/src/admin/components/elements/DocumentControls/index.tsx

@@ -225,6 +225,7 @@ export const DocumentControls: React.FC<{
           )}
         </div>
       </div>
+      <div className={`${baseClass}__divider`} />
     </Gutter>
   )
 }

packages/payload/src/admin/components/elements/DocumentFields/index.scss

@@ -1,12 +1,12 @@
-@import '../../../../scss/styles.scss';
+@import '../../../scss/styles.scss';
 
-.global-default-edit {
+.document-fields {
   width: 100%;
   display: flex;
   --doc-sidebar-width: 325px;
 
   &--has-sidebar {
-    .global-default-edit {
+    .document-fields {
       &__edit {
         [dir='ltr'] & {
           top: 0;
@@ -46,10 +46,6 @@
     flex-grow: 1;
   }
 
-  &__auth {
-    margin-bottom: var(--base);
-  }
-
   &__sidebar-wrap {
     position: sticky;
     top: var(--doc-controls-height);
@@ -62,9 +58,6 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
-  }
-
-  &__sidebar-sticky-wrap {
     display: flex;
     flex-direction: column;
     min-height: 100%;
@@ -88,7 +81,7 @@
     display: block;
 
     &--has-sidebar {
-      .global-default-edit {
+      .document-fields {
         &__main {
           width: 100%;
         }
@@ -124,8 +117,6 @@
       width: 100%;
       height: initial;
       border-left: 0;
-      margin-top: calc(var(--base) / 2);
-      width: var(--doc-sidebar-width);
     }
 
     &__form {
@@ -136,6 +127,7 @@
       padding-top: 0;
       padding-left: var(--gutter-h);
       padding-right: var(--gutter-h);
+      padding-bottom: 0;
       gap: base(0.5);
 
       [dir='ltr'] & {

packages/payload/src/admin/components/elements/DocumentFields/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+
+import type { CollectionPermission, GlobalPermission } from '../../../../auth'
+import type { FieldWithPath } from '../../../../fields/config/types'
+import type { Description } from '../../forms/FieldDescription/types'
+
+import RenderFields from '../../forms/RenderFields'
+import { filterFields } from '../../forms/RenderFields/filterFields'
+import { fieldTypes } from '../../forms/field-types'
+import { Gutter } from '../Gutter'
+import ViewDescription from '../ViewDescription'
+import './index.scss'
+
+const baseClass = 'document-fields'
+
+export const DocumentFields: React.FC<{
+  AfterFields?: React.FC
+  BeforeFields?: React.FC
+  description?: Description
+  fields: FieldWithPath[]
+  hasSavePermission: boolean
+  permissions: CollectionPermission | GlobalPermission
+}> = (props) => {
+  const { AfterFields, BeforeFields, description, fields, hasSavePermission, permissions } = props
+
+  const sidebarFields = filterFields({
+    fieldSchema: fields,
+    fieldTypes,
+    filter: (field) => field?.admin?.position === 'sidebar',
+    permissions: permissions.fields,
+    readOnly: !hasSavePermission,
+  })
+
+  const hasSidebar = sidebarFields && sidebarFields.length > 0
+
+  return (
+    <React.Fragment>
+      <div
+        className={[
+          baseClass,
+          hasSidebar ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className={`${baseClass}__main`}>
+          <Gutter className={`${baseClass}__edit`}>
+            <header className={`${baseClass}__header`}>
+              {description && (
+                <div className={`${baseClass}__sub-header`}>
+                  <ViewDescription description={description} />
+                </div>
+              )}
+            </header>
+            {BeforeFields && <BeforeFields />}
+            <RenderFields
+              className={`${baseClass}__fields`}
+              fieldSchema={fields}
+              fieldTypes={fieldTypes}
+              filter={(field) =>
+                !field.admin.position ||
+                (field.admin.position && field.admin.position !== 'sidebar')
+              }
+              permissions={permissions.fields}
+              readOnly={!hasSavePermission}
+            />
+            {AfterFields && <AfterFields />}
+          </Gutter>
+        </div>
+        {hasSidebar && (
+          <div className={`${baseClass}__sidebar-wrap`}>
+            <div className={`${baseClass}__sidebar`}>
+              <div className={`${baseClass}__sidebar-fields`}>
+                <RenderFields
+                  fieldTypes={fieldTypes}
+                  fields={sidebarFields}
+                  permissions={permissions.fields}
+                  readOnly={!hasSavePermission}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </React.Fragment>
+  )
+}

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/Tab/index.scss

@@ -10,6 +10,19 @@
     justify-content: center;
     align-items: center;
     white-space: nowrap;
+
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &:focus-visible::after {
+      content: '';
+      border: var(--accessibility-outline);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
   }
 
   &:focus:not(:focus-visible) {

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/Tab/index.tsx

@@ -64,6 +64,7 @@ export const DocumentTab: React.FC<DocumentTabProps & DocumentTabConfig> = (prop
           className={`${baseClass}__link`}
           to={href}
           {...(newTab && { rel: 'noopener noreferrer', target: '_blank' })}
+          tabIndex={isActive ? -1 : 0}
         >
           <span className={`${baseClass}__label`}>
             {labelToRender}

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/tabs.ts

@@ -43,7 +43,7 @@ export const tabs: DocumentTabConfig[] = [
   // API
   {
     condition: ({ collection, global }) =>
-      !collection?.admin?.hideAPIURL || !global?.admin?.hideAPIURL,
+      (collection && !collection?.admin?.hideAPIURL) || (global && !global?.admin?.hideAPIURL),
     href: '/api',
     label: 'API',
   },

packages/payload/src/admin/components/elements/Drawer/index.scss

@@ -1,6 +1,6 @@
 @import '../../../scss/styles.scss';
 
-$transTime: 200ms;
+$transTime: 200;
 
 .drawer {
   display: flex;
@@ -9,7 +9,7 @@ $transTime: 200ms;
   height: 100vh;
 
   &__blur-bg {
-    @include blur-bg();
+    @include blur-bg;
     position: absolute;
     z-index: 1;
     top: 0;
@@ -17,7 +17,7 @@ $transTime: 200ms;
     bottom: 0;
     left: 0;
     opacity: 0;
-    transition: all $transTime linear;
+    transition: all #{$transTime}ms linear;
   }
 
   &__content {
@@ -27,7 +27,8 @@ $transTime: 200ms;
     z-index: 2;
     width: calc(100% - var(--gutter-h));
     overflow: hidden;
-    transition: all $transTime linear;
+    transition: all #{$transTime}ms linear;
+    background-color: var(--theme-bg);
   }
 
   &__content-children {
@@ -40,14 +41,14 @@ $transTime: 200ms;
   &--is-open {
     .drawer {
       &__content,
-      &__blur-bg,
-      &__close {
+      &__blur-bg {
         opacity: 1;
       }
 
       &__close {
-        transition: opacity $transTime linear;
-        transition-delay: $transTime;
+        opacity: 0.1;
+        transition: opacity #{$transTime}ms linear;
+        transition-delay: #{calc($transTime / 2)}ms;
       }
 
       &__content {
@@ -68,7 +69,7 @@ $transTime: 200ms;
     transition: none;
     transition-delay: 0ms;
     flex-grow: 1;
-    background: transparent;
+    background: var(--theme-elevation-800);
 
     &:active,
     &:focus {
@@ -120,7 +121,15 @@ $transTime: 200ms;
 }
 
 html[data-theme='dark'] {
-  .drawer__close {
-    background: rgba(0, 0, 0, 0.2);
+  .drawer {
+    &__close {
+      background: var(--color-base-1000);
+    }
+
+    &--is-open {
+      .drawer__close {
+        opacity: 0.25;
+      }
+    }
   }
 }

packages/payload/src/admin/components/elements/Drawer/index.tsx

@@ -1,5 +1,4 @@
 import { Modal, useModal } from '@faceless-ui/modal'
-import { useWindowInfo } from '@faceless-ui/window-info'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -52,9 +51,6 @@ export const Drawer: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation('general')
   const { closeModal, modalState } = useModal()
-  const {
-    breakpoints: { m: midBreak },
-  } = useWindowInfo()
   const drawerDepth = useEditDepth()
   const [isOpen, setIsOpen] = useState(false)
   const [animateIn, setAnimateIn] = useState(false)
@@ -72,7 +68,12 @@ export const Drawer: React.FC<Props> = ({
 
     return (
       <Modal
-        className={[className, baseClass, animateIn && `${baseClass}--is-open`]
+        className={[
+          className,
+          baseClass,
+          animateIn && `${baseClass}--is-open`,
+          drawerDepth > 1 && `${baseClass}--nested`,
+        ]
           .filter(Boolean)
           .join(' ')}
         slug={slug}
@@ -80,7 +81,7 @@ export const Drawer: React.FC<Props> = ({
           zIndex: zBase + drawerDepth,
         }}
       >
-        {drawerDepth === 1 && <div className={`${baseClass}__blur-bg`} />}
+        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}
         <button
           aria-label={t('close')}
           className={`${baseClass}__close`}
@@ -89,7 +90,7 @@ export const Drawer: React.FC<Props> = ({
           type="button"
         />
         <div className={`${baseClass}__content`}>
-          <div className={`${baseClass}__blur-bg`} />
+          <div className={`${baseClass}__blur-bg-content`} />
           <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>
             <EditDepthContext.Provider value={drawerDepth + 1}>
               {header && header}

packages/payload/src/admin/components/elements/DuplicateDocument/index.tsx

@@ -62,6 +62,7 @@ const Duplicate: React.FC<Props> = ({ id, collection, slug }) => {
 
         if (typeof collection.admin.hooks?.beforeDuplicate === 'function') {
           data = await collection.admin.hooks.beforeDuplicate({
+            collection,
             data,
             locale,
           })
@@ -108,6 +109,7 @@ const Duplicate: React.FC<Props> = ({ id, collection, slug }) => {
 
               if (typeof collection.admin.hooks?.beforeDuplicate === 'function') {
                 localizedDoc = await collection.admin.hooks.beforeDuplicate({
+                  collection,
                   data: localizedDoc,
                   locale,
                 })

packages/payload/src/admin/components/elements/EditUpload/index.tsx

@@ -97,7 +97,9 @@ export const EditUpload: React.FC<{
 
   const centerFocalPoint = () => {
     const containerRect = focalWrapRef.current.getBoundingClientRect()
-    const boundsRect = cropRef.current.getBoundingClientRect()
+    const boundsRect = showCrop
+      ? cropRef.current.getBoundingClientRect()
+      : imageRef.current.getBoundingClientRect()
     const xCenter =
       ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100
     const yCenter =
@@ -164,17 +166,19 @@ export const EditUpload: React.FC<{
             ) : (
               <img alt={t('upload:setFocalPoint')} ref={imageRef} src={fileSrcToUse} />
             )}
-            <DraggableElement
-              boundsRef={cropRef}
-              checkBounds={checkBounds}
-              className={`${baseClass}__focalPoint`}
-              containerRef={focalWrapRef}
-              initialPosition={pointPosition}
-              onDragEnd={onDragEnd}
-              setCheckBounds={setCheckBounds}
-            >
-              <Plus />
-            </DraggableElement>
+            {showFocalPoint && (
+              <DraggableElement
+                boundsRef={showCrop ? cropRef : imageRef}
+                checkBounds={showCrop ? checkBounds : false}
+                className={`${baseClass}__focalPoint`}
+                containerRef={focalWrapRef}
+                initialPosition={pointPosition}
+                onDragEnd={onDragEnd}
+                setCheckBounds={showCrop ? setCheckBounds : false}
+              >
+                <Plus />
+              </DraggableElement>
+            )}
           </div>
         </div>
         {(showCrop || showFocalPoint) && (

packages/payload/src/admin/components/elements/Hamburger/index.scss

@@ -7,27 +7,36 @@
   background-color: transparent;
   outline: none;
   position: relative;
+  @include blur-bg;
 
   --hamburger-padding: 8px;
   --hamburger-size: 9px;
   --hamburger-line-gap: 3px;
 
-  padding: var(--hamburger-padding);
-  border: 1px solid var(--theme-elevation-150);
   color: var(--theme-text);
-  border-radius: 3px;
 
-  &:hover {
-    border: 1px solid var(--theme-elevation-500);
-    background-color: var(--theme-elevation-100);
-  }
+  &__wrapper {
+    border: 1px solid var(--theme-elevation-150);
+    padding: var(--hamburger-padding);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
 
-  &:focus {
-    outline: none;
+    &:hover {
+      border: 1px solid var(--theme-elevation-500);
+      background-color: var(--theme-elevation-100);
+    }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   &__icon {
     position: relative;
+    z-index: 1;
     height: var(--hamburger-size);
     width: var(--hamburger-size);
     display: flex;

packages/payload/src/admin/components/elements/Hamburger/index.tsx

@@ -14,32 +14,34 @@ export const Hamburger: React.FC<{
   const { closeIcon = 'x', isActive = false } = props
 
   return (
-    <div className={[baseClass].filter(Boolean).join(' ')}>
-      <div className={`${baseClass}__icon`}>
-        {!isActive && (
-          <div className={`${baseClass}__lines`} title={t('open')}>
-            <div className={`${baseClass}__line ${baseClass}__top`} />
-            <div className={`${baseClass}__line ${baseClass}__middle`} />
-            <div className={`${baseClass}__line ${baseClass}__bottom`} />
-          </div>
-        )}
-        {isActive && (
-          <div
-            aria-label={closeIcon === 'collapse' ? t('collapse') : t('close')}
-            className={`${baseClass}__close-icon`}
-            title={closeIcon === 'collapse' ? t('collapse') : t('close')}
-          >
-            {closeIcon === 'x' && (
-              <React.Fragment>
-                <div className={`${baseClass}__line ${baseClass}__x-left`} />
-                <div className={`${baseClass}__line ${baseClass}__x-right`} />
-              </React.Fragment>
-            )}
-            {closeIcon === 'collapse' && (
-              <Chevron className={`${baseClass}__collapse-chevron`} direction="left" />
-            )}
-          </div>
-        )}
+    <div className={baseClass}>
+      <div className={`${baseClass}__wrapper`}>
+        <div className={`${baseClass}__icon`}>
+          {!isActive && (
+            <div className={`${baseClass}__lines`} title={t('open')}>
+              <div className={`${baseClass}__line ${baseClass}__top`} />
+              <div className={`${baseClass}__line ${baseClass}__middle`} />
+              <div className={`${baseClass}__line ${baseClass}__bottom`} />
+            </div>
+          )}
+          {isActive && (
+            <div
+              aria-label={closeIcon === 'collapse' ? t('collapse') : t('close')}
+              className={`${baseClass}__close-icon`}
+              title={closeIcon === 'collapse' ? t('collapse') : t('close')}
+            >
+              {closeIcon === 'x' && (
+                <React.Fragment>
+                  <div className={`${baseClass}__line ${baseClass}__x-left`} />
+                  <div className={`${baseClass}__line ${baseClass}__x-right`} />
+                </React.Fragment>
+              )}
+              {closeIcon === 'collapse' && (
+                <Chevron className={`${baseClass}__collapse-chevron`} direction="left" />
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )

packages/payload/src/admin/components/elements/Header/index.scss

@@ -24,7 +24,6 @@
   }
 
   &__bg {
-    @include blur-bg;
     opacity: 0;
     position: absolute;
     left: 0;
@@ -58,9 +57,28 @@
   }
 
   &__account {
+    position: relative;
+
     &:focus:not(:focus-visible) {
       opacity: 1;
     }
+
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: '';
+        border: var(--accessibility-outline);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+      }
+    }
   }
 
   &__controls-wrapper {

packages/payload/src/admin/components/elements/Header/index.tsx

@@ -14,7 +14,7 @@ import './index.scss'
 
 const baseClass = 'app-header'
 
-export const AppHeader: React.FC = (props) => {
+export const AppHeader: React.FC = () => {
   const { t } = useTranslation()
 
   const {
@@ -29,7 +29,7 @@ export const AppHeader: React.FC = (props) => {
       <div className={`${baseClass}__bg`} />
       <div className={`${baseClass}__content`}>
         <div className={`${baseClass}__wrapper`}>
-          <NavToggler className={`${baseClass}__mobile-nav-toggler`}>
+          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>
             <Hamburger />
           </NavToggler>
           <div className={`${baseClass}__controls-wrapper`}>
@@ -46,6 +46,7 @@ export const AppHeader: React.FC = (props) => {
               <Link
                 aria-label={t('authentication:account')}
                 className={`${baseClass}__account`}
+                tabIndex={0}
                 to={`${adminRoute}/account`}
               >
                 <Account />

packages/payload/src/admin/components/elements/ListControls/index.tsx

@@ -1,13 +1,11 @@
 import { useWindowInfo } from '@faceless-ui/window-info'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import AnimateHeight from 'react-animate-height'
 import { useTranslation } from 'react-i18next'
 
-import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
 import type { Props } from './types'
 
 import { fieldAffectsData } from '../../../../fields/config/types'
-import flattenFields from '../../../../utilities/flattenTopLevelFields'
 import { getTranslation } from '../../../../utilities/getTranslation'
 import Chevron from '../../icons/Chevron'
 import { useSearchParams } from '../../utilities/SearchParams'
@@ -27,22 +25,12 @@ import './index.scss'
 
 const baseClass = 'list-controls'
 
-const getUseAsTitle = (collection: SanitizedCollectionConfig) => {
-  const {
-    admin: { useAsTitle },
-    fields,
-  } = collection
-
-  const topLevelFields = flattenFields(fields)
-  return topLevelFields.find((field) => fieldAffectsData(field) && field.name === useAsTitle)
-}
-
 /**
  * The ListControls component is used to render the controls (search, filter, where)
  * for a collection's list view. You can find those directly above the table which lists
  * the collection's documents.
  */
-const ListControls: React.FC<Props> = (props) => {
+export const ListControls: React.FC<Props> = (props) => {
   const {
     collection: {
       admin: { listSearchableFields },
@@ -51,21 +39,20 @@ const ListControls: React.FC<Props> = (props) => {
     collection,
     enableColumns = true,
     enableSort = false,
+    handleSearchChange,
     handleSortChange,
     handleWhereChange,
     modifySearchQuery = true,
     resetParams,
+    titleField,
   } = props
 
   const params = useSearchParams()
   const shouldInitializeWhereOpened = validateWhereQuery(params?.where)
 
-  const [titleField, setTitleField] = useState(getUseAsTitle(collection))
-  useEffect(() => {
-    setTitleField(getUseAsTitle(collection))
-  }, [collection])
-
-  const [textFieldsToBeSearched] = useState(getTextFieldsToBeSearched(listSearchableFields, fields))
+  const [textFieldsToBeSearched, setFieldsToBeSearched] = useState(
+    getTextFieldsToBeSearched(listSearchableFields, fields),
+  )
   const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(
     shouldInitializeWhereOpened ? 'where' : undefined,
   )
@@ -74,18 +61,19 @@ const ListControls: React.FC<Props> = (props) => {
     breakpoints: { s: smallBreak },
   } = useWindowInfo()
 
+  React.useEffect(() => {
+    setFieldsToBeSearched(getTextFieldsToBeSearched(listSearchableFields, fields))
+  }, [listSearchableFields, fields])
+
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__wrap`}>
         <SearchFilter
           fieldLabel={
-            (titleField &&
-              fieldAffectsData(titleField) &&
-              getTranslation(titleField.label || titleField.name, i18n)) ??
-            undefined
+            (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined
           }
           fieldName={titleField && fieldAffectsData(titleField) ? titleField.name : undefined}
-          handleChange={handleWhereChange}
+          handleChange={handleSearchChange}
           listSearchableFields={textFieldsToBeSearched}
           modifySearchQuery={modifySearchQuery}
         />
@@ -179,5 +167,3 @@ const ListControls: React.FC<Props> = (props) => {
     </div>
   )
 }
-
-export default ListControls

packages/payload/src/admin/components/elements/ListControls/types.ts

@@ -1,4 +1,5 @@
 import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
+import type { FieldAffectingData } from '../../../../exports/types'
 import type { Where } from '../../../../types'
 import type { Props as ListProps } from '../../views/collections/List/types'
 import type { Column } from '../Table/types'
@@ -7,10 +8,12 @@ export type Props = {
   collection: SanitizedCollectionConfig
   enableColumns?: boolean
   enableSort?: boolean
+  handleSearchChange?: (search: string) => void
   handleSortChange?: (sort: string) => void
   handleWhereChange?: (where: Where) => void
   modifySearchQuery?: boolean
   resetParams?: ListProps['resetParams']
+  titleField: FieldAffectingData
 }
 
 export type ListControls = {

packages/payload/src/admin/components/elements/ListDrawer/DrawerContent.tsx

@@ -3,12 +3,14 @@ import React, { useCallback, useEffect, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
+import type { Where } from '../../../../exports/types'
 import type { Field } from '../../../../fields/config/types'
 import type { ListDrawerProps } from './types'
 
 import { baseClass } from '.'
 import { getTranslation } from '../../../../utilities/getTranslation'
 import usePayloadAPI from '../../../hooks/usePayloadAPI'
+import { useUseTitleField } from '../../../hooks/useUseAsTitle'
 import Label from '../../forms/Label'
 import X from '../../icons/X'
 import { useAuth } from '../../utilities/Auth'
@@ -24,6 +26,22 @@ import ReactSelect from '../ReactSelect'
 import { TableColumnsProvider } from '../TableColumns'
 import ViewDescription from '../ViewDescription'
 
+const hoistQueryParamsToAnd = (where: Where, queryParams: Where) => {
+  if ('and' in where) {
+    where.and.push(queryParams)
+  } else if ('or' in where) {
+    where = {
+      and: [where, queryParams],
+    }
+  } else {
+    where = {
+      and: [where, queryParams],
+    }
+  }
+
+  return where
+}
+
 export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   collectionSlugs,
   customHeader,
@@ -40,6 +58,8 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   const [sort, setSort] = useState(null)
   const [page, setPage] = useState(1)
   const [where, setWhere] = useState(null)
+  const [search, setSearch] = useState('')
+
   const {
     collections,
     routes: { api },
@@ -69,6 +89,8 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
 
   const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))
 
+  const titleField = useUseTitleField(selectedCollectionConfig)
+
   useEffect(() => {
     setFields(formatFields(selectedCollectionConfig))
   }, [selectedCollectionConfig])
@@ -111,31 +133,58 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1
 
   useEffect(() => {
+    const { admin: { listSearchableFields } = {}, slug } = selectedCollectionConfig
     const params: {
       cacheBust?: number
       limit?: number
       page?: number
+      search?: string
       sort?: string
       where?: unknown
     } = {}
 
-    if (page) params.page = page
+    let copyOfWhere = { ...(where || {}) }
 
-    params.where = {
-      ...(where ? { ...where } : {}),
-      ...(filterOptions?.[selectedCollectionConfig.slug]
-        ? {
-            ...filterOptions[selectedCollectionConfig.slug],
-          }
-        : {}),
+    if (filterOptions) {
+      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOptions[slug])
     }
 
+    if (search) {
+      const searchAsConditions = (listSearchableFields || [titleField?.name]).map((fieldName) => {
+        return {
+          [fieldName]: {
+            like: search,
+          },
+        }
+      }, [])
+
+      if (searchAsConditions.length > 0) {
+        const searchFilter: Where = {
+          or: [...searchAsConditions],
+        }
+
+        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter)
+      }
+    }
+
+    if (page) params.page = page
     if (sort) params.sort = sort
-    if (limit) params.limit = limit
     if (cacheBust) params.cacheBust = cacheBust
+    if (copyOfWhere) params.where = copyOfWhere
 
     setParams(params)
-  }, [setParams, page, sort, where, limit, cacheBust, filterOptions, selectedCollectionConfig])
+  }, [
+    page,
+    sort,
+    where,
+    search,
+    cacheBust,
+    filterOptions,
+    selectedCollectionConfig,
+    t,
+    setParams,
+    titleField?.name,
+  ])
 
   useEffect(() => {
     const newPreferences = {
@@ -241,6 +290,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
             data,
             handlePageChange: setPage,
             handlePerPageChange: setLimit,
+            handleSearchChange: setSearch,
             handleSortChange: setSort,
             handleWhereChange: setWhere,
             hasCreatePermission,
@@ -249,6 +299,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
             newDocumentURL: null,
             setLimit,
             setSort,
+            titleField,
           }}
         />
       </DocumentInfoProvider>

packages/payload/src/admin/components/elements/Logout/index.tsx

@@ -8,20 +8,22 @@ import RenderCustomComponent from '../../utilities/RenderCustomComponent'
 
 const baseClass = 'nav'
 
-const DefaultLogout = () => {
+const DefaultLogout: React.FC<{
+  tabIndex?: number
+}> = ({ tabIndex }) => {
   const { t } = useTranslation('authentication')
   const config = useConfig()
+
   const {
-    admin: {
-      components: { logout },
-      logoutRoute,
-    },
+    admin: { logoutRoute },
     routes: { admin },
   } = config
+
   return (
     <Link
       aria-label={t('logOut')}
       className={`${baseClass}__log-out`}
+      tabIndex={tabIndex}
       to={`${admin}${logoutRoute}`}
     >
       <LogOut />
@@ -29,7 +31,9 @@ const DefaultLogout = () => {
   )
 }
 
-const Logout: React.FC = () => {
+const Logout: React.FC<{
+  tabIndex?: number
+}> = ({ tabIndex = 0 }) => {
   const {
     admin: {
       components: {
@@ -40,7 +44,15 @@ const Logout: React.FC = () => {
     } = {},
   } = useConfig()
 
-  return <RenderCustomComponent CustomComponent={CustomLogout} DefaultComponent={DefaultLogout} />
+  return (
+    <RenderCustomComponent
+      CustomComponent={CustomLogout}
+      DefaultComponent={DefaultLogout}
+      componentProps={{
+        tabIndex,
+      }}
+    />
+  )
 }
 
 export default Logout

packages/payload/src/admin/components/elements/Nav/NavToggler/index.tsx

@@ -12,8 +12,9 @@ export const NavToggler: React.FC<{
   children?: React.ReactNode
   className?: string
   id?: string
+  tabIndex?: number
 }> = (props) => {
-  const { id, children, className } = props
+  const { id, children, className, tabIndex = 0 } = props
 
   const { t } = useTranslation('general')
 
@@ -43,6 +44,7 @@ export const NavToggler: React.FC<{
           })
         }
       }}
+      tabIndex={tabIndex}
       type="button"
     >
       {children}

packages/payload/src/admin/components/elements/Nav/index.scss

@@ -16,7 +16,6 @@
   }
 
   &__header {
-    @include blur-bg;
     position: absolute;
     top: 0;
     width: 100%;

packages/payload/src/admin/components/elements/Nav/index.tsx

@@ -102,6 +102,7 @@ const DefaultNav: React.FC = () => {
                       className={`${baseClass}__link`}
                       id={id}
                       key={i}
+                      tabIndex={!navOpen ? -1 : undefined}
                       to={href}
                     >
                       <span className={`${baseClass}__link-icon`}>
@@ -117,7 +118,7 @@ const DefaultNav: React.FC = () => {
           {Array.isArray(afterNavLinks) &&
             afterNavLinks.map((Component, i) => <Component key={i} />)}
           <div className={`${baseClass}__controls`}>
-            <Logout />
+            <Logout tabIndex={!navOpen ? -1 : undefined} />
           </div>
         </nav>
       </div>
@@ -128,6 +129,7 @@ const DefaultNav: React.FC = () => {
             onClick={() => {
               setNavOpen(false)
             }}
+            tabIndex={!navOpen ? -1 : undefined}
             type="button"
           >
             <Hamburger isActive />

packages/payload/src/admin/components/elements/NavGroup/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import AnimateHeight from 'react-animate-height'
+
 import Chevron from '../../icons/Chevron'
 import { usePreferences } from '../../utilities/Preferences'
-
+import { useNav } from '../Nav/context'
 import './index.scss'
 
 const baseClass = 'nav-group'
@@ -16,6 +17,7 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
   const [collapsed, setCollapsed] = useState(true)
   const [animate, setAnimate] = useState(false)
   const { getPreference, setPreference } = usePreferences()
+  const { navOpen } = useNav()
 
   const preferencesKey = `collapsed-${label}-groups`
 
@@ -44,13 +46,12 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
 
     return (
       <div
-        id={`nav-group-${label}`}
         className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]
           .filter(Boolean)
           .join(' ')}
+        id={`nav-group-${label}`}
       >
         <button
-          type="button"
           className={[
             `${baseClass}__toggle`,
             `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,
@@ -58,6 +59,8 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
             .filter(Boolean)
             .join(' ')}
           onClick={toggleCollapsed}
+          tabIndex={!navOpen ? -1 : 0}
+          type="button"
         >
           <div className={`${baseClass}__label`}>{label}</div>
           <div className={`${baseClass}__indicator`}>
@@ -67,7 +70,7 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
             />
           </div>
         </button>
-        <AnimateHeight height={collapsed ? 0 : 'auto'} duration={animate ? 200 : 0}>
+        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>
           <div className={`${baseClass}__content`}>{children}</div>
         </AnimateHeight>
       </div>

packages/payload/src/admin/components/elements/Popup/PopupTrigger/index.tsx

@@ -36,7 +36,7 @@ export const PopupTrigger: React.FC<Props> = (props) => {
   }
 
   return (
-    <button className={classes} onClick={() => setActive(!active)} type="button">
+    <button className={classes} onClick={() => setActive(!active)} tabIndex={0} type="button">
       {button}
     </button>
   )

packages/payload/src/admin/components/elements/ReactSelect/MultiValue/index.tsx

@@ -16,11 +16,12 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
     innerProps,
     isDisabled,
     // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module
-    selectProps: { customProps: { disableMouseDown } = {} } = {},
+    selectProps: { customProps: { disableMouseDown } = {}, isSortable } = {},
   } = props
 
   const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
     id: value.toString(),
+    disabled: !isSortable,
   })
 
   const classes = [

packages/payload/src/admin/components/elements/ReactSelect/index.tsx

@@ -33,6 +33,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
   const {
     className,
     components,
+    customProps,
     disabled = false,
     filterOption = undefined,
     isClearable = true,
@@ -45,7 +46,6 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
     onMenuOpen,
     options,
     placeholder = t('general:selectValue'),
-    selectProps,
     showError,
     value,
   } = props
@@ -58,7 +58,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
     return (
       <Select
         captureMenuScroll
-        customProps={selectProps}
+        customProps={customProps}
         isLoading={isLoading}
         placeholder={getTranslation(placeholder, i18n)}
         {...props}

packages/payload/src/admin/components/elements/ReactSelect/types.ts

@@ -78,10 +78,6 @@ export type Props = {
   onMenuScrollToBottom?: () => void
   options: Option[] | OptionGroup[]
   placeholder?: string
-  /**
-   * @deprecated Since version 1.0. Will be deleted in version 2.0. Use customProps instead.
-   */
-  selectProps?: CustomSelectProps
   showError?: boolean
   value?: Option | Option[]
 }

packages/payload/src/admin/components/elements/SearchFilter/index.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
 
-import type { Where, WhereField } from '../../../../types'
 import type { Props } from './types'
 
 import { getTranslation } from '../../../../utilities/getTranslation'
@@ -27,7 +26,7 @@ const SearchFilter: React.FC<Props> = (props) => {
   const history = useHistory()
   const { i18n, t } = useTranslation('general')
 
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState(typeof params?.search === 'string' ? params?.search : '')
   const [previousSearch, setPreviousSearch] = useState('')
 
   const placeholder = useRef(t('searchBy', { label: getTranslation(fieldLabel, i18n) }))
@@ -35,48 +34,15 @@ const SearchFilter: React.FC<Props> = (props) => {
   const debouncedSearch = useDebounce(search, 300)
 
   useEffect(() => {
-    const newWhere: Where = {
-      ...(typeof params?.where === 'object' ? (params.where as Where) : {}),
-    }
-    const fieldNamesToSearch =
-      listSearchableFields?.length > 0
-        ? [...listSearchableFields.map(({ name }) => name)]
-        : [fieldName]
-
-    fieldNamesToSearch.forEach((fieldNameToSearch) => {
-      const hasOrQuery = Array.isArray(newWhere.or)
-      const existingFieldSearchIndex = hasOrQuery
-        ? newWhere.or.findIndex((condition) => {
-            return (condition?.[fieldNameToSearch] as WhereField)?.like
-          })
-        : -1
-      if (debouncedSearch) {
-        if (!hasOrQuery) newWhere.or = []
-
-        if (existingFieldSearchIndex > -1) {
-          ;(newWhere.or[existingFieldSearchIndex][fieldNameToSearch] as WhereField).like =
-            debouncedSearch
-        } else {
-          newWhere.or.push({
-            [fieldNameToSearch]: {
-              like: debouncedSearch,
-            },
-          })
-        }
-      } else if (existingFieldSearchIndex > -1) {
-        newWhere.or.splice(existingFieldSearchIndex, 1)
-      }
-    })
-
     if (debouncedSearch !== previousSearch) {
-      if (handleChange) handleChange(newWhere)
+      if (handleChange) handleChange(debouncedSearch)
 
       if (modifySearchQuery) {
         history.replace({
           search: queryString.stringify({
             ...params,
             page: 1,
-            where: newWhere,
+            search: debouncedSearch || undefined,
           }),
         })
       }

packages/payload/src/admin/components/elements/SearchFilter/types.ts

@@ -1,10 +1,9 @@
 import type { FieldAffectingData } from '../../../../fields/config/types'
-import type { Where } from '../../../../types'
 
 export type Props = {
   fieldLabel?: string
   fieldName?: string
-  handleChange?: (where: Where) => void
+  handleChange?: (search: string) => void
   listSearchableFields?: FieldAffectingData[]
   modifySearchQuery?: boolean
 }

packages/payload/src/admin/components/elements/StepNav/index.scss

@@ -13,6 +13,27 @@
     background: linear-gradient(to right, transparent, var(--theme-bg));
   }
 
+  // Use a pseudo element for the accessability so that it doesn't take up DOM space
+  // Also because the parent element has `overflow: hidden` which would clip an outline
+  &__home {
+    position: relative;
+
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: '';
+        border: var(--accessibility-outline);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+      }
+    }
+  }
+
   * {
     display: block;
   }

packages/payload/src/admin/components/elements/StepNav/index.tsx

@@ -9,6 +9,8 @@ import { getTranslation } from '../../../../utilities/getTranslation'
 import { useConfig } from '../../utilities/Config'
 import './index.scss'
 
+const baseClass = 'step-nav'
+
 const Context = createContext({} as ContextType)
 
 const StepNavProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
@@ -41,32 +43,34 @@ const StepNav: React.FC<{
   } = config
 
   return (
-    <nav className={['step-nav', className].filter(Boolean).join(' ')}>
+    <Fragment>
       {stepNav.length > 0 ? (
-        <Fragment>
-          <Link to={admin}>
+        <nav className={[baseClass, className].filter(Boolean).join(' ')}>
+          <Link className={`${baseClass}__home`} tabIndex={0} to={admin}>
             <IconGraphic />
           </Link>
           <span>/</span>
-        </Fragment>
-      ) : (
-        <IconGraphic />
-      )}
-      {stepNav.map((item, i) => {
-        const StepLabel = <span key={i}>{getTranslation(item.label, i18n)}</span>
-        const Step =
-          stepNav.length === i + 1 ? (
-            StepLabel
-          ) : (
-            <Fragment key={i}>
-              {item.url ? <Link to={item.url}>{StepLabel}</Link> : StepLabel}
-              <span>/</span>
-            </Fragment>
-          )
+          {stepNav.map((item, i) => {
+            const StepLabel = <span key={i}>{getTranslation(item.label, i18n)}</span>
+            const Step =
+              stepNav.length === i + 1 ? (
+                StepLabel
+              ) : (
+                <Fragment key={i}>
+                  {item.url ? <Link to={item.url}>{StepLabel}</Link> : StepLabel}
+                  <span>/</span>
+                </Fragment>
+              )
 
-        return Step
-      })}
-    </nav>
+            return Step
+          })}
+        </nav>
+      ) : (
+        <div className={[baseClass, className].filter(Boolean).join(' ')}>
+          <IconGraphic />
+        </div>
+      )}
+    </Fragment>
   )
 }
 

packages/payload/src/admin/components/elements/WhereBuilder/Condition/index.tsx

@@ -76,7 +76,7 @@ const Condition: React.FC<Props> = (props) => {
               onChange={(field) =>
                 dispatch({
                   andIndex,
-                  field: field.value,
+                  field: field?.value || undefined,
                   orIndex,
                   type: 'update',
                 })

packages/payload/src/admin/components/forms/field-types/RichText/types.ts

@@ -12,7 +12,17 @@ export type RichTextFieldProps<Value extends object, AdapterProps> = Omit<
 export type RichTextAdapter<Value extends object = object, AdapterProps = any> = {
   CellComponent: React.FC<CellComponentProps<RichTextField<Value, AdapterProps>>>
   FieldComponent: React.FC<RichTextFieldProps<Value, AdapterProps>>
-  afterReadPromise?: (data: {
+  afterReadPromise?: ({
+    field,
+    incomingEditorState,
+    siblingDoc,
+  }: {
+    field: RichTextField<Value, AdapterProps>
+    incomingEditorState: Value
+    siblingDoc: Record<string, unknown>
+  }) => Promise<void> | null
+
+  populationPromise?: (data: {
     currentDepth?: number
     depth: number
     field: RichTextField<Value, AdapterProps>

packages/payload/src/admin/components/graphics/Account/Default/index.scss

@@ -1,6 +1,7 @@
 .graphic-account {
   vector-effect: non-scaling-stroke;
   overflow: visible;
+  position: relative;
 
   &__bg {
     fill: var(--theme-elevation-50);

packages/payload/src/admin/components/graphics/Icon/index.tsx

@@ -9,11 +9,11 @@ const css = `
     width: 18px;
     height: 18px;
   }
+
   .graphic-icon path {
     fill: var(--theme-elevation-1000);
   }
 
-
   @media (max-width: 768px) {
     .graphic-icon {
       width: 16px;

packages/payload/src/admin/components/templates/Default/index.tsx

@@ -26,7 +26,7 @@ const Default: React.FC<Props> = ({ children, className }) => {
 
   const { t } = useTranslation('general')
 
-  const { navOpen, setNavOpen } = useNav()
+  const { navOpen } = useNav()
 
   return (
     <Fragment>
@@ -35,6 +35,11 @@ const Default: React.FC<Props> = ({ children, className }) => {
         keywords={`${t('dashboard')}, Payload`}
         title={t('dashboard')}
       />
+      <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
+        <NavToggler className={`${baseClass}__nav-toggler`}>
+          <Hamburger closeIcon="collapse" isActive={navOpen} />
+        </NavToggler>
+      </div>
       <div
         className={[baseClass, className, navOpen && `${baseClass}--nav-open`]
           .filter(Boolean)
@@ -46,11 +51,6 @@ const Default: React.FC<Props> = ({ children, className }) => {
           {children}
         </div>
       </div>
-      <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
-        <NavToggler className={`${baseClass}__nav-toggler`}>
-          <Hamburger closeIcon="collapse" isActive={navOpen} />
-        </NavToggler>
-      </div>
     </Fragment>
   )
 }

packages/payload/src/admin/components/views/Account/Default.tsx

@@ -1,24 +1,19 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import type { Translation } from '../../../../translations/type'
 import type { CollectionEditViewProps } from '../types'
 
 import { DocumentControls } from '../../elements/DocumentControls'
+import { DocumentFields } from '../../elements/DocumentFields'
 import { DocumentHeader } from '../../elements/DocumentHeader'
-import { Gutter } from '../../elements/Gutter'
 import { LoadingOverlayToggle } from '../../elements/Loading'
-import ReactSelect from '../../elements/ReactSelect'
 import Form from '../../forms/Form'
-import Label from '../../forms/Label'
-import RenderFields from '../../forms/RenderFields'
-import { fieldTypes } from '../../forms/field-types'
 import { LeaveWithoutSaving } from '../../modals/LeaveWithoutSaving'
 import { useAuth } from '../../utilities/Auth'
 import Meta from '../../utilities/Meta'
 import { OperationContext } from '../../utilities/OperationProvider'
 import Auth from '../collections/Edit/Auth'
-import { ToggleTheme } from './ToggleTheme'
+import { Settings } from './Settings'
 import './index.scss'
 
 const baseClass = 'account'
@@ -39,14 +34,7 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
   const { auth, fields } = collection
 
   const { refreshCookieAsync } = useAuth()
-  const { i18n, t } = useTranslation('authentication')
-
-  const languageOptions = Object.entries(i18n.options.resources || {}).map(
-    ([language, resource]) => ({
-      label: (resource as Translation).general.thisLanguage,
-      value: language,
-    }),
-  )
+  const { t } = useTranslation('authentication')
 
   const onSave = useCallback(async () => {
     await refreshCookieAsync()
@@ -55,91 +43,49 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
     }
   }, [onSaveFromProps, refreshCookieAsync])
 
-  const classes = [baseClass].filter(Boolean).join(' ')
-
   return (
     <React.Fragment>
+      <Meta description={t('accountOfCurrentUser')} keywords={t('account')} title={t('account')} />
       <LoadingOverlayToggle name="account" show={isLoading} type="withoutNav" />
       {!isLoading && (
-        <div className={classes}>
-          <OperationContext.Provider value="update">
-            <Form
-              action={action}
-              className={`${baseClass}__form`}
-              disabled={!hasSavePermission}
-              initialState={initialState}
-              method="patch"
-              onSuccess={onSave}
-            >
-              <DocumentHeader apiURL={apiURL} collection={collection} data={data} />
-              <DocumentControls
-                apiURL={apiURL}
-                collection={collection}
-                data={data}
-                hasSavePermission={hasSavePermission}
-                isAccountView
-                permissions={permissions}
-              />
-              <div className={`${baseClass}__main`}>
-                <Meta
-                  description={t('accountOfCurrentUser')}
-                  keywords={t('account')}
-                  title={t('account')}
+        <OperationContext.Provider value="update">
+          <Form
+            action={action}
+            disabled={!hasSavePermission}
+            initialState={initialState}
+            method="patch"
+            onSuccess={onSave}
+          >
+            {!(collection.versions?.drafts && collection.versions?.drafts?.autosave) && (
+              <LeaveWithoutSaving />
+            )}
+            <DocumentHeader apiURL={apiURL} collection={collection} data={data} />
+            <DocumentControls
+              apiURL={apiURL}
+              collection={collection}
+              data={data}
+              hasSavePermission={hasSavePermission}
+              isAccountView
+              permissions={permissions}
+            />
+            <DocumentFields
+              AfterFields={() => <Settings className={`${baseClass}__settings`} />}
+              BeforeFields={() => (
+                <Auth
+                  className={`${baseClass}__auth`}
+                  collection={collection}
+                  email={data?.email}
+                  operation="update"
+                  readOnly={!hasSavePermission}
+                  useAPIKey={auth.useAPIKey}
                 />
-                {!(collection.versions?.drafts && collection.versions?.drafts?.autosave) && (
-                  <LeaveWithoutSaving />
-                )}
-                <div className={`${baseClass}__edit`}>
-                  <Gutter className={`${baseClass}__header`}>
-                    <Auth
-                      className={`${baseClass}__auth`}
-                      collection={collection}
-                      email={data?.email}
-                      operation="update"
-                      readOnly={!hasSavePermission}
-                      useAPIKey={auth.useAPIKey}
-                    />
-                    <RenderFields
-                      fieldSchema={fields}
-                      fieldTypes={fieldTypes}
-                      filter={(field) => field?.admin?.position !== 'sidebar'}
-                      permissions={permissions?.fields}
-                      readOnly={!hasSavePermission}
-                    />
-                  </Gutter>
-                  <Gutter className={`${baseClass}__payload-settings`}>
-                    <h3>{t('general:payloadSettings')}</h3>
-                    <div className={`${baseClass}__language`}>
-                      <Label htmlFor="language-select" label={t('general:language')} />
-                      <ReactSelect
-                        inputId="language-select"
-                        onChange={({ value }) => i18n.changeLanguage(value)}
-                        options={languageOptions}
-                        value={languageOptions.find((language) => language.value === i18n.language)}
-                      />
-                    </div>
-                    <ToggleTheme />
-                  </Gutter>
-                </div>
-              </div>
-              <div className={`${baseClass}__sidebar-wrap`}>
-                <div className={`${baseClass}__sidebar`}>
-                  <div className={`${baseClass}__sidebar-sticky-wrap`}>
-                    <div className={`${baseClass}__sidebar-fields`}>
-                      <RenderFields
-                        fieldSchema={fields}
-                        fieldTypes={fieldTypes}
-                        filter={(field) => field?.admin?.position === 'sidebar'}
-                        permissions={permissions?.fields}
-                        readOnly={!hasSavePermission}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Form>
-          </OperationContext.Provider>
-        </div>
+              )}
+              fields={fields}
+              hasSavePermission={hasSavePermission}
+              permissions={permissions}
+            />
+          </Form>
+        </OperationContext.Provider>
       )}
     </React.Fragment>
   )

packages/payload/src/admin/components/views/Account/Settings/index.scss

@@ -0,0 +1,45 @@
+@import '../../../../scss/styles.scss';
+
+.payload-settings {
+  position: relative;
+
+  h3 {
+    margin: 0;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background: var(--theme-elevation-100);
+    width: calc(100% + calc(var(--base) * 5));
+    left: calc(var(--gutter-h) * -1);
+    top: 0;
+    position: absolute;
+  }
+
+  &::after {
+    display: none;
+    bottom: 0;
+    top: unset;
+  }
+
+  margin-top: base(3);
+  padding-top: base(3);
+  padding-bottom: base(3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+    padding-top: base(2);
+    margin-top: base(2);
+    padding-bottom: base(2);
+
+    &::after {
+      display: block;
+    }
+  }
+}

packages/payload/src/admin/components/views/Account/Settings/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { Translation } from '../../../../../translations/type'
+
+import ReactSelect from '../../../elements/ReactSelect'
+import Label from '../../../forms/Label'
+import { ToggleTheme } from '../ToggleTheme'
+import './index.scss'
+
+const baseClass = 'payload-settings'
+
+export const Settings: React.FC<{
+  className?: string
+}> = (props) => {
+  const { className } = props
+
+  const { i18n, t } = useTranslation('authentication')
+
+  const languageOptions = Object.entries(i18n.options.resources || {}).map(
+    ([language, resource]) => ({
+      label: (resource as Translation).general.thisLanguage,
+      value: language,
+    }),
+  )
+
+  return (
+    <div className={[baseClass, className].filter(Boolean).join(' ')}>
+      <h3>{t('general:payloadSettings')}</h3>
+      <div className={`${baseClass}__language`}>
+        <Label htmlFor="language-select" label={t('general:language')} />
+        <ReactSelect
+          inputId="language-select"
+          onChange={({ value }) => i18n.changeLanguage(value)}
+          options={languageOptions}
+          value={languageOptions.find((language) => language.value === i18n.language)}
+        />
+      </div>
+      <ToggleTheme />
+    </div>
+  )
+}

packages/payload/src/admin/components/views/Account/index.scss

@@ -1,47 +1,19 @@
 @import '../../../scss/styles.scss';
 
 .account {
-  width: 100%;
-  padding-bottom: var(--spacing-view-bottom);
-
-  &__form {
-    height: 100%;
-  }
-
-  &__edit {
-    margin-top: calc(var(--base) * 3);
-  }
-
   &__auth {
-    margin-bottom: var(--base);
+    margin-bottom: calc(var(--base) * 2);
+    margin-top: calc(var(--base) * 0.5);
   }
 
-  &__header {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__payload-settings {
-    margin-top: base(3);
-    padding-top: base(3);
-    border-top: 1px solid var(--theme-elevation-100);
-  }
-
-  &__language {
-    margin-bottom: $baseline;
+  &___settings {
+    margin-bottom: calc(var(--base) * 2);
   }
 
   @include small-break {
-    &__edit {
-      margin: var(--base) 0;
-    }
-
-    &__payload-settings {
-      margin-top: base(1);
-      padding-top: base(1);
-      padding-bottom: base(0.5);
-      border-top: 1px solid var(--theme-elevation-100);
-      border-bottom: 1px solid var(--theme-elevation-100);
+    &__auth {
+      margin-top: 0;
+      margin-bottom: var(--base);
     }
   }
 }

packages/payload/src/admin/components/views/Global/Default/index.tsx

@@ -5,39 +5,27 @@ import type { GlobalEditViewProps } from '../../types'
 
 import { getTranslation } from '../../../../../utilities/getTranslation'
 import { DocumentControls } from '../../../elements/DocumentControls'
-import { Gutter } from '../../../elements/Gutter'
-import ViewDescription from '../../../elements/ViewDescription'
-import RenderFields from '../../../forms/RenderFields'
-import { filterFields } from '../../../forms/RenderFields/filterFields'
-import { fieldTypes } from '../../../forms/field-types'
+import { DocumentFields } from '../../../elements/DocumentFields'
 import { LeaveWithoutSaving } from '../../../modals/LeaveWithoutSaving'
 import Meta from '../../../utilities/Meta'
 import { SetStepNav } from '../../collections/Edit/SetStepNav'
-import './index.scss'
-
-const baseClass = 'global-default-edit'
 
 export const DefaultGlobalEdit: React.FC<GlobalEditViewProps> = (props) => {
-  const { i18n } = useTranslation('general')
-
   const { apiURL, data, global, permissions } = props
+  const { i18n } = useTranslation()
 
   const { admin: { description } = {}, fields, label } = global
 
   const hasSavePermission = permissions?.update?.permission
 
-  const sidebarFields = filterFields({
-    fieldSchema: fields,
-    fieldTypes,
-    filter: (field) => field?.admin?.position === 'sidebar',
-    permissions: permissions.fields,
-    readOnly: !hasSavePermission,
-  })
-
-  const hasSidebar = sidebarFields && sidebarFields.length > 0
-
   return (
     <React.Fragment>
+      <Meta
+        description={getTranslation(label, i18n)}
+        keywords={`${getTranslation(label, i18n)}, Payload, CMS`}
+        title={getTranslation(label, i18n)}
+      />
+      {!(global.versions?.drafts && global.versions?.drafts?.autosave) && <LeaveWithoutSaving />}
       <SetStepNav global={global} />
       <DocumentControls
         apiURL={apiURL}
@@ -47,60 +35,12 @@ export const DefaultGlobalEdit: React.FC<GlobalEditViewProps> = (props) => {
         isEditing
         permissions={permissions}
       />
-      <div
-        className={[
-          baseClass,
-          hasSidebar ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <div className={`${baseClass}__main`}>
-          <Meta
-            description={getTranslation(label, i18n)}
-            keywords={`${getTranslation(label, i18n)}, Payload, CMS`}
-            title={getTranslation(label, i18n)}
-          />
-          {!(global.versions?.drafts && global.versions?.drafts?.autosave) && (
-            <LeaveWithoutSaving />
-          )}
-          <Gutter className={`${baseClass}__edit`}>
-            <header className={`${baseClass}__header`}>
-              {description && (
-                <div className={`${baseClass}__sub-header`}>
-                  <ViewDescription description={description} />
-                </div>
-              )}
-            </header>
-            <RenderFields
-              fieldSchema={fields}
-              fieldTypes={fieldTypes}
-              filter={(field) =>
-                !field.admin.position ||
-                (field.admin.position && field.admin.position !== 'sidebar')
-              }
-              permissions={permissions.fields}
-              readOnly={!hasSavePermission}
-            />
-          </Gutter>
-        </div>
-        {hasSidebar && (
-          <div className={`${baseClass}__sidebar-wrap`}>
-            <div className={`${baseClass}__sidebar`}>
-              <div className={`${baseClass}__sidebar-sticky-wrap`}>
-                <div className={`${baseClass}__sidebar-fields`}>
-                  <RenderFields
-                    fieldTypes={fieldTypes}
-                    fields={sidebarFields}
-                    permissions={permissions.fields}
-                    readOnly={!hasSavePermission}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
+      <DocumentFields
+        description={description}
+        fields={fields}
+        hasSavePermission={hasSavePermission}
+        permissions={permissions}
+      />
     </React.Fragment>
   )
 }

packages/payload/src/admin/components/views/Global/Routes/index.tsx

@@ -41,9 +41,11 @@ export const GlobalRoutes: React.FC<GlobalEditViewProps> = (props) => {
           <Unauthorized />
         )}
       </Route>
-      <Route exact key={`${global.slug}-api`} path={`${adminRoute}/globals/${global.slug}/api`}>
-        {permissions?.read ? <CustomGlobalComponent view="API" {...props} /> : <Unauthorized />}
-      </Route>
+      {global?.admin?.hideAPIURL !== true && (
+        <Route exact key={`${global.slug}-api`} path={`${adminRoute}/globals/${global.slug}/api`}>
+          {permissions?.read ? <CustomGlobalComponent view="API" {...props} /> : <Unauthorized />}
+        </Route>
+      )}
       <Route
         exact
         key={`${global.slug}-view-version`}

packages/payload/src/admin/components/views/LivePreview/Toolbar/Controls/index.tsx

@@ -19,6 +19,7 @@ export const ToolbarControls: React.FC<EditViewProps> = () => {
       {breakpoints?.length > 0 && (
         <select
           className={`${baseClass}__breakpoint`}
+          name="live-preview-breakpoint"
           onChange={(e) => setBreakpoint(e.target.value)}
           value={breakpoint}
         >

packages/payload/src/admin/components/views/LivePreview/Toolbar/SizeInput/index.tsx

@@ -58,6 +58,7 @@ export const PreviewFrameSizeInput: React.FC<{
     <input
       className={baseClass}
       min={0}
+      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}
       onChange={handleChange}
       step={1}
       type="number"

packages/payload/src/admin/components/views/collections/Edit/Default/index.scss

@@ -1,168 +1,15 @@
 @import '../../../../../scss/styles.scss';
 
 .collection-default-edit {
-  width: 100%;
-  display: flex;
-  --doc-sidebar-width: 500px;
-
-  &--has-sidebar {
-    .collection-default-edit {
-      &__edit {
-        [dir='ltr'] & {
-          top: 0;
-          right: 0;
-          border-right: 1px solid var(--theme-elevation-100);
-          padding-right: calc(var(--base) * 2);
-        }
-
-        [dir='rtl'] & {
-          top: 0;
-          left: 0;
-          border-left: 1px solid var(--theme-elevation-100);
-          padding-left: calc(var(--base) * 2);
-        }
-      }
-
-      &__fields {
-        & > .tabs-field,
-        & > .group-field {
-          margin-right: calc(var(--base) * -2);
-        }
-      }
-    }
-  }
-
-  &__main {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    flex-grow: 1;
-  }
-
-  &__edit {
-    padding-top: calc(var(--base) * 1.5);
-    padding-bottom: var(--spacing-view-bottom);
-    flex-grow: 1;
-  }
-
   &__auth {
-    margin-bottom: var(--base);
-  }
-
-  &__sidebar-wrap {
-    position: sticky;
-    top: var(--doc-controls-height);
-    height: calc(100vh - var(--doc-controls-height));
-    width: var(--doc-sidebar-width);
-    flex-shrink: 0;
-  }
-
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  &__sidebar-sticky-wrap {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  &__sidebar-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-top: calc(var(--base) * 1.5);
-    padding-left: calc(var(--base) * 2);
-    padding-right: var(--gutter-h);
-    padding-bottom: var(--spacing-view-bottom);
-  }
-
-  &__label {
-    color: var(--theme-elevation-400);
-  }
-
-  @include large-break {
-    --doc-sidebar-width: 350px;
-  }
-
-  @include mid-break {
-    display: block;
-
-    &--has-sidebar {
-      .collection-default-edit {
-        &__main {
-          width: 100%;
-        }
-
-        &__edit {
-          [dir='ltr'] & {
-            border-right: 0;
-            padding-right: var(--gutter-h);
-          }
-
-          [dir='rtl'] & {
-            border-left: 0;
-            padding-left: var(--gutter-h);
-          }
-        }
-
-        &__fields {
-          & > .tabs-field,
-          & > .group-field {
-            margin-right: calc(var(--gutter-h) * -1);
-          }
-        }
-      }
-    }
-
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-      border-left: 0;
-      margin-top: calc(var(--base) / 2);
-    }
-
-    &__form {
-      display: block;
-    }
-
-    &__sidebar-fields {
-      padding-top: 0;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-      gap: base(0.5);
-
-      [dir='ltr'] & {
-        padding-right: var(--gutter-h);
-      }
-
-      [dir='rtl'] & {
-        padding-left: var(--gutter-h);
-      }
-    }
-
-    &__sidebar {
-      padding-bottom: base(3.5);
-      overflow: visible;
-    }
+    margin-bottom: calc(var(--base) * 2);
+    margin-top: calc(var(--base) * 0.5);
   }
 
   @include small-break {
-    &__sidebar-wrap {
-      min-width: initial;
-    }
-
-    &__edit {
-      padding-top: calc(var(--base) / 2);
+    &__auth {
+      margin-top: 0;
+      margin-bottom: var(--base);
     }
   }
 }

packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx

@@ -5,10 +5,7 @@ import type { CollectionEditViewProps } from '../../../types'
 
 import { getTranslation } from '../../../../../../utilities/getTranslation'
 import { DocumentControls } from '../../../../elements/DocumentControls'
-import { Gutter } from '../../../../elements/Gutter'
-import RenderFields from '../../../../forms/RenderFields'
-import { filterFields } from '../../../../forms/RenderFields/filterFields'
-import { fieldTypes } from '../../../../forms/field-types'
+import { DocumentFields } from '../../../../elements/DocumentFields'
 import { LeaveWithoutSaving } from '../../../../modals/LeaveWithoutSaving'
 import Meta from '../../../../utilities/Meta'
 import Auth from '../Auth'
@@ -38,18 +35,21 @@ export const DefaultCollectionEdit: React.FC<CollectionEditViewProps> = (props)
 
   const operation = isEditing ? 'update' : 'create'
 
-  const sidebarFields = filterFields({
-    fieldSchema: fields,
-    fieldTypes,
-    filter: (field) => field?.admin?.position === 'sidebar',
-    permissions: permissions.fields,
-    readOnly: !hasSavePermission,
-  })
-
-  const hasSidebar = sidebarFields && sidebarFields.length > 0
-
   return (
     <Fragment>
+      <Meta
+        description={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
+          collection.labels.singular,
+          i18n,
+        )}`}
+        keywords={`${getTranslation(collection.labels.singular, i18n)}, Payload, CMS`}
+        title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
+          collection.labels.singular,
+          i18n,
+        )}`}
+      />
+      {!(collection.versions?.drafts && collection.versions?.drafts?.autosave) &&
+        !disableLeaveWithoutSaving && <LeaveWithoutSaving />}
       <SetStepNav collection={collection} id={id} isEditing={isEditing} />
       <DocumentControls
         apiURL={apiURL}
@@ -61,29 +61,9 @@ export const DefaultCollectionEdit: React.FC<CollectionEditViewProps> = (props)
         isEditing={isEditing}
         permissions={permissions}
       />
-      <div
-        className={[
-          baseClass,
-          hasSidebar ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <div className={`${baseClass}__main`}>
-          <Meta
-            description={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
-              collection.labels.singular,
-              i18n,
-            )}`}
-            keywords={`${getTranslation(collection.labels.singular, i18n)}, Payload, CMS`}
-            title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
-              collection.labels.singular,
-              i18n,
-            )}`}
-          />
-          {!(collection.versions?.drafts && collection.versions?.drafts?.autosave) &&
-            !disableLeaveWithoutSaving && <LeaveWithoutSaving />}
-          <Gutter className={`${baseClass}__edit`}>
+      <DocumentFields
+        BeforeFields={() => (
+          <Fragment>
             {auth && (
               <Auth
                 className={`${baseClass}__auth`}
@@ -97,33 +77,12 @@ export const DefaultCollectionEdit: React.FC<CollectionEditViewProps> = (props)
               />
             )}
             {upload && <Upload collection={collection} internalState={internalState} />}
-            <RenderFields
-              className={`${baseClass}__fields`}
-              fieldSchema={fields}
-              fieldTypes={fieldTypes}
-              filter={(field) => !field?.admin?.position || field?.admin?.position !== 'sidebar'}
-              permissions={permissions.fields}
-              readOnly={!hasSavePermission}
-            />
-          </Gutter>
-        </div>
-        {hasSidebar && (
-          <div className={`${baseClass}__sidebar-wrap`}>
-            <div className={`${baseClass}__sidebar`}>
-              <div className={`${baseClass}__sidebar-sticky-wrap`}>
-                <div className={`${baseClass}__sidebar-fields`}>
-                  <RenderFields
-                    fieldTypes={fieldTypes}
-                    fields={sidebarFields}
-                    permissions={permissions.fields}
-                    readOnly={!hasSavePermission}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          </Fragment>
         )}
-      </div>
+        fields={fields}
+        hasSavePermission={hasSavePermission}
+        permissions={permissions}
+      />
     </Fragment>
   )
 }

packages/payload/src/admin/components/views/collections/Edit/Routes/index.tsx

@@ -41,13 +41,19 @@ export const CollectionRoutes: React.FC<CollectionEditViewProps> = (props) => {
           <Unauthorized />
         )}
       </Route>
-      <Route
-        exact
-        key={`${collection.slug}-api`}
-        path={`${adminRoute}/collections/${collection.slug}/:id/api`}
-      >
-        {permissions?.read ? <CustomCollectionComponent view="API" {...props} /> : <Unauthorized />}
-      </Route>
+      {collection?.admin?.hideAPIURL !== true && (
+        <Route
+          exact
+          key={`${collection.slug}-api`}
+          path={`${adminRoute}/collections/${collection.slug}/:id/api`}
+        >
+          {permissions?.read ? (
+            <CustomCollectionComponent view="API" {...props} />
+          ) : (
+            <Unauthorized />
+          )}
+        </Route>
+      )}
       <Route
         exact
         key={`${collection.slug}-view-version`}

packages/payload/src/admin/components/views/collections/List/Default.tsx

@@ -10,7 +10,7 @@ import Button from '../../../elements/Button'
 import DeleteMany from '../../../elements/DeleteMany'
 import EditMany from '../../../elements/EditMany'
 import { Gutter } from '../../../elements/Gutter'
-import ListControls from '../../../elements/ListControls'
+import { ListControls } from '../../../elements/ListControls'
 import ListSelection from '../../../elements/ListSelection'
 import Paginator from '../../../elements/Paginator'
 import PerPage from '../../../elements/PerPage'
@@ -41,6 +41,7 @@ const DefaultList: React.FC<Props> = (props) => {
     data,
     handlePageChange,
     handlePerPageChange,
+    handleSearchChange,
     handleSortChange,
     handleWhereChange,
     hasCreatePermission,
@@ -48,6 +49,7 @@ const DefaultList: React.FC<Props> = (props) => {
     modifySearchParams,
     newDocumentURL,
     resetParams,
+    titleField,
   } = props
 
   const {
@@ -99,10 +101,12 @@ const DefaultList: React.FC<Props> = (props) => {
           </header>
           <ListControls
             collection={collection}
+            handleSearchChange={handleSearchChange}
             handleSortChange={handleSortChange}
             handleWhereChange={handleWhereChange}
             modifySearchQuery={modifySearchParams}
             resetParams={resetParams}
+            titleField={titleField}
           />
           {Array.isArray(BeforeListTable) &&
             BeforeListTable.map((Component, i) => <Component key={i} {...props} />)}