[UX Reliability] Add new modal for components using Popover

src/components/DatePicker/DatePickerModal.tsx

@@ -73,7 +73,6 @@ function DatePickerModal({
             shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
-            shouldUseNewModal
         >
             <CalendarPicker
                 minDate={minDate}

src/components/EmojiPicker/EmojiPicker.tsx

@@ -216,7 +216,6 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
             shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
-            shouldUseNewModal
         >
             <FocusTrapForModal active={isEmojiPickerVisible}>
                 <View>

src/components/Popover/index.native.tsx

@@ -7,13 +7,23 @@ import type PopoverProps from './types';
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-function Popover({animationIn, animationOut, popoverAnchorPosition, disableAnimation, anchorPosition = {}, fromSidebarMediumScreen, ...propsWithoutAnimation}: PopoverProps) {
+function Popover({
+    animationIn,
+    animationOut,
+    popoverAnchorPosition,
+    disableAnimation,
+    anchorPosition = {},
+    fromSidebarMediumScreen,
+    shouldUseNewModal = true,
+    ...propsWithoutAnimation
+}: PopoverProps) {
     return (
         <Modal
             type={fromSidebarMediumScreen ? CONST.MODAL.MODAL_TYPE.POPOVER : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
             popoverAnchorPosition={fromSidebarMediumScreen ? anchorPosition : undefined}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsWithoutAnimation}
+            shouldUseNewModal={shouldUseNewModal}
             // Mobile will always has fullscreen menu
             fullscreen
             animationIn="slideInUp"

src/components/Popover/index.tsx

@@ -28,6 +28,7 @@ function Popover(props: PopoverProps) {
         animationIn = 'fadeIn',
         animationOut = 'fadeOut',
         shouldCloseWhenBrowserNavigationChanged = true,
+        shouldUseNewModal = true,
     } = props;
 
     // We need to use isSmallScreenWidth to apply the correct modal type and popoverAnchorPosition
@@ -76,6 +77,7 @@ function Popover(props: PopoverProps) {
                 onLayout={onLayout}
                 animationIn={animationIn}
                 animationOut={animationOut}
+                shouldUseNewModal={shouldUseNewModal}
             />,
             document.body,
         );
@@ -108,6 +110,7 @@ function Popover(props: PopoverProps) {
             onLayout={onLayout}
             animationIn={animationIn}
             animationOut={animationOut}
+            shouldUseNewModal={shouldUseNewModal}
         />
     );
 }

src/components/PopoverMenu.tsx

@@ -203,7 +203,7 @@ function PopoverMenu({
     shouldEnableMaxHeight = true,
     shouldUpdateFocusedIndex = true,
     shouldUseModalPaddingStyle,
-    shouldUseNewModal,
+    shouldUseNewModal = true,
     shouldAvoidSafariException = false,
     testID,
 }: PopoverMenuProps) {

src/components/PopoverWithMeasuredContent.tsx

@@ -65,7 +65,7 @@ function PopoverWithMeasuredContent({
     shouldHandleNavigationBack = false,
     shouldEnableNewFocusManagement,
     shouldMeasureAnchorPositionFromTop = false,
-    shouldUseNewModal = false,
+    shouldUseNewModal = true,
     ...props
 }: PopoverWithMeasuredContentProps) {
     const styles = useThemeStyles();

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

@@ -341,7 +341,6 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
                 anchorDimensions={contextMenuDimensions.current}
                 anchorRef={anchorRef}
                 shouldSwitchPositionIfOverflow={shouldSwitchPositionIfOverflow}
-                shouldUseNewModal
             >
                 <BaseReportActionContextMenu
                     isVisible={isPopoverVisible}

src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx

@@ -43,7 +43,6 @@ function BasePopoverReactionList({emojiName, reportActionID, currentUserPersonal
             fullscreen
             withoutOverlay
             anchorRef={reactionListRef}
-            shouldUseNewModal
         >
             <BaseReactionList
                 isVisible

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

@@ -622,7 +622,6 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
                 fromSidebarMediumScreen={!shouldUseNarrowLayout}
                 animationInTiming={CONST.MODAL.ANIMATION_TIMING.FAB_IN}
                 animationOutTiming={CONST.MODAL.ANIMATION_TIMING.FAB_OUT}
-                shouldUseNewModal
                 menuItems={menuItems.map((item) => {
                     return {
                         ...item,

tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -21,6 +21,11 @@ jest.mock('@gorhom/portal');
 jest.mock('react-native-reanimated', () => ({
     ...jest.requireActual<typeof Animated>('react-native-reanimated/mock'),
     useAnimatedRef: jest.fn(),
+
+    LayoutAnimationConfig: () => {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return ({children}: {children: React.ReactNode}) => <>{children}</>;
+    },
 }));
 
 jest.mock('../../src/libs/Navigation/Navigation', () => ({