chore(release): db-mongodb/1.0.4 [skip ci]

* chore(deps): bump sass and sass-loader

* chore: handle sass slash div deprecation

.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

@@ -132,7 +132,12 @@ jobs:
           key: ${{ github.sha }}-${{ github.run_number }}
 
       - name: E2E Tests
-        run: pnpm test:e2e --part ${{ matrix.part }} --bail
+        uses: nick-fields/retry@v2
+        with:
+          retry_on: error
+          max_attempts: 2
+          timeout_minutes: 15
+          command: pnpm test:e2e --part ${{ matrix.part }} --bail
 
       - uses: actions/upload-artifact@v3
         if: always()
@@ -213,8 +218,9 @@ jobs:
       fail-fast: false
       matrix:
         pkg:
-          - plugin-cloud
           - create-payload-app
+          - plugin-cloud
+          - plugin-nested-docs
 
     steps:
       - name: Use Node.js 18

.release-it.json

@@ -1,22 +0,0 @@
-{
-  "verbose": true,
-  "git": {
-    "commitMessage": "chore(release): v${version}",
-    "requireCleanWorkingDir": true
-  },
-  "github": {
-    "release": true
-  },
-  "npm": {
-    "skipChecks": true
-  },
-  "hooks": {
-    "before:init": ["pnpm i", "pnpm clean", "pnpm test"]
-  },
-  "plugins": {
-    "@release-it/conventional-changelog": {
-      "preset": "angular",
-      "infile": "CHANGELOG.md"
-    }
-  }
-}

.release-it.pre.js

@@ -0,0 +1,16 @@
+module.exports = {
+  verbose: true,
+  git: {
+    requireCleanWorkingDir: false,
+    commit: false,
+    push: false,
+    tag: false,
+  },
+  npm: {
+    skipChecks: true,
+    tag: 'beta',
+  },
+  hooks: {
+    'before:init': ['pnpm install', 'pnpm clean', 'pnpm build'],
+  },
+}

.release-it.pre.json

@@ -1,25 +0,0 @@
-{
-  "verbose": true,
-  "git": {
-    "requireCleanWorkingDir": false,
-    "commit": false,
-    "push": false,
-    "tag": false
-  },
-  "github": {
-    "release": true
-  },
-  "npm": {
-    "skipChecks": true,
-    "tag": "canary"
-  },
-  "hooks": {
-    "before:init": ["pnpm i", "pnpm clean", "pnpm test"]
-  },
-  "plugins": {
-    "@release-it/conventional-changelog": {
-      "preset": "angular",
-      "infile": "CHANGELOG.md"
-    }
-  }
-}

CHANGELOG.md

