feat: allow passing false as PayloadComponent which signals that the component should not be rendered (#7682)

If it's undefined/null => Fallback Component may be rendered
If it's false => No component should be rendered - as if an empty
component was passed in

This ensures that the user does not have to install `@payloadcms/ui`
anymore, which previously exported an empty component to be used in
component paths

Author: AlessioGr

packages/payload/src/admin/types.ts

@@ -227,8 +227,13 @@ export type MappedClientComponent<TComponentClientProps extends JsonObject = Jso
   type: 'client'
 }
 
+export type MappedEmptyComponent = {
+  type: 'empty'
+}
+
 export type MappedComponent<TComponentClientProps extends JsonObject = JsonObject> =
   | MappedClientComponent<TComponentClientProps>
+  | MappedEmptyComponent
   | MappedServerComponent<TComponentClientProps>
   | undefined
 

packages/payload/src/auth/baseFields/apiKey.ts

@@ -13,7 +13,7 @@ export const apiKeyFields = [
     type: 'checkbox',
     admin: {
       components: {
-        Field: '@payloadcms/ui/shared#emptyComponent',
+        Field: false,
       },
     },
     label: ({ t }) => t('authentication:enableAPIKey'),
@@ -23,7 +23,7 @@ export const apiKeyFields = [
     type: 'text',
     admin: {
       components: {
-        Field: '@payloadcms/ui/shared#emptyComponent',
+        Field: false,
       },
     },
     hooks: {

packages/payload/src/auth/baseFields/email.ts

@@ -7,7 +7,7 @@ export const emailFieldConfig: EmailField = {
   type: 'email',
   admin: {
     components: {
-      Field: '@payloadcms/ui/shared#emptyComponent',
+      Field: false,
     },
   },
   hooks: {

packages/payload/src/auth/baseFields/username.ts

@@ -7,7 +7,7 @@ export const usernameFieldConfig: TextField = {
   type: 'text',
   admin: {
     components: {
-      Field: '@payloadcms/ui/shared#emptyComponent',
+      Field: false,
     },
   },
   hooks: {

packages/payload/src/auth/baseFields/verification.ts

@@ -26,7 +26,7 @@ export const verificationFields: Field[] = [
     },
     admin: {
       components: {
-        Field: '@payloadcms/ui/shared#emptyComponent',
+        Field: false,
       },
     },
     label: ({ t }) => t('authentication:verified'),

packages/payload/src/bin/generateImportMap/parsePayloadComponent.ts

@@ -4,6 +4,9 @@ export function parsePayloadComponent(payloadComponent: PayloadComponent): {
   exportName: string
   path: string
 } {
+  if (!payloadComponent) {
+    return null
+  }
   const pathAndMaybeExport =
     typeof payloadComponent === 'string' ? payloadComponent : payloadComponent.path
 

packages/payload/src/config/types.ts

@@ -13,7 +13,7 @@ import type { default as sharp } from 'sharp'
 import type { DeepRequired } from 'ts-essentials'
 
 import type { RichTextAdapterProvider } from '../admin/RichText.js'
-import type { DocumentTabConfig, MappedComponent, RichTextAdapter } from '../admin/types.js'
+import type { DocumentTabConfig, RichTextAdapter } from '../admin/types.js'
 import type { AdminViewConfig, ServerSideEditViewProps } from '../admin/views/types.js'
 import type { Permissions } from '../auth/index.js'
 import type {
@@ -38,12 +38,12 @@ import type { PayloadLogger } from '../utilities/logger.js'
 /**
  * The string path pointing to the React component. If one of the generics is `never`, you effectively mark it as a server-only or client-only component.
  *
- * If the path is an empty string, it will be treated as () => null
+ * If it is `false` an empty component will be rendered.
  */
 export type PayloadComponent<
   TComponentServerProps extends never | object = Record<string, any>,
   TComponentClientProps extends never | object = Record<string, any>,
-> = RawPayloadComponent<TComponentServerProps, TComponentClientProps> | string
+> = RawPayloadComponent<TComponentServerProps, TComponentClientProps> | false | string
 
 // We need the actual object as its own type, otherwise the infers for the PayloadClientReactComponent / PayloadServerReactComponent will not work due to the string union.
 // We also NEED to actually use those generics for this to work, thus they are part of the props.

packages/payload/src/versions/baseFields.ts

@@ -17,7 +17,7 @@ const baseVersionFields: Field[] = [
     type: 'select',
     admin: {
       components: {
-        Field: '@payloadcms/ui/shared#emptyComponent',
+        Field: false,
       },
       disableBulkEdit: true,
     },

packages/richtext-slate/src/field/elements/textAlign/index.tsx

@@ -3,5 +3,5 @@ import type { RichTextCustomElement } from '../../../types.js'
 export const textAlign: RichTextCustomElement = {
   name: 'alignment',
   Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',
-  Element: '@payloadcms/ui/shared#emptyComponent',
+  Element: false,
 }

packages/ui/src/exports/shared/index.ts

@@ -21,5 +21,3 @@ export {
 } from '../../utilities/groupNavItems.js'
 export { hasSavePermission } from '../../utilities/hasSavePermission.js'
 export { isEditing } from '../../utilities/isEditing.js'
-
-export const emptyComponent = () => null