fix: passes field permissions to custom fields

packages/payload/src/admin/fields/Array.ts

@@ -21,8 +21,7 @@ type ArrayFieldClientWithoutType = MarkOptional<ArrayFieldClient, 'type'>
 
 type ArrayFieldBaseClientProps = {
   readonly validate?: ArrayFieldValidation
-} & FieldPaths &
-  Pick<ServerFieldBase, 'permissions'>
+} & FieldPaths
 
 export type ArrayFieldClientProps = ArrayFieldBaseClientProps &
   ClientFieldBase<ArrayFieldClientWithoutType>

packages/payload/src/admin/fields/Blocks.ts

@@ -21,8 +21,7 @@ type BlocksFieldClientWithoutType = MarkOptional<BlocksFieldClient, 'type'>
 
 type BlocksFieldBaseClientProps = {
   readonly validate?: BlocksFieldValidation
-} & FieldPaths &
-  Pick<ServerFieldBase, 'permissions'>
+} & FieldPaths
 
 export type BlocksFieldClientProps = BlocksFieldBaseClientProps &
   ClientFieldBase<BlocksFieldClientWithoutType>

packages/payload/src/admin/fields/Collapsible.ts

@@ -16,7 +16,7 @@ import type {
   FieldLabelServerComponent,
 } from '../types.js'
 
-type CollapsibleFieldBaseClientProps = FieldPaths & Pick<ServerFieldBase, 'permissions'>
+type CollapsibleFieldBaseClientProps = FieldPaths
 
 type CollapsibleFieldClientWithoutType = MarkOptional<CollapsibleFieldClient, 'type'>
 

packages/payload/src/admin/fields/Group.ts

@@ -18,7 +18,7 @@ import type {
 
 type GroupFieldClientWithoutType = MarkOptional<GroupFieldClient, 'type'>
 
-export type GroupFieldBaseClientProps = FieldPaths & Pick<ServerFieldBase, 'permissions'>
+export type GroupFieldBaseClientProps = FieldPaths
 
 export type GroupFieldClientProps = ClientFieldBase<GroupFieldClientWithoutType> &
   GroupFieldBaseClientProps

packages/payload/src/admin/fields/Row.ts

@@ -21,8 +21,7 @@ type RowFieldClientWithoutType = MarkOptional<RowFieldClient, 'type'>
 
 type RowFieldBaseClientProps = {
   readonly forceRender?: boolean
-} & Omit<FieldPaths, 'path'> &
-  Pick<ServerFieldBase, 'permissions'>
+} & Omit<FieldPaths, 'path'>
 
 export type RowFieldClientProps = Omit<ClientFieldBase<RowFieldClientWithoutType>, 'path'> &
   RowFieldBaseClientProps

packages/payload/src/admin/fields/Tabs.ts

@@ -26,7 +26,7 @@ export type ClientTab =
   | ({ fields: ClientField[]; readonly path?: string } & Omit<NamedTab, 'fields'>)
   | ({ fields: ClientField[] } & Omit<UnnamedTab, 'fields'>)
 
-type TabsFieldBaseClientProps = FieldPaths & Pick<ServerFieldBase, 'permissions'>
+type TabsFieldBaseClientProps = FieldPaths
 
 type TabsFieldClientWithoutType = MarkOptional<TabsFieldClient, 'type'>
 

packages/payload/src/admin/forms/Field.ts

@@ -21,6 +21,7 @@ export type ClientComponentProps = {
   customComponents: FormField['customComponents']
   field: ClientBlock | ClientField | ClientTab
   forceRender?: boolean
+  permissions?: SanitizedFieldPermissions
   readOnly?: boolean
   renderedBlocks?: RenderedField[]
   /**

packages/ui/src/forms/RenderFields/RenderField.tsx

@@ -57,8 +57,12 @@ export function RenderField({
     return CustomField || null
   }
 
-  const baseFieldProps: Pick<ClientComponentProps, 'forceRender' | 'readOnly' | 'schemaPath'> = {
+  const baseFieldProps: Pick<
+    ClientComponentProps,
+    'forceRender' | 'permissions' | 'readOnly' | 'schemaPath'
+  > = {
     forceRender,
+    permissions,
     readOnly,
     schemaPath,
   }
@@ -68,7 +72,6 @@ export function RenderField({
     indexPath,
     parentPath,
     parentSchemaPath,
-    permissions,
   }
 
   if (clientFieldConfig.admin?.hidden) {

packages/ui/src/forms/fieldSchemasToFormState/renderField.tsx

@@ -55,6 +55,7 @@ export const renderField: RenderFieldMethod = ({
     customComponents: fieldState?.customComponents || {},
     field: clientField,
     path,
+    permissions,
     readOnly: typeof permissions === 'boolean' ? !permissions : !permissions?.[operation],
     schemaPath,
   }

test/fields/collections/Array/CustomArrayField.tsx

@@ -0,0 +1,12 @@
+'use client'
+import type { ArrayFieldClientComponent } from 'payload'
+
+import { ArrayField } from '@payloadcms/ui'
+
+export const CustomArrayField: ArrayFieldClientComponent = (props) => {
+  return (
+    <div id="custom-array-field">
+      <ArrayField {...props} />
+    </div>
+  )
+}

test/fields/collections/Array/CustomField.tsx → test/fields/collections/Array/CustomTextField.tsx

@@ -2,9 +2,9 @@ import type { TextFieldServerComponent } from 'payload'
 
 import { TextField } from '@payloadcms/ui'
 
-export const CustomField: TextFieldServerComponent = ({ clientField, path }) => {
+export const CustomTextField: TextFieldServerComponent = ({ clientField, path }) => {
   return (
-    <div id="custom-field">
+    <div id="custom-text-field">
       <TextField field={clientField} path={path as string} />
     </div>
   )

test/fields/collections/Array/e2e.spec.ts

@@ -106,6 +106,12 @@ describe('Array', () => {
     await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase')
   })
 
+  test('should render default array field within custom component', async () => {
+    await page.goto(url.create)
+    await page.locator('#field-customArrayField >> .array-field__add-row').click()
+    await expect(page.locator('#field-customArrayField__0__text')).toBeVisible()
+  })
+
   // eslint-disable-next-line playwright/expect-expect
   test('should bypass min rows validation when no rows present and field is not required', async () => {
     await page.goto(url.create)
@@ -313,7 +319,7 @@ describe('Array', () => {
   test('should externally update array rows and render custom fields', async () => {
     await page.goto(url.create)
     await page.locator('#updateArrayExternally').click()
-    await expect(page.locator('#custom-field')).toBeVisible()
+    await expect(page.locator('#custom-text-field')).toBeVisible()
   })
 
   test('should not re-close initCollapsed true array rows on input in create new view', async () => {

test/fields/collections/Array/index.ts

@@ -194,16 +194,31 @@ const ArrayFields: CollectionConfig = {
       type: 'array',
       fields: [
         {
-          name: 'customField',
+          name: 'customTextField',
           type: 'ui',
           admin: {
             components: {
-              Field: '/collections/Array/CustomField.js#CustomField',
+              Field: '/collections/Array/CustomTextField.js#CustomTextField',
             },
           },
         },
       ],
     },
+    {
+      name: 'customArrayField',
+      type: 'array',
+      admin: {
+        components: {
+          Field: '/collections/Array/CustomArrayField.js#CustomArrayField',
+        },
+      },
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+        },
+      ],
+    },
     {
       name: 'ui',
       type: 'ui',