@@ -1,3 +1,119 @@
+## [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)
+
+
+### Features
+
+* allows filterOptions to return null ([c4cac99](https://github.com/payloadcms/payload/commit/c4cac998752730e7084598c92c77789da8c82e0d))
+* **live-preview:** caches field schema ([#3711](https://github.com/payloadcms/payload/issues/3711)) ([dd0ac06](https://github.com/payloadcms/payload/commit/dd0ac066ce2ed88b85025309303610a95b6089e1))
+
+### Bug Fixes
+
+* autosave time shown minutes only ([#3492](https://github.com/payloadcms/payload/issues/3492)) ([e311e8f](https://github.com/payloadcms/payload/commit/e311e8fff9cd4264d7a71903f63c4fa825a3564d))
+* blocks within groups in postgres ([45a62ba](https://github.com/payloadcms/payload/commit/45a62ba949aca33b25e0808773a5c2f1cf4adf82))
+* bug with seeding ecommerce ([993568a](https://github.com/payloadcms/payload/commit/993568a1959ea10f960e35e4ed7a8e06af672a72))
+* corrects add block index ([#3681](https://github.com/payloadcms/payload/issues/3681)) ([3c50443](https://github.com/payloadcms/payload/commit/3c5044368d5b30c76a2ff20c25b9234ef89dc205))
+* misc upload crop/focal point updates ([#3580](https://github.com/payloadcms/payload/issues/3580)) ([d616772](https://github.com/payloadcms/payload/commit/d6167727401a01282345e63636560e029ae8e0f3))
+* renders mobile document controls ([#3695](https://github.com/payloadcms/payload/issues/3695)) ([1625ff2](https://github.com/payloadcms/payload/commit/1625ff244e6e81e6edc0357037c3abc1a3bf8ba7))
+* some local operations missing req.transactionID ([#3651](https://github.com/payloadcms/payload/issues/3651)) ([150799e](https://github.com/payloadcms/payload/commit/150799e10e580281d1af49388eb142ee9639a002))
+* **richtext-*:** extra fields not being iterated correctly ([#3693](https://github.com/payloadcms/payload/issues/3693)) ([b8a5866](https://github.com/payloadcms/payload/commit/b8a58666e70f604af1e1cf349bcb4f9add0147e7))
+* **richtext-*:** link drawer form receiving incorrect field schema ([#3696](https://github.com/payloadcms/payload/issues/3696)) ([cb39354](https://github.com/payloadcms/payload/commit/cb39354a9de3d20960110e453f62c4aa166d8448))
+* **richtext-lexical:** [#3682](https://github.com/payloadcms/payload/issues/3682) isolated editor container causing z-index issues ([24918fe](https://github.com/payloadcms/payload/commit/24918fe1d2ca251e211632765d370c214cef2a38))
+* **templates:** user access control ([#3712](https://github.com/payloadcms/payload/issues/3712)) ([8b8ceab](https://github.com/payloadcms/payload/commit/8b8ceabbdd6354761e7d744cacb1192cac3a2427))
+
+
+## [2.0.6](https://github.com/payloadcms/payload/compare/v2.0.5...v2.0.6) (2023-10-14)
+
+### Bug Fixes
+
+* document sidebar vertical overflow ([#3639](https://github.com/payloadcms/payload/issues/3639)) ([fcd4c8d](https://github.com/payloadcms/payload/commit/fcd4c8d83040f00d10142ca12ba92616618b966e))
+* login form clearing out and field spacing ([#3633](https://github.com/payloadcms/payload/issues/3633)) ([4bd01df](https://github.com/payloadcms/payload/commit/4bd01df411e4ad2ccacdcd6de0fb21a8145c3964))
+* sidebar field permissions ([#3629](https://github.com/payloadcms/payload/issues/3629)) ([c956a85](https://github.com/payloadcms/payload/commit/c956a85252bc7de1686925cc783694383c0ac9be))
+* preview button conditions ([#3613](https://github.com/payloadcms/payload/issues/3613)) ([beed83b](https://github.com/payloadcms/payload/commit/beed83b231b19090902dd502ff5eab054a67a1a6))
+* allows drafts to be duplicated ([1a99d66](https://github.com/payloadcms/payload/commit/1a99d66cd0675cf2cb2c4317a121721f35682ff3))
+
+
+## [2.0.5](https://github.com/payloadcms/payload/compare/v2.0.4...v2.0.5) (2023-10-12)
+
+### Bug Fixes
+
+* properly renders custom buttons for globals ([#3616](https://github.com/payloadcms/payload/issues/3616)) ([05cc287](https://github.com/payloadcms/payload/commit/05cc2873b4a19e2bd46be778f3610643d3e15d09))
+* minor type issue in richText validate function ([06a51b3](https://github.com/payloadcms/payload/commit/06a51b3c9b9045b23051807aa03b222b542b46f5))
+* live preview device size ([#3606](https://github.com/payloadcms/payload/issues/3606)) ([8bbac60](https://github.com/payloadcms/payload/commit/8bbac60e60a6dbe4dc0c7b05edbca7f6f2d1c569))
+* properly handles nested routes for live preview ([#3586](https://github.com/payloadcms/payload/issues/3586)) ([6486468](https://github.com/payloadcms/payload/commit/64864686c418f9822bf61c45ece078a39e81b4cb))
+* various stepnav related issues ([#3599](https://github.com/payloadcms/payload/issues/3599)) ([aaf8839](https://github.com/payloadcms/payload/commit/aaf883909c588bae1145ddddc5291a98740c2c03))
+* database adapter types ([cc56da1](https://github.com/payloadcms/payload/commit/cc56da11d635d11ebbee67e6d0919c7275ede36e))
+* postgres select fields within groups ([#3570](https://github.com/payloadcms/payload/issues/3570)) ([06e2fa9](https://github.com/payloadcms/payload/commit/06e2fa9d111c18fad3422953082266db9329fc91))
+* [#3511](https://github.com/payloadcms/payload/issues/3511), documents don't delete their versions ([#3520](https://github.com/payloadcms/payload/issues/3520)) ([e3c7765](https://github.com/payloadcms/payload/commit/e3c776523a64da03a4756ee5ae8a84175090979f))
+
+### Documentation
+
+- updates building your own live preview hook ([#3604](https://github.com/payloadcms/payload/issues/3604)) ([15c7f0dbf](https://github.com/payloadcms/payload/commit/15c7f0dbf3ebf5c6a2bb011970dda515a15acb56))
+- update config overview ([cfd923140](https://github.com/payloadcms/payload/commit/1a006fef19a215d7ef74c71a210fd511727f95bd))
+
+## [2.0.4](https://github.com/payloadcms/payload/compare/v2.0.3...v2.0.4) (2023-10-12)
+
+### Bug Fixes
+
+- API tab breadcrumbs and results indentation ([#3564](https://github.com/payloadcms/payload/issues/3564)) ([e0afeec](https://github.com/payloadcms/payload/commit/e0afeeca974d0a0cac7aca8e40f9436449c902b5))
+- sticky sidebar ([#3563](https://github.com/payloadcms/payload/issues/3563)) ([76e306d](https://github.com/payloadcms/payload/commit/76e306ddd8aae45f03fd4715415d6a44501a9400))
+- sidebar width when fields have long descriptions ([#3562](https://github.com/payloadcms/payload/issues/3562)) ([cfc78ed](https://github.com/payloadcms/payload/commit/cfc78ed4f58647769f651da5a952fed20cfb217f))
+- row field margins ([#3558](https://github.com/payloadcms/payload/issues/3558)) ([6d9353b](https://github.com/payloadcms/payload/commit/6d9353b53f4197bae2b15ca95298a87d784c7e76))
+- removes nested array field configs from array value ([#3549](https://github.com/payloadcms/payload/issues/3549)) ([af892ec](https://github.com/payloadcms/payload/commit/af892ecb0e67777a97206bb5fccf489387ce68fc))
+- [#3521](https://github.com/payloadcms/payload/issues/3521) ([eb97acd](https://github.com/payloadcms/payload/commit/eb97acd408f128438c2122ab6a6e2930f5b4a1ca))
+- [#3540](https://github.com/payloadcms/payload/issues/3540) ([2567ac5](https://github.com/payloadcms/payload/commit/2567ac58bac851d0a15ee40db0f5f4737b199a75))
+- row field width ([#3550](https://github.com/payloadcms/payload/issues/3550)) ([9ff014b](https://github.com/payloadcms/payload/commit/9ff014bbfe08d7b114c11824294f0d59f5f6c2c3))
+- [#3541](https://github.com/payloadcms/payload/issues/3541) ([e6f0d35](https://github.com/payloadcms/payload/commit/e6f0d3598549a921e36f470adfcbacbaebaea53f))
+- renders global label as page title ([#3532](https://github.com/payloadcms/payload/issues/3532)) ([ace3e57](https://github.com/payloadcms/payload/commit/ace3e577f6b1cbeb12860dc936c578c2a1f68570))
+- increases document controls popup list button hitbox ([#3529](https://github.com/payloadcms/payload/issues/3529)) ([f009593](https://github.com/payloadcms/payload/commit/f0095937bafdd85c53c99bcc1d29d3361aa07238))
+
+### Documentation
+
+- removes MONGODB_URI ([8bfae6b93](https://github.com/payloadcms/payload/commit/8bfae6b932d6c9bd0c628a203ebf8d24121d66f8))
+- adds build your own plugin page ([#3184](https://github.com/payloadcms/payload/pull/3184)) ([15f650afd](https://github.com/payloadcms/payload/commit/15f650afdef717d62c162846fec77aa0f326bb43))
+
+## [2.0.3](https://github.com/payloadcms/payload/compare/v2.0.2...v2.0.3) (2023-10-09)
+
+### Bug Fixes
+
+- webpack export default was not found [#3494](https://github.com/payloadcms/payload/issues/3494) ([be049ce](https://github.com/payloadcms/payload/commit/be049cea0029cf497822e337777b8a86b7d38bed))
+- postgres generated type id [#3504](https://github.com/payloadcms/payload/issues/3504) ([c90d1fa](https://github.com/payloadcms/payload/commit/c90d1faa7fedd5d902949089fd457c56eed4643d))
+- hasMany relationships unable to be cleared [#3513](https://github.com/payloadcms/payload/issues/3513) ([5d9384f](https://github.com/payloadcms/payload/commit/5d9384f53052c96403d8c07ae9d05edf3676c4ef))
+
+### Documentation
+
+- move payload script mention to top of migrations ([26967fb92](https://github.com/payloadcms/payload/commit/26967fb92))
+- payload script in package.json ([2f86c196e](https://github.com/payloadcms/payload/commit/2f86c196e))
+- updates required node version ([70e068b18](https://github.com/payloadcms/payload/commit/70e068b18))
+- improves custom views (#3499) ([6c17222a6](https://github.com/payloadcms/payload/commit/6c17222a6))
+
+## [2.0.2](https://github.com/payloadcms/payload/compare/v2.0.1...v2.0.2) (2023-10-09)
+
+### Bug Fixes
+
+- beforeOperation hooks now correctly only run once ([e5d6a75](https://github.com/payloadcms/payload/commit/e5d6a75449acce2e53820a65386f1af78ff1317b))
+
+## [2.0.1](https://github.com/payloadcms/payload/compare/v2.0.0...v2.0.1) (2023-10-09)
+
+### Bug Fixes
+
+- fix: richtext adapter types (#3497) ([7679e3f0a](https://github.com/payloadcms/payload/commit/7679e3f0aa351832ca933a3978d5931c47375e8b))
+
+### Documentation
+
+- remove --save flag for install command ([f7c35df6d](https://github.com/payloadcms/payload/commit/f7c35df6de6817ef33837f60951cd2812431fec7))
+- updates live preview docs ([ca97f692c](https://github.com/payloadcms/payload/commit/ca97f692c3d470e658e417daf29213b2b2b49e11))
+- fixes label for rich text overview ([7df1256bf](https://github.com/payloadcms/payload/commit/7df1256bf61daa911089d308cf7c0532d524c9c6))
+
 ## [2.0.0](https://github.com/payloadcms/payload/releases/tag/v2.0.0) (2023-10-09)
 
 ### Features
@@ -123,7 +239,7 @@ To avoid any issues, you can pass the `req.transactionID` through to your Local
 
 ### ⚠️ Locales now have more functionality, and in some places, you might need to update custom code
 
-Payload's locales have become more powerful and now allow you to customize more aspects per locale such as a human-friendly label and if the locale is RTL or not. 
+Payload's locales have become more powerful and now allow you to customize more aspects per locale such as a human-friendly label and if the locale is RTL or not.
 
 This means that certain functions now return a different shape, such as `useLocale`. This hook used to return a string of the locale code you are currently editing, but it now returns an object with type of `Locale`.
 
@@ -218,7 +334,7 @@ To pass connection options for MongoDB, you now need to pass them to `db: mongoo
 
 ### ⚠️ Some types have changed locations
 
-If you are importing types from Payload, some of their locations may have changed. An example would be Slate-specific types being no longer exported from Payload itself—they are now exported from the `@payloadcms/richtext-slate` package. 
+If you are importing types from Payload, some of their locations may have changed. An example would be Slate-specific types being no longer exported from Payload itself—they are now exported from the `@payloadcms/richtext-slate` package.
 
 ### Recap
 

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/local-api/overview.mdx

@@ -131,6 +131,7 @@ const result = await payload.find({
   depth: 2,
   page: 1,
   limit: 10,
+  pagination: false, // If you want to disable pagination count, etc.
   where: {}, // pass a `where` query here
   sort: '-title',
   locale: 'en',

docs/queries/pagination.mdx

@@ -59,3 +59,7 @@ All Payload APIs support the pagination controls below. With them, you can creat
 | ------- | --------------------------------------- |
 | `limit` | Limits the number of documents returned |
 | `page`  | Get a specific page number              |
+
+### Disabling pagination within Local API
+
+For `find` operations within the Local API, you can disable pagination to retrieve all documents from a collection by passing `pagination: false` to the `find` local operation. This is not supported in REST or GraphQL, however, because it could potentially lead to malicious activity.

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/auth/payload/package.json

@@ -17,9 +17,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "latest"

examples/custom-server/package.json

@@ -20,9 +20,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "dotenv": "^8.2.0",
     "escape-html": "^1.0.3",
     "express": "^4.17.1",

examples/draft-preview/payload/package.json

@@ -18,9 +18,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "latest"

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/form-builder/payload/package.json

@@ -15,9 +15,9 @@
     "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "@faceless-ui/modal": "^2.0.1",
     "@payloadcms/plugin-form-builder": "^1.0.12",
     "@payloadcms/plugin-seo": "^1.0.8",

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/live-preview/payload/package.json

@@ -18,9 +18,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "latest"

examples/multi-tenant/package.json

@@ -18,9 +18,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "latest"

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
 

examples/redirects/payload/package.json

@@ -17,9 +17,9 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0-beta.5",
-    "@payloadcms/db-mongodb": "^1.0.0-beta.8",
-    "@payloadcms/richtext-slate": "^1.0.0-beta.4",
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
     "@payloadcms/plugin-redirects": "^1.0.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",

examples/testing/yarn.lock

@@ -496,6 +496,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+  dependencies:
+    "@babel/types" "^7.23.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-compilation-targets@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
@@ -507,18 +517,23 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-environment-visitor@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
   integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
 
-"@babel/helper-function-name@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
-  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
@@ -574,6 +589,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz#601fa28e4cc06786c18912dca138cec73b882044"
   integrity sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
@@ -602,6 +622,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95"
   integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==
 
+"@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
+
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -707,7 +732,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
+"@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
   integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
@@ -717,18 +742,18 @@
     "@babel/types" "^7.22.15"
 
 "@babel/traverse@^7.22.15", "@babel/traverse@^7.22.17":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.17.tgz#b23c203ab3707e3be816043081b4a994fcacec44"
-  integrity sha512-xK4Uwm0JnAMvxYZxOVecss85WxTEIbTa7bnGyf/+EgCL5Zt3U7htUpEOWv9detPlamGKuRzCqw74xVglDWpPdg==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
   dependencies:
     "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.22.15"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.16"
-    "@babel/types" "^7.22.17"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
@@ -741,6 +766,15 @@
     "@babel/helper-validator-identifier" "^7.22.15"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcherny/json-schema-ref-parser@9.0.9":
   version "9.0.9"
   resolved "https://registry.yarnpkg.com/@bcherny/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz#09899d405bc708c0acac0066ae8db5b94d465ca4"

package.json

@@ -47,6 +47,7 @@
     "@types/prompts": "^2.4.5",
     "@types/qs": "6.9.7",
     "@types/react": "18.2.15",
+    "@types/semver": "^7.5.3",
     "@types/shelljs": "0.8.12",
     "@types/testing-library__jest-dom": "5.14.8",
     "chalk": "^5.3.0",
@@ -59,6 +60,7 @@
     "fs-extra": "10.1.0",
     "get-port": "5.1.1",
     "glob": "8.1.0",
+    "graphql-request": "6.1.0",
     "husky": "^8.0.3",
     "isomorphic-fetch": "3.0.0",
     "jest": "29.6.4",
@@ -73,6 +75,7 @@
     "prompts": "2.4.2",
     "qs": "6.11.2",
     "rimraf": "3.0.2",
+    "semver": "^7.5.4",
     "shelljs": "0.8.5",
     "simple-git": "^3.20.0",
     "slash": "3.0.0",

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/create-payload-app/.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "commonjs"
+  }
+}

packages/create-payload-app/package.json

@@ -1,18 +1,14 @@
 {
   "name": "create-payload-app",
-  "version": "0.5.2",
+  "version": "1.0.0",
   "license": "MIT",
   "bin": {
     "create-payload-app": "bin/cli.js"
   },
   "scripts": {
-    "build": "tsc && pnpm copyfiles",
-    "copyfiles": "copyfiles -u 1 \"src/templates/**\" \"src/lib/common-files/**\" dist",
+    "build": "pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "clean": "rimraf dist",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint \"src/**/*.ts\"",
-    "lint:fix": "eslint \"src/**/*.ts\" --fix",
-    "lint-staged": "lint-staged --quiet",
     "test": "jest",
     "prepublishOnly": "pnpm test && pnpm clean && pnpm build"
   },

packages/create-payload-app/src/lib/create-project.spec.ts

@@ -4,6 +4,7 @@ import type { BundlerType, CliArgs, DbType, ProjectTemplate } from '../types'
 import { createProject } from './create-project'
 import { bundlerPackages, dbPackages, editorPackages } from './packages'
 import exp from 'constants'
+import { getValidTemplates } from './templates'
 
 const projectDir = path.resolve(__dirname, './tmp')
 describe('createProject', () => {
@@ -78,17 +79,20 @@ describe('createProject', () => {
     })
 
     describe('db adapters and bundlers', () => {
+      const templates = getValidTemplates()
+
       it.each([
-        ['mongodb', 'webpack'],
-        ['postgres', 'webpack'],
-      ])('update config and deps: %s, %s', async (db, bundler) => {
+        ['blank', 'mongodb', 'webpack'],
+        ['blank', 'postgres', 'webpack'],
+        ['website', 'mongodb', 'webpack'],
+        ['website', 'postgres', 'webpack'],
+        ['ecommerce', 'mongodb', 'webpack'],
+        ['ecommerce', 'postgres', 'webpack'],
+      ])('update config and deps: %s, %s, %s', async (templateName, db, bundler) => {
         const projectName = 'starter-project'
-        const template: ProjectTemplate = {
-          name: 'blank',
-          type: 'starter',
-          url: 'https://github.com/payloadcms/payload/templates/blank',
-          description: 'Blank Template',
-        }
+
+        const template = templates.find((t) => t.name === templateName)
+
         await createProject({
           cliArgs: args,
           projectName,
@@ -124,7 +128,12 @@ describe('createProject', () => {
           editorReplacement.version,
         )
 
-        const payloadConfigPath = path.resolve(projectDir, 'src/payload.config.ts')
+        let payloadConfigPath = path.resolve(projectDir, 'src/payload.config.ts')
+
+        // Website and ecommerce templates have payload.config.ts in src/payload
+        if (!fse.existsSync(payloadConfigPath)) {
+          payloadConfigPath = path.resolve(projectDir, 'src/payload/payload.config.ts')
+        }
         const content = fse.readFileSync(payloadConfigPath, 'utf-8')
 
         // Check payload.config.ts

packages/create-payload-app/tsconfig.json

@@ -19,6 +19,5 @@
     "src/**/*.spec.ts",
     "src/**/*.spec.tsx"
   ],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
-  "references": [{ "path": "../payload" }]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"]
 }

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.5",
+  "version": "0.1.9",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "better-sqlite3": "^8.5.0"
+    "payload": "^2.0.0"
   },
   "publishConfig": {
     "main": "./dist/index.js",

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

@@ -33,7 +33,7 @@ export const findMany = async function find({
   const db = adapter.sessions[req.transactionID]?.db || adapter.drizzle
   const table = adapter.tables[tableName]
 
-  let limit = limitArg
+  let limit = limitArg ?? 10
   let totalDocs: number
   let totalPages: number
   let hasPrevPage: boolean
@@ -119,7 +119,11 @@ export const findMany = async function find({
     findManyArgs.where = inArray(adapter.tables[tableName].id, Object.keys(orderedIDMap))
   } else {
     findManyArgs.limit = limitArg === 0 ? undefined : limitArg
-    findManyArgs.offset = skip || (page - 1) * limitArg
+
+    const offset = skip || (page - 1) * limitArg
+
+    if (!Number.isNaN(offset)) findManyArgs.offset = offset
+
     if (where) {
       findManyArgs.where = where
     }

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
 
@@ -139,7 +139,7 @@ export const traverseFields = ({
                 currentTableName,
                 depth,
                 fields: block.fields,
-                path,
+                path: '',
                 topLevelArgs,
                 topLevelTableName,
               })

packages/db-postgres/src/queries/getTableColumnFromPath.ts

@@ -34,12 +34,14 @@ type Args = {
   aliasTable?: GenericTable
   collectionPath: string
   columnPrefix?: string
+  constraintPath?: string
   constraints?: Constraint[]
   fields: (Field | TabAsField)[]
   joinAliases: BuildQueryJoinAliases
   joins: BuildQueryJoins
   locale?: string
   pathSegments: string[]
+  rootTableName?: string
   selectFields: Record<string, GenericColumn>
   tableName: string
 }
@@ -53,17 +55,22 @@ export const getTableColumnFromPath = ({
   aliasTable,
   collectionPath,
   columnPrefix = '',
+  constraintPath: incomingConstraintPath,
   constraints = [],
   fields,
   joinAliases,
   joins,
   locale: incomingLocale,
   pathSegments: incomingSegments,
+  rootTableName: incomingRootTableName,
   selectFields,
   tableName,
 }: Args): TableColumn => {
   const fieldPath = incomingSegments[0]
   let locale = incomingLocale
+  const rootTableName = incomingRootTableName || tableName
+  let constraintPath = incomingConstraintPath || ''
+
   const field = flattenTopLevelFields(fields as Field[]).find(
     (fieldToFind) => fieldAffectsData(fieldToFind) && fieldToFind.name === fieldPath,
   ) as Field | TabAsField
@@ -105,6 +112,7 @@ export const getTableColumnFromPath = ({
           aliasTable,
           collectionPath,
           columnPrefix,
+          constraintPath,
           constraints,
           fields: field.tabs.map((tab) => ({
             ...tab,
@@ -114,6 +122,7 @@ export const getTableColumnFromPath = ({
           joins,
           locale,
           pathSegments: pathSegments.slice(1),
+          rootTableName,
           selectFields,
           tableName: newTableName,
         })
@@ -125,12 +134,14 @@ export const getTableColumnFromPath = ({
             aliasTable,
             collectionPath,
             columnPrefix: `${columnPrefix}${field.name}_`,
+            constraintPath,
             constraints,
             fields: field.fields,
             joinAliases,
             joins,
             locale,
             pathSegments: pathSegments.slice(1),
+            rootTableName,
             selectFields,
             tableName: newTableName,
           })
@@ -140,12 +151,14 @@ export const getTableColumnFromPath = ({
           aliasTable,
           collectionPath,
           columnPrefix,
+          constraintPath,
           constraints,
           fields: field.fields,
           joinAliases,
           joins,
           locale,
           pathSegments: pathSegments.slice(1),
+          rootTableName,
           selectFields,
           tableName: newTableName,
         })
@@ -172,12 +185,14 @@ export const getTableColumnFromPath = ({
           aliasTable,
           collectionPath,
           columnPrefix: `${columnPrefix}${field.name}_`,
+          constraintPath,
           constraints,
           fields: field.fields,
           joinAliases,
           joins,
           locale,
           pathSegments: pathSegments.slice(1),
+          rootTableName,
           selectFields,
           tableName: newTableName,
         })
@@ -185,6 +200,7 @@ export const getTableColumnFromPath = ({
 
       case 'array': {
         newTableName = `${tableName}_${toSnakeCase(field.name)}`
+        constraintPath = `${constraintPath}${field.name}.%.`
         if (locale && field.localized && adapter.payload.config.localization) {
           joins[newTableName] = and(
             eq(adapter.tables[tableName].id, adapter.tables[newTableName]._parentID),
@@ -206,12 +222,14 @@ export const getTableColumnFromPath = ({
         return getTableColumnFromPath({
           adapter,
           collectionPath,
+          constraintPath,
           constraints,
           fields: field.fields,
           joinAliases,
           joins,
           locale,
           pathSegments: pathSegments.slice(1),
+          rootTableName,
           selectFields,
           tableName: newTableName,
         })
@@ -229,12 +247,14 @@ export const getTableColumnFromPath = ({
             result = getTableColumnFromPath({
               adapter,
               collectionPath,
+              constraintPath: '',
               constraints: blockConstraints,
               fields: block.fields,
               joinAliases,
               joins,
               locale,
               pathSegments: pathSegments.slice(1),
+              rootTableName,
               selectFields: blockSelectFields,
               tableName: newTableName,
             })
@@ -283,9 +303,8 @@ export const getTableColumnFromPath = ({
       case 'relationship':
       case 'upload': {
         let relationshipFields
-        const relationTableName = `${tableName}_rels`
+        const relationTableName = `${rootTableName}_rels`
         const newCollectionPath = pathSegments.slice(1).join('.')
-
         const aliasRelationshipTableName = uuid()
         const aliasRelationshipTable = alias(
           adapter.tables[relationTableName],
@@ -295,7 +314,7 @@ export const getTableColumnFromPath = ({
         // Join in the relationships table
         joinAliases.push({
           condition: eq(
-            (aliasTable || adapter.tables[tableName]).id,
+            (aliasTable || adapter.tables[rootTableName]).id,
             aliasRelationshipTable.parent,
           ),
           table: aliasRelationshipTable,
@@ -306,7 +325,7 @@ export const getTableColumnFromPath = ({
         constraints.push({
           columnName: 'path',
           table: aliasRelationshipTable,
-          value: field.name,
+          value: `${constraintPath}${field.name}`,
         })
 
         let newAliasTable
@@ -368,6 +387,7 @@ export const getTableColumnFromPath = ({
           joins,
           locale,
           pathSegments: pathSegments.slice(1),
+          rootTableName: newTableName,
           selectFields,
           tableName: newTableName,
         })

packages/db-postgres/src/queries/parseParams.ts

@@ -100,7 +100,11 @@ export async function parseParams({
                 const val = where[relationOrPath][operator]
 
                 queryConstraints.forEach(({ columnName: col, table: constraintTable, value }) => {
-                  constraints.push(operatorMap.equals(constraintTable[col], value))
+                  if (typeof value === 'string' && value.indexOf('%') > -1) {
+                    constraints.push(operatorMap.like(constraintTable[col], value))
+                  } else {
+                    constraints.push(operatorMap.equals(constraintTable[col], value))
+                  }
                 })
 
                 if (['json', 'richText'].includes(field.type) && Array.isArray(pathSegments)) {
@@ -144,13 +148,19 @@ export async function parseParams({
                   break
                 }
 
-                const { operator: queryOperator, value: queryValue } = sanitizeQueryValue({
+                const sanitizedQueryValue = sanitizeQueryValue({
                   field,
                   operator,
                   relationOrPath,
                   val,
                 })
 
+                if (sanitizedQueryValue === null) {
+                  break
+                }
+
+                const { operator: queryOperator, value: queryValue } = sanitizedQueryValue
+
                 if (queryOperator === 'not_equals' && queryValue !== null) {
                   constraints.push(
                     or(
@@ -159,7 +169,10 @@ export async function parseParams({
                       ne<any>(rawColumn || table[columnName], queryValue),
                     ),
                   )
-                } else if (
+                  break
+                }
+
+                if (
                   (field.type === 'relationship' || field.type === 'upload') &&
                   Array.isArray(queryValue) &&
                   operator === 'not_in'
@@ -170,11 +183,13 @@ export async function parseParams({
                     IS
                     NULL`,
                   )
-                } else {
-                  constraints.push(
-                    operatorMap[queryOperator](rawColumn || table[columnName], queryValue),
-                  )
+
+                  break
                 }
+
+                constraints.push(
+                  operatorMap[queryOperator](rawColumn || table[columnName], queryValue),
+                )
               }
             }
           }

packages/db-postgres/src/queries/sanitizeQueryValue.ts

@@ -42,11 +42,17 @@ export const sanitizeQueryValue = ({
     if (val.toLowerCase() === 'false') formattedValue = false
   }
 
-  if (['all', 'in', 'not_in'].includes(operator) && typeof formattedValue === 'string') {
-    formattedValue = createArrayFromCommaDelineated(formattedValue)
+  if (['all', 'in', 'not_in'].includes(operator)) {
+    if (typeof formattedValue === 'string') {
+      formattedValue = createArrayFromCommaDelineated(formattedValue)
 
-    if (field.type === 'number') {
-      formattedValue = formattedValue.map((arrayVal) => parseFloat(arrayVal))
+      if (field.type === 'number') {
+        formattedValue = formattedValue.map((arrayVal) => parseFloat(arrayVal))
+      }
+    }
+
+    if (!Array.isArray(formattedValue) || formattedValue.length === 0) {
+      return null
     }
   }
 

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'
 
@@ -252,6 +253,8 @@ export const traverseFields = ({
       }
 
       case 'array': {
+        const disableNotNullFromHere = Boolean(field.admin?.condition) || disableNotNull
+
         const arrayTableName = `${newTableName}_${toSnakeCase(field.name)}`
         const baseColumns: Record<string, PgColumnBuilder> = {
           _order: integer('_order').notNull(),
@@ -277,9 +280,9 @@ export const traverseFields = ({
           adapter,
           baseColumns,
           baseExtraConfig,
-          disableNotNull,
+          disableNotNull: disableNotNullFromHere,
           disableUnique,
-          fields: field.fields,
+          fields: disableUnique ? idToUUID(field.fields) : field.fields,
           rootRelationsToBuild,
           rootRelationships: relationships,
           rootTableIDColType,
@@ -314,6 +317,8 @@ export const traverseFields = ({
       }
 
       case 'blocks': {
+        const disableNotNullFromHere = Boolean(field.admin?.condition) || disableNotNull
+
         field.blocks.forEach((block) => {
           const blockTableName = `${rootTableName}_blocks_${toSnakeCase(block.slug)}`
           if (!adapter.tables[blockTableName]) {
@@ -343,9 +348,9 @@ export const traverseFields = ({
               adapter,
               baseColumns,
               baseExtraConfig,
-              disableNotNull,
+              disableNotNull: disableNotNullFromHere,
               disableUnique,
-              fields: block.fields,
+              fields: disableUnique ? idToUUID(block.fields) : block.fields,
               rootRelationsToBuild,
               rootRelationships: relationships,
               rootTableIDColType,
@@ -428,6 +433,8 @@ export const traverseFields = ({
           break
         }
 
+        const disableNotNullFromHere = Boolean(field.admin?.condition) || disableNotNull
+
         const {
           hasLocalizedField: groupHasLocalizedField,
           hasLocalizedManyNumberField: groupHasLocalizedManyNumberField,
@@ -438,7 +445,7 @@ export const traverseFields = ({
           buildRelationships,
           columnPrefix: `${columnName}_`,
           columns,
-          disableNotNull,
+          disableNotNull: disableNotNullFromHere,
           disableUnique,
           fieldPrefix: `${fieldName}_`,
           fields: field.fields,
@@ -463,6 +470,8 @@ export const traverseFields = ({
       }
 
       case 'tabs': {
+        const disableNotNullFromHere = Boolean(field.admin?.condition) || disableNotNull
+
         const {
           hasLocalizedField: tabHasLocalizedField,
           hasLocalizedManyNumberField: tabHasLocalizedManyNumberField,
@@ -473,7 +482,7 @@ export const traverseFields = ({
           buildRelationships,
           columnPrefix,
           columns,
-          disableNotNull,
+          disableNotNull: disableNotNullFromHere,
           disableUnique,
           fieldPrefix,
           fields: field.tabs.map((tab) => ({ ...tab, type: 'tab' })),
@@ -500,6 +509,7 @@ export const traverseFields = ({
 
       case 'row':
       case 'collapsible': {
+        const disableNotNullFromHere = Boolean(field.admin?.condition) || disableNotNull
         const {
           hasLocalizedField: rowHasLocalizedField,
           hasLocalizedManyNumberField: rowHasLocalizedManyNumberField,
@@ -510,7 +520,7 @@ export const traverseFields = ({
           buildRelationships,
           columnPrefix,
           columns,
-          disableNotNull,
+          disableNotNull: disableNotNullFromHere,
           disableUnique,
           fieldPrefix,
           fields: field.fields,

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.3",
+  "version": "0.1.4",
   "description": "The official live preview React SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "prepublishOnly": "pnpm clean && pnpm build"
   },
   "dependencies": {
-    "@payloadcms/live-preview": "workspace:*"
+    "@payloadcms/live-preview": "workspace:^0.x"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
@@ -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.3",
+  "version": "0.1.4",
   "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/handleMessage.ts

@@ -1,5 +1,11 @@
 import { mergeData } from '.'
 
+// For performance reasons, `fieldSchemaJSON` will only be sent once on the initial message
+// We need to cache this value so that it can be used across subsequent messages
+// To do this, save `fieldSchemaJSON` when it arrives as a global variable
+// Send this cached value to `mergeData`, instead of `eventData.fieldSchemaJSON` directly
+let payloadLivePreviewFieldSchema = undefined // TODO: type this from `fieldSchemaToJSON` return type
+
 export const handleMessage = async <T>(args: {
   depth: number
   event: MessageEvent
@@ -11,9 +17,13 @@ export const handleMessage = async <T>(args: {
     const eventData = JSON.parse(event?.data)
 
     if (eventData.type === 'payload-live-preview') {
+      if (!payloadLivePreviewFieldSchema && eventData.fieldSchemaJSON) {
+        payloadLivePreviewFieldSchema = eventData.fieldSchemaJSON
+      }
+
       const mergedData = await mergeData<T>({
         depth,
-        fieldSchema: eventData.fieldSchemaJSON,
+        fieldSchema: payloadLivePreviewFieldSchema,
         incomingData: eventData.data,
         initialData,
         serverURL,

packages/live-preview/src/mergeData.ts

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

packages/live-preview/src/ready.ts

@@ -2,11 +2,14 @@ export const ready = (args: { serverURL: string }): void => {
   const { serverURL } = args
 
   if (typeof window !== 'undefined') {
-    // This subscription may have been from either an iframe `src` or `window.open()`
-    // i.e. `window?.opener` || `window?.parent`
-    window?.opener?.postMessage(
+    // This subscription may have been from either an iframe or a popup
+    // We need to report 'ready' to the parent window, whichever it may be
+    // i.e. `window?.opener` for popups, `window?.parent` for iframes
+    const windowToPostTo: Window = window?.opener || window?.parent
+
+    windowToPostTo?.postMessage(
       JSON.stringify({
-        popupReady: true,
+        ready: true,
         type: 'payload-live-preview',
       }),
       serverURL,

packages/live-preview/src/subscribe.ts

@@ -9,7 +9,7 @@ export const subscribe = <T>(args: {
   const { callback, depth, initialData, serverURL } = args
 
   const onMessage = async (event: MessageEvent) => {
-    const mergedData = await handleMessage({ depth, event, initialData, serverURL })
+    const mergedData = await handleMessage<T>({ depth, event, initialData, serverURL })
     callback(mergedData)
   }
 

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,
@@ -53,7 +54,7 @@ export const traverseFields = <T>({
         case 'blocks':
           if (Array.isArray(incomingData[fieldName])) {
             result[fieldName] = incomingData[fieldName].map((row, i) => {
-              const matchedBlock = field.blocks[row.blockType]
+              const matchedBlock = fieldJSON.blocks[row.blockType]
 
               const hasExistingRow =
                 Array.isArray(result[fieldName]) &&
@@ -70,7 +71,7 @@ export const traverseFields = <T>({
               traverseFields({
                 apiRoute,
                 depth,
-                fieldSchema: matchedBlock.fields as Record<string, unknown>[], // TODO: type this
+                fieldSchema: matchedBlock.fields,
                 incomingData: row,
                 populationPromises,
                 result: newRow,
@@ -82,7 +83,7 @@ export const traverseFields = <T>({
           }
           break
 
-        case 'tab':
+        case 'tabs':
         case 'group':
           if (!result[fieldName]) {
             result[fieldName] = {}
@@ -91,7 +92,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 +103,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 +111,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 +135,7 @@ export const traverseFields = <T>({
                   )
                 }
               } else {
-                // Handle `hasMany` singular
+                // Handle `hasMany` monomorphic
                 const existingID = existingValue[i]?.id
 
                 if (existingID !== relation) {
@@ -143,7 +144,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 +155,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 +191,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/.release-it.js

@@ -0,0 +1,51 @@
+module.exports = {
+  verbose: true,
+  git: {
+    commitMessage: 'chore(release): v${version}',
+    requireCleanWorkingDir: false,
+    tagMatch: 'v*', // payload is tagged normally, other packages are tagged with a prefix
+  },
+  github: {
+    release: true,
+  },
+  npm: {
+    skipChecks: true,
+  },
+  hooks: {
+    'before:init': ['pnpm install', 'pnpm clean', 'pnpm build'], // Assume tests have already been run
+  },
+  plugins: {
+    '@release-it/conventional-changelog': {
+      infile: '../../CHANGELOG.md',
+      preset: {
+        name: 'conventionalcommits',
+        types: [
+          { type: 'feat', section: 'Features' },
+          { type: 'feature', section: 'Features' },
+          { type: 'fix', section: 'Bug Fixes' },
+          { type: 'docs', section: 'Documentation' },
+        ],
+      },
+      writerOpts: {
+        commitGroupsSort: (a, b) => {
+          const groupOrder = ['Features', 'Bug Fixes', 'Documentation']
+          return groupOrder.indexOf(a.title) - groupOrder.indexOf(b.title)
+        },
+
+        // Scoped commits at the end, alphabetical sort
+        commitsSort: (a, b) => {
+          if (a.scope || b.scope) {
+            if (!a.scope) return -1
+            if (!b.scope) return 1
+            return a.scope === b.scope
+              ? a.subject.localeCompare(b.subject)
+              : a.scope.localeCompare(b.scope)
+          }
+
+          // Alphabetical sort
+          return a.subject.localeCompare(b.subject)
+        },
+      },
+    },
+  },
+}

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "2.0.5",
+  "version": "2.0.11",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -40,8 +40,7 @@
     "lint": "eslint \"src/**/*.ts\"",
     "prepublishOnly": "pnpm clean && pnpm build",
     "pretest": "pnpm build",
-    "release:beta": "release-it pre --preReleaseId=beta --npm.tag=beta --config .release-it.pre.json",
-    "release:canary": "release-it pre --preReleaseId=canary --npm.tag=canary --config .release-it.pre.json",
+    "release:beta": "release-it pre --preReleaseId=beta --npm.tag=beta --config .release-it.pre.js",
     "release:major": "release-it major",
     "release:minor": "release-it minor",
     "release:patch": "release-it patch",
@@ -128,7 +127,7 @@
     "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",
@@ -187,7 +186,6 @@
     "file-loader": "6.2.0",
     "form-data": "3.0.1",
     "get-port": "5.1.1",
-    "graphql-request": "6.1.0",
     "mini-css-extract-plugin": "1.6.2",
     "node-fetch": "2.6.12",
     "nodemon": "3.0.1",

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

@@ -6,13 +6,13 @@ import { toast } from 'react-toastify'
 import type { Props } from './types'
 
 import useDebounce from '../../../hooks/useDebounce'
+import { formatTimeToNow } from '../../../utilities/formatDate'
 import { useAllFormFields, useFormModified } from '../../forms/Form/context'
 import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues'
 import { useConfig } from '../../utilities/Config'
 import { useDocumentInfo } from '../../utilities/DocumentInfo'
 import { useLocale } from '../../utilities/Locale'
 import './index.scss'
-
 const baseClass = 'autosave'
 
 const Autosave: React.FC<Props> = ({ id, collection, global, publishedDocUpdatedAt }) => {
@@ -163,7 +163,7 @@ const Autosave: React.FC<Props> = ({ id, collection, global, publishedDocUpdated
       {!saving && lastSaved && (
         <React.Fragment>
           {t('lastSavedAgo', {
-            distance: Math.round((Number(new Date(lastSaved)) - Number(new Date())) / 1000 / 60),
+            distance: formatTimeToNow(lastSaved, i18n.language),
           })}
         </React.Fragment>
       )}

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;
@@ -28,10 +28,10 @@
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 1;
+    height: var(--doc-controls-height);
   }
 
   &__content {
-    height: var(--doc-controls-height);
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -140,21 +140,21 @@
     // On mobile, only stick the controls to the top
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
-    // So we use a static height with a negative top
-    top: calc(var(--doc-controls-height) * -1);
+    // So we use a static height with a negative top equal to the meta height plus top padding
+    top: calc(var(--base) * -2);
     padding-right: 0;
     padding-left: 0;
 
     &__wrapper {
       flex-direction: column;
       gap: 0;
+      height: unset;
     }
 
     &__content {
       width: 100%;
-      align-items: flex-start;
-      padding-top: calc(var(--base) / 2);
       overflow: auto;
+      height: calc(var(--base) * 2);
 
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
@@ -167,26 +167,52 @@
       width: auto;
       gap: calc(var(--base) / 2);
       margin-left: var(--gutter-h);
-      margin-right: var(--gutter-h);
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: var(--base);
+        background: linear-gradient(to right, transparent, var(--theme-bg));
+        flex-shrink: 0;
+        z-index: 1111;
+        pointer-events: none;
+      }
     }
 
     &__controls-wrapper {
       width: 100%;
       transform: translate3d(0, 0, 0);
-      padding: calc(var(--base) / 2) 0;
-      overflow: auto;
+      padding-right: var(--gutter-h);
+      justify-content: space-between;
+      height: var(--doc-controls-height);
+      border-top: 1px solid var(--theme-elevation-100);
     }
 
     &__controls {
-      margin-left: var(--gutter-h);
-      margin-right: var(--gutter-h);
-    }
+      padding-left: var(--gutter-h);
+      overflow: auto;
 
-    &__popup {
-      // TODO: the container needs to overflow on mobile
-      // But the popup interferes with this because it requires overflow in order to be visible
-      // So we likely need to outright show the controls nested within the popup on mobile
-      display: none;
+      // do not show scrollbar because the parent container has a static height
+      // this container has a gradient overlay as visual indication of `overflow: scroll`
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: calc(var(--base) * 1.5);
+        background: linear-gradient(to right, transparent, var(--theme-bg));
+        flex-shrink: 0;
+        z-index: 1111;
+        pointer-events: none;
+      }
     }
   }
 }

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

@@ -2,7 +2,8 @@ import React, { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { CollectionPermission, GlobalPermission } from '../../../../auth'
-import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from '../../../../exports/types'
+import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
+import type { SanitizedGlobalConfig } from '../../../../globals/config/types'
 
 import { formatDate } from '../../../utilities/formatDate'
 import { useConfig } from '../../utilities/Config'
@@ -224,6 +225,7 @@ export const DocumentControls: React.FC<{
           )}
         </div>
       </div>
+      <div className={`${baseClass}__divider`} />
     </Gutter>
   )
 }

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

@@ -1,4 +1,5 @@
 import { useModal } from '@faceless-ui/modal'
+import queryString from 'qs'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
@@ -16,6 +17,7 @@ import X from '../../icons/X'
 import { useAuth } from '../../utilities/Auth'
 import { useConfig } from '../../utilities/Config'
 import { DocumentInfoProvider, useDocumentInfo } from '../../utilities/DocumentInfo'
+import { useFormQueryParams } from '../../utilities/FormQueryParams'
 import { useLocale } from '../../utilities/Locale'
 import RenderCustomComponent from '../../utilities/RenderCustomComponent'
 import DefaultEdit from '../../views/collections/Edit/Default'
@@ -42,6 +44,8 @@ const Content: React.FC<DocumentDrawerProps> = ({
   const [isOpen, setIsOpen] = useState(false)
   const [collectionConfig] = useRelatedCollections(collectionSlug)
   const config = useConfig()
+  const { formQueryParams } = useFormQueryParams()
+  const formattedQueryParams = queryString.stringify(formQueryParams)
 
   const { admin: { components: { views: { Edit } = {} } = {} } = {} } = collectionConfig
 
@@ -117,8 +121,8 @@ const Content: React.FC<DocumentDrawerProps> = ({
   const apiURL = id ? `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}` : null
 
   const action = `${serverURL}${api}/${collectionSlug}${
-    id ? `/${id}` : ''
-  }?locale=${locale}&fallback-locale=null`
+    isEditing ? `/${id}` : ''
+  }?${formattedQueryParams}`
 
   const hasSavePermission =
     (isEditing && docPermissions?.update?.permission) ||

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/index.scss

@@ -17,6 +17,24 @@
     padding: 0;
     overflow: auto;
 
+    // this container has a gradient overlay as visual indication of `overflow: scroll`
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: sticky;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
+      flex-shrink: 0;
+      z-index: 1111;
+      pointer-events: none;
+    }
+
     &__tabs {
       padding: 0;
       margin-left: var(--gutter-h);

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/EditUpload/index.scss

@@ -35,11 +35,6 @@ $header-height: base(5);
     text-wrap: nowrap;
   }
 
-  &__cancel,
-  &__save {
-    width: 50%;
-  }
-
   &__toolWrap {
     display: flex;
     justify-content: flex-end;

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

@@ -50,14 +50,13 @@ export const EditUpload: React.FC<{
     y: uploadEdits?.focalPoint?.y || 50,
   })
   const [checkBounds, setCheckBounds] = useState<boolean>(false)
+  const [originalHeight, setOriginalHeight] = useState<number>(0)
+  const [originalWidth, setOriginalWidth] = useState<number>(0)
 
   const focalWrapRef = useRef<HTMLDivElement | undefined>()
   const imageRef = useRef<HTMLImageElement | undefined>()
   const cropRef = useRef<HTMLDivElement | undefined>()
 
-  const originalHeight = imageRef.current ? imageRef.current.naturalHeight : 0
-  const originalWidth = imageRef.current ? imageRef.current.naturalWidth : 0
-
   const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {
     const intValue = parseInt(value)
     if (dimension === 'width' && intValue >= originalWidth) return null
@@ -98,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 =
@@ -152,22 +153,32 @@ export const EditUpload: React.FC<{
                   return <div className={`${baseClass}__crop-window`} ref={cropRef} />
                 }}
               >
-                <img alt={t('upload:setCropArea')} ref={imageRef} src={fileSrcToUse} />
+                <img
+                  alt={t('upload:setCropArea')}
+                  onLoad={(e) => {
+                    setOriginalHeight(e.currentTarget.naturalHeight)
+                    setOriginalWidth(e.currentTarget.naturalWidth)
+                  }}
+                  ref={imageRef}
+                  src={fileSrcToUse}
+                />
               </ReactCrop>
             ) : (
               <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

@@ -6,22 +6,37 @@
   cursor: pointer;
   background-color: transparent;
   outline: none;
-  position: absolute;
+  position: relative;
+  @include blur-bg;
 
-  --hamburger-padding: 5px;
+  --hamburger-padding: 8px;
   --hamburger-size: 9px;
   --hamburger-line-gap: 3px;
-  padding: var(--hamburger-padding);
-  border: 1px solid var(--theme-elevation-350);
-  color: var(--theme-text);
-  border-radius: 3px;
 
-  &:focus {
-    outline: none;
+  color: var(--theme-text);
+
+  &__wrapper {
+    border: 1px solid var(--theme-elevation-150);
+    padding: var(--hamburger-padding);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+
+    &: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 {
@@ -92,6 +110,12 @@
       right: base(2);
     }
 
+    &--nav-open {
+      .app-header__localizer {
+        display: none;
+      }
+    }
+
     &__mobile-nav-toggler {
       display: flex;
       align-items: center;

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

@@ -8,12 +8,13 @@ import { Hamburger } from '../Hamburger'
 import Localizer from '../Localizer'
 import { LocalizerLabel } from '../Localizer/LocalizerLabel'
 import { NavToggler } from '../Nav/NavToggler'
+import { useNav } from '../Nav/context'
 import StepNav from '../StepNav'
 import './index.scss'
 
 const baseClass = 'app-header'
 
-export const AppHeader: React.FC = (props) => {
+export const AppHeader: React.FC = () => {
   const { t } = useTranslation()
 
   const {
@@ -21,12 +22,14 @@ export const AppHeader: React.FC = (props) => {
     routes: { admin: adminRoute },
   } = useConfig()
 
+  const { navOpen } = useNav()
+
   return (
-    <header className={[baseClass].filter(Boolean).join(' ')}>
+    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>
       <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`}>
@@ -43,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/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.scss

@@ -6,11 +6,5 @@
   padding: 0;
   margin: 0;
   border: 0;
-  height: var(--app-header-height);
-  width: var(--gutter-h);
   cursor: pointer;
-
-  @include small-break {
-    width: calc(var(--gutter-h) * 2);
-  }
 }

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/context.tsx

@@ -19,11 +19,21 @@ export const NavContext = React.createContext<NavContextType>({
 
 export const useNav = () => React.useContext(NavContext)
 
+const getNavPreference = async (getPreference): Promise<boolean> => {
+  const navPrefs = await getPreference('nav')
+  const preferredState = navPrefs?.open
+  if (typeof preferredState === 'boolean') {
+    return preferredState
+  } else {
+    return true
+  }
+}
+
 export const NavProvider: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
   const {
-    breakpoints: { l: largeBreak },
+    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },
   } = useWindowInfo()
 
   const { getPreference } = usePreferences()
@@ -40,16 +50,11 @@ export const NavProvider: React.FC<{
   useEffect(() => {
     if (largeBreak === false) {
       const setNavFromPreferences = async () => {
-        const navPrefs = await getPreference('nav')
-        const preferredState = navPrefs?.open
-        if (typeof preferredState === 'boolean') {
-          setNavOpen(preferredState)
-        } else {
-          setNavOpen(true)
-        }
+        const preferredState = await getNavPreference(getPreference)
+        setNavOpen(preferredState)
       }
 
-      setNavFromPreferences()
+      setNavFromPreferences() // eslint-disable-line @typescript-eslint/no-floating-promises
     }
   }, [largeBreak, getPreference, setNavOpen])
 
@@ -58,7 +63,7 @@ export const NavProvider: React.FC<{
   useEffect(() => {
     let unlisten: () => void
 
-    if (largeBreak) {
+    if (midBreak) {
       unlisten = history.listen(() => {
         setNavOpen(false)
       })
@@ -67,27 +72,28 @@ export const NavProvider: React.FC<{
     }
 
     return () => unlisten && unlisten()
-  }, [history, setNavOpen, largeBreak])
-
-  // on smaller screens where the nav is a modal
-  // close the nav when the user resizes down to a smaller screen
-  useEffect(() => {
-    if (largeBreak) {
-      setNavOpen(false)
-    }
-  }, [largeBreak])
+  }, [history, setNavOpen, midBreak])
 
   // on open and close, lock the body scroll
   // do not do this on desktop, the sidebar is not a modal
   useEffect(() => {
     if (navRef.current) {
-      if (navOpen && largeBreak) {
+      if (navOpen && midBreak) {
         disableBodyScroll(navRef.current)
       } else {
         enableBodyScroll(navRef.current)
       }
     }
-  }, [navOpen, largeBreak])
+  }, [navOpen, midBreak])
+
+  // on smaller screens where the nav is a modal
+  // close the nav when the user resizes down to mobile
+  // the sidebar is a modal on mobile
+  useEffect(() => {
+    if (largeBreak === false || midBreak === false || smallBreak === false) {
+      setNavOpen(false)
+    }
+  }, [largeBreak, midBreak, smallBreak])
 
   // when the component unmounts, clear all body scroll locks
   useEffect(() => {

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

@@ -16,7 +16,6 @@
   }
 
   &__header {
-    @include blur-bg;
     position: absolute;
     top: 0;
     width: 100%;
@@ -41,7 +40,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: var(--app-header-height) base(1.5) base(2) base(1.25);
+    padding: var(--app-header-height) base(1) base(2) base(1);
     overflow-y: auto;
 
     // remove the scrollbar here to prevent layout shift as nav groups are toggled
@@ -128,12 +127,7 @@
 
   @include mid-break {
     &__scroll {
-      padding: var(--app-header-height) base(0.75) base(2) base(0.75);
-    }
-
-    nav a {
-      font-size: base(0.875);
-      line-height: base(1.5);
+      padding: var(--app-header-height) base(0.5) base(2);
     }
   }
 
@@ -141,9 +135,12 @@
     &__scroll {
       padding: var(--app-header-height) var(--gutter-h) base(2);
     }
-  }
 
-  @include extra-small-break {
+    nav a {
+      font-size: base(0.875);
+      line-height: base(1.5);
+    }
+
     &--nav-open {
       transition: none;
     }

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/PreviewSizes/index.scss

@@ -14,7 +14,7 @@
   }
 
   &__preview {
-    max-height: calc(100% - base(4));
+    max-height: calc(100% - base(6));
     padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
     object-fit: contain;
   }

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

@@ -28,8 +28,8 @@ const PreviewSizes: React.FC<{
   doc?: Data & {
     sizes?: FileSizes
   }
-  updatedAt?: string
-}> = ({ collection, doc, updatedAt }) => {
+  imageCacheTag?: string
+}> = ({ collection, doc, imageCacheTag }) => {
   const {
     upload: { imageSizes, staticURL },
   } = collection
@@ -39,20 +39,15 @@ const PreviewSizes: React.FC<{
   const [selectedSize, setSelectedSize] = useState<null | string>(
     orderedSizes?.[imageSizes[0]?.name]?.filename ? imageSizes[0]?.name : null,
   )
-  const [appendUrl, setAppendUrl] = useState<boolean>(false)
 
   const generateImageUrl = (filename) => {
-    const query = appendUrl ? `?${Date.now()}` : ''
-    return `${staticURL}/${filename}${query}`
+    return `${staticURL}/${filename}${imageCacheTag ? `?${imageCacheTag}` : ''}`
   }
-
   useEffect(() => {
     setOrderedSizes(sortSizes(sizes, imageSizes))
-  }, [sizes, imageSizes, updatedAt])
+  }, [sizes, imageSizes, imageCacheTag])
 
-  useEffect(() => {
-    setAppendUrl(true)
-  }, [updatedAt])
+  const mainPreviewSrc = generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
 
   return (
     <div className={baseClass}>
@@ -61,17 +56,15 @@ const PreviewSizes: React.FC<{
           <div className={`${baseClass}__sizeName`}>{selectedSize}</div>
           <Meta {...(selectedSize && orderedSizes[selectedSize])} staticURL={staticURL} />
         </div>
-        <img
-          alt={doc.filename}
-          className={`${baseClass}__preview`}
-          src={generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)}
-        />
+        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />
       </div>
       <div className={`${baseClass}__listWrap`}>
         <div className={`${baseClass}__list`}>
           {Object.entries(orderedSizes).map(([key, val]) => {
             const selected = selectedSize === key
-            if (val?.filename) {
+            const previewSrc = generateImageUrl(val.filename)
+
+            if (previewSrc) {
               return (
                 <div
                   className={[`${baseClass}__sizeOption`, selected && `${baseClass}--selected`]
@@ -88,7 +81,7 @@ const PreviewSizes: React.FC<{
                   tabIndex={0}
                 >
                   <div className={`${baseClass}__image`}>
-                    <img alt={val.filename} src={generateImageUrl(val.filename)} />
+                    <img alt={val.filename} src={previewSrc} />
                   </div>
                   <div className={`${baseClass}__sizeMeta`}>
                     <div className={`${baseClass}__sizeName`}>{key}</div>