fix(ui): ensures row label context exists for collapsible fields (#5416)

packages/next/src/views/Edit/Default/Auth/APIKey.tsx

@@ -89,7 +89,7 @@ export const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
   return (
     <React.Fragment>
       <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>
-        <FieldLabel htmlFor={path} label={APIKeyLabel} />
+        <FieldLabel CustomLabel={APIKeyLabel} htmlFor={path} />
         <input
           className={highlightedField ? 'highlight' : undefined}
           disabled

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

@@ -1,6 +1,6 @@
 export type LabelProps = {
   CustomLabel?: React.ReactNode
   htmlFor?: string
-  label?: JSX.Element | Record<string, string> | false | string
+  label?: Record<string, string> | false | string
   required?: boolean
 }

packages/ui/src/fields/Collapsible/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { DocumentPreferences, RowLabel } from 'payload/types'
+import type { DocumentPreferences, RowLabel as RowLabelType } from 'payload/types'
 
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
@@ -7,6 +7,7 @@ import { Collapsible as CollapsibleElement } from '../../elements/Collapsible/in
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'
+import { RowLabel } from '../../forms/RowLabel/index.js'
 import { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
@@ -20,7 +21,6 @@ const baseClass = 'collapsible-field'
 import type { FieldPermissions } from 'payload/auth'
 
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared/index.js'
@@ -29,7 +29,6 @@ export type CollapsibleFieldProps = FormFieldBase & {
   fieldMap: FieldMap
   indexPath: string
   initCollapsed?: boolean
-  label?: RowLabel
   permissions: FieldPermissions
   width?: string
 }
@@ -124,7 +123,12 @@ const CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
           collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
           header={
             <div className={`${baseClass}__row-label-wrap`}>
-              <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
+              <RowLabel
+                RowLabelComponent={CustomLabel}
+                i18n={i18n}
+                path={path}
+                rowLabel={labelProps.label}
+              />
               {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
             </div>
           }

packages/ui/src/forms/RowLabel/index.tsx

@@ -18,7 +18,13 @@ export const RowLabel: React.FC<Props> = (props) => {
     )
   }
 
-  const label = typeof rowLabel === 'object' ? getTranslation(rowLabel, i18n) : rowLabel
+  const label = rowLabel
+    ? typeof rowLabel === 'object'
+      ? getTranslation(rowLabel, i18n)
+      : typeof rowLabel === 'string'
+        ? rowLabel
+        : ''
+    : ''
 
   return (
     <span

packages/ui/src/forms/RowLabel/types.ts

@@ -1,5 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
-import type { RowLabel, RowLabelComponent } from 'payload/types'
+import type { LabelProps, RowLabel, RowLabelComponent } from 'payload/types'
 
 import React from 'react'
 
@@ -8,7 +8,7 @@ export type Props = {
   className?: string
   i18n: I18n
   path: string
-  rowLabel?: Record<string, string> | string
+  rowLabel?: LabelProps['label']
   rowNumber?: number
 }
 

packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx

@@ -87,7 +87,12 @@ export const mapFields = (args: {
         }`
 
         const labelProps: LabelProps = {
-          label: 'label' in field && typeof field.label !== 'function' ? field.label : null,
+          label:
+            'label' in field &&
+            (typeof field.label !== 'function' ||
+              (typeof field.label === 'object' && isPlainObject(field.label)))
+              ? field.label
+              : undefined,
           required: 'required' in field ? field.required : undefined,
         }
 

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

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

test/fields/collections/Collapsible/index.ts

@@ -2,7 +2,7 @@ import type { CollectionConfig } from 'payload/types'
 
 import { collapsibleFieldsSlug } from '../../slugs.js'
 import { getCustomLabel } from './CustomLabel/getCustomLabel.js'
-import { CustomLabelComponent } from './CustomLabel/index.js'
+import { NestedCustomLabel } from './NestedCustomLabel/index.js'
 
 const CollapsibleFields: CollectionConfig = {
   slug: collapsibleFieldsSlug,
@@ -125,7 +125,7 @@ const CollapsibleFields: CollectionConfig = {
       type: 'array',
       fields: [
         {
-          label: CustomLabelComponent,
+          label: NestedCustomLabel,
           type: 'collapsible',
           fields: [
             {

tsconfig.json

@@ -154,4 +154,4 @@
     ".next/types/**/*.ts",
     "scripts/**/*.ts"
   ]
-}
+}