chore(release): v0.13.3

fix: upgrade sharp for prebuilt M1 binaries

.eslintrc.js

@@ -28,8 +28,8 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
       ],
       rules: {
-        "no-shadow": "off",
-        "@typescript-eslint/no-shadow": ["error"],
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': ['error'],
         'import/no-unresolved': [
           2,
           {
@@ -38,17 +38,20 @@ module.exports = {
             ],
           },
         ],
-      }
+      },
     },
   ],
   rules: {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
+    'no-sparse-arrays': 'off',
+    'import/no-extraneous-dependencies': ['error', { packageDir: './' }],
     'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
     'import/prefer-default-export': 'off',
     'react/prop-types': 'off',
     'react/require-default-props': 'off',
     'react/no-unused-prop-types': 'off',
     'no-underscore-dangle': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
     'import/extensions': [
       'error',
       'ignorePackages',

.github/workflows/tests.yml

@@ -3,11 +3,11 @@ name: build
 on: [push]
 
 jobs:
-  build:
+  build_yarn:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x, 15.x]
+        node-version: [12.x, 14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -35,3 +35,30 @@ jobs:
     - run: yarn test:int # In-memory db + api tests
       env:
         CI: true
+  install_npm:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+        registry-url: https://registry.npmjs.org
+        scope: '@payloadcms'
+        always-auth: true
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-npm-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-npm-${{ env.cache-name }}-
+          ${{ runner.os }}-npm-
+          ${{ runner.os }}-
+    - run: npm install --legacy-peer-deps
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -228,3 +228,6 @@ build
 # Ignore built components
 components/index.js
 components/styles.css
+
+# Ignore generated
+demo/generated-types.ts

.release-it.beta.json

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

.vscode/launch.json

@@ -18,6 +18,7 @@
       },
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
       "port": 9229,
       "skipFiles": [
         "<node_internals>/**"
@@ -64,6 +65,19 @@
       "name": "Launch Chrome against Localhost",
       "url": "http://localhost:3000/admin",
       "webRoot": "${workspaceFolder}"
-    }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Payload Generate Types",
+      "program": "${workspaceFolder}/src/bin/generateTypes.ts",
+      "env": {
+        "PAYLOAD_CONFIG_PATH": "demo/payload.config.ts",
+      },
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js",
+        "!**/node_modules/**"
+      ]
+    },
   ]
 }

CHANGELOG.md

