Merge pull request #10935 from marmelab/fix-custom-notification-requires-forward-ref

Fix passing an element to `notify` requires to wrap it in `forwardRef`

Author: Madeorsk

packages/ra-ui-materialui/src/layout/Notification.stories.tsx

@@ -6,13 +6,7 @@ import {
     useNotify,
     useCloseNotification,
 } from 'ra-core';
-import {
-    Alert,
-    Button,
-    SnackbarContent,
-    SnackbarContentProps,
-    Stack,
-} from '@mui/material';
+import { Alert, Button, SnackbarContent, Stack } from '@mui/material';
 
 import { Notification } from './Notification';
 
@@ -214,11 +208,7 @@ export const ConsecutiveUndoable = ({
     </CoreAdminContext>
 );
 
-// forwardRef is required for Snackbar to work (transitions) in React 18
-const CustomNotificationWithActionContent = React.forwardRef<
-    HTMLDivElement,
-    SnackbarContentProps
->((props, ref) => {
+const CustomNotificationWithActionContent = props => {
     const closeNotification = useCloseNotification();
     const handleClick = () => {
         console.log('Custom action');
@@ -229,15 +219,16 @@ const CustomNotificationWithActionContent = React.forwardRef<
             message="Applied automatic changes"
             action={<Button onClick={handleClick}>Cancel</Button>}
             {...props}
-            ref={ref}
         />
     );
-});
+};
 
 const CustomNotificationElementWithAction = () => {
     const notify = useNotify();
     React.useEffect(() => {
-        notify(<CustomNotificationWithActionContent />);
+        notify(<CustomNotificationWithActionContent />, {
+            autoHideDuration: null,
+        });
     }, [notify]);
     return null;
 };

packages/ra-ui-materialui/src/layout/Notification.tsx

@@ -180,9 +180,11 @@ export const Notification = (inProps: NotificationProps) => {
             >
                 {message &&
                 typeof message !== 'string' &&
-                React.isValidElement(message)
-                    ? message
-                    : undefined}
+                React.isValidElement(message) ? (
+                    // Wrap the element in a div to avoid forcing our users to wrap their component with forwardRef
+                    // which is required for animating the Snackbar
+                    <div>{message}</div>
+                ) : undefined}
             </StyledSnackbar>
         </CloseNotificationContext.Provider>
     );