chore(examples): migrates custom-component example to latest beta [skip-lint] (#9170)

Updates the `Custom Components` example, including packages, readme, lockfile, types and the custom fields. --------- Co-authored-by: Patrik Kozak <patrik@payloadcms.com>
2024-11-19 11:40:20 -05:00
parent 389ef16a5f
commit 037662d9f5
57 changed files with 1187 additions and 1179 deletions
--- a/examples/custom-components/README.md
+++ b/examples/custom-components/README.md
@@ -1,46 +1,67 @@
 # Payload Custom Components Example

-This example demonstrates how to use Custom Components in [Payload](https://github.com/payloadcms/payload) Admin Panel. This example includes custom components for every field type available in Payload, including both server and client components. It also includes custom views, custom nav links, and more.
+This example demonstrates how to use Custom Components in the [Payload](https://github.com/payloadcms/payload) Admin Panel. Custom components allow you to extend Payload by providing custom UI elements for fields, collections, and views. This example covers custom components for every field type available in Payload, including both server and client components.

 ## Quick Start

-To spin up this example locally, follow these steps:
+To spin up this example locally, follow the steps below:

 1. Clone this repo
-1. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
+1. Navigate into the project directory and install dependencies using your preferred package manager:

-   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
+- `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`

-1. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
-   - Press `y` when prompted to seed the database
-1. `open http://localhost:3000` to access the home page
-1. `open http://localhost:3000/admin` to access the admin panel
-   - Login with email `demo@payloadcms.com` and password `demo`
+> \*NOTE: The --ignore-workspace flag is needed if you are running this example within the Payload monorepo to avoid workspace conflicts.
+
+1. Start the server:
+   - Depending on your package manager, run `pnpm dev`, `yarn dev` or `npm run dev`
+   - When prompted, type `y` then `enter` to seed the database with sample data
+1. Access the application:
+   - Open your browser and navigate to `http://localhost:3000` to access the homepage.
+   - Open `http://localhost:3000/admin` to access the admin panel.
+1. Login:
+
+- Use the following credentials to log into the admin panel:
+  > `Email: demo@payloadcms.com` > `Password: demo`

 ## How it works

 ### Collections

-See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend any of this functionality.
+[Collections](https://payloadcms.com/docs/configuration/collections) in Payload allow you to define structured content types. This example includes multiple collections, with a focus on:

 - #### Users

-  The `users` collection is auth-enabled which provides access to the admin panel.
+  The `users` collection is **auth-enabled**, providing access to the admin panel and enabling user authentication. This collection shows how to implement a basic user collection with authentication.

-  For additional help with authentication, see the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/cms#readme) or the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
+  - For more details on setting up authentication, checkout the [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/cms#readme) and the [Authentication Overview](https://payloadcms.com/docs/authentication/overview#authentication-overview).

 - #### Fields

-  The `fields` collection contains every field type available in Payload, each with custom components filled in every available "slot", i.e. `admin.components.Field`, `admin.components.Label`, etc. There are two of every field, one for server components, and the other for client components. This pattern shows how to use custom components in both environments, no matter which field type you are using.
+  The `fields` collection demonstrates all the **field types** available in Payload, each one configured with custom components. This includes every available "slot" for custom components (e.g., `admin.components.Field`, `admin.components.Label`, `admin.components.Input`, etc.). For each field type, two examples are provided: one using **server-side components** and the other using **client-side components**. This pattern illustrates how to customize both types of components across different field types.
+
+  - **Custom Field Components**: Custom components allow you to tailor the UI and behavior of the admin panel fields. This can be useful for implementing complex interactions, custom validation, or UI enhancements. For example, you might use a custom component to replace a simple text input with a date picker or a rich text editor.

 - #### Views

-  The `views` collection demonstrates how to add collection-level views, including the default view and custom tabs.
+  The `views` collection demonstrates how to create **collection-level views**, such as custom tabs or layout configurations. This is where you can modify how data is displayed in the admin panel beyond the default list and edit views. Custom views give you full control over how content is presented to users.

 - #### Root Views

-  The `root-views` collection demonstrates how to add a root document-level view to the admin panel.
+  The `root-views` collection shows how to implement **root-level views** in the admin panel. These views can be used to modify the global admin interface, adding custom sections or settings that appear outside of collections.
+
+## Troubleshooting
+
+If you encounter any issues during setup or while running the example, here are a few things to try:
+
+- **Missing dependencies**: If you see errors related to missing packages, try deleting the `node_modules` folder and the lockfile (`package-lock.json` or `pnpm-lock.yaml`), then rerun `npm install` or `pnpm i`.
+
+- **Port conflicts**: If the development server isn't starting, ensure that port `3000` isn't being used by another process. You can change the port by modifying the `package.json` file or setting the `PORT` environment variable.
+
+- **Seed data issues**: If the database seeding fails, try clearing the database and then rerun the seeding process.

 ## Questions

 If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).
+
+For more detailed documentation on how to extend and customize Payload, check out the full [Payload documentation](https://payloadcms.com/docs).
--- a/examples/custom-components/next-env.d.ts
+++ b/examples/custom-components/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />

 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/examples/custom-components/package.json
+++ b/examples/custom-components/package.json
@@ -5,10 +5,10 @@
  "license": "MIT",
  "type": "module",
  "scripts": {
-    "_dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm generate:importmap && next dev",
+    "_dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm generate:importmap && pnpm seed && next dev --turbo",
-    "generate:importmap": "payload generate:importmap",
+    "dev": "cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true NODE_OPTIONS=--no-deprecation next dev",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
    "generate:schema": "payload-graphql generate:schema",
    "generate:types": "payload generate:types",
    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
@@ -16,28 +16,41 @@
    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
  },
  "dependencies": {
-    "@payloadcms/db-mongodb": "3.0.0-beta.106",
-    "@payloadcms/next": "3.0.0-beta.106",
-    "@payloadcms/richtext-lexical": "3.0.0-beta.106",
-    "@payloadcms/ui": "3.0.0-beta.106",
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "@payloadcms/ui": "beta",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "graphql": "^16.9.0",
-    "next": "15.0.0-canary.160",
-    "payload": "3.0.0-beta.106",
-    "react": "19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "19.0.0-rc-5dcb0097-20240918"
+    "install": "^0.13.0",
+    "next": "15.0.0",
+    "payload": "beta",
+    "react": "19.0.0-rc-65a56d0e-20241020",
+    "react-dom": "19.0.0-rc-65a56d0e-20241020"
  },
  "devDependencies": {
-    "@payloadcms/graphql": "3.0.0-beta.106",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "@payloadcms/graphql": "beta",
+    "@swc/core": "^1.6.13",
+    "@types/ejs": "^3.1.5",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
    "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0-canary.146",
-    "tsx": "^4.7.1",
+    "eslint-config-next": "15.0.0",
+    "tsx": "^4.16.2",
    "typescript": "5.5.2"
  },
  "engines": {
    "node": "^18.20.2 || >=20.9.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    }
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }
 }
--- a/examples/custom-components/pnpm-lock.yaml
+++ b/examples/custom-components/pnpm-lock.yaml
--- a/examples/custom-components/src/app/(payload)/admin/[[...segments]]/not-found.tsx
+++ b/examples/custom-components/src/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -8,12 +8,12 @@ import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 import { importMap } from '../importMap.js'

 type Args = {
-  params: {
+  params: Promise<{
    segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
    [key: string]: string | string[]
-  }
+  }>
 }

 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
--- a/examples/custom-components/src/app/(payload)/admin/[[...segments]]/page.tsx
+++ b/examples/custom-components/src/app/(payload)/admin/[[...segments]]/page.tsx
@@ -8,14 +8,13 @@ import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 import { importMap } from '../importMap.js'

 type Args = {
-  params: {
+  params: Promise<{
    segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
    [key: string]: string | string[]
-  }
+  }>
 }
-
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
  generatePageMetadata({ config, params, searchParams })

--- a/examples/custom-components/src/app/(payload)/admin/importMap.js
+++ b/examples/custom-components/src/app/(payload)/admin/importMap.js
@@ -1,162 +1,113 @@
-import { CustomArrayFieldLabelServer as CustomArrayFieldLabelServer_0 } from '@/collections/Fields/array/components/server/Label'
-import { CustomArrayFieldServer as CustomArrayFieldServer_1 } from '@/collections/Fields/array/components/server/Field'
-import { CustomArrayFieldLabelClient as CustomArrayFieldLabelClient_2 } from '@/collections/Fields/array/components/client/Label'
-import { CustomArrayFieldClient as CustomArrayFieldClient_3 } from '@/collections/Fields/array/components/client/Field'
-import { CustomBlocksFieldServer as CustomBlocksFieldServer_4 } from '@/collections/Fields/blocks/components/server/Field'
-import { CustomBlocksFieldClient as CustomBlocksFieldClient_5 } from '@/collections/Fields/blocks/components/client/Field'
-import { CustomCheckboxFieldLabelServer as CustomCheckboxFieldLabelServer_6 } from '@/collections/Fields/checkbox/components/server/Label'
-import { CustomCheckboxFieldServer as CustomCheckboxFieldServer_7 } from '@/collections/Fields/checkbox/components/server/Field'
-import { CustomCheckboxFieldLabelClient as CustomCheckboxFieldLabelClient_8 } from '@/collections/Fields/checkbox/components/client/Label'
-import { CustomCheckboxFieldClient as CustomCheckboxFieldClient_9 } from '@/collections/Fields/checkbox/components/client/Field'
-import { CustomDateFieldLabelServer as CustomDateFieldLabelServer_10 } from '@/collections/Fields/date/components/server/Label'
-import { CustomDateFieldServer as CustomDateFieldServer_11 } from '@/collections/Fields/date/components/server/Field'
-import { CustomDateFieldLabelClient as CustomDateFieldLabelClient_12 } from '@/collections/Fields/date/components/client/Label'
-import { CustomDateFieldClient as CustomDateFieldClient_13 } from '@/collections/Fields/date/components/client/Field'
-import { CustomEmailFieldLabelServer as CustomEmailFieldLabelServer_14 } from '@/collections/Fields/email/components/server/Label'
-import { CustomEmailFieldServer as CustomEmailFieldServer_15 } from '@/collections/Fields/email/components/server/Field'
-import { CustomEmailFieldLabelClient as CustomEmailFieldLabelClient_16 } from '@/collections/Fields/email/components/client/Label'
-import { CustomEmailFieldClient as CustomEmailFieldClient_17 } from '@/collections/Fields/email/components/client/Field'
-import { CustomNumberFieldLabelServer as CustomNumberFieldLabelServer_18 } from '@/collections/Fields/number/components/server/Label'
-import { CustomNumberFieldServer as CustomNumberFieldServer_19 } from '@/collections/Fields/number/components/server/Field'
-import { CustomNumberFieldLabelClient as CustomNumberFieldLabelClient_20 } from '@/collections/Fields/number/components/client/Label'
-import { CustomNumberFieldClient as CustomNumberFieldClient_21 } from '@/collections/Fields/number/components/client/Field'
-import { CustomPointFieldLabelServer as CustomPointFieldLabelServer_22 } from '@/collections/Fields/point/components/server/Label'
-import { CustomPointFieldServer as CustomPointFieldServer_23 } from '@/collections/Fields/point/components/server/Field'
-import { CustomPointFieldLabelClient as CustomPointFieldLabelClient_24 } from '@/collections/Fields/point/components/client/Label'
-import { CustomPointFieldClient as CustomPointFieldClient_25 } from '@/collections/Fields/point/components/client/Field'
-import { CustomRadioFieldLabelServer as CustomRadioFieldLabelServer_26 } from '@/collections/Fields/radio/components/server/Label'
-import { CustomRadioFieldServer as CustomRadioFieldServer_27 } from '@/collections/Fields/radio/components/server/Field'
-import { CustomRadioFieldLabelClient as CustomRadioFieldLabelClient_28 } from '@/collections/Fields/radio/components/client/Label'
-import { CustomRadioFieldClient as CustomRadioFieldClient_29 } from '@/collections/Fields/radio/components/client/Field'
-import { CustomRelationshipFieldLabelServer as CustomRelationshipFieldLabelServer_30 } from '@/collections/Fields/relationship/components/server/Label'
-import { CustomRelationshipFieldServer as CustomRelationshipFieldServer_31 } from '@/collections/Fields/relationship/components/server/Field'
-import { CustomRelationshipFieldLabelClient as CustomRelationshipFieldLabelClient_32 } from '@/collections/Fields/relationship/components/client/Label'
-import { CustomRelationshipFieldClient as CustomRelationshipFieldClient_33 } from '@/collections/Fields/relationship/components/client/Field'
-import { CustomSelectFieldLabelServer as CustomSelectFieldLabelServer_34 } from '@/collections/Fields/select/components/server/Label'
-import { CustomSelectFieldServer as CustomSelectFieldServer_35 } from '@/collections/Fields/select/components/server/Field'
-import { CustomSelectFieldLabelClient as CustomSelectFieldLabelClient_36 } from '@/collections/Fields/select/components/client/Label'
-import { CustomSelectFieldClient as CustomSelectFieldClient_37 } from '@/collections/Fields/select/components/client/Field'
-import { CustomTextFieldLabelServer as CustomTextFieldLabelServer_38 } from '@/collections/Fields/text/components/server/Label'
-import { CustomTextFieldServer as CustomTextFieldServer_39 } from '@/collections/Fields/text/components/server/Field'
-import { CustomTextFieldLabelClient as CustomTextFieldLabelClient_40 } from '@/collections/Fields/text/components/client/Label'
-import { CustomTextFieldClient as CustomTextFieldClient_41 } from '@/collections/Fields/text/components/client/Field'
-import { CustomTextareaFieldLabelServer as CustomTextareaFieldLabelServer_42 } from '@/collections/Fields/textarea/components/server/Label'
-import { CustomTextareaFieldServer as CustomTextareaFieldServer_43 } from '@/collections/Fields/textarea/components/server/Field'
-import { CustomTextareaFieldLabelClient as CustomTextareaFieldLabelClient_44 } from '@/collections/Fields/textarea/components/client/Label'
-import { CustomTextareaFieldClient as CustomTextareaFieldClient_45 } from '@/collections/Fields/textarea/components/client/Field'
-import { CustomTabEditView as CustomTabEditView_46 } from '@/collections/Views/components/CustomTabEditView'
-import { CustomDefaultEditView as CustomDefaultEditView_47 } from '@/collections/Views/components/CustomDefaultEditView'
-import { CustomRootEditView as CustomRootEditView_48 } from '@/collections/RootViews/components/CustomRootEditView'
-import { LinkToCustomView as LinkToCustomView_49 } from '@/components/afterNavLinks/LinkToCustomView'
-import { LinkToCustomMinimalView as LinkToCustomMinimalView_50 } from '@/components/afterNavLinks/LinkToCustomMinimalView'
-import { LinkToCustomDefaultView as LinkToCustomDefaultView_51 } from '@/components/afterNavLinks/LinkToCustomDefaultView'
-import { CustomRootView as CustomRootView_52 } from '@/components/views/CustomRootView'
-import { CustomDefaultRootView as CustomDefaultRootView_53 } from '@/components/views/CustomDefaultRootView'
-import { CustomMinimalRootView as CustomMinimalRootView_54 } from '@/components/views/CustomMinimalRootView'
+import { CustomArrayFieldLabelServer as CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947 } from '@/collections/Fields/array/components/server/Label'
+import { CustomArrayFieldServer as CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837 } from '@/collections/Fields/array/components/server/Field'
+import { CustomArrayFieldLabelClient as CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d } from '@/collections/Fields/array/components/client/Label'
+import { CustomArrayFieldClient as CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab } from '@/collections/Fields/array/components/client/Field'
+import { CustomBlocksFieldServer as CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954 } from '@/collections/Fields/blocks/components/server/Field'
+import { CustomBlocksFieldClient as CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515 } from '@/collections/Fields/blocks/components/client/Field'
+import { CustomCheckboxFieldLabelServer as CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9 } from '@/collections/Fields/checkbox/components/server/Label'
+import { CustomCheckboxFieldServer as CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8 } from '@/collections/Fields/checkbox/components/server/Field'
+import { CustomCheckboxFieldLabelClient as CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194 } from '@/collections/Fields/checkbox/components/client/Label'
+import { CustomCheckboxFieldClient as CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de } from '@/collections/Fields/checkbox/components/client/Field'
+import { CustomDateFieldLabelServer as CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b } from '@/collections/Fields/date/components/server/Label'
+import { CustomDateFieldServer as CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b } from '@/collections/Fields/date/components/server/Field'
+import { CustomDateFieldLabelClient as CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8 } from '@/collections/Fields/date/components/client/Label'
+import { CustomDateFieldClient as CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c } from '@/collections/Fields/date/components/client/Field'
+import { CustomEmailFieldLabelServer as CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab } from '@/collections/Fields/email/components/server/Label'
+import { CustomEmailFieldServer as CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1 } from '@/collections/Fields/email/components/server/Field'
+import { CustomEmailFieldLabelClient as CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50 } from '@/collections/Fields/email/components/client/Label'
+import { CustomEmailFieldClient as CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97 } from '@/collections/Fields/email/components/client/Field'
+import { CustomNumberFieldLabelServer as CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f } from '@/collections/Fields/number/components/server/Label'
+import { CustomNumberFieldServer as CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86 } from '@/collections/Fields/number/components/server/Field'
+import { CustomNumberFieldLabelClient as CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51 } from '@/collections/Fields/number/components/client/Label'
+import { CustomNumberFieldClient as CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f } from '@/collections/Fields/number/components/client/Field'
+import { CustomPointFieldLabelServer as CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9 } from '@/collections/Fields/point/components/server/Label'
+import { CustomPointFieldServer as CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d } from '@/collections/Fields/point/components/server/Field'
+import { CustomPointFieldLabelClient as CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150 } from '@/collections/Fields/point/components/client/Label'
+import { CustomPointFieldClient as CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132 } from '@/collections/Fields/point/components/client/Field'
+import { CustomRadioFieldLabelServer as CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b } from '@/collections/Fields/radio/components/server/Label'
+import { CustomRadioFieldServer as CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60 } from '@/collections/Fields/radio/components/server/Field'
+import { CustomRadioFieldLabelClient as CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf } from '@/collections/Fields/radio/components/client/Label'
+import { CustomRadioFieldClient as CustomRadioFieldClient_42845db96f999817cb9f0a590413d669 } from '@/collections/Fields/radio/components/client/Field'
+import { CustomRelationshipFieldLabelServer as CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70 } from '@/collections/Fields/relationship/components/server/Label'
+import { CustomRelationshipFieldServer as CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16 } from '@/collections/Fields/relationship/components/server/Field'
+import { CustomRelationshipFieldLabelClient as CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a } from '@/collections/Fields/relationship/components/client/Label'
+import { CustomRelationshipFieldClient as CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869 } from '@/collections/Fields/relationship/components/client/Field'
+import { CustomSelectFieldLabelServer as CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9 } from '@/collections/Fields/select/components/server/Label'
+import { CustomSelectFieldServer as CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a } from '@/collections/Fields/select/components/server/Field'
+import { CustomSelectFieldLabelClient as CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b } from '@/collections/Fields/select/components/client/Label'
+import { CustomSelectFieldClient as CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f } from '@/collections/Fields/select/components/client/Field'
+import { CustomTextFieldLabelServer as CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9 } from '@/collections/Fields/text/components/server/Label'
+import { CustomTextFieldServer as CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9 } from '@/collections/Fields/text/components/server/Field'
+import { CustomTextFieldLabelClient as CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf } from '@/collections/Fields/text/components/client/Label'
+import { CustomTextFieldClient as CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98 } from '@/collections/Fields/text/components/client/Field'
+import { CustomTextareaFieldLabelServer as CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c } from '@/collections/Fields/textarea/components/server/Label'
+import { CustomTextareaFieldServer as CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99 } from '@/collections/Fields/textarea/components/server/Field'
+import { CustomTextareaFieldLabelClient as CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823 } from '@/collections/Fields/textarea/components/client/Label'
+import { CustomTextareaFieldClient as CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691 } from '@/collections/Fields/textarea/components/client/Field'
+import { CustomTabEditView as CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193 } from '@/collections/Views/components/CustomTabEditView'
+import { CustomDefaultEditView as CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424 } from '@/collections/Views/components/CustomDefaultEditView'
+import { CustomRootEditView as CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99 } from '@/collections/RootViews/components/CustomRootEditView'
+import { LinkToCustomView as LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0 } from '@/components/afterNavLinks/LinkToCustomView'
+import { LinkToCustomMinimalView as LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d } from '@/components/afterNavLinks/LinkToCustomMinimalView'
+import { LinkToCustomDefaultView as LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b } from '@/components/afterNavLinks/LinkToCustomDefaultView'
+import { CustomRootView as CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab } from '@/components/views/CustomRootView'
+import { CustomDefaultRootView as CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce } from '@/components/views/CustomDefaultRootView'
+import { CustomMinimalRootView as CustomMinimalRootView_9211f699dea5524a957f33011b786586 } from '@/components/views/CustomMinimalRootView'

 export const importMap = {
-  '@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer':
-    CustomArrayFieldLabelServer_0,
-  '@/collections/Fields/array/components/server/Field#CustomArrayFieldServer':
-    CustomArrayFieldServer_1,
-  '@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient':
-    CustomArrayFieldLabelClient_2,
-  '@/collections/Fields/array/components/client/Field#CustomArrayFieldClient':
-    CustomArrayFieldClient_3,
-  '@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer':
-    CustomBlocksFieldServer_4,
-  '@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient':
-    CustomBlocksFieldClient_5,
-  '@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer':
-    CustomCheckboxFieldLabelServer_6,
-  '@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer':
-    CustomCheckboxFieldServer_7,
-  '@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient':
-    CustomCheckboxFieldLabelClient_8,
-  '@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient':
-    CustomCheckboxFieldClient_9,
-  '@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer':
-    CustomDateFieldLabelServer_10,
-  '@/collections/Fields/date/components/server/Field#CustomDateFieldServer':
-    CustomDateFieldServer_11,
-  '@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient':
-    CustomDateFieldLabelClient_12,
-  '@/collections/Fields/date/components/client/Field#CustomDateFieldClient':
-    CustomDateFieldClient_13,
-  '@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer':
-    CustomEmailFieldLabelServer_14,
-  '@/collections/Fields/email/components/server/Field#CustomEmailFieldServer':
-    CustomEmailFieldServer_15,
-  '@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient':
-    CustomEmailFieldLabelClient_16,
-  '@/collections/Fields/email/components/client/Field#CustomEmailFieldClient':
-    CustomEmailFieldClient_17,
-  '@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer':
-    CustomNumberFieldLabelServer_18,
-  '@/collections/Fields/number/components/server/Field#CustomNumberFieldServer':
-    CustomNumberFieldServer_19,
-  '@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient':
-    CustomNumberFieldLabelClient_20,
-  '@/collections/Fields/number/components/client/Field#CustomNumberFieldClient':
-    CustomNumberFieldClient_21,
-  '@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer':
-    CustomPointFieldLabelServer_22,
-  '@/collections/Fields/point/components/server/Field#CustomPointFieldServer':
-    CustomPointFieldServer_23,
-  '@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient':
-    CustomPointFieldLabelClient_24,
-  '@/collections/Fields/point/components/client/Field#CustomPointFieldClient':
-    CustomPointFieldClient_25,
-  '@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer':
-    CustomRadioFieldLabelServer_26,
-  '@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer':
-    CustomRadioFieldServer_27,
-  '@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient':
-    CustomRadioFieldLabelClient_28,
-  '@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient':
-    CustomRadioFieldClient_29,
-  '@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer':
-    CustomRelationshipFieldLabelServer_30,
-  '@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer':
-    CustomRelationshipFieldServer_31,
-  '@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient':
-    CustomRelationshipFieldLabelClient_32,
-  '@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient':
-    CustomRelationshipFieldClient_33,
-  '@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer':
-    CustomSelectFieldLabelServer_34,
-  '@/collections/Fields/select/components/server/Field#CustomSelectFieldServer':
-    CustomSelectFieldServer_35,
-  '@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient':
-    CustomSelectFieldLabelClient_36,
-  '@/collections/Fields/select/components/client/Field#CustomSelectFieldClient':
-    CustomSelectFieldClient_37,
-  '@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer':
-    CustomTextFieldLabelServer_38,
-  '@/collections/Fields/text/components/server/Field#CustomTextFieldServer':
-    CustomTextFieldServer_39,
-  '@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient':
-    CustomTextFieldLabelClient_40,
-  '@/collections/Fields/text/components/client/Field#CustomTextFieldClient':
-    CustomTextFieldClient_41,
-  '@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer':
-    CustomTextareaFieldLabelServer_42,
-  '@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer':
-    CustomTextareaFieldServer_43,
-  '@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient':
-    CustomTextareaFieldLabelClient_44,
-  '@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient':
-    CustomTextareaFieldClient_45,
-  '@/collections/Views/components/CustomTabEditView#CustomTabEditView': CustomTabEditView_46,
-  '@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView':
-    CustomDefaultEditView_47,
-  '@/collections/RootViews/components/CustomRootEditView#CustomRootEditView': CustomRootEditView_48,
-  '@/components/afterNavLinks/LinkToCustomView#LinkToCustomView': LinkToCustomView_49,
-  '@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView':
-    LinkToCustomMinimalView_50,
-  '@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView':
-    LinkToCustomDefaultView_51,
-  '@/components/views/CustomRootView#CustomRootView': CustomRootView_52,
-  '@/components/views/CustomDefaultRootView#CustomDefaultRootView': CustomDefaultRootView_53,
-  '@/components/views/CustomMinimalRootView#CustomMinimalRootView': CustomMinimalRootView_54,
+  "@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer": CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947,
+  "@/collections/Fields/array/components/server/Field#CustomArrayFieldServer": CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837,
+  "@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient": CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d,
+  "@/collections/Fields/array/components/client/Field#CustomArrayFieldClient": CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab,
+  "@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer": CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954,
+  "@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient": CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515,
+  "@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer": CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9,
+  "@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer": CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8,
+  "@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient": CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194,
+  "@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient": CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de,
+  "@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer": CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b,
+  "@/collections/Fields/date/components/server/Field#CustomDateFieldServer": CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b,
+  "@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient": CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8,
+  "@/collections/Fields/date/components/client/Field#CustomDateFieldClient": CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c,
+  "@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer": CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab,
+  "@/collections/Fields/email/components/server/Field#CustomEmailFieldServer": CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1,
+  "@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient": CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50,
+  "@/collections/Fields/email/components/client/Field#CustomEmailFieldClient": CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97,
+  "@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer": CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f,
+  "@/collections/Fields/number/components/server/Field#CustomNumberFieldServer": CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86,
+  "@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient": CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51,
+  "@/collections/Fields/number/components/client/Field#CustomNumberFieldClient": CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f,
+  "@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer": CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9,
+  "@/collections/Fields/point/components/server/Field#CustomPointFieldServer": CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d,
+  "@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient": CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150,
+  "@/collections/Fields/point/components/client/Field#CustomPointFieldClient": CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132,
+  "@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer": CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b,
+  "@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer": CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60,
+  "@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient": CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf,
+  "@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient": CustomRadioFieldClient_42845db96f999817cb9f0a590413d669,
+  "@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer": CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70,
+  "@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer": CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16,
+  "@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient": CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a,
+  "@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient": CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869,
+  "@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer": CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9,
+  "@/collections/Fields/select/components/server/Field#CustomSelectFieldServer": CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a,
+  "@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient": CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b,
+  "@/collections/Fields/select/components/client/Field#CustomSelectFieldClient": CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f,
+  "@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer": CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9,
+  "@/collections/Fields/text/components/server/Field#CustomTextFieldServer": CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9,
+  "@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient": CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf,
+  "@/collections/Fields/text/components/client/Field#CustomTextFieldClient": CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98,
+  "@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer": CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c,
+  "@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer": CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99,
+  "@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient": CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823,
+  "@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient": CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691,
+  "@/collections/Views/components/CustomTabEditView#CustomTabEditView": CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193,
+  "@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView": CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424,
+  "@/collections/RootViews/components/CustomRootEditView#CustomRootEditView": CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99,
+  "@/components/afterNavLinks/LinkToCustomView#LinkToCustomView": LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0,
+  "@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView": LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d,
+  "@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView": LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b,
+  "@/components/views/CustomRootView#CustomRootView": CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab,
+  "@/components/views/CustomDefaultRootView#CustomDefaultRootView": CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce,
+  "@/components/views/CustomMinimalRootView#CustomMinimalRootView": CustomMinimalRootView_9211f699dea5524a957f33011b786586
 }
--- a/examples/custom-components/src/app/(payload)/layout.tsx
+++ b/examples/custom-components/src/app/(payload)/layout.tsx
@@ -1,8 +1,10 @@
+import type { ServerFunctionClient } from 'payload'
+
+import '@payloadcms/next/css'
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
-import '@payloadcms/next/css'
-import { RootLayout } from '@payloadcms/next/layouts'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
 import React from 'react'

 import { importMap } from './admin/importMap.js'
@@ -12,8 +14,17 @@ type Args = {
  children: React.ReactNode
 }

+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
 const Layout = ({ children }: Args) => (
-  <RootLayout config={config} importMap={importMap}>
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
    {children}
  </RootLayout>
 )
--- a/examples/custom-components/src/collections/Fields/array/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { ArrayFieldClientComponent } from 'payload'
 import { ArrayField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomArrayFieldClient: ArrayFieldClientComponent = ({ field }) => {
-  return <ArrayField field={field} />
+export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
+  return <ArrayField field={props?.field} path={props?.path} permissions={props?.permissions} />
 }
--- a/examples/custom-components/src/collections/Fields/array/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { ArrayFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/array/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { ArrayField } from '@payloadcms/ui'

-export const CustomArrayFieldServer: ArrayFieldServerComponent = ({ clientField }) => {
-  return <ArrayField field={clientField} />
+export const CustomArrayFieldServer: ArrayFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <ArrayField field={props.clientField} path={path} permissions={props?.permissions} />
 }
--- a/examples/custom-components/src/collections/Fields/array/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/array/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { ArrayFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { BlocksFieldClientComponent } from 'payload'
 import { BlocksField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomBlocksFieldClient: BlocksFieldClientComponent = ({ field }) => {
-  return <BlocksField field={field} />
+export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
+  return <BlocksField field={props?.field} path={props.path} permissions={props?.permissions} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { BlocksFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { BlocksField } from '@payloadcms/ui'

-export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({ clientField }) => {
-  return <BlocksField field={clientField} />
+export const CustomBlocksFieldServer: BlocksFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <BlocksField field={props?.clientField} path={path} permissions={props?.permissions} />
 }
--- a/examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { BlocksFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { CheckboxFieldClientComponent } from 'payload'
 import { CheckboxField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = ({ field }) => {
-  return <CheckboxField field={field} />
+export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (props) => {
+  return <CheckboxField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { CheckboxFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { CheckboxField } from '@payloadcms/ui'

-export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({ clientField }) => {
-  return <CheckboxField field={clientField} />
+export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <CheckboxField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/checkbox/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/checkbox/components/server/Label.tsx
@@ -3,9 +3,6 @@ import type { CheckboxFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { DateFieldClientComponent } from 'payload'
 import { DateTimeField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomDateFieldClient: DateFieldClientComponent = ({ field }) => {
-  return <DateTimeField field={field} />
+export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
+  return <DateTimeField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { DateFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { DateTimeField } from '@payloadcms/ui'

-export const CustomDateFieldServer: DateFieldServerComponent = ({ clientField }) => {
-  return <DateTimeField field={clientField} />
+export const CustomDateFieldServer: DateFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <DateTimeField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/date/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/date/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { DateFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { EmailFieldClientComponent } from 'payload'
 import { EmailField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomEmailFieldClient: EmailFieldClientComponent = ({ field }) => {
-  return <EmailField field={field} />
+export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
+  return <EmailField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { EmailFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { EmailField } from '@payloadcms/ui'

-export const CustomEmailFieldServer: EmailFieldServerComponent = ({ clientField }) => {
-  return <EmailField field={clientField} />
+export const CustomEmailFieldServer: EmailFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <EmailField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/email/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/email/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { EmailFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { NumberFieldClientComponent } from 'payload'
 import { NumberField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomNumberFieldClient: NumberFieldClientComponent = ({ field }) => {
-  return <NumberField field={field} />
+export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
+  return <NumberField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { NumberFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { NumberField } from '@payloadcms/ui'

-export const CustomNumberFieldServer: NumberFieldServerComponent = ({ clientField }) => {
-  return <NumberField field={clientField} />
+export const CustomNumberFieldServer: NumberFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <NumberField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/number/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/number/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { NumberFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { PointFieldClientComponent } from 'payload'
 import { PointField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomPointFieldClient: PointFieldClientComponent = ({ field }) => {
-  return <PointField field={field} />
+export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
+  return <PointField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { PointFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = ({ field }) => {
-  return <FieldLabel field={field} />
+export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { PointField } from '@payloadcms/ui'

-export const CustomPointFieldServer: PointFieldServerComponent = ({ clientField }) => {
-  return <PointField field={clientField} />
+export const CustomPointFieldServer: PointFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <PointField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/point/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/point/components/server/Label.tsx
@@ -3,6 +3,6 @@ import type { PointFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({ clientField }) => {
-  return <FieldLabel field={clientField} />
+export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { RadioFieldClientComponent } from 'payload'
 import { RadioGroupField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRadioFieldClient: RadioFieldClientComponent = ({ field }) => {
-  return <RadioGroupField field={field} />
+export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
+  return <RadioGroupField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { RadioFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = ({ field, label }) => {
-  return <FieldLabel field={field} label={label} />
+export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { RadioGroupField } from '@payloadcms/ui'

-export const CustomRadioFieldServer: RadioFieldServerComponent = ({ clientField }) => {
-  return <RadioGroupField field={clientField} />
+export const CustomRadioFieldServer: RadioFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <RadioGroupField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/radio/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/radio/components/server/Label.tsx
@@ -3,9 +3,6 @@ import type { RadioFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { RelationshipFieldClientComponent } from 'payload'
 import { RelationshipField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = ({ field }) => {
-  return <RelationshipField field={field} />
+export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (props) => {
+  return <RelationshipField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/client/Label.tsx
@@ -4,9 +4,8 @@ import type { RelationshipFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = ({
-  field,
-  label,
-}) => {
-  return <FieldLabel field={field} label={label} />
+export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = (
+  props,
+) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/server/Field.tsx
@@ -3,8 +3,7 @@ import type React from 'react'

 import { RelationshipField } from '@payloadcms/ui'

-export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = ({
-  clientField,
-}) => {
-  return <RelationshipField field={clientField} />
+export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <RelationshipField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/relationship/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/relationship/components/server/Label.tsx
@@ -3,9 +3,8 @@ import type { RelationshipFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = (
+  props,
+) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { SelectFieldClientComponent } from 'payload'
 import { SelectField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomSelectFieldClient: SelectFieldClientComponent = ({ field }) => {
-  return <SelectField field={field} />
+export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
+  return <SelectField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { SelectFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = ({ field, label }) => {
-  return <FieldLabel field={field} label={label} />
+export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { SelectField } from '@payloadcms/ui'

-export const CustomSelectFieldServer: SelectFieldServerComponent = ({ clientField }) => {
-  return <SelectField field={clientField} />
+export const CustomSelectFieldServer: SelectFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <SelectField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/select/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/select/components/server/Label.tsx
@@ -3,9 +3,6 @@ import type { SelectFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { TextFieldClientComponent } from 'payload'
 import { TextField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextFieldClient: TextFieldClientComponent = ({ field }) => {
-  return <TextField field={field} />
+export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
+  return <TextField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/client/Label.tsx
@@ -4,6 +4,6 @@ import type { TextFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = ({ field, label }) => {
-  return <FieldLabel field={field} label={label} />
+export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { TextField } from '@payloadcms/ui'

-export const CustomTextFieldServer: TextFieldServerComponent = ({ clientField }) => {
-  return <TextField field={clientField} />
+export const CustomTextFieldServer: TextFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <TextField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/text/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/text/components/server/Label.tsx
@@ -3,9 +3,6 @@ import type { TextFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/client/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/client/Field.tsx
@@ -4,6 +4,6 @@ import type { TextareaFieldClientComponent } from 'payload'
 import { TextareaField } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextareaFieldClient: TextareaFieldClientComponent = ({ field }) => {
-  return <TextareaField field={field} />
+export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => {
+  return <TextareaField field={props?.field} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/client/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/client/Label.tsx
@@ -4,9 +4,6 @@ import type { TextareaFieldLabelClientComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = ({
-  field,
-  label,
-}) => {
-  return <FieldLabel field={field} label={label} />
+export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = (props) => {
+  return <FieldLabel label={props?.label} path={props?.path} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/server/Field.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/server/Field.tsx
@@ -3,6 +3,7 @@ import type React from 'react'

 import { TextareaField } from '@payloadcms/ui'

-export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({ clientField }) => {
-  return <TextareaField field={clientField} />
+export const CustomTextareaFieldServer: TextareaFieldServerComponent = (props) => {
+  const path = (props?.path || props?.field?.name || '') as string
+  return <TextareaField field={props?.clientField} path={path} />
 }
--- a/examples/custom-components/src/collections/Fields/textarea/components/server/Label.tsx
+++ b/examples/custom-components/src/collections/Fields/textarea/components/server/Label.tsx
@@ -3,9 +3,6 @@ import type { TextareaFieldLabelServerComponent } from 'payload'
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'

-export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = ({
-  clientField,
-  label,
-}) => {
-  return <FieldLabel field={clientField} label={label} />
+export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = (props) => {
+  return <FieldLabel label={props?.label} />
 }
--- a/examples/custom-components/src/payload-types.ts
+++ b/examples/custom-components/src/payload-types.ts
@@ -15,17 +15,33 @@ export interface Config {
    'custom-views': CustomView;
    'custom-root-views': CustomRootView;
    users: User;
+    'payload-locked-documents': PayloadLockedDocument;
    'payload-preferences': PayloadPreference;
    'payload-migrations': PayloadMigration;
  };
+  collectionsJoins: {};
+  collectionsSelect: {
+    'custom-fields': CustomFieldsSelect<false> | CustomFieldsSelect<true>;
+    'custom-views': CustomViewsSelect<false> | CustomViewsSelect<true>;
+    'custom-root-views': CustomRootViewsSelect<false> | CustomRootViewsSelect<true>;
+    users: UsersSelect<false> | UsersSelect<true>;
+    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
+    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
+    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
+  };
  db: {
    defaultIDType: string;
  };
  globals: {};
+  globalsSelect: {};
  locale: null;
  user: User & {
    collection: 'users';
  };
+  jobs?: {
+    tasks: unknown;
+    workflows?: unknown;
+  };
 }
 export interface UserAuthOperations {
  forgotPassword: {
@@ -148,6 +164,37 @@ export interface User {
  lockUntil?: string | null;
  password?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents".
+ */
+export interface PayloadLockedDocument {
+  id: string;
+  document?:
+    | ({
+        relationTo: 'custom-fields';
+        value: string | CustomField;
+      } | null)
+    | ({
+        relationTo: 'custom-views';
+        value: string | CustomView;
+      } | null)
+    | ({
+        relationTo: 'custom-root-views';
+        value: string | CustomRootView;
+      } | null)
+    | ({
+        relationTo: 'users';
+        value: string | User;
+      } | null);
+  globalSlug?: string | null;
+  user: {
+    relationTo: 'users';
+    value: string | User;
+  };
+  updatedAt: string;
+  createdAt: string;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "payload-preferences".
@@ -182,6 +229,134 @@ export interface PayloadMigration {
  updatedAt: string;
  createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-fields_select".
+ */
+export interface CustomFieldsSelect<T extends boolean = true> {
+  title?: T;
+  arrayFieldServerComponent?:
+    | T
+    | {
+        title?: T;
+        id?: T;
+      };
+  arrayFieldClientComponent?:
+    | T
+    | {
+        title?: T;
+        id?: T;
+      };
+  blocksFieldServerComponent?:
+    | T
+    | {
+        text?:
+          | T
+          | {
+              content?: T;
+              id?: T;
+              blockName?: T;
+            };
+      };
+  blocksFieldClientComponent?:
+    | T
+    | {
+        text?:
+          | T
+          | {
+              content?: T;
+              id?: T;
+              blockName?: T;
+            };
+      };
+  checkboxFieldServerComponent?: T;
+  checkboxFieldClientComponent?: T;
+  dateFieldServerComponent?: T;
+  dateFieldClientComponent?: T;
+  emailFieldServerComponent?: T;
+  emailFieldClientComponent?: T;
+  numberFieldServerComponent?: T;
+  numberFieldClientComponent?: T;
+  pointFieldServerComponent?: T;
+  pointFieldClientComponent?: T;
+  radioFieldServerComponent?: T;
+  radioFieldClientComponent?: T;
+  relationshipFieldServerComponent?: T;
+  relationshipFieldClientComponent?: T;
+  selectFieldServerComponent?: T;
+  selectFieldClientComponent?: T;
+  textFieldServerComponent?: T;
+  textFieldClientComponent?: T;
+  textareaFieldServerComponent?: T;
+  textareaFieldClientComponent?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-views_select".
+ */
+export interface CustomViewsSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-root-views_select".
+ */
+export interface CustomRootViewsSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users_select".
+ */
+export interface UsersSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  email?: T;
+  resetPasswordToken?: T;
+  resetPasswordExpiration?: T;
+  salt?: T;
+  hash?: T;
+  loginAttempts?: T;
+  lockUntil?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents_select".
+ */
+export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
+  document?: T;
+  globalSlug?: T;
+  user?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences_select".
+ */
+export interface PayloadPreferencesSelect<T extends boolean = true> {
+  user?: T;
+  key?: T;
+  value?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations_select".
+ */
+export interface PayloadMigrationsSelect<T extends boolean = true> {
+  name?: T;
+  batch?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "auth".