Replace OptionsSelector with SelectionList part 1

src/components/SelectionList/BaseListItem.tsx

@@ -81,6 +81,15 @@ function BaseListItem<TItem extends ListItem>({
                             </View>
                         </View>
                     )}
+                    {!item.isSelected && !!item.brickRoadIndicator && (
+                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <Icon
+                                src={Expensicons.DotIndicator}
+                                fill={item.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger}
+                            />
+                        </View>
+                    )}
+
                     {rightHandSideComponentRender()}
                 </View>
                 {FooterComponent}

src/components/SelectionList/BaseSelectionList.tsx

@@ -71,6 +71,9 @@ function BaseSelectionList<TItem extends ListItem>(
         textInputRef,
         headerMessageStyle,
         shouldHideListOnInitialRender = true,
+        textInputIconLeft,
+        sectionTitleStyles,
+        textInputAutoFocus = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -79,7 +82,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const listRef = useRef<RNSectionList<TItem, SectionWithIndexOffset<TItem>>>(null);
     const innerTextInputRef = useRef<RNTextInput | null>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const shouldShowTextInput = !!textInputLabel;
+    const shouldShowTextInput = !!textInputLabel || !!textInputIconLeft;
     const shouldShowSelectAll = !!onSelectAll;
     const activeElementRole = useActiveElementRole();
     const isFocused = useIsFocused();
@@ -310,7 +313,7 @@ function BaseSelectionList<TItem extends ListItem>(
             // We do this so that we can reference the height in `getItemLayout` –
             // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
             // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
-            <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter]}>
+            <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionTitleStyles]}>
                 <Text style={[styles.ph4, styles.textLabelSupporting]}>{section.title}</Text>
             </View>
         );
@@ -377,6 +380,9 @@ function BaseSelectionList<TItem extends ListItem>(
     /** Focuses the text input when the component comes into focus and after any navigation animations finish. */
     useFocusEffect(
         useCallback(() => {
+            if (!textInputAutoFocus) {
+                return;
+            }
             if (shouldShowTextInput) {
                 focusTimeoutRef.current = setTimeout(() => {
                     if (!innerTextInputRef.current) {
@@ -391,7 +397,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 }
                 clearTimeout(focusTimeoutRef.current);
             };
-        }, [shouldShowTextInput]),
+        }, [shouldShowTextInput, textInputAutoFocus]),
     );
 
     const prevTextInputValue = usePrevious(textInputValue);
@@ -494,8 +500,12 @@ function BaseSelectionList<TItem extends ListItem>(
                                             return;
                                         }
 
-                                        // eslint-disable-next-line no-param-reassign
-                                        textInputRef.current = element as RNTextInput;
+                                        if (typeof textInputRef === 'function') {
+                                            textInputRef(element as RNTextInput);
+                                        } else {
+                                            // eslint-disable-next-line no-param-reassign
+                                            textInputRef.current = element as RNTextInput;
+                                        }
                                     }}
                                     label={textInputLabel}
                                     accessibilityLabel={textInputLabel}
@@ -508,14 +518,17 @@ function BaseSelectionList<TItem extends ListItem>(
                                     inputMode={inputMode}
                                     selectTextOnFocus
                                     spellCheck={false}
+                                    iconLeft={textInputIconLeft}
                                     onSubmitEditing={selectFocusedOption}
                                     blurOnSubmit={!!flattenedSections.allOptions.length}
                                     isLoading={isLoadingNewOptions}
                                     testID="selection-list-text-input"
                                 />
                             </View>
                         )}
