fix(ui): renders custom row labels

test/fields/collections/Collapsible/CustomLabel/getCustomLabel.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { CustomLabelComponent } from './index.js'
+
+export const getCustomLabel = ({
+  fallback,
+  path,
+  style,
+}: {
+  fallback?: string
+  path: string
+  style: React.CSSProperties
+}) => {
+  return <CustomLabelComponent fallback={fallback} path={path} style={style} />
+}

test/fields/collections/Collapsible/CustomLabel/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import React from 'react'
+
+export const CustomLabelComponent: React.FC<{
+  fallback?: string
+  path: string
+  style?: React.CSSProperties
+}> = ({
+  fallback = 'Untitled',
+  path,
+  style = {
+    color: 'hotpink',
+    textTransform: 'uppercase',
+  },
+}) => {
+  const { data } = useRowLabel()
+
+  return <div style={style}>{data?.[path] || fallback}</div>
+}

test/fields/collections/Collapsible/LabelComponent.tsx

@@ -1,11 +0,0 @@
-import type { RowLabelComponent } from 'payload/types'
-
-import React from 'react'
-
-export const CollapsibleLabelComponent: RowLabelComponent = ({ data }) => {
-  return (
-    <div style={{ color: 'hotpink', textTransform: 'uppercase' }}>
-      {data.innerCollapsible || 'Untitled'}
-    </div>
-  )
-}

test/fields/collections/Collapsible/index.ts

@@ -1,7 +1,8 @@
 import type { CollectionConfig } from 'payload/types'
 
 import { collapsibleFieldsSlug } from '../../slugs.js'
-import { CollapsibleLabelComponent } from './LabelComponent.js'
+import { getCustomLabel } from './CustomLabel/getCustomLabel.js'
+import { CustomLabelComponent } from './CustomLabel/index.js'
 
 const CollapsibleFields: CollectionConfig = {
   slug: collapsibleFieldsSlug,
@@ -77,7 +78,12 @@ const CollapsibleFields: CollectionConfig = {
       ],
     },
     {
-      label: ({ data }) => data.functionTitleField || 'Custom Collapsible Label',
+      label: () =>
+        getCustomLabel({
+          path: 'functionTitleField',
+          fallback: 'Custom Collapsible Label',
+          style: {},
+        }),
       type: 'collapsible',
       admin: {
         description: 'Collapsible label rendered from a function.',
@@ -91,7 +97,7 @@ const CollapsibleFields: CollectionConfig = {
       ],
     },
     {
-      label: ({ data }) => data?.componentTitleField || 'Untitled',
+      label: () => getCustomLabel({ path: 'componentTitleField', style: {} }),
       type: 'collapsible',
       admin: {
         description: 'Collapsible label rendered as a react component.',
@@ -103,7 +109,8 @@ const CollapsibleFields: CollectionConfig = {
         },
         {
           type: 'collapsible',
-          label: ({ data }) => data?.nestedTitle || 'Nested Collapsible',
+          label: () =>
+            getCustomLabel({ path: 'nestedTitle', fallback: 'Nested Collapsible', style: {} }),
           fields: [
             {
               type: 'text',
@@ -118,7 +125,7 @@ const CollapsibleFields: CollectionConfig = {
       type: 'array',
       fields: [
         {
-          label: CollapsibleLabelComponent,
+          label: CustomLabelComponent,
           type: 'collapsible',
           fields: [
             {