Skip to content

Commit 7dc19ff

Browse files
dangrousdangrous
authored
Merge pull request Expensify#64097 from ikevin127/ikevin127-backgroundDismissPopover
2 parents 763a99e + ec01df7 commit 7dc19ff

13 files changed

Lines changed: 27 additions & 21 deletions

File tree

‎src/components/AddPaymentMethodMenu.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function AddPaymentMethodMenu({
5858
}: AddPaymentMethodMenuProps) {
5959
const {translate} = useLocalize();
6060
const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
61-
const [session] = useOnyx(ONYXKEYS.SESSION);
61+
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
6262

6363
// Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
6464
// which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee.
@@ -130,7 +130,6 @@ function AddPaymentMethodMenu({
130130
// },
131131
// ],
132132
]}
133-
withoutOverlay
134133
shouldEnableNewFocusManagement
135134
restoreFocusType={restoreFocusType}
136135
/>

‎src/components/AvatarWithImagePicker.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,6 @@ function AvatarWithImagePicker({
430430
menuItems={menuItems}
431431
anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
432432
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
433-
withoutOverlay
434433
anchorRef={anchorRef}
435434
/>
436435
</>

‎src/components/ButtonWithDropdownMenu/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,6 @@ function ButtonWithDropdownMenu<IValueType>({
238238
shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
239239
// eslint-disable-next-line react-compiler/react-compiler
240240
anchorRef={nullCheckRef(dropdownAnchor)}
241-
withoutOverlay
242241
scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pv4}
243242
anchorAlignment={anchorAlignment}
244243
shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}

‎src/components/ConnectToNetSuiteFlow/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
2727
const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
2828
const {popoverAnchorRefs} = useAccountingContext();
2929

30-
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
30+
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
3131
const shouldGoToCredentialsPage = isAuthenticationError(policy, CONST.POLICY.CONNECTIONS.NAME.NETSUITE);
3232

3333
const threeDotsMenuContainerRef = popoverAnchorRefs?.current?.[CONST.POLICY.CONNECTIONS.NAME.NETSUITE];
@@ -77,7 +77,6 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
7777
onClose={() => {
7878
setIsReuseConnectionsPopoverOpen(false);
7979
}}
80-
withoutOverlay
8180
menuItems={connectionOptions}
8281
onItemSelected={(item) => {
8382
if (!item?.onSelected) {

‎src/components/EmojiPicker/EmojiPicker.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
3636
vertical: 0,
3737
});
3838
const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState<AnchorOrigin>(DEFAULT_ANCHOR_ORIGIN);
39+
const [isWithoutOverlay, setIsWithoutOverlay] = useState(true);
3940
const [activeID, setActiveID] = useState<string | null>();
4041
const emojiPopoverAnchorRef = useRef<EmojiPopoverAnchor | null>(null);
4142
const emojiAnchorDimension = useRef({
@@ -78,10 +79,12 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
7879
onWillShow?: OnWillShowPicker,
7980
id?: string,
8081
activeEmojiValue?: string,
82+
withoutOverlay = true,
8183
) => {
8284
onModalHide.current = onModalHideValue;
8385
onEmojiSelected.current = onEmojiSelectedValue;
8486
activeEmoji.current = activeEmojiValue;
87+
setIsWithoutOverlay(withoutOverlay);
8588
emojiPopoverAnchorRef.current = emojiPopoverAnchorValue;
8689
const emojiPopoverAnchor = getEmojiPopoverAnchor();
8790
// Drop focus to avoid blue focus ring.
@@ -203,7 +206,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
203206
horizontal: emojiPopoverAnchorPosition.horizontal,
204207
}}
205208
anchorRef={getEmojiPopoverAnchor() as RefObject<View | HTMLDivElement>}
206-
withoutOverlay
209+
withoutOverlay={isWithoutOverlay}
207210
popoverDimensions={{
208211
width: CONST.EMOJI_PICKER_SIZE.WIDTH,
209212
height: CONST.EMOJI_PICKER_SIZE.HEIGHT,

‎src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,27 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
1111
import useLocalize from '@hooks/useLocalize';
1212
import useStyleUtils from '@hooks/useStyleUtils';
1313
import useThemeStyles from '@hooks/useThemeStyles';
14+
import {hideEmojiPicker, isEmojiPickerVisible, resetEmojiPopoverAnchor, showEmojiPicker} from '@libs/actions/EmojiPickerAction';
15+
import type {OnModalHideValue} from '@libs/actions/EmojiPickerAction';
1416
import getButtonState from '@libs/getButtonState';
15-
import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
1617
import CONST from '@src/CONST';
1718

1819
type EmojiPickerButtonDropdownProps = {
1920
/** Flag to disable the emoji picker button */
2021
isDisabled?: boolean;
2122
accessibilityLabel?: string;
2223
role?: string;
23-
onModalHide: EmojiPickerAction.OnModalHideValue;
24+
onModalHide: OnModalHideValue;
2425
onInputChange: (emoji: string) => void;
2526
value?: string;
2627
disabled?: boolean;
2728
style: StyleProp<ViewStyle>;
29+
withoutOverlay?: boolean;
2830
};
2931

3032
function EmojiPickerButtonDropdown(
3133
// eslint-disable-next-line @typescript-eslint/no-unused-vars
32-
{isDisabled = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
34+
{isDisabled = false, withoutOverlay = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
3335
// eslint-disable-next-line @typescript-eslint/no-unused-vars
3436
ref: ForwardedRef<AnimatedTextInputRef>,
3537
) {
@@ -38,14 +40,14 @@ function EmojiPickerButtonDropdown(
3840
const emojiPopoverAnchor = useRef(null);
3941
const {translate} = useLocalize();
4042

41-
useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
43+
useEffect(() => resetEmojiPopoverAnchor, []);
4244
const onPress = () => {
43-
if (EmojiPickerAction.isEmojiPickerVisible()) {
44-
EmojiPickerAction.hideEmojiPicker();
45+
if (isEmojiPickerVisible()) {
46+
hideEmojiPicker();
4547
return;
4648
}
4749

48-
EmojiPickerAction.showEmojiPicker(
50+
showEmojiPicker(
4951
onModalHide,
5052
(emoji) => onInputChange(emoji),
5153
emojiPopoverAnchor,
@@ -57,6 +59,7 @@ function EmojiPickerButtonDropdown(
5759
() => {},
5860
undefined,
5961
value,
62+
withoutOverlay,
6063
);
6164
};
6265

‎src/components/LHNOptionsList/OptionRowLHN.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ function OptionRowLHN({
163163
callbacks: {
164164
onHide: () => setIsContextMenuActive(false),
165165
},
166+
withoutOverlay: false,
166167
});
167168
};
168169

‎src/libs/actions/EmojiPickerAction.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import type {MutableRefObject} from 'react';
2+
import type {RefObject} from 'react';
33
import type {TextInput, View} from 'react-native';
44
import type {ValueOf} from 'type-fest';
55
import type {Emoji} from '@assets/emojis/types';
@@ -12,7 +12,7 @@ type AnchorOrigin = {
1212
shiftVertical?: number;
1313
};
1414

15-
type EmojiPopoverAnchor = MutableRefObject<View | HTMLDivElement | TextInput | null>;
15+
type EmojiPopoverAnchor = RefObject<View | HTMLDivElement | TextInput | null>;
1616

1717
type OnWillShowPicker = (callback?: CloseContextMenuCallback) => void;
1818

@@ -27,6 +27,7 @@ type EmojiPickerRef = {
2727
onWillShow?: OnWillShowPicker,
2828
id?: string,
2929
activeEmoji?: string,
30+
withoutOverlay?: boolean,
3031
) => void;
3132
isActive: (id: string) => boolean;
3233
clearActive: () => void;
@@ -57,12 +58,13 @@ function showEmojiPicker(
5758
onWillShow: OnWillShowPicker = () => {},
5859
id?: string,
5960
activeEmoji?: string,
61+
withoutOverlay?: boolean,
6062
) {
6163
if (!emojiPickerRef.current) {
6264
return;
6365
}
6466

65-
emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji);
67+
emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji, withoutOverlay);
6668
}
6769

6870
/**

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
6868
const [isThreadReportParentAction, setIsThreadReportParentAction] = useState(false);
6969
const [disabledActions, setDisabledActions] = useState<ContextMenuAction[]>([]);
7070
const [shouldSwitchPositionIfOverflow, setShouldSwitchPositionIfOverflow] = useState(false);
71+
const [isWithoutOverlay, setIsWithoutOverlay] = useState<boolean>(true);
7172

7273
const contentRef = useRef<View>(null);
7374
const anchorRef = useRef<View | HTMLDivElement | null>(null);
@@ -170,11 +171,13 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
170171
disabledOptions = [],
171172
shouldCloseOnTarget = false,
172173
isOverflowMenu = false,
174+
withoutOverlay = true,
173175
} = showContextMenuParams;
174176
const {reportID, originalReportID, isArchivedRoom = false, isChronos = false, isPinnedChat = false, isUnreadChat = false} = report;
175177
const {reportActionID, draftMessage, isThreadReportParentAction: isThreadReportParentActionParam = false} = reportAction;
176178
const {onShow = () => {}, onHide = () => {}, setIsEmojiPickerActive = () => {}} = callbacks;
177179
setIsContextMenuOpening(true);
180+
setIsWithoutOverlay(withoutOverlay);
178181
const {pageX = 0, pageY = 0} = extractPointerEvent(event);
179182
contextMenuAnchorRef.current = contextMenuAnchor;
180183
contextMenuTargetNode.current = event.target as HTMLDivElement;
@@ -343,7 +346,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
343346
disableAnimation={false}
344347
shouldSetModalVisibility={false}
345348
fullscreen
346-
withoutOverlay
349+
withoutOverlay={isWithoutOverlay}
347350
anchorDimensions={contextMenuDimensions.current}
348351
anchorRef={anchorRef}
349352
shouldSwitchPositionIfOverflow={shouldSwitchPositionIfOverflow}

‎src/pages/home/report/ContextMenu/ReportActionContextMenu.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ type ShowContextMenuParams = {
4444
disabledOptions?: ContextMenuAction[];
4545
shouldCloseOnTarget?: boolean;
4646
isOverflowMenu?: boolean;
47+
withoutOverlay?: boolean;
4748
};
4849

4950
type ShowContextMenu = (params: ShowContextMenuParams) => void;

0 commit comments

Comments
 (0)