[Fix] Update BulkActionsToolbar to accept a Component Type as selectAllButton prop

Author: slax57

packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx

@@ -3,6 +3,7 @@ import {
     isValidElement,
     type ReactElement,
     type ReactNode,
+    type ElementType,
     useCallback,
 } from 'react';
 import {
@@ -80,7 +81,9 @@ export const BulkActionsToolbar = (inProps: BulkActionsToolbarProps) => {
                     {selectAllButton !== false
                         ? isValidElement(selectAllButton)
                             ? selectAllButton
-                            : defaultSelectAllButton
+                            : typeof selectAllButton === 'function'
+                              ? React.createElement(selectAllButton)
+                              : defaultSelectAllButton
                         : null}
                 </div>
                 <TopToolbar className={BulkActionsToolbarClasses.topToolbar}>
@@ -95,7 +98,7 @@ export interface BulkActionsToolbarProps {
     children?: ReactNode;
     label?: string;
     className?: string;
-    selectAllButton?: ReactElement | false;
+    selectAllButton?: ReactElement | ElementType | false;
 }
 
 const PREFIX = 'RaBulkActionsToolbar';

packages/ra-ui-materialui/src/list/List.stories.tsx

@@ -30,7 +30,10 @@ import { Link } from 'react-router-dom';
 import { BulkDeleteButton, ListButton, SelectAllButton } from '../button';
 import { ShowGuesser } from '../detail';
 import TopToolbar from '../layout/TopToolbar';
-import { BulkActionsToolbar } from './BulkActionsToolbar';
+import {
+    BulkActionsToolbar,
+    BulkActionsToolbarProps,
+} from './BulkActionsToolbar';
 import { defaultLightTheme } from '../theme';
 import { onlineManager } from '@tanstack/react-query';
 import { deepmerge } from '@mui/utils';
@@ -543,7 +546,7 @@ export const Default = ({
 }: {
     dataProvider?: DataProvider;
     children?: React.ReactNode;
-    selectAllButton?: React.ReactElement;
+    selectAllButton?: BulkActionsToolbarProps['selectAllButton'];
 }) => (
     <TestMemoryRouter initialEntries={['/books']}>
         <Admin dataProvider={dataProvider}>
@@ -590,6 +593,20 @@ export const SelectAllLimit = ({
     </Default>
 );
 
+const MySelectAllButton = () => <SelectAllButton limit={11} />;
+
+export const SelectAllAsComponent = ({
+    dataProvider,
+    children,
+}: {
+    dataProvider?: DataProvider;
+    children?: React.ReactNode;
+}) => (
+    <Default selectAllButton={MySelectAllButton} dataProvider={dataProvider}>
+        {children}
+    </Default>
+);
+
 const NewerBooks = () => (
     <List
         resource="books"