use PopoverMenu for account switcher modal

src/CONST.ts

@@ -187,6 +187,10 @@ const CONST = {
         IN: 'in',
         OUT: 'out',
     },
+    POPOVER_ACCOUNT_SWITCHER_POSITION: {
+        horizontal: 12,
+        vertical: 80,
+    },
     // Multiplier for gyroscope animation in order to make it a bit more subtle
     ANIMATION_GYROSCOPE_VALUE: 0.4,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,

src/components/AccountSwitcher.tsx

@@ -9,6 +9,7 @@ import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -22,10 +23,8 @@ import Avatar from './Avatar';
 import ConfirmModal from './ConfirmModal';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
-import type {MenuItemProps} from './MenuItem';
-import MenuItemList from './MenuItemList';
-import type {MenuItemWithLink} from './MenuItemList';
-import Popover from './Popover';
+import type {PopoverMenuItem} from './PopoverMenu';
+import PopoverMenu from './PopoverMenu';
 import {PressableWithFeedback} from './Pressable';
 import Text from './Text';
 
@@ -39,6 +38,7 @@ function AccountSwitcher() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const buttonRef = useRef<HTMLDivElement>(null);
+    const {windowHeight} = useWindowDimensions();
 
     const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false);
     const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
@@ -47,10 +47,14 @@ function AccountSwitcher() {
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
     const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate);
 
