Clean up code after SelectionList migration

src/components/SelectionList/BaseSelectionList.tsx

@@ -344,7 +344,6 @@ function BaseSelectionList<TItem extends ListItem>({
                 <ListItemRenderer
                     ListItem={ListItem}
                     selectRow={selectRow}
-                    keyForList={item.keyForList}
                     showTooltip={shouldShowTooltips}
                     item={{
                         shouldAnimateInHighlight: isItemHighlighted,
@@ -353,7 +352,6 @@ function BaseSelectionList<TItem extends ListItem>({
                     }}
                     setFocusedIndex={setFocusedIndex}
                     index={index}
-                    normalizedIndex={index}
                     isFocused={isItemFocused}
                     isDisabled={isItemDisabled}
                     canSelectMultiple={canSelectMultiple}

src/components/SelectionList/ListItem/ListItemRenderer.tsx

@@ -7,12 +7,11 @@ import {isMobileChrome} from '@libs/Browser';
 import {isTransactionGroupListItemType} from '@libs/SearchUIUtils';
 import type {BaseListItemProps, ExtendedTargetedEvent, ListItem} from './types';
 
-type ListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow'> &
+type ListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow' | 'keyForList'> &
     Pick<SelectionListProps<TItem>, 'ListItem' | 'shouldIgnoreFocus' | 'shouldSingleExecuteRowSelect'> & {
         index: number;
         selectRow: (item: TItem, indexToFocus?: number) => void;
         setFocusedIndex: ReturnType<typeof useArrowKeyFocusManager>[1];
-        normalizedIndex: number;
         singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
         titleStyles?: StyleProp<TextStyle>;
         titleContainerStyles?: StyleProp<ViewStyle>;
@@ -39,7 +38,6 @@ function ListItemRenderer<TItem extends ListItem>({
     alternateTextNumberOfLines,
     shouldIgnoreFocus,
     setFocusedIndex,
-    normalizedIndex,
     shouldSyncFocus,
     wrapperStyle,
     titleStyles,
@@ -80,7 +78,7 @@ function ListItemRenderer<TItem extends ListItem>({
                 // We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form
                 shouldPreventEnterKeySubmit
                 rightHandSideComponent={rightHandSideComponent}
-                keyForList={item.keyForList ?? ''}
+                keyForList={item.keyForList}
                 isMultilineSupported={isMultilineSupported}
                 isAlternateTextMultilineSupported={isAlternateTextMultilineSupported}
                 alternateTextNumberOfLines={alternateTextNumberOfLines}
@@ -93,7 +91,7 @@ function ListItemRenderer<TItem extends ListItem>({
                     if (isMobileChrome() && event.nativeEvent && !event.nativeEvent.sourceCapabilities) {
                         return;
                     }
-                    setFocusedIndex(normalizedIndex);
+                    setFocusedIndex(index);
                 }}
                 shouldSyncFocus={shouldSyncFocus}
                 wrapperStyle={wrapperStyle}

src/components/SelectionList/ListItem/types.ts

@@ -11,12 +11,16 @@ import type {SplitExpense} from '@src/types/onyx/IOU';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type BaseListItem from './BaseListItem';
+import type InviteMemberListItem from './InviteMemberListItem';
 import type MultiSelectListItem from './MultiSelectListItem';
 import type RadioListItem from './RadioListItem';
 import type SingleSelectListItem from './SingleSelectListItem';
 import type SpendCategorySelectorListItem from './SpendCategorySelectorListItem';
 import type SplitListItem from './SplitListItem';
+import type TableListItem from './TableListItem';
 import type TravelDomainListItem from './TravelDomainListItem';
+import type UserListItem from './UserListItem';
+import type UserSelectionListItem from './UserSelectionListItem';
 
 type ListItem<K extends string | number = string> = {
     /** Text to display */
@@ -264,13 +268,17 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 };
 
 type ValidListItem =
-    | typeof RadioListItem
     | typeof BaseListItem
+    | typeof InviteMemberListItem
     | typeof MultiSelectListItem
+    | typeof RadioListItem
     | typeof SingleSelectListItem
     | typeof SpendCategorySelectorListItem
+    | typeof SplitListItem
+    | typeof TableListItem
     | typeof TravelDomainListItem
-    | typeof SplitListItem;
+    | typeof UserListItem
+    | typeof UserSelectionListItem;
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     item: TItem;

src/components/SelectionListWithSections/types.ts

@@ -39,7 +39,6 @@ import type RadioListItem from './RadioListItem';
 import type SearchQueryListItem from './Search/SearchQueryListItem';
 import type TransactionGroupListItem from './Search/TransactionGroupListItem';
 import type TransactionListItem from './Search/TransactionListItem';
-import type TableListItem from './TableListItem';
 import type UserListItem from './UserListItem';
 
 type TRightHandSideComponent<TItem extends ListItem> = {
@@ -685,7 +684,6 @@ type ChatListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
 type ValidListItem =
     | typeof RadioListItem
     | typeof UserListItem
-    | typeof TableListItem
     | typeof InviteMemberListItem
     | typeof TransactionListItem
     | typeof TransactionGroupListItem

src/components/SelectionScreen.tsx

@@ -16,12 +16,11 @@ import ErrorMessageRow from './ErrorMessageRow';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import OfflineWithFeedback from './OfflineWithFeedback';
 import ScreenWrapper from './ScreenWrapper';
-// eslint-disable-next-line no-restricted-imports
 import SelectionList from './SelectionList';
 import type RadioListItem from './SelectionList/ListItem/RadioListItem';
 import type TableListItem from './SelectionList/ListItem/TableListItem';
+import type UserListItem from './SelectionList/ListItem/UserListItem';
 import type {ListItem} from './SelectionList/types';
-import type UserListItem from './SelectionListWithSections/UserListItem';
 
 type SelectorType<T = string> = ListItem & {
     value: T;

src/pages/domain/BaseDomainMembersPage.tsx

@@ -3,11 +3,11 @@ import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SearchBar from '@components/SearchBar';
-import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 // eslint-disable-next-line no-restricted-imports
-import SelectionList from '@components/SelectionListWithSections';
-import TableListItem from '@components/SelectionListWithSections/TableListItem';
-import type {ListItem} from '@components/SelectionListWithSections/types';
+import SelectionList from '@components/SelectionList';
+import TableListItem from '@components/SelectionList/ListItem/TableListItem';
+import type {ListItem} from '@components/SelectionList/types';
+import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -161,20 +161,24 @@ function BaseDomainMembersPage({
                 {shouldUseNarrowLayout && !!headerContent && <View style={[styles.pl5, styles.pr5, styles.flexRow, styles.gap2]}>{headerContent}</View>}
 
                 <SelectionList
-                    sections={[{data: filteredData}]}
+                    data={filteredData}
                     shouldShowRightCaret
                     canSelectMultiple={false}
-                    listHeaderContent={listHeaderContent}
-                    listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
+                    style={{
+                        containerStyle: styles.flex1,
+                        listHeaderWrapperStyle: [styles.ph9, styles.pv3, styles.pb5],
+                        listItemTitleContainerStyles: shouldUseNarrowLayout ? undefined : styles.pr3,
+                    }}
                     ListItem={TableListItem}
                     onSelectRow={onSelectRow}
                     onDismissError={onDismissError}
-                    shouldShowListEmptyContent={false}
-                    listItemTitleContainerStyles={shouldUseNarrowLayout ? undefined : styles.pr3}
+                    showListEmptyContent={false}
                     showScrollIndicator={false}
                     addBottomSafeAreaPadding
+                    shouldHeaderBeInsideList
                     customListHeader={getCustomListHeader()}
-                    containerStyle={styles.flex1}
+                    customListHeaderContent={listHeaderContent}
+                    disableMaintainingScrollPosition
                 />
             </ScreenWrapper>
         </DomainNotFoundPageWrapper>

src/pages/home/report/ReportDetailsExportPage.tsx

@@ -4,7 +4,7 @@ import ConfirmationPage from '@components/ConfirmationPage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import ScreenWrapper from '@components/ScreenWrapper';
-import UserListItem from '@components/SelectionListWithSections/UserListItem';
+import UserListItem from '@components/SelectionList/ListItem/UserListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
 import useConfirmModal from '@hooks/useConfirmModal';

src/pages/iou/SplitList.tsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useMemo, useRef} from 'react';
 import type {ValueOf} from 'type-fest';
-// eslint-disable-next-line no-restricted-imports
 import SelectionList from '@components/SelectionList';
 import SplitListItem from '@components/SelectionList/ListItem/SplitListItem';
 import type {ListItem, SplitListItemType} from '@components/SelectionList/ListItem/types';

src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo} from 'react';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';

src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx

@@ -2,7 +2,7 @@ import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
 import Text from '@components/Text';

src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableCreditCardAccountPage.tsx

@@ -1,7 +1,7 @@
 import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useMemo} from 'react';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';

src/pages/workspace/accounting/intacct/import/DimensionTypeSelector.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import FormHelpMessage from '@components/FormHelpMessage';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {SelectorType} from '@components/SelectionScreen';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -58,6 +58,7 @@ function DimensionTypeSelector({errorText = '', value = '', onInputChange}: Dime
                         showTooltip={false}
                         isFocused={option.isSelected}
                         onSelectRow={onDimensionTypeSelected}
+                        keyForList={option.keyForList}
                     />
                 ))}
                 {!!errorText && (

src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import RenderHTML from '@components/RenderHTML';
-import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import SelectionScreen from '@components/SelectionScreen';
 import type {SelectorType} from '@components/SelectionScreen';
 import useCardFeeds from '@hooks/useCardFeeds';