feat: WIP tab compatible with traverseFields

test/fields/collections/Tabs/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import type { CollectionConfig } from '../../../../src/collections/config/types';
 import { blocksField, blocksFieldSeedData } from '../Blocks';
 import { UIField } from './UIField';
@@ -10,6 +11,9 @@ export const localizedTextValue = 'localized text';
 
 const TabsFields: CollectionConfig = {
   slug: tabsSlug,
+  access: {
+    read: () => true,
+  },
   versions: true,
   fields: [
     {
@@ -148,27 +152,74 @@ const TabsFields: CollectionConfig = {
           description: 'This tab is localized and requires a name',
           fields: [
             {
-              name: 'array',
-              labels: {
-                singular: 'Item',
-                plural: 'Items',
-              },
-              type: 'array',
-              required: true,
-              fields: [
-                {
-                  name: 'text',
-                  type: 'text',
-                  required: true,
-                },
-              ],
+              name: 'text',
+              type: 'text',
             },
+          ],
+        },
+        {
+          name: 'accessControlTab',
+          label: 'Access Control Tab',
+          access: {
+            read: () => false,
+          },
+          description: 'This tab is cannot be read',
+          fields: [
             {
               name: 'text',
               type: 'text',
             },
           ],
         },
+        {
+          name: 'hooksTab',
+          label: 'Hooks Tab',
+          hooks: {
+            beforeValidate: [
+              ({ data }) => {
+                data.hooksTab.beforeValidate = true;
+                return data.hooksTab;
+              },
+            ],
+            beforeChange: [
+              ({ data }) => {
+                data.hooksTab.beforeChange = true;
+                return data.hooksTab;
+              },
+            ],
+            afterChange: [
+              ({ data }) => {
+                data.hooksTab.afterChange = true;
+                return data.hooksTab;
+              },
+            ],
+            afterRead: [
+              ({ data }) => {
+                data.hooksTab.afterRead = true;
+                return data.hooksTab;
+              },
+            ],
+          },
+          description: 'This tab has hooks',
+          fields: [
+            {
+              name: 'beforeValidate',
+              type: 'checkbox',
+            },
+            {
+              name: 'beforeChange',
+              type: 'checkbox',
+            },
+            {
+              name: 'afterChange',
+              type: 'checkbox',
+            },
+            {
+              name: 'afterRead',
+              type: 'checkbox',
+            },
+          ],
+        },
       ],
     },
     {
@@ -250,20 +301,19 @@ export const tabsDoc = {
     ],
     text: namedTabText,
   },
+  text: 'localized',
   localizedTab: {
-    array: [
-      {
-        text: "Hello, I'm the first row, in a named tab",
-      },
-      {
-        text: 'Second row here, in a named tab',
-      },
-      {
-        text: 'Here is some data for the third row, in a named tab',
-      },
-    ],
     text: localizedTextValue,
   },
+  accessControlTab: {
+    text: 'cannot be read',
+  },
+  hooksTab: {
+    beforeValidate: false,
+    beforeChange: false,
+    afterChange: false,
+    afterRead: false,
+  },
   textarea: 'Here is some text that goes in a textarea',
   anotherText: 'Super tired of writing this text',
   textInRow: 'hello',

test/fields/int.spec.ts

@@ -315,6 +315,26 @@ describe('Fields', () => {
       expect(document.localizedTab.en.text).toStrictEqual(localizedTextValue);
     });
 
+    it('should allow access control on a named tab', async () => {
+      document = await payload.findByID({
+        collection: tabsSlug,
+        id: document.id,
+        overrideAccess: false,
+      });
+      expect(document.accessControlTab).toBeUndefined();
+    });
+
+    it('should allow hooks on a named tab', async () => {
+      document = await payload.findByID({
+        collection: tabsSlug,
+        id: document.id,
+      });
+      expect(document.hooksTab.beforeValidate).toBe(true);
+      expect(document.hooksTab.beforeChange).toBe(true);
+      expect(document.hooksTab.afterChange).toBe(true);
+      expect(document.hooksTab.afterRead).toBe(true);
+    });
+
     it('should return empty object for groups when no data present', async () => {
       const doc = await payload.create<GroupField>({
         collection: groupFieldsSlug,