diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 5be228f0156e..a78944b50112 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -54,7 +54,7 @@ function BaseListItem({ } if (typeof rightHandSideComponent === 'function') { - return rightHandSideComponent(item); + return rightHandSideComponent(item, isFocused); } return rightHandSideComponent; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index d1997aedfdf7..824f5d82a3ce 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -18,7 +18,7 @@ import type UserListItem from './UserListItem'; type TRightHandSideComponent = { /** Component to display on the right side */ - rightHandSideComponent?: ((item: TItem) => ReactElement | null | undefined) | ReactElement | null; + rightHandSideComponent?: ((item: TItem, isFocused?: boolean) => ReactElement | null | undefined) | ReactElement | null; }; type CommonListItemProps = { diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 805fd90ab369..4b8557dfbac3 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -226,7 +226,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { ); const itemRightSideComponent = useCallback( - (item: ListItem & OptionsListUtils.Option) => { + (item: ListItem & OptionsListUtils.Option, isFocused?: boolean) => { if (item.isSelfDM) { return null; } @@ -263,12 +263,13 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { ); } - + const buttonInnerStyles = isFocused ? styles.buttonDefaultHovered : {}; return (