fix: expose server and client props to custom list slot components (#9159)

### What?
Adds `serverProps` and `clientProps` to custom list view slot
components.

### Why?
They were missing and should be exposed.

### How?
Created custom types for list slot components and threads them through
into `renderListSlots` function and passes them through to each
`RenderServerComponent` that renders list view slot components.

Author: JarrodMFlesch

packages/next/src/views/List/index.tsx

@@ -1,4 +1,9 @@
-import type { ListPreferences, ListViewClientProps } from '@payloadcms/ui'
+import type {
+  ListComponentClientProps,
+  ListComponentServerProps,
+  ListPreferences,
+  ListViewClientProps,
+} from '@payloadcms/ui'
 import type { AdminViewProps, ListQuery, Where } from 'payload'
 
 import { DefaultListView, HydrateAuthProvider, ListQueryProvider } from '@payloadcms/ui'
@@ -168,25 +173,43 @@ export const renderListView = async (
         ? collectionConfig.admin.description({ t: i18n.t })
         : collectionConfig.admin.description
 
+    const sharedClientProps: ListComponentClientProps = {
+      collectionSlug,
+      hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
+      newDocumentURL: formatAdminURL({
+        adminRoute,
+        path: `/collections/${collectionSlug}/create`,
+      }),
+    }
+
+    const sharedServerProps: ListComponentServerProps = {
+      collectionConfig,
+      i18n,
+      limit,
+      locale: fullLocale,
+      params,
+      payload,
+      permissions,
+      searchParams,
+      user,
+    }
+
     const listViewSlots = renderListViewSlots({
+      clientProps: sharedClientProps,
       collectionConfig,
       description: staticDescription,
       payload,
+      serverProps: sharedServerProps,
     })
 
     const clientProps: ListViewClientProps = {
       ...listViewSlots,
-      collectionSlug,
+      ...sharedClientProps,
       columnState,
       disableBulkDelete,
       disableBulkEdit,
       enableRowSelections,
-      hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
       listPreferences,
-      newDocumentURL: formatAdminURL({
-        adminRoute,
-        path: `/collections/${collectionSlug}/create`,
-      }),
       renderedFilters,
       Table,
     }
@@ -211,19 +234,10 @@ export const renderListView = async (
               Fallback={DefaultListView}
               importMap={payload.importMap}
               serverProps={{
-                collectionConfig,
-                collectionSlug,
+                ...sharedServerProps,
                 data,
-                i18n,
-                limit,
                 listPreferences,
                 listSearchableFields: collectionConfig.admin.listSearchableFields,
-                locale: fullLocale,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user,
               }}
             />
           </ListQueryProvider>

packages/next/src/views/List/renderListViewSlots.tsx

@@ -1,51 +1,68 @@
-import type { ListViewSlots } from '@payloadcms/ui'
+import type {
+  ListComponentClientProps,
+  ListComponentServerProps,
+  ListViewSlots,
+} from '@payloadcms/ui'
 import type { Payload, SanitizedCollectionConfig, StaticDescription } from 'payload'
 
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 
+type Args = {
+  clientProps: ListComponentClientProps
+  collectionConfig: SanitizedCollectionConfig
+  description?: StaticDescription
+  payload: Payload
+  serverProps: ListComponentServerProps
+}
 export const renderListViewSlots = ({
+  clientProps,
   collectionConfig,
   description,
   payload,
-}: {
-  collectionConfig: SanitizedCollectionConfig
-  description?: StaticDescription
-  payload: Payload
-}): ListViewSlots => {
+  serverProps,
+}: Args): ListViewSlots => {
   const result: ListViewSlots = {} as ListViewSlots
 
   if (collectionConfig.admin.components?.afterList) {
     result.AfterList = (
       <RenderServerComponent
+        clientProps={clientProps}
         Component={collectionConfig.admin.components.afterList}
         importMap={payload.importMap}
+        serverProps={serverProps}
       />
     )
   }
 
   if (collectionConfig.admin.components?.afterListTable) {
     result.AfterListTable = (
       <RenderServerComponent
+        clientProps={clientProps}
         Component={collectionConfig.admin.components.afterListTable}
         importMap={payload.importMap}
+        serverProps={serverProps}
       />
     )
   }
 
   if (collectionConfig.admin.components?.beforeList) {
     result.BeforeList = (
       <RenderServerComponent
+        clientProps={clientProps}
         Component={collectionConfig.admin.components.beforeList}
         importMap={payload.importMap}
+        serverProps={serverProps}
       />
     )
   }
 
   if (collectionConfig.admin.components?.beforeListTable) {
     result.BeforeListTable = (
       <RenderServerComponent
+        clientProps={clientProps}
         Component={collectionConfig.admin.components.beforeListTable}
         importMap={payload.importMap}
+        serverProps={serverProps}
       />
     )
   }
@@ -55,9 +72,11 @@ export const renderListViewSlots = ({
       <RenderServerComponent
         clientProps={{
           description,
+          ...clientProps,
         }}
         Component={collectionConfig.admin.components.Description}
         importMap={payload.importMap}
+        serverProps={serverProps}
       />
     )
   }

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

@@ -272,7 +272,11 @@ export {
   type ListViewClientProps,
   type ListViewSlots,
 } from '../../views/List/index.js'
-export type { ListPreferences } from '../../views/List/types.js'
+export type {
+  ListComponentClientProps,
+  ListComponentServerProps,
+  ListPreferences,
+} from '../../views/List/types.js'
 
 export { DefaultEditView } from '../../views/Edit/index.js'
 export { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js'

packages/ui/src/views/List/types.ts

@@ -1,4 +1,12 @@
-import type { SanitizedCollectionConfig } from 'payload'
+import type { I18n } from '@payloadcms/translations'
+import type {
+  AdminViewProps,
+  Locale,
+  Payload,
+  Permissions,
+  SanitizedCollectionConfig,
+  User,
+} from 'payload'
 
 import type { ColumnPreferences } from '../../providers/ListQuery/index.js'
 
@@ -16,3 +24,21 @@ export type ListPreferences = {
   limit: number
   sort: string
 }
+
+export type ListComponentClientProps = {
+  collectionSlug: SanitizedCollectionConfig['slug']
+  hasCreatePermission: boolean
+  newDocumentURL: string
+}
+
+export type ListComponentServerProps = {
+  collectionConfig: SanitizedCollectionConfig
+  i18n: I18n
+  limit: number
+  locale: Locale
+  params: AdminViewProps['params']
+  payload: Payload
+  permissions: Permissions
+  searchParams: AdminViewProps['searchParams']
+  user: User
+}