-    const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => {
+    const createBaseMenuItem = (
+        personalDetails: PersonalDetails | undefined,
+        errors?: Errors,
+        additionalProps: Partial<Omit<PopoverMenuItem, 'icon' | 'iconType'>> = {},
+    ): PopoverMenuItem => {
         const error = Object.values(errors ?? {})[0] ?? '';
         return {
-            title: personalDetails?.displayName ?? personalDetails?.login,
+            text: personalDetails?.displayName ?? personalDetails?.login ?? '',
             description: Str.removeSMSDomain(personalDetails?.login ?? ''),
             avatarID: personalDetails?.accountID ?? -1,
             icon: personalDetails?.avatar ?? '',
@@ -64,14 +68,12 @@ function AccountSwitcher() {
         };
     };
 
-    const menuItems = (): MenuItemProps[] => {
+    const menuItems = (): PopoverMenuItem[] => {
         const currentUserMenuItem = createBaseMenuItem(currentUserPersonalDetails, undefined, {
-            wrapperStyle: [styles.buttonDefaultBG],
-            focused: true,
             shouldShowRightIcon: true,
             iconRight: Expensicons.Checkmark,
             success: true,
-            key: `${currentUserPersonalDetails?.login}-current`,
+            isSelected: true,
         });
 
         if (isActingAsDelegate) {
@@ -87,34 +89,32 @@ function AccountSwitcher() {
 
             return [
                 createBaseMenuItem(delegatePersonalDetails, error, {
-                    onPress: () => {
+                    onSelected: () => {
                         if (isOffline) {
                             Modal.close(() => setShouldShowOfflineModal(true));
                             return;
                         }
                         disconnect();
                     },
-                    key: `${delegateEmail}-delegate`,
                 }),
                 currentUserMenuItem,
             ];
         }
 
-        const delegatorMenuItems: MenuItemProps[] = delegators
+        const delegatorMenuItems: PopoverMenuItem[] = delegators
             .filter(({email}) => email !== currentUserPersonalDetails.login)
-            .map(({email, role, errorFields}, index) => {
+            .map(({email, role, errorFields}) => {
                 const error = ErrorUtils.getLatestErrorField({errorFields}, 'connect');
                 const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
                 return createBaseMenuItem(personalDetails, error, {
                     badgeText: translate('delegate.role', role),
-                    onPress: () => {
+                    onSelected: () => {
                         if (isOffline) {
                             Modal.close(() => setShouldShowOfflineModal(true));
                             return;
                         }
                         connect(email);
                     },
-                    key: `${email}-${index}`,
                 });
             });
 
@@ -170,23 +170,29 @@ function AccountSwitcher() {
                 </View>
             </PressableWithFeedback>
             {canSwitchAccounts && (
-                <Popover
+                <PopoverMenu
                     isVisible={shouldShowDelegatorMenu}
                     onClose={() => {
                         setShouldShowDelegatorMenu(false);
                         clearDelegatorErrors();
                     }}
                     anchorRef={buttonRef}
-                    anchorPosition={styles.accountSwitcherAnchorPosition}
-                >
-                    <View style={styles.pb4}>
-                        <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pb3, !shouldUseNarrowLayout && styles.pt4]}>{translate('delegate.switchAccount')}</Text>
-                        <MenuItemList
-                            menuItems={menuItems()}
-                            shouldUseSingleExecution
-                        />
-                    </View>
-                </Popover>
+                    anchorPosition={CONST.POPOVER_ACCOUNT_SWITCHER_POSITION}
+                    anchorAlignment={{
+                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                    }}
+                    menuItems={menuItems()}
+                    headerText={translate('delegate.switchAccount')}
+                    onItemSelected={(item) => {
+                        if (!item?.onSelected) {
+                            return;
+                        }
+                        item.onSelected();
+                    }}
+                    containerStyle={{maxHeight: windowHeight / 2, width: 'fit-content'}}
+                    shouldUseScrollView
+                />
             )}
             <ConfirmModal
                 title={translate('common.youAppearToBeOffline')}

src/components/PopoverMenu.tsx

@@ -2,6 +2,7 @@ import lodashIsEqual from 'lodash/isEqual';
 import type {RefObject} from 'react';
 import React, {useLayoutEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -20,6 +21,7 @@ import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
 import type BaseModalProps from './Modal/types';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
+import ScrollView from './ScrollView';
 import Text from './Text';
 
 type PopoverMenuItem = MenuItemProps & {
@@ -97,6 +99,12 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
 
     /** Whether to show the selected option checkmark */
     shouldShowSelectedItemCheck?: boolean;
+
+    /** 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({
@@ -122,6 +130,8 @@ function PopoverMenu({
     shouldEnableNewFocusManagement,
     restoreFocusType,
     shouldShowSelectedItemCheck = false,
+    containerStyle,
+    shouldUseScrollView = false,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -132,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];
@@ -247,52 +258,30 @@ function PopoverMenu({
             restoreFocusType={restoreFocusType}
         >
             <FocusTrapForModal active={isVisible}>
-                <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
+                <View style={[isSmallScreenWidth ? {} : styles.createMenuContainer, containerStyle]}>
                     {renderHeaderText()}
                     {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
-                    {currentMenuItems.map((item, menuIndex) => (
-                        <FocusableMenuItem
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${item.text}_${menuIndex}`}
-                            icon={item.icon}
-                            iconWidth={item.iconWidth}
-                            iconHeight={item.iconHeight}
-                            iconFill={item.iconFill}
-                            contentFit={item.contentFit}
-                            title={item.text}
-                            shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
-                            titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
-                            shouldCheckActionAllowedOnPress={false}
-                            description={item.description}
-                            numberOfLinesDescription={item.numberOfLinesDescription}
-                            onPress={() => selectItem(menuIndex)}
-                            focused={focusedIndex === menuIndex}
-                            displayInDefaultIconColor={item.displayInDefaultIconColor}
-                            shouldShowRightIcon={item.shouldShowRightIcon}
-                            iconRight={item.iconRight}
-                            shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
-                            label={item.label}
-                            style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
-                            isLabelHoverable={item.isLabelHoverable}
-                            floatRightAvatars={item.floatRightAvatars}
-                            floatRightAvatarSize={item.floatRightAvatarSize}
-                            shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
-                            disabled={item.disabled}
-                            onFocus={() => setFocusedIndex(menuIndex)}
-                            success={item.success}
-                            containerStyle={item.containerStyle}
-                            shouldRenderTooltip={item.shouldRenderTooltip}
-                            tooltipAnchorAlignment={item.tooltipAnchorAlignment}
-                            tooltipShiftHorizontal={item.tooltipShiftHorizontal}
-                            tooltipShiftVertical={item.tooltipShiftVertical}
-                            tooltipWrapperStyle={item.tooltipWrapperStyle}
-                            renderTooltipContent={item.renderTooltipContent}
-                            numberOfLinesTitle={item.numberOfLinesTitle}
-                            interactive={item.interactive}
-                            isSelected={item.isSelected}
-                            badgeText={item.badgeText}
-                        />
-                    ))}
+                    <WrapComponent>
+                        {currentMenuItems.map((item, menuIndex) => {
+                            const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item;
+                            return (
+                                <FocusableMenuItem
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    key={`${item.text}_${menuIndex}`}
+                                    title={text}
+                                    onPress={() => selectItem(menuIndex)}
+                                    focused={focusedIndex === menuIndex}
+                                    shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
+                                    shouldCheckActionAllowedOnPress={false}
+                                    onFocus={() => setFocusedIndex(menuIndex)}
+                                    style={{backgroundColor: focusedIndex === menuIndex ? theme.activeComponentBG : undefined}}
+                                    titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
+                                    // eslint-disable-next-line react/jsx-props-no-spreading
+                                    {...menuItemProps}
+                                />
+                            );
+                        })}
+                    </WrapComponent>
                 </View>
             </FocusTrapForModal>
         </PopoverWithMeasuredContent>