update the bulkActionsToolbar implementation

Author: erwanMarmelab

docs/Buttons.md

@@ -964,7 +964,7 @@ The `<SelectAllButton>` component allows users to select all items from a resour
 
 ## Usage
 
-By default, react-admin's `<Datagrid>` displays a `<SelectAllButton>` in their List view action toolbar. You can custom it by specifying your own [`selectAllButton`](./Datagrid.md#selectallbutton):
+By default, react-admin's `<Datagrid>` displays a `<SelectAllButton>` in their `bulkActionsToolbar`. You can custom it by specifying your own `selectAllButton`:
 
 {% raw %}
 
@@ -980,7 +980,13 @@ const PostSelectAllButton = () => (
 
 export const PostList = () => (
     <List>
-        <Datagrid selectAllButton={<PostSelectAllButton />}>
+        <Datagrid
+            bulkActionsToolbar={
+                <BulkActionsToolbar selectAllButton={PostSelectAllButton}>
+                    <BulkDeleteButton />
+                </BulkActionsToolbar>
+            }
+        >
             ...
         </Datagrid>
     </List>
@@ -1012,9 +1018,11 @@ const PostSelectAllButton = () => <SelectAllButton limit={100} />;
 `<SelectAllButton>` calls a `get` method of your `dataProvider` via a react-query's `useQuery` hook. You can customize the options you pass to this hook, e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the call.
 
 {% raw %}
+
 ```jsx
 const PostSelectAllButton = () => <SelectAllButton queryOptions={{ meta: { foo: 'bar' } }} />;
 ```
+
 {% endraw %}
 
 ### `sx`: CSS API

docs/Datagrid.md

@@ -61,7 +61,6 @@ Both are [Enterprise Edition](https://react-admin-ee.marmelab.com) components.
 | `rowClick`           | Optional | mixed                   |                       | The action to trigger when the user clicks on a row.          |
 | `rowStyle`           | Optional | Function                |                       | A function that returns the style to apply to a row.          |
 | `rowSx`              | Optional | Function                |                       | A function that returns the sx prop to apply to a row.        |
-| `selectAllButton`    | Optional | Element or  `false`     |                       | The button used to select all records.                        |
 | `size`               | Optional | `'small'` or `'medium'` | `'small'`             | The size of the table.                                        |
 | `sx`                 | Optional | Object                  |                       | The sx prop passed down to the Material UI `<Table>` element. |
 
@@ -374,38 +373,6 @@ const CustomResetViewsButton = () => {
 };
 ```
 
-## `selectAllButton`
-
-You can use the `selectAllButton` prop to customize the default [`<SelectAllButton>`](./Buttons.md#selectallbutton) displayed in the bulk action toolbar when at least one row is selected.
-
-```tsx
-import { List, Datagrid, SelectAllButton } from 'react-admin';
-
-const PostSelectAllButton = () => <SelectAllButton label="Select all records" />
-
-export const PostList = () => (
-    <List>
-        <Datagrid selectAllButton={<PostSelectAllButton />}>
-            ...
-        </Datagrid>
-    </List>
-);
-```
-
-You disable this feature by setting the `selectAllButton` prop to `false`:
-
-```tsx
-import { Datagrid, List } from 'react-admin';
-
-export const PostList = () => (
-    <List>
-        <Datagrid selectAllButton={false}>
-            ...
-        </Datagrid>
-    </List>
-);
-```
-
 ## `children`
 
 `<Datagrid>` accepts a list of Field components as children. It inspects each child's `source` and/or `label` props to determine the name of the column.

packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx

@@ -32,6 +32,7 @@ import { List } from '../List';
 import { EditGuesser } from '../../detail';
 import { DatagridRowProps } from './DatagridRow';
 import DatagridBody, { DatagridBodyProps } from './DatagridBody';
+import { BulkActionsToolbar } from '../BulkActionsToolbar';
 
 export default { title: 'ra-ui-materialui/list/Datagrid' };
 
@@ -205,7 +206,13 @@ export const SelectAllButton = ({
             {(!onlyDisplay || onlyDisplay === 'disabled') && (
                 <>
                     <h1>Disabled</h1>
-                    <Datagrid selectAllButton={false}>
+                    <Datagrid
+                        bulkActionsToolbar={
+                            <BulkActionsToolbar selectAllButton={false}>
+                                <BulkDeleteButton />
+                            </BulkActionsToolbar>
+                        }
+                    >
                         <TextField source="id" />
                         <TextField source="title" />
                         <TextField source="author" />
@@ -217,8 +224,14 @@ export const SelectAllButton = ({
                 <>
                     <h1>Custom</h1>
                     <Datagrid
-                        selectAllButton={
-                            <RaSelectAllButton label="Select all records" />
+                        bulkActionsToolbar={
+                            <BulkActionsToolbar
+                                selectAllButton={
+                                    <RaSelectAllButton label="Select all records" />
+                                }
+                            >
+                                <BulkDeleteButton />
+                            </BulkActionsToolbar>
                         }
                     >
                         <TextField source="id" />

packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx

@@ -33,7 +33,6 @@ import { RowClickFunction } from '../types';
 import DatagridContextProvider from './DatagridContextProvider';
 import { DatagridClasses, DatagridRoot } from './useDatagridStyles';
 import { BulkActionsToolbar } from '../BulkActionsToolbar';
-import type { BulkActionsToolbarProps } from '../BulkActionsToolbar';
 import { BulkDeleteButton } from '../../button';
 import { ListNoResults } from '../ListNoResults';
 
@@ -45,7 +44,7 @@ const defaultBulkActionButtons = <BulkDeleteButton />;
  *
  * Props:
  *  - body
- *  - selectAllButton
+ *  - bulkActionToolbar
  *  - bulkActionButtons
  *  - children
  *  - empty
@@ -134,7 +133,7 @@ export const Datagrid: React.ForwardRefExoticComponent<
         className,
         empty = DefaultEmpty,
         expand,
-        selectAllButton,
+        bulkActionsToolbar,
         bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
         hover,
         isRowSelectable,
@@ -247,13 +246,14 @@ export const Datagrid: React.ForwardRefExoticComponent<
                     sx={sx}
                     className={clsx(DatagridClasses.root, className)}
                 >
-                    {bulkActionButtons !== false ? (
-                        <BulkActionsToolbar selectAllButton={selectAllButton}>
-                            {isValidElement(bulkActionButtons)
-                                ? bulkActionButtons
-                                : defaultBulkActionButtons}
-                        </BulkActionsToolbar>
-                    ) : null}
+                    {bulkActionsToolbar ??
+                        (bulkActionButtons !== false ? (
+                            <BulkActionsToolbar>
+                                {isValidElement(bulkActionButtons)
+                                    ? bulkActionButtons
+                                    : defaultBulkActionButtons}
+                            </BulkActionsToolbar>
+                        ) : null)}
                     <div className={DatagridClasses.tableWrapper}>
                         <Table
                             ref={ref}
@@ -321,21 +321,26 @@ export interface DatagridProps<RecordType extends RaRecord = any>
     className?: string;
 
     /**
-     * The button used to select all records.
+     * The component used to render the bulk actions toolbar.
      *
-     * @see https://marmelab.com/react-admin/Datagrid.html#selectallbutton
      * @example
-     * import { List, Datagrid, SelectAllButton } from 'react-admin';
+     * import { List, Datagrid, BulkActionsToolbar, SelectAllButton, BulkDeleteButton } from 'react-admin';
+     *
+     * const PostBulkActionsToolbar = () => (
+     *     <BulkActionsToolbar selectAllButton={<SelectAllButton label="Select all records" />}>
+     *         <BulkDeleteButton />
+     *     </BulkActionsToolbar>
+     * );
      *
      * export const PostList = () => (
      *     <List>
-     *         <Datagrid selectAllButton={<SelectAllButton label="Select all records" />}>
+     *         <Datagrid bulkActionsToolbar={<PostBulkActionsToolbar />}>
      *             ...
      *         </Datagrid>
      *     </List>
      * );
      */
-    selectAllButton?: BulkActionsToolbarProps['selectAllButton'];
+    bulkActionsToolbar?: ReactElement;
 
     /**
      * The component used to render the bulk action buttons. Defaults to <BulkDeleteButton>.