From 255d5b4d2add4db9595a9817a1e63579d34b1176 Mon Sep 17 00:00:00 2001
From: smeng9 <smeng9>
Date: Mon, 10 Nov 2025 22:49:23 +0800
Subject: [PATCH 1/6] migrate deprecated `<ListItemSecondaryAction />`

---
 examples/crm/src/companies/CompanyShow.tsx    | 56 +++++++-------
 .../crm/src/contacts/ContactListContent.tsx   | 46 +++++------
 examples/demo/src/dashboard/PendingOrder.tsx  | 27 +++----
 examples/demo/src/reviews/ReviewItem.tsx      |  2 +-
 examples/simple/src/tags/TagList.tsx          | 11 ++-
 .../src/list/SimpleList/SimpleList.tsx        | 77 ++++++++++---------
 .../src/list/SimpleList/SimpleListItem.tsx    | 11 ++-
 .../src/list/SimpleList/SimpleListLoading.tsx | 13 ++--
 .../src/list/filter/FilterListItem.tsx        | 31 ++++----
 .../list/filter/SavedQueryFilterListItem.tsx  | 21 ++---
 10 files changed, 157 insertions(+), 138 deletions(-)

diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
index 00a486eeaa5..feb8131a66c 100644
--- a/examples/crm/src/companies/CompanyShow.tsx
+++ b/examples/crm/src/companies/CompanyShow.tsx
@@ -8,7 +8,6 @@ import {
     ListItem,
     ListItemAvatar,
     ListItemButton,
-    ListItemSecondaryAction,
     ListItemText,
     Stack,
     Typography,
@@ -143,7 +142,22 @@ const ContactsIterator = () => {
         <List dense sx={{ pt: 0 }}>
             {contacts.map(contact => (
                 <RecordContextProvider key={contact.id} value={contact}>
-                    <ListItem disablePadding>
+                    <ListItem
+                        disablePadding
+                        {...(contact.last_seen && {
+                            secondaryAction: (
+                                <Typography
+                                    variant="body2"
+                                    color="textSecondary"
+                                    component="span"
+                                >
+                                    last activity{' '}
+                                    {formatDistance(contact.last_seen, now)} ago{' '}
+                                    <Status status={contact.status} />
+                                </Typography>
+                            ),
+                        })}
+                    >
                         <ListItemButton
                             component={RouterLink}
                             to={`/contacts/${contact.id}/show`}
@@ -169,19 +183,6 @@ const ContactsIterator = () => {
                                     </>
                                 }
                             />
-                            {contact.last_seen && (
-                                <ListItemSecondaryAction>
-                                    <Typography
-                                        variant="body2"
-                                        color="textSecondary"
-                                        component="span"
-                                    >
-                                        last activity{' '}
-                                        {formatDistance(contact.last_seen, now)}{' '}
-                                        ago <Status status={contact.status} />
-                                    </Typography>
-                                </ListItemSecondaryAction>
-                            )}
                         </ListItemButton>
                     </ListItem>
                 </RecordContextProvider>
@@ -216,7 +217,20 @@ const DealsIterator = () => {
         <Box>
             <List dense>
                 {deals.map(deal => (
-                    <ListItem key={deal.id} disablePadding>
+                    <ListItem
+                        key={deal.id}
+                        disablePadding
+                        secondaryAction={
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                component="span"
+                            >
+                                last activity{' '}
+                                {formatDistance(deal.updated_at, now)} ago{' '}
+                            </Typography>
+                        }
+                    >
                         <ListItemButton
                             component={RouterLink}
                             to={`/deals/${deal.id}/show`}
@@ -239,16 +253,6 @@ const DealsIterator = () => {
                                     </>
                                 }
                             />
-                            <ListItemSecondaryAction>
-                                <Typography
-                                    variant="body2"
-                                    color="textSecondary"
-                                    component="span"
-                                >
-                                    last activity{' '}
-                                    {formatDistance(deal.updated_at, now)} ago{' '}
-                                </Typography>
-                            </ListItemSecondaryAction>
                         </ListItemButton>
                     </ListItem>
                 ))}
diff --git a/examples/crm/src/contacts/ContactListContent.tsx b/examples/crm/src/contacts/ContactListContent.tsx
index 6fe345abe99..88ce8ea7ea1 100644
--- a/examples/crm/src/contacts/ContactListContent.tsx
+++ b/examples/crm/src/contacts/ContactListContent.tsx
@@ -6,7 +6,6 @@ import {
     ListItemButton,
     ListItemAvatar,
     ListItemIcon,
-    ListItemSecondaryAction,
     ListItemText,
     Typography,
     useMediaQuery,
@@ -50,7 +49,29 @@ export const ContactListContent = () => {
             <List dense>
                 {contacts.map(contact => (
                     <RecordContextProvider key={contact.id} value={contact}>
-                        <ListItem disablePadding>
+                        <ListItem
+                            disablePadding
+                            {...(contact.last_seen && {
+                                secondaryAction: (
+                                    <Typography
+                                        variant="body2"
+                                        color="textSecondary"
+                                        title={contact.last_seen}
+                                        sx={{
+                                            top: '10px',
+                                            transform: 'none',
+                                        }}
+                                    >
+                                        {!isSmall && 'last activity '}
+                                        {formatRelative(
+                                            contact.last_seen,
+                                            now
+                                        )}{' '}
+                                        <Status status={contact.status} />
+                                    </Typography>
+                                ),
+                            })}
+                        >
                             <ListItemButton
                                 component={Link}
                                 to={`/contacts/${contact.id}/show`}
@@ -101,27 +122,6 @@ export const ContactListContent = () => {
                                         </>
                                     }
                                 />
-                                {contact.last_seen && (
-                                    <ListItemSecondaryAction
-                                        sx={{
-                                            top: '10px',
-                                            transform: 'none',
-                                        }}
-                                    >
-                                        <Typography
-                                            variant="body2"
-                                            color="textSecondary"
-                                            title={contact.last_seen}
-                                        >
-                                            {!isSmall && 'last activity '}
-                                            {formatRelative(
-                                                contact.last_seen,
-                                                now
-                                            )}{' '}
-                                            <Status status={contact.status} />
-                                        </Typography>
-                                    </ListItemSecondaryAction>
-                                )}
                             </ListItemButton>
                         </ListItem>
                     </RecordContextProvider>
diff --git a/examples/demo/src/dashboard/PendingOrder.tsx b/examples/demo/src/dashboard/PendingOrder.tsx
index 49a7ced13c6..577911f1157 100644
--- a/examples/demo/src/dashboard/PendingOrder.tsx
+++ b/examples/demo/src/dashboard/PendingOrder.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
     ListItem,
-    ListItemSecondaryAction,
     ListItemAvatar,
     ListItemText,
     Avatar,
@@ -26,7 +25,20 @@ export const PendingOrder = (props: Props) => {
     });
 
     return (
-        <ListItem disablePadding>
+        <ListItem
+            disablePadding
+            secondaryAction={
+                <Box
+                    component="span"
+                    sx={{
+                        marginRight: '1em',
+                        color: 'text.primary',
+                    }}
+                >
+                    {order.total}$
+                </Box>
+            }
+        >
             <ListItemButton component={Link} to={`/orders/${order.id}`}>
                 <ListItemAvatar>
                     {isPending ? (
@@ -49,17 +61,6 @@ export const PendingOrder = (props: Props) => {
                             : '',
                     })}
                 />
-                <ListItemSecondaryAction>
-                    <Box
-                        component="span"
-                        sx={{
-                            marginRight: '1em',
-                            color: 'text.primary',
-                        }}
-                    >
-                        {order.total}$
-                    </Box>
-                </ListItemSecondaryAction>
             </ListItemButton>
         </ListItem>
     );
diff --git a/examples/demo/src/reviews/ReviewItem.tsx b/examples/demo/src/reviews/ReviewItem.tsx
index 0447fce935f..3def4cfe5ff 100644
--- a/examples/demo/src/reviews/ReviewItem.tsx
+++ b/examples/demo/src/reviews/ReviewItem.tsx
@@ -72,7 +72,7 @@ export const ReviewItem = () => {
                         </Fragment>
                     }
                     secondary={record.comment}
-                    secondaryTypographyProps={{ noWrap: true }}
+                    slotProps={{ secondary: { noWrap: true } }}
                 />
             </ListItemButton>
         </ListItem>
diff --git a/examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.tsx
index bf3dd443ee5..5e538d5ddac 100644
--- a/examples/simple/src/tags/TagList.tsx
+++ b/examples/simple/src/tags/TagList.tsx
@@ -12,7 +12,6 @@ import {
     List,
     ListItem,
     ListItemText,
-    ListItemSecondaryAction,
     Collapse,
     Card,
     Stack,
@@ -76,16 +75,16 @@ const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
     const open = openChildren.includes(root.id);
     return (
         <Fragment>
-            <ListItem disablePadding style={{ paddingLeft: level * 16 }}>
+            <ListItem
+                disablePadding
+                sx={{ paddingLeft: level * 16 }}
+                secondaryAction={<EditButton record={root} />}
+            >
                 <ListItemButton onClick={() => hasChildren && toggleNode(root)}>
                     {hasChildren && open && <ExpandLess />}
                     {hasChildren && !open && <ExpandMore />}
                     {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
                     <ListItemText primary={root.name.en} />
-
-                    <ListItemSecondaryAction>
-                        <EditButton record={root} />
-                    </ListItemSecondaryAction>
                 </ListItemButton>
             </ListItem>
             <Collapse in={open} timeout="auto" unmountOnExit>
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
index b4bd8238b92..da150cef818 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -125,13 +125,33 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                                 rowSx={rowSx}
                                 rowStyle={rowStyle}
                                 resource={resource}
+                                {...((rightAvatar || rightIcon) && {
+                                    secondaryAction: (
+                                        <>
+                                            {rightAvatar && (
+                                                <Avatar>
+                                                    {renderAvatar(
+                                                        record,
+                                                        rightAvatar
+                                                    )}
+                                                </Avatar>
+                                            )}
+                                            {rightIcon && (
+                                                <ListItemIcon>
+                                                    {rightIcon(
+                                                        record,
+                                                        record.id
+                                                    )}
+                                                </ListItemIcon>
+                                            )}
+                                        </>
+                                    ),
+                                })}
                             >
                                 <SimpleListItemContent
                                     leftAvatar={leftAvatar}
                                     leftIcon={leftIcon}
                                     primaryText={primaryText}
-                                    rightAvatar={rightAvatar}
-                                    rightIcon={rightIcon}
                                     secondaryText={secondaryText}
                                     tertiaryText={tertiaryText}
                                     rowIndex={rowIndex}
@@ -163,35 +183,13 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
 const SimpleListItemContent = <RecordType extends RaRecord = any>(
     props: SimpleListItemProps<RecordType>
 ) => {
-    const {
-        leftAvatar,
-        leftIcon,
-        primaryText,
-        rightAvatar,
-        rightIcon,
-        secondaryText,
-        tertiaryText,
-    } = props;
+    const { leftAvatar, leftIcon, primaryText, secondaryText, tertiaryText } =
+        props;
     const resource = useResourceContext(props);
     const record = useRecordContext<RecordType>(props);
     const getRecordRepresentation = useGetRecordRepresentation(resource);
     const translate = useTranslate();
 
-    const renderAvatar = (
-        record: RecordType,
-        avatarCallback: FunctionToElement<RecordType>
-    ) => {
-        const avatarValue = avatarCallback(record, record.id);
-        if (
-            typeof avatarValue === 'string' &&
-            (avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
-        ) {
-            return <Avatar src={avatarValue} />;
-        } else {
-            return <Avatar>{avatarValue}</Avatar>;
-        }
-    };
-
     if (!record) return null;
 
     return (
@@ -250,22 +248,25 @@ const SimpleListItemContent = <RecordType extends RaRecord = any>(
                             secondaryText(record, record.id))
                 }
             />
-            {(rightAvatar || rightIcon) && (
-                <ListItemSecondaryAction>
-                    {rightAvatar && (
-                        <Avatar>{renderAvatar(record, rightAvatar)}</Avatar>
-                    )}
-                    {rightIcon && (
-                        <ListItemIcon>
-                            {rightIcon(record, record.id)}
-                        </ListItemIcon>
-                    )}
-                </ListItemSecondaryAction>
-            )}
         </>
     );
 };
 
+const renderAvatar = <RecordType extends RaRecord = any>(
+    record: RecordType,
+    avatarCallback: FunctionToElement<RecordType>
+) => {
+    const avatarValue = avatarCallback(record, record.id);
+    if (
+        typeof avatarValue === 'string' &&
+        (avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
+    ) {
+        return <Avatar src={avatarValue} />;
+    } else {
+        return <Avatar>{avatarValue}</Avatar>;
+    }
+};
+
 const PREFIX = 'RaSimpleList';
 
 export const SimpleListClasses = {
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
index 33339852c1b..9322ba38091 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
@@ -17,7 +17,15 @@ import { RowClickFunction } from '../types';
 export const SimpleListItem = <RecordType extends RaRecord = any>(
     props: SimpleListItemProps<RecordType>
 ) => {
-    const { children, linkType, rowClick, rowIndex, rowSx, rowStyle } = props;
+    const {
+        children,
+        linkType,
+        rowClick,
+        rowIndex,
+        rowSx,
+        rowStyle,
+        secondaryAction,
+    } = props;
     const resource = useResourceContext(props);
     const record = useRecordContext<RecordType>(props);
     const navigate = useNavigate();
@@ -64,6 +72,7 @@ export const SimpleListItem = <RecordType extends RaRecord = any>(
                         width: '100%',
                     },
                 }}
+                secondaryAction={secondaryAction}
             >
                 <ListItemButton
                     onClick={handleClick}
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
index f0f813775e9..37c2127ba09 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
@@ -10,7 +10,6 @@ import {
     type ListProps,
     ListItem,
     ListItemAvatar,
-    ListItemSecondaryAction,
     ListItemText,
 } from '@mui/material';
 import { useTimeout } from 'ra-core';
@@ -37,7 +36,12 @@ export const SimpleListLoading = (inProps: SimpleListLoadingProps) => {
     return oneSecondHasPassed ? (
         <StyledList className={className} {...rest}>
             {times(nbFakeLines, key => (
-                <ListItem key={key}>
+                <ListItem
+                    key={key}
+                    {...(hasRightAvatarOrIcon && {
+                        secondaryAction: <Avatar>&nbsp;</Avatar>,
+                    })}
+                >
                     {hasLeftAvatarOrIcon && (
                         <ListItemAvatar>
                             <Avatar>&nbsp;</Avatar>
@@ -64,11 +68,6 @@ export const SimpleListLoading = (inProps: SimpleListLoadingProps) => {
                             hasSecondaryText ? <Placeholder /> : undefined
                         }
                     />
-                    {hasRightAvatarOrIcon && (
-                        <ListItemSecondaryAction>
-                            <Avatar>&nbsp;</Avatar>
-                        </ListItemSecondaryAction>
-                    )}
                 </ListItem>
             ))}
         </StyledList>
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
index fc2505b437b..db58df482ff 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
@@ -13,7 +13,6 @@ import {
     ListItemIcon,
     type ListItemProps,
     ListItemText,
-    ListItemSecondaryAction,
 } from '@mui/material';
 import CancelIcon from '@mui/icons-material/CancelOutlined';
 import {
@@ -174,7 +173,23 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
     const handleClick = () => setFilters(toggleFilter(value, filterValues));
 
     return (
-        <StyledListItem disablePadding {...rest}>
+        <StyledListItem
+            disablePadding
+            {...(isSelected && {
+                secondaryAction: (
+                    <IconButton
+                        size="small"
+                        onClick={event => {
+                            event.stopPropagation();
+                            handleClick();
+                        }}
+                    >
+                        <CancelIcon />
+                    </IconButton>
+                ),
+            })}
+            {...rest}
+        >
             <ListItemButton
                 disableGutters
                 onClick={handleClick}
@@ -197,18 +212,6 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
                     className={FilterListItemClasses.listItemText}
                     data-selected={isSelected ? 'true' : 'false'}
                 />
-                {isSelected && (
-                    <ListItemSecondaryAction
-                        onClick={event => {
-                            event.stopPropagation();
-                            handleClick();
-                        }}
-                    >
-                        <IconButton size="small">
-                            <CancelIcon />
-                        </IconButton>
-                    </ListItemSecondaryAction>
-                )}
             </ListItemButton>
         </StyledListItem>
     );
diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
index eb5a11da1fb..e68b480a948 100644
--- a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
@@ -6,7 +6,6 @@ import {
     ListItemButton,
     type ListItemProps,
     ListItemText,
-    ListItemSecondaryAction,
     styled,
     type ComponentsOverrides,
     useThemeProps,
@@ -69,7 +68,18 @@ export const SavedQueryFilterListItem = memo(
             isSelected ? removeFilter() : addFilter();
 
         return (
-            <StyledListItem className={className} sx={sx} disablePadding>
+            <StyledListItem
+                className={className}
+                sx={sx}
+                disablePadding
+                {...(isSelected && {
+                    secondaryAction: (
+                        <IconButton size="small" onClick={toggleFilter}>
+                            <CancelIcon />
+                        </IconButton>
+                    ),
+                })}
+            >
                 <ListItemButton
                     onClick={toggleFilter}
                     selected={isSelected}
@@ -80,13 +90,6 @@ export const SavedQueryFilterListItem = memo(
                         primary={label}
                         className={SavedQueryFilterListItemClasses.listItemText}
                     />
-                    {isSelected && (
-                        <ListItemSecondaryAction>
-                            <IconButton size="small" onClick={toggleFilter}>
-                                <CancelIcon />
-                            </IconButton>
-                        </ListItemSecondaryAction>
-                    )}
                 </ListItemButton>
             </StyledListItem>
         );

From 50747af21ea627fdbb09906f465ed3870728ca90 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Tue, 11 Nov 2025 14:59:10 +0800
Subject: [PATCH 2/6] remove unused import

---
 packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
index da150cef818..b7df4384d4d 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -3,7 +3,6 @@ import {
     List,
     ListItemAvatar,
     ListItemIcon,
-    ListItemSecondaryAction,
     ListItemText,
     ListProps,
 } from '@mui/material';

From 82e32a2fcee96f45a2b6a18495176e35e93871a8 Mon Sep 17 00:00:00 2001
From: smeng9 <smeng9>
Date: Thu, 13 Nov 2025 10:20:29 +0800
Subject: [PATCH 3/6] fix code style and make it readable

---
 examples/crm/src/companies/CompanyShow.tsx                | 8 ++++----
 examples/crm/src/contacts/ContactListContent.tsx          | 8 ++++----
 .../ra-ui-materialui/src/list/SimpleList/SimpleList.tsx   | 8 ++++----
 .../src/list/SimpleList/SimpleListLoading.tsx             | 6 +++---
 .../ra-ui-materialui/src/list/filter/FilterListItem.tsx   | 8 ++++----
 .../src/list/filter/SavedQueryFilterListItem.tsx          | 8 ++++----
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
index feb8131a66c..0edb7f7edae 100644
--- a/examples/crm/src/companies/CompanyShow.tsx
+++ b/examples/crm/src/companies/CompanyShow.tsx
@@ -144,8 +144,8 @@ const ContactsIterator = () => {
                 <RecordContextProvider key={contact.id} value={contact}>
                     <ListItem
                         disablePadding
-                        {...(contact.last_seen && {
-                            secondaryAction: (
+                        secondaryAction={
+                            contact.last_seen ? (
                                 <Typography
                                     variant="body2"
                                     color="textSecondary"
@@ -155,8 +155,8 @@ const ContactsIterator = () => {
                                     {formatDistance(contact.last_seen, now)} ago{' '}
                                     <Status status={contact.status} />
                                 </Typography>
-                            ),
-                        })}
+                            ) : null
+                        }
                     >
                         <ListItemButton
                             component={RouterLink}
diff --git a/examples/crm/src/contacts/ContactListContent.tsx b/examples/crm/src/contacts/ContactListContent.tsx
index 88ce8ea7ea1..2a6ccf9ee9c 100644
--- a/examples/crm/src/contacts/ContactListContent.tsx
+++ b/examples/crm/src/contacts/ContactListContent.tsx
@@ -51,8 +51,8 @@ export const ContactListContent = () => {
                     <RecordContextProvider key={contact.id} value={contact}>
                         <ListItem
                             disablePadding
-                            {...(contact.last_seen && {
-                                secondaryAction: (
+                            secondaryAction={
+                                contact.last_seen ? (
                                     <Typography
                                         variant="body2"
                                         color="textSecondary"
@@ -69,8 +69,8 @@ export const ContactListContent = () => {
                                         )}{' '}
                                         <Status status={contact.status} />
                                     </Typography>
-                                ),
-                            })}
+                                ) : null
+                            }
                         >
                             <ListItemButton
                                 component={Link}
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
index b7df4384d4d..921788deafe 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -124,8 +124,8 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                                 rowSx={rowSx}
                                 rowStyle={rowStyle}
                                 resource={resource}
-                                {...((rightAvatar || rightIcon) && {
-                                    secondaryAction: (
+                                secondaryAction={
+                                    rightAvatar || rightIcon ? (
                                         <>
                                             {rightAvatar && (
                                                 <Avatar>
@@ -144,8 +144,8 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                                                 </ListItemIcon>
                                             )}
                                         </>
-                                    ),
-                                })}
+                                    ) : null
+                                }
                             >
                                 <SimpleListItemContent
                                     leftAvatar={leftAvatar}
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
index 37c2127ba09..c1b7f673a87 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListLoading.tsx
@@ -38,9 +38,9 @@ export const SimpleListLoading = (inProps: SimpleListLoadingProps) => {
             {times(nbFakeLines, key => (
                 <ListItem
                     key={key}
-                    {...(hasRightAvatarOrIcon && {
-                        secondaryAction: <Avatar>&nbsp;</Avatar>,
-                    })}
+                    secondaryAction={
+                        hasRightAvatarOrIcon ? <Avatar>&nbsp;</Avatar> : null
+                    }
                 >
                     {hasLeftAvatarOrIcon && (
                         <ListItemAvatar>
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
index db58df482ff..b25b8e7dbd3 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
@@ -175,8 +175,8 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
     return (
         <StyledListItem
             disablePadding
-            {...(isSelected && {
-                secondaryAction: (
+            secondaryAction={
+                isSelected ? (
                     <IconButton
                         size="small"
                         onClick={event => {
@@ -186,8 +186,8 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
                     >
                         <CancelIcon />
                     </IconButton>
-                ),
-            })}
+                ) : null
+            }
             {...rest}
         >
             <ListItemButton
diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
index e68b480a948..75360861264 100644
--- a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
@@ -72,13 +72,13 @@ export const SavedQueryFilterListItem = memo(
                 className={className}
                 sx={sx}
                 disablePadding
-                {...(isSelected && {
-                    secondaryAction: (
+                secondaryAction={
+                    isSelected ? (
                         <IconButton size="small" onClick={toggleFilter}>
                             <CancelIcon />
                         </IconButton>
-                    ),
-                })}
+                    ) : null
+                }
             >
                 <ListItemButton
                     onClick={toggleFilter}

From 6c269cde31ac8790341d0b49252d4d7a22a41548 Mon Sep 17 00:00:00 2001
From: smeng9 <smeng9>
Date: Fri, 21 Nov 2025 13:02:50 +0800
Subject: [PATCH 4/6] fix display issue after deprecating list item secondary
 action

---
 examples/crm/src/companies/CompanyShow.tsx    | 51 +++++-------
 .../crm/src/contacts/ContactListContent.tsx   | 42 +++++-----
 examples/demo/src/dashboard/PendingOrder.tsx  | 24 +++---
 examples/simple/src/tags/TagList.tsx          |  7 +-
 .../src/list/SimpleList/SimpleList.tsx        | 78 +++++++++----------
 .../src/list/SimpleList/SimpleListItem.tsx    | 11 +--
 6 files changed, 95 insertions(+), 118 deletions(-)

diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
index 0edb7f7edae..f77bf7d76b0 100644
--- a/examples/crm/src/companies/CompanyShow.tsx
+++ b/examples/crm/src/companies/CompanyShow.tsx
@@ -142,22 +142,7 @@ const ContactsIterator = () => {
         <List dense sx={{ pt: 0 }}>
             {contacts.map(contact => (
                 <RecordContextProvider key={contact.id} value={contact}>
-                    <ListItem
-                        disablePadding
-                        secondaryAction={
-                            contact.last_seen ? (
-                                <Typography
-                                    variant="body2"
-                                    color="textSecondary"
-                                    component="span"
-                                >
-                                    last activity{' '}
-                                    {formatDistance(contact.last_seen, now)} ago{' '}
-                                    <Status status={contact.status} />
-                                </Typography>
-                            ) : null
-                        }
-                    >
+                    <ListItem disablePadding>
                         <ListItemButton
                             component={RouterLink}
                             to={`/contacts/${contact.id}/show`}
@@ -183,6 +168,17 @@ const ContactsIterator = () => {
                                     </>
                                 }
                             />
+                            {contact.last_seen && (
+                                <Typography
+                                    variant="body2"
+                                    color="textSecondary"
+                                    component="span"
+                                >
+                                    last activity{' '}
+                                    {formatDistance(contact.last_seen, now)} ago{' '}
+                                    <Status status={contact.status} />
+                                </Typography>
+                            )}
                         </ListItemButton>
                     </ListItem>
                 </RecordContextProvider>
@@ -217,20 +213,7 @@ const DealsIterator = () => {
         <Box>
             <List dense>
                 {deals.map(deal => (
-                    <ListItem
-                        key={deal.id}
-                        disablePadding
-                        secondaryAction={
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                                component="span"
-                            >
-                                last activity{' '}
-                                {formatDistance(deal.updated_at, now)} ago{' '}
-                            </Typography>
-                        }
-                    >
+                    <ListItem key={deal.id} disablePadding>
                         <ListItemButton
                             component={RouterLink}
                             to={`/deals/${deal.id}/show`}
@@ -253,6 +236,14 @@ const DealsIterator = () => {
                                     </>
                                 }
                             />
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                component="span"
+                            >
+                                last activity{' '}
+                                {formatDistance(deal.updated_at, now)} ago{' '}
+                            </Typography>
                         </ListItemButton>
                     </ListItem>
                 ))}
diff --git a/examples/crm/src/contacts/ContactListContent.tsx b/examples/crm/src/contacts/ContactListContent.tsx
index 2a6ccf9ee9c..7033a88f11a 100644
--- a/examples/crm/src/contacts/ContactListContent.tsx
+++ b/examples/crm/src/contacts/ContactListContent.tsx
@@ -49,29 +49,7 @@ export const ContactListContent = () => {
             <List dense>
                 {contacts.map(contact => (
                     <RecordContextProvider key={contact.id} value={contact}>
-                        <ListItem
-                            disablePadding
-                            secondaryAction={
-                                contact.last_seen ? (
-                                    <Typography
-                                        variant="body2"
-                                        color="textSecondary"
-                                        title={contact.last_seen}
-                                        sx={{
-                                            top: '10px',
-                                            transform: 'none',
-                                        }}
-                                    >
-                                        {!isSmall && 'last activity '}
-                                        {formatRelative(
-                                            contact.last_seen,
-                                            now
-                                        )}{' '}
-                                        <Status status={contact.status} />
-                                    </Typography>
-                                ) : null
-                            }
-                        >
+                        <ListItem disablePadding>
                             <ListItemButton
                                 component={Link}
                                 to={`/contacts/${contact.id}/show`}
@@ -122,6 +100,24 @@ export const ContactListContent = () => {
                                         </>
                                     }
                                 />
+                                {contact.last_seen && (
+                                    <Typography
+                                        variant="body2"
+                                        color="textSecondary"
+                                        title={contact.last_seen}
+                                        sx={{
+                                            top: '10px',
+                                            transform: 'none',
+                                        }}
+                                    >
+                                        {!isSmall && 'last activity '}
+                                        {formatRelative(
+                                            contact.last_seen,
+                                            now
+                                        )}{' '}
+                                        <Status status={contact.status} />
+                                    </Typography>
+                                )}
                             </ListItemButton>
                         </ListItem>
                     </RecordContextProvider>
diff --git a/examples/demo/src/dashboard/PendingOrder.tsx b/examples/demo/src/dashboard/PendingOrder.tsx
index 577911f1157..12f60904490 100644
--- a/examples/demo/src/dashboard/PendingOrder.tsx
+++ b/examples/demo/src/dashboard/PendingOrder.tsx
@@ -25,20 +25,7 @@ export const PendingOrder = (props: Props) => {
     });
 
     return (
-        <ListItem
-            disablePadding
-            secondaryAction={
-                <Box
-                    component="span"
-                    sx={{
-                        marginRight: '1em',
-                        color: 'text.primary',
-                    }}
-                >
-                    {order.total}$
-                </Box>
-            }
-        >
+        <ListItem disablePadding>
             <ListItemButton component={Link} to={`/orders/${order.id}`}>
                 <ListItemAvatar>
                     {isPending ? (
@@ -61,6 +48,15 @@ export const PendingOrder = (props: Props) => {
                             : '',
                     })}
                 />
+                <Box
+                    component="span"
+                    sx={{
+                        marginRight: '1em',
+                        color: 'text.primary',
+                    }}
+                >
+                    {order.total}$
+                </Box>
             </ListItemButton>
         </ListItem>
     );
diff --git a/examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.tsx
index 5e538d5ddac..6df604b622a 100644
--- a/examples/simple/src/tags/TagList.tsx
+++ b/examples/simple/src/tags/TagList.tsx
@@ -12,6 +12,7 @@ import {
     List,
     ListItem,
     ListItemText,
+    ListItemSecondaryAction,
     Collapse,
     Card,
     Stack,
@@ -62,7 +63,7 @@ const Tree = () => {
                     getChildNodes={getChildNodes}
                     openChildren={openChildren}
                     toggleNode={toggleNode}
-                    level={1}
+                    level={0}
                 />
             ))}
         </List>
@@ -77,7 +78,9 @@ const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
         <Fragment>
             <ListItem
                 disablePadding
-                sx={{ paddingLeft: level * 16 }}
+                sx={theme => ({
+                    paddingLeft: theme.spacing(level * 2),
+                })}
                 secondaryAction={<EditButton record={root} />}
             >
                 <ListItemButton onClick={() => hasChildren && toggleNode(root)}>
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
index 921788deafe..b6e3d5820a9 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -1,5 +1,6 @@
 import {
     Avatar,
+    Box,
     List,
     ListItemAvatar,
     ListItemIcon,
@@ -124,33 +125,13 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                                 rowSx={rowSx}
                                 rowStyle={rowStyle}
                                 resource={resource}
-                                secondaryAction={
-                                    rightAvatar || rightIcon ? (
-                                        <>
-                                            {rightAvatar && (
-                                                <Avatar>
-                                                    {renderAvatar(
-                                                        record,
-                                                        rightAvatar
-                                                    )}
-                                                </Avatar>
-                                            )}
-                                            {rightIcon && (
-                                                <ListItemIcon>
-                                                    {rightIcon(
-                                                        record,
-                                                        record.id
-                                                    )}
-                                                </ListItemIcon>
-                                            )}
-                                        </>
-                                    ) : null
-                                }
                             >
                                 <SimpleListItemContent
                                     leftAvatar={leftAvatar}
                                     leftIcon={leftIcon}
                                     primaryText={primaryText}
+                                    rightAvatar={rightAvatar}
+                                    rightIcon={rightIcon}
                                     secondaryText={secondaryText}
                                     tertiaryText={tertiaryText}
                                     rowIndex={rowIndex}
@@ -182,13 +163,35 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
 const SimpleListItemContent = <RecordType extends RaRecord = any>(
     props: SimpleListItemProps<RecordType>
 ) => {
-    const { leftAvatar, leftIcon, primaryText, secondaryText, tertiaryText } =
-        props;
+    const {
+        leftAvatar,
+        leftIcon,
+        primaryText,
+        rightAvatar,
+        rightIcon,
+        secondaryText,
+        tertiaryText,
+    } = props;
     const resource = useResourceContext(props);
     const record = useRecordContext<RecordType>(props);
     const getRecordRepresentation = useGetRecordRepresentation(resource);
     const translate = useTranslate();
 
+    const renderAvatar = (
+        record: RecordType,
+        avatarCallback: FunctionToElement<RecordType>
+    ) => {
+        const avatarValue = avatarCallback(record, record.id);
+        if (
+            typeof avatarValue === 'string' &&
+            (avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
+        ) {
+            return <Avatar src={avatarValue} />;
+        } else {
+            return <Avatar>{avatarValue}</Avatar>;
+        }
+    };
+
     if (!record) return null;
 
     return (
@@ -247,25 +250,22 @@ const SimpleListItemContent = <RecordType extends RaRecord = any>(
                             secondaryText(record, record.id))
                 }
             />
+            {(rightAvatar || rightIcon) && (
+                <Box>
+                    {rightAvatar && (
+                        <Avatar>{renderAvatar(record, rightAvatar)}</Avatar>
+                    )}
+                    {rightIcon && (
+                        <ListItemIcon>
+                            {rightIcon(record, record.id)}
+                        </ListItemIcon>
+                    )}
+                </Box>
+            )}
         </>
     );
 };
 
-const renderAvatar = <RecordType extends RaRecord = any>(
-    record: RecordType,
-    avatarCallback: FunctionToElement<RecordType>
-) => {
-    const avatarValue = avatarCallback(record, record.id);
-    if (
-        typeof avatarValue === 'string' &&
-        (avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
-    ) {
-        return <Avatar src={avatarValue} />;
-    } else {
-        return <Avatar>{avatarValue}</Avatar>;
-    }
-};
-
 const PREFIX = 'RaSimpleList';
 
 export const SimpleListClasses = {
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
index 9322ba38091..33339852c1b 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
@@ -17,15 +17,7 @@ import { RowClickFunction } from '../types';
 export const SimpleListItem = <RecordType extends RaRecord = any>(
     props: SimpleListItemProps<RecordType>
 ) => {
-    const {
-        children,
-        linkType,
-        rowClick,
-        rowIndex,
-        rowSx,
-        rowStyle,
-        secondaryAction,
-    } = props;
+    const { children, linkType, rowClick, rowIndex, rowSx, rowStyle } = props;
     const resource = useResourceContext(props);
     const record = useRecordContext<RecordType>(props);
     const navigate = useNavigate();
@@ -72,7 +64,6 @@ export const SimpleListItem = <RecordType extends RaRecord = any>(
                         width: '100%',
                     },
                 }}
-                secondaryAction={secondaryAction}
             >
                 <ListItemButton
                     onClick={handleClick}

From 3185ce96ed83065b7c22a942b8fe0bf0da1263b1 Mon Sep 17 00:00:00 2001
From: smeng9 <smeng9>
Date: Fri, 21 Nov 2025 13:23:53 +0800
Subject: [PATCH 5/6] remove unused import

---
 examples/simple/src/tags/TagList.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.tsx
index 6df604b622a..c9a8cb25806 100644
--- a/examples/simple/src/tags/TagList.tsx
+++ b/examples/simple/src/tags/TagList.tsx
@@ -12,7 +12,6 @@ import {
     List,
     ListItem,
     ListItemText,
-    ListItemSecondaryAction,
     Collapse,
     Card,
     Stack,

From fdbc39c83c1c704a7ffbcb59784856fc9ac48e1a Mon Sep 17 00:00:00 2001
From: smeng9 <smeng9>
Date: Sun, 23 Nov 2025 20:46:21 +0800
Subject: [PATCH 6/6] fix listItemSecondaryAction styles by moving
 disableGutter prop to parent

---
 packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx    | 2 +-
 .../src/list/filter/SavedQueryFilterListItem.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
index b25b8e7dbd3..f000a0827b6 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
@@ -175,6 +175,7 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
     return (
         <StyledListItem
             disablePadding
+            disableGutters
             secondaryAction={
                 isSelected ? (
                     <IconButton
@@ -191,7 +192,6 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
             {...rest}
         >
             <ListItemButton
-                disableGutters
                 onClick={handleClick}
                 selected={isSelected}
                 className={FilterListItemClasses.listItemButton}
diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
index 75360861264..de22eae33f7 100644
--- a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
@@ -72,6 +72,7 @@ export const SavedQueryFilterListItem = memo(
                 className={className}
                 sx={sx}
                 disablePadding
+                disableGutters
                 secondaryAction={
                     isSelected ? (
                         <IconButton size="small" onClick={toggleFilter}>
@@ -83,7 +84,6 @@ export const SavedQueryFilterListItem = memo(
                 <ListItemButton
                     onClick={toggleFilter}
                     selected={isSelected}
-                    disableGutters
                     className={SavedQueryFilterListItemClasses.listItemButton}
                 >
                     <ListItemText