[WIP] perf: ContextMenu performance overhaul

src/CONST/index.ts

@@ -8744,6 +8744,10 @@ const CONST = {
         },
     },
 
+    PORTAL_HOST_NAMES: {
+        CONTEXT_MENU: 'contextMenu',
+    },
+
     SENTRY_LABEL: {
         NAVIGATION_TAB_BAR: {
             EXPENSIFY_LOGO: 'NavigationTabBar-ExpensifyLogo',

src/GlobalModals.tsx

@@ -7,7 +7,7 @@ import ScreenShareRequestModal from './components/ScreenShareRequestModal';
 import UpdateAppModal from './components/UpdateAppModal';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import {growlRef} from './libs/Growl';
-import PopoverReportActionContextMenu from './pages/inbox/report/ContextMenu/PopoverReportActionContextMenu';
+import PopoverContextMenu from './pages/inbox/report/ContextMenu/PopoverContextMenu';
 import * as ReportActionContextMenu from './pages/inbox/report/ContextMenu/ReportActionContextMenu';
 
 /**
@@ -21,7 +21,7 @@ function GlobalModals() {
             <GrowlNotification ref={growlRef} />
             <DelegateNoAccessModalProvider>
                 {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
-                <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
+                <PopoverContextMenu ref={ReportActionContextMenu.contextMenuRef} />
             </DelegateNoAccessModalProvider>
             {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
             <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />

src/components/ContextMenuItem.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
-import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import getButtonState from '@libs/getButtonState';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
-import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import FocusableMenuItem from './FocusableMenuItem';
-import Icon from './Icon';
 
 type ContextMenuItemProps = WithSentryLabel & {
     /** Icon Component */
@@ -24,9 +21,6 @@ type ContextMenuItemProps = WithSentryLabel & {
     /** Text to show when interaction was successful */
     successText?: string;
 
-    /** Whether to show the mini menu */
-    isMini?: boolean;
-
     /** Callback to fire when the item is pressed */
     onPress: (event?: GestureResponderEvent | MouseEvent | KeyboardEvent) => void;
 
@@ -45,11 +39,6 @@ type ContextMenuItemProps = WithSentryLabel & {
     /** Styles to apply to MenuItem wrapper */
     wrapperStyle?: StyleProp<ViewStyle>;
 
-    shouldPreventDefaultFocusOnPress?: boolean;
-
-    /** The ref of mini context menu item */
-    buttonRef?: React.RefObject<View | null>;
-
     /** Handles what to do when the item is focused */
     onFocus?: () => void;
 
@@ -69,14 +58,11 @@ function ContextMenuItem({
     successText = '',
     icon,
     text,
-    isMini = false,
     description = '',
     isAnonymousAction = false,
     isFocused = false,
     shouldLimitWidth = true,
     wrapperStyle,
-    shouldPreventDefaultFocusOnPress = true,
-    buttonRef = {current: null},
     onFocus = () => {},
     onBlur = () => {},
     disabled = false,
@@ -104,24 +90,7 @@ function ContextMenuItem({
     const itemIcon = !isThrottledButtonActive && successIcon ? successIcon : icon;
     const itemText = !isThrottledButtonActive && successText ? successText : text;
 
-    return isMini ? (
-        <BaseMiniContextMenuItem
-            ref={buttonRef}
-            tooltipText={itemText}
-            onPress={triggerPressAndUpdateSuccess}
-            isDelayButtonStateComplete={!isThrottledButtonActive}
-            shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPress}
-            sentryLabel={sentryLabel}
-        >
-            {({hovered, pressed}) => (
-                <Icon
-                    small
-                    src={itemIcon}
-                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isThrottledButtonActive))}
-                />
-            )}
-        </BaseMiniContextMenuItem>
-    ) : (
+    return (
         <FocusableMenuItem
             title={itemText}
             icon={itemIcon}

src/components/Hoverable/ActiveHoverable.tsx

@@ -84,6 +84,13 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, isFocused =
         setIsHovered(false);
     }, [isFocused]);
 
+    useEffect(() => {
+        if (!elementRef.current?.matches(':hover') || isHoveredRef.current || isVisibilityHidden.current) {
+            return;
+        }
+        updateIsHovered(true);
+    }, [updateIsHovered]);
+
     const handleMouseEvents = useCallback(
         (type: 'enter' | 'leave') => () => {
             if (shouldFreezeCapture) {

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -197,8 +197,6 @@ function OptionRowLHN({
             report: {
                 reportID,
                 originalReportID: reportID,
-                isPinnedChat: optionItem.isPinned,
-                isUnreadChat: !!optionItem.isUnread,
             },
             reportAction: {
                 reportActionID: '-1',

src/components/BaseMiniContextMenuItem.tsx → src/components/MiniContextMenuItem.tsx

@@ -3,17 +3,20 @@ import type {PressableStateCallbackType} from 'react-native';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
+import Icon from './Icon';
 import type {PressableRef} from './Pressable/GenericPressable/types';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
-type BaseMiniContextMenuItemProps = WithSentryLabel & {
+type MiniContextMenuItemProps = WithSentryLabel & {
     /**
      * Text to display when hovering the menu item
      */
@@ -25,14 +28,33 @@ type BaseMiniContextMenuItemProps = WithSentryLabel & {
     onPress: () => void;
 
     /**
-     * The children to display within the menu item
+     * The children to display within the menu item.
+     * Used when custom rendering is needed (e.g. overflow button).
+     * Mutually exclusive with `icon`.
      */
-    children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
+    children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
+
+    /**
+     * Icon to display. When provided, the component renders an Icon internally
+     * instead of using children.
+     */
+    icon?: IconAsset;
+
+    /**
+     * Icon to show after a successful press. Requires `icon` to be set.
+     * When provided, the component manages a throttled success state internally.
+     */
+    successIcon?: IconAsset;
+
+    /**
+     * Tooltip text to show during the success state.
+     */
+    successTooltipText?: string;
 
     /**
      * Whether the button should be in the active state
      */
-    isDelayButtonStateComplete: boolean;
+    isDelayButtonStateComplete?: boolean;
     /**
      * Can be used to control the click event, and for example whether or not to lose focus from the composer when pressing the item
      */
@@ -48,25 +70,45 @@ type BaseMiniContextMenuItemProps = WithSentryLabel & {
  * Component that renders a mini context menu item with a
  * pressable. Also renders a tooltip when hovering the item.
  */
-function BaseMiniContextMenuItem({
+function MiniContextMenuItem({
     tooltipText,
     onPress,
     children,
+    icon,
+    successIcon,
+    successTooltipText,
     isDelayButtonStateComplete = true,
     shouldPreventDefaultFocusOnPress = true,
     ref,
     sentryLabel,
-}: BaseMiniContextMenuItemProps) {
+}: MiniContextMenuItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
+
+    const showSuccessState = !!successIcon && !isThrottledButtonActive;
+    const displayIcon = showSuccessState ? successIcon : icon;
+    const displayTooltip = showSuccessState && successTooltipText ? successTooltipText : tooltipText;
+    const isComplete = showSuccessState || isDelayButtonStateComplete;
+
+    const handlePress = () => {
+        if (successIcon && !isThrottledButtonActive) {
+            return;
+        }
+        onPress();
+        if (successIcon) {
+            setThrottledButtonInactive();
+        }
+    };
+
     return (
         <Tooltip
-            text={tooltipText}
+            text={displayTooltip}
             shouldRender
         >
             <PressableWithoutFeedback
                 ref={ref}
-                onPress={onPress}
+                onPress={icon ? handlePress : onPress}
                 onMouseDown={(event) => {
                     if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) {
                         const activeElement = DomUtils.getActiveElement();
@@ -86,23 +128,30 @@ function BaseMiniContextMenuItem({
                         event.preventDefault();
                     }
                 }}
-                accessibilityLabel={tooltipText}
+                accessibilityLabel={displayTooltip}
                 role={CONST.ROLE.BUTTON}
                 sentryLabel={sentryLabel}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isDelayButtonStateComplete), true),
-                    isDelayButtonStateComplete && styles.cursorDefault,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isComplete), true),
+                    isComplete && styles.cursorDefault,
                 ]}
             >
                 {(pressableState) => (
                     <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
-                        {typeof children === 'function' ? children(pressableState) : children}
+                        {!!displayIcon && (
+                            <Icon
+                                small
+                                src={displayIcon}
+                                fill={StyleUtils.getIconFillColor(getButtonState(pressableState.hovered, pressableState.pressed, showSuccessState))}
+                            />
+                        )}
+                        {!displayIcon && (typeof children === 'function' ? children(pressableState) : children)}
                     </View>
                 )}
             </PressableWithoutFeedback>
         </Tooltip>
     );
 }
 
-export default BaseMiniContextMenuItem;
+export default MiniContextMenuItem;

src/components/Reactions/MiniQuickEmojiReactions.tsx

@@ -1,8 +1,8 @@
 import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
-import BaseMiniContextMenuItem from '@components/BaseMiniContextMenuItem';
 import Icon from '@components/Icon';
+import MiniContextMenuItem from '@components/MiniContextMenuItem';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -65,7 +65,7 @@ function MiniQuickEmojiReactions({reportAction, reportActionID, onEmojiSelected,
     return (
         <View style={styles.flexRow}>
             {CONST.QUICK_REACTIONS.slice(0, 3).map((emoji: Emoji) => (
-                <BaseMiniContextMenuItem
+                <MiniContextMenuItem
                     key={emoji.name}
                     isDelayButtonStateComplete={false}
                     tooltipText={`:${getLocalizedEmojiName(emoji.name, preferredLocale)}:`}
@@ -78,9 +78,9 @@ function MiniQuickEmojiReactions({reportAction, reportActionID, onEmojiSelected,
                     >
                         {getPreferredEmojiCode(emoji, preferredSkinTone)}
                     </Text>
-                </BaseMiniContextMenuItem>
+                </MiniContextMenuItem>
             ))}
-            <BaseMiniContextMenuItem
+            <MiniContextMenuItem
                 ref={ref}
                 onPress={callFunctionIfActionIsAllowed(() => {
                     if (!emojiPickerRef.current?.isEmojiPickerVisible) {
@@ -101,7 +101,7 @@ function MiniQuickEmojiReactions({reportAction, reportActionID, onEmojiSelected,
                         fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false))}
                     />
                 )}
-            </BaseMiniContextMenuItem>
+            </MiniContextMenuItem>
         </View>
     );
 }

src/components/ShowContextMenuContext/index.tsx

@@ -1,8 +1,8 @@
 import {createContext, useContext} from 'react';
-// eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {getOriginalReportID} from '@libs/ReportUtils';
 import {showContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import type {ContextMenuAnchor} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
@@ -52,7 +52,7 @@ function showContextMenuForReport(
         contextMenuAnchor: anchor,
         report: {
             reportID,
-            originalReportID: originalReportID ?? reportID,
+            originalReportID: originalReportID ?? (reportID ? getOriginalReportID(reportID, action, undefined) : undefined),
             isArchivedRoom,
         },
         reportAction: {

src/libs/API/parameters/MarkAsUnreadParams.ts

@@ -1,7 +1,7 @@
 type MarkAsUnreadParams = {
     reportID: string;
     lastReadTime: string;
-    reportActionID: string;
+    reportActionID?: string;
 };
 
 export default MarkAsUnreadParams;

src/libs/actions/Report/index.ts

@@ -381,7 +381,7 @@
 // map of reportID to all reportActions for that report
 const allReportActions: OnyxCollection<ReportActions> = {};
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     callback: (actions, key) => {
         if (!key || !actions) {
@@ -393,7 +393,7 @@
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -402,7 +402,7 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList> = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value ?? {};
@@ -417,7 +417,7 @@
 });
 
 let onboarding: OnyxEntry<Onboarding>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ONBOARDING,
     callback: (val) => {
         if (Array.isArray(val)) {
@@ -2364,7 +2364,7 @@
 /**
  * Sets the last read time on a report
  */
-function markCommentAsUnread(reportID: string | undefined, reportActions: OnyxEntry<ReportActions>, reportAction: ReportAction, currentUserAccountID: number) {
+function markCommentAsUnread(reportID: string | undefined, reportActions: OnyxEntry<ReportActions>, reportAction: ReportAction | undefined, currentUserAccountID: number) {
     if (!reportID) {
         Log.warn('7339cd6c-3263-4f89-98e5-730f0be15784 Invalid report passed to MarkCommentAsUnread. Not calling the API because it wil fail.');
         return;
@@ -2391,7 +2391,7 @@
 
     // If no action created date is provided, use the last action's from other user
     const actionCreationTime =
-        reportAction?.created || (latestReportActionFromOtherUsers?.created ?? getReportLastVisibleActionCreated(report, transactionThreadReport) ?? DateUtils.getDBTime(0));
+        reportAction?.created ?? latestReportActionFromOtherUsers?.created ?? getReportLastVisibleActionCreated(report, transactionThreadReport) ?? DateUtils.getDBTime(0);
 
     // We subtract 1 millisecond so that the lastReadTime is updated to just before a given reportAction's created date
     // For example, if we want to mark a report action with ID 100 and created date '2014-04-01 16:07:02.999' unread, we set the lastReadTime to '2014-04-01 16:07:02.998'

src/libs/interceptAnonymousUser.ts

@@ -1,16 +1,17 @@
-import * as Session from './actions/Session';
+import {InteractionManager} from 'react-native';
+import {hideContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
+import {isAnonymousUser, signOutAndRedirectToSignIn} from './actions/Session';
 
-/**
- * Checks if user is anonymous. If true, shows the sign in modal, else,
- * executes the callback.
- */
-const interceptAnonymousUser = (callback: () => void) => {
-    const isAnonymousUser = Session.isAnonymousUser();
-    if (isAnonymousUser) {
-        Session.signOutAndRedirectToSignIn();
+function interceptAnonymousUser(callback: () => void, isAnonymousAction = false) {
+    if (isAnonymousUser() && !isAnonymousAction) {
+        hideContextMenu(false);
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        InteractionManager.runAfterInteractions(() => {
+            signOutAndRedirectToSignIn();
+        });
     } else {
         callback();
     }
-};
+}
 
 export default interceptAnonymousUser;