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,
     ANIMATION_PAID_DURATION: 200,

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';
 
@@ -41,6 +40,7 @@ function AccountSwitcher() {
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [user] = useOnyx(ONYXKEYS.USER);
     const buttonRef = useRef<HTMLDivElement>(null);
+    const {windowHeight} = useWindowDimensions();
 
     const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false);
     const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
@@ -49,10 +49,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 ?? '',
@@ -66,14 +70,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) {
@@ -89,34 +91,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}`,
                 });
             });
 
@@ -181,23 +181,27 @@ 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')}
+                    containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, styles.wFitContent]}
+                    headerStyles={styles.pt0}
+                    innerContainerStyle={styles.pb0}
+                    scrollContainerStyle={styles.pb4}
+                    shouldUseScrollView
+                    shouldUpdateFocusedIndex={false}
+                />
             )}
             <ConfirmModal
                 title={translate('common.youAppearToBeOffline')}

src/components/PopoverMenu.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import lodashIsEqual from 'lodash/isEqual';
 import type {RefObject} from 'react';
-import React, {useLayoutEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
-import type {View} from 'react-native';
+import React, {Fragment, useLayoutEffect, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -67,7 +68,7 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
     isVisible: boolean;
 
     /** Callback to fire when a CreateMenu item is selected */
-    onItemSelected: (selectedItem: PopoverMenuItem, index: number) => void;
+    onItemSelected?: (selectedItem: PopoverMenuItem, index: number) => void;
 
     /** Menu items to be rendered on the list */
     menuItems: PopoverMenuItem[];
@@ -107,6 +108,24 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
 
     /** Whether to show the selected option checkmark */
     shouldShowSelectedItemCheck?: boolean;
+
+    /** The style of content container which wraps all child views */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Used to apply styles specifically to the header text */
+    headerStyles?: StyleProp<TextStyle>;
+
+    /** Modal container styles  */
+    innerContainerStyle?: ViewStyle;
+
+    /** These styles will be applied to the scroll view content container which wraps all of the child views */
+    scrollContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether we should wrap the list item in a scroll view */
+    shouldUseScrollView?: boolean;
+
+    /** Whether to update the focused index on a row select */
+    shouldUpdateFocusedIndex?: boolean;
 };
 
 function PopoverMenu({
@@ -132,6 +151,12 @@ function PopoverMenu({
     shouldEnableNewFocusManagement,
     restoreFocusType,
     shouldShowSelectedItemCheck = false,
+    containerStyles,
+    headerStyles,
+    innerContainerStyle,
+    scrollContainerStyle,
+    shouldUseScrollView = false,
+    shouldUpdateFocusedIndex = true,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -143,6 +168,7 @@ function PopoverMenu({
     const {windowHeight} = useWindowDimensions();
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible});
+    const WrapComponent = shouldUseScrollView ? ScrollView : Fragment;
 
     const selectItem = (index: number) => {
         const selectedItem = currentMenuItems[index];
@@ -152,7 +178,7 @@ function PopoverMenu({
             const selectedSubMenuItemIndex = selectedItem?.subMenuItems.findIndex((option) => option.isSelected);
             setFocusedIndex(selectedSubMenuItemIndex);
         } else if (selectedItem.shouldCallAfterModalHide && !Browser.isSafari()) {
-            onItemSelected(selectedItem, index);
+            onItemSelected?.(selectedItem, index);
             Modal.close(
                 () => {
                     selectedItem.onSelected?.();
@@ -161,7 +187,7 @@ function PopoverMenu({
                 selectedItem.shouldCloseAllModals,
             );
         } else {
-            onItemSelected(selectedItem, index);
+            onItemSelected?.(selectedItem, index);
             selectedItem.onSelected?.();
         }
     };
@@ -207,7 +233,7 @@ function PopoverMenu({
         if (!headerText || enteredSubMenuIndexes.length !== 0) {
             return;
         }
-        return <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3]}>{headerText}</Text>;
+        return <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3, headerStyles]}>{headerText}</Text>;
     };
 
     useKeyboardShortcut(
@@ -260,61 +286,46 @@ function PopoverMenu({
             shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             useNativeDriver
             restoreFocusType={restoreFocusType}
+            innerContainerStyle={innerContainerStyle}
         >
             <FocusTrapForModal active={isVisible}>
-                <ScrollView style={isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer}>
+                <View style={[isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer, containerStyles]}>
                     {renderHeaderText()}
                     {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
-                    {currentMenuItems.map((item, menuIndex) => (
-                        <OfflineWithFeedback
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${item.text}_${menuIndex}`}
-                            pendingAction={item.pendingAction}
-                        >
-                            <FocusableMenuItem
-                                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}
-                                shouldShowRightComponent={item.shouldShowRightComponent}
-                                iconRight={item.iconRight}
-                                rightComponent={item.rightComponent}
-                                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}
-                            />
-                        </OfflineWithFeedback>
-                    ))}
-                </ScrollView>
+                    {/** eslint-disable-next-line react/jsx-props-no-spreading */}
+                    <WrapComponent {...(shouldUseScrollView && {contentContainerStyle: scrollContainerStyle})}>
+                        {currentMenuItems.map((item, menuIndex) => {
+                            const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item;
+                            return (
+                                <OfflineWithFeedback
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    key={`${item.text}_${menuIndex}`}
+                                    pendingAction={item.pendingAction}
+                                >
+                                    <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={() => {
+                                            if (!shouldUpdateFocusedIndex) {
+                                                return;
+                                            }
+                                            setFocusedIndex(menuIndex);
+                                        }}
+                                        style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
+                                        titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
+                                        // eslint-disable-next-line react/jsx-props-no-spreading
+                                        {...menuItemProps}
+                                    />
+                                </OfflineWithFeedback>
+                            );
+                        })}
+                    </WrapComponent>
+                </View>
             </FocusTrapForModal>
         </PopoverWithMeasuredContent>
     );
@@ -325,7 +336,7 @@ PopoverMenu.displayName = 'PopoverMenu';
 export default React.memo(
     PopoverMenu,
     (prevProps, nextProps) =>
-        prevProps.menuItems.length === nextProps.menuItems.length &&
+        lodashIsEqual(prevProps.menuItems.length, nextProps.menuItems.length) &&
         prevProps.isVisible === nextProps.isVisible &&
         lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) &&
         prevProps.anchorRef === nextProps.anchorRef &&

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -181,6 +181,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                 onClose={closeMenu}
                 onItemSelected={closeMenu}
                 anchorRef={buttonRef}
+                shouldUseScrollView
             />
             <DeleteConfirmModal />
         </View>