Merge pull request #10919 from marmelab/revert-ra-ui-materialui-usage-of-listiterator

Revert usage on `<ListIterator>` in `ra-ui-materialui`

Author: Madeorsk

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

@@ -13,8 +13,8 @@ import {
     useThemeProps,
 } from '@mui/material/styles';
 import {
-    ListIterator,
     type RaRecord,
+    RecordContextProvider,
     sanitizeListRestProps,
     useGetRecordRepresentation,
     useListContextWithProps,
@@ -122,10 +122,8 @@ export const SimpleList = <RecordType extends RaRecord = any>(
 
     return (
         <Root className={className} {...sanitizeListRestProps(rest)}>
-            <ListIterator<RecordType>
-                data={data}
-                total={total}
-                render={(record, rowIndex) => (
+            {data.map((record, rowIndex) => (
+                <RecordContextProvider key={record.id} value={record}>
                     <SimpleListItem
                         key={record.id}
                         rowIndex={rowIndex}
@@ -146,8 +144,8 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                             rowIndex={rowIndex}
                         />
                     </SimpleListItem>
-                )}
-            />
+                </RecordContextProvider>
+            ))}
         </Root>
     );
 };

packages/ra-ui-materialui/src/list/SingleFieldList.spec.tsx

@@ -5,7 +5,7 @@ import { ListContext, ResourceContextProvider } from 'ra-core';
 import { AdminContext } from '../AdminContext';
 import { SingleFieldList } from './SingleFieldList';
 import { ChipField } from '../field';
-import { Empty } from './SingleFieldList.stories';
+import { Divider, Empty } from './SingleFieldList.stories';
 
 describe('<SingleFieldList />', () => {
     it('should render a link to the Edit page of the related record by default', () => {
@@ -189,4 +189,12 @@ describe('<SingleFieldList />', () => {
             expect(screen.queryByText('No genres')).toBeNull();
         });
     });
+
+    it('should accept MUI Stack props', async () => {
+        render(<Divider />);
+        const item = await screen.findByText('Horror');
+        expect(
+            item.closest('.MuiStack-root').querySelectorAll('[data-separator]')
+        ).toHaveLength(2);
+    });
 });

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

@@ -146,7 +146,9 @@ export const Gap = () => (
 export const Divider = () => (
     <Wrapper>
         <SingleFieldList
-            divider={<MuiDivider orientation="vertical" flexItem />}
+            divider={
+                <MuiDivider orientation="vertical" data-separator flexItem />
+            }
         />
     </Wrapper>
 );

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

@@ -14,7 +14,7 @@ import {
     type RaRecord,
     RecordRepresentation,
     useCreatePath,
-    ListIterator,
+    RecordContextProvider,
 } from 'ra-core';
 
 import { LinearProgress } from '../layout/LinearProgress';
@@ -89,21 +89,21 @@ export const SingleFieldList = <RecordType extends RaRecord = any>(
             className={className}
             {...sanitizeListRestProps(rest)}
         >
-            <ListIterator<RecordType>
-                data={data}
-                total={total}
-                isPending={isPending}
-                render={record => {
-                    const resourceLinkPath = !linkType
-                        ? false
-                        : createPath({
-                              resource,
-                              type: linkType,
-                              id: record.id,
-                          });
-
-                    if (resourceLinkPath) {
-                        return (
+            {data.map((record, rowIndex) => {
+                const resourceLinkPath = !linkType
+                    ? false
+                    : createPath({
+                          resource,
+                          type: linkType,
+                          id: record.id,
+                      });
+
+                if (resourceLinkPath) {
+                    return (
+                        <RecordContextProvider
+                            value={record}
+                            key={record.id ?? `row${rowIndex}`}
+                        >
                             <Link
                                 className={SingleFieldListClasses.link}
                                 to={resourceLinkPath}
@@ -113,12 +113,19 @@ export const SingleFieldList = <RecordType extends RaRecord = any>(
                                     <DefaultChildComponent clickable />
                                 )}
                             </Link>
-                        );
-                    }
-
-                    return children || <DefaultChildComponent />;
-                }}
-            />
+                        </RecordContextProvider>
+                    );
+                }
+
+                return (
+                    <RecordContextProvider
+                        value={record}
+                        key={record.id ?? `row${rowIndex}`}
+                    >
+                        {children || <DefaultChildComponent />}
+                    </RecordContextProvider>
+                );
+            })}
         </Root>
     );
 };