Add mutationOptions

Author: fzaninotto

docs/InPlaceEditor.md

@@ -102,6 +102,7 @@ const choices = [
 | `children`   | Optional | `ReactNode` |         | The component to render in read mode.                                |
 | `editor`     | Optional | `ReactNode` |         | The component to render in edit mode.                                |
 | `mutationMode` | Optional | `string`  | `pessimistic` | The mutation mode to use when saving the record.                     |
+| `mutationOptions` | Optional | `object`  |         | The options to pass to the `useUpdate` hook.                      |
 | `notifyOnSuccess` | Optional | `boolean` | `false`  | Whether to show a notification on successful save.                  |
 | `resource`   | Optional | `string`  |         | The name of the resource.                                            |
 | `showButtons` | Optional | `boolean` | `false` | Whether to show the save and cancel buttons.                         |
@@ -206,6 +207,21 @@ You can use any of the following values:
 <InPlaceEditor source="phone" mutationMode="optimistic" />
 ```
 
+## `mutationOptions`
+
+If you need to pass options to the `useUpdate` hook, you can use this prop.
+
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
+
+{% raw %}
+```tsx
+<InPlaceEditor
+    source="phone"
+    mutationOptions={{ meta: { foo: 'bar' } }}
+/>
+```
+{% endraw %}
+
 ## `notifyOnSuccess`
 
 By default, the component does not show a notification when the record is saved. If you want to show a notification on successful save, set this prop to `true`.

packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.stories.tsx

@@ -193,6 +193,15 @@ export const ShowButtons = () => (
     </Wrapper>
 );
 
+export const MutationOptions = () => (
+    <Wrapper>
+        <InPlaceEditor
+            source="name"
+            mutationOptions={{ meta: { foo: 'bar' } }}
+        />
+    </Wrapper>
+);
+
 export const SX = () => (
     <Wrapper>
         <InPlaceEditor

packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.tsx

@@ -8,6 +8,8 @@ import {
     useUpdate,
     Form,
     RecordContextProvider,
+    type UseUpdateOptions,
+    type RaRecord,
 } from 'ra-core';
 import isEqual from 'lodash/isEqual';
 import { styled } from '@mui/material/styles';
@@ -30,9 +32,13 @@ export type InPlaceEditorValue =
     | { state: 'saving'; values: any }
     | { state: 'reading' };
 
-export interface InPlaceEditorProps {
+export interface InPlaceEditorProps<
+    RecordType extends RaRecord = any,
+    ErrorType = Error,
+> {
     source?: string;
     mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
+    mutationOptions?: UseUpdateOptions<RecordType, ErrorType>;
     cancelOnBlur?: boolean;
     notifyOnSuccess?: boolean;
     resource?: string;
@@ -48,10 +54,16 @@ export interface InPlaceEditorProps {
  * The editable field is rendered inside a Form component, so InPlaceEditor
  * cannot be used inside another Form component.
  */
-export const InPlaceEditor = (props: InPlaceEditorProps) => {
+export const InPlaceEditor = <
+    RecordType extends RaRecord = any,
+    ErrorType extends Error = Error,
+>(
+    props: InPlaceEditorProps<RecordType, ErrorType>
+) => {
     const {
         source,
         mutationMode,
+        mutationOptions = {},
         sx,
         cancelOnBlur,
         children = source ? (
@@ -119,6 +131,32 @@ export const InPlaceEditor = (props: InPlaceEditorProps) => {
     const translate = useTranslate();
     const [update] = useUpdate();
 
+    const {
+        meta: mutationMeta,
+        onSuccess = () => {
+            dispatch({ type: 'success' });
+            if (mutationMode !== 'undoable' && !notifyOnSuccess) return;
+            notify(`resources.${resource}.notifications.updated`, {
+                type: 'info',
+                messageArgs: {
+                    smart_count: 1,
+                    _: translate('ra.notification.updated', {
+                        smart_count: 1,
+                    }),
+                },
+                undoable: mutationMode === 'undoable',
+            });
+        },
+        onError = error => {
+            notify('ra.notification.http_error', {
+                type: 'error',
+                messageArgs: { _: error.message },
+            });
+            dispatch({ type: 'error', error });
+        },
+        ...otherMutationOptions
+    } = mutationOptions;
+
     const handleSave = async values => {
         if (!record) {
             throw new Error('No record found');
@@ -134,30 +172,13 @@ export const InPlaceEditor = (props: InPlaceEditorProps) => {
                 id: record.id,
                 data: values,
                 previousData: record,
+                meta: mutationMeta,
             },
             {
+                onSuccess,
+                onError,
                 mutationMode,
-                onSuccess: () => {
-                    dispatch({ type: 'success' });
-                    if (mutationMode !== 'undoable' && !notifyOnSuccess) return;
-                    notify(`resources.${resource}.notifications.updated`, {
-                        type: 'info',
-                        messageArgs: {
-                            smart_count: 1,
-                            _: translate('ra.notification.updated', {
-                                smart_count: 1,
-                            }),
-                        },
-                        undoable: mutationMode === 'undoable',
-                    });
-                },
-                onError: error => {
-                    notify('ra.notification.http_error', {
-                        type: 'error',
-                        messageArgs: { _: error.message },
-                    });
-                    dispatch({ type: 'error', error });
-                },
+                ...otherMutationOptions,
             }
         );
     };