Change renderExtraExportMenuItems to an array of ReactNodes (#1205)

* Change renderExtraExportMenuItems from a ReactNode to an array of ReactNodes

* update typing and extramenuitem rendering

* remove useless import

frontend/src/components/CrossSearch/CrossSearchTable.tsx

@@ -16,7 +16,6 @@ import {
   exportOccurrenceMapSvg,
   getUniqueCrossSearchMapExportLocalities,
 } from '@/components/Species/localitySpeciesMapExport'
-import { Box } from '@mui/material'
 
 const LocalitiesMap = lazy(async () => {
   const module = await import('../Map/LocalitiesMap')
@@ -1119,13 +1118,11 @@ export const CrossSearchTable = ({ selectorFn }: { selectorFn?: (newObject: Cros
         svgExport={svgExport}
         isError={isError}
         error={error}
-        renderExtraExportMenuItems={handleClose => (
-          <Box>
-            <OccurrenceDwcExportMenuItem handleClose={handleClose} />
-            <OccurrenceDwcDpExportMenuItem handleClose={handleClose} />
-            <OccurrenceFullDarwinCoreExportMenuItem handleClose={handleClose} />
-          </Box>
-        )}
+        renderExtraExportMenuItems={[
+          handleClose => <OccurrenceDwcExportMenuItem handleClose={handleClose} />,
+          handleClose => <OccurrenceDwcDpExportMenuItem handleClose={handleClose} />,
+          handleClose => <OccurrenceFullDarwinCoreExportMenuItem handleClose={handleClose} />,
+        ]}
       />
     </>
   )

frontend/src/components/Locality/LocalityTable.tsx

@@ -522,7 +522,7 @@ export const LocalityTable = ({ selectorFn }: { selectorFn?: (newObject: Localit
         url="locality"
         kmlExport={kmlExport}
         svgExport={svgExport}
-        renderExtraExportMenuItems={handleClose => <LocalityDwcExportMenuItem handleClose={handleClose} />}
+        renderExtraExportMenuItems={[handleClose => <LocalityDwcExportMenuItem handleClose={handleClose} />]}
         enableColumnFilterModes={true}
         tableRowAction={handleLocalityRowActionClick}
       />

frontend/src/components/Species/SpeciesTable.tsx

@@ -567,7 +567,7 @@ export const SpeciesTable = ({ selectorFn }: { selectorFn?: (id: Species) => voi
         tableRowAction={handleSpeciesRowActionClick}
         filterFns={synonymFilterFns}
         renderRowActionExtras={renderCommentAction}
-        renderExtraExportMenuItems={handleClose => <SpeciesDwcExportMenuItem handleClose={handleClose} />}
+        renderExtraExportMenuItems={[handleClose => <SpeciesDwcExportMenuItem handleClose={handleClose} />]}
       />
       <SpeciesCommentDialog
         open={commentModalOpen}

frontend/src/components/TableView/TableToolBar.tsx

@@ -5,7 +5,7 @@ import { ContactForm } from '../DetailView/common/ContactForm'
 import FileDownloadIcon from '@mui/icons-material/FileDownload'
 import ViewColumnIcon from '@mui/icons-material/ViewColumn'
 import '../../styles/TableToolBar.css'
-import { useState, type ReactNode } from 'react'
+import { Fragment, useState, type ReactNode } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import { CrossSearchExportMenuItem } from '../CrossSearch/CrossSearchExportMenuItem'
@@ -50,7 +50,7 @@ export const TableToolBar = <T extends MRT_RowData>({
   showNewButton?: boolean
   hideLeftButtons?: boolean
   columnVisibilityGroups?: ColumnVisibilityGroup[]
-  renderExtraExportMenuItems?: (handleClose: () => void) => ReactNode
+  renderExtraExportMenuItems?: ((handleClose: () => void) => ReactNode)[]
 }) => {
   const { previousTableUrls, setPreviousTableUrls } = usePageContext<T>()
   const { notify, setMessage: setNotificationMessage } = useNotify()
@@ -317,7 +317,11 @@ export const TableToolBar = <T extends MRT_RowData>({
             </MenuItem>
           )}
 
-          {renderExtraExportMenuItems ? renderExtraExportMenuItems(handleClose) : null}
+          {renderExtraExportMenuItems
+            ? renderExtraExportMenuItems.map((renderFn, index) => (
+                <Fragment key={index}>{renderFn(handleClose)}</Fragment>
+              ))
+            : null}
 
           {kmlExport && (
             <MenuItem

frontend/src/components/TableView/TableView.tsx

@@ -232,7 +232,7 @@ export const TableView = <T extends MRT_RowData>({
   error?: FetchBaseQueryError | SerializedError
   filterFns?: Record<string, MRT_FilterFn<T>>
   renderRowActionExtras?: ({ row }: { row: MRT_Row<T> }) => ReactNode
-  renderExtraExportMenuItems?: (handleClose: () => void) => ReactNode
+  renderExtraExportMenuItems?: ((handleClose: () => void) => ReactNode)[]
   paginationPlacement?: 'top' | 'bottom' | 'both'
   tableContainerMaxHeight?: string | number
   columnVisibilityGroups?: ColumnVisibilityGroup[]