Refactored selection list items

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -65,7 +65,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                     onBackButtonPress={onClose}
                 />
                 <SelectionList
-                    shouldDelayFocus
                     textInputLabel={translate('yearPickerPage.selectYear')}
                     textInputValue={searchText}
                     textInputMaxLength={4}

src/components/SelectionList/BaseListItem.tsx

@@ -4,9 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import SelectCircle from '@components/SelectCircle';
 import useHover from '@hooks/useHover';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -17,15 +15,12 @@ function BaseListItem<TItem extends ListItem>({
     pressableStyle,
     wrapperStyle,
     containerStyle,
-    selectMultipleStyle,
     isDisabled = false,
     shouldPreventDefaultFocusOnSelectRow = false,
     canSelectMultiple = false,
     onSelectRow,
-    onCheckboxPress,
     onDismissError = () => {},
     rightHandSideComponent,
-    checkmarkPosition = CONST.DIRECTION.LEFT,
     keyForList,
     errors,
     pendingAction,
@@ -34,7 +29,6 @@ function BaseListItem<TItem extends ListItem>({
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const {hovered, bind} = useHover();
 
     const rightHandSideComponentRender = () => {
@@ -49,14 +43,6 @@ function BaseListItem<TItem extends ListItem>({
         return rightHandSideComponent;
     };
 
-    const handleCheckboxPress = () => {
-        if (onCheckboxPress) {
-            onCheckboxPress(item);
-        } else {
-            onSelectRow(item);
-        }
-    };
-
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -80,45 +66,8 @@ function BaseListItem<TItem extends ListItem>({
                 style={pressableStyle}
             >
                 <View style={wrapperStyle}>
-                    {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && (
-                        <PressableWithFeedback
-                            accessibilityLabel={item.text ?? ''}
-                            role={CONST.ROLE.BUTTON}
-                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                            disabled={isDisabled || item.isDisabledCheckbox}
-                            onPress={handleCheckboxPress}
-                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}
-                        >
-                            <View style={selectMultipleStyle}>
-                                {item.isSelected && (
-                                    <Icon
-                                        src={Expensicons.Checkmark}
-                                        fill={theme.textLight}
-                                        height={14}
-                                        width={14}
-                                    />
-                                )}
-                            </View>
-                        </PressableWithFeedback>
-                    )}
-
                     {typeof children === 'function' ? children(hovered) : children}
 
-                    {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && (
-                        <PressableWithFeedback
-                            onPress={handleCheckboxPress}
-                            disabled={isDisabled}
-                            role={CONST.ROLE.BUTTON}
-                            accessibilityLabel={item.text ?? ''}
-                            style={[styles.ml2, styles.optionSelectCircle]}
-                        >
-                            <SelectCircle
-                                isChecked={item.isSelected ?? false}
-                                selectCircleStyles={styles.ml0}
-                            />
-                        </PressableWithFeedback>
-                    )}
-
                     {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}

src/components/SelectionList/BaseSelectionList.tsx

@@ -63,7 +63,6 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldShowTooltips = true,
         shouldUseDynamicMaxToRenderPerBatch = false,
         rightHandSideComponent,
-        checkmarkPosition,
         isLoadingNewOptions = false,
         onLayout,
         customListHeader,
@@ -334,7 +333,6 @@ function BaseSelectionList<TItem extends ListItem>(
                 onDismissError={() => onDismissError?.(item)}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
-                checkmarkPosition={checkmarkPosition}
                 keyForList={item.keyForList ?? ''}
                 isMultilineSupported={isRowMultilineSupported}
             />

src/components/SelectionList/InviteMemberListItem.tsx

@@ -0,0 +1,134 @@
+import Str from 'expensify-common/lib/str';
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import MultipleAvatars from '@components/MultipleAvatars';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import SelectCircle from '@components/SelectCircle';
+import SubscriptAvatar from '@components/SubscriptAvatar';
+import Text from '@components/Text';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import BaseListItem from './BaseListItem';
+import type {InviteMemberListItemProps} from './types';
+
+function InviteMemberListItem({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onCheckboxPress,
+    onDismissError,
+    shouldPreventDefaultFocusOnSelectRow,
+    rightHandSideComponent,
+}: InviteMemberListItemProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
+    const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
+
+    const handleCheckboxPress = useCallback(() => {
+        if (onCheckboxPress) {
+            onCheckboxPress(item);
+        } else {
+            onSelectRow(item);
+        }
+    }, [item, onCheckboxPress, onSelectRow]);
+
+    return (
+        <BaseListItem
+            item={item}
+            wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.userSelectNone, styles.peopleRow, isFocused && styles.sidebarLinkActive]}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            onSelectRow={onSelectRow}
+            onDismissError={onDismissError}
+            shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+            rightHandSideComponent={rightHandSideComponent}
+            errors={item.errors}
+            pendingAction={item.pendingAction}
+            FooterComponent={
+                item.invitedSecondaryLogin ? (
+                    <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
+                        {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
+                    </Text>
+                ) : undefined
+            }
+            keyForList={item.keyForList}
+        >
+            {(hovered?: boolean) => (
+                <>
+                    {!!item.icons &&
+                        (item.shouldShowSubscript ? (
+                            <SubscriptAvatar
+                                mainAvatar={item.icons[0]}
+                                secondaryAvatar={item.icons[1]}
+                                showTooltip={showTooltip}
+                                backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
+                            />
+                        ) : (
+                            <MultipleAvatars
+                                icons={item.icons ?? []}
+                                shouldShowTooltip={showTooltip}
+                                secondAvatarStyle={[
+                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                    isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                    hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                ]}
+                            />
+                        ))}
+                    <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
+                        <TextWithTooltip
+                            shouldShowTooltip={showTooltip}
+                            text={Str.removeSMSDomain(item.text ?? '')}
+                            style={[
+                                styles.optionDisplayName,
+                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                item.isBold !== false && styles.sidebarLinkTextBold,
+                                styles.pre,
+                                item.alternateText ? styles.mb1 : null,
+                            ]}
+                        />
+                        {!!item.alternateText && (
+                            <TextWithTooltip
+                                shouldShowTooltip={showTooltip}
+                                text={Str.removeSMSDomain(item.alternateText ?? '')}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                            />
+                        )}
+                    </View>
+                    {!!item.rightElement && item.rightElement}
+                    {canSelectMultiple && (
+                        <PressableWithFeedback
+                            onPress={handleCheckboxPress}
+                            disabled={isDisabled}
+                            role={CONST.ROLE.BUTTON}
+                            accessibilityLabel={item.text ?? ''}
+                            style={[styles.ml2, styles.optionSelectCircle]}
+                        >
+                            <SelectCircle
+                                isChecked={item.isSelected ?? false}
+                                selectCircleStyles={styles.ml0}
+                            />
+                        </PressableWithFeedback>
+                    )}
+                </>
+            )}
+        </BaseListItem>
+    );
+}
+
+InviteMemberListItem.displayName = 'InviteMemberListItem';
+
+export default InviteMemberListItem;

src/components/SelectionList/RadioListItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import TextWithTooltip from '@components/TextWithTooltip';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
@@ -12,17 +11,13 @@ function RadioListItem({
     isFocused,
     showTooltip,
     isDisabled,
-    canSelectMultiple,
     onSelectRow,
-    onCheckboxPress,
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
-    checkmarkPosition,
     isMultilineSupported = false,
 }: RadioListItemProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
     const indentsLength = (item.text?.length ?? 0) - (fullTitle?.length ?? 0);
     const paddingLeft = Math.floor(indentsLength / CONST.INDENTS.length) * styles.ml3.marginLeft;
@@ -31,17 +26,13 @@ function RadioListItem({
         <BaseListItem
             item={item}
             wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.userSelectNone, styles.optionRow, isFocused && styles.sidebarLinkActive]}
-            selectMultipleStyle={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}
             isFocused={isFocused}
             isDisabled={isDisabled}
             showTooltip={showTooltip}
-            canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
-            onCheckboxPress={onCheckboxPress}
             onDismissError={onDismissError}
             shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
             rightHandSideComponent={rightHandSideComponent}
-            checkmarkPosition={checkmarkPosition}
             keyForList={item.keyForList}
         >
             <>

src/components/SelectionList/TableListItem.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
 import MultipleAvatars from '@components/MultipleAvatars';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {TableListItemProps} from './types';
 
@@ -19,7 +23,6 @@ function TableListItem({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
-    checkmarkPosition,
 }: TableListItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -28,29 +31,55 @@ function TableListItem({
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
+    const handleCheckboxPress = useCallback(() => {
+        if (onCheckboxPress) {
+            onCheckboxPress(item);
+        } else {
+            onSelectRow(item);
+        }
+    }, [item, onCheckboxPress, onSelectRow]);
+
     return (
         <BaseListItem
             item={item}
             pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive]]}
             wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
             containerStyle={styles.mb3}
-            selectMultipleStyle={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}
             isFocused={isFocused}
             isDisabled={isDisabled}
             showTooltip={showTooltip}
             canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
-            onCheckboxPress={onCheckboxPress}
             onDismissError={onDismissError}
             shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
             rightHandSideComponent={rightHandSideComponent}
-            checkmarkPosition={checkmarkPosition}
             errors={item.errors}
             pendingAction={item.pendingAction}
             keyForList={item.keyForList}
         >
             {(hovered) => (
                 <>
+                    {canSelectMultiple && (
+                        <PressableWithFeedback
+                            accessibilityLabel={item.text ?? ''}
+                            role={CONST.ROLE.BUTTON}
+                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                            disabled={isDisabled || item.isDisabledCheckbox}
+                            onPress={handleCheckboxPress}
+                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}
+                        >
+                            <View style={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}>
+                                {item.isSelected && (
+                                    <Icon
+                                        src={Expensicons.Checkmark}
+                                        fill={theme.textLight}
+                                        height={14}
+                                        width={14}
+                                    />
+                                )}
+                            </View>
+                        </PressableWithFeedback>
+                    )}
                     {!!item.icons && (
                         <MultipleAvatars
                             icons={item.icons ?? []}