Revert automatic backdrop hiding when in RHP

Author: mhawryluk

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -14,9 +14,6 @@ type YearPickerModalProps = {
     /** Whether the modal is visible */
     isVisible: boolean;
 
-    /** Whether the picker is displayed over RHP */
-    isRHPVisible: boolean;
-
     /** The list of years to render */
     years: CalendarPickerListItem[];
 
@@ -30,7 +27,7 @@ type YearPickerModalProps = {
     onClose?: () => void;
 };
 
-function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose, isRHPVisible}: YearPickerModalProps) {
+function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose}: YearPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
@@ -62,7 +59,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             onBackdropPress={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
             shouldUseReanimatedModal
-            backdropOpacity={isRHPVisible ? 0 : undefined}
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/DatePicker/CalendarPicker/index.tsx

@@ -7,12 +7,10 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ArrowIcon from './ArrowIcon';
 import Day from './Day';
 import generateMonthMatrix from './generateMonthMatrix';
@@ -69,9 +67,6 @@ function CalendarPicker({
     const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
     const isFirstRender = useRef(true);
 
-    const [isRHPVisible = false] = useOnyx(ONYXKEYS.MODAL, {selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, canBeMissing: true});
-    const isRHPVisibleWhenOpened = useRef(isRHPVisible).current;
-
     const currentMonthView = currentDateView.getMonth();
     const currentYearView = currentDateView.getFullYear();
     const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
@@ -306,7 +301,6 @@ function CalendarPicker({
                 years={years}
                 currentYear={currentYearView}
                 onYearChange={onYearSelected}
-                isRHPVisible={isRHPVisibleWhenOpened}
                 onClose={() => setIsYearPickerVisible(false)}
             />
         </View>

src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx

@@ -1,4 +1,3 @@
-import noop from 'lodash/noop';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import Animated, {Easing, Keyframe} from 'react-native-reanimated';
@@ -60,7 +59,7 @@ function Backdrop({
                 accessible
                 accessibilityLabel={translate('modal.backdropLabel')}
                 onPress={onBackdropPress}
-                style={[styles.userSelectNone, onBackdropPress && onBackdropPress !== noop ? styles.cursorPointer : styles.cursorAuto]}
+                style={[styles.userSelectNone, styles.cursorAuto]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
                 {isBackdropVisible && (

src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx

@@ -31,15 +31,15 @@ function BaseOverlay({onPress, isModalOnTheLeft = false}: BaseOverlayProps) {
              we have 30px draggable ba at the top and the rest of the dimmed area is clickable. On other devices,
              everything behaves normally like one big pressable */}
                 <PressableWithoutFeedback
-                    style={[styles.draggableTopBar, styles.boxShadowNone]}
+                    style={[styles.draggableTopBar, styles.boxShadowNone, styles.cursorAuto]}
                     onPress={onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}
                     id={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
                     tabIndex={-1}
                 />
                 <PressableWithoutFeedback
-                    style={[styles.flex1, styles.boxShadowNone]}
+                    style={[styles.flex1, styles.boxShadowNone, styles.cursorAuto]}
                     onPress={onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}