Support CMD+click on search and workspace rows

src/components/Search/SearchList/ListItem/ActionCell/index.tsx

@@ -3,6 +3,7 @@ import Button from '@components/Button';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import CONST from '@src/CONST';
 import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import actionTranslationsMap from './actionTranslationsMap';
@@ -11,7 +12,7 @@ import PayActionCell from './PayActionCell';
 type ActionCellProps = {
     action?: SearchTransactionAction;
     isSelected?: boolean;
-    onButtonPress: () => void;
+    onButtonPress: (event?: ModifiedMouseEvent) => void;
     isChildListItem?: boolean;
     isLoading?: boolean;
     policyID?: string;

src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx

@@ -15,6 +15,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import {handleActionButtonPress} from '@userActions/Search';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -30,7 +31,7 @@ type ReportListItemHeaderProps<TItem extends ListItem> = SearchListActionProps &
     report: TransactionReportGroupListItemType;
 
     /** Callback to fire when the item is pressed */
-    onSelectRow: (item: TItem) => void;
+    onSelectRow: (item: TItem, event?: ModifiedMouseEvent) => void;
 
     /** Callback to fire when a checkbox is pressed */
     onCheckboxPress?: (item: TItem) => void;
@@ -74,7 +75,7 @@ type FirstRowReportHeaderProps<TItem extends ListItem> = {
     canSelectMultiple: boolean | undefined;
 
     /** Callback passed as goToItem in actionCell, triggered by clicking actionButton */
-    handleOnButtonPress?: () => void;
+    handleOnButtonPress?: (event?: ModifiedMouseEvent) => void;
 
     /** Color of the secondary avatar border, usually should match the container background */
     avatarBorderColor?: ColorValue;
@@ -228,11 +229,11 @@ function ReportListItemHeader<TItem extends ListItem>({
         StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
         theme.highlightBG;
 
-    const handleOnButtonPress = () => {
+    const handleOnButtonPress = (event?: ModifiedMouseEvent) => {
         handleActionButtonPress({
             hash: currentSearchHash,
             item: reportItem,
-            goToItem: () => onSelectRow(reportItem as unknown as TItem),
+            goToItem: () => onSelectRow(reportItem as unknown as TItem, event),
             snapshotReport,
             snapshotPolicy,
             policy: parentPolicy,

src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx

@@ -21,6 +21,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils';
+import openInternalRouteInNewTab, {isModifiedMousePress} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import Navigation from '@libs/Navigation/Navigation';
 import {getReportAction} from '@libs/ReportActionsUtils';
 import {getReportOrDraftReport} from '@libs/ReportUtils';
@@ -135,7 +137,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     const isActionColumnWide = transactions.some((transaction) => !!transaction.isActionColumnWide || isDeletedTransaction(transaction));
 
     const {markReportIDAsExpense} = useWideRHPActions();
-    const selectRow = onSelectRow as (item: TItem, transactionPreviewData?: TransactionPreviewData) => void;
+    const selectRow = onSelectRow as (item: TItem, transactionPreviewData?: TransactionPreviewData, event?: ModifiedMouseEvent) => void;
     const getTransactionPreviewData = (transactionItem: TransactionListItemType): TransactionPreviewData => {
         const parentReportAction = getReportAction(transactionItem?.reportID, transactionItem?.reportAction?.reportActionID);
         const parentReport = getReportOrDraftReport(transactionItem?.reportID, undefined, undefined, undefined, allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem?.reportID}`]);
@@ -156,12 +158,30 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
         };
     };
 
-    const openReportInRHP = (transactionItem: TransactionListItemType) => {
+    const openReportInRHP = (transactionItem: TransactionListItemType, event?: ModifiedMouseEvent) => {
         const backTo = Navigation.getActiveRoute();
         const reportID = getReportIDForTransaction(transactionItem, transactionItem?.reportAction?.childReportID);
 
         const navigateToTransactionThread = () => {
             if (!transactionItem?.reportAction?.childReportID) {
+                if (isModifiedMousePress(event)) {
+                    const targetReportID = createAndOpenSearchTransactionThread({
+                        item: transactionItem,
+                        introSelected,
+                        backTo,
+                        currentUserLogin: currentUserDetails.email ?? '',
+                        currentUserAccountID: currentUserDetails.accountID,
+                        betas,
+                        isSelfTourViewed,
+                        hasCompletedGuidedSetupFlow,
+                        IOUTransactionID: transactionItem?.reportAction?.childReportID,
+                        shouldNavigate: false,
+                    });
+                    if (targetReportID) {
+                        openInternalRouteInNewTab(ROUTES.SEARCH_REPORT.getRoute({reportID: targetReportID, backTo}), event);
+                    }
+                    return;
+                }
                 createAndOpenSearchTransactionThread({
                     item: transactionItem,
                     introSelected,
@@ -176,12 +196,16 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                 return;
             }
             markReportIDAsExpense(reportID);
-            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID, backTo}));
+            const route = ROUTES.SEARCH_REPORT.getRoute({reportID, backTo});
+            if (openInternalRouteInNewTab(route, event)) {
+                return;
+            }
+            Navigation.navigate(route);
         };
 
         // The arrow navigation in RHP is only allowed for group-by:reports
         if (!isExpenseReportType) {
-            selectRow(transactionItem as unknown as TItem, getTransactionPreviewData(transactionItem));
+            selectRow(transactionItem as unknown as TItem, getTransactionPreviewData(transactionItem), event);
             return;
         }
 
@@ -191,10 +215,13 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
 
         // When opening the transaction thread in RHP we need to find every other ID for the rest of transactions
         // to display prev/next arrows in RHP for navigation
-        setActiveTransactionIDs(siblingTransactionIDs).then(() => {
-            // If we're trying to open a transaction without a transaction thread, let's create the thread and navigate the user
+        if (isModifiedMousePress(event)) {
+            setActiveTransactionIDs(siblingTransactionIDs);
             navigateToTransactionThread();
-        });
+            return;
+        }
+
+        setActiveTransactionIDs(siblingTransactionIDs).then(navigateToTransactionThread);
     };
 
     const onShowMoreButtonPress = () => {
@@ -223,20 +250,20 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
         );
     }
 
-    const handleOnPress = (transaction: TransactionListItemType) => {
+    const handleOnPress = (transaction: TransactionListItemType, event?: ModifiedMouseEvent) => {
         if (isMobileSelectionModeEnabled) {
             onSelectionButtonPress?.(transaction as unknown as TItem);
             return;
         }
-        openReportInRHP(transaction);
+        openReportInRHP(transaction, event);
     };
 
-    const handleButtonPress = (transaction: TransactionListItemType) => {
+    const handleButtonPress = (transaction: TransactionListItemType, event?: ModifiedMouseEvent) => {
         if (transaction.action === CONST.SEARCH.ACTION_TYPES.UNDELETE) {
             onUndelete?.(transaction);
             return;
         }
-        openReportInRHP(transaction);
+        openReportInRHP(transaction, event);
     };
 
     const dataColumns = currentColumns.filter((column) => !column.startsWith(CONST.SEARCH.GROUP_COLUMN_PREFIX)) ?? [];
@@ -278,7 +305,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                         key={transaction.transactionID}
                     >
                         <PressableWithFeedback
-                            onPress={isDeletedOrPendingDelete && !canSelectMultiple ? undefined : () => handleOnPress(transaction)}
+                            onPress={isDeletedOrPendingDelete && !canSelectMultiple ? undefined : (event) => handleOnPress(transaction, event)}
                             disabled={isTransactionPendingDelete(transaction) && !transaction.isSelected}
                             onLongPress={() => onLongPress?.(transaction)}
                             accessibilityRole={CONST.ROLE.BUTTON}
@@ -315,12 +342,12 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                                     checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPANDED_TRANSACTION_ROW_CHECKBOX}
                                     onCheckboxPress={() => onSelectionButtonPress?.(transaction as unknown as TItem)}
                                     columns={currentColumns}
-                                    onButtonPress={() => handleButtonPress(transaction)}
+                                    onButtonPress={(event) => handleButtonPress(transaction, event)}
                                     style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.tableRowHeight] : styles.p4, styles.flex1]}
                                     isReportItemChild
                                     isInSingleTransactionReport={isInSingleTransactionReport}
                                     shouldShowBottomBorder={shouldShowBottomBorder}
-                                    onArrowRightPress={isDeletedOrPendingDelete ? undefined : () => openReportInRHP(transaction)}
+                                    onArrowRightPress={isDeletedOrPendingDelete ? undefined : (event) => openReportInRHP(transaction, event)}
                                     shouldShowArrowRightOnNarrowLayout
                                     reportActions={exportedReportActions}
                                     isAttendeesEnabledForMovingPolicy={isAttendeesEnabledForMovingPolicy}

src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx

@@ -27,6 +27,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {search} from '@libs/actions/Search';
 import type {TransactionPreviewData} from '@libs/actions/Search';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import {getSections} from '@libs/SearchUIUtils';
 import {mergeProhibitedViolations, shouldShowViolation} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
@@ -276,9 +277,9 @@ function TransactionGroupListItem<TItem extends ListItem>({
         });
     };
 
-    const onPress = () => {
+    const onPress = (event?: ModifiedMouseEvent) => {
         if (isExpenseReportType || transactions.length === 0) {
-            onSelectRow(item, transactionPreviewData);
+            onSelectRow(item, transactionPreviewData, event);
         }
         if (!isExpenseReportType) {
             handleToggle();
@@ -446,7 +447,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
             return (
                 <ReportListItemHeader
                     report={groupItem as TransactionReportGroupListItemType}
-                    onSelectRow={(listItem) => onSelectRow(listItem, transactionPreviewData)}
+                    onSelectRow={(listItem, event) => onSelectRow(listItem, transactionPreviewData, event)}
                     onCheckboxPress={handleSelectionButtonPress}
                     isDisabled={isDisabled}
                     isFocused={isFocused}

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx

@@ -138,7 +138,7 @@ function TransactionListItemNarrow<TItem extends ListItem>({
                             checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
                             style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
                             violations={transactionViolations}
-                            onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                            onArrowRightPress={isDeletedTransaction ? undefined : (event) => onSelectRow(item, transactionPreviewData, event)}
                             isHover={false}
                             nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                             reportActions={exportedReportActions}

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

@@ -136,7 +136,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                         checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
                         style={[styles.p3, styles.pv2, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
                         violations={transactionViolations}
-                        onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                        onArrowRightPress={isDeletedTransaction ? undefined : (event) => onSelectRow(item, transactionPreviewData, event)}
                         isHover={hovered}
                         nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                         reportActions={exportedReportActions}

src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx

@@ -162,7 +162,7 @@ function TransactionListItem<TItem extends ListItem>({
         linkedReportAction: transactionItem.reportAction,
     });
 
-    const handleOnPress = () => {
+    const handleOnPress = (event?: Parameters<typeof onSelectRow>[2]) => {
         // Consume the tap that dismissed an editing cell — a second tap will open the row.
         // We check the ref rather than isEditingCell because blur fires before onPress and resets the state.
         if (wasEditingOnMouseDownRef.current) {
@@ -176,7 +176,7 @@ function TransactionListItem<TItem extends ListItem>({
         if (isDeletedTransaction && !canSelectMultiple) {
             return;
         }
-        onSelectRow(item, transactionPreviewData);
+        onSelectRow(item, transactionPreviewData, event);
     };
 
     const handleOnMouseDown = (e?: React.MouseEvent) => {
@@ -190,11 +190,11 @@ function TransactionListItem<TItem extends ListItem>({
 
     const handleOnHoverIn = () => setShouldDisableHoverStyle(false);
 
-    const handleActionButtonPress = () => {
+    const handleActionButtonPress = (event?: Parameters<typeof onSelectRow>[2]) => {
         handleActionButtonPressUtil({
             hash: currentSearchHash,
             item: transactionItem,
-            goToItem: () => onSelectRow(item, transactionPreviewData),
+            goToItem: () => onSelectRow(item, transactionPreviewData, event),
             snapshotReport,
             snapshotPolicy,
             policy: parentPolicy,

src/components/Search/SearchList/ListItem/TransactionListItem/types.ts

@@ -4,11 +4,12 @@ import type {SearchColumnType} from '@components/Search/types';
 import type {ListItemFocusEventHandler} from '@components/SelectionList/ListItem/types';
 import type {ListItem} from '@components/SelectionList/types';
 import type {TransactionPreviewData} from '@libs/actions/Search';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import type {CardList, ReportAction, TransactionViolation} from '@src/types/onyx';
 
 type TransactionListItemInlineEditProps = {
     shouldDisableHoverStyle: boolean;
-    onPressRow: () => void;
+    onPressRow: (event?: ModifiedMouseEvent) => void;
     onMouseDownRow: (e?: MouseEvent) => void;
     onHoverInRow: () => void;
     onEditDate: (newDate: string) => void;
@@ -33,7 +34,7 @@ type TransactionListItemWideProps<TItem extends ListItem> = {
     showTooltip: boolean;
     isDisabled?: boolean | null;
     canSelectMultiple?: boolean;
-    onSelectRow: (item: TItem, transactionPreviewData?: TransactionPreviewData) => void;
+    onSelectRow: (item: TItem, transactionPreviewData?: TransactionPreviewData, event?: ModifiedMouseEvent) => void;
     onCheckboxPress?: (item: TItem) => void;
     onFocus?: ListItemFocusEventHandler;
     onLongPressRow?: (item: TItem) => void;
@@ -43,7 +44,7 @@ type TransactionListItemWideProps<TItem extends ListItem> = {
     isActionLoading?: boolean;
     isLastItem?: boolean;
     transactionViolations: TransactionViolation[];
-    handleActionButtonPress: () => void;
+    handleActionButtonPress: (event?: ModifiedMouseEvent) => void;
     transactionPreviewData: TransactionPreviewData;
     exportedReportActions: ReportAction[];
     nonPersonalAndWorkspaceCards?: CardList;

src/components/Search/SearchList/index.tsx

@@ -29,6 +29,7 @@ import useUndeleteTransactions from '@hooks/useUndeleteTransactions';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import DateUtils from '@libs/DateUtils';
+import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 import navigationRef from '@libs/Navigation/navigationRef';
 import {applySelectionToItem, getTableMinWidth} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
@@ -77,7 +78,7 @@ type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'conten
     SearchTableHeader?: React.JSX.Element;
 
     /** Callback to fire when a row is pressed */
-    onSelectRow: (item: SearchListItem, transactionPreviewData?: TransactionPreviewData) => void;
+    onSelectRow: (item: SearchListItem, transactionPreviewData?: TransactionPreviewData, event?: ModifiedMouseEvent) => void;
 
     /** Whether this is a multi-select list */
     canSelectMultiple: boolean;