feat(ui): adds admin.components.listMenuItems option (#11230)

### What?
Adds new option `admin.components.listMenuItems` to allow custom
components to be injected after the existing list controls in the
collection list view.

### Why?
Needed to facilitate import/export plugin.

#### Testing

Use `pnpm dev admin` to see example component and see test added to
`test/admin/e2e/list-view`.


## Update since feature was reverted
The custom list controls and now rendered with no surrounding padding or
border radius.

<img width="596" alt="Screenshot 2025-02-17 at 5 06 44 PM"
src="https://github.com/user-attachments/assets/57209367-5433-4a4c-8797-0f9671da15c8"
/>

---------

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

Author: jessrynkar

docs/configuration/collections.mdx

@@ -44,6 +44,18 @@ export const renderListViewSlots = ({
     })
   }
 
+  const listMenuItems = collectionConfig.admin.components?.listMenuItems
+  if (Array.isArray(listMenuItems)) {
+    result.listMenuItems = [
+      RenderServerComponent({
+        clientProps,
+        Component: listMenuItems,
+        importMap: payload.importMap,
+        serverProps,
+      }),
+    ]
+  }
+
   if (collectionConfig.admin.components?.afterListTable) {
     result.AfterListTable = RenderServerComponent({
       clientProps: clientProps satisfies AfterListTableClientProps,

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

@@ -14,6 +14,7 @@ export type ListViewSlots = {
   BeforeList?: React.ReactNode
   BeforeListTable?: React.ReactNode
   Description?: React.ReactNode
+  listMenuItems?: React.ReactNode[]
   Table: React.ReactNode
 }
 

packages/payload/src/admin/views/list.ts

@@ -30,6 +30,7 @@ export function iterateCollections({
     })
 
     addToImportMap(collection.admin?.components?.afterList)
+    addToImportMap(collection.admin?.components?.listMenuItems)
     addToImportMap(collection.admin?.components?.afterListTable)
     addToImportMap(collection.admin?.components?.beforeList)
     addToImportMap(collection.admin?.components?.beforeListTable)

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

@@ -304,6 +304,7 @@ export type CollectionAdminOptions = {
        */
       Upload?: CustomUpload
     }
+    listMenuItems?: CustomComponent[]
     views?: {
       /**
        * Set to a React component to replace the entire Edit View, including all nested routes.

packages/payload/src/collections/config/types.ts

@@ -209,6 +209,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:loading',
   'general:locale',
   'general:menu',
+  'general:moreOptions',
   'general:moveDown',
   'general:moveUp',
   'general:next',

packages/translations/src/clientKeys.ts

@@ -266,6 +266,7 @@ export const arTranslations: DefaultTranslationsObject = {
     locale: 'اللّغة',
     locales: 'اللّغات',
     menu: 'قائمة',
+    moreOptions: 'خيارات أكثر',
     moveDown: 'التّحريك إلى الأسفل',
     moveUp: 'التّحريك إلى الأعلى',
     newPassword: 'كلمة مرور جديدة',

packages/translations/src/languages/ar.ts

@@ -270,6 +270,7 @@ export const azTranslations: DefaultTranslationsObject = {
     locale: 'Lokal',
     locales: 'Dillər',
     menu: 'Menyu',
+    moreOptions: 'Daha çox seçimlər',
     moveDown: 'Aşağı hərəkət et',
     moveUp: 'Yuxarı hərəkət et',
     newPassword: 'Yeni şifrə',

packages/translations/src/languages/az.ts

@@ -269,6 +269,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     locale: 'Локализация',
     locales: 'Локализации',
     menu: 'Меню',
+    moreOptions: 'Повече опции',
     moveDown: 'Надолу',
     moveUp: 'Нагоре',
     newPassword: 'Нова парола',

packages/translations/src/languages/bg.ts

@@ -270,6 +270,7 @@ export const caTranslations: DefaultTranslationsObject = {
     locale: 'Idioma',
     locales: 'Idiomes',
     menu: 'Menu',
+    moreOptions: 'Més opcions',
     moveDown: 'Mou avall',
     moveUp: 'Move amunt',
     newPassword: 'Nova contrasenya',