use PopoverMenu for account switcher modal

src/components/AccountSwitcher.tsx

@@ -47,30 +47,33 @@ function AccountSwitcher() {
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
     const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate);
 
-    const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: Partial<PopoverMenuItem> = {}): PopoverMenuItem => {
+    const createBaseMenuItem = (
+        personalDetails: PersonalDetails | undefined,
+        errors?: Errors,
+        additionalProps: Partial<Omit<PopoverMenuItem, 'icon' | 'iconType'>> = {},
+    ): PopoverMenuItem => {
         const error = Object.values(errors ?? {})[0] ?? '';
         return {
             text: personalDetails?.displayName ?? personalDetails?.login ?? '',
             description: Str.removeSMSDomain(personalDetails?.login ?? ''),
             avatarID: personalDetails?.accountID ?? -1,
             icon: personalDetails?.avatar ?? '',
+            iconType: CONST.ICON_TYPE_AVATAR,
             outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover,
             numberOfLinesDescription: 1,
             errorText: error ?? '',
             shouldShowRedDotIndicator: !!error,
             errorTextStyle: styles.mt2,
             ...additionalProps,
-            iconType: CONST.ICON_TYPE_AVATAR,
         };
     };
 
     const menuItems = (): PopoverMenuItem[] => {
         const currentUserMenuItem = createBaseMenuItem(currentUserPersonalDetails, undefined, {
-            wrapperStyle: [styles.buttonDefaultBG],
-            focused: true,
             shouldShowRightIcon: true,
             iconRight: Expensicons.Checkmark,
             success: true,
+            isSelected: true,
         });
 
         if (isActingAsDelegate) {
@@ -93,7 +96,6 @@ function AccountSwitcher() {
                         }
                         disconnect();
                     },
-                    isSelected: true,
                 }),
                 currentUserMenuItem,
             ];
@@ -188,7 +190,8 @@ function AccountSwitcher() {
                         }
                         item.onSelected();
                     }}
-                    containerStyle={{maxHeight: windowHeight / 2}}
+                    containerStyle={{maxHeight: windowHeight / 2, width: 'fit-content'}}
+                    shouldUseScrollView
                 />
             )}
             <ConfirmModal

src/components/PopoverMenu.tsx

@@ -102,6 +102,9 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
 
     /** The style of content container which wraps all child views */
     containerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether we should wrap the list item in a scroll view */
+    shouldUseScrollView?: boolean;
 };
 
 function PopoverMenu({
@@ -128,6 +131,7 @@ function PopoverMenu({
     restoreFocusType,
     shouldShowSelectedItemCheck = false,
     containerStyle,
+    shouldUseScrollView = false,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -138,6 +142,7 @@ function PopoverMenu({
     const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState<readonly number[]>(CONST.EMPTY_ARRAY);
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible});
+    const WrapComponent = shouldUseScrollView ? ScrollView : View;
 
     const selectItem = (index: number) => {
         const selectedItem = currentMenuItems[index];
@@ -256,7 +261,7 @@ function PopoverMenu({
                 <View style={[isSmallScreenWidth ? {} : styles.createMenuContainer, containerStyle]}>
                     {renderHeaderText()}
                     {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
-                    <ScrollView>
+                    <WrapComponent>
                         {currentMenuItems.map((item, menuIndex) => {
                             const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item;
                             return (
@@ -269,14 +274,14 @@ function PopoverMenu({
                                     shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
                                     shouldCheckActionAllowedOnPress={false}
                                     onFocus={() => setFocusedIndex(menuIndex)}
-                                    style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
+                                    style={{backgroundColor: focusedIndex === menuIndex ? theme.activeComponentBG : undefined}}
                                     titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
                                     // eslint-disable-next-line react/jsx-props-no-spreading
                                     {...menuItemProps}
                                 />
                             );
                         })}
-                    </ScrollView>
+                    </WrapComponent>
                 </View>
             </FocusTrapForModal>
         </PopoverWithMeasuredContent>