Remove props injection in <Datagrid expand> components

docs/Upgrade.md

@@ -449,6 +449,22 @@ We've changed the implementation of `<SimpleFormIterator>`, the companion child
 </ArrayInput>
 ```
 
+## `<Datagrid expand>` Components No Longer Receive Any Props
+
+An undocumented features allowed datagrid expand panels to read the current resource, record, and id from their props. This is no longer the case in v5, as expand panels are now rendered without props by `<Datagrid>`. 
+
+If you used these props in your expand components, you'll have to use the `useRecordContext` hook instead:
+
+```diff
+-const PostExpandPanel = ({ record, resource, id }) => {
++const PostExpandPanel = () => {
++   const record = useRecordContext();
++   const resource = useResourceContext();
++   const id = record?.id;
+    // ...
+}
+```
+
 ## `<FormDataConsumer>` no longer passes a `getSource` function
 
 When using `<FormDataConsumer>` inside an `<ArrayInput>`, the child function no longer receives a `getSource` callback. We've made all Input components able to work seamlessly inside an `<ArrayInput>`, so it's no longer necessary to transform their source with `getSource`:

examples/simple/src/posts/PostList.tsx

@@ -30,6 +30,7 @@ import {
     TextField,
     TextInput,
     TopToolbar,
+    useRecordContext,
     useTranslate,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
@@ -147,9 +148,10 @@ const rowClick = (_id, _resource, record) => {
     return 'show';
 };
 
-const PostPanel = ({ record }) => (
-    <div dangerouslySetInnerHTML={{ __html: record.body }} />
-);
+const PostPanel = () => {
+    const record = useRecordContext();
+    return <div dangerouslySetInnerHTML={{ __html: record?.body }} />;
+};
 
 const tagSort = { field: 'name.en', order: 'ASC' } as const;
 

examples/simple/src/users/UserEditEmbedded.tsx

@@ -1,20 +1,30 @@
 /* eslint react/jsx-key: off */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Edit, Identifier, SimpleForm, TextInput, required } from 'react-admin';
+import {
+    Edit,
+    SimpleForm,
+    TextInput,
+    required,
+    useRecordContext,
+} from 'react-admin';
 
-const UserEditEmbedded = ({ id }: { id?: Identifier }) => (
-    /* Passing " " as title disables the custom title */
-    <Edit title=" " id={id}>
-        <SimpleForm defaultValues={{ role: 'user' }}>
-            <TextInput
-                source="name"
-                defaultValue="slim shady"
-                validate={required()}
-            />
-        </SimpleForm>
-    </Edit>
-);
+const UserEditEmbedded = () => {
+    const record = useRecordContext();
+    if (!record) return null;
+    return (
+        /* Passing " " as title disables the custom title */
+        <Edit title=" " id={record.id} actions={false}>
+            <SimpleForm defaultValues={{ role: 'user' }}>
+                <TextInput
+                    source="name"
+                    defaultValue="slim shady"
+                    validate={required()}
+                />
+            </SimpleForm>
+        </Edit>
+    );
+};
 
 UserEditEmbedded.propTypes = {
     record: PropTypes.object,

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

@@ -1,6 +1,6 @@
 import React, {
     isValidElement,
     cloneElement,
     createElement,
     useState,
     useEffect,
@@ -221,19 +221,9 @@
                 >
                     <TableCell colSpan={nbColumns}>
                         {isElement(expand)
-                            ? cloneElement(expand as React.ReactElement<any>, {
-                                  // @ts-ignore
-                                  record,
-                                  resource,
-                                  id: String(id),
-                              })
+                            ? expand
                             : createElement(
-                                  expand as React.FunctionComponent<any>,
-                                  {
-                                      record,
-                                      resource,
-                                      id: String(id),
-                                  }
+                                  expand as React.FunctionComponent<any>
                               )}
                     </TableCell>
                 </TableRow>