feat: converts rowHeader to collapsibleLabel, extends data passed to functions/components

test/fields/collections/Array/HeaderComponent.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { RowHeaderComponent } from '../../../../src/admin/components/forms/RowHeader/types';
+import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types';
 
-const ArrayRowHeader: RowHeaderComponent = (props) => {
-  const { value, index } = props;
-  return <React.Fragment>{value.title || `array_${index}`}</React.Fragment>;
+export const ArrayCollapsibleLabel: CollapsibleLabel = (props) => {
+  const { collapsibleData, fallback } = props;
+  return <span style={{ color: 'hotpink' }}>{collapsibleData.title || fallback}</span>;
 };
-
-export default ArrayRowHeader;

test/fields/collections/Array/index.ts

@@ -1,6 +1,5 @@
-import { RowHeaderFunction } from '../../../../src/admin/components/forms/RowHeader/types';
 import type { CollectionConfig } from '../../../../src/collections/config/types';
-import HeaderComponent from './HeaderComponent';
+import { ArrayCollapsibleLabel } from './HeaderComponent';
 
 export const arrayDefaultValue = [
   { text: 'row one' },
@@ -86,7 +85,7 @@ const ArrayFields: CollectionConfig = {
     },
     {
       type: 'array',
-      name: 'arrayWithRowHeaderFunction',
+      name: 'collapsibleLabelAsFunction',
       fields: [
         {
           name: 'title',
@@ -94,14 +93,15 @@ const ArrayFields: CollectionConfig = {
         },
       ],
       admin: {
+        description: 'Collapsible labels rendered from a function.',
         components: {
-          RowHeader: ({ value, index }) => value.title || `item ${index}`,
+          CollapsibleLabel: ({ collapsibleData, fallback }) => collapsibleData.title || fallback,
         },
       },
     },
     {
       type: 'array',
-      name: 'arrayWithRowHeaderComponent',
+      name: 'rowHeaderAsComponent',
       fields: [
         {
           name: 'title',
@@ -109,8 +109,9 @@ const ArrayFields: CollectionConfig = {
         },
       ],
       admin: {
+        description: 'Collapsible labels rendered as components.',
         components: {
-          RowHeader: HeaderComponent,
+          CollapsibleLabel: ArrayCollapsibleLabel,
         },
       },
     },

test/fields/collections/Collapsible/HeaderComponent.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { RowHeaderComponent } from '../../../../src/admin/components/forms/RowHeader/types';
+import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types';
 
-const ArrayRowHeader: RowHeaderComponent = (props) => {
-  const { value } = props;
-  return <React.Fragment>{value.title || 'enter title'}</React.Fragment>;
+export const CollapsibleLabelComponent: CollapsibleLabel = (props) => {
+  const { collapsibleData, fallback } = props;
+  return <span style={{ color: 'coral' }}>{collapsibleData.componentTitleField || fallback}</span>;
 };
-
-export default ArrayRowHeader;

test/fields/collections/Collapsible/index.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from '../../../../src/collections/config/types';
+import { CollapsibleLabelComponent } from './HeaderComponent';
 
 const CollapsibleFields: CollectionConfig = {
   slug: 'collapsible-fields',
@@ -74,35 +75,35 @@ const CollapsibleFields: CollectionConfig = {
       ],
     },
     {
-      label: 'Collapsible Field - RowHeaderFunction',
+      label: 'Collapsible Header Function',
       type: 'collapsible',
       admin: {
-        description: 'This is a collapsible field.',
+        description: 'Collapsible label rendered from a function.',
         initCollapsed: true,
         components: {
-          RowHeader: ({ value }) => value.title1 || 'untitled',
+          CollapsibleLabel: ({ collapsibleData }) => collapsibleData.functionTitleField || 'Untitled',
         },
       },
       fields: [
         {
-          name: 'title1',
+          name: 'functionTitleField',
           type: 'text',
         },
       ],
     },
     {
-      label: 'Collapsible Field - RowHeaderComponent',
+      label: 'Collapsible Header Component',
       type: 'collapsible',
       admin: {
-        description: 'This is a collapsible field.',
+        description: 'Collapsible label rendered as a react component.',
         initCollapsed: true,
         components: {
-          RowHeader: ({ value }) => value.title2 || 'untitled',
+          CollapsibleLabel: CollapsibleLabelComponent,
         },
       },
       fields: [
         {
-          name: 'title2',
+          name: 'componentTitleField',
           type: 'text',
         },
       ],