diff --git a/src/components/InfiniteList/InfiniteList.tsx b/src/components/InfiniteList/InfiniteList.tsx index ec00d13c8e..6ea4d85142 100644 --- a/src/components/InfiniteList/InfiniteList.tsx +++ b/src/components/InfiniteList/InfiniteList.tsx @@ -23,7 +23,7 @@ const ListContainer: React.ComponentType = React.forwardRef( ), ); -const ItemWithBorders = styled(ListItem, { +export const ItemWithBorders = styled(ListItem, { shouldForwardProp: (prop) => prop !== 'disableHover', })<{ disableHover?: boolean }>(({ disableHover }) => ({ padding: `${padding}px`, @@ -67,6 +67,7 @@ const GroupLabel = styled(Typography)(({ theme }) => ({ export interface InfiniteListProps { loading: boolean; EmptyPlaceholder?: ReactElement | null; + ItemOverride?: React.ComponentType | null; itemContent: ItemContent; // eslint-disable-next-line @typescript-eslint/no-explicit-any context?: any; @@ -78,6 +79,7 @@ export const InfiniteList = ({ loading, data = [], EmptyPlaceholder = null, + ItemOverride = null, context, groupBy, itemContent, @@ -103,7 +105,7 @@ export const InfiniteList = ({ Footer: loading ? Loading : undefined, EmptyPlaceholder: loading ? undefined : () => EmptyPlaceholder, List: ListContainer, - Item, + Item: ItemOverride ?? Item, ScrollSeekPlaceholder: SkeletonItem, ...props.components, }, diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx index c08a356185..3b1456d082 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx @@ -13,8 +13,12 @@ import { import { styled } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import { Trans, useTranslation } from 'react-i18next'; +import { ItemProps } from 'react-virtuoso'; import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper'; -import { InfiniteList } from 'src/components/InfiniteList/InfiniteList'; +import { + InfiniteList, + ItemWithBorders, +} from 'src/components/InfiniteList/InfiniteList'; import { navBarHeight } from 'src/components/Layouts/Primary/Primary'; import { PersonInvalidEmailFragment, @@ -93,6 +97,10 @@ const DefaultSourceWrapper = styled(Box)(({ theme }) => ({ }, })); +const ItemOverride: React.ComponentType = (props) => ( + +); + export interface EmailAddressData { id: string; primary: boolean; @@ -400,6 +408,7 @@ export const FixEmailAddresses: React.FC = ({ width: '100%', scrollbarWidth: 'none', }} + ItemOverride={ItemOverride} >