Merge pull request Expensify#72070 from Expensify/revert-71162-krishna2323/issue/70364

[CP Staging] Revert "fix: Reports - More menu on expense RHP blocks primary and secondary button."

Author: mountiny

src/CONST/index.ts

@@ -228,7 +228,6 @@ const CONST = {
     POPOVER_DROPDOWN_WIDTH: 334,
     POPOVER_DROPDOWN_MIN_HEIGHT: 0,
     POPOVER_DROPDOWN_MAX_HEIGHT: 416,
-    POPOVER_MENU_MAX_HEIGHT: 496,
     POPOVER_DATE_WIDTH: 338,
     POPOVER_DATE_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,

src/components/MoneyReportHeader.tsx

@@ -1207,7 +1207,7 @@ function MoneyReportHeader({
                     }}
                     buttonRef={buttonRef}
                     shouldAlwaysShowDropdownMenu
-                    shouldPopoverUseScrollView={applicableSecondaryActions.length >= 5}
+                    shouldPopoverUseScrollView={shouldDisplayNarrowVersion && applicableSecondaryActions.length >= 5}
                     customText={translate('common.more')}
                     options={applicableSecondaryActions}
                     isSplitButton={false}

src/components/PopoverMenu.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import {deepEqual} from 'fast-equals';
 import type {ReactNode, RefObject} from 'react';
 import React, {useCallback, useLayoutEffect, useMemo, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
@@ -171,7 +172,7 @@ const renderWithConditionalWrapper = (shouldUseScrollView: boolean, contentConta
         return <ScrollView contentContainerStyle={contentContainerStyle}>{children}</ScrollView>;
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return <View style={contentContainerStyle}>{children}</View>;
+    return <>{children}</>;
 };
 
 function getSelectedItemIndex(menuItems: PopoverMenuItem[]) {
@@ -408,32 +409,14 @@ function BasePopoverMenu({
     }, [menuItems, setFocusedIndex]);
 
     const menuContainerStyle = useMemo(() => {
-        const DEFAULT_MAX_HEIGHT_OFFSET = 250;
-        const SAFE_BOTTOM_SPACE = variables.h40;
-
-        if (!shouldEnableMaxHeight) {
-            return isSmallScreenWidth ? [] : [styles.createMenuContainer];
-        }
-
         if (isSmallScreenWidth) {
-            return [{maxHeight: windowHeight - DEFAULT_MAX_HEIGHT_OFFSET}];
-        }
-
-        const isTopAnchored = anchorAlignment?.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP;
-        const top = anchorPosition?.vertical;
-
-        // Reserve space for footer actions when expanding downward.
-        if (isTopAnchored && typeof top === 'number') {
-            const computed = windowHeight - Math.round(top) - SAFE_BOTTOM_SPACE;
-            const maxHeight = Math.min(CONST.POPOVER_MENU_MAX_HEIGHT, computed);
-            return [styles.createMenuContainer, {maxHeight}];
+            return shouldEnableMaxHeight ? {maxHeight: windowHeight - 250} : {};
         }
+        return styles.createMenuContainer;
+    }, [isSmallScreenWidth, shouldEnableMaxHeight, windowHeight, styles.createMenuContainer]);
 
-        // Fallback for other anchor cases
-        return [styles.createMenuContainer, {maxHeight: windowHeight - DEFAULT_MAX_HEIGHT_OFFSET}];
-    }, [isSmallScreenWidth, shouldEnableMaxHeight, windowHeight, styles.createMenuContainer, anchorAlignment, anchorPosition]);
+    const {paddingTop, paddingBottom, paddingVertical, ...restScrollContainerStyle} = (StyleSheet.flatten([styles.pv4, scrollContainerStyle]) as ViewStyle) ?? {};
 
-    const {...restScrollContainerStyle} = (StyleSheet.flatten([styles.pv4, scrollContainerStyle]) as ViewStyle) ?? {};
     return (
         <PopoverWithMeasuredContent
             anchorPosition={anchorPosition}
@@ -463,12 +446,13 @@ function BasePopoverMenu({
             testID={testID}
         >
             <FocusTrapForModal active={isVisible}>
-                <View onLayout={onLayout}>
-                    {renderWithConditionalWrapper(
-                        shouldUseScrollView,
-                        [restScrollContainerStyle, menuContainerStyle, containerStyles, {...(isWebOrDesktop ? styles.flex1 : styles.flexGrow1)}],
-                        [renderHeaderText(), enteredSubMenuIndexes.length > 0 && renderBackButtonItem(), renderedMenuItems],
-                    )}
+                <View
+                    onLayout={onLayout}
+                    style={[menuContainerStyle, containerStyles, {paddingTop, paddingBottom, paddingVertical, ...(isWebOrDesktop ? styles.flex1 : styles.flexGrow1)}]}
+                >
+                    {renderHeaderText()}
+                    {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
+                    {renderWithConditionalWrapper(shouldUseScrollView, restScrollContainerStyle, renderedMenuItems)}
                 </View>
             </FocusTrapForModal>
         </PopoverWithMeasuredContent>
@@ -477,5 +461,21 @@ function BasePopoverMenu({
 
 PopoverMenu.displayName = 'PopoverMenu';
 
-export default PopoverMenu;
+export default React.memo(
+    PopoverMenu,
+    (prevProps, nextProps) =>
+        deepEqual(prevProps.menuItems, nextProps.menuItems) &&
+        prevProps.isVisible === nextProps.isVisible &&
+        deepEqual(prevProps.anchorPosition, nextProps.anchorPosition) &&
+        prevProps.anchorRef === nextProps.anchorRef &&
+        prevProps.headerText === nextProps.headerText &&
+        prevProps.fromSidebarMediumScreen === nextProps.fromSidebarMediumScreen &&
+        deepEqual(prevProps.anchorAlignment, nextProps.anchorAlignment) &&
+        prevProps.animationIn === nextProps.animationIn &&
+        prevProps.animationOut === nextProps.animationOut &&
+        prevProps.animationInTiming === nextProps.animationInTiming &&
+        prevProps.disableAnimation === nextProps.disableAnimation &&
+        prevProps.withoutOverlay === nextProps.withoutOverlay &&
+        prevProps.shouldSetModalVisibility === nextProps.shouldSetModalVisibility,
+);
 export type {PopoverMenuItem, PopoverMenuProps};