feat: Extend shift+click range selection to Search results and report transaction lists

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -54,7 +54,7 @@ type MoneyRequestReportTransactionItemProps = {
     isSelectionModeEnabled: boolean;
 
     /** Callback function triggered upon pressing a transaction checkbox. */
-    toggleTransaction: (transactionID: string) => void;
+    toggleTransaction: (transactionID: string, shiftKey?: boolean) => void;
 
     /** Callback function triggered upon pressing a transaction. */
     handleOnPress: (transactionID: string) => void;

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -92,6 +92,7 @@ import MoneyRequestReportTransactionItem from './MoneyRequestReportTransactionIt
 import MoneyRequestReportTransactionLongPressModal from './MoneyRequestReportTransactionLongPressModal';
 import MoneyRequestReportUnifiedList from './MoneyRequestReportUnifiedList';
 import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
+import useReportTransactionShiftRange from './useReportTransactionShiftRange';
 
 type TransactionWithOptionalHighlight = OnyxTypes.Transaction & {
     /** Whether the transaction should be highlighted, when it is added to the report */
@@ -367,19 +368,6 @@ function MoneyRequestReportTransactionList({
     useHandleSelectionMode(selectedTransactionIDs);
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
 
-    const toggleTransaction = useCallback(
-        (transactionID: string) => {
-            let newSelectedTransactionIDs = selectedTransactionIDs;
-            if (selectedTransactionIDs.includes(transactionID)) {
-                newSelectedTransactionIDs = selectedTransactionIDs.filter((t) => t !== transactionID);
-            } else {
-                newSelectedTransactionIDs = [...selectedTransactionIDs, transactionID];
-            }
-            setSelectedTransactions(newSelectedTransactionIDs);
-        },
-        [setSelectedTransactions, selectedTransactionIDs],
-    );
-
     const isTransactionSelected = useCallback((transactionID: string) => selectedTransactionIDs.includes(transactionID), [selectedTransactionIDs]);
 
     useFocusEffect(
@@ -434,9 +422,7 @@ function MoneyRequestReportTransactionList({
 
     useEffect(() => {
         clearSelectedTransactions(true);
-        // We don't want to run the effect on change of clearSelectedTransactions since it can cause an infinite loop.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reportID]);
+    }, [reportID, clearSelectedTransactions]);
 
     const [sortConfig, setSortConfig] = useState<SortedTransactions>({
         sortBy: CONST.SEARCH.TABLE_COLUMNS.DATE,
@@ -579,12 +565,23 @@ function MoneyRequestReportTransactionList({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [resolvedTransactions, currentGroupBy, report?.reportID, report?.currency, localeCompare, shouldGroupTransactions]);
 
-    const visualOrderTransactionIDs = useMemo(() => {
-        if (!shouldGroupTransactions || groupedTransactions.length === 0) {
-            return sortedTransactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID);
-        }
-        return groupedTransactions.flatMap((group) => group.transactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID));
-    }, [groupedTransactions, sortedTransactions, shouldGroupTransactions]);
+    const visualOrderTransactions = useMemo(
+        () => (shouldGroupTransactions && groupedTransactions.length > 0 ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions),
+        [groupedTransactions, resolvedTransactions, shouldGroupTransactions],
+    );
+
+    const visualOrderTransactionIDs = useMemo(
+        () => visualOrderTransactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID),
+        [visualOrderTransactions],
+    );
+
+    const {toggleTransaction, toggleGroup, toggleAll} = useReportTransactionShiftRange({
+        reportID,
+        transactions: visualOrderTransactions,
+        selectedTransactionIDs,
+        setSelectedTransactions,
+        clearSelectedTransactions,
+    });
 
     // Primitive proxy for visualOrderTransactionIDs used as the effect dependency below.
     // Other callers (e.g. TransactionDuplicateReview.onPreviewPressed) can write to the same
@@ -642,18 +639,9 @@ function MoneyRequestReportTransactionList({
             if (!group) {
                 return;
             }
-            const groupTransactionIDs = group.transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID);
-            const anySelected = groupTransactionIDs.some((id) => selectedTransactionIDs.includes(id));
-
-            let newSelectedTransactionIDs = selectedTransactionIDs;
-            if (anySelected) {
-                newSelectedTransactionIDs = selectedTransactionIDs.filter((id) => !groupTransactionIDs.includes(id));
-            } else {
-                newSelectedTransactionIDs = [...selectedTransactionIDs, ...groupTransactionIDs];
-            }
-            setSelectedTransactions(newSelectedTransactionIDs);
+            toggleGroup(group.transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
         },
-        [groupedTransactions, selectedTransactionIDs, setSelectedTransactions],
+        [groupedTransactions, toggleGroup],
     );
 
     /**
@@ -911,13 +899,7 @@ function MoneyRequestReportTransactionList({
                     ]}
                 >
                     <Checkbox
-                        onPress={() => {
-                            if (selectedTransactionIDs.length !== 0) {
-                                clearSelectedTransactions(true);
-                            } else {
-                                setSelectedTransactions(transactionsWithoutPendingDelete.map((t) => t.transactionID));
-                            }
-                        }}
+                        onPress={() => toggleAll(transactionsWithoutPendingDelete.map((t) => t.transactionID))}
                         accessibilityLabel={translate('accessibilityHints.selectAllTransactions')}
                         isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
                         isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}

src/components/MoneyRequestReportView/useReportTransactionShiftRange.ts

@@ -0,0 +1,101 @@
+/**
+ * The report list's selection gestures, so a click writes the selection and moves the range session together.
+ * Splitting them is how the two drift: a selection the session never saw is one a later shift+click cannot narrow.
+ */
+import useShiftRangeSelection from '@hooks/useShiftRangeSelection';
+
+import {applyShiftRangeBatchToKeySet} from '@libs/shiftRangeSelection';
+import {isTransactionPendingDelete} from '@libs/TransactionUtils';
+
+import type * as OnyxTypes from '@src/types/onyx';
+
+import {useEffect} from 'react';
+
+type ReportTransactionShiftRangeParams = {
+    /** Dropping the session with it, since the list is reused for the next report and a transaction can be on both */
+    reportID: string | undefined;
+
+    /** In the order they render, which is the order a range spans */
+    transactions: OnyxTypes.Transaction[];
+
+    selectedTransactionIDs: string[];
+
+    setSelectedTransactions: (transactionIDs: string[]) => void;
+
+    /** Clearing goes through its own action rather than an empty write, so the hook takes it to own both branches */
+    clearSelectedTransactions: (shouldClearIDs: true) => void;
+};
+
+type ReportTransactionShiftRange = {
+    /** Extends a range when the click carried Shift, and toggles the one row otherwise */
+    toggleTransaction: (transactionID: string, shiftKey?: boolean) => void;
+
+    /** Toggles a whole group, and records it as the block the next shift+click may narrow */
+    toggleGroup: (groupTransactionIDs: string[]) => void;
+
+    /** Select All, and the clear that a second press means */
+    toggleAll: (selectableTransactionIDs: string[]) => void;
+};
+
+function useReportTransactionShiftRange({
+    reportID,
+    transactions,
+    selectedTransactionIDs,
+    setSelectedTransactions,
+    clearSelectedTransactions,
+}: ReportTransactionShiftRangeParams): ReportTransactionShiftRange {
+    // The engine asks this per row while resolving an anchor, so the lookup has to be constant time.
+    const selectedTransactionIDsSet = new Set(selectedTransactionIDs);
+    const transactionsByID = new Map(transactions.map((transaction) => [transaction.transactionID, transaction]));
+
+    const rangeApi = useShiftRangeSelection<OnyxTypes.Transaction>({
+        items: transactions,
+        getItemKey: (transaction) => transaction.transactionID ?? null,
+        isItemSelected: (transaction) => selectedTransactionIDsSet.has(transaction.transactionID),
+        isDisabledItem: (transaction) => isTransactionPendingDelete(transaction),
+        onApplyRange: (batch) => setSelectedTransactions(applyShiftRangeBatchToKeySet(batch, selectedTransactionIDs, (transaction) => transaction.transactionID)),
+    });
+
+    useEffect(() => {
+        rangeApi.clearAnchor();
+    }, [reportID, rangeApi]);
+
+    const toggleTransaction = (transactionID: string, shiftKey?: boolean) => {
+        const item = transactionsByID.get(transactionID);
+        if (item && rangeApi.applyShiftClick(item, shiftKey)) {
+            return;
+        }
+        setSelectedTransactions(selectedTransactionIDsSet.has(transactionID) ? selectedTransactionIDs.filter((id) => id !== transactionID) : [...selectedTransactionIDs, transactionID]);
+        if (item) {
+            rangeApi.notifyAnchor(item);
+        }
+    };
+
+    const toggleGroup = (groupTransactionIDs: string[]) => {
+        const groupTransactionIDSet = new Set(groupTransactionIDs);
+        const anySelected = groupTransactionIDs.some((id) => selectedTransactionIDsSet.has(id));
+        setSelectedTransactions(anySelected ? selectedTransactionIDs.filter((id) => !groupTransactionIDSet.has(id)) : [...selectedTransactionIDs, ...groupTransactionIDs]);
+        if (anySelected) {
+            // Deselecting paints no block, so reset instead of leaving a stale span to collapse.
+            rangeApi.clearAnchor();
+            return;
+        }
+        // Just this block: seeding the whole selection would span unrelated rows and deselect them.
+        rangeApi.seedRangeFromSelection(groupTransactionIDs);
+    };
+
+    const toggleAll = (selectableTransactionIDs: string[]) => {
+        if (selectedTransactionIDs.length !== 0) {
+            clearSelectedTransactions(true);
+            rangeApi.clearAnchor();
+            return;
+        }
+        setSelectedTransactions(selectableTransactionIDs);
+        // A full-list block, so the next shift+click collapses the selection onto the span it lands in.
+        rangeApi.seedFullRange();
+    };
+
+    return {toggleTransaction, toggleGroup, toggleAll};
+}
+
+export default useReportTransactionShiftRange;

src/components/Search/ExpenseGroupedSearchView.tsx

@@ -21,6 +21,7 @@ import type {SearchListItem} from './SearchList/ListItem/types';
 import type {CommonSearchViewProps, TransactionViewExtras} from './searchViewProps';
 import type {SearchQueryJSON, SelectedTransactions} from './types';
 
+import {NO_OPEN_GROUPS} from './hooks/useOpenGroupsRegistry';
 import useSearchListViewState from './hooks/useSearchListViewState';
 import AnimatedExitRow from './primitives/AnimatedExitRow';
 import SelectionTopBar from './primitives/SelectionTopBar';
@@ -29,6 +30,7 @@ import GroupChildrenContainer from './SearchList/ListItem/GroupChildrenContainer
 import GroupHeader from './SearchList/ListItem/GroupHeader';
 import TransactionGroupListItem from './SearchList/ListItem/TransactionGroupListItem';
 import {isGroupChildrenContainerItem, isGroupHeaderItem} from './SearchList/ListItem/types';
+import useOpenGroupsForShiftRange from './SearchList/ListItem/useOpenGroupsForShiftRange';
 import SearchListViewLayout from './SearchListViewLayout';
 
 type ExpenseGroupedSearchViewProps = CommonSearchViewProps & TransactionViewExtras;
@@ -134,6 +136,9 @@ function ExpenseGroupedSearchView({
             return next;
         });
 
+    // Only the split layout renders children as their own rows.
+    useOpenGroupsForShiftRange(shouldSplit ? expandedGroups : NO_OPEN_GROUPS);
+
     const [visibleColumns] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: columnsSelector});
 
     const {

src/components/Search/SearchContext.tsx

@@ -8,6 +8,7 @@ import {
     SearchRowSelectionActionsContext,
     SearchSelectionActionsContext,
     SearchSelectionContext,
+    SearchShiftRangeGroupsContext,
 } from './SearchContextDefinitions';
 
 // Lightweight public surface for search contexts.
@@ -43,6 +44,10 @@ function useSearchRowSelectionActions() {
     return useContext(SearchRowSelectionActionsContext);
 }
 
+function useSearchShiftRangeGroups() {
+    return useContext(SearchShiftRangeGroupsContext);
+}
+
 export {
     SearchQueryContext,
     SearchQueryActionsContext,
@@ -57,4 +62,5 @@ export {
     useSearchSelectionContext,
     useSearchSelectionActions,
     useSearchRowSelectionActions,
+    useSearchShiftRangeGroups,
 };

src/components/Search/SearchContextDefinitions.ts

@@ -12,6 +12,7 @@ import type {
     SearchRowSelectionActionsValue,
     SearchSelectionActionsValue,
     SearchSelectionContextValue,
+    SearchShiftRangeGroupsActions,
 } from './types';
 
 // This file holds the bare React.createContext() calls so they can be imported by `@hooks/useOnyx`
@@ -62,6 +63,9 @@ const defaultSearchSelectionContext: SearchSelectionContextValue = {
 
 const defaultSearchSelectionActions: SearchSelectionActionsValue = {
     setSelectedTransactions: () => {},
+    getSelectedTransactions: () => defaultSearchSelectionContext.selectedTransactions,
+    getExcludedTransactions: () => defaultSearchSelectionContext.excludedTransactions,
+    getAreAllMatchingItemsSelected: () => defaultSearchSelectionContext.areAllMatchingItemsSelected,
     applySelection: () => {},
     setSelectedReports: () => {},
     setCurrentSelectedTransactionReportID: () => {},
@@ -75,13 +79,20 @@ const defaultRowSelectionActions: SearchRowSelectionActionsValue = {
     toggleAll: () => {},
 };
 
+const defaultSearchShiftRangeGroupsActions: SearchShiftRangeGroupsActions = {
+    addGroupToRange: () => {},
+    removeGroupFromRange: () => {},
+    registryGeneration: undefined,
+};
+
 const SearchQueryContext = React.createContext<SearchQueryContextValue>(defaultSearchQueryContext);
 const SearchQueryActionsContext = React.createContext<SearchQueryActionsValue>(defaultSearchQueryActions);
 const SearchResultsContext = React.createContext<SearchResultsContextValue>(defaultSearchResultsContext);
 const SearchResultsActionsContext = React.createContext<SearchResultsActionsValue>(defaultSearchResultsActions);
 const SearchSelectionContext = React.createContext<SearchSelectionContextValue>(defaultSearchSelectionContext);
 const SearchSelectionActionsContext = React.createContext<SearchSelectionActionsValue>(defaultSearchSelectionActions);
 const SearchRowSelectionActionsContext = React.createContext<SearchRowSelectionActionsValue>(defaultRowSelectionActions);
+const SearchShiftRangeGroupsContext = React.createContext<SearchShiftRangeGroupsActions>(defaultSearchShiftRangeGroupsActions);
 
 export {
     EMPTY_TRANSACTIONS_BY_REPORT_ID,
@@ -92,4 +103,5 @@ export {
     SearchSelectionContext,
     SearchSelectionActionsContext,
     SearchRowSelectionActionsContext,
+    SearchShiftRangeGroupsContext,
 };

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

@@ -352,9 +352,12 @@ function ExpenseReportListItemInner<TItem extends ListItem>({
         shouldShowMarkAsDoneCopy,
     ]);
 
-    const handleSelectionButtonPress = useCallback(() => {
-        onSelectionButtonPress?.(reportItem as unknown as TItem);
-    }, [onSelectionButtonPress, reportItem]);
+    const handleSelectionButtonPress = useCallback(
+        (shiftKey?: boolean) => {
+            onSelectionButtonPress?.(item, undefined, shiftKey);
+        },
+        [onSelectionButtonPress, item],
+    );
 
     const listItemPressableStyle = useMemo(
         () => [

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowNarrow.tsx

@@ -6,6 +6,8 @@ import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {getShiftKeyFromEvent} from '@libs/shiftRangeSelection';
+
 import CONST from '@src/CONST';
 
 import React from 'react';
@@ -24,7 +26,7 @@ function ExpenseReportListItemRowNarrow({item, onCheckboxPress = () => {}, canSe
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.pt3]}>
             {!!canSelectMultiple && (
                 <Checkbox
-                    onPress={onCheckboxPress}
+                    onPress={(event) => onCheckboxPress(getShiftKeyFromEvent(event))}
                     isChecked={isSelectAllChecked}
                     isIndeterminate={isIndeterminate}
                     containerStyle={styles.m0}

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx

@@ -17,6 +17,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import getBase62ReportID from '@libs/getBase62ReportID';
+import {getShiftKeyFromEvent} from '@libs/shiftRangeSelection';
 
 import variables from '@styles/variables';
 
@@ -302,7 +303,7 @@ function ExpenseReportListItemRowWide({
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                 {!!canSelectMultiple && (
                     <Checkbox
-                        onPress={onCheckboxPress}
+                        onPress={(event) => onCheckboxPress(getShiftKeyFromEvent(event))}
                         isChecked={isSelectAllChecked}
                         isIndeterminate={isIndeterminate}
                         containerStyle={styles.m0}

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

@@ -9,7 +9,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 type ExpenseReportListItemRowNarrowProps = {
     item: ExpenseReportListItemType;
     canSelectMultiple?: boolean;
-    onCheckboxPress?: () => void;
+    onCheckboxPress?: (shiftKey?: boolean) => void;
     isSelectAllChecked?: boolean;
     isIndeterminate?: boolean;
     isDisabledCheckbox?: boolean;

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

@@ -375,7 +375,7 @@ function TransactionGroupListExpandedImpl({
                                     shouldUseNarrowLayout={!isLargeScreenWidth}
                                     shouldShowCheckbox={!!canSelectMultiple}
                                     checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPANDED_TRANSACTION_ROW_CHECKBOX}
-                                    onCheckboxPress={() => onSelectionButtonPress?.(transaction as ListItem)}
+                                    onCheckboxPress={(_transactionID, shiftKey) => onSelectionButtonPress?.(transaction as ListItem, undefined, shiftKey)}
                                     columns={currentColumns}
                                     onButtonPress={(event) => handleButtonPress(transaction, event)}
                                     style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.tableRowHeight] : styles.p4, styles.flex1]}