Revert "Make SelectionScreen use new SelectionList"

src/ROUTES.ts

@@ -1703,25 +1703,15 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES: {
         route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/classes',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES route');
-            }
-            return `workspaces/${policyID}/accounting/quickbooks-desktop/import/classes` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-desktop/import/classes` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES_DISPLAYED_AS: {
         route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/classes/displayed_as',
         getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-desktop/import/classes/displayed_as` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS: {
         route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/customers',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS route');
-            }
-            return `workspaces/${policyID}/accounting/quickbooks-desktop/import/customers` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-desktop/import/customers` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS_DISPLAYED_AS: {
         route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/customers/displayed_as',
@@ -3063,38 +3053,23 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/classes',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES route');
-            }
-            return `workspaces/${policyID}/accounting/quickbooks-online/import/classes` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/classes` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES_DISPLAYED_AS: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/classes/displayed-as',
         getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/classes/displayed-as` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/customers',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS route');
-            }
-            return `workspaces/${policyID}/accounting/quickbooks-online/import/customers` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/customers` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS_DISPLAYED_AS: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/customers/displayed-as',
         getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/customers/displayed-as` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/locations',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS route');
-            }
-            return `workspaces/${policyID}/accounting/quickbooks-online/import/locations` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/locations` as const,
     },
     POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS_DISPLAYED_AS: {
         route: 'workspaces/:policyID/accounting/quickbooks-online/import/locations/displayed-as',
@@ -3129,12 +3104,7 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_NETSUITE_IMPORT: {
         route: 'workspaces/:policyID/accounting/netsuite/import',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_IMPORT route');
-            }
-            return `workspaces/${policyID}/accounting/netsuite/import` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/netsuite/import` as const,
     },
     POLICY_ACCOUNTING_NETSUITE_IMPORT_MAPPING: {
         route: 'workspaces/:policyID/accounting/netsuite/import/mapping/:importField',
@@ -3174,12 +3144,7 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS: {
         route: 'workspaces/:policyID/accounting/netsuite/import/customer-projects',
-        getRoute: (policyID: string | undefined) => {
-            if (!policyID) {
-                Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS route');
-            }
-            return `workspaces/${policyID}/accounting/netsuite/import/customer-projects` as const;
-        },
+        getRoute: (policyID: string) => `workspaces/${policyID}/accounting/netsuite/import/customer-projects` as const,
     },
     POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS_SELECT: {
         route: 'workspaces/:policyID/accounting/netsuite/import/customer-projects/select',

src/components/SelectionList/ListItem/types.ts

@@ -232,9 +232,6 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** Whether to show RBR */
     shouldDisplayRBR?: boolean;
 
-    /** Boolean whether to display the right icon */
-    shouldShowRightCaret?: boolean;
-
     /** Styles applied for the title */
     titleStyles?: StyleProp<TextStyle>;
 

src/components/SelectionListWithSections/TableListItem.tsx

@@ -1,11 +1,11 @@
-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 PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -33,7 +33,6 @@
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
-    const icons = useMemoizedLazyExpensifyIcons(['Checkmark']);
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: styles.selectionListPressableItemWrapper.borderRadius,
@@ -45,13 +44,13 @@
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
-    const handleCheckboxPress = () => {
+    const handleCheckboxPress = useCallback(() => {
         if (onCheckboxPress) {
             onCheckboxPress(item);
         } else {
             onSelectRow(item);
         }
-    };
+    }, [item, onCheckboxPress, onSelectRow]);
 
     return (
         <BaseListItem
@@ -101,7 +100,7 @@
                             <View style={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled), item.cursorStyle]}>
                                 {!!item.isSelected && (
                                     <Icon
-                                        src={icons.Checkmark}
+                                        src={Expensicons.Checkmark}
                                         fill={theme.textLight}
                                         height={14}
                                         width={14}

src/components/SelectionScreen.tsx

@@ -17,10 +17,10 @@
 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 {ListItem} from './SelectionList/types';
+import SelectionList from './SelectionListWithSections';
+import type RadioListItem from './SelectionListWithSections/RadioListItem';
+import type TableListItem from './SelectionListWithSections/TableListItem';
+import type {ListItem, SectionListDataType} from './SelectionListWithSections/types';
 import type UserListItem from './SelectionListWithSections/UserListItem';
 
 type SelectorType<T = string> = ListItem & {
@@ -46,7 +46,7 @@
     listFooterContent?: React.JSX.Element | null;
 
     /** Sections for the section list */
-    data: Array<SelectorType<T>>;
+    sections: Array<SectionListDataType<SelectorType<T>>>;
 
     /** Default renderer for every item in the list */
     listItem: typeof RadioListItem | typeof UserListItem | typeof TableListItem;
@@ -55,10 +55,10 @@
     listItemWrapperStyle?: StyleProp<ViewStyle>;
 
     /** Item `keyForList` to focus initially */
-    initiallyFocusedOptionKey?: string | undefined;
+    initiallyFocusedOptionKey?: string | null | undefined;
 
     /** Callback to fire when a row is pressed */
-    onSelectRow: (item: SelectorType<T>) => void;
+    onSelectRow: (selection: SelectorType<T>) => void;
 
     /** Callback to fire when back button is pressed */
     onBackButtonPress?: () => void;
@@ -120,7 +120,7 @@
     headerContent,
     listEmptyContent,
     listFooterContent,
-    data,
+    sections,
     listItem,
     listItemWrapperStyle,
     initiallyFocusedOptionKey,
@@ -138,7 +138,7 @@
     shouldSingleExecuteRowSelect,
     headerTitleAlreadyTranslated,
     shouldShowTextInput,
     textInputOptions,
     shouldUpdateFocusedIndex = false,
 }: SelectionScreenProps<T>) {
     const {translate} = useLocalize();
@@ -167,23 +167,26 @@
                     pendingAction={pendingAction}
                     style={[styles.flex1]}
                     contentContainerStyle={[styles.flex1]}
-                    shouldDisableOpacity={!data.length}
+                    shouldDisableOpacity={!sections.length}
                 >
                     <SelectionList
-                        data={data}
-                        ListItem={listItem}
                         onSelectRow={onSelectRow}
+                        sections={sections}
+                        ListItem={listItem}
                         showScrollIndicator
+                        onChangeText={onChangeText}
                         shouldShowTooltips={false}
-                        initiallyFocusedItemKey={initiallyFocusedOptionKey}
-                        textInputOptions={textInputOptions}
+                        initiallyFocusedOptionKey={initiallyFocusedOptionKey}
                         listEmptyContent={listEmptyContent}
+                        textInputLabel={textInputLabel}
+                        textInputValue={textInputValue}
                         shouldShowTextInput={shouldShowTextInput}
                         listFooterContent={listFooterContent}
-                        style={{listItemWrapperStyle}}
+                        sectionListStyle={!!sections.length && [styles.flexGrow0]}
                         shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}
                         shouldUpdateFocusedIndex={shouldUpdateFocusedIndex}
-                        alternateNumberOfSupportedLines={2}
+                        isAlternateTextMultilineSupported
+                        listItemWrapperStyle={listItemWrapperStyle}
                         addBottomSafeAreaPadding={!errors || isEmptyObject(errors)}
                     >
                         <ErrorMessageRow

src/libs/actions/connections/NetSuiteCommands.ts

@@ -321,14 +321,11 @@ function updateNetSuiteSubsidiary(policyID: string, newSubsidiary: SubsidiaryPar
 }
 
 function updateNetSuiteImportMapping<TMappingName extends keyof Connections['netsuite']['options']['config']['syncOptions']['mapping']>(
-    policyID: string | undefined,
+    policyID: string,
     mappingName: TMappingName,
     mappingValue: ValueOf<typeof CONST.INTEGRATION_ENTITY_MAP_TYPES>,
     oldMappingValue?: ValueOf<typeof CONST.INTEGRATION_ENTITY_MAP_TYPES> | null,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData: OnyxData = {
         optimisticData: [
             {
@@ -443,7 +440,7 @@ function updateNetSuiteImportMapping<TMappingName extends keyof Connections['net
 }
 
 function updateNetSuiteCustomersJobsMapping(
-    policyID: string | undefined,
+    policyID: string,
     mappingValue: {
         customersMapping: NetSuiteMappingValues;
         jobsMapping: NetSuiteMappingValues;
@@ -453,9 +450,6 @@ function updateNetSuiteCustomersJobsMapping(
         jobsMapping?: NetSuiteMappingValues;
     },
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData: OnyxData = {
         optimisticData: [
             {

src/libs/actions/connections/QuickbooksDesktop.ts

@@ -429,13 +429,10 @@ function updateQuickbooksDesktopEnableNewCategories<TSettingValue extends Connec
 }
 
 function updateQuickbooksDesktopSyncClasses<TSettingValue extends Connections['quickbooksDesktop']['config']['mappings']['classes']>(
-    policyID: string | undefined,
+    policyID: string,
     settingValue: TSettingValue,
     oldSettingValue?: TSettingValue,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData = buildOnyxDataForQuickbooksDesktopMappingsConfiguration(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES, settingValue, oldSettingValue);
     const parameters: UpdateQuickbooksDesktopGenericTypeParams = {
         policyID,
@@ -446,13 +443,10 @@ function updateQuickbooksDesktopSyncClasses<TSettingValue extends Connections['q
 }
 
 function updateQuickbooksDesktopSyncCustomers<TSettingValue extends Connections['quickbooksDesktop']['config']['mappings']['customers']>(
-    policyID: string | undefined,
+    policyID: string,
     settingValue: TSettingValue,
     oldSettingValue?: TSettingValue,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData = buildOnyxDataForQuickbooksDesktopMappingsConfiguration(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS, settingValue, oldSettingValue);
     const parameters: UpdateQuickbooksDesktopGenericTypeParams = {
         policyID,

src/libs/actions/connections/QuickbooksOnline.ts

@@ -256,13 +256,10 @@ function updateQuickbooksOnlineReimbursableExpensesAccount<TSettingValue extends
 }
 
 function updateQuickbooksOnlineSyncLocations<TSettingValue extends Connections['quickbooksOnline']['config']['syncLocations']>(
-    policyID: string | undefined,
+    policyID: string,
     settingValue: TSettingValue,
     oldSettingValue?: TSettingValue,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS, settingValue, oldSettingValue);
 
     const parameters: UpdateQuickbooksOnlineGenericTypeParams = {
@@ -274,13 +271,10 @@ function updateQuickbooksOnlineSyncLocations<TSettingValue extends Connections['
 }
 
 function updateQuickbooksOnlineSyncCustomers<TSettingValue extends Connections['quickbooksOnline']['config']['syncCustomers']>(
-    policyID: string | undefined,
+    policyID: string,
     settingValue: TSettingValue,
     oldSettingValue?: TSettingValue,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS, settingValue, oldSettingValue);
 
     const parameters: UpdateQuickbooksOnlineGenericTypeParams = {
@@ -292,13 +286,10 @@ function updateQuickbooksOnlineSyncCustomers<TSettingValue extends Connections['
 }
 
 function updateQuickbooksOnlineSyncClasses<TSettingValue extends Connections['quickbooksOnline']['config']['syncClasses']>(
-    policyID: string | undefined,
+    policyID: string,
     settingValue: TSettingValue,
     oldSettingValue?: TSettingValue,
 ) {
-    if (!policyID) {
-        return;
-    }
     const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES, settingValue, oldSettingValue);
     const parameters: UpdateQuickbooksOnlineGenericTypeParams = {
         policyID,

src/pages/home/report/ReportDetailsExportPage.tsx

@@ -84,7 +84,6 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) {
                 },
             ],
             isDisabled: !canBeExported,
-            keyForList: CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION,
         },
         {
             value: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED,
@@ -96,7 +95,6 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) {
                 },
             ],
             isDisabled: !canBeExported,
-            keyForList: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED,
         },
     ];
 
@@ -127,7 +125,7 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) {
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             displayName="ReportDetailsExportPage"
-            data={exportSelectorOptions}
+            sections={[{data: exportSelectorOptions}]}
             listItem={UserListItem}
             shouldBeBlocked={false}
             onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, backTo))}