-                        {!!headerMessage && (
+                        {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */}
+                        {/* This is misleading because we might be in the process of loading fresh options from the server. */}
+                        {!isLoadingNewOptions && !!headerMessage && (
                             <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
                                 <Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>
                             </View>

src/components/SelectionList/types.ts

@@ -1,10 +1,12 @@
 import type {MutableRefObject, ReactElement, ReactNode} from 'react';
 import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
 import type {MaybePhraseKey} from '@libs/Localize';
+import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 import type CONST from '@src/CONST';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type IconAsset from '@src/types/utils/IconAsset';
 import type InviteMemberListItem from './InviteMemberListItem';
 import type RadioListItem from './RadioListItem';
 import type TableListItem from './TableListItem';
@@ -110,6 +112,8 @@ type ListItem = {
 
     /** The search value from the selection list */
     searchText?: string | null;
+
+    brickRoadIndicator?: BrickRoad | '' | null;
 };
 
 type ListItemProps = CommonListItemProps<ListItem> & {
@@ -214,14 +218,20 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Max length for the text input */
     textInputMaxLength?: number;
 
+    /** Icon to display on the left side of TextInput */
+    textInputIconLeft?: IconAsset;
+
+    /** Whether text input should be focused */
+    textInputAutoFocus?: boolean;
+
     /** Callback to fire when the text input changes */
     onChangeText?: (text: string) => void;
 
     /** Input mode for the text input */
     inputMode?: InputModeOptions;
 
     /** Item `keyForList` to focus initially */
-    initiallyFocusedOptionKey?: string;
+    initiallyFocusedOptionKey?: string | null;
 
     /** Callback to fire when the list is scrolled */
     onScroll?: () => void;
@@ -272,7 +282,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     disableKeyboardShortcuts?: boolean;
 
     /** Styles to apply to SelectionList container */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
 
     /** Whether keyboard is visible on the screen */
     isKeyboardShown?: boolean;
@@ -296,7 +306,10 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     isRowMultilineSupported?: boolean;
 
     /** Ref for textInput */
-    textInputRef?: MutableRefObject<TextInput | null>;
+    textInputRef?: MutableRefObject<TextInput | null> | ((ref: TextInput | null) => void);
+
+    /** Styles for the section title */
+    sectionTitleStyles?: StyleProp<ViewStyle>;
 
     /**
      * When true, the list won't be visible until the list layout is measured. This prevents the list from "blinking" as it's scrolled to the bottom which is recommended for large lists.

src/components/TagPicker/index.tsx

@@ -1,10 +1,9 @@
 import React, {useMemo, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import type {EdgeInsets} from 'react-native-safe-area-context';
-import OptionsSelector from '@components/OptionsSelector';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -41,22 +40,15 @@ type TagPickerProps = TagPickerOnyxProps & {
     /** Callback to submit the selected tag */
     onSubmit: () => void;
 
-    /**
-     * Safe area insets required for reflecting the portion of the view,
-     * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
-     */
-    insets: EdgeInsets;
-
     /** Should show the selected option that is disabled? */
     shouldShowDisabledAndSelectedOption?: boolean;
 
     /** Indicates which tag list index was selected */
     tagListIndex: number;
 };
 
-function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, insets, onSubmit}: TagPickerProps) {
+function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
@@ -100,22 +92,14 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe
     const selectedOptionKey = sections[0]?.data?.filter((policyTag) => policyTag.searchText === selectedTag)?.[0]?.keyForList;
 
     return (
-        <OptionsSelector
-            // @ts-expect-error TODO: Remove this once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TypeScript.
-            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
-            optionHoveredStyle={styles.hoveredComponentBG}
-            sectionHeaderStyle={styles.mt5}
+        <SelectionList
+            ListItem={RadioListItem}
+            sectionTitleStyles={styles.mt5}
             sections={sections}
-            selectedOptions={selectedOptions}
+            textInputValue={searchValue}
             headerMessage={headerMessage}
-            textInputLabel={translate('common.search')}
-            boldStyle
-            highlightSelectedOptions
+            textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
             isRowMultilineSupported
-            shouldShowTextInput={shouldShowTextInput}
-            // Focus the first option when searching
-            focusedIndex={0}
-            // Focus the selected option on first load
             initiallyFocusedOptionKey={selectedOptionKey}
             onChangeText={setSearchValue}
             onSelectRow={onSubmit}

src/libs/OptionsListUtils.ts

@@ -1105,7 +1105,7 @@ function getCategoryListSections(
  *
  * @param tags - an initial tag array
  */
-function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>): Option[] {
+function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>, selectedOptions?: SelectedTagOption[]): Option[] {
     return tags.map((tag) => {
         // This is to remove unnecessary escaping backslash in tag name sent from backend.
         const cleanedName = PolicyUtils.getCleanedTagName(tag.name);
@@ -1115,6 +1115,7 @@ function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>): Optio
             searchText: tag.name,
             tooltipText: cleanedName,
             isDisabled: !tag.enabled,
+            isSelected: selectedOptions?.some((selectedTag) => selectedTag.name === tag.name),
         };
     });
 }
@@ -1146,7 +1147,7 @@ function getTagListSections(
             // "Selected" section
             title: '',
             shouldShow: false,
-            data: getTagsOptions(selectedTagOptions),
+            data: getTagsOptions(selectedTagOptions, selectedOptions),
         });
 
         return tagSections;
@@ -1159,7 +1160,7 @@ function getTagListSections(
             // "Search" section
             title: '',
             shouldShow: true,
-            data: getTagsOptions(searchTags),
+            data: getTagsOptions(searchTags, selectedOptions),
         });
 
         return tagSections;
@@ -1170,7 +1171,7 @@ function getTagListSections(
             // "All" section when items amount less than the threshold
             title: '',
             shouldShow: false,
-            data: getTagsOptions(enabledTags),
+            data: getTagsOptions(enabledTags, selectedOptions),
         });
 
         return tagSections;
@@ -1195,7 +1196,7 @@ function getTagListSections(
             // "Selected" section
             title: '',
             shouldShow: true,
-            data: getTagsOptions(selectedTagOptions),
+            data: getTagsOptions(selectedTagOptions, selectedOptions),
         });
     }
 
@@ -1206,15 +1207,15 @@ function getTagListSections(
             // "Recent" section
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
-            data: getTagsOptions(cutRecentlyUsedTags),
+            data: getTagsOptions(cutRecentlyUsedTags, selectedOptions),
         });
     }
 
     tagSections.push({
         // "All" section when items amount more than the threshold
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
-        data: getTagsOptions(filteredTags),
+        data: getTagsOptions(filteredTags, selectedOptions),
     });
 
     return tagSections;

src/pages/EditRequestTagPage.js

@@ -43,24 +43,19 @@ function EditRequestTagPage({defaultTag, policyID, tagListName, tagListIndex, on
             shouldEnableMaxHeight
             testID={EditRequestTagPage.displayName}
         >
-            {({insets}) => (
-                <>
-                    <HeaderWithBackButton
-                        title={tagListName || translate('common.tag')}
-                        onBackButtonPress={Navigation.goBack}
-                    />
-                    <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection')}</Text>
-                    <TagPicker
-                        selectedTag={defaultTag}
-                        tagListName={tagListName}
-                        tagListIndex={tagListIndex}
-                        policyID={policyID}
-                        shouldShowDisabledAndSelectedOption
-                        insets={insets}
-                        onSubmit={selectTag}
-                    />
-                </>
-            )}
+            <HeaderWithBackButton
+                title={tagListName || translate('common.tag')}
+                onBackButtonPress={Navigation.goBack}
+            />
+            <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection')}</Text>
+            <TagPicker
+                selectedTag={defaultTag}
+                tagListName={tagListName}
+                tagListIndex={tagListIndex}
+                policyID={policyID}
+                shouldShowDisabledAndSelectedOption
+                onSubmit={selectTag}
+            />
         </ScreenWrapper>
     );
 }