@@ -1,3 +1,678 @@
+## [0.13.3](https://github.com/payloadcms/payload/compare/v0.13.2...v0.13.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* upgrade sharp for prebuilt M1 binaries ([34f416a](https://github.com/payloadcms/payload/commit/34f416aace112013359351e17c4371c30303156f))
+
+## [0.13.2](https://github.com/payloadcms/payload/compare/v0.13.1...v0.13.2) (2021-11-29)
+
+
+### Bug Fixes
+
+* [#373](https://github.com/payloadcms/payload/issues/373) ([727fbec](https://github.com/payloadcms/payload/commit/727fbeceb4b93936ca08d0ca48ac0d2beb1ce96e))
+
+## [0.13.1](https://github.com/payloadcms/payload/compare/v0.13.0...v0.13.1) (2021-11-29)
+
+
+### Bug Fixes
+
+* ensures sorting by _id instead of improper id ([ded891e](https://github.com/payloadcms/payload/commit/ded891e390a93f71963762c0200c97a0beec5cad))
+
+
+### Features
+
+* only adds list search query param if value is present ([d6d76d4](https://github.com/payloadcms/payload/commit/d6d76d4088a23ed43122333873ada6846c808d37))
+
+# [0.13.0](https://github.com/payloadcms/payload/compare/v0.12.3...v0.13.0) (2021-11-26)
+
+
+### Bug Fixes
+
+* [#351](https://github.com/payloadcms/payload/issues/351) ([94c2b8d](https://github.com/payloadcms/payload/commit/94c2b8d80b046c067057d4ad089ed6a2edd656cf))
+* [#358](https://github.com/payloadcms/payload/issues/358) - reuploading with existing filenames ([a0fb48c](https://github.com/payloadcms/payload/commit/a0fb48c9a37beceafc6f0638604e9946d0814635))
+* allows sync or async preview urls ([da6e1df](https://github.com/payloadcms/payload/commit/da6e1df293ce46bc4d0c84645db61feea2881aa7))
+* bug with relationship cell when no doc is available ([40b33d9](https://github.com/payloadcms/payload/commit/40b33d9f5e99285cb0de148dbe059259817fcad8))
+3839ef75151f))
+* ensures richtext links retain proper formatting ([abf61d0](https://github.com/payloadcms/payload/commit/abf61d0734c09fd0fc5c5b827cb0631e11701f71))
+* ensures that querying by relationship subpaths works ([37b21b0](https://github.com/payloadcms/payload/commit/37b21b07628e892e85c2cf979d9e2c8af0d291f7))
+* ensures uploads can be fetched with CORS ([96421b3](https://github.com/payloadcms/payload/commit/96421b3d59a87f8a3d781005c02344fe5d3a607f))
+* typing for collection description ([bb18e82](https://github.com/payloadcms/payload/commit/bb18e8250c5742d9615e5780c1cd02d33ecca3d0))
+* updates field description type to include react nodes ([291c193](https://github.com/payloadcms/payload/commit/291c193ad4a9ec8ce9310cc63c714eba10eca102))
+
+### Features
+
+* :tada: :tada: builds a way to automatically generate types for collections and globals!.
+* :tada: dramatically improves Payload types like local API methods and hooks to function as `generic`s
+* adds relationship filter field ([463c4e6](https://github.com/payloadcms/payload/commit/463c4e60de8e647fca6268b826d826f9c6e45412))
+* applies upload access control to all auto-generated image sizes ([051b7d4](https://github.com/payloadcms/payload/commit/051b7d45befc331af3f73a669b2bb6467505902f))
+* azure cosmos compatibility ([6fd5ac2](https://github.com/payloadcms/payload/commit/6fd5ac2c082a5a5e6f510d781b2a2e12b7b62cb9))
+* ensures update hooks have access to full original docs even in spite of access control ([b2c5b7e](https://github.com/payloadcms/payload/commit/b2c5b7e5752e829c7a53c054decceb43ec33065e))
+* improves querying logic ([4c85747](https://github.com/payloadcms/payload/commit/4c8574784995b1cb1f939648f4d2158286089b3d))
+* indexes filenames ([5d43262](https://github.com/payloadcms/payload/commit/5d43262f42e0529a44572f398aa1ec5fd7858286))
+* renames useFieldType to useField ([0245747](https://github.com/payloadcms/payload/commit/0245747020c7c039b15d055f54a4548a364d047e))
+* supports custom onChange handling in text, select, and upload fields ([4affdc3](https://github.com/payloadcms/payload/commit/4affdc3a9397d70f5baacdd12753c8fc8c7d8368))
+
+## [0.12.3](https://github.com/payloadcms/payload/compare/v0.12.2...v0.12.3) (2021-10-23)
+
+
+### Bug Fixes
+
+* [#348](https://github.com/payloadcms/payload/issues/348), relationship options appearing twice in admin ui ([b4c15ed](https://github.com/payloadcms/payload/commit/b4c15ed3f3649ea6d157987571874fb8486ab3cb))
+* ensures tooltips in email fields are positioned properly ([a0b38f6](https://github.com/payloadcms/payload/commit/a0b38f68322cd7a39ca6ae08e6ffb7f57aa62171))
+
+## [0.12.2](https://github.com/payloadcms/payload/compare/v0.12.1...v0.12.2) (2021-10-21)
+
+
+### Bug Fixes
+
+* improves paste html formatting ([d443ea5](https://github.com/payloadcms/payload/commit/d443ea582cc60be367dd3edbdcb062af0786b8ee))
+
+## [0.12.1](https://github.com/payloadcms/payload/compare/v0.12.0...v0.12.1) (2021-10-21)
+
+
+### Bug Fixes
+
+* rich text copy and paste now saves formatting properly ([9d7feb9](https://github.com/payloadcms/payload/commit/9d7feb9796e4b76e01f4ac2d0cb117bb091aa3d5))
+
+# [0.12.0](https://github.com/payloadcms/payload/compare/v0.11.0...v0.12.0) (2021-10-21)
+
+
+### Bug Fixes
+
+* bug where field hooks and access control couuld potentially compete ([c35009f](https://github.com/payloadcms/payload/commit/c35009f14c9403e63727d4d77af51a449a5f7b4b))
+
+
+### Features
+
+* builds UI field ([edb723a](https://github.com/payloadcms/payload/commit/edb723a4fb8b4c353a9073cc7ec5f5cfd026cbe0))
+* exposes withCondition for re-use ([c02e8f1](https://github.com/payloadcms/payload/commit/c02e8f14c74a2ab9a53b0d8fd81f1083bede594e))
+
+## [0.11.2-beta.0](https://github.com/payloadcms/payload/compare/v0.11.0...v0.11.2-beta.0) (2021-10-21)
+
+### Features
+
+* exposes withCondition for re-use ([c02e8f1](https://github.com/payloadcms/payload/commit/c02e8f14c74a2ab9a53b0d8fd81f1083bede594e))
+
+## [0.11.1-beta.0](https://github.com/payloadcms/payload/compare/v0.11.0...v0.11.1-beta.0) (2021-10-20)
+
+
+### Features
+
+* builds UI field ([edb723a](https://github.com/payloadcms/payload/commit/edb723a4fb8b4c353a9073cc7ec5f5cfd026cbe0))
+
+# [0.11.0](https://github.com/payloadcms/payload/compare/v0.10.11...v0.11.0) (2021-10-20)
+
+
+### Bug Fixes
+
+* [#338](https://github.com/payloadcms/payload/issues/338), array / block fields with only nested array block fields break admin UI ([86e88d9](https://github.com/payloadcms/payload/commit/86e88d998fbc36d7ea2456dfbc685edadff107d3))
+* [#341](https://github.com/payloadcms/payload/issues/341) - searching on multiple relationship collections ([3b99ded](https://github.com/payloadcms/payload/commit/3b99deda450fbbe4a9d05c28c9c485c466872097))
+* [#343](https://github.com/payloadcms/payload/issues/343) - upload rte element crashes admin when no upload collection present ([914cca6](https://github.com/payloadcms/payload/commit/914cca6b926923bd238605856a7b7125c13244e1))
+* make name required on field types ([#337](https://github.com/payloadcms/payload/issues/337)) ([b257e01](https://github.com/payloadcms/payload/commit/b257e01c8dea5d22172ce4f71e4124aecc39bba8))
+* more strict field typing ([84f6a9d](https://github.com/payloadcms/payload/commit/84f6a9d659fd443545f3ba7adf9f6adab98452ca))
+* per page now properly modifies search query ([fcd9c28](https://github.com/payloadcms/payload/commit/fcd9c2887175396bdedc051f3f30f1080d8c5953))
+* properly types row field ([7d49302](https://github.com/payloadcms/payload/commit/7d49302ffa8207498e6e70255b3be84b3ac890c1))
+* removes node 15 from CI ([a2df67e](https://github.com/payloadcms/payload/commit/a2df67eccd9ab6f8c9d4982bdade9b47186c2c82))
+* use proper error code on webpack build failure ([2eb8154](https://github.com/payloadcms/payload/commit/2eb81546c3b4bf1804d25ccd5307af4855c4f750))
+
+
+### Features
+
+* adds dynamic url field to upload-enabled collections ([cc4d1fd](https://github.com/payloadcms/payload/commit/cc4d1fd045ed54c6a35c7104182e6fbeadb6dac4))
+* adds safety checks while querying on id with bad values ([900f05e](https://github.com/payloadcms/payload/commit/900f05eefdc63978809a88a2e1474be08afff6c6))
+* **admin:** initial per page component ([3715e01](https://github.com/payloadcms/payload/commit/3715e011c97c8e30174c35c502fa7db12bc84e2c))
+* allows richText enter key break out functionality to be extended in custom elements ([ca91f47](https://github.com/payloadcms/payload/commit/ca91f47d325de5211f24000c7d90b10a8fdfc544))
+* improves richtext link ([423ca01](https://github.com/payloadcms/payload/commit/423ca01ab1d5d07e2f5369d82928d6c7dad052b0))
+* **per-page:** add pagination to admin config ([c132f2f](https://github.com/payloadcms/payload/commit/c132f2ff10b3efdb3854ec2d5a895120ccf22002))
+* **per-page:** set and load from preferences ([d88ce2d](https://github.com/payloadcms/payload/commit/d88ce2d342b20c1601b1b58470c226a9826758b3))
+* saves active list filters in URL, implements per-page control ([a6fc1fd](https://github.com/payloadcms/payload/commit/a6fc1fdc5838c3d17c5a8b6cbe9a46b86c89af71))
+
+
+## [0.10.11](https://github.com/payloadcms/payload/compare/v0.10.10...v0.10.11) (2021-10-08)
+
+
+### Bug Fixes
+
+* bug with local API and not passing array / block data ([fd4fbe8](https://github.com/payloadcms/payload/commit/fd4fbe8c8b492445ab29d26d9648cff4e98d5708))
+
+## [0.10.10](https://github.com/payloadcms/payload/compare/v0.10.9...v0.10.10) (2021-10-07)
+
+
+### Bug Fixes
+
+* deepObjectCopy returns Date object instead of empty object ([2711729](https://github.com/payloadcms/payload/commit/27117292f3a4e207d9705e79f82fb78f70985915))
+
+## [0.10.9](https://github.com/payloadcms/payload/compare/v0.10.8...v0.10.9) (2021-10-05)
+
+
+### Bug Fixes
+
+* ensures field read access within login operation has id ([e3229c5](https://github.com/payloadcms/payload/commit/e3229c55f352a2f68bbea967f816badfd265dd02))
+
+## [0.10.8](https://github.com/payloadcms/payload/compare/v0.10.7...v0.10.8) (2021-10-04)
+
+
+### Bug Fixes
+
+* ensures update field access control receives id ([ffab6c4](https://github.com/payloadcms/payload/commit/ffab6c46c1c267f46d1d4eb3fd8060a4e5fada4b))
+
+## [0.10.7](https://github.com/payloadcms/payload/compare/v0.10.6...v0.10.7) (2021-10-04)
+
+
+### Bug Fixes
+
+* ensures non populated relationships still retain IDs ([a201109](https://github.com/payloadcms/payload/commit/a20110974d781e972831fa8a52a0839a613121f6))
+* ensures relationship field access control receives id ([470d434](https://github.com/payloadcms/payload/commit/470d4345f9ccc7630dc55b40172937509475d534))
+
+
+### Features
+
+* add indexSortableField option to create indexes for sortable fields on all collections ([ad09782](https://github.com/payloadcms/payload/commit/ad097820bfe32b0a4ef428a37a78e5a569258ec6))
+
+## [0.10.6](https://github.com/payloadcms/payload/compare/v0.10.5...v0.10.6) (2021-09-30)
+
+
+### Bug Fixes
+
+* allow debug in payload config ([65bf13d](https://github.com/payloadcms/payload/commit/65bf13d7c137eafdbbeadc1d36d26b7b8389088f))
+* relationship + new slate incompatibility ([f422053](https://github.com/payloadcms/payload/commit/f42205307e33916fc3b139f6ee97eb66d5d0816a))
+
+## [0.10.5](https://github.com/payloadcms/payload/compare/v0.10.4...v0.10.5) (2021-09-28)
+
+
+### Bug Fixes
+
+* ensures that fields within non-required groups are correctly not required ([1597055](https://github.com/payloadcms/payload/commit/15970550f7b00ce0527027c362a9550ff8ad5d2a))
+* index creation on localized field parent ([23e8197](https://github.com/payloadcms/payload/commit/23e81971eb94fd5b991aedb02aab84931937ae37))
+* pagination estimatedCount limited to near query ([73bd698](https://github.com/payloadcms/payload/commit/73bd69870c4ff8ae92053e77ef95cfae18c142b5))
+
+
+### Features
+
+* adds rich text editor upload element ([aa76950](https://github.com/payloadcms/payload/commit/aa769500c934f4dee51a24c0cfc0297c12b5ae47))
+* updates slate, finishes rte upload ([08db431](https://github.com/payloadcms/payload/commit/08db431c0c4626a0d10f4e1c7bca29fa075eedc6))
+
+## [0.10.4](https://github.com/payloadcms/payload/compare/v0.10.0...v0.10.4) (2021-09-22)
+
+
+### Bug Fixes
+
+* allows image resizing if either width or height is larger ([8661115](https://github.com/payloadcms/payload/commit/866111528377808009fa71595691e6a08ec77dc5))
+* array objects now properly save IDs ([2b8f925](https://github.com/payloadcms/payload/commit/2b8f925e81c58f6aa010bf13a318236f211ea091))
+* date field error message position ([03c0435](https://github.com/payloadcms/payload/commit/03c0435e3b3ecdfa0713e3e5026b80f8985ca290))
+* properly types optional req in local findByID ([02e7fe3](https://github.com/payloadcms/payload/commit/02e7fe3f1f3763f32f100cf2e5a8596aa16f3bd9))
+
+
+### Features
+
+* defaults empty group fields to empty object ([8a890fd](https://github.com/payloadcms/payload/commit/8a890fdc15b646c24963a1ef7584237b1d3c5783))
+* allows local update api to replace existing files with newly uploaded ones ([dbbff4c](https://github.com/payloadcms/payload/commit/dbbff4cfa41aa20077e47c8c7b87d4d00683c571))
+* exposes Pill component for re-use ([7e8df10](https://github.com/payloadcms/payload/commit/7e8df100bbf86798de292466afd4c00c455ecb35))
+* performance improvement while saving large docs ([901ad49](https://github.com/payloadcms/payload/commit/901ad498b47bcb8ae995ade18f2fc08cd33f0645))
+
+# [0.10.0](https://github.com/payloadcms/payload/compare/v0.9.5...v0.10.0) (2021-09-09)
+
+
+### Bug Fixes
+
+* admin UI collection id is required ([dc96b90](https://github.com/payloadcms/payload/commit/dc96b90cba01756374dde5b91f7702e0a0c661aa))
+* allow save of collection with an undefined point ([f80646c](https://github.com/payloadcms/payload/commit/f80646c5987db4c228b00beda9549259021c2a40))
+* config validation correctly prevents empty strings for option values ([41e7feb](https://github.com/payloadcms/payload/commit/41e7febf6a21d2fff39a335c033d9e9582294147))
+* ensures hooks run before access ([96629f1](https://github.com/payloadcms/payload/commit/96629f1f0100efdb9c5ad57c1a46add3c15ea65d))
+* ensures proper order while transforming incoming and outgoing data ([c187da0](https://github.com/payloadcms/payload/commit/c187da00b1f18c66d9252a5a3e2029455d75b371))
+* improve id type semantic and restrict possible types to text and number ([29529b2](https://github.com/payloadcms/payload/commit/29529b2c56d4af7c6abce113da2f7ce84f1dcc02))
+* remove media directory to improve test run consistency ([d42d8f7](https://github.com/payloadcms/payload/commit/d42d8f76efcda7a24f2f50d60caf47b1027d81f6))
+* sanitize custom id number types ([c7558d8](https://github.com/payloadcms/payload/commit/c7558d8652780e24479b39e5f2a08a49ffff3358))
+* sort id columns ([114dc1b](https://github.com/payloadcms/payload/commit/114dc1b3fb9a1895e09671aca7a57fd5c7d84911))
+
+
+### Features
+
+* add config validation for collections with custom id ([fe1dc0b](https://github.com/payloadcms/payload/commit/fe1dc0b191e73f350b77a90887d8172bf76d46fd))
+* add config validation for collections with custom id ([d0aaf4a](https://github.com/payloadcms/payload/commit/d0aaf4a4128ad585013c392bb608f586985b71ad))
+* add point field type ([7504155](https://github.com/payloadcms/payload/commit/7504155e17a2881b7a60f49e610c062665b46d21))
+* allows user to pass req through local findByID ([8675481](https://github.com/payloadcms/payload/commit/8675481343ef45fefc2eaaea939eda8ed0a2577f))
+* frontend polish to point field ([64ad6a3](https://github.com/payloadcms/payload/commit/64ad6a30a56969127dfb592a7e0c8807e9f3d8f7))
+* graphql support for custom id types ([bc2a6e1](https://github.com/payloadcms/payload/commit/bc2a6e15753c62d2041e9afded3f1ca040dbffa3))
+* point field localization and graphql ([30f1750](https://github.com/payloadcms/payload/commit/30f17509ea9927d923ffd42c703adefc902b66ea))
+* replace the collection idType option with an explicit id field ([4b70a12](https://github.com/payloadcms/payload/commit/4b70a1225f834ecd0aab50c6e92ad50572389962))
+* support custom ids ([3cc921a](https://github.com/payloadcms/payload/commit/3cc921acc92e1b4a372468b644b7e676400d9c26))
+
+## [0.9.5](https://github.com/payloadcms/payload/compare/v0.9.4...v0.9.5) (2021-08-23)
+
+
+### Bug Fixes
+
+* obscure conditional logic bug ([b0dc125](https://github.com/payloadcms/payload/commit/b0dc12560423af5083d36cfd16f464f08ab66d9d))
+* windows compatible absolute paths for staticDir ([b21316b](https://github.com/payloadcms/payload/commit/b21316b6cc392c793614024648c5301c7e03c326))
+
+## [0.9.4](https://github.com/payloadcms/payload/compare/v0.9.3...v0.9.4) (2021-08-06)
+
+## [0.9.3](https://github.com/payloadcms/payload/compare/v0.9.2...v0.9.3) (2021-08-06)
+
+
+### Bug Fixes
+
+* args no longer optional in collection and global hooks ([a5ea0ff](https://github.com/payloadcms/payload/commit/a5ea0ff61945f3da106f0d9dbb6a90fb1d884061))
+
+## [0.9.2](https://github.com/payloadcms/payload/compare/v0.9.1...v0.9.2) (2021-08-06)
+
+
+### Bug Fixes
+
+* row admin type ([deef520](https://github.com/payloadcms/payload/commit/deef5202c15301b685fe5efc8a6ff59b012ea1d4))
+
+
+### Features
+
+* allow completely disabling local file storage ([9661c6d](https://github.com/payloadcms/payload/commit/9661c6d40acc41d21eebc42b0cc1871f28d35a73))
+* allows upload resizing to maintain aspect ratio ([dea54a4](https://github.com/payloadcms/payload/commit/dea54a4cccead86e6ffc9f20457f295e1c08405b))
+* exposes auto-sized uploads on payload req ([9c8935f](https://github.com/payloadcms/payload/commit/9c8935fd51439627cccf3f6625236375f5909445))
+* reduces group heading from h2 to h3 ([907f8fd](https://github.com/payloadcms/payload/commit/907f8fd94d7e6cfa7eac0040c134cc714f29800d))
+
+## [0.9.1](https://github.com/payloadcms/payload/compare/v0.9.0...v0.9.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* groups with failing conditions being incorrectly required on backend ([4cc0ea1](https://github.com/payloadcms/payload/commit/4cc0ea1d81cd7579cb330091eb111a27262ff031))
+* relationship field access control in admin UI ([65db8d9](https://github.com/payloadcms/payload/commit/65db8d9fc2c8b556cc284966b9b69f5d6512aca5))
+
+
+### Features
+
+* exposes collection after read hook type ([01a191a](https://github.com/payloadcms/payload/commit/01a191a13967d98ebf57891efd21b2607804e4e3))
+
+# [0.9.0](https://github.com/payloadcms/payload/compare/v0.8.2...v0.9.0) (2021-08-02)
+
+### BREAKING CHANGES
+
+* Due to greater plugin possibilities and performance enhancements, plugins themselves no longer accept a completely sanitized config. Instead, they accept a _validated_ config as-provided, but sanitization is now only performed after all plugins have been initialized. By config santitization, we refer to merging in default values and ensuring that the config has its full, required shape. What this now means for plugins is that within plugin code, deeply nested properties like `config.graphQL.mutations` will need to be accessed safely (optional chaining is great for this), because a user's config may not have defined `config.graphQL`. So, the only real breaking change here is are that plugins now need to safely access properties from an incoming config.
+
+### Features
+
+* removes sanitization of configs before plugins are instantiated ([8af3947](https://github.com/payloadcms/payload/commit/8af39472e19a26453647d1c1ab0bbce15db2c642))
+
+## [0.8.2](https://github.com/payloadcms/payload/compare/v0.8.1...v0.8.2) (2021-08-02)
+
+
+### Bug Fixes
+
+* more advanced conditional logic edge cases ([33983de](https://github.com/payloadcms/payload/commit/33983deb3761813506348f8ff804a2117d1324ef))
+
+
+### Features
+
+* export error types ([12cba62](https://github.com/payloadcms/payload/commit/12cba62930b8d35b22e3a7a99cf06df29bd4964a))
+
+## [0.8.1](https://github.com/payloadcms/payload/compare/v0.8.0...v0.8.1) (2021-07-29)
+
+
+### BREAKING CHANGES
+
+* If you have any plugins that are written in TypeScript, we have changed plugin types to make them more flexible. Whereas before you needed to take in a fully sanitized config, and return a fully sanitized config, we now have simplified that requirement so that you can write configs in your own plugins just as an end user of Payload can write their own configs.
+
+Now, configs will be sanitized **_before_** plugins are executed **_as well as_** after plugins are executed.
+
+So, where your plugin may have been typed like this before:
+
+```ts
+ import { SanitizedConfig } from 'payload/config';
+
+ const plugin = (config: SanitizedConfig): SanitizedConfig => {
+  return {
+    ...config,
+  }
+ }
+```
+
+It can now be written like this:
+
+```ts
+ import { Config } from 'payload/config';
+
+ const plugin = (config: Config): Config => {
+  return {
+    ...config,
+  }
+ }
+```
+
+### Features
+
+* improves plugin writability ([a002b71](https://github.com/payloadcms/payload/commit/a002b7105f5c312e846c80032a350046db10236c))
+
+# [0.8.0](https://github.com/payloadcms/payload/compare/v0.7.10...v0.8.0) (2021-07-28)
+
+### BREAKING CHANGES
+
+* There have been a few very minor, yet breaking TypeScript changes in this release. If you are accessing Payload config types from directly within the `dist` folder, like any of the following:
+
+- `import { PayloadCollectionConfig, CollectionConfig } from 'payload/dist/collections/config/types';`
+- `import { PayloadGlobalConfig, GlobalConfig } from 'payload/dist/globals/config/types';`
+- `import { Config, PayloadConfig } from 'payload/config';`
+
+You may need to modify your code to work with this release. The TL;DR of the change is that we have improved our naming conventions of internally used types, which will become more important over time. Now, we have landed on a naming convention as follows:
+
+- Incoming configs, typed correctly for optional / required config properties, are named `Config`, `CollectionConfig`, and `GlobalConfig`.
+- Fully defaulted, sanitized, and validated configs are now named `SanitizedConfig`, `SanitizedCollectionConfig`, and `SanitizedGlobalConfig`.
+
+They can be imported safely outside of the `dist` folder now as well. For more information on how to properly import which types you need, see the following Docs pages which have now been updated with examples on how to properly access the new types:
+
+- [Base Payload config docs](https://payloadcms.com/docs/configuration/overview)
+- [Collection config docs](https://payloadcms.com/docs/configuration/collections)
+- [Global config docs](https://payloadcms.com/docs/configuration/globals)
+
+### Bug Fixes
+
+* ensures text component is always controlled ([c649362](https://github.com/payloadcms/payload/commit/c649362b95f1ddaeb47cb121b814ca30712dea86))
+
+
+### Features
+
+* revises naming conventions of config types ([5a7e5b9](https://github.com/payloadcms/payload/commit/5a7e5b921d7803ec2da8cc3dc8162c1dd6828ca0))
+
+## [0.7.10](https://github.com/payloadcms/payload/compare/v0.7.9...v0.7.10) (2021-07-27)
+
+
+### Bug Fixes
+
+* jest debug testing ([a2fa30f](https://github.com/payloadcms/payload/commit/a2fa30fad2cd9b8ab6ac4f3905706b97d5663954))
+* skipValidation logic ([fedeaea](https://github.com/payloadcms/payload/commit/fedeaeafc9607f7c21e40c2df44923056e5d460c))
+
+
+### Features
+
+* improves conditional logic performance and edge cases ([d43390f](https://github.com/payloadcms/payload/commit/d43390f2a4c5ebeb7b9b0f07e003816005efc761))
+
+## [0.7.9](https://github.com/payloadcms/payload/compare/v0.7.8...v0.7.9) (2021-07-27)
+
+
+### Bug Fixes
+
+* missing richtext gutter ([4d1249d](https://github.com/payloadcms/payload/commit/4d1249dd03f441ee872e66437118c3e8703aaefc))
+
+
+### Features
+
+* add admin description to collections and globals ([4544711](https://github.com/payloadcms/payload/commit/4544711f0e4ea0e78570b93717a4bf213946d9b3))
+* add collection slug to schema validation errors ([ebfb72c](https://github.com/payloadcms/payload/commit/ebfb72c8fa0723ec75922c6fa4739b48ee82b29f))
+* add component support to collection and global description ([fe0098c](https://github.com/payloadcms/payload/commit/fe0098ccd9b3477b47985222659a0e3fc2e7bb3b))
+* add component support to field description ([e0933f6](https://github.com/payloadcms/payload/commit/e0933f612a70af0a18c88ef96e7af0878e20cf01))
+* add customizable admin field descriptions ([dac60a0](https://github.com/payloadcms/payload/commit/dac60a024b0eb7197d5a501daea342827ee7c751))
+* add descriptions to every allowed field type, globals and collections ([29a1108](https://github.com/payloadcms/payload/commit/29a1108518c7942f8ae06a990393a6e0ad4b6b16))
+* add global slug and field names to schema validation errors ([bb63b4a](https://github.com/payloadcms/payload/commit/bb63b4aad153d125f68bf1fe1e9a3e4a5358ded9))
+* improves group styling when there is no label ([ea358a6](https://github.com/payloadcms/payload/commit/ea358a66e8b8d2e54dd162eae0cf7066128cfabf))
+
+## [0.7.8](https://github.com/payloadcms/payload/compare/v0.7.7...v0.7.8) (2021-07-23)
+
+
+### Features
+
+* fixes group label schema validation ([cbac888](https://github.com/payloadcms/payload/commit/cbac8887ddb7a4446f5502c577d4600905b13380))
+
+## [0.7.7](https://github.com/payloadcms/payload/compare/v0.7.6...v0.7.7) (2021-07-23)
+
+
+### Bug Fixes
+
+* accurately documents the props for the datepicker field ([dcd8052](https://github.com/payloadcms/payload/commit/dcd8052498dd2900f228eaffcf6142b63e8e5a9b))
+
+
+### Features
+
+* only attempts to find config when payload is initialized ([266ccb3](https://github.com/payloadcms/payload/commit/266ccb374449b0a131a574d9b12275b6bb7e5c60))
+
+## [0.7.6](https://github.com/payloadcms/payload/compare/v0.7.5...v0.7.6) (2021-07-07)
+
+## [0.7.5](https://github.com/payloadcms/payload/compare/v0.7.4...v0.7.5) (2021-07-07)
+
+
+### Bug Fixes
+
+* crash on bullet list de-selection ([5388513](https://github.com/payloadcms/payload/commit/538851325d1558425918098e35e108595189774b))
+* updates demo richtext elements with proper SCSS ([0075912](https://github.com/payloadcms/payload/commit/007591272f77e5dcc5e5a4a8f71459402f6605d4))
+
+
+### Features
+
+* adds plugins infrastructure ([6b25531](https://github.com/payloadcms/payload/commit/6b255315e0c475d700383f2738839966449fc563))
+* enables backspace to deactivate richtext list elements ([91141ad](https://github.com/payloadcms/payload/commit/91141ad62f0f6ef3528e62eef23711e937d302ce))
+
+## [0.7.4](https://github.com/payloadcms/payload/compare/v0.7.3...v0.7.4) (2021-07-01)
+
+
+### Bug Fixes
+
+* adds proper scss stylesheets to payload/scss ([84e31ae](https://github.com/payloadcms/payload/commit/84e31aed141efe5aa1b0c24a61bf35eb3d671242))
+
+## [0.7.3](https://github.com/payloadcms/payload/compare/v0.7.2...v0.7.3) (2021-07-01)
+
+
+### Bug Fixes
+
+* changes scss imports to allow vars imports to payload projects ([ea80fd6](https://github.com/payloadcms/payload/commit/ea80fd68b14139cb01259a47ea597d33526d0c76))
+
+
+### Features
+
+* export all field prop types for custom components ([5bea9ae](https://github.com/payloadcms/payload/commit/5bea9ae1263f1d93e8b011ae97bb067a8c9bb4e1))
+
+## [0.7.2](https://github.com/payloadcms/payload/compare/v0.7.1...v0.7.2) (2021-06-22)
+
+
+### Bug Fixes
+
+* parses incoming numbers through query string for use in where clauses ([4933b34](https://github.com/payloadcms/payload/commit/4933b34f6b5dfa960c2a830a8c74769d6712130a))
+* respect maxDepth 0 ([95c1650](https://github.com/payloadcms/payload/commit/95c165018edf8e80c4dc828d3d77b6fa6d799de9))
+* safely stringifies ObjectIDs while populating relationships ([d6bc6f9](https://github.com/payloadcms/payload/commit/d6bc6f9f0e8391818783cdf7edf282506e2c9fed))
+
+
+### Features
+
+* adds maxDepth to relationships and upload fields ([880dabd](https://github.com/payloadcms/payload/commit/880dabdcad10dcd9f057da71a601190fbeecf92d))
+
+## [0.7.1](https://github.com/payloadcms/payload/compare/v0.7.0...v0.7.1) (2021-06-21)
+
+
+### Bug Fixes
+
+* babel config file error ([3af2554](https://github.com/payloadcms/payload/commit/3af2554eacab45317745ad72c8848b4dd1ddc16a))
+
+# [0.7.0](https://github.com/payloadcms/payload/compare/v0.6.10...v0.7.0) (2021-06-21)
+
+
+### Bug Fixes
+
+* handle all scenarios in select cell ([dd40ab0](https://github.com/payloadcms/payload/commit/dd40ab07fa359802578ed948136018dfc9a538c5))
+
+
+### Features
+
+* exposes babel config via payload/babel ([#203](https://github.com/payloadcms/payload/issues/203)) ([67c1e28](https://github.com/payloadcms/payload/commit/67c1e280eb891a736703e242518bbeac8b8c2878))
+* user preferences ([#195](https://github.com/payloadcms/payload/issues/195)) ([fb60bc7](https://github.com/payloadcms/payload/commit/fb60bc79a11d69c5dab6b4921d62614a7b914fef))
+
+## [0.6.10](https://github.com/payloadcms/payload/compare/v0.6.9...v0.6.10) (2021-05-23)
+
+## [0.6.9](https://github.com/payloadcms/payload/compare/v0.6.8...v0.6.9) (2021-05-16)
+
+
+### Bug Fixes
+
+* misc responsive improvements
+* date clipping in sidebar ([#165](https://github.com/payloadcms/payload/issues/165))
+* misc polish to popup component
+* admin _verified field not displaying proper field value
+* properly typed express-fileupload config options ([#180](https://github.com/payloadcms/payload/issues/180))
+
+## [0.6.8](https://github.com/payloadcms/payload/compare/v0.6.7...v0.6.8) (2021-05-12)
+
+
+### Features
+
+* add mimeTypes validation for uploads ([a5fcdf0](https://github.com/payloadcms/payload/commit/a5fcdf03bae681c5b2e0de6b681d20efe8ebdd7f))
+* disables user scalable in mobile ([#177](https://github.com/payloadcms/payload/issues/177)) ([46c1a36](https://github.com/payloadcms/payload/commit/46c1a36fdb9363201b65ecdec44088cb41532bd6))
+* exposes locale within preview function ([2d67448](https://github.com/payloadcms/payload/commit/2d67448d8ad1a7d4238820d0ccd93da961fc051c))
+* restrict upload mime types in file picker ([1c6f32f](https://github.com/payloadcms/payload/commit/1c6f32f2881410a1534b61711af05fd35e7977c2))
+
+## [0.6.7](https://github.com/payloadcms/payload/compare/v0.6.6...v0.6.7) (2021-05-07)
+
+
+### Features
+
+* add ability to hide gutter for RichText fields ([e791c5b](https://github.com/payloadcms/payload/commit/e791c5b7b325e58d273041ff426d19bafc4fc102))
+* allows group field gutter to be disabled ([9aebeaf](https://github.com/payloadcms/payload/commit/9aebeaf579b9c8add64734dce92e4d92c0a1a24c))
+* exposes component types ([99466fa](https://github.com/payloadcms/payload/commit/99466fa41e24779705f517d29d57e6174508ebcc))
+* shrink image thumbnails on larger screens ([e565fa6](https://github.com/payloadcms/payload/commit/e565fa6f1ce13d76b8111e543d4c799a5d7f450e))
+* support global date format ([670ccf2](https://github.com/payloadcms/payload/commit/670ccf2f589c306d13f3060b8acf4f4d33fcdd23))
+
+## [0.6.6](https://github.com/payloadcms/payload/compare/v0.6.5...v0.6.6) (2021-04-27)
+
+
+### Bug Fixes
+
+* graphql returns compatible error format ([6f188b1](https://github.com/payloadcms/payload/commit/6f188b1fa6e631a992439f055e8e76c341ca6dfa))
+* handle rich text saving as empty string ([382089b](https://github.com/payloadcms/payload/commit/382089b484b278e6ff491a2447ad06c41b96d5e3))
+* removes incoming.data.length check, since data is typed as a keyed array when it is an instance of APIError ([2643e1a](https://github.com/payloadcms/payload/commit/2643e1a1006f86b24001f65cf39da245fa4daaad))
+* support image resizing on M1 chip ([8cfc039](https://github.com/payloadcms/payload/commit/8cfc039cd0ffd497728f185b6ab45695302d3b95))
+* update operation can save password changes ([a85bf9e](https://github.com/payloadcms/payload/commit/a85bf9e836f9463d94f13857254f5d4df6f68c72))
+
+## [0.6.5](https://github.com/payloadcms/payload/compare/v0.6.4...v0.6.5) (2021-04-22)
+
+
+### Features
+
+* builds plugin infrastructure ([#149](https://github.com/payloadcms/payload/issues/149)) ([f17c6e4](https://github.com/payloadcms/payload/commit/f17c6e4010de07578af21398f667fa55bc8343bc))
+
+## [0.6.4](https://github.com/payloadcms/payload/compare/v0.6.3...v0.6.4) (2021-04-21)
+
+
+### Bug Fixes
+
+* allows _verificationToken to come back via showHiddenFields ([74430ea](https://github.com/payloadcms/payload/commit/74430ea1519c1ba0ad655daf4e8f5d8dae855358))
+
+## [0.6.3](https://github.com/payloadcms/payload/compare/v0.6.2...v0.6.3) (2021-04-21)
+
+
+### Bug Fixes
+
+* make admin field properties in joi schema match TS types ([519c021](https://github.com/payloadcms/payload/commit/519c021525be114f43ad321233a9b8211d309ed0))
+* properly label arrays/blocks with plural and singular ([fa49811](https://github.com/payloadcms/payload/commit/fa49811377103db9241f43537e508da62eb19076))
+* safely parses incoming stringified richtext json ([9c95c75](https://github.com/payloadcms/payload/commit/9c95c750305633e99e7d80b5ba407b5b3146d691))
+
+## [0.6.2](https://github.com/payloadcms/payload/compare/v0.6.1...v0.6.2) (2021-04-19)
+
+
+### Features
+
+* modifies relationship field to react to changing relationTo ([ddf25fb](https://github.com/payloadcms/payload/commit/ddf25fbb6559d93dd5b9105bd4a0a952fc72154b))
+
+## [0.6.1](https://github.com/payloadcms/payload/compare/v0.6.0...v0.6.1) (2021-04-19)
+
+
+### Bug Fixes
+
+* cleans up duplicative columns ([5f2073a](https://github.com/payloadcms/payload/commit/5f2073ae685f22d099bc8f0d3e406e73ee59cd1d))
+* graphql localized relationship bugs ([280f809](https://github.com/payloadcms/payload/commit/280f8094217de759ba6424dfd2294a6bfcb1d57a))
+* moves enableRichTextRelationship to proper spot ([16ca22b](https://github.com/payloadcms/payload/commit/16ca22b4cc0d8e5d106fa8c8c6e2dde0ff972839))
+
+
+### Features
+
+* sets enableRichTextRelationship to true by default ([9970470](https://github.com/payloadcms/payload/commit/99704707dda25f8617d26552942915aa6e9d7a57))
+
+# [0.6.0](https://github.com/payloadcms/payload/compare/v0.5.10...v0.6.0) (2021-04-19)
+
+### BREAKING CHANGES
+
+* By default, all Collection and Global access control functions are now set to require a user to be logged in to interact through GraphQL or REST APIs. This default access control is set to ensure that your API data is secure out of the box. From there, you can opt to publicly expose API actions as you need.
+
+#### Migration Instructions to `0.6.x`:
+
+If you have any Collections or Globals that should be publicly available without being logged in, you need to define an access control function for each operation that needs to be publicly available.
+
+For example, if you have a `pages` collection with no existing access control, and it should be publicly readable, you should change its config from this:
+
+```js
+const Page = {
+  slug: 'pages',
+  access: {
+    // No `read` access control was set
+  }
+}
+```
+
+To:
+
+```js
+const Page = {
+  slug: 'pages',
+  access: {
+    // Now we explicitly allow public read access
+    // to this collection's documents
+    read: () => true
+  }
+}
+```
+
+If none of your collections or globals should be publicly exposed, you don't need to do anything to upgrade.
+
+### Bug Fixes
+
+* clears richtext element on enter, refocuses on toolbar button click ([4b19795](https://github.com/payloadcms/payload/commit/4b1979540d2ec33ce8396f572baba5e64962c0da))
+* ensures api keys are properly populated in admin ([4359a70](https://github.com/payloadcms/payload/commit/4359a70a8b0bca380cc513dfcb83b2fbe28cbef4))
+* ensures first relationship options are loaded only once ([75a5b04](https://github.com/payloadcms/payload/commit/75a5b047056b4e4e7a415a6903a1131cc61b0318))
+* searching on relationship fields properly fetches results ([b86c3da](https://github.com/payloadcms/payload/commit/b86c3daa9952ccc9db324fecd53bb75f69cecfd4))
+* upload useAsTitle set to filename by default ([7db23f8](https://github.com/payloadcms/payload/commit/7db23f8ebbf115ca45fa55718b0d1be18ca54cd3))
+
+
+### Features
+
+* autolabel fields when label is omitted ([#42](https://github.com/payloadcms/payload/issues/42)) ([b383eb6](https://github.com/payloadcms/payload/commit/b383eb65c6b524fd7cfddb7ac60a3f263e1b891e))
+* dynamically populates richtext relationships ([3530424](https://github.com/payloadcms/payload/commit/353042467f12458994d734cf54423eb95eea9003))
+* improve unique field value error handling ([21b2bd4](https://github.com/payloadcms/payload/commit/21b2bd4b6708823880fb87035495ab4c2c55da90))
+* improves margins in rich text elements ([20d7a01](https://github.com/payloadcms/payload/commit/20d7a01919634faa366add792f98a36e68f213e9))
+
+## [0.5.10](https://github.com/payloadcms/payload/compare/v0.5.9...v0.5.10) (2021-04-14)
+
+
+### Bug Fixes
+
+* feeds collectionSlug through me auth for graphql resolver ([9ee2f9c](https://github.com/payloadcms/payload/commit/9ee2f9c0dc25ea32ee0f0864e30afb389903b3cd))
+
+## [0.5.9](https://github.com/payloadcms/payload/compare/v0.5.8...v0.5.9) (2021-04-14)
+
+## [0.5.8](https://github.com/payloadcms/payload/compare/v0.5.7...v0.5.8) (2021-04-13)
+
+
+### Bug Fixes
+
+* revises graphql import syntax ([20f1e6c](https://github.com/payloadcms/payload/commit/20f1e6cb044254af7a0db72cc9dab95d32db0333))
+
+## [0.5.7](https://github.com/payloadcms/payload/compare/v0.5.5...v0.5.7) (2021-04-13)
+
+
+### Bug Fixes
+
+* clears verificationToken when _verified is true ([e58b152](https://github.com/payloadcms/payload/commit/e58b152d40394ec59b7a779feb3b9f02a6f4a0b6))
+* custom query / mutation types ([a78fc97](https://github.com/payloadcms/payload/commit/a78fc974b80b153028e4796b15d2b6b17fe023bb))
+* ensures email is still prefilled in auth configs ([31c41c2](https://github.com/payloadcms/payload/commit/31c41c22eca96721ce2982bcf5860dfd9e5c7beb))
+* ensures failed conditions send path to form ([dff72fb](https://github.com/payloadcms/payload/commit/dff72fbf2f49d372423da8bc2840aad6d9c1ea1b))
+* handle add/remove labels for all usage of Array field type ([ddf5df2](https://github.com/payloadcms/payload/commit/ddf5df290c5b36af0dc37a79c476001387f73275))
+* make upload cell mimetype inline ([414bc01](https://github.com/payloadcms/payload/commit/414bc01b055ed6075613f4241f185cb0c25f046d))
+* pagination calculation for current range ([000dee8](https://github.com/payloadcms/payload/commit/000dee85bd5858fe3d45e08c62943a6a1c6e349c))
+* updates config schema for graphQL mutations and queries ([afc9454](https://github.com/payloadcms/payload/commit/afc9454465d7445c45f560eade0b17d831b04e2c))
+
+
+### Features
+
+* auto verifies first user registration ([8f720c0](https://github.com/payloadcms/payload/commit/8f720c000df26d34f7f8652f170525c7d54184a5))
+* optimize save within Edit ([91d37fb](https://github.com/payloadcms/payload/commit/91d37fb41d820fe2cdcdbb28f999df2de751316e))
+* prevents DraggableSections from re-mounting on doc save ([0094837](https://github.com/payloadcms/payload/commit/00948376358a4bfecc3a6cb8cf0a6ad9a0b5a227))
+* remembers conditional field values after removing / readding ([988d0a4](https://github.com/payloadcms/payload/commit/988d0a4b08e1228bb358bb133bcb05dbce7f55ab))
+* remove mimetype from upload cell type ([776b9c9](https://github.com/payloadcms/payload/commit/776b9c9c30b6d9d795c509a558fd1eee666b2652))
+
 ## [0.5.5](https://github.com/payloadcms/payload/compare/v0.5.4...v0.5.5) (2021-04-02)
 
 

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">Payload</h1>
-<p align="center">A self-hosted, JavaScript headless CMS & application framework built with Express, MongoDB and React.</p>
+<p align="center">A self-hosted, TypeScript / JavaScript headless CMS & application framework built with Express, MongoDB and React.</p>
 <p align="center">
   <a href="https://github.com/payloadcms/payload/actions">
     <img src="https://github.com/payloadcms/payload/workflows/build/badge.svg">

babel.js

@@ -0,0 +1,3 @@
+const babelConfig = require('./dist/babel.config');
+
+exports.config = babelConfig;

components/fields/Array.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, RenderArrayProps } from '../../dist/admin/components/forms/field-types/Array/types';

components/fields/Blocks.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, RenderBlockProps } from '../../dist/admin/components/forms/field-types/Blocks/types';

components/fields/Cell.ts

@@ -0,0 +1 @@
+export { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/fields/Checkbox.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Checkbox/types';

components/fields/Code.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Code/types';

components/fields/DateTime.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/DateTime/types';

components/fields/Email.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Email/types';

components/fields/Group.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Group/types';

components/fields/Number.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Number/types';

components/fields/Password.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Password/types';

components/fields/RadioGroup/RadioInput.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/RadioInput/types';

components/fields/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/types';

components/fields/Relationship.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, Option, ValueWithRelation } from '../../dist/admin/components/forms/field-types/Relationship/types';

components/fields/RichText.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/RichText/types';

components/fields/Row.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Row/types';

components/fields/Select.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, Option } from '../../dist/admin/components/forms/field-types/Select/types';

components/fields/Text.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Text/types';

components/fields/Textarea.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Textarea/types';

components/fields/Upload.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Upload/types';

components/forms.ts

@@ -6,7 +6,8 @@ export {
   useFormModified,
 } from '../dist/admin/components/forms/Form/context';
 
-export { default as useFieldType } from '../dist/admin/components/forms/useFieldType';
+export { default as useField } from '../dist/admin/components/forms/useField';
+export { default as useFieldType } from '../dist/admin/components/forms/useField';
 
 export { default as Form } from '../dist/admin/components/forms/Form';
 
@@ -15,5 +16,8 @@ export { default as Group } from '../dist/admin/components/forms/field-types/Gro
 export { default as Select } from '../dist/admin/components/forms/field-types/Select';
 export { default as Checkbox } from '../dist/admin/components/forms/field-types/Checkbox';
 export { default as Submit } from '../dist/admin/components/forms/Submit';
+export { default as Label } from '../dist/admin/components/forms/Label';
 
 export { default as reduceFieldsToValues } from '../dist/admin/components/forms/Form/reduceFieldsToValues';
+
+export { default as withCondition } from '../dist/admin/components/forms/withCondition';

components/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/admin/components';

components/preferences.ts

@@ -0,0 +1 @@
+export { usePreferences } from '../dist/admin/components/utilities/Preferences';

components/views.js

@@ -1,2 +0,0 @@
-export { default as Edit } from '../dist/admin/components/views/collections/Edit/Default';
-export { default as List } from '../dist/admin/components/views/collections/List/Default';

components/views/Cell.ts

@@ -0,0 +1,3 @@
+export { default as Cell } from '../../dist/admin/components/views/collections/List/Cell';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/views/Edit.ts

@@ -0,0 +1,3 @@
+export { default as Edit } from '../../dist/admin/components/views/collections/Edit/Default';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/Edit/types';

components/views/List.ts

@@ -0,0 +1,3 @@
+export { default as List } from '../../dist/admin/components/views/collections/List/Default';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/Edit/types';

demo/client/components/DemoUIField/Cell.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DemoUIFieldCell: React.FC = () => (
+  <p>Demo UI Field Cell</p>
+);
+
+export default DemoUIFieldCell;

demo/client/components/DemoUIField/Field.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DemoUIField: React.FC = () => (
+  <p>Demo UI Field</p>
+);
+
+export default DemoUIField;

demo/client/components/richText/elements/Button/Button/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../scss/vars.scss';
+@import '../../../../../../../src/admin/scss/styles.scss';
 
 .button-rich-text-button {
   .btn {

demo/client/components/richText/elements/Button/Element/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../scss/vars.scss';
+@import '../../../../../../../src/admin/scss/styles.scss';
 
 .rich-text-button {
   margin: $baseline 0;

demo/collections/Admin.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import roles from '../access/roles';
 import checkRole from '../access/checkRole';
 
@@ -7,7 +7,7 @@ const access = ({ req: { user } }) => {
   return result;
 };
 
-const Admin: PayloadCollectionConfig = {
+const Admin: CollectionConfig = {
   slug: 'admins',
   labels: {
     singular: 'Admin',
@@ -44,23 +44,17 @@ const Admin: PayloadCollectionConfig = {
       saveToJWT: true,
       hasMany: true,
     },
+    {
+      name: 'publicUser',
+      type: 'relationship',
+      hasMany: true,
+      relationTo: 'public-users',
+    },
     {
       name: 'apiKey',
       type: 'text',
       access: {
-        read: ({ req: { user } }) => {
-          if (checkRole(['admin'], user)) {
-            return true;
-          }
-
-          if (user) {
-            return {
-              email: user.email,
-            };
-          }
-
-          return false;
-        },
+        read: ({ req: { user } }) => checkRole(['admin'], user),
       },
     },
   ],

demo/collections/AllFields.ts

@@ -1,25 +1,32 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
+import CollectionDescription from '../customComponents/CollectionDescription';
+import DemoUIField from '../client/components/DemoUIField/Field';
+import DemoUIFieldCell from '../client/components/DemoUIField/Cell';
 
-const AllFields: PayloadCollectionConfig = {
+const AllFields: CollectionConfig = {
   slug: 'all-fields',
   labels: {
     singular: 'All Fields',
     plural: 'All Fields',
   },
   admin: {
+    defaultColumns: ['text', 'demo', 'createdAt'],
     useAsTitle: 'text',
-    preview: (doc, token) => {
-      if (doc && doc.text) {
-        return `http://localhost:3000/previewable-posts/${doc.text}?preview=true&token=${token}`;
+    preview: (doc, { token }) => {
+      const { text } = doc;
+
+      if (doc && text) {
+        return `http://localhost:3000/previewable-posts/${text}?preview=true&token=${token}`;
       }
 
       return null;
     },
+    description: CollectionDescription,
   },
   access: {
     read: () => true,
@@ -38,11 +45,33 @@ const AllFields: PayloadCollectionConfig = {
         read: ({ req: { user } }) => Boolean(user),
       },
     },
+    {
+      name: 'descriptionText',
+      type: 'text',
+      label: 'Text with text description',
+      defaultValue: 'Default Value',
+      admin: {
+        description: 'This text describes the field',
+      },
+    },
+    {
+      name: 'descriptionFunction',
+      type: 'text',
+      label: 'Text with function description',
+      defaultValue: 'Default Value',
+      maxLength: 20,
+      admin: {
+        description: ({ value }) => (typeof value === 'string' ? `${20 - value.length} characters left` : ''),
+      },
+    },
     {
       name: 'image',
       type: 'upload',
       label: 'Image',
       relationTo: 'media',
+      admin: {
+        description: 'No selfies',
+      },
     },
     {
       name: 'select',
@@ -85,20 +114,11 @@ const AllFields: PayloadCollectionConfig = {
       required: true,
       hasMany: true,
     },
-    {
-      name: 'dateFieldExample',
-      label: 'Day and Time',
-      type: 'date',
-      admin: {
-        date: {
-          timeIntervals: 30,
-        },
-      },
-    },
     {
       name: 'dayOnlyDateFieldExample',
       label: 'Day Only',
       type: 'date',
+      required: true,
       admin: {
         date: {
           pickerAppearance: 'dayOnly',
@@ -234,6 +254,9 @@ const AllFields: PayloadCollectionConfig = {
       label: 'Relationship to One Collection',
       name: 'relationship',
       relationTo: 'conditions',
+      admin: {
+        description: 'Relates to description',
+      },
     },
     {
       type: 'relationship',
@@ -252,24 +275,8 @@ const AllFields: PayloadCollectionConfig = {
       type: 'textarea',
       label: 'Textarea',
       name: 'textarea',
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      label: 'Slug',
       admin: {
-        position: 'sidebar',
-      },
-      localized: true,
-      unique: true,
-      required: true,
-    },
-    {
-      name: 'checkbox',
-      type: 'checkbox',
-      label: 'Checkbox',
-      admin: {
-        position: 'sidebar',
+        description: 'Hello textarea description',
       },
     },
     {
@@ -298,6 +305,47 @@ const AllFields: PayloadCollectionConfig = {
         ],
       },
     },
+    {
+      type: 'ui',
+      name: 'demo',
+      admin: {
+        position: 'sidebar',
+        components: {
+          Field: DemoUIField,
+          Cell: DemoUIFieldCell,
+        },
+      },
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      label: 'Slug',
+      admin: {
+        position: 'sidebar',
+      },
+      localized: true,
+      unique: true,
+      required: true,
+    },
+    {
+      name: 'checkbox',
+      type: 'checkbox',
+      label: 'Checkbox',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'dateFieldExample',
+      label: 'Day and Time',
+      type: 'date',
+      admin: {
+        position: 'sidebar',
+        date: {
+          timeIntervals: 30,
+        },
+      },
+    },
   ],
   timestamps: true,
 };

demo/collections/AutoLabel.ts

@@ -1,12 +1,102 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const AutoLabel: PayloadCollectionConfig = {
+const AutoLabel: CollectionConfig = {
   slug: 'auto-label',
-  fields: [{
-    name: 'text',
-    type: 'text',
-    label: 'Text',
-  }],
+  admin: {
+    useAsTitle: 'autoLabelField',
+    enableRichTextRelationship: true,
+  },
+  fields: [
+    {
+      name: 'autoLabelField',
+      type: 'text',
+    },
+    {
+      name: 'noLabel',
+      type: 'text',
+      label: false,
+    },
+    {
+      name: 'labelOverride',
+      type: 'text',
+      label: 'Custom Label',
+    },
+    {
+      name: 'testRelationship',
+      type: 'relationship',
+      relationTo: 'all-fields',
+    },
+    {
+      name: 'specialBlock',
+      type: 'blocks',
+      minRows: 1,
+      maxRows: 20,
+      // Will auto-label
+      // labels: {
+      //   singular: 'Special Block',
+      //   plural: 'Special Blocks',
+      // },
+      blocks: [
+        {
+          slug: 'number',
+          // Will auto-label
+          // labels: {
+          //   singular: 'Number',
+          //   plural: 'Numbers',
+          // },
+          fields: [
+            {
+              name: 'testNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'noLabelBlock',
+      type: 'blocks',
+      label: false,
+      minRows: 1,
+      maxRows: 20,
+      blocks: [
+        {
+          slug: 'number',
+          // labels: {
+          //   singular: 'Number',
+          //   plural: 'Numbers',
+          // },
+          fields: [
+            {
+              name: 'testNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'items',
+      type: 'array',
+      fields: [
+        {
+          name: 'itemName',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'noLabelArray',
+      type: 'array',
+      label: false,
+      fields: [
+        {
+          type: 'text',
+          name: 'textField',
+        },
+      ],
+    },
+  ],
 };
 
 export default AutoLabel;

demo/collections/Blocks.ts

@@ -1,10 +1,10 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
 
-const Blocks: PayloadCollectionConfig = {
+const Blocks: CollectionConfig = {
   slug: 'blocks',
   labels: {
     singular: 'Blocks',

demo/collections/Code.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Code: PayloadCollectionConfig = {
+const Code: CollectionConfig = {
   slug: 'code',
   labels: {
     singular: 'Code',
@@ -14,6 +14,7 @@ const Code: PayloadCollectionConfig = {
       required: true,
       admin: {
         language: 'js',
+        description: 'javascript example',
       },
     },
   ],

demo/collections/Conditions.ts

@@ -1,6 +1,10 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
+import Email from '../blocks/Email';
+import Quote from '../blocks/Quote';
+import NumberBlock from '../blocks/Number';
+import CallToAction from '../blocks/CallToAction';
 
-const Conditions: PayloadCollectionConfig = {
+const Conditions: CollectionConfig = {
   slug: 'conditions',
   labels: {
     singular: 'Conditions',
@@ -49,6 +53,20 @@ const Conditions: PayloadCollectionConfig = {
         condition: (_, siblings) => (siblings.number > 20 && siblings.enableTest === true) || (siblings.number < 20 && siblings.enableTest === false),
       },
     },
+    {
+      name: 'blocks',
+      label: 'Blocks',
+      labels: {
+        singular: 'Block',
+        plural: 'Blocks',
+      },
+      type: 'blocks',
+      blocks: [Email, NumberBlock, Quote, CallToAction],
+      required: true,
+      admin: {
+        condition: (_, siblings) => siblings?.enableTest === true,
+      },
+    },
   ],
 };
 

demo/collections/CustomComponents/components/fields/Select/Field/index.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useState } from 'react';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
+import { Props as SelectFieldType } from '../../../../../../../src/admin/components/forms/field-types/Select/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const Select: React.FC<SelectFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    options
+  } = props;
+
+  const {
+    value,
+    setValue
+  } = useField({
+    path
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    const sendToCRM = async () => {
+      try {
+        const req = await fetch('https://fake-crm.com', {
+          method: 'post',
+          body: JSON.stringify({
+            someKey: incomingValue
+          })
+        });
+
+        const res = await req.json();
+        if (res.ok) {
+          console.log('Successfully synced to CRM.')
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    sendToCRM();
+    setValue(incomingValue)
+  }, [])
+
+  return (
+    <SelectInput
+      name={name}
+      label={label}
+      options={options}
+      value={value as string}
+      onChange={onChange}
+    />
+  )
+};
+
+export default Select;

demo/collections/CustomComponents/components/fields/Text/Field/index.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const Text: React.FC<TextFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label
+  } = props;
+
+  const {
+    value,
+    setValue
+  } = useField({
+    path
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    const valueWithoutSpaces = incomingValue.replace(/\s/g, '');
+    setValue(valueWithoutSpaces)
+  }, [])
+
+  return (
+    <TextInput
+      name={name}
+      label={label}
+      value={value as string}
+      onChange={onChange}
+    />
+  )
+};
+
+export default Text;

demo/collections/CustomComponents/components/fields/UI/Field/index.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import { UIField as UIFieldType } from '../../../../../../../src/fields/config/types';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
+
+const UIField: React.FC<UIFieldType> = () => {
+  const [textValue, setTextValue] = React.useState('');
+  const [selectValue, setSelectValue] = React.useState('');
+
+  const onTextChange = useCallback((incomingValue) => {
+    setTextValue(incomingValue);
+  }, [])
+
+  const onSelectChange = useCallback((incomingValue) => {
+    setSelectValue(incomingValue);
+  }, [])
+
+  return (
+    <div>
+      <TextInput
+        name="ui-text"
+        label="Presentation-only text field (does not submit)"
+        value={textValue as string}
+        onChange={onTextChange}
+      />
+      <SelectInput
+        name="ui-select"
+        label="Presentation-only select field (does not submit)"
+        options={[
+          {
+            label: 'Option 1',
+            value: 'option-1'
+          },
+          {
+            label: 'Option 2',
+            value: 'option-2'
+          },
+          {
+            label: 'Option 3',
+            value: 'option-4'
+          }
+        ]}
+        value={selectValue as string}
+        onChange={onSelectChange}
+      />
+    </div>
+  )
+};
+
+export default UIField;

demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from 'react';
+import Upload from '../../../../../../../src/admin/components/forms/field-types/Upload';
+import { Props as UploadFieldType } from '../../../../../../../src/admin/components/forms/field-types/Upload/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const Text: React.FC<UploadFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    relationTo,
+    fieldTypes
+  } = props;
+
+  const {
+    value,
+    setValue
+  } = useField({
+    path
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    setValue(incomingValue)
+  }, [])
+
+  return (
+    <Upload
+      relationTo={relationTo}
+      fieldTypes={fieldTypes}
+      name={name}
+      label={label}
+      value={value as string}
+      onChange={onChange}
+    />
+  )
+};
+
+export default Text;

demo/collections/CustomComponents/index.ts

@@ -1,14 +1,19 @@
-import { PayloadCollectionConfig } from '../../../src/collections/config/types';
+import { CollectionConfig } from '../../../src/collections/config/types';
 import DescriptionField from './components/fields/Description/Field';
+import TextField from './components/fields/Text/Field';
+import SelectField from './components/fields/Select/Field';
+import UploadField from './components/fields/Upload/Field';
 import DescriptionCell from './components/fields/Description/Cell';
 import DescriptionFilter from './components/fields/Description/Filter';
 import NestedArrayField from './components/fields/NestedArrayCustomField/Field';
 import GroupField from './components/fields/Group/Field';
 import NestedGroupField from './components/fields/NestedGroupCustomField/Field';
 import NestedText1Field from './components/fields/NestedText1/Field';
+import UIField from './components/fields/UI/Field';
 import ListView from './components/views/List';
+import CustomDescriptionComponent from '../../customComponents/Description';
 
-const CustomComponents: PayloadCollectionConfig = {
+const CustomComponents: CollectionConfig = {
   slug: 'custom-components',
   labels: {
     singular: 'Custom Component',
@@ -24,11 +29,69 @@ const CustomComponents: PayloadCollectionConfig = {
       unique: true,
       localized: true,
     },
+    {
+      name: 'text',
+      label: 'Custom text field (removes whitespace)',
+      type: 'text',
+      required: true,
+      localized: true,
+      admin: {
+        components: {
+          Field: TextField,
+        },
+      },
+    },
+    {
+      name: 'select',
+      label: 'Custom select field (sends value to crm)',
+      type: 'select',
+      localized: true,
+      options: [
+        {
+          label: 'Option 1',
+          value: '1',
+        },
+        {
+          label: 'Option 2',
+          value: '2',
+        },
+        {
+          label: 'Option 3',
+          value: '3',
+        },
+      ],
+      admin: {
+        components: {
+          Field: SelectField,
+        },
+      },
+    },
+    {
+      name: 'ui',
+      label: 'UI',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: UIField,
+        },
+      },
+    },
+    {
+      name: 'upload',
+      label: 'Upload',
+      type: 'upload',
+      relationTo: 'media',
+      localized: true,
+      admin: {
+        components: {
+          Field: UploadField,
+        },
+      },
+    },
     {
       name: 'description',
       label: 'Description',
       type: 'textarea',
-      required: true,
       localized: true,
       admin: {
         components: {
@@ -38,6 +101,14 @@ const CustomComponents: PayloadCollectionConfig = {
         },
       },
     },
+    {
+      name: 'componentDescription',
+      label: 'Component ViewDescription',
+      type: 'text',
+      admin: {
+        description: CustomDescriptionComponent,
+      },
+    },
     {
       name: 'array',
       label: 'Array',

demo/collections/CustomID.ts

@@ -0,0 +1,22 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const CustomID: CollectionConfig = {
+  slug: 'custom-id',
+  labels: {
+    singular: 'CustomID',
+    plural: 'CustomIDs',
+  },
+  fields: [
+    {
+      name: 'id',
+      type: 'number',
+    },
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+    },
+  ],
+};
+
+export default CustomID;

demo/collections/DefaultValues.ts

@@ -1,11 +1,11 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
 
-const DefaultValues: PayloadCollectionConfig = {
+const DefaultValues: CollectionConfig = {
   slug: 'default-values',
   labels: {
     singular: 'Default Value Test',

demo/collections/File.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 
 const access = ({ req: { user } }) => {
@@ -19,7 +19,7 @@ const access = ({ req: { user } }) => {
   return false;
 };
 
-const Files: PayloadCollectionConfig = {
+const Files: CollectionConfig = {
   slug: 'files',
   labels: {
     singular: 'File',

demo/collections/Geolocation.ts

@@ -0,0 +1,81 @@
+/* eslint-disable no-param-reassign */
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const validateFieldTransformAction = (hook: string, value) => {
+  if (value !== undefined && value !== null && !Array.isArray(value)) {
+    console.error(hook, value);
+    throw new Error('Field transformAction should convert value to array [x, y] and not { coordinates: [x, y] }');
+  }
+  return value;
+};
+
+const Geolocation: CollectionConfig = {
+  slug: 'geolocation',
+  labels: {
+    singular: 'Geolocation',
+    plural: 'Geolocations',
+  },
+  access: {
+    read: () => true,
+  },
+  hooks: {
+    beforeRead: [
+      (operation) => operation.doc,
+    ],
+    beforeChange: [
+      (operation) => {
+        // eslint-disable-next-line no-param-reassign,operator-assignment
+        operation.data.beforeChange = !operation.data.location?.coordinates;
+        return operation.data;
+      },
+    ],
+    afterRead: [
+      (operation) => {
+        const { doc } = operation;
+        doc.afterReadHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+    afterChange: [
+      (operation) => {
+        const { doc } = operation;
+        doc.afterChangeHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+    afterDelete: [
+      (operation) => {
+        const { doc } = operation;
+        operation.doc.afterDeleteHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'location',
+      type: 'point',
+      label: 'Location',
+      hooks: {
+        beforeValidate: [({ value }) => validateFieldTransformAction('beforeValidate', value)],
+        beforeChange: [({ value }) => validateFieldTransformAction('beforeChange', value)],
+        afterChange: [({ value }) => validateFieldTransformAction('afterChange', value)],
+        afterRead: [({ value }) => validateFieldTransformAction('afterRead', value)],
+      },
+    },
+    {
+      name: 'localizedPoint',
+      type: 'point',
+      label: 'Localized Point',
+      localized: true,
+      hooks: {
+        beforeValidate: [({ value }) => validateFieldTransformAction('beforeValidate', value)],
+        beforeChange: [({ value }) => validateFieldTransformAction('beforeChange', value)],
+        afterChange: [({ value }) => validateFieldTransformAction('afterChange', value)],
+        afterRead: [({ value }) => validateFieldTransformAction('afterRead', value)],
+      },
+    },
+  ],
+};
+
+export default Geolocation;

demo/collections/HiddenFields.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const HiddenFields: PayloadCollectionConfig = {
+const HiddenFields: CollectionConfig = {
   slug: 'hidden-fields',
   labels: {
     singular: 'Hidden Fields',

demo/collections/Hooks.ts

@@ -1,8 +1,10 @@
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-console */
+// If importing outside of demo project, should import CollectionAfterReadHook, CollectionBeforeChangeHook, etc
+import { AfterChangeHook, AfterDeleteHook, AfterReadHook, BeforeChangeHook, BeforeDeleteHook, BeforeReadHook, CollectionConfig } from '../../src/collections/config/types';
+import { FieldHook } from '../../src/fields/config/types';
+import { Hook } from '../payload-types';
 
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
-
-const Hooks: PayloadCollectionConfig = {
+const Hooks: CollectionConfig = {
   slug: 'hooks',
   labels: {
     singular: 'Hook',
@@ -19,51 +21,51 @@ const Hooks: PayloadCollectionConfig = {
   },
   hooks: {
     beforeRead: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeRead') {
           console.log('before reading Hooks document');
         }
-      },
+      }) as BeforeReadHook<Hook>,
     ],
     beforeChange: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeChange') {
           operation.data.description += '-beforeChangeSuffix';
         }
         return operation.data;
-      },
+      }) as BeforeChangeHook<Hook>,
     ],
     beforeDelete: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeDelete') {
           // TODO: Find a better hook operation to assert against in tests
           operation.req.headers.hook = 'afterDelete';
         }
-      },
+      }) as BeforeDeleteHook,
     ],
     afterRead: [
-      (operation) => {
+      ((operation) => {
         const { doc } = operation;
         doc.afterReadHook = true;
 
         return doc;
-      },
+      }) as AfterReadHook<Hook & { afterReadHook: boolean }>,
     ],
     afterChange: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'afterChange') {
           operation.doc.afterChangeHook = true;
         }
         return operation.doc;
-      },
+      }) as AfterChangeHook<Hook & { afterChangeHook: boolean }>,
     ],
     afterDelete: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'afterDelete') {
           operation.doc.afterDeleteHook = true;
         }
         return operation.doc;
-      },
+      }) as AfterDeleteHook,
     ],
   },
   fields: [
@@ -77,7 +79,7 @@ const Hooks: PayloadCollectionConfig = {
       localized: true,
       hooks: {
         afterRead: [
-          ({ value }) => (value ? value.toUpperCase() : null),
+          ({ value }) => (value ? value.toUpperCase() : null) as FieldHook<Hook, 'title'>,
         ],
       },
     },

demo/collections/LocalOperations.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const LocalOperations: PayloadCollectionConfig = {
+const LocalOperations: CollectionConfig = {
   slug: 'local-operations',
   labels: {
     singular: 'Local Operation',
@@ -15,7 +15,7 @@ const LocalOperations: PayloadCollectionConfig = {
         });
 
         const blocksGlobal = await req.payload.findGlobal({
-          global: 'blocks-global',
+          slug: 'blocks-global',
         });
 
         formattedData.localizedPosts = localizedPosts;

demo/collections/Localized.ts

@@ -1,6 +1,15 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
+import { PayloadRequest } from '../../src/express/types';
 import { Block } from '../../src/fields/config/types';
 
+const validateLocalizationTransform = (hook: string, value, req: PayloadRequest) => {
+  if (req.locale !== 'all' && value !== undefined && typeof value !== 'string') {
+    console.error(hook, value);
+    throw new Error('Locale transformation should happen before hook is called');
+  }
+  return value;
+};
+
 const RichTextBlock: Block = {
   slug: 'richTextBlock',
   labels: {
@@ -12,11 +21,14 @@ const RichTextBlock: Block = {
       name: 'content',
       localized: true,
       type: 'richText',
+      admin: {
+        hideGutter: true,
+      },
     },
   ],
 };
 
-const LocalizedPosts: PayloadCollectionConfig = {
+const LocalizedPosts: CollectionConfig = {
   slug: 'localized-posts',
   labels: {
     singular: 'Localized Post',
@@ -43,6 +55,12 @@ const LocalizedPosts: PayloadCollectionConfig = {
       required: true,
       unique: true,
       localized: true,
+      hooks: {
+        beforeValidate: [({ value, req }) => validateLocalizationTransform('beforeValidate', value, req)],
+        beforeChange: [({ value, req }) => validateLocalizationTransform('beforeChange', value, req)],
+        afterChange: [({ value, req }) => validateLocalizationTransform('afterChange', value, req)],
+        afterRead: [({ value, req }) => validateLocalizationTransform('afterRead', value, req)],
+      },
     },
     {
       name: 'summary',

demo/collections/LocalizedArray.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import { FieldAccess } from '../../src/fields/config/types';
 import checkRole from '../access/checkRole';
 
@@ -7,12 +7,12 @@ const PublicReadabilityAccess: FieldAccess = ({ req: { user }, siblingData }) =>
     return true;
   }
 
-  if (siblingData.allowPublicReadability) return true;
+  if (siblingData?.allowPublicReadability) return true;
 
   return false;
 };
 
-const LocalizedArrays: PayloadCollectionConfig = {
+const LocalizedArrays: CollectionConfig = {
   slug: 'localized-arrays',
   labels: {
     singular: 'Localized Array',
@@ -24,7 +24,7 @@ const LocalizedArrays: PayloadCollectionConfig = {
   fields: [
     {
       type: 'array',
-      label: 'Array',
+      label: false,
       name: 'array',
       localized: true,
       required: true,

demo/collections/Media.ts

@@ -1,6 +1,17 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig, BeforeChangeHook } from '../../src/collections/config/types';
 
-const Media: PayloadCollectionConfig = {
+const checkForUploadSizesHook: BeforeChangeHook = ({ req: { payloadUploadSizes }, data }) => {
+  if (typeof payloadUploadSizes === 'object') {
+    return {
+      ...data,
+      foundUploadSizes: true,
+    };
+  }
+
+  return data;
+};
+
+const Media: CollectionConfig = {
   slug: 'media',
   labels: {
     singular: 'Media',
@@ -11,12 +22,24 @@ const Media: PayloadCollectionConfig = {
   },
   admin: {
     enableRichTextRelationship: true,
+    description: 'No selfies please',
+  },
+  hooks: {
+    beforeChange: [
+      checkForUploadSizesHook,
+    ],
   },
   upload: {
     staticURL: '/media',
     staticDir: './media',
     adminThumbnail: ({ doc }) => `/media/${doc.filename}`,
     imageSizes: [
+      {
+        name: 'maintainedAspectRatio',
+        width: 1024,
+        height: null,
+        crop: 'center',
+      },
       {
         name: 'tablet',
         width: 640,
@@ -44,6 +67,10 @@ const Media: PayloadCollectionConfig = {
       required: true,
       localized: true,
     },
+    {
+      name: 'foundUploadSizes',
+      type: 'checkbox',
+    },
   ],
   timestamps: true,
 };

demo/collections/NestedArrays.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const NestedArray: PayloadCollectionConfig = {
+const NestedArray: CollectionConfig = {
   slug: 'nested-arrays',
   labels: {
     singular: 'Nested Array',

demo/collections/Preview.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Preview: PayloadCollectionConfig = {
+const Preview: CollectionConfig = {
   slug: 'previewable-post',
   labels: {
     singular: 'Previewable Post',
@@ -8,9 +8,13 @@ const Preview: PayloadCollectionConfig = {
   },
   admin: {
     useAsTitle: 'title',
-    preview: (doc, token) => {
-      if (doc.title) {
-        return `http://localhost:3000/previewable-posts/${doc.title}?preview=true&token=${token}`;
+    preview: async (doc, { token }) => {
+      const { title } = doc;
+      if (title) {
+        const mockAsyncReq = await fetch(`http://localhost:3000/api/previewable-post?depth=0`)
+        const mockJSON = await mockAsyncReq.json();
+        const mockParam = mockJSON?.docs?.[0]?.title || '';
+        return `http://localhost:3000/previewable-posts/${title}?preview=true&token=${token}&mockParam=${mockParam}`;
       }
 
       return null;

demo/collections/PublicUsers.ts

@@ -1,9 +1,9 @@
 import checkRole from '../access/checkRole';
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
 const access = ({ req: { user } }) => checkRole(['admin'], user);
 
-const PublicUsers: PayloadCollectionConfig = {
+const PublicUsers: CollectionConfig = {
   slug: 'public-users',
   labels: {
     singular: 'Public User',

demo/collections/RelationshipA.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RelationshipA: PayloadCollectionConfig = {
+const RelationshipA: CollectionConfig = {
   slug: 'relationship-a',
   access: {
     read: () => true,
@@ -15,7 +15,6 @@ const RelationshipA: PayloadCollectionConfig = {
       label: 'Post',
       type: 'relationship',
       relationTo: 'relationship-b',
-      localized: true,
     },
     {
       name: 'LocalizedPost',
@@ -29,7 +28,7 @@ const RelationshipA: PayloadCollectionConfig = {
       name: 'postLocalizedMultiple',
       label: 'Localized Post Multiple',
       type: 'relationship',
-      relationTo: ['localized-posts', 'all-fields'],
+      relationTo: ['localized-posts', 'all-fields', 'custom-id'],
       hasMany: true,
       localized: true,
     },
@@ -41,6 +40,22 @@ const RelationshipA: PayloadCollectionConfig = {
       localized: true,
       hasMany: false,
     },
+    {
+      name: 'postMaxDepth',
+      maxDepth: 0,
+      label: 'Post With MaxDepth',
+      type: 'relationship',
+      relationTo: 'relationship-b',
+      hasMany: false,
+    },
+    {
+      name: 'customID',
+      label: 'CustomID Relation',
+      type: 'relationship',
+      relationTo: 'custom-id',
+      hasMany: true,
+      localized: true,
+    },
   ],
   timestamps: true,
 };

demo/collections/RelationshipB.ts

@@ -1,15 +1,22 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RelationshipB: PayloadCollectionConfig = {
+const RelationshipB: CollectionConfig = {
   slug: 'relationship-b',
   access: {
     read: () => true,
   },
+  admin: {
+    useAsTitle: 'title',
+  },
   labels: {
     singular: 'Relationship B',
     plural: 'Relationship B',
   },
   fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
     {
       name: 'post',
       label: 'Post',
@@ -22,10 +29,27 @@ const RelationshipB: PayloadCollectionConfig = {
       name: 'postManyRelationships',
       label: 'Post Many Relationships',
       type: 'relationship',
-      relationTo: ['relationship-a'],
+      relationTo: ['relationship-a', 'media'],
       localized: true,
       hasMany: false,
     },
+    {
+      name: 'localizedPosts',
+      label: 'Localized Posts',
+      type: 'relationship',
+      hasMany: true,
+      relationTo: ['localized-posts', 'previewable-post'],
+    },
+    {
+      name: 'nonLocalizedRelationToMany',
+      type: 'relationship',
+      relationTo: ['localized-posts', 'relationship-a'],
+    },
+    {
+      name: 'strictAccess',
+      type: 'relationship',
+      relationTo: 'strict-access',
+    },
   ],
   timestamps: true,
 };

demo/collections/RichText.ts

@@ -1,13 +1,16 @@
 import Button from '../client/components/richText/elements/Button';
 import PurpleBackground from '../client/components/richText/leaves/PurpleBackground';
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RichText: PayloadCollectionConfig = {
+const RichText: CollectionConfig = {
   slug: 'rich-text',
   labels: {
     singular: 'Rich Text',
     plural: 'Rich Texts',
   },
+  access: {
+    read: () => true,
+  },
   fields: [
     {
       name: 'defaultRichText',

demo/collections/Select.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Select: PayloadCollectionConfig = {
+const Select: CollectionConfig = {
   slug: 'select',
   labels: {
     singular: 'Select',
@@ -23,6 +23,31 @@ const Select: PayloadCollectionConfig = {
       label: 'Select From',
       required: true,
     },
+    {
+      name: 'SelectHasMany',
+      type: 'select',
+      options: [{
+        value: 'one',
+        label: 'One',
+      }, {
+        value: 'two',
+        label: 'Two',
+      }, {
+        value: 'three',
+        label: 'Three',
+      }],
+      label: 'Select HasMany',
+      required: true,
+      hasMany: true,
+    },
+    {
+      name: 'SelectJustStrings',
+      type: 'select',
+      options: ['blue', 'green', 'yellow'],
+      label: 'Select Just Strings',
+      required: true,
+      hasMany: true,
+    },
     {
       name: 'Radio',
       type: 'radio',

demo/collections/StrictAccess.ts

@@ -1,14 +1,14 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 
-const StrictAccess: PayloadCollectionConfig = {
+const StrictAccess: CollectionConfig = {
   slug: 'strict-access',
   labels: {
     singular: 'Strict Access',
     plural: 'Strict Access',
   },
   admin: {
-    useAsTitle: 'email',
+    useAsTitle: 'address',
   },
   access: {
     create: () => true,

demo/collections/Uniques.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Uniques: PayloadCollectionConfig = {
+const Uniques: CollectionConfig = {
   slug: 'uniques',
   labels: {
     singular: 'Unique',

demo/collections/UnstoredMedia.ts

@@ -0,0 +1,35 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const UnstoredMedia: CollectionConfig = {
+  slug: 'unstored-media',
+  labels: {
+    singular: 'Unstored Media',
+    plural: 'Unstored Media',
+  },
+  access: {
+    read: () => true,
+  },
+  upload: {
+    staticURL: '/unstored-media',
+    disableLocalStorage: true,
+    imageSizes: [
+      {
+        name: 'tablet',
+        width: 640,
+        height: 480,
+        crop: 'left top',
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'alt',
+      label: 'Alt Text',
+      type: 'text',
+      required: true,
+      localized: true,
+    },
+  ],
+};
+
+export default UnstoredMedia;

demo/collections/Validations.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Validations: PayloadCollectionConfig = {
+const Validations: CollectionConfig = {
   slug: 'validations',
   labels: {
     singular: 'Validation',

demo/customComponents/CollectionDescription/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CollectionDescription: React.FC = () => (
+  <div>
+    Collection description
+  </div>
+);
+
+export default CollectionDescription;

demo/customComponents/Description/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CustomDescriptionComponent: React.FC = ({ value }) => (
+  <div>
+    Character count:
+    {' '}
+    { value?.length || 0 }
+  </div>
+);
+
+export default CustomDescriptionComponent;

demo/globals/BlocksGlobal.ts

@@ -1,7 +1,7 @@
 import checkRole from '../access/checkRole';
 import Quote from '../blocks/Quote';
 import CallToAction from '../blocks/CallToAction';
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 
 export default {
   slug: 'blocks-global',
@@ -19,4 +19,4 @@ export default {
       localized: true,
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/globals/GlobalWithStrictAccess.ts

@@ -1,4 +1,4 @@
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 import checkRole from '../access/checkRole';
 
 export default {
@@ -32,4 +32,4 @@ export default {
       required: true,
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/globals/NavigationArray.ts

@@ -1,13 +1,15 @@
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 import checkRole from '../access/checkRole';
 
 export default {
   slug: 'navigation-array',
-  label: 'Navigation Array',
   access: {
     update: ({ req: { user } }) => checkRole(['admin', 'user'], user),
     read: () => true,
   },
+  admin: {
+    description: 'A description for the editor',
+  },
   fields: [
     {
       name: 'array',
@@ -25,4 +27,4 @@ export default {
       }],
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/payload-types.ts

@@ -0,0 +1,721 @@
+/* tslint:disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export interface Config {}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "navigation-array".
+ */
+export interface NavigationArray {
+  id: string;
+  array?: {
+    text?: string;
+    textarea?: string;
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "global-with-access".
+ */
+export interface GlobalWithStrictAccess {
+  id: string;
+  title: string;
+  relationship: (string | LocalizedPost)[];
+  singleRelationship: string | LocalizedPost;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localized-posts".
+ */
+export interface LocalizedPost {
+  id: string;
+  title: string;
+  summary?: string;
+  description: string;
+  richText?: {
+    [k: string]: unknown;
+  }[];
+  priority: number;
+  localizedGroup?: {
+    text?: string;
+  };
+  nonLocalizedGroup?: {
+    text?: string;
+  };
+  nonLocalizedArray?: {
+    localizedEmbeddedText?: string;
+    id?: string;
+  }[];
+  richTextBlocks?: {
+    content?: {
+      [k: string]: unknown;
+    }[];
+    id?: string;
+    blockName?: string;
+    blockType: 'richTextBlock';
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "blocks-global".
+ */
+export interface BlocksGlobal {
+  id: string;
+  blocks?: (
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "public-users".
+ */
+export interface PublicUser {
+  id: string;
+  email?: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  _verified?: boolean;
+  _verificationToken?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+  adminOnly?: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "admins".
+ */
+export interface Admin {
+  id: string;
+  email?: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  enableAPIKey?: boolean;
+  apiKey?: string;
+  apiKeyIndex?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+  roles: ('admin' | 'editor' | 'moderator' | 'user' | 'viewer')[];
+  publicUser?: (string | PublicUser)[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "all-fields".
+ */
+export interface AllFields {
+  id: string;
+  text: string;
+  descriptionText?: string;
+  descriptionFunction?: string;
+  image?: string | Media;
+  select: 'option-1' | 'option-2' | 'option-3' | 'option-4';
+  selectMany: ('option-1' | 'option-2' | 'option-3' | 'option-4')[];
+  dayOnlyDateFieldExample: string;
+  timeOnlyDateFieldExample?: string;
+  radioGroupExample: 'option-1' | 'option-2' | 'option-3';
+  email?: string;
+  number?: number;
+  group?: {
+    nestedText1?: string;
+    nestedText2?: string;
+  };
+  array?: {
+    arrayText1: string;
+    arrayText2: string;
+    arrayText3?: string;
+    checkbox?: boolean;
+    id?: string;
+  }[];
+  blocks: (
+    | {
+        testEmail: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        testNumber: number;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+  relationship?: string | Conditions;
+  relationshipHasMany?: (string | LocalizedPost)[];
+  relationshipMultipleCollections?:
+    | {
+        value: string | LocalizedPost;
+        relationTo: 'localized-posts';
+      }
+    | {
+        value: string | Conditions;
+        relationTo: 'conditions';
+      };
+  textarea?: string;
+  richText: {
+    [k: string]: unknown;
+  }[];
+  slug: string;
+  checkbox?: boolean;
+  dateFieldExample?: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+  id: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  width?: number;
+  height?: number;
+  sizes?: {
+    maintainedAspectRatio?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+    tablet?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+    mobile?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+    icon?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+  };
+  alt: string;
+  foundUploadSizes?: boolean;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "conditions".
+ */
+export interface Conditions {
+  id: string;
+  title: string;
+  enableTest?: boolean;
+  number?: number;
+  simpleCondition: string;
+  orCondition: string;
+  nestedConditions?: string;
+  blocks: (
+    | {
+        testEmail: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        testNumber: number;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "auto-label".
+ */
+export interface AutoLabel {
+  id: string;
+  autoLabelField?: string;
+  noLabel?: string;
+  labelOverride?: string;
+  testRelationship?: string | AllFields;
+  specialBlock?: {
+    testNumber?: number;
+    id?: string;
+    blockName?: string;
+    blockType: 'number';
+  }[];
+  noLabelBlock?: {
+    testNumber?: number;
+    id?: string;
+    blockName?: string;
+    blockType: 'number';
+  }[];
+  items?: {
+    itemName?: string;
+    id?: string;
+  }[];
+  noLabelArray?: {
+    textField?: string;
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "code".
+ */
+export interface Code {
+  id: string;
+  code: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-components".
+ */
+export interface CustomComponent {
+  id: string;
+  title: string;
+  description: string;
+  componentDescription?: string;
+  array?: {
+    nestedArrayCustomField?: string;
+    id?: string;
+  }[];
+  group?: {
+    nestedGroupCustomField?: string;
+  };
+  nestedText1?: string;
+  nestedText2?: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-id".
+ */
+export interface CustomID {
+  id: number;
+  name: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "files".
+ */
+export interface File {
+  id: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  type: 'Type 1' | 'Type 2' | 'Type 3';
+  owner: string | Admin;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "default-values".
+ */
+export interface DefaultValueTest {
+  id: string;
+  text?: string;
+  image?: string | Media;
+  select?: 'option-1' | 'option-2' | 'option-3' | 'option-4';
+  selectMany?: ('option-1' | 'option-2' | 'option-3' | 'option-4')[];
+  radioGroupExample?: 'option-1' | 'option-2' | 'option-3';
+  email?: string;
+  number?: number;
+  group?: {
+    nestedText1?: string;
+    nestedText2?: string;
+  };
+  array?: {
+    arrayText1?: string;
+    arrayText2?: string;
+    arrayText3?: string;
+    checkbox?: boolean;
+    id?: string;
+  }[];
+  blocks?: (
+    | {
+        testEmail: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        testNumber: number;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+  relationship?: string | Conditions;
+  relationshipHasMany?: (string | LocalizedPost)[];
+  relationshipMultipleCollections?:
+    | {
+        value: string | LocalizedPost;
+        relationTo: 'localized-posts';
+      }
+    | {
+        value: string | Conditions;
+        relationTo: 'conditions';
+      };
+  textarea?: string;
+  slug?: string;
+  checkbox?: boolean;
+  richText?: {
+    [k: string]: unknown;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "blocks".
+ */
+export interface Blocks {
+  id: string;
+  layout: (
+    | {
+        testEmail: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        testNumber: number;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+  nonLocalizedLayout: (
+    | {
+        testEmail: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        testNumber: number;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        author: string | PublicUser;
+        quote: string;
+        color: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'quote';
+      }
+    | {
+        label: string;
+        url: string;
+        id?: string;
+        blockName?: string;
+        blockType: 'cta';
+      }
+  )[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "hidden-fields".
+ */
+export interface HiddenFields {
+  id: string;
+  title: string;
+  hiddenAdmin: string;
+  hiddenAPI: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "hooks".
+ */
+export interface Hook {
+  id: string;
+  title: string;
+  description: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localized-arrays".
+ */
+export interface LocalizedArray {
+  id: string;
+  array: {
+    allowPublicReadability?: boolean;
+    arrayText1: string;
+    arrayText2: string;
+    arrayText3?: string;
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "local-operations".
+ */
+export interface LocalOperation {
+  id: string;
+  title: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "nested-arrays".
+ */
+export interface NestedArray {
+  id: string;
+  array: {
+    parentIdentifier: string;
+    nestedArray: {
+      childIdentifier: string;
+      deeplyNestedArray: {
+        grandchildIdentifier?: string;
+        id?: string;
+      }[];
+      id?: string;
+    }[];
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "previewable-post".
+ */
+export interface PreviewablePost {
+  id: string;
+  title: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "relationship-a".
+ */
+export interface RelationshipA {
+  id: string;
+  post?: string | RelationshipB;
+  LocalizedPost?: (string | LocalizedPost)[];
+  postLocalizedMultiple?: (
+    | {
+        value: string | LocalizedPost;
+        relationTo: 'localized-posts';
+      }
+    | {
+        value: string | AllFields;
+        relationTo: 'all-fields';
+      }
+    | {
+        value: number | CustomID;
+        relationTo: 'custom-id';
+      }
+  )[];
+  postManyRelationships?: {
+    value: string | RelationshipB;
+    relationTo: 'relationship-b';
+  };
+  postMaxDepth?: string | RelationshipB;
+  customID?: (number | CustomID)[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "relationship-b".
+ */
+export interface RelationshipB {
+  id: string;
+  title?: string;
+  post?: (string | RelationshipA)[];
+  postManyRelationships?:
+    | {
+        value: string | RelationshipA;
+        relationTo: 'relationship-a';
+      }
+    | {
+        value: string | Media;
+        relationTo: 'media';
+      };
+  localizedPosts?: (
+    | {
+        value: string | LocalizedPost;
+        relationTo: 'localized-posts';
+      }
+    | {
+        value: string | PreviewablePost;
+        relationTo: 'previewable-post';
+      }
+  )[];
+  strictAccess?: string | StrictAccess;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "strict-access".
+ */
+export interface StrictAccess {
+  id: string;
+  address: string;
+  city: string;
+  state: string;
+  zip: number;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "rich-text".
+ */
+export interface RichText {
+  id: string;
+  defaultRichText: {
+    [k: string]: unknown;
+  }[];
+  customRichText: {
+    [k: string]: unknown;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "select".
+ */
+export interface Select {
+  id: string;
+  Select: 'one' | 'two' | 'three';
+  SelectHasMany: ('one' | 'two' | 'three')[];
+  SelectJustStrings: ('blue' | 'green' | 'yellow')[];
+  Radio: 'one' | 'two' | 'three';
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "validations".
+ */
+export interface Validation {
+  id: string;
+  text: string;
+  lessThan10: number;
+  greaterThan10LessThan50: number;
+  atLeast3Rows: {
+    greaterThan30: number;
+    id?: string;
+  }[];
+  array: {
+    lessThan20: number;
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "uniques".
+ */
+export interface Unique {
+  id: string;
+  title: string;
+  description?: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "unstored-media".
+ */
+export interface UnstoredMedia {
+  id: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  width?: number;
+  height?: number;
+  sizes?: {
+    tablet?: {
+      url?: string;
+      width?: number;
+      height?: number;
+      mimeType?: string;
+      filesize?: number;
+      filename?: string;
+    };
+  };
+  alt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "geolocation".
+ */
+export interface Geolocation {
+  id: string;
+  location?: [number, number];
+  localizedPoint?: [number, number];
+}

demo/payload.config.ts

@@ -9,6 +9,7 @@ import Conditions from './collections/Conditions';
 import CustomComponents from './collections/CustomComponents';
 import File from './collections/File';
 import Blocks from './collections/Blocks';
+import CustomID from './collections/CustomID';
 import DefaultValues from './collections/DefaultValues';
 import HiddenFields from './collections/HiddenFields';
 import Hooks from './collections/Hooks';
@@ -23,17 +24,22 @@ import RelationshipA from './collections/RelationshipA';
 import RelationshipB from './collections/RelationshipB';
 import RichText from './collections/RichText';
 import Select from './collections/Select';
-import StrictPolicies from './collections/StrictPolicies';
+import StrictAccess from './collections/StrictAccess';
 import Validations from './collections/Validations';
 import Uniques from './collections/Uniques';
+import Geolocation from './collections/Geolocation';
 
 import BlocksGlobal from './globals/BlocksGlobal';
 import NavigationArray from './globals/NavigationArray';
 import GlobalWithStrictAccess from './globals/GlobalWithStrictAccess';
+import UnstoredMedia from './collections/UnstoredMedia';
 
 export default buildConfig({
   cookiePrefix: 'payload',
   serverURL: 'http://localhost:3000',
+  typescript: {
+    outputFile: path.resolve(__dirname, './payload-types.ts'),
+  },
   admin: {
     user: 'admins',
     indexHTML: path.resolve(__dirname, './client/index.html'),
@@ -42,7 +48,7 @@ export default buildConfig({
     //   // ogImage: '/static/find-image-here.jpg',
     //   // favicon: '/img/whatever.png',
     // },
-    disable: false,
+    // disable: true,
     scss: path.resolve(__dirname, './client/scss/overrides.scss'),
     components: {
       // Nav: () => (
@@ -62,6 +68,7 @@ export default buildConfig({
     Code,
     Conditions,
     CustomComponents,
+    CustomID,
     File,
     DefaultValues,
     Blocks,
@@ -78,9 +85,11 @@ export default buildConfig({
     RelationshipB,
     RichText,
     Select,
-    StrictPolicies,
+    StrictAccess,
     Validations,
     Uniques,
+    UnstoredMedia,
+    Geolocation,
   ],
   globals: [
     NavigationArray,
@@ -106,9 +115,7 @@ export default buildConfig({
   defaultDepth: 2,
   graphQL: {
     maxComplexity: 1000,
-    mutations: {},
-    queries: {},
-    disablePlaygroundInProduction: true,
+    disablePlaygroundInProduction: false,
     disable: false,
   },
   // rateLimit: {
@@ -126,6 +133,7 @@ export default buildConfig({
     defaultLocale: 'en',
     fallback: true,
   },
+  // indexSortableFields: true,
   hooks: {
     afterError: (err) => {
       console.error('global error config handler', err);

docs/access-control/fields.mdx

@@ -23,7 +23,6 @@ export default {
   fields: [
     {
       name: 'title',
-      label: 'Title',
       type: 'text',
       // highlight-start
       access: {

docs/admin/components.mdx

@@ -90,13 +90,13 @@ All Payload fields support the ability to swap in your own React components. So,
 
 #### Sending and receiving values from the form
 
-When swapping out the `Field` component, you'll be responsible for sending and receiving the field's `value` from the form itself. To do so, import the `useFieldType` hook as follows:
+When swapping out the `Field` component, you'll be responsible for sending and receiving the field's `value` from the form itself. To do so, import the `useField` hook as follows:
 
 ```js
-import { useFieldType } from 'payload/components/forms';
+import { useField } from 'payload/components/forms';
 
 const CustomTextField = ({ path }) => {
-  const { value, setValue } = useFieldType({ path });
+  const { value, setValue } = useField({ path });
 
   return (
     <input
@@ -106,3 +106,13 @@ const CustomTextField = ({ path }) => {
   )
 }
 ```
+
+### Styling Custom Components
+
+Payload exports its SCSS variables and mixins for reuse in your own custom components. This is helpful in cases where you might want to style a custom input similarly to Payload's built-ini styling so it blends more thoroughly into the existing admin UI.
+
+To make use of Payload SCSS variables / mixins to use directly in your own components, you can import them as follows:
+
+```
+@import '~payload/scss';
+```

docs/admin/overview.mdx

@@ -30,6 +30,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `indexHTML`          | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/master/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
 | `css`                | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css). |
 | `scss`               | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables). |
+| `dateFormat`         | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.
 | `components`         | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components) |
 | `webpack`            | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack) |
 
@@ -70,6 +71,6 @@ This is totally possible. For the above scenario, by specifying `admin: { user:
 
 If you would like to restrict which users from a single Collection can access the Admin panel, you can use the `admin` access control function. [Click here](/docs/access-control/overview#admin) to learn more.
 
-### License enforcement
+## License enforcement
 
 Payload requires a valid license key to be used on production domains. You can use it as much as you'd like locally and on staging / UAT domains, but when you deploy to production, you'll need a license key to activate Payload's Admin panel. For more information, [click here](/docs/production/licensing).

docs/admin/preferences.mdx

@@ -0,0 +1,157 @@
+---
+title: Managing User Preferences
+label: Preferences
+order: 40
+desc: Store the preferences of your users as they interact with the Admin panel.
+keywords: admin, preferences, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+As your users interact with your Admin panel, you might want to store their preferences in a persistent manner, so that when they revisit the Admin panel, they can pick right back up where they left off.
+
+Out of the box, Payload handles the persistence of your users' preferences in a handful of ways, including:
+
+1. Collection `List` view active columns, and their order, that users define
+1. Their last active locale
+1. The "collapsed" state of blocks, on a document level, as users edit or interact with documents
+
+<Banner type="warning">
+	<strong>Important:</strong><br/>
+	All preferences are stored on an individual user basis. Payload automatically recognizes the user that is reading or setting a preference via all provided authentication methods.
+</Banner>
+
+### Use cases
+
+This API is used significantly for internal operations of the Admin panel, as mentioned above. But, if you're building your own React components for use in the Admin panel, you can allow users to set their own preferences in correspondence to their usage of your components. For example:
+
+- If you have built a "color picker", you could "remember" the last used colors that the user has set for easy access next time
+- If you've built a custom `Nav` component, and you've built in an "accordion-style" UI, you might want to store the `collapsed` state of each Nav collapsible item. This way, if an editor returns to the panel, their `Nav` state is persisted automatically
+- You might want to store `recentlyAccessed` documents to give admin editors an easy shortcut back to their recently accessed documents on the `Dashboard` or similar
+- Many other use cases exist. Invent your own! Give your editors an intelligent and persistent editing experience.
+
+### Database
+
+Payload automatically creates an internally used `_preferences` collection that stores user preferences. Each document in the `_preferences` collection contains the following shape:
+
+| Key                  | Value  |
+| -------------------- | -------------|
+| `id`                 | A unique ID for each preference stored. |
+| `key`                | A unique `key` that corresponds to the preference. |
+| `user`               | The ID of the `user` that is storing its preference. |
+| `userCollection`     | The `slug` of the collection that the `user` is logged in as. |
+| `value`              | The value of the preference. Can be any data shape that you need. |
+| `createdAt`          | A timestamp of when the preference was created. |
+| `updatedAt`          | A timestamp set to the last time the preference was updated.
+
+### APIs
+
+Preferences are available to both [GraphQL](/docs/graphql/overview#preferences) and [REST](/docs/rest-api/overview#) APIs.
+
+### Adding or reading Preferences in your own components
+
+The Payload admin panel offers a `usePreferences` hook. The hook is only meant for use within the admin panel itself. It provides you with two methods:
+
+##### `getPreference`
+
+This async method provides an easy way to retrieve a user's preferences by `key`. It will return a promise containing the resulting preference value.
+
+**Arguments**
+
+- `key`: the `key` of your preference to retrieve.
+
+##### `setPreference`
+
+Also async, this method provides you with an easy way to set a user preference. It returns `void`.
+
+**Arguments:**
+
+- `key`: the `key` of your preference to set.
+- `value`: the `value` of your preference that you're looking to set.
+
+## Example
+
+Here is an example for how you can utilize `usePreferences` within your custom Admin panel components. Note - this example is not fully useful and is more just a reference for how to utilize the Preferences API. In this case, we are demonstrating how to set and retrieve a user's last used colors history within a `ColorPicker` or similar type component.
+
+```
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { usePreferences } from 'payload/components/preferences';
+
+const lastUsedColorsPreferenceKey = 'last-used-colors';
+
+const CustomComponent = (props) => {
+  const { getPreference, setPreference } = usePreferences();
+
+  // Store the last used colors in local state
+  const [lastUsedColors, setLastUsedColors] = useState([]);
+
+  // Callback to add a color to the last used colors
+  const updateLastUsedColors = useCallback((color) => {
+    // First, check if color already exists in last used colors.
+    // If it already exists, there is no need to update preferences
+    const colorAlreadyExists = lastUsedColors.indexOf(color) > -1;
+
+    if (!colorAlreadyExists) {
+      const newLastUsedColors = [
+        ...lastUsedColors,
+        color,
+      ];
+
+      setLastUsedColors(newLastUsedColors);
+      setPreference(lastUsedColorsPreferenceKey, newLastUsedColors);
+    }
+  }, [lastUsedColors, setPreference]);
+
+  // Retrieve preferences on component mount
+  // This will only be run one time, because the `getPreference` method never changes
+  useEffect(() => {
+    const asyncGetPreference = async () => {
+      const lastUsedColorsFromPreferences = await getPreference(lastUsedColorsPreferenceKey);
+      setLastUsedColors(lastUsedColorsFromPreferences);
+    };
+
+    asyncGetPreference();
+  }, [getPreference]);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('red')}
+      >
+        Use red
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('blue')}
+      >
+        Use blue
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('purple')}
+      >
+        Use purple
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('yellow')}
+      >
+        Use yellow
+      </button>
+      {lastUsedColors && (
+        <Fragment>
+          <h5>Last used colors:</h5>
+          <ul>
+            {lastUsedColors?.map((color) => (
+              <li key={color}>
+                {color}
+              </li>
+            ))}
+          </ul>
+        </Fragment>
+      )}
+    </div>
+  );
+};
+
+export default CustomComponent;
+```

docs/admin/webpack.mdx

@@ -1,7 +1,7 @@
 ---
 title: Webpack
 label: Webpack
-order: 40
+order: 50
 desc: The Payload admin panel uses Webpack 5 and supports many common functionalities such as SCSS and Typescript out of the box to give you more freedom.
 keywords: admin, webpack, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/authentication/operations.mdx

@@ -194,7 +194,7 @@ If successful, this operation will automatically renew the user's HTTP-only cook
 
 **Example REST API token refresh**:
 ```js
-const res = await fetch('http://localhost:3000/api/[collection-slug]/refresh', {
+const res = await fetch('http://localhost:3000/api/[collection-slug]/refresh-token', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',

docs/configuration/collections.mdx

@@ -16,8 +16,9 @@ It's often best practice to write your Collections in separate files and then im
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Collection. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. |
-| **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/admin/overview#admin-options). |
+| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined. |
+| **`description`**| Text or React component to display below the Collection label in the List view to give editors more information. |
+| **`admin`**      | Admin-specific configuration. See below for [more detail](#admin-options). |
 | **`hooks`**      | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/overview/#collections) |
 | **`auth`**       | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation. |
@@ -29,12 +30,8 @@ It's often best practice to write your Collections in separate files and then im
 #### Simple collection example
 
 ```js
-const Order = {
+const Orders = {
 	slug: 'orders',
-	labels: {
-		singular: 'Order',
-		plural: 'Orders',
-	},
 	fields: [
 		{
 			name: 'total',
@@ -64,7 +61,7 @@ You can customize the way that the Admin panel behaves on a collection-by-collec
 | `useAsTitle`                 | Specify a top-level field to use for a document title throughout the Admin panel. If no field is defined, the ID of the document is used as the title. |
 | `defaultColumns`             | Array of field names that correspond to which columns to show by default in this collection's List view. |
 | `disableDuplicate `          | Disables the "Duplicate" button while editing documents within this collection. |
-| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set this field to `true` to enable the collection to be selected within it. |
+| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
 | `preview`                    | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview). |
 | `components`                 | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections) |
 
@@ -74,7 +71,10 @@ Collection `admin` options can accept a `preview` function that will be used to
 
 If the function is specified, a Preview button will automatically appear in the corresponding collection's Edit view. Clicking the Preview button will link to the URL that is generated by the function.
 
-The preview function accepts the document being edited as an argument.
+**The preview function accepts two arguments:**
+
+1. The document being edited
+1. An `options` object, containing `locale` and `token` properties. The `token` is the currently logged in user's JWT.
 
 **Example collection with preview function:**
 
@@ -89,9 +89,9 @@ The preview function accepts the document being edited as an argument.
 		}
 	]
 	admin: {
-		preview: (doc) => {
+		preview: (doc, { locale }) => {
 			if (doc?.slug) {
-				return `https://bigbird.com/preview/posts/${doc.slug}`,
+				return `https://bigbird.com/preview/posts/${doc.slug}?locale=${locale}`,
 			}
 
 			return null;
@@ -111,3 +111,21 @@ Hooks are a powerful way to extend collection functionality and execute your own
 ### Field types
 
 Collections support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/overview) to learn more about field types.
+
+### TypeScript
+
+You can import collection types as follows:
+
+```js
+import { CollectionConfig } from 'payload/types';
+
+// This is the type used for incoming collection configs.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedCollectionConfig } from 'payload/types';
+
+// This is the type used after an incoming collection config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/configuration/globals.mdx

@@ -16,7 +16,8 @@ As with Collection configs, it's often best practice to write your Globals in se
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Global. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Global. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`label`**      | Singular label for use in identifying this Global throughout Payload. |
+| **`label`**      | Singular label for use in identifying this Global throughout Payload. Auto-generated from slug if not defined. |
+| **`description`**| Text or React component to display below the Global header to give editors more information.  |
 | **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/configuration/globals#admin-options). |
 | **`hooks`**      | Entry points to "tie in" to collection actions at specific points. [More](/docs/hooks/overview#global-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with this Global. [More](/docs/access-control/overview/#globals) |
@@ -28,7 +29,6 @@ As with Collection configs, it's often best practice to write your Globals in se
 ```js
 const Nav = {
 	slug: 'nav',
-	label: 'Nav',
 	fields: [
 		{
 			name: 'items',
@@ -38,7 +38,6 @@ const Nav = {
 			fields: [
 				{
 					name: 'page',
-					label: 'Page',
 					type: 'relationship',
 					relationTo: 'pages', // "pages" is the slug of an existing collection
 					required: true,
@@ -72,3 +71,21 @@ Globals also fully support a smaller subset of Hooks. To learn more, go to the [
 ### Field types
 
 Globals support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/overview) to learn more about field types.
+
+### TypeScript
+
+You can import global types as follows:
+
+```js
+import { GlobalConfig } from 'payload/types';
+
+// This is the type used for incoming global configs.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedGlobalConfig } from 'payload/types';
+
+// This is the type used after an incoming global config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/configuration/localization.mdx

@@ -55,7 +55,6 @@ Payload localization works on a **field** level—not a document level. In addit
 ```js
 {
 	name: 'title',
-	label: 'Page Title',
 	type: 'text',
 	// highlight-start
 	localized: true,
@@ -131,3 +130,7 @@ const posts = await payload.find({
 	fallbackLocale: false,
 })
 ```
+
+<Banner type="alert">
+  <strong>Tip:</strong><br/>The REST and Local APIs can return all localization data in one request by passing 'all' or '*' as the <strong>locale</strong> parameter. The response will be structured so that field values come back as the full objects keyed for each locale instead of the single, translated value.
+</Banner>

docs/configuration/overview.mdx

@@ -29,6 +29,7 @@ Payload is a *config-based*, code-first CMS and application framework. The Paylo
 | `csrf`               | A whitelist array of URLs to allow Payload cookies to be accepted from as a form of CSRF protection. [More](/docs/authentication/overview#csrf-protection) |
 | `defaultDepth`       | If a user does not specify `depth` while requesting a resource, this depth will be used. [More](/docs/getting-started/concepts#depth) |
 | `maxDepth`           | The maximum allowed depth to be permitted application-wide. This setting helps prevent against malicious queries. Defaults to `10`. |
+| `indexSortableFields`| Automatically index all sortable top-level fields in the database to improve sort performance and add database compatibility for Azure Cosmos and similar. |
 | `upload`             | Base Payload upload configuration. [More](/docs/upload/overview#payload-wide-upload-options). |
 | `routes`             | Control the routing structure that Payload binds itself to. Specify `admin`, `api`, `graphQL`, and `graphQLPlayground`. |
 | `email`              | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#configuration) |
@@ -36,6 +37,7 @@ Payload is a *config-based*, code-first CMS and application framework. The Paylo
 | `debug`              | Enable to expose more detailed error information. |
 | `rateLimit`          | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks and [more](/docs/production/preventing-abuse#rate-limiting-requests). |
 | `hooks`              | Tap into Payload-wide hooks. [More](/docs/hooks/overview) |
+| `plugins`            | An array of Payload plugins. [More](/docs/plugins/overview) |
 
 #### Simple example
 
@@ -50,13 +52,11 @@ const config = buildConfig({
 			fields: [
 				{
 					name: 'title',
-					label: 'Title',
 					type: 'text',
 					required: true,
 				},
 				{
 					name: 'content',
-					label: 'Content',
 					type: 'richText',
 					required: true,
 				}
@@ -66,16 +66,13 @@ const config = buildConfig({
 	globals: [
 		{
 			slug: 'header',
-			label: 'Header',
 			fields: [
 				{
 					name: 'nav',
-					label: 'Nav',
 					type: 'array',
 					fields: [
 						{
 							name: 'page',
-							label: 'Page',
 							type: 'relationship',
 							relationTo: 'pages',
 						},
@@ -141,3 +138,29 @@ But, you can specify where your Payload config is located as well as what it's n
 The Payload config itself, as well as all files that it requires or imports, are run through Babel. TypeScript and all common ES6 features are fully supported. To see the Babel config that is used to parse Payload configs, check out the Payload source code [here](https://github.com/payloadcms/payload/blob/master/src/babel.config.js).
 
 Payload comes with `isomorphic-fetch` installed which means that even in Node, you can use the `fetch` API just as you would within the browser. No need to import `axios` or similar, unless you want to!
+
+#### Re-using the Payload `babel.config.js`
+
+If for any reason you need to re-use the built-in Payload `babel.config.js`, you can do so by importing it as follows:
+
+```
+import { config } from 'payload/babel';
+```
+
+### TypeScript
+
+You can import config types as follows:
+
+```js
+import { Config } from 'payload/config';
+
+// This is the type used for an incoming Payload config.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedConfig } from 'payload/config';
+
+// This is the type used after an incoming Payload config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/fields/array.mdx

@@ -24,7 +24,7 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
 | Option           | Description |
 | ---------------- | ----------- |
 | **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
-| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. |
+| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. Auto-generated from name if not defined. |
 | **`fields`** *       | Array of field types to correspond to each row of the Array. |
 | **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
 | **`saveToJWT`**      | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
@@ -59,14 +59,12 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
       fields: [ // required
         {
           name: 'image',
-          label: 'Image',
           type: 'upload',
           relationTo: 'media',
           required: true,
         },
         {
           name: 'caption',
-          label: 'Caption',
           type: 'text',
         }
       ]

docs/fields/blocks.mdx

@@ -53,7 +53,7 @@ Blocks are defined as separate configs of their own.
 | ---------------- | ----------- |
 | **`slug`** *         | Identifier for this block type. Will be saved on each block as the `blockType` property. |
 | **`fields`** *       | Array of fields to be stored in this block. |
-| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. |
+| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. Auto-generated from slug if not defined. |
 | **`imageURL`**       | Provide a custom image thumbnail to help editors identify this block in the Admin UI. |
 | **`imageAltText`**   | Customize this block's image thumbnail alt text. |
 
@@ -79,14 +79,12 @@ const QuoteBlock = {
   imageAltText: 'A nice thumbnail image to show what this block looks like',
   fields: [ // required
     {
-      name: 'text',
-      label: 'Quote Text',
+      name: 'quoteHeader',
       type: 'text',
       required: true,
     },
     {
-      name: 'text',
-      label: 'Quotee',
+      name: 'quoteText',
       type: 'text',
     },
   ]
@@ -98,13 +96,8 @@ const ExampleCollection = {
     {
       name: 'layout', // required
       type: 'blocks', // required
-      label: 'layout',
       minRows: 1,
       maxRows: 20,
-      labels: {
-        singular: 'Layout',
-        plural: 'Layouts',
-      },
       blocks: [ // required
        QuoteBlock
       ]
@@ -113,3 +106,12 @@ const ExampleCollection = {
 }
 
 ```
+
+### TypeScript
+
+As you build your own Block configs, you might want to store them in separate files but retain typing accordingly. To do so, you can import and use Payload's `Block` type:
+
+```js
+import type { Block } from 'payload/types';
+
+```

docs/fields/code.mdx

@@ -51,7 +51,6 @@ Currently, the `language` property only supports JavaScript syntax but more supp
     {
       name: 'trackingCode', // required
       type: 'code', // required
-      label: 'Tracking Code',
       required: true,
       admin: {
         language: 'js'

docs/fields/date.mdx

@@ -6,42 +6,57 @@ desc: The Date field type stores a Date in the database. Learn how to use and cu
 keywords: date, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-<Banner >
-  The Date field type saves a Date in the database and provides the Admin panel with a customizable time picker interface.
+<Banner>
+  The Date field type saves a Date in the database and provides the Admin panel
+  with a customizable time picker interface.
 </Banner>
 
 This field uses [`react-datepicker`](https://www.npmjs.com/package/react-datepicker) for the Admin panel component.
 
 ### Config
 
-| Option           | Description |
-| ---------------- | ----------- |
-| **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
-| **`label`**          | Used as a field label in the Admin panel and to name the generated GraphQL type. |
-| **`index`**          | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
-| **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
-| **`saveToJWT`**      | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
-| **`hooks`**          | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
-| **`access`**         | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
-| **`hidden`**         | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
-| **`defaultValue`**   | Provide data to be used for this field's default value. |
-| **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
-| **`required`**       | Require this field to have a value. |
-| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin). |
+| Option             | Description                                                                                                                                                                                         |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`name`** \*      | To be used as the property name when stored and retrieved from the database.                                                                                                                        |
+| **`label`**        | Used as a field label in the Admin panel and to name the generated GraphQL type.                                                                                                                    |
+| **`index`**        | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
+| **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                                        |
+| **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                                                       |
+| **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                                          |
+| **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                                             |
+| **`hidden`**       | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel.                                                    |
+| **`defaultValue`** | Provide data to be used for this field's default value.                                                                                                                                             |
+| **`localized`**    | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                                     |
+| **`required`**     | Require this field to have a value.                                                                                                                                                                 |
+| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin).                                                                                                                                  |
 
-*\* An asterisk denotes that a property is required.*
+_\* An asterisk denotes that a property is required._
 
-### Admin config
+### Admin Date Config
 
-In addition to the default [field admin config](/docs/fields/overview#admin-config), you can customize all of the options that `react-datepicker` provisions for via the `date` property.
+In addition to the default [field admin config](/docs/fields/overview#admin-config), you can customize the following fields that will adjust how the component displays in the admin panel via the `date` property.
+
+| Option                 | Description                                                                                                                                         |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`pickerAppearance`** | Determines the appearance of the datepicker: `dayAndTime` `timeOnly` `dayOnly`. Defaults to `dayAndTime`.                                           |
+| **`displayFormat`**    | Determines how the date is presented. dayAndTime default to `MMM d, yyy h:mm a` timeOnly defaults to `h:mm a` and dayOnly defaults to `MMM d, yyy`. |
+| **`placeholder`**      | Placeholder text for the field.                                                                                                                     |
+| **`monthsToShow`**     | Number of months to display max is 2. Defaults to 1.                                                                                                |
+| **`minDate`**          | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md).                               |
+| **`maxDate`**          | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md).                               |
+| **`minTime`**          | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md).                               |
+| **`maxTime`**          | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md).                               |
+| **`timeIntervals`**    | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md). Defaults to 30 minutes.       |
+| **`timeFormat`**       | Passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md). Defaults to `'h:mm aa'`.      |
+
+_\* An asterisk denotes that a property is required._
 
 Common use cases for customizing the `date` property are to restrict your field to only show time or day input—but lots more can be done.
 
-[Check out the `react-datepicker` docs](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) for more info.
-
 ### Example
 
 `collections/ExampleCollection.js`
+
 ```js
 {
   slug: 'example-collection',
@@ -53,7 +68,7 @@ Common use cases for customizing the `date` property are to restrict your field
       defaultValue: '1988-11-05T8:00:00.000+05:00',
       admin: {
         date: {
-          // All `react-datepicker` options are supported
+          // All config options above should be placed here
           pickerAppearance: 'timeOnly',
         }
       }

docs/fields/group.mdx

@@ -25,10 +25,18 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
 | **`defaultValue`**   | Provide an object of data to be used for this field's default value. |
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. If enabled, a separate, localized set of all data within this Group will be kept, so there is no need to specify each nested field as `localized`. |
 | **`required`**       | Require this field to have a value. |
-| **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
 
 *\* An asterisk denotes that a property is required.*
 
+### Admin config
+
+In addition to the default [field admin config](/docs/fields/overview#admin-config), the Group allows for the following admin property:
+
+**`hideGutter`**
+
+Set this property to `true` to hide this field's gutter within the admin panel. The field gutter is rendered as a vertical line and padding, but often if this field is nested within a Group, Block, or Array, you may want to hide the gutter.
+
 ### Example
 
 `collections/ExampleCollection.js`
@@ -37,9 +45,8 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
   slug: 'example-collection',
   fields: [
     {
-      name: 'meta', // required
+      name: 'pageMeta', // required
       type: 'group', // required
-      label: 'Page Meta',
       fields: [ // required
         {
           name: 'title',

docs/fields/number.mdx

@@ -58,7 +58,6 @@ Set this property to a string that will be used for browser autocomplete.
     {
       name: 'age', // required
       type: 'number', // required
-      label: 'Age',
       required: true,
       admin: {
         step: 1,

docs/fields/overview.mdx

@@ -20,14 +20,12 @@ const Pages = {
 	slug: 'pages',
 	fields: [
 		{
-			name: 'my-field',
+			name: 'myField',
 			type: 'text', // highlight-line
-			label: 'My Field',
 		},
 		{
-			name: 'other-field',
+			name: 'otherField',
 			type: 'checkbox', // highlight-line
-			label: 'Other Field'
 		},
 	],
 }
@@ -38,11 +36,12 @@ const Pages = {
 - [Array](/docs/fields/array) - for repeating content, supports nested fields
 - [Blocks](/docs/fields/blocks) - block-based fields, allowing powerful layout creation
 - [Checkbox](/docs/fields/checkbox) - boolean true / false checkbox
-- [Code](/docs/fields/code) - xode editor that saves a string to the database
+- [Code](/docs/fields/code) - code editor that saves a string to the database
 - [Date](/docs/fields/date) - date / time field that saves a timestamp
 - [Email](/docs/fields/email) - validates the entry is a properly formatted email
 - [Group](/docs/fields/group) - nest fields within an object
 - [Number](/docs/fields/number) - field that enforces that its value be a number
+- [Point](/docs/fields/point) - geometric coordinates for location data
 - [Radio](/docs/fields/radio) - radio button group, allowing only one value to be selected
 - [Relationship](/docs/fields/relationship) - assign relationships to other collections
 - [Rich Text](/docs/fields/rich-text) - fully extensible Rich Text editor
@@ -51,6 +50,7 @@ const Pages = {
 - [Text](/docs/fields/text) - simple text input
 - [Textarea](/docs/fields/textarea) - allows a bit larger of a text editor
 - [Upload](/docs/fields/upload) - allows local file and image upload
+- [UI](/docs/fields/ui) - inject your own custom components and do whatever you need
 
 ### Field-level hooks
 
@@ -85,6 +85,24 @@ Example:
 }
 ```
 
+### Customizable ID
+
+Collections ID fields are generated automatically by default. An explicit `id` field can be declared in the `fields` array to override this behavior.
+Users are then required to provide a custom ID value when creating a record through the Admin UI or API.
+Valid ID types are `number` and `text`.
+
+Example:
+```js
+{
+  fields: [
+    {
+      name: 'id',
+      type: 'number',
+    },
+  ],
+}
+```
+
 ### Admin config
 
 In addition to each field's base configuration, you can define specific traits and properties for fields that only have effect on how they are rendered in the Admin panel. The following properties are available for all fields within the `admin` property:
@@ -93,12 +111,17 @@ In addition to each field's base configuration, you can define specific traits a
 | ------------- | -------------|
 | `condition`   | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info. |
 | `components`  | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-admin-components) for more info. |
+| `description` | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info. |
 | `position`    | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
 | `width`       | Restrict the width of a field. you can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
 | `readOnly`    | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value. |
 | `disabled`    | If a field is `disabled`, it is completely omitted from the Admin panel. |
 | `hidden`      | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors. |
 
+### Custom components
+
+All Payload fields support the ability to swap in your own React components with ease. For more information, including examples, [click here](/docs/admin/components#fields).
+
 ### Conditional logic
 
 You can show and hide fields based on what other fields are doing by utilizing conditional logic on a field by field basis. The `condition` property on a field's admin config accepts a function which takes two arguments:
@@ -137,6 +160,94 @@ The `condition` function should return a boolean that will control if the field
 }
 ```
 
-### Custom components
+If you are building custom components, and you'd like for your custom components to support conditional logic as well, you can utilize Payload's `withCondition` higher-order function by importing it and using it as follows:
 
-All Payload fields support the ability to swap in your own React components with ease. For more information, including examples, [click here](/docs/admin/components#fields).
+```js
+import { withCondition } from 'payload/components/forms';
+
+const CustomComponent = () => {
+  return (
+    <div>
+      <p>Hello, on my own, I won't respect my field's conditional logic.<p/>
+      <p>But, I will if I'm wrapped with the withCondition HOC as shown below!</p>
+    </div>
+  )
+}
+
+const CustomComponentWithCondition = withCondition(CustomComponent);
+
+const customFieldWithCondition = {
+  name: 'myCustomField',
+  type: 'text',
+  admin: {
+    condition: (data) => Boolean(data.enableCustomField),
+    components: {
+      Field: CustomComponentWithCondition,
+    }
+  }
+}
+
+```
+
+### Description
+
+A description can be configured three ways.
+- As a string
+- As a function that accepts an object containing the field's value, which returns a string
+- As a React component that accepts value as a prop
+
+As shown above, you can simply provide a string that will show by the field, but there are use cases where you may want to create some dynamic feedback. By using a function or a component for the `description` property you can provide rich feedback in realtime the user interacts with the form.
+
+**Function Example:**
+
+```js
+{
+  fields: [
+    {
+      name: 'message',
+      type: 'text',
+      maxLength: 20,
+      admin: {
+        description: ({ value }) => (`${typeof value === 'string' ? 20 - value.length : '20'} characters left`)
+      }
+    }
+  ]
+}
+```
+This example will display the number of characters allowed as the user types.
+
+**Component Example:**
+```js
+{
+  fields: [
+    {
+      name: 'message',
+      type: 'text',
+      maxLength: 20,
+      admin: {
+        description:
+          ({ value }) => (
+            <div>
+              Character count:
+              {' '}
+              { value?.length || 0 }
+            </div>
+          )
+      }
+    }
+  ]
+}
+```
+This component will count the number of characters entered.
+
+### TypeScript
+
+You can import the internal Payload `Field` type as well as other common field types as follows:
+
+```js
+import type {
+  Field,
+  Validate,
+  Condition,
+} from 'payload/types';
+```

docs/fields/point.mdx

@@ -0,0 +1,54 @@
+---
+title: Point Field
+label: Point
+order: 95
+desc: The Point field type stores coordinates in the database. Learn how to use Point field for geolocation and geometry.
+
+keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+<Banner >
+  The Point field type saves a pair of coordinates in the database and assigns an index for location related queries.
+</Banner>
+
+The data structure in the database matches the GeoJSON structure to represent point. The Payload APIs simplifies the object data to only the [x, y] location.
+
+### Config
+
+| Option           | Description |
+| ---------------- | ----------- |
+| **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
+| **`label`**          | Used as a field label in the Admin panel and to name the generated GraphQL type. |
+| **`unique`**         | Enforce that each entry in the Collection has a unique value for this field. |
+| **`index`**          | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. To support location queries, point index defaults to `2dsphere`, to disable the index set to `false`. |
+| **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
+| **`saveToJWT`**      | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
+| **`hooks`**          | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
+| **`access`**         | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
+| **`hidden`**         | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
+| **`defaultValue`**   | Provide data to be used for this field's default value. |
+| **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
+| **`required`**       | Require this field to have a value. |
+| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+
+*\* An asterisk denotes that a property is required.*
+
+### Example
+
+`collections/ExampleCollection.js`
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'location',
+      type: 'point',
+      label: 'Location',
+    },
+  ]
+}
+```
+
+### Querying
+
+In order to do query based on the distance to another point, you can use the `near` operator. When querying using the near operator, the returned documents will be sorted by nearest first.

docs/fields/radio.mdx

@@ -53,7 +53,6 @@ The `layout` property allows for the radio group to be styled as a horizonally o
     {
       name: 'color', // required
       type: 'radio', // required
-      label: 'color',
       options: [ // required
         {
           label: 'Mint',

docs/fields/relationship.mdx

@@ -21,8 +21,9 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
 | Option           | Description |
 | ---------------- | ----------- |
 | **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
-| **`*relationTo`** *  | Provide one or many collection `slug`s to be able to assign relationships to. |
+| **`relationTo`** *   | Provide one or many collection `slug`s to be able to assign relationships to. |
 | **`hasMany`**        | Boolean when, if set to `true`, allows this field to have many relations instead of only one. |
+| **`maxDepth`**       | Sets a number limit on iterations of related documents to populate when queried. [Depth](/docs/getting-started/concepts#depth) |
 | **`label`**          | Used as a field label in the Admin panel and to name the generated GraphQL type. |
 | **`unique`**         | Enforce that each entry in the Collection has a unique value for this field. |
 | **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
@@ -43,22 +44,143 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
   The <a href="/docs/getting-started/concepts#depth">Depth</a> parameter can be used to automatically populate related documents that are returned by the API.
 </Banner>
 
-### Example
+### How the data is saved
+
+Given the variety of options possible within the `relationship` field type, the shape of the data needed for creating and updating these fields can vary. The following sections will describe the variety of data shapes that can arise from this field.
+
+#### Has One
+
+The most simple pattern of a relationship is to use `hasMany: false` with a `relationTo` that allows for only one type of collection.
 
-`collections/ExampleCollection.js`
 ```js
 {
   slug: 'example-collection',
   fields: [
     {
-      name: 'placedBy', // required
+      name: 'owner', // required
       type: 'relationship', // required
-      relationTo: ['organizations', 'users'], // required
-      label: 'Placed By',
+      relationTo: 'users', // required
       hasMany: false,
+    }
+  ]
+}
+```
+
+The shape of the data to save for a document with the field configured this way would be:
+
+```json
+  {
+     // Mongo ObjectID of the related user
+    "owner": "6031ac9e1289176380734024"
+  }
+```
+
+When querying documents in this collection via REST API, you could query as follows:
+
+`?where[owner][equals]=6031ac9e1289176380734024`.
+
+#### Has One - Polymorphic
+
+Also known as **dynamic references**, in this configuration, the `relationTo` field is an array of Collection slugs that tells Payload which Collections are valid to reference.
+
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'owner', // required
+      type: 'relationship', // required
+      relationTo: ['users', 'organizations'], // required
+      hasMany: false,
+    }
+  ]
+}
+```
+
+The shape of the data to save for a document with more than one relationship type would be:
+
+```json
+  {
+    "owner": {
+      "relationTo": "organizations",
+      "value": "6031ac9e1289176380734024"
+    }
+  }
+```
+
+Here is an example for how to query documents by this data (note the difference in referencing the `owner.value`):
+
+`?where[owner.value][equals]=6031ac9e1289176380734024`.
+
+You can also query for documents where a field has a relationship to a specific Collection:
+
+`?where[owners.relationTo][equals]=organizations`.
+
+This query would return only documents that have an owner relationship to organizations.
+
+#### Has Many
+
+The `hasMany` tells Payload that there may be more than one collection saved to the field.
+
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'owners', // required
+      type: 'relationship', // required
+      relationTo: 'users', // required
+      hasMany: true,
+    }
+  ]
+}
+```
+
+To save the to `hasMany` relationship field we need to send an array of IDs:
+
+```json
+  {
+    "owners": [ "6031ac9e1289176380734024", "602c3c327b811235943ee12b" ]
+  }
+```
+
+When querying documents, the format does not change for arrays:
+
+`?where[owners][equals]=6031ac9e1289176380734024`.
+
+#### Has Many - Polymorphic
+
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'owners', // required
+      type: 'relationship', // required
+      relationTo: ['users', 'organizations'], // required
+      hasMany: true,
       required: true,
     }
   ]
 }
-
 ```
+
+Relationship fields with `hasMany` set to more than one kind of collections save their data as an array of objects—each containing the Collection `slug` as the `relationTo` value, and the related document `id` for the `value`:
+
+```json
+{
+  "owners": [
+    {
+      "relationTo": "users",
+      "value": "6031ac9e1289176380734024"
+    }, {
+      "relationTo": "organizations",
+      "value": "602c3c327b811235943ee12b"
+    }
+  ]
+}
+```
+
+Querying is done in the same way as the earlier Polymorphic example:
+
+`?where[owners.value][equals]=6031ac9e1289176380734024`.

docs/fields/rich-text.mdx

@@ -13,7 +13,7 @@ keywords: rich text, fields, config, configuration, documentation, Content Manag
 The Admin component is built on the powerful [`slatejs`](https://docs.slatejs.org/) editor and is meant to be as extensible and customizable as possible.
 
 <Banner type="success">
-  <strong>Consistent with Payload's goal of making you learn as litle of Payload as possible, customizing and using the Rich Text Editor does not involve learning how to develop for a <em>Payload</em> rich text editor.</strong> Instead, you can invest your time and effort into learning Slate, an open-source tool that will allow you to apply your learnings elsewhere as well.
+  <strong>Consistent with Payload's goal of making you learn as little of Payload as possible, customizing and using the Rich Text Editor does not involve learning how to develop for a <em>Payload</em> rich text editor.</strong> Instead, you can invest your time and effort into learning Slate, an open-source tool that will allow you to apply your learnings elsewhere as well.
 </Banner>
 
 ### Config
@@ -58,6 +58,7 @@ The default `elements` available in Payload are:
 - `ol`
 - `ul`
 - [`relationship`](#relationship-element)
+- [`upload`](#upload-element)
 
 **`leaves`**
 
@@ -71,15 +72,25 @@ The default `leaves` available in Payload are:
 - `strikethrough`
 - `underline`
 
+**`hideGutter`**
+
+Set this property to `true` to hide this field's gutter within the admin panel. The field gutter is rendered as a vertical line and padding, but often if this field is nested within a Group, Block, or Array, you may want to hide the gutter.
+
 ### Relationship element
 
 The built-in `relationship` element is a powerful way to reference other Documents directly within your Rich Text editor.
 
+### Upload element
+
+Similar to the `relationship` element, the `upload` element is a user-friendly way to reference [Upload-enabled collections](/docs/upload/overview) with a UI specifically designed for media / image-based uploads.
+
 <Banner type="success">
   <strong>Tip:</strong><br/>
-  To enable collections to be selected within the Rich Text relationship, you need to enable the collection admin option of <strong>enableRichTextRelationship</strong>.
+  Collections are automatically allowed to be selected within the Rich Text relationship and upload elements by default. If you want to disable a collection from being able to be referenced in Rich Text fields, set the collection admin option of <strong>enableRichTextRelationship</strong> to false.
 </Banner>
 
+Relationship and Upload elements are populated dynamically into your Rich Text field' content. Within the REST and Local APIs, any present RichText `relationship` or `upload` elements will respect the `depth` option that you pass, and will be populated accordingly. In GraphQL, each `richText` field accepts an argument of `depth` for you to utilize.
+
 ### Specifying which elements and leaves to allow
 
 To specify which default elements or leaves should be allowed to be used for this field, define arrays that contain string names for each element or leaf you wish to enable. To specify a custom element or leaf, pass an object with all corresponding properties as outlined below. View the [example](#example) to reference how this all works.
@@ -114,7 +125,7 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
       type: 'richText', // required
       defaultValue: [{
         children: [{ text: 'Here is some default content for this field' }],
-      }]
+      }],
       required: true,
       admin: {
         elements: [
@@ -263,3 +274,53 @@ const serialize = (children) => children.map((node, i) => {
   <strong>Note:</strong><br/>
    The above example is for how to render to JSX, although for plain HTML the pattern is similar. Just remove the JSX and return HTML strings instead!
 </Banner>
+
+### Built-in SlateJS Plugins
+
+Payload comes with a few built-in SlateJS plugins which can be extended to make developing your own elements and leaves a bit easier. They will be documented here over time.
+
+#### `shouldBreakOutOnEnter`
+
+Payload's built-in heading elements all allow a "hard return" to "break out" of the currently active element. For example, if you hit `enter` while typing an `h1`, the `h1` will be "broken out of" and you'll be able to continue writing as the default paragraph element.
+
+If you want to utilize this functionality within your own custom elements, you can do so by adding a custom plugin to your `element` like the following "large body" element example:
+
+`customLargeBodyElement.js`:
+
+```js
+import Button from './Button';
+import Element from './Element';
+import withLargeBody from './plugin';
+
+export default {
+  name: 'large-body',
+  Button,
+  Element,
+  plugins: [
+    (incomingEditor) => {
+      const editor = incomingEditor;
+      const { shouldBreakOutOnEnter } = editor;
+
+      editor.shouldBreakOutOnEnter = (element) => (element.type === 'large-body' ? true : shouldBreakOutOnEnter(element));
+
+      return editor;
+    }
+  ],
+};
+```
+
+Above, you can see that we are creating a custom SlateJS element with a name of `large-body`. This might render a slightly larger body copy on the frontend of your app(s). We pass it a name, button, and element&mdash;but additionally, we pass it a `plugins` array containing a single SlateJS plugin.
+
+The plugin itself extends Payload's built-in `shouldBreakOutOnEnter` Slate function to add its own element name to the list of elements that should "break out" when the `enter` key is pressed.
+
+### TypeScript
+
+If you are building your own custom Rich Text elements or leaves, you may benefit from importing the following types:
+
+```js
+import type {
+  RichTextCustomElement,
+  RichTextCustomLeaf,
+} from 'payload/types';
+
+```

docs/fields/row.mdx

@@ -15,7 +15,7 @@ keywords: row, fields, config, configuration, documentation, Content Management
 | Option           | Description |
 | ---------------- | ----------- |
 | **`fields`** *       | Array of field types to nest within this Row. |
-| **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`admin`**          | Admin-specific configuration excluding `description`, `readOnly`, and `hidden`. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
 
 *\* An asterisk denotes that a property is required.*