Merge pull request Expensify#68156 from Expensify/revert-67035-feat/popover-optimization

[CP Staging] Revert "PopoverWithMeasuredContent optimization"

Author: chiragsalian

…ntent/PopoverWithMeasuredContentBase.tsx …omponents/PopoverWithMeasuredContent.tsxsrc/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx renamed to src/components/PopoverWithMeasuredContent.tsx src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx renamed to src/components/PopoverWithMeasuredContent.tsx

@@ -1,17 +1,38 @@
-import {deepEqual} from 'fast-equals';
+import {circularDeepEqual, deepEqual} from 'fast-equals';
 import React, {useContext, useEffect, useMemo, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
-import * as ActionSheetAwareScrollView from '@components/ActionSheetAwareScrollView';
-import type {PopoverAnchorPosition} from '@components/Modal/types';
-import Popover from '@components/Popover';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils';
 import CONST from '@src/CONST';
-import type {PopoverWithMeasuredContentProps} from './types';
+import type {AnchorDimensions, AnchorPosition} from '@src/styles';
+import * as ActionSheetAwareScrollView from './ActionSheetAwareScrollView';
+import type {PopoverAnchorPosition} from './Modal/types';
+import Popover from './Popover';
+import type PopoverProps from './Popover/types';
+
+type PopoverWithMeasuredContentProps = Omit<PopoverProps, 'anchorPosition'> & {
+    /** The horizontal and vertical anchors points for the popover */
+    anchorPosition: AnchorPosition;
+
+    /** The dimension of anchor component */
+    anchorDimensions?: AnchorDimensions;
+
+    /** Whether we should change the vertical position if the popover's position is overflow */
+    shouldSwitchPositionIfOverflow?: boolean;
+
+    /** Whether handle navigation back when modal show. */
+    shouldHandleNavigationBack?: boolean;
+
+    /** Whether we should should use top side for the anchor positioning */
+    shouldMeasureAnchorPositionFromTop?: boolean;
+
+    /** Whether to skip re-measurement when becoming visible (for components with static dimensions) */
+    shouldSkipRemeasurement?: boolean;
+};
 
 /**
  * This is a convenient wrapper around the regular Popover component that allows us to use a more sophisticated
@@ -20,7 +41,7 @@ import type {PopoverWithMeasuredContentProps} from './types';
  * anchor position.
  */
 
-function PopoverWithMeasuredContentBase({
+function PopoverWithMeasuredContent({
     popoverDimensions = {
         height: 0,
         width: 0,
@@ -210,10 +231,17 @@ function PopoverWithMeasuredContentBase({
             style={styles.invisiblePopover}
             onLayout={measurePopover}
         >
-            {(isVisible || prevIsVisible) && children}
+            {children}
         </View>
     );
 }
-PopoverWithMeasuredContentBase.displayName = 'PopoverWithMeasuredContentBase';
+PopoverWithMeasuredContent.displayName = 'PopoverWithMeasuredContent';
+
+export default React.memo(PopoverWithMeasuredContent, (prevProps, nextProps) => {
+    if (prevProps.isVisible === nextProps.isVisible && nextProps.isVisible === false) {
+        return true;
+    }
+    return circularDeepEqual(prevProps, nextProps);
+});
 
-export default PopoverWithMeasuredContentBase;
+export type {PopoverWithMeasuredContentProps};

src/components/PopoverWithMeasuredContent/index.tsx

@@ -103,6 +103,9 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro
     }, [isSmallScreenWidth, styles]);
 
     const popoverContent = useMemo(() => {
+        if (!isOverlayVisible) {
+            return null;
+        }
         return PopoverComponent({closeOverlay: toggleOverlay});
         // PopoverComponent is stable so we don't need it here as a dep.
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

src/components/PopoverWithMeasuredContent/types.ts

@@ -18,11 +18,6 @@ import waitForBatchedUpdatesWithAct from '../../utils/waitForBatchedUpdatesWithA
 jest.mock('@libs/actions/Link', () => ({
     openExternalLink: jest.fn(),
 }));
-
-jest.mock('@hooks/useResponsiveLayout', () => () => ({
-    isSmallScreenWidth: false,
-}));
-
 jest.mock('@libs/Navigation/Navigation', () => ({
     navigate: jest.fn(),
 }));